import * as React from 'react'; import classNames from 'classnames'; import Radio from './radio'; import { RadioGroupProps, RadioChangeEvent, RadioGroupButtonStyle } from './interface'; import { ConfigContext } from '../config-provider'; import SizeContext from '../config-provider/SizeContext'; import { RadioGroupContextProvider } from './context'; import { usePrevious } from '../_util/ref'; const RadioGroup: React.FC = props => { const { getPrefixCls, direction } = React.useContext(ConfigContext); const size = React.useContext(SizeContext); let initValue; if (props.value !== undefined) { initValue = props.value; } else if (props.defaultValue !== undefined) { initValue = props.defaultValue; } const [value, setValue] = React.useState(initValue); const prevPropValue = usePrevious(props.value); React.useEffect(() => { if (props.value !== undefined || prevPropValue !== props.value) { setValue(props.value); } }, [props.value]); const onRadioChange = (ev: RadioChangeEvent) => { const lastValue = value; const val = ev.target.value; if (!('value' in props)) { setValue(val); } const { onChange } = props; if (onChange && val !== lastValue) { onChange(ev); } }; const renderGroup = () => { const { prefixCls: customizePrefixCls, className = '', options, optionType, buttonStyle, disabled, children, size: customizeSize, style, id, onMouseEnter, onMouseLeave, } = props; const prefixCls = getPrefixCls('radio', customizePrefixCls); const groupPrefixCls = `${prefixCls}-group`; let childrenToRender = children; // 如果存在 options, 优先使用 if (options && options.length > 0) { const optionsPrefixCls = optionType === 'button' ? `${prefixCls}-button` : prefixCls; childrenToRender = options.map(option => { if (typeof option === 'string') { // 此处类型自动推导为 string return ( {option} ); } // 此处类型自动推导为 { label: string value: string } return ( {option.label} ); }); } const mergedSize = customizeSize || size; const classString = classNames( groupPrefixCls, `${groupPrefixCls}-${buttonStyle}`, { [`${groupPrefixCls}-${mergedSize}`]: mergedSize, [`${groupPrefixCls}-rtl`]: direction === 'rtl', }, className, ); return (
{childrenToRender}
); }; return ( {renderGroup()} ); }; RadioGroup.defaultProps = { buttonStyle: 'outline' as RadioGroupButtonStyle, }; export default React.memo(RadioGroup);