@yandex/ui
Version:
Yandex UI components
60 lines (59 loc) • 3.59 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.RadioButton = exports.cnRadioButton = void 0;
var tslib_1 = require("tslib");
var react_1 = tslib_1.__importStar(require("react"));
var di_1 = require("@bem-react/di");
var classname_1 = require("@bem-react/classname");
var useUniqId_1 = require("../useUniqId");
require("./RadioButton.css");
exports.cnRadioButton = classname_1.cn('RadioButton');
/**
* Компонент для создания радиогруппы.
* @param {IRadioButtonProps} props
*/
var RadioButton = function (_a) {
var className = _a.className, style = _a.style, innerRef = _a.innerRef, ariaLabel = _a["aria-label"], options = _a.options, rootValue = _a.value, rootDisabled = _a.disabled,
// eslint-disable-next-line react-hooks/rules-of-hooks
_b = _a.name,
// eslint-disable-next-line react-hooks/rules-of-hooks
name = _b === void 0 ? useUniqId_1.useUniqId() : _b,
// @ts-ignore
_size = _a.size,
// @ts-ignore
_view = _a.view, props = tslib_1.__rest(_a, ["className", "style", "innerRef", 'aria-label', "options", "value", "disabled", "name", "size", "view"]);
var _c = di_1.useComponentRegistry(exports.cnRadioButton()), Plate = _c.Plate, Radio = _c.Radio, Control = _c.Control, Content = _c.Content;
var plateRef = react_1.useRef(null);
var radioRef = react_1.useRef();
var radioCheckedRef = react_1.useCallback(function (radioCheckedNode) {
if (!radioCheckedNode)
return;
var plateNode = plateRef.current;
if (!plateNode)
return;
var radioUncheckedNode = radioRef.current;
// Показываем Plate только во время перехода между двумя Radio
if (radioUncheckedNode && radioUncheckedNode !== radioCheckedNode) {
var setPlateStyle = function (node) {
plateNode.style.left = node.offsetLeft + "px";
plateNode.style.width = node.offsetWidth + "px";
};
setPlateStyle(radioUncheckedNode);
plateNode.hidden = false;
setPlateStyle(radioCheckedNode);
}
radioRef.current = radioCheckedNode;
}, []);
return (react_1.default.createElement("span", { className: exports.cnRadioButton(null, [className]), style: style, ref: innerRef, role: "radiogroup", "aria-label": ariaLabel, onFocus: function (event) { return event.currentTarget.setAttribute('data-focused', ''); }, onBlur: function (event) { return event.currentTarget.removeAttribute('data-focused'); }, onKeyDown: function (event) { return event.repeat && event.preventDefault(); } },
react_1.default.createElement(Plate, { innerRef: plateRef, onTransitionEnd: function (event) { return (event.currentTarget.hidden = true); } }),
options.map(function (_a) {
var children = _a.children, controlProps = tslib_1.__rest(_a, ["children"]);
var checked = rootValue === controlProps.value;
controlProps.disabled = rootDisabled || controlProps.disabled;
return (react_1.default.createElement(Radio, { checked: checked, disabled: controlProps.disabled, key: controlProps.value, innerRef: checked ? radioCheckedRef : undefined },
react_1.default.createElement(Control, tslib_1.__assign({}, props, controlProps, { checked: checked, name: name })),
react_1.default.createElement(Content, null, children)));
})));
};
exports.RadioButton = RadioButton;
exports.RadioButton.displayName = exports.cnRadioButton();