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     const 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     } else {
  93       hourOptionsAdj = hourOptions;
  94       hourAdj = hour;
  95     }
  96
  97     return (
  98       <Select
  99         prefixCls={prefixCls}
 100         options={hourOptionsAdj.map(option => formatOption(option, disabledOptions))}
 101         selectedIndex={hourOptionsAdj.indexOf(hourAdj)}
 102         type="hour"
 103         onSelect={this.onItemChange}
 104         onMouseEnter={this.onEnterSelectPanel.bind(this, 'hour')}
 105       />
 106     );
 107   }
 108
 109   getMinuteSelect(minute) {
 110     const { prefixCls, minuteOptions, disabledMinutes, defaultOpenValue, showMinute } = this.props;
 111     if (!showMinute) {
 112       return null;
 113     }
 114     const value = this.props.value || defaultOpenValue;
 115     const disabledOptions = disabledMinutes(value.hour());
 116
 117     return (
 118       <Select
 119         prefixCls={prefixCls}
 120         options={minuteOptions.map(option => formatOption(option, disabledOptions))}
 121         selectedIndex={minuteOptions.indexOf(minute)}
 122         type="minute"
 123         onSelect={this.onItemChange}
 124         onMouseEnter={this.onEnterSelectPanel.bind(this, 'minute')}
 125       />
 126     );
 127   }
 128
 129   getSecondSelect(second) {
 130     const { prefixCls, secondOptions, disabledSeconds, showSecond, defaultOpenValue } = this.props;
 131     if (!showSecond) {
 132       return null;
 133     }
 134     const value = this.props.value || defaultOpenValue;
 135     const disabledOptions = disabledSeconds(value.hour(), value.minute());
 136
 137     return (
 138       <Select
 139         prefixCls={prefixCls}
 140         options={secondOptions.map(option => formatOption(option, disabledOptions))}
 141         selectedIndex={secondOptions.indexOf(second)}
 142         type="second"
 143         onSelect={this.onItemChange}
 144         onMouseEnter={this.onEnterSelectPanel.bind(this, 'second')}
 145       />
 146     );
 147   }
 148
 149   getAMPMSelect() {
 150     const { prefixCls, use12Hours, format } = this.props;
 151     if (!use12Hours) {
 152       return null;
 153     }
 154
 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 }));
 158
 159     const selected = this.isAM() ? 0 : 1;
 160
 161     return (
 162       <Select
 163         prefixCls={prefixCls}
 164         options={AMPMOptions}
 165         selectedIndex={selected}
 166         type="ampm"
 167         onSelect={this.onItemChange}
 168         onMouseEnter={this.onEnterSelectPanel.bind(this, 'ampm')}
 169       />
 170     );
 171   }
 172
 173   isAM() {
 174     const value = (this.props.value || this.props.defaultOpenValue);
 175     return value.hour() >= 0 && value.hour() < 12;
 176   }
 177
 178   render() {
 179     const { prefixCls, defaultOpenValue } = this.props;
 180     const value = this.props.value || defaultOpenValue;
 181     return (
 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())}
 187       </div>
 188     );
 189   }
 190 }
 191
 192 export default Combobox;