src/Panel.jsx

   1 import React, { PropTypes } from 'react';
   2 import Header from './Header';
   3 import Combobox from './Combobox';
   4 import moment from 'moment';
   5
   6 function noop() {
   7 }
   8
   9 function generateOptions(length, disabledOptions, hideDisabledOptions) {
  10   const arr = [];
  11   for (let value = 0; value < length; value++) {
  12     if (!disabledOptions || disabledOptions.indexOf(value) < 0 || !hideDisabledOptions) {
  13       arr.push(value);
  14     }
  15   }
  16   return arr;
  17 }
  18
  19 const Panel = React.createClass({
  20   propTypes: {
  21     clearText: PropTypes.string,
  22     prefixCls: PropTypes.string,
  23     defaultOpenValue: PropTypes.object,
  24     value: PropTypes.object,
  25     placeholder: PropTypes.string,
  26     format: PropTypes.string,
  27     disabledHours: PropTypes.func,
  28     disabledMinutes: PropTypes.func,
  29     disabledSeconds: PropTypes.func,
  30     hideDisabledOptions: PropTypes.bool,
  31     onChange: PropTypes.func,
  32     onEsc: PropTypes.func,
  33     allowEmpty: PropTypes.bool,
  34     showHour: PropTypes.bool,
  35     showSecond: PropTypes.bool,
  36     onClear: PropTypes.func,
  37   },
  38
  39   getDefaultProps() {
  40     return {
  41       prefixCls: 'rc-time-picker-panel',
  42       onChange: noop,
  43       onClear: noop,
  44       disabledHours: noop,
  45       disabledMinutes: noop,
  46       disabledSeconds: noop,
  47       defaultOpenValue: moment(),
  48     };
  49   },
  50
  51   getInitialState() {
  52     return {
  53       value: this.props.value,
  54       selectionRange: [],
  55     };
  56   },
  57
  58   componentWillReceiveProps(nextProps) {
  59     const value = nextProps.value;
  60     if (value) {
  61       this.setState({
  62         value,
  63       });
  64     }
  65   },
  66
  67   onChange(newValue) {
  68     this.setState({ value: newValue });
  69     this.props.onChange(newValue);
  70   },
  71
  72   onClear() {
  73     this.props.onClear();
  74   },
  75
  76   onCurrentSelectPanelChange(currentSelectPanel) {
  77     this.setState({ currentSelectPanel });
  78   },
  79
  80   render() {
  81     const {
  82       prefixCls, placeholder, disabledHours, disabledMinutes,
  83       disabledSeconds, hideDisabledOptions, allowEmpty, showHour, showSecond,
  84       format, defaultOpenValue, clearText, onEsc,
  85     } = this.props;
  86     const {
  87       value, currentSelectPanel,
  88     } = this.state;
  89     const disabledHourOptions = disabledHours();
  90     const disabledMinuteOptions = disabledMinutes(value ? value.hour() : null);
  91     const disabledSecondOptions = disabledSeconds(value ? value.hour() : null,
  92       value ? value.minute() : null);
  93     const hourOptions = generateOptions(24, disabledHourOptions, hideDisabledOptions);
  94     const minuteOptions = generateOptions(60, disabledMinuteOptions, hideDisabledOptions);
  95     const secondOptions = generateOptions(60, disabledSecondOptions, hideDisabledOptions);
  96
  97     return (
  98       <div className={`${prefixCls}-inner`}>
  99         <Header
 100           clearText={clearText}
 101           prefixCls={prefixCls}
 102           defaultOpenValue={defaultOpenValue}
 103           value={value}
 104           currentSelectPanel={currentSelectPanel}
 105           onEsc={onEsc}
 106           format={format}
 107           placeholder={placeholder}
 108           hourOptions={hourOptions}
 109           minuteOptions={minuteOptions}
 110           secondOptions={secondOptions}
 111           disabledHours={disabledHours}
 112           disabledMinutes={disabledMinutes}
 113           disabledSeconds={disabledSeconds}
 114           onChange={this.onChange}
 115           onClear={this.onClear}
 116           allowEmpty={allowEmpty}
 117         />
 118         <Combobox
 119           prefixCls={prefixCls}
 120           value={value}
 121           defaultOpenValue={defaultOpenValue}
 122           format={format}
 123           onChange={this.onChange}
 124           showHour={showHour}
 125           showSecond={showSecond}
 126           hourOptions={hourOptions}
 127           minuteOptions={minuteOptions}
 128           secondOptions={secondOptions}
 129           disabledHours={disabledHours}
 130           disabledMinutes={disabledMinutes}
 131           disabledSeconds={disabledSeconds}
 132           onCurrentSelectPanelChange={this.onCurrentSelectPanelChange}
 133         />
 134       </div>
 135     );
 136   },
 137 });
 138
 139 export default Panel;