]> git.immae.eu Git - github/fretlink/time-picker.git/blame - src/Combobox.jsx
Updated 12 hours example, added default format for 12 hours mode, updated tests
[github/fretlink/time-picker.git] / src / Combobox.jsx
CommitLineData
4984ed85 1import React, { PropTypes } from 'react';
02de449a 2import Select from './Select';
3
518b852e
M
4const formatOption = (option, disabledOptions) => {
5 let value = `${option}`;
02de449a 6 if (option < 10) {
518b852e 7 value = `0${option}`;
02de449a 8 }
518b852e
M
9
10 let disabled = false;
0e62bf0b 11 if (disabledOptions && disabledOptions.indexOf(option) >= 0) {
518b852e
M
12 disabled = true;
13 }
14
15 return {
16 value,
17 disabled,
18 };
02de449a 19};
20
21const Combobox = React.createClass({
22 propTypes: {
4984ed85 23 format: PropTypes.string,
24 defaultOpenValue: PropTypes.object,
02de449a 25 prefixCls: PropTypes.string,
26 value: PropTypes.object,
27 onChange: PropTypes.func,
28 showHour: PropTypes.bool,
37c36c09 29 showMinute: PropTypes.bool,
02de449a 30 showSecond: PropTypes.bool,
31 hourOptions: PropTypes.array,
32 minuteOptions: PropTypes.array,
33 secondOptions: PropTypes.array,
71bd9bc1
M
34 disabledHours: PropTypes.func,
35 disabledMinutes: PropTypes.func,
36 disabledSeconds: PropTypes.func,
182e9fcc 37 onCurrentSelectPanelChange: PropTypes.func,
dd275f7d 38 use12Hours: PropTypes.bool,
02de449a 39 },
40
41 onItemChange(type, itemValue) {
dd275f7d 42 const { onChange, defaultOpenValue, use12Hours } = this.props;
4984ed85 43 const value = (this.props.value || defaultOpenValue).clone();
95699887 44
11b97949 45 if (type === 'hour') {
dd275f7d 46 if (use12Hours) {
dd2f6abd
AS
47 if (this.isAM()) {
48 value.hour(+itemValue % 12);
95699887 49 } else {
dd2f6abd 50 value.hour((+itemValue % 12) + 12);
95699887
AS
51 }
52 } else {
53 value.hour(+itemValue);
54 }
11b97949 55 } else if (type === 'minute') {
95699887
AS
56 value.minute(+itemValue);
57 } else if (type === 'ampm') {
dd275f7d 58 if (use12Hours) {
95699887
AS
59 if (itemValue === 'PM' && value.hour() <= 12) {
60 value.hour(value.hour() + 12);
61 }
62
63 if (itemValue === 'AM') {
64 if (!value.hour()) {
65 value.hour(12);
66 } else
67 if (value.hour() > 12) {
68 value.hour(value.hour() - 12);
69 }
70 }
71 }
11b97949 72 } else {
95699887 73 value.second(+itemValue);
02de449a 74 }
02de449a 75 onChange(value);
76 },
77
182e9fcc 78 onEnterSelectPanel(range) {
79 this.props.onCurrentSelectPanelChange(range);
80 },
81
02de449a 82 getHourSelect(hour) {
dd275f7d 83 const { prefixCls, hourOptions, disabledHours, showHour, use12Hours } = this.props;
02de449a 84 if (!showHour) {
85 return null;
86 }
71bd9bc1 87 const disabledOptions = disabledHours();
95699887 88 let hourOptionsAdj;
dd2f6abd 89 let hourAdj;
dd275f7d 90 if (use12Hours) {
dd2f6abd
AS
91 hourOptionsAdj = [12].concat(hourOptions.filter(h => h < 12 && h > 0));
92 hourAdj = (hour % 12) || 12;
95699887
AS
93 } else {
94 hourOptionsAdj = hourOptions;
dd2f6abd 95 hourAdj = hour;
95699887 96 }
71bd9bc1 97
02de449a 98 return (
99 <Select
100 prefixCls={prefixCls}
95699887
AS
101 options={hourOptionsAdj.map(option => formatOption(option, disabledOptions))}
102 selectedIndex={hourOptionsAdj.indexOf(hourAdj)}
02de449a 103 type="hour"
104 onSelect={this.onItemChange}
182e9fcc 105 onMouseEnter={this.onEnterSelectPanel.bind(this, 'hour')}
02de449a 106 />
107 );
108 },
109
110 getMinuteSelect(minute) {
37c36c09 111 const { prefixCls, minuteOptions, disabledMinutes, defaultOpenValue, showMinute } = this.props;
112 if (!showMinute) {
113 return null;
114 }
4984ed85 115 const value = this.props.value || defaultOpenValue;
116 const disabledOptions = disabledMinutes(value.hour());
71bd9bc1 117
02de449a 118 return (
119 <Select
120 prefixCls={prefixCls}
71bd9bc1 121 options={minuteOptions.map(option => formatOption(option, disabledOptions))}
02de449a 122 selectedIndex={minuteOptions.indexOf(minute)}
123 type="minute"
124 onSelect={this.onItemChange}
182e9fcc 125 onMouseEnter={this.onEnterSelectPanel.bind(this, 'minute')}
02de449a 126 />
127 );
128 },
129
182e9fcc 130 getSecondSelect(second) {
4984ed85 131 const { prefixCls, secondOptions, disabledSeconds, showSecond, defaultOpenValue } = this.props;
02de449a 132 if (!showSecond) {
133 return null;
134 }
4984ed85 135 const value = this.props.value || defaultOpenValue;
136 const disabledOptions = disabledSeconds(value.hour(), value.minute());
71bd9bc1 137
02de449a 138 return (
139 <Select
140 prefixCls={prefixCls}
71bd9bc1 141 options={secondOptions.map(option => formatOption(option, disabledOptions))}
02de449a 142 selectedIndex={secondOptions.indexOf(second)}
143 type="second"
144 onSelect={this.onItemChange}
182e9fcc 145 onMouseEnter={this.onEnterSelectPanel.bind(this, 'second')}
02de449a 146 />
147 );
148 },
149
95699887 150 getAMPMSelect() {
dd2f6abd 151 const { prefixCls, use12Hours } = this.props;
dd275f7d 152 if (!use12Hours) {
95699887
AS
153 return null;
154 }
95699887 155 const AMPMOptions = [{ value: 'AM' }, { value: 'PM' }];
dd2f6abd 156 const selected = this.isAM() ? 0 : 1;
95699887
AS
157
158 return (
159 <Select
160 prefixCls={prefixCls}
161 options={AMPMOptions}
162 selectedIndex={selected}
163 type="ampm"
164 onSelect={this.onItemChange}
165 onMouseEnter={this.onEnterSelectPanel.bind(this, 'ampm')}
166 />
167 );
168 },
169
dd2f6abd
AS
170 isAM() {
171 const { value } = this.props;
172 return value.hour() >= 0 && value.hour() < 12;
173 },
174
8133e8cf 175 render() {
4984ed85 176 const { prefixCls, defaultOpenValue } = this.props;
177 const value = this.props.value || defaultOpenValue;
02de449a 178 return (
179 <div className={`${prefixCls}-combobox`}>
4984ed85 180 {this.getHourSelect(value.hour())}
181 {this.getMinuteSelect(value.minute())}
182 {this.getSecondSelect(value.second())}
95699887 183 {this.getAMPMSelect(value.hour())}
02de449a 184 </div>
185 );
186 },
187});
188
189export default Combobox;