]>
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) { |
dd2f6abd AS |
47 | if (this.isAM()) { |
48 | value.hour(+itemValue % 12); | |
95699887 | 49 | } else { |
dd2f6abd | 50 | value.hour((+itemValue % 12) + 12); |
95699887 AS |
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 hourOptionsAdj; |
dd2f6abd | 89 | let hourAdj; |
dd275f7d | 90 | if (use12Hours) { |
dd2f6abd AS |
91 | hourOptionsAdj = [12].concat(hourOptions.filter(h => h < 12 && h > 0)); |
92 | hourAdj = (hour % 12) || 12; | |
95699887 AS |
93 | } else { |
94 | hourOptionsAdj = hourOptions; | |
dd2f6abd | 95 | hourAdj = hour; |
95699887 | 96 | } |
71bd9bc1 | 97 | |
02de449a | 98 | return ( |
99 | <Select | |
100 | prefixCls={prefixCls} | |
95699887 AS |
101 | options={hourOptionsAdj.map(option => formatOption(option, disabledOptions))} |
102 | selectedIndex={hourOptionsAdj.indexOf(hourAdj)} | |
02de449a | 103 | type="hour" |
104 | onSelect={this.onItemChange} | |
182e9fcc | 105 | onMouseEnter={this.onEnterSelectPanel.bind(this, 'hour')} |
02de449a | 106 | /> |
107 | ); | |
108 | }, | |
109 | ||
110 | getMinuteSelect(minute) { | |
37c36c09 | 111 | const { prefixCls, minuteOptions, disabledMinutes, defaultOpenValue, showMinute } = this.props; |
112 | if (!showMinute) { | |
113 | return null; | |
114 | } | |
4984ed85 | 115 | const value = this.props.value || defaultOpenValue; |
116 | const disabledOptions = disabledMinutes(value.hour()); | |
71bd9bc1 | 117 | |
02de449a | 118 | return ( |
119 | <Select | |
120 | prefixCls={prefixCls} | |
71bd9bc1 | 121 | options={minuteOptions.map(option => formatOption(option, disabledOptions))} |
02de449a | 122 | selectedIndex={minuteOptions.indexOf(minute)} |
123 | type="minute" | |
124 | onSelect={this.onItemChange} | |
182e9fcc | 125 | onMouseEnter={this.onEnterSelectPanel.bind(this, 'minute')} |
02de449a | 126 | /> |
127 | ); | |
128 | }, | |
129 | ||
182e9fcc | 130 | getSecondSelect(second) { |
4984ed85 | 131 | const { prefixCls, secondOptions, disabledSeconds, showSecond, defaultOpenValue } = this.props; |
02de449a | 132 | if (!showSecond) { |
133 | return null; | |
134 | } | |
4984ed85 | 135 | const value = this.props.value || defaultOpenValue; |
136 | const disabledOptions = disabledSeconds(value.hour(), value.minute()); | |
71bd9bc1 | 137 | |
02de449a | 138 | return ( |
139 | <Select | |
140 | prefixCls={prefixCls} | |
71bd9bc1 | 141 | options={secondOptions.map(option => formatOption(option, disabledOptions))} |
02de449a | 142 | selectedIndex={secondOptions.indexOf(second)} |
143 | type="second" | |
144 | onSelect={this.onItemChange} | |
182e9fcc | 145 | onMouseEnter={this.onEnterSelectPanel.bind(this, 'second')} |
02de449a | 146 | /> |
147 | ); | |
148 | }, | |
149 | ||
95699887 | 150 | getAMPMSelect() { |
dd2f6abd | 151 | const { prefixCls, use12Hours } = this.props; |
dd275f7d | 152 | if (!use12Hours) { |
95699887 AS |
153 | return null; |
154 | } | |
95699887 | 155 | const AMPMOptions = [{ value: 'AM' }, { value: 'PM' }]; |
dd2f6abd | 156 | const selected = this.isAM() ? 0 : 1; |
95699887 AS |
157 | |
158 | return ( | |
159 | <Select | |
160 | prefixCls={prefixCls} | |
161 | options={AMPMOptions} | |
162 | selectedIndex={selected} | |
163 | type="ampm" | |
164 | onSelect={this.onItemChange} | |
165 | onMouseEnter={this.onEnterSelectPanel.bind(this, 'ampm')} | |
166 | /> | |
167 | ); | |
168 | }, | |
169 | ||
dd2f6abd AS |
170 | isAM() { |
171 | const { value } = this.props; | |
172 | return value.hour() >= 0 && value.hour() < 12; | |
173 | }, | |
174 | ||
8133e8cf | 175 | render() { |
4984ed85 | 176 | const { prefixCls, defaultOpenValue } = this.props; |
177 | const value = this.props.value || defaultOpenValue; | |
02de449a | 178 | return ( |
179 | <div className={`${prefixCls}-combobox`}> | |
4984ed85 | 180 | {this.getHourSelect(value.hour())} |
181 | {this.getMinuteSelect(value.minute())} | |
182 | {this.getSecondSelect(value.second())} | |
95699887 | 183 | {this.getAMPMSelect(value.hour())} |
02de449a | 184 | </div> |
185 | ); | |
186 | }, | |
187 | }); | |
188 | ||
189 | export default Combobox; |