@yandex/ui
Version:
Yandex UI components
32 lines (31 loc) • 2.16 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.SliderThumb = void 0;
var tslib_1 = require("tslib");
var react_1 = tslib_1.__importStar(require("react"));
var getTestId_1 = require("../../internal/utils/getTestId");
var forkFn_1 = require("../../lib/forkFn");
var pointerfocus_1 = require("../../lib/pointerfocus");
var keyboard_1 = require("../../lib/keyboard");
var Slider_const_1 = require("../Slider.const");
require("./Slider-Thumb.css");
var cnSliderHandle = Slider_const_1.cnSlider('Handle');
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 = tslib_1.__rest(_a, ["className", "disabled", "innerRef", "onClick", "onKeyDown", "pressed", "testId", "value"]);
var $onClick = react_1.useCallback(function (event) {
pointerfocus_1.forceUtilityFocus();
event.target.focus();
}, []);
var $onKeyDown = react_1.useCallback(function (event) {
// TODO: Доработать комбинацию клавиш fn+arrow.
if (keyboard_1.isKeyCode(event.keyCode, ['PAGE_DOWN', 'PAGE_UP', 'LEFT', 'RIGHT', 'UP', 'DOWN'])) {
pointerfocus_1.forceUtilityFocus();
}
}, []);
return (
// HACK: Добавляем aria-valuenow для Handle элемента, для того,
// чтобы react-range мог найти элементы по этому свойству.
react_1.default.createElement("div", { className: cnSliderHandle, "aria-valuenow": props['aria-valuenow'] },
react_1.default.createElement("button", tslib_1.__assign({}, props, { "aria-disabled": disabled, className: Slider_const_1.cnSlider('Thumb', { pressed: pressed }, [className]), "data-testid": getTestId_1.getTestId('thumb', testId), onClick: forkFn_1.forkFn(onClick, $onClick), onKeyDown: forkFn_1.forkFn(onKeyDown, $onKeyDown), ref: innerRef, role: "slider", tabIndex: disabled ? -1 : 0, type: "button" }))));
};
exports.SliderThumb = SliderThumb;