]>
Commit | Line | Data |
---|---|---|
4984ed85 | 1 | import React, { PropTypes } from 'react'; |
02de449a | 2 | import Select from './Select'; |
3 | ||
518b852e M |
4 | const formatOption = (option, disabledOptions) => { |
5 | let value = `${option}`; | |
02de449a | 6 | if (option < 10) { |
518b852e | 7 | value = `0${option}`; |
02de449a | 8 | } |
518b852e M |
9 | |
10 | let disabled = false; | |
0e62bf0b | 11 | if (disabledOptions && disabledOptions.indexOf(option) >= 0) { |
518b852e M |
12 | disabled = true; |
13 | } | |
14 | ||
15 | return { | |
16 | value, | |
17 | disabled, | |
18 | }; | |
02de449a | 19 | }; |
20 | ||
21 | const Combobox = React.createClass({ | |
22 | propTypes: { | |
4984ed85 | 23 | format: PropTypes.string, |
24 | defaultOpenValue: PropTypes.object, | |
02de449a | 25 | prefixCls: PropTypes.string, |
26 | value: PropTypes.object, | |
27 | onChange: PropTypes.func, | |
28 | showHour: PropTypes.bool, | |
37c36c09 | 29 | showMinute: PropTypes.bool, |
02de449a | 30 | showSecond: PropTypes.bool, |
31 | hourOptions: PropTypes.array, | |
32 | minuteOptions: PropTypes.array, | |
33 | secondOptions: PropTypes.array, | |
71bd9bc1 M |
34 | disabledHours: PropTypes.func, |
35 | disabledMinutes: PropTypes.func, | |
36 | disabledSeconds: PropTypes.func, | |
182e9fcc | 37 | onCurrentSelectPanelChange: PropTypes.func, |
dd275f7d | 38 | use12Hours: PropTypes.bool, |
02de449a | 39 | }, |
40 | ||
41 | onItemChange(type, itemValue) { | |
dd275f7d | 42 | const { onChange, defaultOpenValue, use12Hours } = this.props; |
4984ed85 | 43 | const value = (this.props.value || defaultOpenValue).clone(); |
95699887 | 44 | |
11b97949 | 45 | if (type === 'hour') { |
dd275f7d | 46 | if (use12Hours) { |
95699887 AS |
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 | } | |
11b97949 | 55 | } else if (type === 'minute') { |
95699887 AS |
56 | value.minute(+itemValue); |
57 | } else if (type === 'ampm') { | |
dd275f7d | 58 | if (use12Hours) { |
95699887 AS |
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 | } | |
11b97949 | 72 | } else { |
95699887 | 73 | value.second(+itemValue); |
02de449a | 74 | } |
02de449a | 75 | onChange(value); |
76 | }, | |
77 | ||
182e9fcc | 78 | onEnterSelectPanel(range) { |
79 | this.props.onCurrentSelectPanelChange(range); | |
80 | }, | |
81 | ||
02de449a | 82 | getHourSelect(hour) { |
dd275f7d | 83 | const { prefixCls, hourOptions, disabledHours, showHour, use12Hours } = this.props; |
02de449a | 84 | if (!showHour) { |
85 | return null; | |
86 | } | |
71bd9bc1 | 87 | const disabledOptions = disabledHours(); |
95699887 | 88 | let hourAdj; |
dd275f7d | 89 | if (use12Hours) { |
95699887 AS |
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; | |
dd275f7d | 100 | if (use12Hours) { |
95699887 AS |
101 | hourOptionsAdj = hourOptions.filter(h => h <= 12 && h > 0); |
102 | } else { | |
103 | hourOptionsAdj = hourOptions; | |
104 | } | |
71bd9bc1 | 105 | |
02de449a | 106 | return ( |
107 | <Select | |
108 | prefixCls={prefixCls} | |
95699887 AS |
109 | options={hourOptionsAdj.map(option => formatOption(option, disabledOptions))} |
110 | selectedIndex={hourOptionsAdj.indexOf(hourAdj)} | |
02de449a | 111 | type="hour" |
112 | onSelect={this.onItemChange} | |
182e9fcc | 113 | onMouseEnter={this.onEnterSelectPanel.bind(this, 'hour')} |
02de449a | 114 | /> |
115 | ); | |
116 | }, | |
117 | ||
118 | getMinuteSelect(minute) { | |
37c36c09 | 119 | const { prefixCls, minuteOptions, disabledMinutes, defaultOpenValue, showMinute } = this.props; |
120 | if (!showMinute) { | |
121 | return null; | |
122 | } | |
4984ed85 | 123 | const value = this.props.value || defaultOpenValue; |
124 | const disabledOptions = disabledMinutes(value.hour()); | |
71bd9bc1 | 125 | |
02de449a | 126 | return ( |
127 | <Select | |
128 | prefixCls={prefixCls} | |
71bd9bc1 | 129 | options={minuteOptions.map(option => formatOption(option, disabledOptions))} |
02de449a | 130 | selectedIndex={minuteOptions.indexOf(minute)} |
131 | type="minute" | |
132 | onSelect={this.onItemChange} | |
182e9fcc | 133 | onMouseEnter={this.onEnterSelectPanel.bind(this, 'minute')} |
02de449a | 134 | /> |
135 | ); | |
136 | }, | |
137 | ||
182e9fcc | 138 | getSecondSelect(second) { |
4984ed85 | 139 | const { prefixCls, secondOptions, disabledSeconds, showSecond, defaultOpenValue } = this.props; |
02de449a | 140 | if (!showSecond) { |
141 | return null; | |
142 | } | |
4984ed85 | 143 | const value = this.props.value || defaultOpenValue; |
144 | const disabledOptions = disabledSeconds(value.hour(), value.minute()); | |
71bd9bc1 | 145 | |
02de449a | 146 | return ( |
147 | <Select | |
148 | prefixCls={prefixCls} | |
71bd9bc1 | 149 | options={secondOptions.map(option => formatOption(option, disabledOptions))} |
02de449a | 150 | selectedIndex={secondOptions.indexOf(second)} |
151 | type="second" | |
152 | onSelect={this.onItemChange} | |
182e9fcc | 153 | onMouseEnter={this.onEnterSelectPanel.bind(this, 'second')} |
02de449a | 154 | /> |
155 | ); | |
156 | }, | |
157 | ||
95699887 | 158 | getAMPMSelect() { |
dd275f7d AS |
159 | const { prefixCls, use12Hours, defaultOpenValue } = this.props; |
160 | if (!use12Hours) { | |
95699887 AS |
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 | ||
8133e8cf | 179 | render() { |
4984ed85 | 180 | const { prefixCls, defaultOpenValue } = this.props; |
181 | const value = this.props.value || defaultOpenValue; | |
02de449a | 182 | return ( |
183 | <div className={`${prefixCls}-combobox`}> | |
4984ed85 | 184 | {this.getHourSelect(value.hour())} |
185 | {this.getMinuteSelect(value.minute())} | |
186 | {this.getSecondSelect(value.second())} | |
95699887 | 187 | {this.getAMPMSelect(value.hour())} |
02de449a | 188 | </div> |
189 | ); | |
190 | }, | |
191 | }); | |
192 | ||
193 | export default Combobox; |