]>
Commit | Line | Data |
---|---|---|
1 | import React, { PropTypes } from 'react'; | |
2 | import Select from './Select'; | |
3 | ||
4 | const formatOption = (option, disabledOptions) => { | |
5 | let value = `${option}`; | |
6 | if (option < 10) { | |
7 | value = `0${option}`; | |
8 | } | |
9 | ||
10 | let disabled = false; | |
11 | if (disabledOptions && disabledOptions.indexOf(option) >= 0) { | |
12 | disabled = true; | |
13 | } | |
14 | ||
15 | return { | |
16 | value, | |
17 | disabled, | |
18 | }; | |
19 | }; | |
20 | ||
21 | const Combobox = React.createClass({ | |
22 | propTypes: { | |
23 | format: PropTypes.string, | |
24 | defaultOpenValue: PropTypes.object, | |
25 | prefixCls: PropTypes.string, | |
26 | value: PropTypes.object, | |
27 | onChange: PropTypes.func, | |
28 | showHour: PropTypes.bool, | |
29 | showMinute: PropTypes.bool, | |
30 | showSecond: PropTypes.bool, | |
31 | hourOptions: PropTypes.array, | |
32 | minuteOptions: PropTypes.array, | |
33 | secondOptions: PropTypes.array, | |
34 | disabledHours: PropTypes.func, | |
35 | disabledMinutes: PropTypes.func, | |
36 | disabledSeconds: PropTypes.func, | |
37 | onCurrentSelectPanelChange: PropTypes.func, | |
38 | show12Hours: PropTypes.bool, | |
39 | }, | |
40 | ||
41 | onItemChange(type, itemValue) { | |
42 | const { onChange, defaultOpenValue, show12Hours } = this.props; | |
43 | const value = (this.props.value || defaultOpenValue).clone(); | |
44 | ||
45 | if (type === 'hour') { | |
46 | if (show12Hours) { | |
47 | if (value.hour() > 12 || !value.hour()) { | |
48 | value.hour(+itemValue + 12); | |
49 | } else { | |
50 | value.hour(+itemValue); | |
51 | } | |
52 | } else { | |
53 | value.hour(+itemValue); | |
54 | } | |
55 | } else if (type === 'minute') { | |
56 | value.minute(+itemValue); | |
57 | } else if (type === 'ampm') { | |
58 | if (show12Hours) { | |
59 | if (itemValue === 'PM' && value.hour() <= 12) { | |
60 | value.hour(value.hour() + 12); | |
61 | } | |
62 | ||
63 | if (itemValue === 'AM') { | |
64 | if (!value.hour()) { | |
65 | value.hour(12); | |
66 | } else | |
67 | if (value.hour() > 12) { | |
68 | value.hour(value.hour() - 12); | |
69 | } | |
70 | } | |
71 | } | |
72 | } else { | |
73 | value.second(+itemValue); | |
74 | } | |
75 | onChange(value); | |
76 | }, | |
77 | ||
78 | onEnterSelectPanel(range) { | |
79 | this.props.onCurrentSelectPanelChange(range); | |
80 | }, | |
81 | ||
82 | getHourSelect(hour) { | |
83 | const { prefixCls, hourOptions, disabledHours, showHour, show12Hours } = this.props; | |
84 | if (!showHour) { | |
85 | return null; | |
86 | } | |
87 | const disabledOptions = disabledHours(); | |
88 | let hourAdj; | |
89 | if (show12Hours) { | |
90 | if (hour > 12) { | |
91 | hourAdj = hour - 12; | |
92 | } else { | |
93 | hourAdj = hour || 12; | |
94 | } | |
95 | } else { | |
96 | hourAdj = hour; | |
97 | } | |
98 | ||
99 | let hourOptionsAdj; | |
100 | if (show12Hours) { | |
101 | hourOptionsAdj = hourOptions.filter(h => h <= 12 && h > 0); | |
102 | } else { | |
103 | hourOptionsAdj = hourOptions; | |
104 | } | |
105 | ||
106 | return ( | |
107 | <Select | |
108 | prefixCls={prefixCls} | |
109 | options={hourOptionsAdj.map(option => formatOption(option, disabledOptions))} | |
110 | selectedIndex={hourOptionsAdj.indexOf(hourAdj)} | |
111 | type="hour" | |
112 | onSelect={this.onItemChange} | |
113 | onMouseEnter={this.onEnterSelectPanel.bind(this, 'hour')} | |
114 | /> | |
115 | ); | |
116 | }, | |
117 | ||
118 | getMinuteSelect(minute) { | |
119 | const { prefixCls, minuteOptions, disabledMinutes, defaultOpenValue, showMinute } = this.props; | |
120 | if (!showMinute) { | |
121 | return null; | |
122 | } | |
123 | const value = this.props.value || defaultOpenValue; | |
124 | const disabledOptions = disabledMinutes(value.hour()); | |
125 | ||
126 | return ( | |
127 | <Select | |
128 | prefixCls={prefixCls} | |
129 | options={minuteOptions.map(option => formatOption(option, disabledOptions))} | |
130 | selectedIndex={minuteOptions.indexOf(minute)} | |
131 | type="minute" | |
132 | onSelect={this.onItemChange} | |
133 | onMouseEnter={this.onEnterSelectPanel.bind(this, 'minute')} | |
134 | /> | |
135 | ); | |
136 | }, | |
137 | ||
138 | getSecondSelect(second) { | |
139 | const { prefixCls, secondOptions, disabledSeconds, showSecond, defaultOpenValue } = this.props; | |
140 | if (!showSecond) { | |
141 | return null; | |
142 | } | |
143 | const value = this.props.value || defaultOpenValue; | |
144 | const disabledOptions = disabledSeconds(value.hour(), value.minute()); | |
145 | ||
146 | return ( | |
147 | <Select | |
148 | prefixCls={prefixCls} | |
149 | options={secondOptions.map(option => formatOption(option, disabledOptions))} | |
150 | selectedIndex={secondOptions.indexOf(second)} | |
151 | type="second" | |
152 | onSelect={this.onItemChange} | |
153 | onMouseEnter={this.onEnterSelectPanel.bind(this, 'second')} | |
154 | /> | |
155 | ); | |
156 | }, | |
157 | ||
158 | getAMPMSelect() { | |
159 | const { prefixCls, show12Hours, defaultOpenValue } = this.props; | |
160 | if (!show12Hours) { | |
161 | return null; | |
162 | } | |
163 | const value = this.props.value || defaultOpenValue; | |
164 | const AMPMOptions = [{ value: 'AM' }, { value: 'PM' }]; | |
165 | const selected = (!value.hour() || value.hour() > 12) ? 1 : 0; | |
166 | ||
167 | return ( | |
168 | <Select | |
169 | prefixCls={prefixCls} | |
170 | options={AMPMOptions} | |
171 | selectedIndex={selected} | |
172 | type="ampm" | |
173 | onSelect={this.onItemChange} | |
174 | onMouseEnter={this.onEnterSelectPanel.bind(this, 'ampm')} | |
175 | /> | |
176 | ); | |
177 | }, | |
178 | ||
179 | render() { | |
180 | const { prefixCls, defaultOpenValue } = this.props; | |
181 | const value = this.props.value || defaultOpenValue; | |
182 | return ( | |
183 | <div className={`${prefixCls}-combobox`}> | |
184 | {this.getHourSelect(value.hour())} | |
185 | {this.getMinuteSelect(value.minute())} | |
186 | {this.getSecondSelect(value.second())} | |
187 | {this.getAMPMSelect(value.hour())} | |
188 | </div> | |
189 | ); | |
190 | }, | |
191 | }); | |
192 | ||
193 | export default Combobox; |