2016-09-21 11:54:53 +08:00
|
|
|
import React from 'react';
|
2016-02-28 00:16:32 +08:00
|
|
|
import classNames from 'classnames';
|
2016-10-28 13:56:23 +08:00
|
|
|
import PureRenderMixin from 'rc-util/lib/PureRenderMixin';
|
2016-06-22 13:18:43 +08:00
|
|
|
import assign from 'object-assign';
|
2015-07-17 16:06:46 +08:00
|
|
|
|
2015-07-20 22:36:49 +08:00
|
|
|
function getCheckedValue(children) {
|
2016-02-20 16:39:49 +08:00
|
|
|
let value = null;
|
2016-02-21 14:04:08 +08:00
|
|
|
let matched = false;
|
2016-08-10 10:26:42 +08:00
|
|
|
React.Children.forEach(children, (radio: any) => {
|
2016-03-04 12:27:58 +08:00
|
|
|
if (radio && radio.props && radio.props.checked) {
|
2016-02-20 16:39:49 +08:00
|
|
|
value = radio.props.value;
|
2016-02-21 14:04:08 +08:00
|
|
|
matched = true;
|
2015-07-20 22:36:49 +08:00
|
|
|
}
|
|
|
|
});
|
2016-02-21 14:04:08 +08:00
|
|
|
return matched ? { value } : undefined;
|
2015-07-20 22:36:49 +08:00
|
|
|
}
|
|
|
|
|
2016-08-10 10:26:42 +08:00
|
|
|
export interface RadioGroupProps {
|
2016-11-03 11:33:26 +08:00
|
|
|
prefixCls?: string;
|
|
|
|
className?: string;
|
2016-08-10 10:26:42 +08:00
|
|
|
/** 选项变化时的回调函数*/
|
2016-10-19 17:51:33 +08:00
|
|
|
onChange?: React.FormEventHandler<any>;
|
2016-08-10 10:26:42 +08:00
|
|
|
/** 用于设置当前选中的值*/
|
|
|
|
value?: string | number;
|
|
|
|
/** 默认选中的值*/
|
|
|
|
defaultValue?: string | number;
|
|
|
|
/** 大小,只对按钮样式生效*/
|
|
|
|
size?: 'large' | 'default' | 'small';
|
|
|
|
style?: React.CSSProperties;
|
|
|
|
disabled?: boolean;
|
2016-11-14 11:52:18 +08:00
|
|
|
onMouseEnter?: React.FormEventHandler<any>;
|
|
|
|
onMouseLeave?: React.FormEventHandler<any>;
|
2016-08-10 10:26:42 +08:00
|
|
|
}
|
|
|
|
|
|
|
|
export default class RadioGroup extends React.Component<RadioGroupProps, any> {
|
2016-03-28 23:21:47 +08:00
|
|
|
static defaultProps = {
|
|
|
|
disabled: false,
|
2016-07-13 11:14:24 +08:00
|
|
|
};
|
2016-03-28 23:21:47 +08:00
|
|
|
constructor(props) {
|
|
|
|
super(props);
|
2016-02-20 16:39:49 +08:00
|
|
|
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;
|
|
|
|
}
|
2016-03-28 23:21:47 +08:00
|
|
|
this.state = {
|
2016-02-20 16:39:49 +08:00
|
|
|
value,
|
2015-07-17 16:06:46 +08:00
|
|
|
};
|
2016-03-28 23:21:47 +08:00
|
|
|
}
|
2015-07-20 22:36:49 +08:00
|
|
|
componentWillReceiveProps(nextProps) {
|
2016-02-20 16:39:49 +08:00
|
|
|
if ('value' in nextProps) {
|
2015-07-20 22:36:49 +08:00
|
|
|
this.setState({
|
2016-02-21 14:04:08 +08:00
|
|
|
value: nextProps.value,
|
2015-07-20 22:36:49 +08:00
|
|
|
});
|
2016-02-20 16:39:49 +08:00
|
|
|
} else {
|
|
|
|
const checkedValue = getCheckedValue(nextProps.children);
|
|
|
|
if (checkedValue) {
|
|
|
|
this.setState({
|
2016-02-21 14:04:08 +08:00
|
|
|
value: checkedValue.value,
|
2016-02-20 16:39:49 +08:00
|
|
|
});
|
|
|
|
}
|
2015-07-20 22:36:49 +08:00
|
|
|
}
|
2016-03-28 23:21:47 +08:00
|
|
|
}
|
2016-06-12 16:15:11 +08:00
|
|
|
shouldComponentUpdate(...args) {
|
|
|
|
return PureRenderMixin.shouldComponentUpdate.apply(this, args);
|
|
|
|
}
|
2016-03-28 23:21:47 +08:00
|
|
|
onRadioChange = (ev) => {
|
2016-12-19 10:52:47 +08:00
|
|
|
const lastValue = this.state.value;
|
|
|
|
const { value } = ev.target;
|
2016-02-20 16:39:49 +08:00
|
|
|
if (!('value' in this.props)) {
|
|
|
|
this.setState({
|
2016-12-19 10:52:47 +08:00
|
|
|
value,
|
2016-02-20 16:39:49 +08:00
|
|
|
});
|
|
|
|
}
|
2016-10-24 16:30:38 +08:00
|
|
|
|
|
|
|
const onChange = this.props.onChange;
|
2016-12-19 10:52:47 +08:00
|
|
|
if (onChange && value !== lastValue) {
|
2016-10-24 16:30:38 +08:00
|
|
|
onChange(ev);
|
|
|
|
}
|
2016-03-28 23:21:47 +08:00
|
|
|
}
|
2016-01-07 17:46:46 +08:00
|
|
|
render() {
|
2016-01-21 22:45:21 +08:00
|
|
|
const props = this.props;
|
2016-11-04 09:38:57 +08:00
|
|
|
const children = !props.children ? [] : React.Children.map(props.children, (radio: any) => {
|
2017-03-17 17:54:02 +08:00
|
|
|
if (radio && radio.type && (radio.type.__ANT_RADIO || radio.type.__ANT_RADIO_BUTTON) && radio.props) {
|
2016-11-17 17:50:26 +08:00
|
|
|
return React.cloneElement(radio, assign({}, radio.props, {
|
2016-01-21 22:45:21 +08:00
|
|
|
onChange: this.onRadioChange,
|
|
|
|
checked: this.state.value === radio.props.value,
|
|
|
|
disabled: radio.props.disabled || this.props.disabled,
|
2016-06-22 13:18:43 +08:00
|
|
|
}));
|
2015-07-17 16:06:46 +08:00
|
|
|
}
|
|
|
|
return radio;
|
|
|
|
});
|
2016-11-03 11:33:26 +08:00
|
|
|
|
|
|
|
const { prefixCls = 'ant-radio-group', className = '' } = props;
|
2016-11-30 10:20:23 +08:00
|
|
|
const classString = classNames(prefixCls, {
|
2016-10-24 16:30:38 +08:00
|
|
|
[`${prefixCls}-${props.size}`]: props.size,
|
2016-11-30 10:20:23 +08:00
|
|
|
}, className);
|
2016-11-14 11:52:18 +08:00
|
|
|
return (
|
|
|
|
<div
|
|
|
|
className={classString}
|
|
|
|
style={props.style}
|
|
|
|
onMouseEnter={props.onMouseEnter}
|
|
|
|
onMouseLeave={props.onMouseLeave}
|
|
|
|
>
|
|
|
|
{children}
|
|
|
|
</div>
|
|
|
|
);
|
2016-03-28 23:21:47 +08:00
|
|
|
}
|
|
|
|
}
|