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) => {
   6   if (option < 10) {
   7     return `0${option}`;
   8   }
   9   return `${option}`;
  10 };
  11
  12 const Combobox = React.createClass({
  13   propTypes: {
  14     formatter: PropTypes.object,
  15     prefixCls: PropTypes.string,
  16     value: PropTypes.object,
  17     onChange: PropTypes.func,
  18     showHour: PropTypes.bool,
  19     gregorianCalendarLocale: PropTypes.object,
  20     showSecond: PropTypes.bool,
  21     hourOptions: PropTypes.array,
  22     minuteOptions: PropTypes.array,
  23     secondOptions: PropTypes.array,
  24     onCurrentSelectPanelChange: PropTypes.func,
  25   },
  26
  27   onItemChange(type, itemValue) {
  28     const { onChange } = this.props;
  29     let value = this.props.value;
  30     if (value) {
  31       value = value.clone();
  32     } else {
  33       value = this.getNow().clone();
  34     }
  35     if (type === 'hour') {
  36       value.setHourOfDay(itemValue);
  37     } else if (type === 'minute') {
  38       value.setMinutes(itemValue);
  39     } else {
  40       value.setSeconds(itemValue);
  41     }
  42     onChange(value);
  43   },
  44
  45   onEnterSelectPanel(range) {
  46     this.props.onCurrentSelectPanelChange(range);
  47   },
  48
  49   getHourSelect(hour) {
  50     const { prefixCls, hourOptions, showHour } = this.props;
  51     if (!showHour) {
  52       return null;
  53     }
  54     return (
  55       <Select
  56         prefixCls={prefixCls}
  57         options={hourOptions.map(option => formatOption(option))}
  58         selectedIndex={hourOptions.indexOf(hour)}
  59         type="hour"
  60         onSelect={this.onItemChange}
  61         onMouseEnter={this.onEnterSelectPanel.bind(this, 'hour')}
  62       />
  63     );
  64   },
  65
  66   getMinuteSelect(minute) {
  67     const { prefixCls, minuteOptions } = this.props;
  68     return (
  69       <Select
  70         prefixCls={prefixCls}
  71         options={minuteOptions.map(option => formatOption(option))}
  72         selectedIndex={minuteOptions.indexOf(minute)}
  73         type="minute"
  74         onSelect={this.onItemChange}
  75         onMouseEnter={this.onEnterSelectPanel.bind(this, 'minute')}
  76       />
  77     );
  78   },
  79
  80   getSecondSelect(second) {
  81     const { prefixCls, secondOptions, showSecond } = this.props;
  82     if (!showSecond) {
  83       return null;
  84     }
  85     return (
  86       <Select
  87         prefixCls={prefixCls}
  88         options={secondOptions.map(option => formatOption(option))}
  89         selectedIndex={secondOptions.indexOf(second)}
  90         type="second"
  91         onSelect={this.onItemChange}
  92         onMouseEnter={this.onEnterSelectPanel.bind(this, 'second')}
  93       />
  94     );
  95   },
  96
  97   getNow() {
  98     if (this.showNow) {
  99       return this.showNow;
 100     }
 101     const value = new GregorianCalendar(this.props.gregorianCalendarLocale);
 102     value.setTime(Date.now());
 103     this.showNow = value;
 104     return value;
 105   },
 106
 107   render() {
 108     const { prefixCls } = this.props;
 109     const value = this.props.value || this.getNow();
 110     return (
 111       <div className={`${prefixCls}-combobox`}>
 112         {this.getHourSelect(value.getHourOfDay())}
 113         {this.getMinuteSelect(value.getMinutes())}
 114         {this.getSecondSelect(value.getSeconds())}
 115       </div>
 116     );
 117   },
 118 });
 119
 120 export default Combobox;