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

Beans' product component library

'use strict';

var React = require('react');
var index = require('../../utils/useUncontrolled/index.js');
var index$1 = require('../../utils/useUid/index.js');
require('@floating-ui/react');

function _interopNamespaceDefault(e) {
  var n = Object.create(null);
  if (e) {
    for (var k in e) {
      n[k] = e[k];
    }
  }
  n.default = e;
  return Object.freeze(n);
}

var React__namespace = /*#__PURE__*/_interopNamespaceDefault(React);

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

exports.ColorField = ColorField;
//# sourceMappingURL=ColorField.js.map