1 import React, { PropTypes } from 'react';
2 import Select from './Select';
4 const formatOption = (option, disabledOptions) => {
5 let value = `${option}`;
11 if (disabledOptions && disabledOptions.indexOf(option) >= 0) {
21 const Combobox = React.createClass({
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 use12Hours: PropTypes.bool,
41 onItemChange(type, itemValue) {
42 const { onChange, defaultOpenValue, use12Hours } = this.props;
43 const value = (this.props.value || defaultOpenValue).clone();
45 if (type === 'hour') {
48 value.hour(+itemValue % 12);
50 value.hour((+itemValue % 12) + 12);
53 value.hour(+itemValue);
55 } else if (type === 'minute') {
56 value.minute(+itemValue);
57 } else if (type === 'ampm') {
58 const ampm = itemValue.toUpperCase();
60 if (ampm === 'PM' && value.hour() < 12) {
61 value.hour((value.hour() % 12) + 12);
65 if (value.hour() >= 12) {
66 value.hour(value.hour() - 12);
71 value.second(+itemValue);
76 onEnterSelectPanel(range) {
77 this.props.onCurrentSelectPanelChange(range);
81 const { prefixCls, hourOptions, disabledHours, showHour, use12Hours } = this.props;
85 const disabledOptions = disabledHours();
89 hourOptionsAdj = [12].concat(hourOptions.filter(h => h < 12 && h > 0));
90 hourAdj = (hour % 12) || 12;
92 hourOptionsAdj = hourOptions;
99 options={hourOptionsAdj.map(option => formatOption(option, disabledOptions))}
100 selectedIndex={hourOptionsAdj.indexOf(hourAdj)}
102 onSelect={this.onItemChange}
103 onMouseEnter={this.onEnterSelectPanel.bind(this, 'hour')}
108 getMinuteSelect(minute) {
109 const { prefixCls, minuteOptions, disabledMinutes, defaultOpenValue, showMinute } = this.props;
113 const value = this.props.value || defaultOpenValue;
114 const disabledOptions = disabledMinutes(value.hour());
118 prefixCls={prefixCls}
119 options={minuteOptions.map(option => formatOption(option, disabledOptions))}
120 selectedIndex={minuteOptions.indexOf(minute)}
122 onSelect={this.onItemChange}
123 onMouseEnter={this.onEnterSelectPanel.bind(this, 'minute')}
128 getSecondSelect(second) {
129 const { prefixCls, secondOptions, disabledSeconds, showSecond, defaultOpenValue } = this.props;
133 const value = this.props.value || defaultOpenValue;
134 const disabledOptions = disabledSeconds(value.hour(), value.minute());
138 prefixCls={prefixCls}
139 options={secondOptions.map(option => formatOption(option, disabledOptions))}
140 selectedIndex={secondOptions.indexOf(second)}
142 onSelect={this.onItemChange}
143 onMouseEnter={this.onEnterSelectPanel.bind(this, 'second')}
149 const { prefixCls, use12Hours, format } = this.props;
154 const AMPMOptions = ['am', 'pm'] // If format has A char, then we should uppercase AM/PM
155 .map(c => format.match(/\sA/) ? c.toUpperCase() : c)
156 .map(c => ({ value: c }));
158 const selected = this.isAM() ? 0 : 1;
162 prefixCls={prefixCls}
163 options={AMPMOptions}
164 selectedIndex={selected}
166 onSelect={this.onItemChange}
167 onMouseEnter={this.onEnterSelectPanel.bind(this, 'ampm')}
173 const value = (this.props.value || this.props.defaultOpenValue);
174 return value.hour() >= 0 && value.hour() < 12;
178 const { prefixCls, defaultOpenValue } = this.props;
179 const value = this.props.value || defaultOpenValue;
181 <div className={`${prefixCls}-combobox`}>
182 {this.getHourSelect(value.hour())}
183 {this.getMinuteSelect(value.minute())}
184 {this.getSecondSelect(value.second())}
185 {this.getAMPMSelect(value.hour())}
191 export default Combobox;