@yandex/ui/esm/RadioButton/RadioButton.js

Yandex UI components

import { __assign, __rest } from "tslib";
import React, { useRef, useCallback } from 'react';
import { useComponentRegistry } from '@bem-react/di';
import { cn } from '@bem-react/classname';
import { useUniqId } from '../useUniqId';
import './RadioButton.css';
export var cnRadioButton = cn('RadioButton');
/**
 * Компонент для создания радиогруппы.
 * @param {IRadioButtonProps} props
 */
export 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() : _b, 
    // @ts-ignore
    _size = _a.size, 
    // @ts-ignore
    _view = _a.view, props = __rest(_a, ["className", "style", "innerRef", 'aria-label', "options", "value", "disabled", "name", "size", "view"]);
    var _c = useComponentRegistry(cnRadioButton()), Plate = _c.Plate, Radio = _c.Radio, Control = _c.Control, Content = _c.Content;
    var plateRef = useRef(null);
    var radioRef = useRef();
    var radioCheckedRef = 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.createElement("span", { className: 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.createElement(Plate, { innerRef: plateRef, onTransitionEnd: function (event) { return (event.currentTarget.hidden = true); } }),
        options.map(function (_a) {
            var children = _a.children, controlProps = __rest(_a, ["children"]);
            var checked = rootValue === controlProps.value;
            controlProps.disabled = rootDisabled || controlProps.disabled;
            return (React.createElement(Radio, { checked: checked, disabled: controlProps.disabled, key: controlProps.value, innerRef: checked ? radioCheckedRef : undefined },
                React.createElement(Control, __assign({}, props, controlProps, { checked: checked, name: name })),
                React.createElement(Content, null, children)));
        })));
};
RadioButton.displayName = cnRadioButton();