]>
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) { |
2a8cf5ae AS |
59 | if (itemValue === 'PM' && value.hour() < 12) { |
60 | value.hour((value.hour() % 12) + 12); | |
95699887 AS |
61 | } |
62 | ||
63 | if (itemValue === 'AM') { | |
2a8cf5ae | 64 | if (value.hour() >= 12) { |
95699887 AS |
65 | value.hour(value.hour() - 12); |
66 | } | |
67 | } | |
68 | } | |
11b97949 | 69 | } else { |
95699887 | 70 | value.second(+itemValue); |
02de449a | 71 | } |
02de449a | 72 | onChange(value); |
73 | }, | |
74 | ||
182e9fcc | 75 | onEnterSelectPanel(range) { |
76 | this.props.onCurrentSelectPanelChange(range); | |
77 | }, | |
78 | ||
02de449a | 79 | getHourSelect(hour) { |
dd275f7d | 80 | const { prefixCls, hourOptions, disabledHours, showHour, use12Hours } = this.props; |
02de449a | 81 | if (!showHour) { |
82 | return null; | |
83 | } | |
71bd9bc1 | 84 | const disabledOptions = disabledHours(); |
95699887 | 85 | let hourOptionsAdj; |
dd2f6abd | 86 | let hourAdj; |
dd275f7d | 87 | if (use12Hours) { |
dd2f6abd AS |
88 | hourOptionsAdj = [12].concat(hourOptions.filter(h => h < 12 && h > 0)); |
89 | hourAdj = (hour % 12) || 12; | |
95699887 AS |
90 | } else { |
91 | hourOptionsAdj = hourOptions; | |
dd2f6abd | 92 | hourAdj = hour; |
95699887 | 93 | } |
71bd9bc1 | 94 | |
02de449a | 95 | return ( |
96 | <Select | |
97 | prefixCls={prefixCls} | |
95699887 AS |
98 | options={hourOptionsAdj.map(option => formatOption(option, disabledOptions))} |
99 | selectedIndex={hourOptionsAdj.indexOf(hourAdj)} | |
02de449a | 100 | type="hour" |
101 | onSelect={this.onItemChange} | |
182e9fcc | 102 | onMouseEnter={this.onEnterSelectPanel.bind(this, 'hour')} |
02de449a | 103 | /> |
104 | ); | |
105 | }, | |
106 | ||
107 | getMinuteSelect(minute) { | |
37c36c09 | 108 | const { prefixCls, minuteOptions, disabledMinutes, defaultOpenValue, showMinute } = this.props; |
109 | if (!showMinute) { | |
110 | return null; | |
111 | } | |
4984ed85 | 112 | const value = this.props.value || defaultOpenValue; |
113 | const disabledOptions = disabledMinutes(value.hour()); | |
71bd9bc1 | 114 | |
02de449a | 115 | return ( |
116 | <Select | |
117 | prefixCls={prefixCls} | |
71bd9bc1 | 118 | options={minuteOptions.map(option => formatOption(option, disabledOptions))} |
02de449a | 119 | selectedIndex={minuteOptions.indexOf(minute)} |
120 | type="minute" | |
121 | onSelect={this.onItemChange} | |
182e9fcc | 122 | onMouseEnter={this.onEnterSelectPanel.bind(this, 'minute')} |
02de449a | 123 | /> |
124 | ); | |
125 | }, | |
126 | ||
182e9fcc | 127 | getSecondSelect(second) { |
4984ed85 | 128 | const { prefixCls, secondOptions, disabledSeconds, showSecond, defaultOpenValue } = this.props; |
02de449a | 129 | if (!showSecond) { |
130 | return null; | |
131 | } | |
4984ed85 | 132 | const value = this.props.value || defaultOpenValue; |
133 | const disabledOptions = disabledSeconds(value.hour(), value.minute()); | |
71bd9bc1 | 134 | |
02de449a | 135 | return ( |
136 | <Select | |
137 | prefixCls={prefixCls} | |
71bd9bc1 | 138 | options={secondOptions.map(option => formatOption(option, disabledOptions))} |
02de449a | 139 | selectedIndex={secondOptions.indexOf(second)} |
140 | type="second" | |
141 | onSelect={this.onItemChange} | |
182e9fcc | 142 | onMouseEnter={this.onEnterSelectPanel.bind(this, 'second')} |
02de449a | 143 | /> |
144 | ); | |
145 | }, | |
146 | ||
95699887 | 147 | getAMPMSelect() { |
eb3c19e2 | 148 | const { prefixCls, use12Hours, format } = this.props; |
dd275f7d | 149 | if (!use12Hours) { |
95699887 AS |
150 | return null; |
151 | } | |
eb3c19e2 AS |
152 | |
153 | const AMPMOptions = ['am', 'pm'] // If format has A char, then we should uppercase AM/PM | |
154 | .map(c => format.match(/\sA/) ? c.toUpperCase() : c) | |
155 | .map(c => ({ value: c })); | |
156 | ||
dd2f6abd | 157 | const selected = this.isAM() ? 0 : 1; |
95699887 AS |
158 | |
159 | return ( | |
160 | <Select | |
161 | prefixCls={prefixCls} | |
162 | options={AMPMOptions} | |
163 | selectedIndex={selected} | |
164 | type="ampm" | |
165 | onSelect={this.onItemChange} | |
166 | onMouseEnter={this.onEnterSelectPanel.bind(this, 'ampm')} | |
167 | /> | |
168 | ); | |
169 | }, | |
170 | ||
dd2f6abd AS |
171 | isAM() { |
172 | const { value } = this.props; | |
173 | return value.hour() >= 0 && value.hour() < 12; | |
174 | }, | |
175 | ||
8133e8cf | 176 | render() { |
4984ed85 | 177 | const { prefixCls, defaultOpenValue } = this.props; |
178 | const value = this.props.value || defaultOpenValue; | |
02de449a | 179 | return ( |
180 | <div className={`${prefixCls}-combobox`}> | |
4984ed85 | 181 | {this.getHourSelect(value.hour())} |
182 | {this.getMinuteSelect(value.minute())} | |
183 | {this.getSecondSelect(value.second())} | |
95699887 | 184 | {this.getAMPMSelect(value.hour())} |
02de449a | 185 | </div> |
186 | ); | |
187 | }, | |
188 | }); | |
189 | ||
190 | export default Combobox; |