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

Beans' product component library

import * as React from 'react';
import { classNames } from '../../utils/classNames/index.js';
import { useUncontrolled } from '../../utils/useUncontrolled/index.js';
import { useUid } from '../../utils/useUid/index.js';
import '@floating-ui/react';

const RangeField = React.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] = useUncontrolled({
    value,
    defaultValue,
    finalValue: defaultValue,
    onChange
  });
  const [fillPercentage, setFillPercentage] = React.useState(0);
  const uid = useUid(id);
  const handleChange = (event) => {
    setInternalValue(event.currentTarget.value);
  };
  React.useEffect(() => {
    const percent = 100 * (internalValue - min) / (max - min);
    setFillPercentage(percent);
  }, [internalValue]);
  return /* @__PURE__ */ React.createElement("label", { htmlFor: uid }, /* @__PURE__ */ React.createElement("p", { className: labelClassName }, label), /* @__PURE__ */ React.createElement("div", { className: classNames("merged-inputs") }, /* @__PURE__ */ React.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.createElement("span", { "data-role": "input-value" }, internalValue)), /* @__PURE__ */ React.createElement("small", null, helpText));
});
RangeField.displayName = "RangeField";

export { RangeField };
//# sourceMappingURL=RangeField.js.map