src/module/Combobox.jsx

   1 import React, {PropTypes} from 'react';
   2 import Select from './Select';
   3 import GregorianCalendar from 'gregorian-calendar';
   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 const Combobox = React.createClass({
  23   propTypes: {
  24     formatter: PropTypes.object,
  25     prefixCls: PropTypes.string,
  26     value: PropTypes.object,
  27     onChange: PropTypes.func,
  28     showHour: PropTypes.bool,
  29     gregorianCalendarLocale: PropTypes.object,
  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   },
  39
  40   onItemChange(type, itemValue) {
  41     const { onChange } = this.props;
  42     let value = this.props.value;
  43     if (value) {
  44       value = value.clone();
  45     } else {
  46       value = this.getNow().clone();
  47     }
  48     if (type === 'hour') {
  49       value.setHourOfDay(itemValue);
  50     } else if (type === 'minute') {
  51       value.setMinutes(itemValue);
  52     } else {
  53       value.setSeconds(itemValue);
  54     }
  55     onChange(value);
  56   },
  57
  58   onEnterSelectPanel(range) {
  59     this.props.onCurrentSelectPanelChange(range);
  60   },
  61
  62   getHourSelect(hour) {
  63     const { prefixCls, hourOptions, disabledHours, showHour } = this.props;
  64     if (!showHour) {
  65       return null;
  66     }
  67     const disabledOptions = disabledHours();
  68
  69     return (
  70       <Select
  71         prefixCls={prefixCls}
  72         options={hourOptions.map(option => formatOption(option, disabledOptions))}
  73         selectedIndex={hourOptions.indexOf(hour)}
  74         type="hour"
  75         onSelect={this.onItemChange}
  76         onMouseEnter={this.onEnterSelectPanel.bind(this, 'hour')}
  77       />
  78     );
  79   },
  80
  81   getMinuteSelect(minute) {
  82     const { prefixCls, minuteOptions, disabledMinutes, value } = this.props;
  83     const disabledOptions = disabledMinutes(value.getHourOfDay());
  84
  85     return (
  86       <Select
  87         prefixCls={prefixCls}
  88         options={minuteOptions.map(option => formatOption(option, disabledOptions))}
  89         selectedIndex={minuteOptions.indexOf(minute)}
  90         type="minute"
  91         onSelect={this.onItemChange}
  92         onMouseEnter={this.onEnterSelectPanel.bind(this, 'minute')}
  93       />
  94     );
  95   },
  96
  97   getSecondSelect(second) {
  98     const { prefixCls, secondOptions, disabledSeconds, showSecond, value } = this.props;
  99     if (!showSecond) {
 100       return null;
 101     }
 102     const disabledOptions = disabledSeconds(value.getHourOfDay(), value.getMinutes());
 103
 104     return (
 105       <Select
 106         prefixCls={prefixCls}
 107         options={secondOptions.map(option => formatOption(option, disabledOptions))}
 108         selectedIndex={secondOptions.indexOf(second)}
 109         type="second"
 110         onSelect={this.onItemChange}
 111         onMouseEnter={this.onEnterSelectPanel.bind(this, 'second')}
 112       />
 113     );
 114   },
 115
 116   getNow() {
 117     if (this.showNow) {
 118       return this.showNow;
 119     }
 120     const value = new GregorianCalendar(this.props.gregorianCalendarLocale);
 121     value.setTime(Date.now());
 122     this.showNow = value;
 123     return value;
 124   },
 125
 126   render() {
 127     const { prefixCls } = this.props;
 128     const value = this.props.value || this.getNow();
 129     return (
 130       <div className={`${prefixCls}-combobox`}>
 131         {this.getHourSelect(value.getHourOfDay())}
 132         {this.getMinuteSelect(value.getMinutes())}
 133         {this.getSecondSelect(value.getSeconds())}
 134       </div>
 135     );
 136   },
 137 });
 138
 139 export default Combobox;