aboutsummaryrefslogtreecommitdiffhomepage
path: root/src/module/Combobox.jsx
diff options
context:
space:
mode:
author崖鹰 <zhao.wuz@alipay.com>2015-11-13 11:33:48 +0800
committer崖鹰 <zhao.wuz@alipay.com>2015-11-13 11:33:48 +0800
commit02de449a0474765a4796fa607e7e3922252f574f (patch)
treedc37faf2f610343112ea1fc3707ad188092bd031 /src/module/Combobox.jsx
parent1f336fabc9135ac971e53d9c2ae407db69b8f096 (diff)
downloadtime-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.jsx95
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 @@
1import React, {PropTypes} from 'react';
2import Select from './Select';
3
4const formatOption = (option) => {
5 if (option < 10) {
6 return `0${option}`;
7 }
8 return `${option}`;
9};
10
11const 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
95export default Combobox;