@trellixio/roaster-coffee/lib/components/ColorField/ColorField.js

Beans' product component library

import * as React from 'react';
import { useUid, useUncontrolled } from '@/utils';
export const ColorField = React.forwardRef((props, ref) => {
    const { id, label, name, disabled, helpText, labelClassName, onChange, value, defaultValue } = props;
    const [internalValue, setInternalValue] = useUncontrolled({
        value,
        defaultValue,
        finalValue: '',
        onChange,
    });
    const uid = useUid(id);
    const handleChange = (event) => {
        setInternalValue(event.currentTarget.value);
    };
    return (React.createElement("label", { htmlFor: uid },
        React.createElement("p", { className: labelClassName }, label),
        React.createElement("div", { className: "merged-inputs" },
            React.createElement("div", { className: "color-picker merge-right" },
                React.createElement("span", { className: "color-preview", style: { backgroundColor: internalValue } }),
                React.createElement("input", { id: uid, ref: ref, type: "color", name: name, disabled: disabled, onChange: handleChange, value: internalValue })),
            React.createElement("input", { type: "text", className: "merge-left", value: internalValue, onChange: handleChange })),
        React.createElement("small", null, helpText)));
});
ColorField.displayName = 'ColorField';