ant-design/components/radio/group.tsx

109 lines
3.0 KiB
TypeScript
Raw Normal View History

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-03-04 12:27:58 +08:00
import Radio from './radio';
import RadioButton from './radioButton';
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;
}
export default class RadioGroup extends React.Component<RadioGroupProps, any> {
static defaultProps = {
disabled: false,
2016-07-13 11:14:24 +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;
}
this.state = {
2016-02-20 16:39:49 +08:00
value,
2015-07-17 16:06:46 +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-06-12 16:15:11 +08:00
shouldComponentUpdate(...args) {
return PureRenderMixin.shouldComponentUpdate.apply(this, args);
}
onRadioChange = (ev) => {
2016-02-20 16:39:49 +08:00
if (!('value' in this.props)) {
this.setState({
2016-02-21 14:04:08 +08:00
value: ev.target.value,
2016-02-20 16:39:49 +08:00
});
}
2016-10-24 16:30:38 +08:00
const onChange = this.props.onChange;
if (onChange) {
onChange(ev);
}
}
render() {
2016-01-21 22:45:21 +08:00
const props = this.props;
const children = !props.children ? [] : React.Children.map(props.children, (radio: any) => {
2016-03-04 12:27:58 +08:00
if (radio && (radio.type === Radio || radio.type === RadioButton) && radio.props) {
2016-02-20 16:39:49 +08:00
const keyProps = {};
if (!('key' in radio) && typeof radio.props.value === 'string') {
2016-08-10 10:26:42 +08:00
(keyProps as any).key = radio.props.value;
2016-02-20 16:39:49 +08:00
}
2016-06-22 13:18:43 +08:00
return React.cloneElement(radio, assign({}, keyProps, 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-02-28 00:16:32 +08:00
const classString = classNames({
2016-10-24 16:30:38 +08:00
[prefixCls]: true,
[`${prefixCls}-${props.size}`]: props.size,
2016-11-03 11:33:26 +08:00
[className]: className,
2016-02-28 00:16:32 +08:00
});
return <div className={classString} style={props.style}>{children}</div>;
}
}