@yandex/ui
Version:
Yandex UI components
75 lines (74 loc) • 4.66 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.Checkbox = exports.cnCheckbox = void 0;
var tslib_1 = require("tslib");
var react_1 = tslib_1.__importStar(require("react"));
var classname_1 = require("@bem-react/classname");
var di_1 = require("@bem-react/di");
var keyboard_1 = require("../lib/keyboard");
var omit_1 = require("../lib/omit");
var mergeRefs_1 = require("../lib/mergeRefs");
var useUniqId_1 = require("../useUniqId");
var withControl_1 = require("../withControl/withControl");
require("./Checkbox.css");
exports.cnCheckbox = classname_1.cn('Checkbox');
/**
* Компонент для создания чекбоксов различных типов.
*
* @param {ICheckboxProps} props
*/
var CheckboxPresenter = function (_a) {
var checked = _a.checked, className = _a.className, _b = _a.controlRef, htmlControlRef = _b === void 0 ? null : _b, disabled = _a.disabled, focused = _a.focused, hovered = _a.hovered,
// eslint-disable-next-line react-hooks/rules-of-hooks
_c = _a.id,
// eslint-disable-next-line react-hooks/rules-of-hooks
id = _c === void 0 ? useUniqId_1.useUniqId() : _c, indeterminate = _a.indeterminate, innerRef = _a.innerRef, label = _a.label, onMouseDown = _a.onMouseDown, onMouseUp = _a.onMouseUp, onMouseEnter = _a.onMouseEnter, onMouseLeave = _a.onMouseLeave, htmlOnKeyDown = _a.onKeyDown, htmlOnKeyUp = _a.onKeyUp, tabIndex = _a.tabIndex, title = _a.title, required = _a.required, autoFocus = _a.autoFocus, view = _a.view,
// Извлекаем свойства, т.к. они не нужны на DOM узле
// FIXME: https://github.com/bem/bem-react/issues/381
// @ts-ignore
_size = _a.size,
// @ts-ignore
_theme = _a.theme, props = tslib_1.__rest(_a, ["checked", "className", "controlRef", "disabled", "focused", "hovered", "id", "indeterminate", "innerRef", "label", "onMouseDown", "onMouseUp", "onMouseEnter", "onMouseLeave", "onKeyDown", "onKeyUp", "tabIndex", "title", "required", "autoFocus", "view", "size", "theme"]);
var _d = tslib_1.__read(react_1.useState(props.pressed || false), 2), pressed = _d[0], setPressed = _d[1];
var controlRef = react_1.useRef(null);
var _e = di_1.useComponentRegistry(exports.cnCheckbox()), Box = _e.Box, Control = _e.Control, Label = _e.Label, Tick = _e.Tick;
react_1.useEffect(function () {
if (autoFocus && controlRef.current !== null) {
controlRef.current.focus();
}
}, []);
react_1.useEffect(function () {
if (controlRef.current !== null && indeterminate !== undefined) {
controlRef.current.indeterminate = indeterminate;
}
}, [indeterminate]);
react_1.useEffect(function () {
setPressed(props.pressed || false);
}, [props.pressed]);
var onKeyDown = react_1.useCallback(function (event) {
if (keyboard_1.isKeyCode(event.keyCode, [keyboard_1.Keys.SPACE])) {
setPressed(true);
}
if (htmlOnKeyDown !== undefined) {
htmlOnKeyDown(event);
}
}, [htmlOnKeyDown]);
var onKeyUp = react_1.useCallback(function (event) {
if (keyboard_1.isKeyCode(event.keyCode, [keyboard_1.Keys.SPACE])) {
setPressed(false);
}
if (htmlOnKeyUp !== undefined) {
htmlOnKeyUp(event);
}
}, [htmlOnKeyUp]);
var labelId = "label-" + id;
// FIXME: https://github.com/bem/bem-react/issues/381
var nextProps = omit_1.omit(props, ['pressed', 'lines', 'theme', 'size']);
return (react_1.default.createElement("span", { className: exports.cnCheckbox({ checked: indeterminate || checked, pressed: pressed, focused: focused, disabled: disabled, hovered: hovered, indeterminate: indeterminate }, [className]), onMouseDown: onMouseDown, onMouseUp: onMouseUp, onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave, ref: innerRef, title: title },
react_1.default.createElement(Box, null,
react_1.default.createElement(Control, tslib_1.__assign({}, nextProps, { "aria-checked": indeterminate ? 'mixed' : checked, "aria-labelledby": labelId, checked: indeterminate || checked, controlRef: mergeRefs_1.mergeAllRefs(controlRef, htmlControlRef), disabled: disabled, id: id, onKeyDown: onKeyDown, onKeyUp: onKeyUp, tabIndex: tabIndex, required: required })),
react_1.default.createElement(Tick, { view: view, indeterminate: indeterminate })),
label && (react_1.default.createElement(Label, { id: labelId, htmlFor: id }, label))));
};
CheckboxPresenter.displayName = exports.cnCheckbox();
exports.Checkbox = withControl_1.withControl(CheckboxPresenter);