]>
Commit | Line | Data |
---|---|---|
02de449a | 1 | import React, {PropTypes} from 'react'; |
2 | import Select from './Select'; | |
8133e8cf | 3 | import GregorianCalendar from 'gregorian-calendar'; |
02de449a | 4 | |
5 | const formatOption = (option) => { | |
6 | if (option < 10) { | |
7 | return `0${option}`; | |
8 | } | |
9 | return `${option}`; | |
10 | }; | |
11 | ||
12 | const Combobox = React.createClass({ | |
13 | propTypes: { | |
14 | formatter: PropTypes.object, | |
15 | prefixCls: PropTypes.string, | |
16 | value: PropTypes.object, | |
17 | onChange: PropTypes.func, | |
18 | showHour: PropTypes.bool, | |
8133e8cf | 19 | gregorianCalendarLocale: PropTypes.object, |
02de449a | 20 | showSecond: PropTypes.bool, |
21 | hourOptions: PropTypes.array, | |
22 | minuteOptions: PropTypes.array, | |
23 | secondOptions: PropTypes.array, | |
24 | }, | |
25 | ||
26 | onItemChange(type, itemValue) { | |
8133e8cf | 27 | const { onChange } = this.props; |
28 | let value = this.props.value; | |
29 | if (value) { | |
30 | value = value.clone(); | |
31 | } else { | |
32 | value = this.getNow().clone(); | |
33 | } | |
11b97949 M |
34 | if (type === 'hour') { |
35 | value.setHourOfDay(itemValue); | |
36 | } else if (type === 'minute') { | |
37 | value.setMinutes(itemValue); | |
38 | } else { | |
39 | value.setSeconds(itemValue); | |
02de449a | 40 | } |
02de449a | 41 | onChange(value); |
42 | }, | |
43 | ||
44 | getHourSelect(hour) { | |
45 | const { prefixCls, hourOptions, showHour } = this.props; | |
46 | if (!showHour) { | |
47 | return null; | |
48 | } | |
49 | return ( | |
50 | <Select | |
51 | prefixCls={prefixCls} | |
52 | options={hourOptions.map(option => formatOption(option))} | |
53 | selectedIndex={hourOptions.indexOf(hour)} | |
54 | type="hour" | |
55 | onSelect={this.onItemChange} | |
56 | /> | |
57 | ); | |
58 | }, | |
59 | ||
60 | getMinuteSelect(minute) { | |
61 | const { prefixCls, minuteOptions } = this.props; | |
62 | return ( | |
63 | <Select | |
64 | prefixCls={prefixCls} | |
65 | options={minuteOptions.map(option => formatOption(option))} | |
66 | selectedIndex={minuteOptions.indexOf(minute)} | |
67 | type="minute" | |
68 | onSelect={this.onItemChange} | |
69 | /> | |
70 | ); | |
71 | }, | |
72 | ||
73 | getSectionSelect(second) { | |
74 | const { prefixCls, secondOptions, showSecond } = this.props; | |
75 | if (!showSecond) { | |
76 | return null; | |
77 | } | |
78 | return ( | |
79 | <Select | |
80 | prefixCls={prefixCls} | |
81 | options={secondOptions.map(option => formatOption(option))} | |
82 | selectedIndex={secondOptions.indexOf(second)} | |
83 | type="second" | |
84 | onSelect={this.onItemChange} | |
85 | /> | |
86 | ); | |
87 | }, | |
88 | ||
8133e8cf | 89 | getNow() { |
90 | if (this.showNow) { | |
91 | return this.showNow; | |
92 | } | |
93 | const value = new GregorianCalendar(this.props.gregorianCalendarLocale); | |
94 | value.setTime(Date.now()); | |
95 | this.showNow = value; | |
96 | return value; | |
97 | }, | |
02de449a | 98 | |
8133e8cf | 99 | render() { |
100 | const { prefixCls } = this.props; | |
101 | const value = this.props.value || this.getNow(); | |
02de449a | 102 | return ( |
103 | <div className={`${prefixCls}-combobox`}> | |
11b97949 M |
104 | {this.getHourSelect(value.getHourOfDay())} |
105 | {this.getMinuteSelect(value.getMinutes())} | |
106 | {this.getSectionSelect(value.getSeconds())} | |
02de449a | 107 | </div> |
108 | ); | |
109 | }, | |
110 | }); | |
111 | ||
112 | export default Combobox; |