group.js
3.86 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
import _defineProperty from "@babel/runtime/helpers/defineProperty";
import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
import * as React from 'react';
import classNames from 'classnames';
import useMergedState from "rc-util/es/hooks/useMergedState";
import Radio from './radio';
import { ConfigContext } from '../config-provider';
import SizeContext from '../config-provider/SizeContext';
import { RadioGroupContextProvider } from './context';
var RadioGroup = /*#__PURE__*/React.forwardRef(function (props, ref) {
var _React$useContext = React.useContext(ConfigContext),
getPrefixCls = _React$useContext.getPrefixCls,
direction = _React$useContext.direction;
var size = React.useContext(SizeContext);
var _useMergedState = useMergedState(props.defaultValue, {
value: props.value
}),
_useMergedState2 = _slicedToArray(_useMergedState, 2),
value = _useMergedState2[0],
setValue = _useMergedState2[1];
var onRadioChange = function onRadioChange(ev) {
var lastValue = value;
var val = ev.target.value;
if (!('value' in props)) {
setValue(val);
}
var onChange = props.onChange;
if (onChange && val !== lastValue) {
onChange(ev);
}
};
var renderGroup = function renderGroup() {
var _classNames;
var customizePrefixCls = props.prefixCls,
_props$className = props.className,
className = _props$className === void 0 ? '' : _props$className,
options = props.options,
optionType = props.optionType,
_props$buttonStyle = props.buttonStyle,
buttonStyle = _props$buttonStyle === void 0 ? 'outline' : _props$buttonStyle,
disabled = props.disabled,
children = props.children,
customizeSize = props.size,
style = props.style,
id = props.id,
onMouseEnter = props.onMouseEnter,
onMouseLeave = props.onMouseLeave;
var prefixCls = getPrefixCls('radio', customizePrefixCls);
var groupPrefixCls = "".concat(prefixCls, "-group");
var childrenToRender = children; // 如果存在 options, 优先使用
if (options && options.length > 0) {
var optionsPrefixCls = optionType === 'button' ? "".concat(prefixCls, "-button") : prefixCls;
childrenToRender = options.map(function (option) {
if (typeof option === 'string') {
// 此处类型自动推导为 string
return /*#__PURE__*/React.createElement(Radio, {
key: option,
prefixCls: optionsPrefixCls,
disabled: disabled,
value: option,
checked: value === option
}, option);
} // 此处类型自动推导为 { label: string value: string }
return /*#__PURE__*/React.createElement(Radio, {
key: "radio-group-value-options-".concat(option.value),
prefixCls: optionsPrefixCls,
disabled: option.disabled || disabled,
value: option.value,
checked: value === option.value,
style: option.style
}, option.label);
});
}
var mergedSize = customizeSize || size;
var classString = classNames(groupPrefixCls, "".concat(groupPrefixCls, "-").concat(buttonStyle), (_classNames = {}, _defineProperty(_classNames, "".concat(groupPrefixCls, "-").concat(mergedSize), mergedSize), _defineProperty(_classNames, "".concat(groupPrefixCls, "-rtl"), direction === 'rtl'), _classNames), className);
return /*#__PURE__*/React.createElement("div", {
className: classString,
style: style,
onMouseEnter: onMouseEnter,
onMouseLeave: onMouseLeave,
id: id,
ref: ref
}, childrenToRender);
};
return /*#__PURE__*/React.createElement(RadioGroupContextProvider, {
value: {
onChange: onRadioChange,
value: value,
disabled: props.disabled,
name: props.name
}
}, renderGroup());
});
export default /*#__PURE__*/React.memo(RadioGroup);