1 | import React from 'react';
|
2 | import classnames from 'classnames';
|
3 | import PropTypes from 'prop-types';
|
4 |
|
5 |
|
6 | const propTypes = {
|
7 | name: PropTypes.string,
|
8 | |
9 |
|
10 |
|
11 | defaultValue: PropTypes.oneOfType([
|
12 | PropTypes.string,
|
13 | PropTypes.number,
|
14 | PropTypes.bool,
|
15 | ]),
|
16 | |
17 |
|
18 |
|
19 | selectedValue: PropTypes.oneOfType([
|
20 | PropTypes.string,
|
21 | PropTypes.number,
|
22 | PropTypes.bool,
|
23 | ]),
|
24 | |
25 |
|
26 |
|
27 | value: PropTypes.oneOfType([
|
28 | PropTypes.string,
|
29 | PropTypes.number,
|
30 | PropTypes.bool,
|
31 | ]),
|
32 | |
33 |
|
34 |
|
35 | onChange: PropTypes.func,
|
36 | |
37 |
|
38 |
|
39 | size: PropTypes.oneOf(['lg','sm']),
|
40 |
|
41 | children: PropTypes.node.isRequired,
|
42 |
|
43 | Component: PropTypes.oneOfType([
|
44 | PropTypes.string,
|
45 | PropTypes.func,
|
46 | PropTypes.object
|
47 | ])
|
48 | };
|
49 |
|
50 | const defaultProps = {
|
51 | Component: 'div',
|
52 | clsPrefix: 'u-radio-group',
|
53 | defaultValue: ''
|
54 | };
|
55 |
|
56 |
|
57 |
|
58 |
|
59 | const childContextTypes = {
|
60 | radioGroup: PropTypes.object
|
61 | }
|
62 |
|
63 | class RadioGroup extends React.Component {
|
64 |
|
65 | constructor(props, context) {
|
66 | super(props, context);
|
67 |
|
68 | this.state={
|
69 | focusvalue:'',
|
70 | selectedValue: props.value?props.value:(props.selectedValue ? props.selectedValue : props.defaultValue)
|
71 | }
|
72 | }
|
73 |
|
74 | getValues = ()=>{
|
75 | let array = []
|
76 | let children = this.props.children;
|
77 | if(!children){
|
78 | console.error('RadioGroup must have child nodes');
|
79 | return array;
|
80 | }
|
81 | if(children.length>1){
|
82 | children.map((item)=>{
|
83 | array.push(item.props.value)
|
84 | })
|
85 | }else if(children.length === 1){
|
86 | array.push(children[0].props.value)
|
87 | }else{
|
88 | array.push(children.props.value);
|
89 | }
|
90 | return array;
|
91 | }
|
92 | componentDidMount(){
|
93 | let array = this.getValues();
|
94 | if(array.indexOf(this.props.selectedValue)==-1){
|
95 | this.setState({
|
96 | focusvalue:array[0]
|
97 | })
|
98 | }
|
99 | }
|
100 |
|
101 | componentWillReceiveProps(nextProps){
|
102 | let array = this.getValues();
|
103 | if(array.indexOf(this.props.selectedValue)==-1 || array.indexOf(this.props.value)==-1){
|
104 | this.setState({
|
105 | focusvalue:array[0]
|
106 | })
|
107 | }else{
|
108 | this.setState({
|
109 | focusvalue:''
|
110 | })
|
111 | }
|
112 | if('selectedValue' in nextProps || 'value' in nextProps) {
|
113 | this.setState({
|
114 | selectedValue: typeof nextProps.selectedValue !== 'undifined' ? nextProps.selectedValue : nextProps.value
|
115 | })
|
116 | }
|
117 | }
|
118 |
|
119 | handleChange = (value) => {
|
120 | let { onChange } = this.props;
|
121 | this.setState({
|
122 | selectedValue: value
|
123 | })
|
124 | onChange && onChange(value);
|
125 | }
|
126 |
|
127 | |
128 |
|
129 |
|
130 |
|
131 | getChildContext() {
|
132 | const {name, size} = this.props;
|
133 | let { selectedValue } = this.state;
|
134 | let onChange = this.handleChange;
|
135 | return {
|
136 | radioGroup: {
|
137 | name, selectedValue, onChange,size,focusvalue:this.state.focusvalue
|
138 | }
|
139 | }
|
140 | }
|
141 |
|
142 | render () {
|
143 | const {Component, name, selectedValue, onChange, children,size, clsPrefix, className, focusvalue,...others} = this.props;
|
144 |
|
145 | return <Component className={classnames(clsPrefix,className)} {...others} focusvalue={this.state.focusvalue}>{children}</Component>;
|
146 | }
|
147 | }
|
148 |
|
149 | RadioGroup.childContextTypes = childContextTypes;
|
150 | RadioGroup.propTypes = propTypes;
|
151 | RadioGroup.defaultProps = defaultProps;
|
152 | export default RadioGroup; |
\ | No newline at end of file |