@yandex/ui/esm/Slider/Slider.js

Yandex UI components

import { __assign, __rest } from "tslib";
import React, { createElement, forwardRef, useCallback, useMemo } from 'react';
import { Range } from 'react-range';
import { getTestId } from '../internal/utils/getTestId';
import { useRenderOverride } from '../lib/render-override';
import { getDirection, getRangePosition, getTicks, normalizeValue } from './Slider.utils';
import { cnSlider, cnSliderContainer, cnSliderRange, cnSliderTrack } from './Slider.const';
import { SliderThumb } from './Thumb/Slider-Thumb';
import { SliderTickLabel } from './TickLabel/Slider-TickLabel';
import './Slider.css';
var $renderTickLabel = function (props, Tick) {
    return props.isFirst || props.isLast ? createElement(Tick, props) : null;
};
/**
 * Компонент, позволяющий выбрать одно или два значения в пределах заданного диапазона.
 *
 * @param {SliderProps} props - Свойства компонента.
 */
export var Slider = 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 = useRenderOverride(SliderThumb, renderThumb);
    var TickLabel = useRenderOverride(SliderTickLabel, renderTickLabel);
    // Кэшируем getTicks чтобы на каждое обновление не создавать массив.
    var ticks = useMemo(function () { return getTicks(min, max, step); }, [min, max, step]);
    var direction = getDirection(vertical, reverse);
    var values = normalizeValue(value, min, max);
    var rangePosition = getRangePosition(values, min, max, reverse);
    var $renderTrack = useCallback(function (_a) {
        var props = _a.props, children = _a.children;
        return (React.createElement("div", { className: cnSlider({ disabled: disabled, vertical: vertical, reverse: reverse, withTickValues: showTickValues }, [className]), "data-testid": getTestId('host', testId), ref: ref },
            React.createElement("div", { className: cnSliderContainer, "data-testid": getTestId('container', testId), onMouseDown: props.onMouseDown, onTouchStart: props.onTouchStart },
                React.createElement("div", { className: cnSliderTrack, "data-testid": getTestId('track', testId), ref: props.ref },
                    filled && React.createElement("div", { className: cnSliderRange, style: rangePosition }),
                    children),
                (showTicks || showTickValues) && (React.createElement("div", { className: cnSlider('Ticks') }, ticks.map(function (tickValue, idx) { return (React.createElement("span", { key: idx, className: cnSlider('Tick', { visible: showTicks }) }, showTickValues && (React.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 = useCallback(function (_a) {
        var _b = _a.props, style = _b.style, draggable = _b.draggable, ref = _b.ref, props = __rest(_b, ["style", "draggable", "ref"]), isDragged = _a.isDragged, value = _a.value;
        return (React.createElement(Thumb, __assign({}, props, { innerRef: ref, disabled: disabled, pressed: isDragged, value: value, testId: testId })));
    }, [disabled, testId]);
    return (React.createElement(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 }));
});
Slider.displayName = 'Slider';