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.array,
  35     disabledMinutes: PropTypes.array,
  36     disabledSeconds: PropTypes.array,
  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     return (
  68       <Select
  69         prefixCls={prefixCls}
  70         options={hourOptions.map(option => formatOption(option, disabledHours))}
  71         selectedIndex={hourOptions.indexOf(hour)}
  72         type="hour"
  73         onSelect={this.onItemChange}
  74         onMouseEnter={this.onEnterSelectPanel.bind(this, 'hour')}
  75       />
  76     );
  77   },
  78
  79   getMinuteSelect(minute) {
  80     const { prefixCls, minuteOptions, disabledMinutes } = this.props;
  81     return (
  82       <Select
  83         prefixCls={prefixCls}
  84         options={minuteOptions.map(option => formatOption(option, disabledMinutes))}
  85         selectedIndex={minuteOptions.indexOf(minute)}
  86         type="minute"
  87         onSelect={this.onItemChange}
  88         onMouseEnter={this.onEnterSelectPanel.bind(this, 'minute')}
  89       />
  90     );
  91   },
  92
  93   getSecondSelect(second) {
  94     const { prefixCls, secondOptions, disabledSeconds, showSecond } = this.props;
  95     if (!showSecond) {
  96       return null;
  97     }
  98     return (
  99       <Select
 100         prefixCls={prefixCls}
 101         options={secondOptions.map(option => formatOption(option, disabledSeconds))}
 102         selectedIndex={secondOptions.indexOf(second)}
 103         type="second"
 104         onSelect={this.onItemChange}
 105         onMouseEnter={this.onEnterSelectPanel.bind(this, 'second')}
 106       />
 107     );
 108   },
 109
 110   getNow() {
 111     if (this.showNow) {
 112       return this.showNow;
 113     }
 114     const value = new GregorianCalendar(this.props.gregorianCalendarLocale);
 115     value.setTime(Date.now());
 116     this.showNow = value;
 117     return value;
 118   },
 119
 120   render() {
 121     const { prefixCls } = this.props;
 122     const value = this.props.value || this.getNow();
 123     return (
 124       <div className={`${prefixCls}-combobox`}>
 125         {this.getHourSelect(value.getHourOfDay())}
 126         {this.getMinuteSelect(value.getMinutes())}
 127         {this.getSecondSelect(value.getSeconds())}
 128       </div>
 129     );
 130   },
 131 });
 132
 133 export default Combobox;