src/Combobox.jsx

   1 import React, { PropTypes } from 'react';
   2 import Select from './Select';
   3
   4 const 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
  21 const 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     showMinute: PropTypes.bool,
  30     showSecond: PropTypes.bool,
  31     hourOptions: PropTypes.array,
  32     minuteOptions: PropTypes.array,
  33     secondOptions: PropTypes.array,
  34     disabledHours: PropTypes.func,
  35     disabledMinutes: PropTypes.func,
  36     disabledSeconds: PropTypes.func,
  37     onCurrentSelectPanelChange: PropTypes.func,
  38     use12Hours: PropTypes.bool,
  39   },
  40
  41   onItemChange(type, itemValue) {
  42     const { onChange, defaultOpenValue, use12Hours } = this.props;
  43     const value = (this.props.value || defaultOpenValue).clone();
  44
  45     if (type === 'hour') {
  46       if (use12Hours) {
  47         if (this.isAM()) {
  48           value.hour(+itemValue % 12);
  49         } else {
  50           value.hour((+itemValue % 12) + 12);
  51         }
  52       } else {
  53         value.hour(+itemValue);
  54       }
  55     } else if (type === 'minute') {
  56       value.minute(+itemValue);
  57     } else if (type === 'ampm') {
  58       if (use12Hours) {
  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       }
  72     } else {
  73       value.second(+itemValue);
  74     }
  75     onChange(value);
  76   },
  77
  78   onEnterSelectPanel(range) {
  79     this.props.onCurrentSelectPanelChange(range);
  80   },
  81
  82   getHourSelect(hour) {
  83     const { prefixCls, hourOptions, disabledHours, showHour, use12Hours } = this.props;
  84     if (!showHour) {
  85       return null;
  86     }
  87     const disabledOptions = disabledHours();
  88     let hourOptionsAdj;
  89     let hourAdj;
  90     if (use12Hours) {
  91       hourOptionsAdj = [12].concat(hourOptions.filter(h => h < 12 && h > 0));
  92       hourAdj = (hour % 12) || 12;
  93     } else {
  94       hourOptionsAdj = hourOptions;
  95       hourAdj = hour;
  96     }
  97
  98     return (
  99       <Select
 100         prefixCls={prefixCls}
 101         options={hourOptionsAdj.map(option => formatOption(option, disabledOptions))}
 102         selectedIndex={hourOptionsAdj.indexOf(hourAdj)}
 103         type="hour"
 104         onSelect={this.onItemChange}
 105         onMouseEnter={this.onEnterSelectPanel.bind(this, 'hour')}
 106       />
 107     );
 108   },
 109
 110   getMinuteSelect(minute) {
 111     const { prefixCls, minuteOptions, disabledMinutes, defaultOpenValue, showMinute } = this.props;
 112     if (!showMinute) {
 113       return null;
 114     }
 115     const value = this.props.value || defaultOpenValue;
 116     const disabledOptions = disabledMinutes(value.hour());
 117
 118     return (
 119       <Select
 120         prefixCls={prefixCls}
 121         options={minuteOptions.map(option => formatOption(option, disabledOptions))}
 122         selectedIndex={minuteOptions.indexOf(minute)}
 123         type="minute"
 124         onSelect={this.onItemChange}
 125         onMouseEnter={this.onEnterSelectPanel.bind(this, 'minute')}
 126       />
 127     );
 128   },
 129
 130   getSecondSelect(second) {
 131     const { prefixCls, secondOptions, disabledSeconds, showSecond, defaultOpenValue } = this.props;
 132     if (!showSecond) {
 133       return null;
 134     }
 135     const value = this.props.value || defaultOpenValue;
 136     const disabledOptions = disabledSeconds(value.hour(), value.minute());
 137
 138     return (
 139       <Select
 140         prefixCls={prefixCls}
 141         options={secondOptions.map(option => formatOption(option, disabledOptions))}
 142         selectedIndex={secondOptions.indexOf(second)}
 143         type="second"
 144         onSelect={this.onItemChange}
 145         onMouseEnter={this.onEnterSelectPanel.bind(this, 'second')}
 146       />
 147     );
 148   },
 149
 150   getAMPMSelect() {
 151     const { prefixCls, use12Hours } = this.props;
 152     if (!use12Hours) {
 153       return null;
 154     }
 155     const AMPMOptions = [{ value: 'AM' }, { value: 'PM' }];
 156     const selected = this.isAM() ? 0 : 1;
 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
 170   isAM() {
 171     const { value } = this.props;
 172     return value.hour() >= 0 && value.hour() < 12;
 173   },
 174
 175   render() {
 176     const { prefixCls, defaultOpenValue } = this.props;
 177     const value = this.props.value || defaultOpenValue;
 178     return (
 179       <div className={`${prefixCls}-combobox`}>
 180         {this.getHourSelect(value.hour())}
 181         {this.getMinuteSelect(value.minute())}
 182         {this.getSecondSelect(value.second())}
 183         {this.getAMPMSelect(value.hour())}
 184       </div>
 185     );
 186   },
 187 });
 188
 189 export default Combobox;