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,
43 onItemChange = (type, itemValue) => {
44 const { onChange, defaultOpenValue, use12Hours } = this.props;
45 const value = (this.props.value || defaultOpenValue).clone();
47 if (type === 'hour') {
49 if (this.props.isAM) {
50 value.hour(+itemValue % 12);
52 value.hour((+itemValue % 12) + 12);
55 value.hour(+itemValue);
57 } else if (type === 'minute') {
58 value.minute(+itemValue);
59 } else if (type === 'ampm') {
60 const ampm = itemValue.toUpperCase();
62 if (ampm === 'PM' && value.hour() < 12) {
63 value.hour((value.hour() % 12) + 12);
67 if (value.hour() >= 12) {
68 value.hour(value.hour() - 12);
73 value.second(+itemValue);
78 onEnterSelectPanel = (range) => {
79 this.props.onCurrentSelectPanelChange(range);
83 const { prefixCls, hourOptions, disabledHours, showHour, use12Hours } = this.props;
87 const disabledOptions = disabledHours();
91 hourOptionsAdj = [12].concat(hourOptions.filter(h => h < 12 && h > 0));
92 hourAdj = (hour % 12) || 12;
94 hourOptionsAdj = hourOptions;
100 prefixCls={prefixCls}
101 options={hourOptionsAdj.map(option => formatOption(option, disabledOptions))}
102 selectedIndex={hourOptionsAdj.indexOf(hourAdj)}
104 onSelect={this.onItemChange}
105 onMouseEnter={this.onEnterSelectPanel.bind(this, 'hour')}
110 getMinuteSelect(minute) {
111 const { prefixCls, minuteOptions, disabledMinutes, defaultOpenValue, showMinute } = this.props;
115 const value = this.props.value || defaultOpenValue;
116 const disabledOptions = disabledMinutes(value.hour());
120 prefixCls={prefixCls}
121 options={minuteOptions.map(option => formatOption(option, disabledOptions))}
122 selectedIndex={minuteOptions.indexOf(minute)}
124 onSelect={this.onItemChange}
125 onMouseEnter={this.onEnterSelectPanel.bind(this, 'minute')}
130 getSecondSelect(second) {
131 const { prefixCls, secondOptions, disabledSeconds, showSecond, defaultOpenValue } = this.props;
135 const value = this.props.value || defaultOpenValue;
136 const disabledOptions = disabledSeconds(value.hour(), value.minute());
140 prefixCls={prefixCls}
141 options={secondOptions.map(option => formatOption(option, disabledOptions))}
142 selectedIndex={secondOptions.indexOf(second)}
144 onSelect={this.onItemChange}
145 onMouseEnter={this.onEnterSelectPanel.bind(this, 'second')}
151 const { prefixCls, use12Hours, format } = this.props;
156 const AMPMOptions = ['am', 'pm'] // If format has A char, then we should uppercase AM/PM
157 .map(c => format.match(/\sA/) ? c.toUpperCase() : c)
158 .map(c => ({ value: c }));
160 const selected = this.props.isAM ? 0 : 1;
164 prefixCls={prefixCls}
165 options={AMPMOptions}
166 selectedIndex={selected}
168 onSelect={this.onItemChange}
169 onMouseEnter={this.onEnterSelectPanel.bind(this, 'ampm')}
175 const { prefixCls, defaultOpenValue } = this.props;
176 const value = this.props.value || defaultOpenValue;
178 <div className={`${prefixCls}-combobox`}>
179 {this.getHourSelect(value.hour())}
180 {this.getMinuteSelect(value.minute())}
181 {this.getSecondSelect(value.second())}
182 {this.getAMPMSelect(value.hour())}
188 export default Combobox;