1 | "use client";
|
2 |
|
3 | import * as React from 'react';
|
4 | import classNames from 'classnames';
|
5 | import useMergedState from "rc-util/es/hooks/useMergedState";
|
6 | import pickAttrs from "rc-util/es/pickAttrs";
|
7 | import { ConfigContext } from '../config-provider';
|
8 | import useSize from '../config-provider/hooks/useSize';
|
9 | import { RadioGroupContextProvider } from './context';
|
10 | import Radio from './radio';
|
11 | import useStyle from './style';
|
12 | import useCSSVarCls from '../config-provider/hooks/useCSSVarCls';
|
13 | const RadioGroup = React.forwardRef((props, ref) => {
|
14 | const {
|
15 | getPrefixCls,
|
16 | direction
|
17 | } = React.useContext(ConfigContext);
|
18 | const [value, setValue] = useMergedState(props.defaultValue, {
|
19 | value: props.value
|
20 | });
|
21 | const onRadioChange = ev => {
|
22 | const lastValue = value;
|
23 | const val = ev.target.value;
|
24 | if (!('value' in props)) {
|
25 | setValue(val);
|
26 | }
|
27 | const {
|
28 | onChange
|
29 | } = props;
|
30 | if (onChange && val !== lastValue) {
|
31 | onChange(ev);
|
32 | }
|
33 | };
|
34 | const {
|
35 | prefixCls: customizePrefixCls,
|
36 | className,
|
37 | rootClassName,
|
38 | options,
|
39 | buttonStyle = 'outline',
|
40 | disabled,
|
41 | children,
|
42 | size: customizeSize,
|
43 | style,
|
44 | id,
|
45 | onMouseEnter,
|
46 | onMouseLeave,
|
47 | onFocus,
|
48 | onBlur
|
49 | } = props;
|
50 | const prefixCls = getPrefixCls('radio', customizePrefixCls);
|
51 | const groupPrefixCls = `${prefixCls}-group`;
|
52 |
|
53 | const rootCls = useCSSVarCls(prefixCls);
|
54 | const [wrapCSSVar, hashId, cssVarCls] = useStyle(prefixCls, rootCls);
|
55 | let childrenToRender = children;
|
56 |
|
57 | if (options && options.length > 0) {
|
58 | childrenToRender = options.map(option => {
|
59 | if (typeof option === 'string' || typeof option === 'number') {
|
60 |
|
61 | return React.createElement(Radio, {
|
62 | key: option.toString(),
|
63 | prefixCls: prefixCls,
|
64 | disabled: disabled,
|
65 | value: option,
|
66 | checked: value === option
|
67 | }, option);
|
68 | }
|
69 |
|
70 | return React.createElement(Radio, {
|
71 | key: `radio-group-value-options-${option.value}`,
|
72 | prefixCls: prefixCls,
|
73 | disabled: option.disabled || disabled,
|
74 | value: option.value,
|
75 | checked: value === option.value,
|
76 | title: option.title,
|
77 | style: option.style,
|
78 | id: option.id,
|
79 | required: option.required
|
80 | }, option.label);
|
81 | });
|
82 | }
|
83 | const mergedSize = useSize(customizeSize);
|
84 | const classString = classNames(groupPrefixCls, `${groupPrefixCls}-${buttonStyle}`, {
|
85 | [`${groupPrefixCls}-${mergedSize}`]: mergedSize,
|
86 | [`${groupPrefixCls}-rtl`]: direction === 'rtl'
|
87 | }, className, rootClassName, hashId, cssVarCls, rootCls);
|
88 | return wrapCSSVar( React.createElement("div", Object.assign({}, pickAttrs(props, {
|
89 | aria: true,
|
90 | data: true
|
91 | }), {
|
92 | className: classString,
|
93 | style: style,
|
94 | onMouseEnter: onMouseEnter,
|
95 | onMouseLeave: onMouseLeave,
|
96 | onFocus: onFocus,
|
97 | onBlur: onBlur,
|
98 | id: id,
|
99 | ref: ref
|
100 | }), React.createElement(RadioGroupContextProvider, {
|
101 | value: {
|
102 | onChange: onRadioChange,
|
103 | value,
|
104 | disabled: props.disabled,
|
105 | name: props.name,
|
106 | optionType: props.optionType
|
107 | }
|
108 | }, childrenToRender)));
|
109 | });
|
110 | export default React.memo(RadioGroup); |
\ | No newline at end of file |