@drivy/cobalt/components/Form/Slider.js

Opinionated design system for Drivy's projects.

import { jsx, jsxs } from 'react/jsx-runtime';
import { Slider as Slider$1 } from '@ark-ui/react';
import cx from 'classnames';
import { useState, useMemo } from 'react';
import { FieldWrapper } from './field.js';

const MIN_BAR_HEIGHT_PERCENT = 3;
const Slider = ({ defaultValue: _defaultValue, value: _value, min, max, disabled, onValueChange, renderValue, ariaLabel, hint, label, status, className, step, bars, ...restProps }) => {
    const sliderMinValue = min || 0;
    const sliderMaxValue = max || 100;
    const value = Array.isArray(_value)
        ? _value
        : _value !== undefined && !Number.isNaN(_value)
            ? [_value]
            : undefined;
    const defaultValue = Array.isArray(_defaultValue)
        ? _defaultValue
        : _defaultValue !== undefined && !Number.isNaN(_defaultValue)
            ? [_defaultValue]
            : undefined;
    function initValue() {
        if (value !== undefined)
            return value;
        if (defaultValue !== undefined)
            return defaultValue;
        if (min !== undefined)
            return [min];
        return [0];
    }
    const [sliderValue, setSliderValue] = useState(() => initValue());
    const barsData = useMemo(() => {
        if (!bars || bars.step <= 0 || sliderMinValue >= sliderMaxValue)
            return null;
        const barsCount = (sliderMaxValue - sliderMinValue) / bars.step;
        let maxBars = 0;
        const rawValues = [];
        for (let i = 0; i < barsCount; i++) {
            const binValue = bars.bins[i * bars.step + sliderMinValue];
            if (binValue) {
                maxBars = Math.max(maxBars, binValue);
                rawValues.push(binValue);
            }
            else {
                rawValues.push(0);
            }
        }
        if (maxBars === 0) {
            return rawValues.map(() => 0); // all values are zero, so all bars are 0%
        }
        const scaleFactor = 100 - MIN_BAR_HEIGHT_PERCENT;
        return rawValues.map((v) => v > 0 ? (v / maxBars) * scaleFactor + MIN_BAR_HEIGHT_PERCENT : 0);
    }, [bars, sliderMinValue, sliderMaxValue]);
    return (jsx(FieldWrapper, { ...restProps, status: status, label: label, hint: hint, children: jsxs(Slider$1.Root, { ...restProps, className: cx("cobalt-slider", className, {
                "cobalt-slider--disabled": disabled,
                "cobalt-slider--withHint": hint,
                "cobalt-slider--withBars": !!bars,
            }), thumbAlignment: "contain", disabled: disabled, "aria-label": [ariaLabel], value: sliderValue, min: min, max: max, step: step, 
            // Need to force disbplaying in smaller spaces like popovers
            thumbSize: {
                width: 24,
                height: 24,
            }, onValueChange: ({ value: newValueArr }) => {
                setSliderValue(newValueArr);
                const newValue = newValueArr.length === 1 ? newValueArr[0] : newValueArr;
                onValueChange === null || onValueChange === void 0 ? void 0 : onValueChange(newValue);
            }, children: [jsx(Slider$1.Label, { className: FieldWrapper.labelClassName, children: label }), renderValue && (jsx("div", { className: "cobalt-slider__value-container", children: renderValue((sliderValue.length === 1 ? sliderValue[0] : sliderValue), status) })), jsxs(Slider$1.Control, { children: [jsx("div", { className: "cobalt-slider__bars", children: barsData === null || barsData === void 0 ? void 0 : barsData.map((val, i) => {
                                const barsStep = (bars === null || bars === void 0 ? void 0 : bars.step) || 1;
                                const barPosition = i * barsStep + sliderMinValue;
                                return (jsx("div", { className: cx("cobalt-slider__bar", {
                                        "cobalt-slider__bar--active": barPosition >= sliderValue[0] &&
                                            (i + 1) * barsStep + sliderMinValue <= sliderValue[1],
                                    }), style: {
                                        width: `calc(${100 / barsData.length}%)`,
                                        height: `${val}%`,
                                    } }, `bar-${barPosition}`));
                            }) }), jsx(Slider$1.Track, { children: jsx(Slider$1.Range, {}) }), sliderValue.map((_v, i) => (jsx(Slider$1.Thumb, { index: i, children: jsx(Slider$1.HiddenInput, {}) }, `thumb-${_v}`)))] })] }) }));
};
const SliderValueMeta = ({ children }) => {
    return jsx("span", { className: "cobalt-slider__value-meta", children: children });
};

export { SliderValueMeta, Slider as default };
//# sourceMappingURL=Slider.js.map