@yandex/ui
Version:
Yandex UI components
87 lines (86 loc) • 4.87 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.Tumbler = exports.cnTumbler = exports.UNCHECKED_KEYS = exports.CHECKED_KEYS = void 0;
var tslib_1 = require("tslib");
var react_1 = tslib_1.__importStar(require("react"));
var classname_1 = require("@bem-react/classname");
var keyboard_1 = require("../lib/keyboard");
var mergeRefs_1 = require("../lib/mergeRefs");
var useUniqId_1 = require("../useUniqId");
var Tumbler_Label_1 = require("./Label/Tumbler-Label");
var Tumbler_Button_1 = require("./Button/Tumbler-Button");
var Tumbler_Control_1 = require("./Control/Tumbler-Control");
require("./Tumbler.css");
exports.CHECKED_KEYS = [keyboard_1.Keys.RIGHT, keyboard_1.Keys.UP];
exports.UNCHECKED_KEYS = [keyboard_1.Keys.LEFT, keyboard_1.Keys.DOWN];
exports.cnTumbler = classname_1.cn('Tumbler');
/**
* Компонент, предназначенный для создания переключателя.
*
* @param {TumblerProps} props Свойства компонента.
*/
var Tumbler = function (_a) {
var checked = _a.checked, className = _a.className, htmlControlRef = _a.controlRef, disabled = _a.disabled,
// eslint-disable-next-line react-hooks/rules-of-hooks
_b = _a.id,
// eslint-disable-next-line react-hooks/rules-of-hooks
id = _b === void 0 ? useUniqId_1.useUniqId() : _b, innerRef = _a.innerRef, labelAfter = _a.labelAfter, labelBefore = _a.labelBefore, name = _a.name, onBlur = _a.onBlur, onChange = _a.onChange, htmlOnClick = _a.onClick, onFocus = _a.onFocus, htmlOnKeyDown = _a.onKeyDown, onKeyUp = _a.onKeyUp, tabIndex = _a.tabIndex, title = _a.title, autoFocus = _a.autoFocus, required = _a.required;
var buttonRef = react_1.useRef(null);
var controlRef = react_1.useRef(null);
var controlId = "control-" + id;
var beforeLabelId = "before-label-" + id;
var afterLabelId = "after-label-" + id;
react_1.useEffect(function () {
if (autoFocus && buttonRef.current !== null) {
buttonRef.current.focus();
}
}, []);
var labelledById = react_1.useMemo(function () {
if (labelBefore && labelAfter)
return checked ? beforeLabelId : afterLabelId;
if (labelBefore)
return beforeLabelId;
if (labelAfter)
return afterLabelId;
return undefined;
}, [checked, labelBefore, labelAfter, beforeLabelId, afterLabelId]);
// prettier-ignore
var onButtonClick = react_1.useCallback(function (event) {
if (controlRef.current !== null) {
controlRef.current.click();
}
if (buttonRef.current !== null) {
buttonRef.current.focus();
}
if (htmlOnClick !== undefined) {
htmlOnClick(event);
}
}, [htmlOnClick]);
// prettier-ignore
var onLabelClick = react_1.useCallback(function () {
if (buttonRef.current !== null) {
buttonRef.current.focus();
}
}, []);
// prettier-ignore
var onKeyDown = react_1.useCallback(function (event) {
if (keyboard_1.isKeyCode(event.keyCode, tslib_1.__spread([keyboard_1.Keys.ENTER], exports.UNCHECKED_KEYS, exports.CHECKED_KEYS))) {
event.preventDefault();
}
var shouldForceChange = (checked && keyboard_1.isKeyCode(event.keyCode, exports.UNCHECKED_KEYS)) ||
(!checked && keyboard_1.isKeyCode(event.keyCode, exports.CHECKED_KEYS));
if (shouldForceChange && controlRef.current !== null) {
controlRef.current.click();
}
if (htmlOnKeyDown !== undefined) {
htmlOnKeyDown(event);
}
}, [checked, htmlOnKeyDown]);
return (react_1.default.createElement("span", { ref: innerRef, className: exports.cnTumbler(null, [className]), id: id, title: title, "aria-disabled": disabled },
labelBefore && (react_1.default.createElement(Tumbler_Label_1.TumblerLabel, { disabled: Boolean(!checked && labelBefore && labelAfter), htmlFor: controlId, id: beforeLabelId, onClick: onLabelClick }, labelBefore)),
react_1.default.createElement(Tumbler_Button_1.TumblerButton, { tabIndex: disabled ? -1 : tabIndex, innerRef: buttonRef, checked: checked, onKeyDown: onKeyDown, onKeyUp: onKeyUp, onBlur: onBlur, onFocus: onFocus, onClick: onButtonClick, labelledBy: labelledById, required: required }),
react_1.default.createElement(Tumbler_Control_1.TumblerControl, { id: controlId, name: name, checked: checked, innerRef: mergeRefs_1.mergeRefs(controlRef, htmlControlRef), onChange: onChange, required: required }),
labelAfter && (react_1.default.createElement(Tumbler_Label_1.TumblerLabel, { disabled: Boolean(checked && labelBefore && labelAfter), htmlFor: controlId, id: afterLabelId, onClick: onLabelClick }, labelAfter))));
};
exports.Tumbler = Tumbler;
exports.Tumbler.displayName = 'Tumbler';