mirror of
https://github.com/ant-design/ant-design.git
synced 2024-12-13 23:59:12 +08:00
148 lines
3.9 KiB
TypeScript
148 lines
3.9 KiB
TypeScript
import * as React from 'react';
|
|
import PropTypes from 'prop-types';
|
|
import classNames from 'classnames';
|
|
import shallowEqual from 'shallowequal';
|
|
import Radio from './radio';
|
|
import { RadioGroupProps, RadioGroupState, RadioChangeEvent } from './interface';
|
|
|
|
function getCheckedValue(children: React.ReactNode) {
|
|
let value = null;
|
|
let matched = false;
|
|
React.Children.forEach(children, (radio: any) => {
|
|
if (radio && radio.props && radio.props.checked) {
|
|
value = radio.props.value;
|
|
matched = true;
|
|
}
|
|
});
|
|
return matched ? { value } : undefined;
|
|
}
|
|
|
|
export default class RadioGroup extends React.Component<RadioGroupProps, RadioGroupState> {
|
|
static defaultProps = {
|
|
disabled: false,
|
|
prefixCls: 'ant-radio',
|
|
buttonStyle: 'outline',
|
|
};
|
|
|
|
static childContextTypes = {
|
|
radioGroup: PropTypes.any,
|
|
};
|
|
|
|
constructor(props: RadioGroupProps) {
|
|
super(props);
|
|
let value;
|
|
if ('value' in props) {
|
|
value = props.value;
|
|
} else if ('defaultValue' in props) {
|
|
value = props.defaultValue;
|
|
} else {
|
|
const checkedValue = getCheckedValue(props.children);
|
|
value = checkedValue && checkedValue.value;
|
|
}
|
|
this.state = {
|
|
value,
|
|
};
|
|
}
|
|
|
|
getChildContext() {
|
|
return {
|
|
radioGroup: {
|
|
onChange: this.onRadioChange,
|
|
value: this.state.value,
|
|
disabled: this.props.disabled,
|
|
name: this.props.name,
|
|
},
|
|
};
|
|
}
|
|
|
|
componentWillReceiveProps(nextProps: RadioGroupProps) {
|
|
if ('value' in nextProps) {
|
|
this.setState({
|
|
value: nextProps.value,
|
|
});
|
|
} else {
|
|
const checkedValue = getCheckedValue(nextProps.children);
|
|
if (checkedValue) {
|
|
this.setState({
|
|
value: checkedValue.value,
|
|
});
|
|
}
|
|
}
|
|
}
|
|
|
|
shouldComponentUpdate(nextProps: RadioGroupProps, nextState: RadioGroupState) {
|
|
return !shallowEqual(this.props, nextProps) ||
|
|
!shallowEqual(this.state, nextState);
|
|
}
|
|
|
|
onRadioChange = (ev: RadioChangeEvent) => {
|
|
const lastValue = this.state.value;
|
|
const { value } = ev.target;
|
|
if (!('value' in this.props)) {
|
|
this.setState({
|
|
value,
|
|
});
|
|
}
|
|
|
|
const onChange = this.props.onChange;
|
|
if (onChange && value !== lastValue) {
|
|
onChange(ev);
|
|
}
|
|
}
|
|
render() {
|
|
const props = this.props;
|
|
const { prefixCls, className = '', options, buttonStyle } = props;
|
|
const groupPrefixCls = `${prefixCls}-group`;
|
|
const classString = classNames(groupPrefixCls, `${groupPrefixCls}-${buttonStyle}`, {
|
|
[`${groupPrefixCls}-${props.size}`]: props.size,
|
|
}, className);
|
|
|
|
let children: React.ReactChildren[] | React.ReactElement<any>[] | React.ReactNode = props.children;
|
|
|
|
// 如果存在 options, 优先使用
|
|
if (options && options.length > 0) {
|
|
children = options.map((option, index) => {
|
|
if (typeof option === 'string') { // 此处类型自动推导为 string
|
|
return (
|
|
<Radio
|
|
key={index}
|
|
prefixCls={prefixCls}
|
|
disabled={this.props.disabled}
|
|
value={option}
|
|
onChange={this.onRadioChange}
|
|
checked={this.state.value === option}
|
|
>
|
|
{option}
|
|
</Radio>
|
|
);
|
|
} else { // 此处类型自动推导为 { label: string value: string }
|
|
return (
|
|
<Radio
|
|
key={index}
|
|
prefixCls={prefixCls}
|
|
disabled={option.disabled || this.props.disabled}
|
|
value={option.value}
|
|
onChange={this.onRadioChange}
|
|
checked={this.state.value === option.value}
|
|
>
|
|
{option.label}
|
|
</Radio>
|
|
);
|
|
}
|
|
});
|
|
}
|
|
|
|
return (
|
|
<div
|
|
className={classString}
|
|
style={props.style}
|
|
onMouseEnter={props.onMouseEnter}
|
|
onMouseLeave={props.onMouseLeave}
|
|
id={props.id}
|
|
>
|
|
{children}
|
|
</div>
|
|
);
|
|
}
|
|
}
|