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

Opinionated design system for Drivy's projects.

import { jsx, jsxs } from "react/jsx-runtime";
import classnames from "classnames";
import { Component } from "react";
import { Hint } from "./Hint.js";
function _define_property(obj, key, value) {
    if (key in obj) Object.defineProperty(obj, key, {
        value: value,
        enumerable: true,
        configurable: true,
        writable: true
    });
    else obj[key] = value;
    return obj;
}
let singletonIdCounter = 0;
const generateUniqueId = ()=>{
    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 /*#__PURE__*/ jsxs("div", {
                className: classnames("cobalt-FormField", fieldClassName, {
                    "cobalt-FormField--withHint": !!hint,
                    "cobalt-FormField--fullWidth": fullWidth
                }),
                children: [
                    label && /*#__PURE__*/ jsx("label", {
                        className: "cobalt-FormField__Label",
                        htmlFor: consolidatedId,
                        children: label
                    }),
                    /*#__PURE__*/ jsx(WrappedComponent, {
                        ...originalProps,
                        id: consolidatedId,
                        status: status
                    }),
                    hint && /*#__PURE__*/ jsx(Hint, {
                        status: status,
                        children: /*#__PURE__*/ jsx("span", {
                            dangerouslySetInnerHTML: {
                                __html: hint
                            }
                        })
                    })
                ]
            });
        }
    }
    _define_property(Wrapper, "Raw", WrappedComponent);
    return Wrapper;
};
const FieldWrapper = ({ label, hint, fullWidth, status, children })=>label || hint ? /*#__PURE__*/ jsxs("div", {
        className: classnames("cobalt-FormField", {
            "cobalt-FormField--withHint": hint,
            "cobalt-FormField--fullWidth": fullWidth
        }),
        children: [
            children,
            hint && /*#__PURE__*/ jsx(Hint, {
                status: status,
                children: /*#__PURE__*/ jsx("span", {
                    dangerouslySetInnerHTML: {
                        __html: hint
                    }
                })
            })
        ]
    }) : children;
FieldWrapper.labelClassName = "cobalt-FormField__Label";
export { FieldWrapper, withFieldLabelAndHint };

//# sourceMappingURL=field.js.map