@yandex/ui/Slider/Slider.js

Yandex UI components

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.Slider = void 0;
var tslib_1 = require("tslib");
var react_1 = tslib_1.__importStar(require("react"));
var react_range_1 = require("react-range");
var getTestId_1 = require("../internal/utils/getTestId");
var render_override_1 = require("../lib/render-override");
var Slider_utils_1 = require("./Slider.utils");
var Slider_const_1 = require("./Slider.const");
var Slider_Thumb_1 = require("./Thumb/Slider-Thumb");
var Slider_TickLabel_1 = require("./TickLabel/Slider-TickLabel");
require("./Slider.css");
var $renderTickLabel = function (props, Tick) {
    return props.isFirst || props.isLast ? react_1.createElement(Tick, props) : null;
};
/**
 * Компонент, позволяющий выбрать одно или два значения в пределах заданного диапазона.
 *
 * @param {SliderProps} props - Свойства компонента.
 */
exports.Slider = react_1.forwardRef(function (props, ref) {
    var className = props.className, _a = props.disabled, disabled = _a === void 0 ? false : _a, _b = props.filled, filled = _b === void 0 ? false : _b, _c = props.max, max = _c === void 0 ? 100 : _c, _d = props.min, min = _d === void 0 ? 0 : _d, onChange = props.onChange, onInput = props.onInput, renderThumb = props.renderThumb, _e = props.renderTickLabel, renderTickLabel = _e === void 0 ? $renderTickLabel : _e, _f = props.reverse, reverse = _f === void 0 ? false : _f, _g = props.showTicks, showTicks = _g === void 0 ? false : _g, _h = props.showTickValues, showTickValues = _h === void 0 ? false : _h, _j = props.step, step = _j === void 0 ? 1 : _j, testId = props.testId, value = props.value, _k = props.vertical, vertical = _k === void 0 ? false : _k;
    var Thumb = render_override_1.useRenderOverride(Slider_Thumb_1.SliderThumb, renderThumb);
    var TickLabel = render_override_1.useRenderOverride(Slider_TickLabel_1.SliderTickLabel, renderTickLabel);
    // Кэшируем getTicks чтобы на каждое обновление не создавать массив.
    var ticks = react_1.useMemo(function () { return Slider_utils_1.getTicks(min, max, step); }, [min, max, step]);
    var direction = Slider_utils_1.getDirection(vertical, reverse);
    var values = Slider_utils_1.normalizeValue(value, min, max);
    var rangePosition = Slider_utils_1.getRangePosition(values, min, max, reverse);
    var $renderTrack = react_1.useCallback(function (_a) {
        var props = _a.props, children = _a.children;
        return (react_1.default.createElement("div", { className: Slider_const_1.cnSlider({ disabled: disabled, vertical: vertical, reverse: reverse, withTickValues: showTickValues }, [className]), "data-testid": getTestId_1.getTestId('host', testId), ref: ref },
            react_1.default.createElement("div", { className: Slider_const_1.cnSliderContainer, "data-testid": getTestId_1.getTestId('container', testId), onMouseDown: props.onMouseDown, onTouchStart: props.onTouchStart },
                react_1.default.createElement("div", { className: Slider_const_1.cnSliderTrack, "data-testid": getTestId_1.getTestId('track', testId), ref: props.ref },
                    filled && react_1.default.createElement("div", { className: Slider_const_1.cnSliderRange, style: rangePosition }),
                    children),
                (showTicks || showTickValues) && (react_1.default.createElement("div", { className: Slider_const_1.cnSlider('Ticks') }, ticks.map(function (tickValue, idx) { return (react_1.default.createElement("span", { key: idx, className: Slider_const_1.cnSlider('Tick', { visible: showTicks }) }, showTickValues && (react_1.default.createElement(TickLabel, { index: idx, isFirst: idx === 0, isLast: idx === ticks.length - 1 }, tickValue)))); }))))));
    }, [disabled, reverse, vertical, showTickValues, className, ref, filled, rangePosition, showTicks, ticks, testId]);
    var $renderThumb = react_1.useCallback(function (_a) {
        var _b = _a.props, style = _b.style, draggable = _b.draggable, ref = _b.ref, props = tslib_1.__rest(_b, ["style", "draggable", "ref"]), isDragged = _a.isDragged, value = _a.value;
        return (react_1.default.createElement(Thumb, tslib_1.__assign({}, props, { innerRef: ref, disabled: disabled, pressed: isDragged, value: value, testId: testId })));
    }, [disabled, testId]);
    return (react_1.default.createElement(react_range_1.Range, { direction: direction, disabled: disabled, 
        // Имитируем нативное API браузера:
        // 1. При непрерывном вводе вызываем onInput
        // 2. По завершению вызываем onChange
        onFinalChange: function (value) { return onChange && onChange({}, value); }, onChange: function (value) { return onInput({}, value); }, min: min, max: max, step: step, values: values, renderTrack: $renderTrack, renderThumb: $renderThumb }));
});
exports.Slider.displayName = 'Slider';