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

Beans' product component library

import * as React from 'react';
import { classNames, useUid, useUncontrolled } from '@/utils';
export 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 (React.createElement("label", { htmlFor: uid },
        React.createElement("p", { className: labelClassName }, label),
        React.createElement("div", { className: classNames('merged-inputs') },
            React.createElement("input", { id: uid, ref: ref, min: min, max: max, name: name, step: step, type: "range", disabled: disabled, onChange: handleChange, defaultValue: defaultValue, style: Object.assign(Object.assign({}, inputStyle), { backgroundImage: `linear-gradient(to right, rgb(0 0 0), rgb(0 0 0) ${fillPercentage}%, rgb(209 209 209) ${fillPercentage}%)` }) }),
            React.createElement("span", { "data-role": "input-value" }, internalValue)),
        React.createElement("small", null, helpText)));
});
RangeField.displayName = 'RangeField';