aboutsummaryrefslogtreecommitdiffhomepage
path: root/src/Combobox.jsx
diff options
context:
space:
mode:
authoryiminghe <yiminghe@gmail.com>2016-08-04 19:53:55 +0800
committeryiminghe <yiminghe@gmail.com>2016-08-04 19:53:55 +0800
commit4984ed85e54f442998a335db70618d6184fa397e (patch)
tree6ae348b2cac5f48f3afb6f7b8dd0c2fd02f044fc /src/Combobox.jsx
parentdeaa6062ea2e274d50d58c70251c1237c0c03c67 (diff)
downloadtime-picker-4984ed85e54f442998a335db70618d6184fa397e.tar.gz
time-picker-4984ed85e54f442998a335db70618d6184fa397e.tar.zst
time-picker-4984ed85e54f442998a335db70618d6184fa397e.zip
2.x :boom:2.0.0
Diffstat (limited to 'src/Combobox.jsx')
-rw-r--r--src/Combobox.jsx125
1 files changed, 125 insertions, 0 deletions
diff --git a/src/Combobox.jsx b/src/Combobox.jsx
new file mode 100644
index 0000000..9d9da16
--- /dev/null
+++ b/src/Combobox.jsx
@@ -0,0 +1,125 @@
1import React, { PropTypes } from 'react';
2import Select from './Select';
3
4const formatOption = (option, disabledOptions) => {
5 let value = `${option}`;
6 if (option < 10) {
7 value = `0${option}`;
8 }
9
10 let disabled = false;
11 if (disabledOptions && disabledOptions.indexOf(option) >= 0) {
12 disabled = true;
13 }
14
15 return {
16 value,
17 disabled,
18 };
19};
20
21const Combobox = React.createClass({
22 propTypes: {
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 showSecond: PropTypes.bool,
30 hourOptions: PropTypes.array,
31 minuteOptions: PropTypes.array,
32 secondOptions: PropTypes.array,
33 disabledHours: PropTypes.func,
34 disabledMinutes: PropTypes.func,
35 disabledSeconds: PropTypes.func,
36 onCurrentSelectPanelChange: PropTypes.func,
37 },
38
39 onItemChange(type, itemValue) {
40 const { onChange, defaultOpenValue } = this.props;
41 const value = (this.props.value || defaultOpenValue).clone();
42 if (type === 'hour') {
43 value.hour(itemValue);
44 } else if (type === 'minute') {
45 value.minute(itemValue);
46 } else {
47 value.second(itemValue);
48 }
49 onChange(value);
50 },
51
52 onEnterSelectPanel(range) {
53 this.props.onCurrentSelectPanelChange(range);
54 },
55
56 getHourSelect(hour) {
57 const { prefixCls, hourOptions, disabledHours, showHour } = this.props;
58 if (!showHour) {
59 return null;
60 }
61 const disabledOptions = disabledHours();
62
63 return (
64 <Select
65 prefixCls={prefixCls}
66 options={hourOptions.map(option => formatOption(option, disabledOptions))}
67 selectedIndex={hourOptions.indexOf(hour)}
68 type="hour"
69 onSelect={this.onItemChange}
70 onMouseEnter={this.onEnterSelectPanel.bind(this, 'hour')}
71 />
72 );
73 },
74
75 getMinuteSelect(minute) {
76 const { prefixCls, minuteOptions, disabledMinutes, defaultOpenValue } = this.props;
77 const value = this.props.value || defaultOpenValue;
78 const disabledOptions = disabledMinutes(value.hour());
79
80 return (
81 <Select
82 prefixCls={prefixCls}
83 options={minuteOptions.map(option => formatOption(option, disabledOptions))}
84 selectedIndex={minuteOptions.indexOf(minute)}
85 type="minute"
86 onSelect={this.onItemChange}
87 onMouseEnter={this.onEnterSelectPanel.bind(this, 'minute')}
88 />
89 );
90 },
91
92 getSecondSelect(second) {
93 const { prefixCls, secondOptions, disabledSeconds, showSecond, defaultOpenValue } = this.props;
94 if (!showSecond) {
95 return null;
96 }
97 const value = this.props.value || defaultOpenValue;
98 const disabledOptions = disabledSeconds(value.hour(), value.minute());
99
100 return (
101 <Select
102 prefixCls={prefixCls}
103 options={secondOptions.map(option => formatOption(option, disabledOptions))}
104 selectedIndex={secondOptions.indexOf(second)}
105 type="second"
106 onSelect={this.onItemChange}
107 onMouseEnter={this.onEnterSelectPanel.bind(this, 'second')}
108 />
109 );
110 },
111
112 render() {
113 const { prefixCls, defaultOpenValue } = this.props;
114 const value = this.props.value || defaultOpenValue;
115 return (
116 <div className={`${prefixCls}-combobox`}>
117 {this.getHourSelect(value.hour())}
118 {this.getMinuteSelect(value.minute())}
119 {this.getSecondSelect(value.second())}
120 </div>
121 );
122 },
123});
124
125export default Combobox;