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

Opinionated design system for Drivy's projects.

import React, { Component } from 'react';
import { Hint } from './Hint.js';
import cx from 'classnames';

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 (React.createElement("div", { className: cx("cobalt-FormField", fieldClassName, {
                    "cobalt-FormField--withHint": !!hint,
                    "cobalt-FormField--fullWidth": fullWidth,
                }) },
                label && (React.createElement("label", { className: "cobalt-FormField__Label", htmlFor: consolidatedId }, label)),
                React.createElement(WrappedComponent, { ...originalProps, id: consolidatedId, status: status }),
                hint && (React.createElement(Hint, { status: status },
                    React.createElement("span", { dangerouslySetInnerHTML: { __html: hint } })))));
        }
    }
    Wrapper.Raw = WrappedComponent;
    return Wrapper;
};
const FieldWrapper = ({ label, hint, fullWidth, status, children, }) => label || hint ? (React.createElement("div", { className: cx("cobalt-FormField", {
        "cobalt-FormField--withHint": hint,
        "cobalt-FormField--fullWidth": fullWidth,
    }) },
    children,
    hint && (React.createElement(Hint, { status: status },
        React.createElement("span", { dangerouslySetInnerHTML: { __html: hint } }))))) : (React.createElement(React.Fragment, null, children));
FieldWrapper.labelClassName = "cobalt-FormField__Label";

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