src/module/Combobox.jsx

   1 import React, {PropTypes} from 'react';
   2 import Select from './Select';
   3
   4 const formatOption = (option) => {
   5   if (option < 10) {
   6     return `0${option}`;
   7   }
   8   return `${option}`;
   9 };
  10
  11 const Combobox = React.createClass({
  12   propTypes: {
  13     formatter: PropTypes.object,
  14     prefixCls: PropTypes.string,
  15     value: PropTypes.object,
  16     onChange: PropTypes.func,
  17     showHour: PropTypes.bool,
  18     showSecond: PropTypes.bool,
  19     hourOptions: PropTypes.array,
  20     minuteOptions: PropTypes.array,
  21     secondOptions: PropTypes.array,
  22   },
  23
  24   onItemChange(type, itemValue) {
  25     const { value, onChange } = this.props;
  26     if (type === 'hour') {
  27       value.setHourOfDay(itemValue);
  28     } else if (type === 'minute') {
  29       value.setMinutes(itemValue);
  30     } else {
  31       value.setSeconds(itemValue);
  32     }
  33     onChange(value);
  34   },
  35
  36   getHourSelect(hour) {
  37     const { prefixCls, hourOptions, showHour } = this.props;
  38     if (!showHour) {
  39       return null;
  40     }
  41     return (
  42       <Select
  43         prefixCls={prefixCls}
  44         options={hourOptions.map(option => formatOption(option))}
  45         selectedIndex={hourOptions.indexOf(hour)}
  46         type="hour"
  47         onSelect={this.onItemChange}
  48       />
  49     );
  50   },
  51
  52   getMinuteSelect(minute) {
  53     const { prefixCls, minuteOptions } = this.props;
  54     return (
  55       <Select
  56         prefixCls={prefixCls}
  57         options={minuteOptions.map(option => formatOption(option))}
  58         selectedIndex={minuteOptions.indexOf(minute)}
  59         type="minute"
  60         onSelect={this.onItemChange}
  61       />
  62     );
  63   },
  64
  65   getSectionSelect(second) {
  66     const { prefixCls, secondOptions, showSecond } = this.props;
  67     if (!showSecond) {
  68       return null;
  69     }
  70     return (
  71       <Select
  72         prefixCls={prefixCls}
  73         options={secondOptions.map(option => formatOption(option))}
  74         selectedIndex={secondOptions.indexOf(second)}
  75         type="second"
  76         onSelect={this.onItemChange}
  77       />
  78     );
  79   },
  80
  81   render() {
  82     const { prefixCls, value } = this.props;
  83
  84     return (
  85       <div className={`${prefixCls}-combobox`}>
  86         {this.getHourSelect(value.getHourOfDay())}
  87         {this.getMinuteSelect(value.getMinutes())}
  88         {this.getSectionSelect(value.getSeconds())}
  89       </div>
  90     );
  91   },
  92 });
  93
  94 export default Combobox;