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

Beans' product component library

'use strict';

var React = require('react');
var index$2 = require('../../utils/classNames/index.js');
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 RangeField = React__namespace.forwardRef((props, ref) => {
  const {
    id,
    name,
    label,
    value,
    min = 0,
    helpText,
    disabled,
    onChange,
    step = 1,
    max = 100,
    inputStyle,
    labelClassName,
    defaultValue = 0
  } = props;
  const [internalValue, setInternalValue] = index.useUncontrolled({
    value,
    defaultValue,
    finalValue: defaultValue,
    onChange
  });
  const [fillPercentage, setFillPercentage] = React__namespace.useState(0);
  const uid = index$1.useUid(id);
  const handleChange = (event) => {
    setInternalValue(event.currentTarget.value);
  };
  React__namespace.useEffect(() => {
    const percent = 100 * (internalValue - min) / (max - min);
    setFillPercentage(percent);
  }, [internalValue]);
  return /* @__PURE__ */ React__namespace.createElement("label", { htmlFor: uid }, /* @__PURE__ */ React__namespace.createElement("p", { className: labelClassName }, label), /* @__PURE__ */ React__namespace.createElement("div", { className: index$2.classNames("merged-inputs") }, /* @__PURE__ */ React__namespace.createElement(
    "input",
    {
      id: uid,
      ref,
      min,
      max,
      name,
      step,
      type: "range",
      disabled,
      onChange: handleChange,
      defaultValue,
      style: {
        ...inputStyle,
        backgroundImage: `linear-gradient(to right, rgb(0 0 0), rgb(0 0 0) ${fillPercentage}%, rgb(209 209 209) ${fillPercentage}%)`
      }
    }
  ), /* @__PURE__ */ React__namespace.createElement("span", { "data-role": "input-value" }, internalValue)), /* @__PURE__ */ React__namespace.createElement("small", null, helpText));
});
RangeField.displayName = "RangeField";

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