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       const ampm = itemValue.toUpperCase();
  59       if (use12Hours) {
  60         if (ampm === 'PM' && value.hour() < 12) {
  61           value.hour((value.hour() % 12) + 12);
  62         }
  63
  64         if (ampm === 'AM') {
  65           if (value.hour() >= 12) {
  66             value.hour(value.hour() - 12);
  67           }
  68         }
  69       }
  70     } else {
  71       value.second(+itemValue);
  72     }
  73     onChange(value);
  74   },
  75
  76   onEnterSelectPanel(range) {
  77     this.props.onCurrentSelectPanelChange(range);
  78   },
  79
  80   getHourSelect(hour) {
  81     const { prefixCls, hourOptions, disabledHours, showHour, use12Hours } = this.props;
  82     if (!showHour) {
  83       return null;
  84     }
  85     const disabledOptions = disabledHours();
  86     let hourOptionsAdj;
  87     let hourAdj;
  88     if (use12Hours) {
  89       hourOptionsAdj = [12].concat(hourOptions.filter(h => h < 12 && h > 0));
  90       hourAdj = (hour % 12) || 12;
  91     } else {
  92       hourOptionsAdj = hourOptions;
  93       hourAdj = hour;
  94     }
  95
  96     return (
  97       <Select
  98         prefixCls={prefixCls}
  99         options={hourOptionsAdj.map(option => formatOption(option, disabledOptions))}
 100         selectedIndex={hourOptionsAdj.indexOf(hourAdj)}
 101         type="hour"
 102         onSelect={this.onItemChange}
 103         onMouseEnter={this.onEnterSelectPanel.bind(this, 'hour')}
 104       />
 105     );
 106   },
 107
 108   getMinuteSelect(minute) {
 109     const { prefixCls, minuteOptions, disabledMinutes, defaultOpenValue, showMinute } = this.props;
 110     if (!showMinute) {
 111       return null;
 112     }
 113     const value = this.props.value || defaultOpenValue;
 114     const disabledOptions = disabledMinutes(value.hour());
 115
 116     return (
 117       <Select
 118         prefixCls={prefixCls}
 119         options={minuteOptions.map(option => formatOption(option, disabledOptions))}
 120         selectedIndex={minuteOptions.indexOf(minute)}
 121         type="minute"
 122         onSelect={this.onItemChange}
 123         onMouseEnter={this.onEnterSelectPanel.bind(this, 'minute')}
 124       />
 125     );
 126   },
 127
 128   getSecondSelect(second) {
 129     const { prefixCls, secondOptions, disabledSeconds, showSecond, defaultOpenValue } = this.props;
 130     if (!showSecond) {
 131       return null;
 132     }
 133     const value = this.props.value || defaultOpenValue;
 134     const disabledOptions = disabledSeconds(value.hour(), value.minute());
 135
 136     return (
 137       <Select
 138         prefixCls={prefixCls}
 139         options={secondOptions.map(option => formatOption(option, disabledOptions))}
 140         selectedIndex={secondOptions.indexOf(second)}
 141         type="second"
 142         onSelect={this.onItemChange}
 143         onMouseEnter={this.onEnterSelectPanel.bind(this, 'second')}
 144       />
 145     );
 146   },
 147
 148   getAMPMSelect() {
 149     const { prefixCls, use12Hours, format } = this.props;
 150     if (!use12Hours) {
 151       return null;
 152     }
 153
 154     const AMPMOptions = ['am', 'pm'] // If format has A char, then we should uppercase AM/PM
 155                           .map(c => format.match(/\sA/) ? c.toUpperCase() : c)
 156                           .map(c => ({ value: c }));
 157
 158     const selected = this.isAM() ? 0 : 1;
 159
 160     return (
 161       <Select
 162         prefixCls={prefixCls}
 163         options={AMPMOptions}
 164         selectedIndex={selected}
 165         type="ampm"
 166         onSelect={this.onItemChange}
 167         onMouseEnter={this.onEnterSelectPanel.bind(this, 'ampm')}
 168       />
 169     );
 170   },
 171
 172   isAM() {
 173     const value = (this.props.value || this.props.defaultOpenValue);
 174     return value.hour() >= 0 && value.hour() < 12;
 175   },
 176
 177   render() {
 178     const { prefixCls, defaultOpenValue } = this.props;
 179     const value = this.props.value || defaultOpenValue;
 180     return (
 181       <div className={`${prefixCls}-combobox`}>
 182         {this.getHourSelect(value.hour())}
 183         {this.getMinuteSelect(value.minute())}
 184         {this.getSecondSelect(value.second())}
 185         {this.getAMPMSelect(value.hour())}
 186       </div>
 187     );
 188   },
 189 });
 190
 191 export default Combobox;