@gravity-ui/uikit
Version:
Gravity UI base styling and components
53 lines (52 loc) • 3.81 kB
JavaScript
'use client';
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.Slider = void 0;
const tslib_1 = require("tslib");
const jsx_runtime_1 = require("react/jsx-runtime");
const React = tslib_1.__importStar(require("react"));
const hooks_1 = require("../../hooks/index.js");
const private_1 = require("../../hooks/private/index.js");
const theme_1 = require("../theme/index.js");
const cn_1 = require("../utils/cn.js");
const filterDOMProps_1 = require("../utils/filterDOMProps.js");
const BaseSlider_1 = require("./BaseSlider/BaseSlider.js");
const HandleWithTooltip_1 = require("./HandleWithTooltip/HandleWithTooltip.js");
const utils_1 = require("./utils.js");
require("./Slider.css");
const b = (0, cn_1.block)('slider');
exports.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 = (0, theme_1.useDirection)();
const innerState = (0, utils_1.prepareSliderInnerState)({
defaultValue,
max,
min,
step,
value,
markFormat,
marks,
tooltipDisplay,
tooltipFormat,
startPoint,
});
const [innerValue, setValue] = (0, hooks_1.useControlledState)(innerState.value, innerState.defaultValue, onUpdate);
const handleReset = React.useCallback((v) => {
setValue(v);
onUpdateComplete?.(v);
}, [onUpdateComplete, setValue]);
const inputRef = (0, private_1.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) : ((0, jsx_runtime_1.jsx)(HandleWithTooltip_1.HandleWithTooltip, { originHandle: originHandle, originHandleProps: originHandleProps, stateModifiers: stateModifiers, className: b('tooltip'), tooltipFormat: innerState.tooltipFormat }));
return ((0, jsx_runtime_1.jsxs)(React.Fragment, { children: [handle, (0, jsx_runtime_1.jsx)("input", { ref: inputRef, type: "hidden", name: name, form: form, value: originHandleProps.value, disabled: disabled })] }));
};
return ((0, jsx_runtime_1.jsxs)("div", { ...(0, filterDOMProps_1.filterDOMProps)(restProps), className: b(null, className), style: style, ref: ref, children: [(0, jsx_runtime_1.jsx)("div", { className: b('top', { size, 'tooltip-display': tooltipDisplay }) }), (0, jsx_runtime_1.jsx)(BaseSlider_1.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 && ((0, jsx_runtime_1.jsx)("div", { className: b('error', { size }), children: errorMessage }))] }));
});
//# sourceMappingURL=Slider.js.map