1 import React, { Component } from 'react';
2 import PropTypes from 'prop-types';
3 import Select from './Select';
5 const formatOption = (option, disabledOptions) => {
6 let value = `${option}`;
12 if (disabledOptions && disabledOptions.indexOf(option) >= 0) {
22 class Combobox extends Component {
24 format: PropTypes.string,
25 defaultOpenValue: PropTypes.object,
26 prefixCls: PropTypes.string,
27 value: PropTypes.object,
28 onChange: PropTypes.func,
29 showHour: PropTypes.bool,
30 showMinute: PropTypes.bool,
31 showSecond: PropTypes.bool,
32 hourOptions: PropTypes.array,
33 minuteOptions: PropTypes.array,
34 secondOptions: PropTypes.array,
35 disabledHours: PropTypes.func,
36 disabledMinutes: PropTypes.func,
37 disabledSeconds: PropTypes.func,
38 onCurrentSelectPanelChange: PropTypes.func,
39 use12Hours: PropTypes.bool,
42 onItemChange = (type, itemValue) => {
43 const { onChange, defaultOpenValue, use12Hours } = this.props;
44 const value = (this.props.value || defaultOpenValue).clone();
46 if (type === 'hour') {
49 value.hour(+itemValue % 12);
51 value.hour((+itemValue % 12) + 12);
54 value.hour(+itemValue);
56 } else if (type === 'minute') {
57 value.minute(+itemValue);
58 } else if (type === 'ampm') {
59 const ampm = itemValue.toUpperCase();
61 if (ampm === 'PM' && value.hour() < 12) {
62 value.hour((value.hour() % 12) + 12);
66 if (value.hour() >= 12) {
67 value.hour(value.hour() - 12);
72 value.second(+itemValue);
77 onEnterSelectPanel = (range) => {
78 this.props.onCurrentSelectPanelChange(range);
82 const { prefixCls, hourOptions, disabledHours, showHour, use12Hours } = this.props;
86 const disabledOptions = disabledHours();
90 hourOptionsAdj = [12].concat(hourOptions.filter(h => h < 12 && h > 0));
91 hourAdj = (hour % 12) || 12;
93 hourOptionsAdj = hourOptions;
100 options={hourOptionsAdj.map(option => formatOption(option, disabledOptions))}
101 selectedIndex={hourOptionsAdj.indexOf(hourAdj)}
103 onSelect={this.onItemChange}
104 onMouseEnter={this.onEnterSelectPanel.bind(this, 'hour')}
109 getMinuteSelect(minute) {
110 const { prefixCls, minuteOptions, disabledMinutes, defaultOpenValue, showMinute } = this.props;
114 const value = this.props.value || defaultOpenValue;
115 const disabledOptions = disabledMinutes(value.hour());
119 prefixCls={prefixCls}
120 options={minuteOptions.map(option => formatOption(option, disabledOptions))}
121 selectedIndex={minuteOptions.indexOf(minute)}
123 onSelect={this.onItemChange}
124 onMouseEnter={this.onEnterSelectPanel.bind(this, 'minute')}
129 getSecondSelect(second) {
130 const { prefixCls, secondOptions, disabledSeconds, showSecond, defaultOpenValue } = this.props;
134 const value = this.props.value || defaultOpenValue;
135 const disabledOptions = disabledSeconds(value.hour(), value.minute());
139 prefixCls={prefixCls}
140 options={secondOptions.map(option => formatOption(option, disabledOptions))}
141 selectedIndex={secondOptions.indexOf(second)}
143 onSelect={this.onItemChange}
144 onMouseEnter={this.onEnterSelectPanel.bind(this, 'second')}
150 const { prefixCls, use12Hours, format } = this.props;
155 const AMPMOptions = ['am', 'pm'] // If format has A char, then we should uppercase AM/PM
156 .map(c => format.match(/\sA/) ? c.toUpperCase() : c)
157 .map(c => ({ value: c }));
159 const selected = this.isAM() ? 0 : 1;
163 prefixCls={prefixCls}
164 options={AMPMOptions}
165 selectedIndex={selected}
167 onSelect={this.onItemChange}
168 onMouseEnter={this.onEnterSelectPanel.bind(this, 'ampm')}
174 const value = (this.props.value || this.props.defaultOpenValue);
175 return value.hour() >= 0 && value.hour() < 12;
179 const { prefixCls, defaultOpenValue } = this.props;
180 const value = this.props.value || defaultOpenValue;
182 <div className={`${prefixCls}-combobox`}>
183 {this.getHourSelect(value.hour())}
184 {this.getMinuteSelect(value.minute())}
185 {this.getSecondSelect(value.second())}
186 {this.getAMPMSelect(value.hour())}
192 export default Combobox;