src/Combobox.jsx

   1 import React, { PropTypes } from 'react';
   2 import Select from './Select';
   3
   4 const formatOption = (option, disabledOptions) => {
   5   let value = `${option}`;
   6   if (option < 10) {
   7     value = `0${option}`;
   8   }
   9
  10   let disabled = false;
  11   if (disabledOptions && disabledOptions.indexOf(option) >= 0) {
  12     disabled = true;
  13   }
  14
  15   return {
  16     value,
  17     disabled,
  18   };
  19 };
  20
  21 const Combobox = React.createClass({
  22   propTypes: {
  23     format: PropTypes.string,
  24     defaultOpenValue: PropTypes.object,
  25     prefixCls: PropTypes.string,
  26     value: PropTypes.object,
  27     onChange: PropTypes.func,
  28     showHour: PropTypes.bool,
  29     showMinute: PropTypes.bool,
  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, defaultOpenValue } = this.props;
  42     const value = (this.props.value || defaultOpenValue).clone();
  43     if (type === 'hour') {
  44       value.hour(itemValue);
  45     } else if (type === 'minute') {
  46       value.minute(itemValue);
  47     } else {
  48       value.second(itemValue);
  49     }
  50     onChange(value);
  51   },
  52
  53   onEnterSelectPanel(range) {
  54     this.props.onCurrentSelectPanelChange(range);
  55   },
  56
  57   getHourSelect(hour) {
  58     const { prefixCls, hourOptions, disabledHours, showHour } = this.props;
  59     if (!showHour) {
  60       return null;
  61     }
  62     const disabledOptions = disabledHours();
  63
  64     return (
  65       <Select
  66         prefixCls={prefixCls}
  67         options={hourOptions.map(option => formatOption(option, disabledOptions))}
  68         selectedIndex={hourOptions.indexOf(hour)}
  69         type="hour"
  70         onSelect={this.onItemChange}
  71         onMouseEnter={this.onEnterSelectPanel.bind(this, 'hour')}
  72       />
  73     );
  74   },
  75
  76   getMinuteSelect(minute) {
  77     const { prefixCls, minuteOptions, disabledMinutes, defaultOpenValue, showMinute } = this.props;
  78     if (!showMinute) {
  79       return null;
  80     }
  81     const value = this.props.value || defaultOpenValue;
  82     const disabledOptions = disabledMinutes(value.hour());
  83
  84     return (
  85       <Select
  86         prefixCls={prefixCls}
  87         options={minuteOptions.map(option => formatOption(option, disabledOptions))}
  88         selectedIndex={minuteOptions.indexOf(minute)}
  89         type="minute"
  90         onSelect={this.onItemChange}
  91         onMouseEnter={this.onEnterSelectPanel.bind(this, 'minute')}
  92       />
  93     );
  94   },
  95
  96   getSecondSelect(second) {
  97     const { prefixCls, secondOptions, disabledSeconds, showSecond, defaultOpenValue } = this.props;
  98     if (!showSecond) {
  99       return null;
 100     }
 101     const value = this.props.value || defaultOpenValue;
 102     const disabledOptions = disabledSeconds(value.hour(), value.minute());
 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   render() {
 117     const { prefixCls, defaultOpenValue } = this.props;
 118     const value = this.props.value || defaultOpenValue;
 119     return (
 120       <div className={`${prefixCls}-combobox`}>
 121         {this.getHourSelect(value.hour())}
 122         {this.getMinuteSelect(value.minute())}
 123         {this.getSecondSelect(value.second())}
 124       </div>
 125     );
 126   },
 127 });
 128
 129 export default Combobox;