@gravity-ui/uikit
Version:
Gravity UI base styling and components
49 lines (48 loc) • 3.45 kB
JavaScript
'use client';
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import * as React from 'react';
import { useControlledState } from "../../hooks/index.js";
import { useFormResetHandler } from "../../hooks/private/index.js";
import { useDirection } from "../theme/index.js";
import { block } from "../utils/cn.js";
import { filterDOMProps } from "../utils/filterDOMProps.js";
import { BaseSlider } from "./BaseSlider/BaseSlider.js";
import { HandleWithTooltip } from "./HandleWithTooltip/HandleWithTooltip.js";
import { prepareSliderInnerState } from "./utils.js";
import "./Slider.css";
const b = block('slider');
export const Slider = React.forwardRef(function Slider({ value, defaultValue, size = 'm', min = 0, max = 100, step = 1, markFormat, marks = 2, tooltipDisplay, tooltipFormat = markFormat, errorMessage, validationState, disabled = false, startPoint, onBlur, onUpdate, onUpdateComplete, onFocus, autoFocus = false, tabIndex, className, style, qa, apiRef, 'aria-label': ariaLabelForHandle, 'aria-labelledby': ariaLabelledByForHandle, name, form, ...restProps }, ref) {
const direction = useDirection();
const innerState = prepareSliderInnerState({
defaultValue,
max,
min,
step,
value,
markFormat,
marks,
tooltipDisplay,
tooltipFormat,
startPoint,
});
const [innerValue, setValue] = useControlledState(innerState.value, innerState.defaultValue, onUpdate);
const handleReset = React.useCallback((v) => {
setValue(v);
onUpdateComplete?.(v);
}, [onUpdateComplete, setValue]);
const inputRef = useFormResetHandler({ initialValue: innerValue, onReset: handleReset });
const stateModifiers = {
size,
error: validationState === 'invalid' && !disabled,
disabled,
'tooltip-display': innerState.tooltipDisplay,
rtl: direction === 'rtl',
'no-marks': Array.isArray(marks) ? marks.length === 0 : marks === 0,
};
const handleRender = (originHandle, originHandleProps) => {
const handle = innerState.tooltipDisplay === 'off' ? (originHandle) : (_jsx(HandleWithTooltip, { originHandle: originHandle, originHandleProps: originHandleProps, stateModifiers: stateModifiers, className: b('tooltip'), tooltipFormat: innerState.tooltipFormat }));
return (_jsxs(React.Fragment, { children: [handle, _jsx("input", { ref: inputRef, type: "hidden", name: name, form: form, value: originHandleProps.value, disabled: disabled })] }));
};
return (_jsxs("div", { ...filterDOMProps(restProps), className: b(null, className), style: style, ref: ref, children: [_jsx("div", { className: b('top', { size, 'tooltip-display': tooltipDisplay }) }), _jsx(BaseSlider, { ref: apiRef, value: innerValue, min: innerState.min, max: innerState.max, step: innerState.step, range: innerState.range, disabled: disabled, marks: innerState.marks, startPoint: innerState.startPoint, onBlur: onBlur, onFocus: onFocus, onChange: setValue, onChangeComplete: onUpdateComplete, stateModifiers: stateModifiers, autoFocus: autoFocus, tabIndex: tabIndex, "data-qa": qa, handleRender: handleRender, reverse: stateModifiers.rtl, ariaLabelForHandle: ariaLabelForHandle, ariaLabelledByForHandle: ariaLabelledByForHandle }), stateModifiers.error && errorMessage && (_jsx("div", { className: b('error', { size }), children: errorMessage }))] }));
});
//# sourceMappingURL=Slider.js.map