@nami-ui/radio/lib/radio.js

a radio component.

import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useContext } from 'react';
import { useValue, noop } from '@nami-ui/utils';
import { CircleFilled as CircleFilledIcon } from '@nami-ui/icon';
import clsx from 'clsx';
import './radio.css';
import { RadioGroupContext } from './radio-group-context';
export const Radio = ({ value, checked: $checked, defaultChecked: $defaultChecked, label, disabled = false, readOnly = false, onChange = noop, className, ...otherProps }) => {
    // 内部选中状态值
    let checked;
    // 修改内部选中状态值
    let setChecked;
    // 当前内部选中状态值是否受 `checked` 属性控制，若不是，则应当在选中时，调用 setCheck
    let controlled;
    const groupContext = useContext(RadioGroupContext);
    if (groupContext) {
        checked = groupContext.isChecked(value);
        setChecked = (checked) => groupContext.change(value, checked);
        controlled = false;
        disabled = groupContext.disabled || disabled;
    }
    else {
        ;
        [checked, setChecked, controlled] = useValue($checked, $defaultChecked, false);
    }
    const handleChange = !readOnly && !disabled
        ? (event) => {
            const check = event.target.checked;
            if (!controlled) {
                setChecked(check);
            }
            onChange();
        }
        : undefined;
    className = clsx('nami-radio', {
        'nami-radio--checked': checked,
        'nami-radio--readonly': readOnly,
        'nami-radio--disabled': disabled,
    }, className);
    return (_jsxs("label", Object.assign({ className: className }, otherProps, { children: [_jsx("input", { className: "nami-radio__input", type: "radio", checked: checked, readOnly: readOnly, disabled: disabled, onChange: handleChange }, void 0),
            _jsxs("span", Object.assign({ className: "nami-radio__cell" }, { children: [_jsx("span", { className: "nami-radio__cell__frame" }, void 0),
                    _jsx(CircleFilledIcon, { className: "nami-radio__cell__icon" }, void 0)] }), void 0),
            label ? _jsx("span", Object.assign({ className: "nami-radio__label" }, { children: label }), void 0) : null] }), void 0));
};