1 import React, {PropTypes} from 'react';
2 import Select from './Select';
3 import GregorianCalendar from 'gregorian-calendar';
5 const formatOption = (option) => {
12 const Combobox = React.createClass({
14 formatter: PropTypes.object,
15 prefixCls: PropTypes.string,
16 value: PropTypes.object,
17 onChange: PropTypes.func,
18 showHour: PropTypes.bool,
19 gregorianCalendarLocale: PropTypes.object,
20 showSecond: PropTypes.bool,
21 hourOptions: PropTypes.array,
22 minuteOptions: PropTypes.array,
23 secondOptions: PropTypes.array,
24 onCurrentSelectPanelChange: PropTypes.func,
27 onItemChange(type, itemValue) {
28 const { onChange } = this.props;
29 let value = this.props.value;
31 value = value.clone();
33 value = this.getNow().clone();
35 if (type === 'hour') {
36 value.setHourOfDay(itemValue);
37 } else if (type === 'minute') {
38 value.setMinutes(itemValue);
40 value.setSeconds(itemValue);
45 onEnterSelectPanel(range) {
46 this.props.onCurrentSelectPanelChange(range);
50 const { prefixCls, hourOptions, showHour } = this.props;
57 options={hourOptions.map(option => formatOption(option))}
58 selectedIndex={hourOptions.indexOf(hour)}
60 onSelect={this.onItemChange}
61 onMouseEnter={this.onEnterSelectPanel.bind(this, 'hour')}
66 getMinuteSelect(minute) {
67 const { prefixCls, minuteOptions } = this.props;
71 options={minuteOptions.map(option => formatOption(option))}
72 selectedIndex={minuteOptions.indexOf(minute)}
74 onSelect={this.onItemChange}
75 onMouseEnter={this.onEnterSelectPanel.bind(this, 'minute')}
80 getSecondSelect(second) {
81 const { prefixCls, secondOptions, showSecond } = this.props;
88 options={secondOptions.map(option => formatOption(option))}
89 selectedIndex={secondOptions.indexOf(second)}
91 onSelect={this.onItemChange}
92 onMouseEnter={this.onEnterSelectPanel.bind(this, 'second')}
101 const value = new GregorianCalendar(this.props.gregorianCalendarLocale);
102 value.setTime(Date.now());
103 this.showNow = value;
108 const { prefixCls } = this.props;
109 const value = this.props.value || this.getNow();
111 <div className={`${prefixCls}-combobox`}>
112 {this.getHourSelect(value.getHourOfDay())}
113 {this.getMinuteSelect(value.getMinutes())}
114 {this.getSecondSelect(value.getSeconds())}
120 export default Combobox;