@yandex/ui
Version:
Yandex UI components
72 lines (71 loc) • 4.33 kB
JavaScript
import { __assign, __read, __rest } from "tslib";
import React, { useCallback, useEffect, useRef, useState, } from 'react';
import { cn } from '@bem-react/classname';
import { useComponentRegistry } from '@bem-react/di';
import { isKeyCode, Keys } from '../lib/keyboard';
import { omit } from '../lib/omit';
import { mergeAllRefs } from '../lib/mergeRefs';
import { useUniqId } from '../useUniqId';
import { withControl } from '../withControl/withControl';
import './Checkbox.css';
export var cnCheckbox = 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() : _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 = __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 = __read(useState(props.pressed || false), 2), pressed = _d[0], setPressed = _d[1];
var controlRef = useRef(null);
var _e = useComponentRegistry(cnCheckbox()), Box = _e.Box, Control = _e.Control, Label = _e.Label, Tick = _e.Tick;
useEffect(function () {
if (autoFocus && controlRef.current !== null) {
controlRef.current.focus();
}
}, []);
useEffect(function () {
if (controlRef.current !== null && indeterminate !== undefined) {
controlRef.current.indeterminate = indeterminate;
}
}, [indeterminate]);
useEffect(function () {
setPressed(props.pressed || false);
}, [props.pressed]);
var onKeyDown = useCallback(function (event) {
if (isKeyCode(event.keyCode, [Keys.SPACE])) {
setPressed(true);
}
if (htmlOnKeyDown !== undefined) {
htmlOnKeyDown(event);
}
}, [htmlOnKeyDown]);
var onKeyUp = useCallback(function (event) {
if (isKeyCode(event.keyCode, [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(props, ['pressed', 'lines', 'theme', 'size']);
return (React.createElement("span", { className: 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.createElement(Box, null,
React.createElement(Control, __assign({}, nextProps, { "aria-checked": indeterminate ? 'mixed' : checked, "aria-labelledby": labelId, checked: indeterminate || checked, controlRef: mergeAllRefs(controlRef, htmlControlRef), disabled: disabled, id: id, onKeyDown: onKeyDown, onKeyUp: onKeyUp, tabIndex: tabIndex, required: required })),
React.createElement(Tick, { view: view, indeterminate: indeterminate })),
label && (React.createElement(Label, { id: labelId, htmlFor: id }, label))));
};
CheckboxPresenter.displayName = cnCheckbox();
export var Checkbox = withControl(CheckboxPresenter);