diff options
author | yiminghe <yiminghe@gmail.com> | 2016-08-04 19:53:55 +0800 |
---|---|---|
committer | yiminghe <yiminghe@gmail.com> | 2016-08-04 19:53:55 +0800 |
commit | 4984ed85e54f442998a335db70618d6184fa397e (patch) | |
tree | 6ae348b2cac5f48f3afb6f7b8dd0c2fd02f044fc /src/module/Combobox.jsx | |
parent | deaa6062ea2e274d50d58c70251c1237c0c03c67 (diff) | |
download | time-picker-4984ed85e54f442998a335db70618d6184fa397e.tar.gz time-picker-4984ed85e54f442998a335db70618d6184fa397e.tar.zst time-picker-4984ed85e54f442998a335db70618d6184fa397e.zip |
2.x :boom:2.0.0
Diffstat (limited to 'src/module/Combobox.jsx')
-rw-r--r-- | src/module/Combobox.jsx | 141 |
1 files changed, 0 insertions, 141 deletions
diff --git a/src/module/Combobox.jsx b/src/module/Combobox.jsx deleted file mode 100644 index f1e7c5b..0000000 --- a/src/module/Combobox.jsx +++ /dev/null | |||
@@ -1,141 +0,0 @@ | |||
1 | import React, {PropTypes} from 'react'; | ||
2 | import Select from './Select'; | ||
3 | import GregorianCalendar from 'gregorian-calendar'; | ||
4 | |||
5 | const formatOption = (option, disabledOptions) => { | ||
6 | let value = `${option}`; | ||
7 | if (option < 10) { | ||
8 | value = `0${option}`; | ||
9 | } | ||
10 | |||
11 | let disabled = false; | ||
12 | if (disabledOptions && disabledOptions.indexOf(option) >= 0) { | ||
13 | disabled = true; | ||
14 | } | ||
15 | |||
16 | return { | ||
17 | value, | ||
18 | disabled, | ||
19 | }; | ||
20 | }; | ||
21 | |||
22 | const Combobox = React.createClass({ | ||
23 | propTypes: { | ||
24 | formatter: PropTypes.object, | ||
25 | prefixCls: PropTypes.string, | ||
26 | value: PropTypes.object, | ||
27 | onChange: PropTypes.func, | ||
28 | showHour: PropTypes.bool, | ||
29 | gregorianCalendarLocale: PropTypes.object, | ||
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 | }, | ||
39 | |||
40 | onItemChange(type, itemValue) { | ||
41 | const { onChange } = this.props; | ||
42 | let value = this.props.value; | ||
43 | if (value) { | ||
44 | value = value.clone(); | ||
45 | } else { | ||
46 | value = this.getNow().clone(); | ||
47 | } | ||
48 | if (type === 'hour') { | ||
49 | value.setHourOfDay(itemValue); | ||
50 | } else if (type === 'minute') { | ||
51 | value.setMinutes(itemValue); | ||
52 | } else { | ||
53 | value.setSeconds(itemValue); | ||
54 | } | ||
55 | onChange(value); | ||
56 | }, | ||
57 | |||
58 | onEnterSelectPanel(range) { | ||
59 | this.props.onCurrentSelectPanelChange(range); | ||
60 | }, | ||
61 | |||
62 | getHourSelect(hour) { | ||
63 | const { prefixCls, hourOptions, disabledHours, showHour } = this.props; | ||
64 | if (!showHour) { | ||
65 | return null; | ||
66 | } | ||
67 | const disabledOptions = disabledHours(); | ||
68 | |||
69 | return ( | ||
70 | <Select | ||
71 | prefixCls={prefixCls} | ||
72 | options={hourOptions.map(option => formatOption(option, disabledOptions))} | ||
73 | selectedIndex={hourOptions.indexOf(hour)} | ||
74 | type="hour" | ||
75 | onSelect={this.onItemChange} | ||
76 | onMouseEnter={this.onEnterSelectPanel.bind(this, 'hour')} | ||
77 | /> | ||
78 | ); | ||
79 | }, | ||
80 | |||
81 | getMinuteSelect(minute) { | ||
82 | const { prefixCls, minuteOptions, disabledMinutes } = this.props; | ||
83 | const value = this.props.value || this.getNow(); | ||
84 | const disabledOptions = disabledMinutes(value.getHourOfDay()); | ||
85 | |||
86 | return ( | ||
87 | <Select | ||
88 | prefixCls={prefixCls} | ||
89 | options={minuteOptions.map(option => formatOption(option, disabledOptions))} | ||
90 | selectedIndex={minuteOptions.indexOf(minute)} | ||
91 | type="minute" | ||
92 | onSelect={this.onItemChange} | ||
93 | onMouseEnter={this.onEnterSelectPanel.bind(this, 'minute')} | ||
94 | /> | ||
95 | ); | ||
96 | }, | ||
97 | |||
98 | getSecondSelect(second) { | ||
99 | const { prefixCls, secondOptions, disabledSeconds, showSecond } = this.props; | ||
100 | if (!showSecond) { | ||
101 | return null; | ||
102 | } | ||
103 | const value = this.props.value || this.getNow(); | ||
104 | const disabledOptions = disabledSeconds(value.getHourOfDay(), value.getMinutes()); | ||
105 | |||
106 | return ( | ||
107 | <Select | ||
108 | prefixCls={prefixCls} | ||
109 | options={secondOptions.map(option => formatOption(option, disabledOptions))} | ||
110 | selectedIndex={secondOptions.indexOf(second)} | ||
111 | type="second" | ||
112 | onSelect={this.onItemChange} | ||
113 | onMouseEnter={this.onEnterSelectPanel.bind(this, 'second')} | ||
114 | /> | ||
115 | ); | ||
116 | }, | ||
117 | |||
118 | getNow() { | ||
119 | if (this.showNow) { | ||
120 | return this.showNow; | ||
121 | } | ||
122 | const value = new GregorianCalendar(this.props.gregorianCalendarLocale); | ||
123 | value.setTime(Date.now()); | ||
124 | this.showNow = value; | ||
125 | return value; | ||
126 | }, | ||
127 | |||
128 | render() { | ||
129 | const { prefixCls } = this.props; | ||
130 | const value = this.props.value || this.getNow(); | ||
131 | return ( | ||
132 | <div className={`${prefixCls}-combobox`}> | ||
133 | {this.getHourSelect(value.getHourOfDay())} | ||
134 | {this.getMinuteSelect(value.getMinutes())} | ||
135 | {this.getSecondSelect(value.getSeconds())} | ||
136 | </div> | ||
137 | ); | ||
138 | }, | ||
139 | }); | ||
140 | |||
141 | export default Combobox; | ||