zent/es/radio/RadioButton.js

一套前端设计语言和基于React的实现

import { __assign, __rest } from "tslib";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useContext } from 'react';
import cx from 'classnames';
import getWidth from '../utils/getWidth';
import { getRadioState, useRadioHandler } from './AbstractRadio';
import { DisabledContext } from '../disabled';
import GroupContext from './GroupContext';
export function RadioButton(props) {
    var className = props.className, style = props.style, children = props.children, value = props.value, width = props.width, onMouseEnter = props.onMouseEnter, onMouseLeave = props.onMouseLeave, others = __rest(props, ["className", "style", "children", "value", "width", "onMouseEnter", "onMouseLeave"]);
    var disabledCtx = useContext(DisabledContext);
    var groupCtx = useContext(GroupContext);
    if (!groupCtx) {
        throw new Error('Radio.Button must be nested within Radio.Group');
    }
    var _a = getRadioState(disabledCtx, groupCtx, props), checked = _a.checked, disabled = _a.disabled, readOnly = _a.readOnly;
    var onChange = useRadioHandler(groupCtx, props);
    var classString = cx(className, 'zent-radio-button', {
        'zent-radio-button--checked': !!checked,
        'zent-radio-button--disabled': disabled || readOnly,
    });
    var widthStyle = getWidth(width);
    var wrapStyle = __assign(__assign({}, style), widthStyle);
    return (_jsxs("label", __assign({ className: classString, style: wrapStyle, onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave, "data-zv": '10.0.17' }, { children: [_jsx("input", __assign({}, others, { type: "radio", checked: !!checked, disabled: disabled, readOnly: readOnly, onChange: onChange, "data-zv": '10.0.17' }), void 0), _jsx("span", __assign({ className: "zent-radio-button__content", "data-zv": '10.0.17' }, { children: children }), void 0)] }), void 0));
}
export default RadioButton;