@drivy/cobalt/components/Form/field.js

Opinionated design system for Drivy's projects.

import { jsxs, jsx } from 'react/jsx-runtime';
import cx from 'classnames';
import { Component } from 'react';
import { Hint } from './Hint.js';

let singletonIdCounter = 0;
const generateUniqueId = () => {
    singletonIdCounter = singletonIdCounter + 1;
    return `cobaltFormField${singletonIdCounter}`;
};
const withFieldLabelAndHint = (WrappedComponent) => {
    class Wrapper extends Component {
        render() {
            const { id, label, hint, status, fieldClassName, fullWidth, ...originalProps } = this.props;
            const consolidatedId = id ? id : generateUniqueId();
            return (jsxs("div", { className: cx("cobalt-FormField", fieldClassName, {
                    "cobalt-FormField--withHint": !!hint,
                    "cobalt-FormField--fullWidth": fullWidth,
                }), children: [label && (jsx("label", { className: "cobalt-FormField__Label", htmlFor: consolidatedId, children: label })), jsx(WrappedComponent, { ...originalProps, id: consolidatedId, status: status }), hint && (jsx(Hint, { status: status, children: jsx("span", { dangerouslySetInnerHTML: { __html: hint } }) }))] }));
        }
    }
    Wrapper.Raw = WrappedComponent;
    return Wrapper;
};
const FieldWrapper = ({ label, hint, fullWidth, status, children, }) => label || hint ? (jsxs("div", { className: cx("cobalt-FormField", {
        "cobalt-FormField--withHint": hint,
        "cobalt-FormField--fullWidth": fullWidth,
    }), children: [children, hint && (jsx(Hint, { status: status, children: jsx("span", { dangerouslySetInnerHTML: { __html: hint } }) }))] })) : (children);
FieldWrapper.labelClassName = "cobalt-FormField__Label";

export { FieldWrapper, withFieldLabelAndHint };
//# sourceMappingURL=field.js.map