@i-novus/ui-core
Version:
Базовые UI компоненты
39 lines (38 loc) • 2.25 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { forwardRef, useMemo, useState } from 'react';
import classNames from 'classnames';
import { useConfigProvider } from '../../core';
import { useRadioGroupContext } from './RadioGroup';
import { createUniqueId } from './helpers';
export const Radio = forwardRef((props, ref) => {
const { children, prefix, id: optionId, className, onChange, visible = true, style, ...restProps } = props;
const { getPrefix } = useConfigProvider();
const prefixCls = getPrefix(prefix);
const [inputId] = useState(createUniqueId('input-'));
const radioPrefix = useMemo(() => `${prefixCls}-radio`, [prefixCls]);
const groupContext = useRadioGroupContext();
const radioProps = {
...restProps,
name: groupContext.name || restProps.name,
disabled: restProps.disabled || groupContext.disabled,
checked: optionId === (groupContext.value || groupContext.defaultValue),
readOnly: restProps.readOnly || groupContext.readOnly,
};
const onRadioChange = (event) => {
onChange?.(optionId, event);
groupContext?.onChange?.(optionId, event);
};
const labelClassName = useMemo(() => {
return classNames(radioPrefix, `${radioPrefix}-label`, {
[`${radioPrefix}_readonly`]: radioProps.readOnly,
[`${radioPrefix}_disabled`]: radioProps.disabled,
[`${radioPrefix}_checked`]: radioProps.checked,
[`${radioPrefix}_unchecked`]: !radioProps.checked,
}, className);
}, [radioProps.checked, className, radioProps.disabled, radioPrefix, radioProps.readOnly]);
if (!visible) {
return null;
}
return (_jsxs("label", { className: labelClassName, htmlFor: inputId, style: style, children: [_jsxs("div", { className: `${radioPrefix}__input-wrapper`, children: [_jsx("input", { ...radioProps, id: inputId, type: "radio", ref: ref, className: `${radioPrefix}__input`, disabled: (radioProps.disabled || radioProps.readOnly) ?? false, onChange: onRadioChange }), _jsx("div", { className: `${radioPrefix}__pseudo-input` })] }), _jsx("span", { className: `${radioPrefix}-label__text`, children: children })] }));
});
Radio.displayName = 'Radio';