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