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

Yandex UI components

import { __assign, __rest } from "tslib";
import React, { useCallback, } from 'react';
import { getTestId } from '../../internal/utils/getTestId';
import { forkFn } from '../../lib/forkFn';
import { forceUtilityFocus } from '../../lib/pointerfocus';
import { isKeyCode } from '../../lib/keyboard';
import { cnSlider } from '../Slider.const';
import './Slider-Thumb.css';
var cnSliderHandle = cnSlider('Handle');
export var SliderThumb = function (_a) {
    var className = _a.className, _b = _a.disabled, disabled = _b === void 0 ? false : _b, innerRef = _a.innerRef, onClick = _a.onClick, onKeyDown = _a.onKeyDown, pressed = _a.pressed, testId = _a.testId, value = _a.value, props = __rest(_a, ["className", "disabled", "innerRef", "onClick", "onKeyDown", "pressed", "testId", "value"]);
    var $onClick = useCallback(function (event) {
        forceUtilityFocus();
        event.target.focus();
    }, []);
    var $onKeyDown = useCallback(function (event) {
        // TODO: Доработать комбинацию клавиш fn+arrow.
        if (isKeyCode(event.keyCode, ['PAGE_DOWN', 'PAGE_UP', 'LEFT', 'RIGHT', 'UP', 'DOWN'])) {
            forceUtilityFocus();
        }
    }, []);
    return (
    // HACK: Добавляем aria-valuenow для Handle элемента, для того,
    // чтобы react-range мог найти элементы по этому свойству.
    React.createElement("div", { className: cnSliderHandle, "aria-valuenow": props['aria-valuenow'] },
        React.createElement("button", __assign({}, props, { "aria-disabled": disabled, className: cnSlider('Thumb', { pressed: pressed }, [className]), "data-testid": getTestId('thumb', testId), onClick: forkFn(onClick, $onClick), onKeyDown: forkFn(onKeyDown, $onKeyDown), ref: innerRef, role: "slider", tabIndex: disabled ? -1 : 0, type: "button" }))));
};