src/Combobox.jsx

   1 import React, { Component } from 'react';
   2 import PropTypes from 'prop-types';
   3 import Select from './Select';
   4
   5 const formatOption = (option, disabledOptions) => {
   6   let value = `${option}`;
   7   if (option < 10) {
   8     value = `0${option}`;
   9   }
  10
  11   let disabled = false;
  12   if (disabledOptions && disabledOptions.indexOf(option) >= 0) {
  13     disabled = true;
  14   }
  15
  16   return {
  17     value,
  18     disabled,
  19   };
  20 };
  21
  22 class Combobox extends Component {
  23   static propTypes = {
  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,
  40   };
  41
  42   onItemChange = (type, itemValue) => {
  43     const { onChange, defaultOpenValue, use12Hours } = this.props;
  44     const value = (this.props.value || defaultOpenValue).clone();
  45
  46     if (type === 'hour') {
  47       if (use12Hours) {
  48         if (this.isAM()) {
  49           value.hour(+itemValue % 12);
  50         } else {
  51           value.hour((+itemValue % 12) + 12);
  52         }
  53       } else {
  54         value.hour(+itemValue);
  55       }
  56     } else if (type === 'minute') {
  57       value.minute(+itemValue);
  58     } else if (type === 'ampm') {
  59       const ampm = itemValue.toUpperCase();
  60       if (use12Hours) {
  61         if (ampm === 'PM' && value.hour() < 12) {
  62           value.hour((value.hour() % 12) + 12);
  63         }
  64
  65         if (ampm === 'AM') {
  66           if (value.hour() >= 12) {
  67             value.hour(value.hour() - 12);
  68           }
  69         }
  70       }
  71     } else {
  72       value.second(+itemValue);
  73     }
  74     onChange(value);
  75   }
  76
  77   onEnterSelectPanel = (range) => {
  78     this.props.onCurrentSelectPanelChange(range);
  79   }
  80
  81   getHourSelect(hour) {
  82     const { prefixCls, hourOptions, disabledHours, showHour, use12Hours } = this.props;
  83     if (!showHour) {
  84       return null;
  85     }
  86     let disabledOptions = disabledHours();
  87     let hourOptionsAdj;
  88     let hourAdj;
  89     if (use12Hours) {
  90       hourOptionsAdj = [12].concat(hourOptions.filter(h => h < 12 && h > 0));
  91       hourAdj = (hour % 12) || 12;
  92
  93       if (Array.isArray(disabledOptions)) {
  94         if (this.isAM()) {
  95           disabledOptions = disabledOptions.filter(h => h < 12).map(h => (h === 0 ? 12 : h));
  96         } else {
  97           disabledOptions = disabledOptions.map(h => (h === 12 ? 12 : h - 12));
  98         }
  99       }
 100     } else {
 101       hourOptionsAdj = hourOptions;
 102       hourAdj = hour;
 103     }
 104
 105     return (
 106       <Select
 107         prefixCls={prefixCls}
 108         options={hourOptionsAdj.map(option => formatOption(option, disabledOptions))}
 109         selectedIndex={hourOptionsAdj.indexOf(hourAdj)}
 110         type="hour"
 111         onSelect={this.onItemChange}
 112         onMouseEnter={this.onEnterSelectPanel.bind(this, 'hour')}
 113       />
 114     );
 115   }
 116
 117   getMinuteSelect(minute) {
 118     const { prefixCls, minuteOptions, disabledMinutes, defaultOpenValue, showMinute } = this.props;
 119     if (!showMinute) {
 120       return null;
 121     }
 122     const value = this.props.value || defaultOpenValue;
 123     const disabledOptions = disabledMinutes(value.hour());
 124
 125     return (
 126       <Select
 127         prefixCls={prefixCls}
 128         options={minuteOptions.map(option => formatOption(option, disabledOptions))}
 129         selectedIndex={minuteOptions.indexOf(minute)}
 130         type="minute"
 131         onSelect={this.onItemChange}
 132         onMouseEnter={this.onEnterSelectPanel.bind(this, 'minute')}
 133       />
 134     );
 135   }
 136
 137   getSecondSelect(second) {
 138     const { prefixCls, secondOptions, disabledSeconds, showSecond, defaultOpenValue } = this.props;
 139     if (!showSecond) {
 140       return null;
 141     }
 142     const value = this.props.value || defaultOpenValue;
 143     const disabledOptions = disabledSeconds(value.hour(), value.minute());
 144
 145     return (
 146       <Select
 147         prefixCls={prefixCls}
 148         options={secondOptions.map(option => formatOption(option, disabledOptions))}
 149         selectedIndex={secondOptions.indexOf(second)}
 150         type="second"
 151         onSelect={this.onItemChange}
 152         onMouseEnter={this.onEnterSelectPanel.bind(this, 'second')}
 153       />
 154     );
 155   }
 156
 157   getAMPMSelect() {
 158     const { prefixCls, use12Hours, format } = this.props;
 159     if (!use12Hours) {
 160       return null;
 161     }
 162
 163     const AMPMOptions = ['am', 'pm'] // If format has A char, then we should uppercase AM/PM
 164                           .map(c => format.match(/\sA/) ? c.toUpperCase() : c)
 165                           .map(c => ({ value: c }));
 166
 167     const selected = this.isAM() ? 0 : 1;
 168
 169     return (
 170       <Select
 171         prefixCls={prefixCls}
 172         options={AMPMOptions}
 173         selectedIndex={selected}
 174         type="ampm"
 175         onSelect={this.onItemChange}
 176         onMouseEnter={this.onEnterSelectPanel.bind(this, 'ampm')}
 177       />
 178     );
 179   }
 180
 181   isAM() {
 182     const value = (this.props.value || this.props.defaultOpenValue);
 183     return value.hour() >= 0 && value.hour() < 12;
 184   }
 185
 186   render() {
 187     const { prefixCls, defaultOpenValue } = this.props;
 188     const value = this.props.value || defaultOpenValue;
 189     return (
 190       <div className={`${prefixCls}-combobox`}>
 191         {this.getHourSelect(value.hour())}
 192         {this.getMinuteSelect(value.minute())}
 193         {this.getSecondSelect(value.second())}
 194         {this.getAMPMSelect(value.hour())}
 195       </div>
 196     );
 197   }
 198 }
 199
 200 export default Combobox;