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   },
  25
  26   onItemChange(type, itemValue) {
  27     const { onChange } = this.props;
  28     let value = this.props.value;
  29     if (value) {
  30       value = value.clone();
  31     } else {
  32       value = this.getNow().clone();
  33     }
  34     if (type === 'hour') {
  35       value.setHourOfDay(itemValue);
  36     } else if (type === 'minute') {
  37       value.setMinutes(itemValue);
  38     } else {
  39       value.setSeconds(itemValue);
  40     }
  41     onChange(value);
  42   },
  43
  44   getHourSelect(hour) {
  45     const { prefixCls, hourOptions, showHour } = this.props;
  46     if (!showHour) {
  47       return null;
  48     }
  49     return (
  50       <Select
  51         prefixCls={prefixCls}
  52         options={hourOptions.map(option => formatOption(option))}
  53         selectedIndex={hourOptions.indexOf(hour)}
  54         type="hour"
  55         onSelect={this.onItemChange}
  56       />
  57     );
  58   },
  59
  60   getMinuteSelect(minute) {
  61     const { prefixCls, minuteOptions } = this.props;
  62     return (
  63       <Select
  64         prefixCls={prefixCls}
  65         options={minuteOptions.map(option => formatOption(option))}
  66         selectedIndex={minuteOptions.indexOf(minute)}
  67         type="minute"
  68         onSelect={this.onItemChange}
  69       />
  70     );
  71   },
  72
  73   getSectionSelect(second) {
  74     const { prefixCls, secondOptions, showSecond } = this.props;
  75     if (!showSecond) {
  76       return null;
  77     }
  78     return (
  79       <Select
  80         prefixCls={prefixCls}
  81         options={secondOptions.map(option => formatOption(option))}
  82         selectedIndex={secondOptions.indexOf(second)}
  83         type="second"
  84         onSelect={this.onItemChange}
  85       />
  86     );
  87   },
  88
  89   getNow() {
  90     if (this.showNow) {
  91       return this.showNow;
  92     }
  93     const value = new GregorianCalendar(this.props.gregorianCalendarLocale);
  94     value.setTime(Date.now());
  95     this.showNow = value;
  96     return value;
  97   },
  98
  99   render() {
 100     const { prefixCls } = this.props;
 101     const value = this.props.value || this.getNow();
 102     return (
 103       <div className={`${prefixCls}-combobox`}>
 104         {this.getHourSelect(value.getHourOfDay())}
 105         {this.getMinuteSelect(value.getMinutes())}
 106         {this.getSectionSelect(value.getSeconds())}
 107       </div>
 108     );
 109   },
 110 });
 111
 112 export default Combobox;