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

Opinionated design system for Drivy's projects.

import { jsx, jsxs } from "react/jsx-runtime";
import { Slider } from "@ark-ui/react";
import classnames from "classnames";
import { useMemo, useState } from "react";
import { FieldWrapper } from "./field.js";
const MIN_BAR_HEIGHT_PERCENT = 3;
const Slider_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 : void 0 === _value || Number.isNaN(_value) ? void 0 : [
        _value
    ];
    const defaultValue = Array.isArray(_defaultValue) ? _defaultValue : void 0 === _defaultValue || Number.isNaN(_defaultValue) ? void 0 : [
        _defaultValue
    ];
    function initValue() {
        if (void 0 !== value) return value;
        if (void 0 !== defaultValue) return defaultValue;
        if (void 0 !== min) 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 (0 === maxBars) return rawValues.map(()=>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 /*#__PURE__*/ jsx(FieldWrapper, {
        ...restProps,
        status: status,
        label: label,
        hint: hint,
        children: /*#__PURE__*/ jsxs(Slider.Root, {
            ...restProps,
            className: classnames("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,
            thumbSize: {
                width: 24,
                height: 24
            },
            onValueChange: ({ value: newValueArr })=>{
                setSliderValue(newValueArr);
                const newValue = 1 === newValueArr.length ? newValueArr[0] : newValueArr;
                onValueChange?.(newValue);
            },
            children: [
                /*#__PURE__*/ jsx(Slider.Label, {
                    className: FieldWrapper.labelClassName,
                    children: label
                }),
                renderValue && /*#__PURE__*/ jsx("div", {
                    className: "cobalt-slider__value-container",
                    children: renderValue(1 === sliderValue.length ? sliderValue[0] : sliderValue, status)
                }),
                /*#__PURE__*/ jsxs(Slider.Control, {
                    children: [
                        /*#__PURE__*/ jsx("div", {
                            className: "cobalt-slider__bars",
                            children: barsData?.map((val, i)=>{
                                const barsStep = bars?.step || 1;
                                const barPosition = i * barsStep + sliderMinValue;
                                return /*#__PURE__*/ jsx("div", {
                                    className: classnames("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}`);
                            })
                        }),
                        /*#__PURE__*/ jsx(Slider.Track, {
                            children: /*#__PURE__*/ jsx(Slider.Range, {})
                        }),
                        sliderValue.map((_v, i)=>/*#__PURE__*/ jsx(Slider.Thumb, {
                                index: i,
                                children: /*#__PURE__*/ jsx(Slider.HiddenInput, {})
                            }, `thumb-${_v}`))
                    ]
                })
            ]
        })
    });
};
const Form_Slider = Slider_Slider;
const SliderValueMeta = ({ children })=>/*#__PURE__*/ jsx("span", {
        className: "cobalt-slider__value-meta",
        children: children
    });
export default Form_Slider;
export { SliderValueMeta };

//# sourceMappingURL=Slider.js.map