diff options
author | 崖鹰 <zhao.wuz@alipay.com> | 2015-11-13 11:33:48 +0800 |
---|---|---|
committer | 崖鹰 <zhao.wuz@alipay.com> | 2015-11-13 11:33:48 +0800 |
commit | 02de449a0474765a4796fa607e7e3922252f574f (patch) | |
tree | dc37faf2f610343112ea1fc3707ad188092bd031 /src/module/Combobox.jsx | |
parent | 1f336fabc9135ac971e53d9c2ae407db69b8f096 (diff) | |
download | time-picker-02de449a0474765a4796fa607e7e3922252f574f.tar.gz time-picker-02de449a0474765a4796fa607e7e3922252f574f.tar.zst time-picker-02de449a0474765a4796fa607e7e3922252f574f.zip |
release 0.1.0
Diffstat (limited to 'src/module/Combobox.jsx')
-rw-r--r-- | src/module/Combobox.jsx | 95 |
1 files changed, 95 insertions, 0 deletions
diff --git a/src/module/Combobox.jsx b/src/module/Combobox.jsx new file mode 100644 index 0000000..e6fe5ed --- /dev/null +++ b/src/module/Combobox.jsx | |||
@@ -0,0 +1,95 @@ | |||
1 | import React, {PropTypes} from 'react'; | ||
2 | import Select from './Select'; | ||
3 | |||
4 | const formatOption = (option) => { | ||
5 | if (option < 10) { | ||
6 | return `0${option}`; | ||
7 | } | ||
8 | return `${option}`; | ||
9 | }; | ||
10 | |||
11 | const Combobox = React.createClass({ | ||
12 | propTypes: { | ||
13 | formatter: PropTypes.object, | ||
14 | prefixCls: PropTypes.string, | ||
15 | value: PropTypes.object, | ||
16 | onChange: PropTypes.func, | ||
17 | showHour: PropTypes.bool, | ||
18 | showSecond: PropTypes.bool, | ||
19 | hourOptions: PropTypes.array, | ||
20 | minuteOptions: PropTypes.array, | ||
21 | secondOptions: PropTypes.array, | ||
22 | }, | ||
23 | |||
24 | onItemChange(type, itemValue) { | ||
25 | const { value, onChange } = this.props; | ||
26 | let index = 4; | ||
27 | if (type === 'minute') { | ||
28 | index = 5; | ||
29 | } else if (type === 'second') { | ||
30 | index = 6; | ||
31 | } | ||
32 | value.fields[index] = itemValue; | ||
33 | onChange(value); | ||
34 | }, | ||
35 | |||
36 | getHourSelect(hour) { | ||
37 | const { prefixCls, hourOptions, showHour } = this.props; | ||
38 | if (!showHour) { | ||
39 | return null; | ||
40 | } | ||
41 | return ( | ||
42 | <Select | ||
43 | prefixCls={prefixCls} | ||
44 | options={hourOptions.map(option => formatOption(option))} | ||
45 | selectedIndex={hourOptions.indexOf(hour)} | ||
46 | type="hour" | ||
47 | onSelect={this.onItemChange} | ||
48 | /> | ||
49 | ); | ||
50 | }, | ||
51 | |||
52 | getMinuteSelect(minute) { | ||
53 | const { prefixCls, minuteOptions } = this.props; | ||
54 | return ( | ||
55 | <Select | ||
56 | prefixCls={prefixCls} | ||
57 | options={minuteOptions.map(option => formatOption(option))} | ||
58 | selectedIndex={minuteOptions.indexOf(minute)} | ||
59 | type="minute" | ||
60 | onSelect={this.onItemChange} | ||
61 | /> | ||
62 | ); | ||
63 | }, | ||
64 | |||
65 | getSectionSelect(second) { | ||
66 | const { prefixCls, secondOptions, showSecond } = this.props; | ||
67 | if (!showSecond) { | ||
68 | return null; | ||
69 | } | ||
70 | return ( | ||
71 | <Select | ||
72 | prefixCls={prefixCls} | ||
73 | options={secondOptions.map(option => formatOption(option))} | ||
74 | selectedIndex={secondOptions.indexOf(second)} | ||
75 | type="second" | ||
76 | onSelect={this.onItemChange} | ||
77 | /> | ||
78 | ); | ||
79 | }, | ||
80 | |||
81 | render() { | ||
82 | const { prefixCls, value } = this.props; | ||
83 | const timeFields = value.fields; | ||
84 | |||
85 | return ( | ||
86 | <div className={`${prefixCls}-combobox`}> | ||
87 | {this.getHourSelect(timeFields[4])} | ||
88 | {this.getMinuteSelect(timeFields[5])} | ||
89 | {this.getSectionSelect(timeFields[6])} | ||
90 | </div> | ||
91 | ); | ||
92 | }, | ||
93 | }); | ||
94 | |||
95 | export default Combobox; | ||