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     showSecond: PropTypes.bool,
  38     onClear: PropTypes.func,
  39   },
  40
  41   getDefaultProps() {
  42     return {
  43       prefixCls: 'rc-time-picker-panel',
  44       onChange: noop,
  45       onClear: noop,
  46       disabledHours: noop,
  47       disabledMinutes: noop,
  48       disabledSeconds: noop,
  49       defaultOpenValue: moment(),
  50     };
  51   },
  52
  53   getInitialState() {
  54     return {
  55       value: this.props.value,
  56       selectionRange: [],
  57     };
  58   },
  59
  60   componentWillReceiveProps(nextProps) {
  61     const value = nextProps.value;
  62     if (value) {
  63       this.setState({
  64         value,
  65       });
  66     }
  67   },
  68
  69   onChange(newValue) {
  70     this.setState({ value: newValue });
  71     this.props.onChange(newValue);
  72   },
  73
  74   onClear() {
  75     this.props.onClear();
  76   },
  77
  78   onCurrentSelectPanelChange(currentSelectPanel) {
  79     this.setState({ currentSelectPanel });
  80   },
  81
  82   render() {
  83     const {
  84       prefixCls, className, placeholder, disabledHours, disabledMinutes,
  85       disabledSeconds, hideDisabledOptions, allowEmpty, showHour, showSecond,
  86       format, defaultOpenValue, clearText, onEsc,
  87     } = this.props;
  88     const {
  89       value, currentSelectPanel,
  90     } = this.state;
  91     const disabledHourOptions = disabledHours();
  92     const disabledMinuteOptions = disabledMinutes(value ? value.hour() : null);
  93     const disabledSecondOptions = disabledSeconds(value ? value.hour() : null,
  94       value ? value.minute() : null);
  95     const hourOptions = generateOptions(24, disabledHourOptions, hideDisabledOptions);
  96     const minuteOptions = generateOptions(60, disabledMinuteOptions, hideDisabledOptions);
  97     const secondOptions = generateOptions(60, disabledSecondOptions, hideDisabledOptions);
  98
  99     return (
 100       <div className={classNames({ [`${prefixCls}-inner`]: true, [className]: className })}>
 101         <Header
 102           clearText={clearText}
 103           prefixCls={prefixCls}
 104           defaultOpenValue={defaultOpenValue}
 105           value={value}
 106           currentSelectPanel={currentSelectPanel}
 107           onEsc={onEsc}
 108           format={format}
 109           placeholder={placeholder}
 110           hourOptions={hourOptions}
 111           minuteOptions={minuteOptions}
 112           secondOptions={secondOptions}
 113           disabledHours={disabledHours}
 114           disabledMinutes={disabledMinutes}
 115           disabledSeconds={disabledSeconds}
 116           onChange={this.onChange}
 117           onClear={this.onClear}
 118           allowEmpty={allowEmpty}
 119         />
 120         <Combobox
 121           prefixCls={prefixCls}
 122           value={value}
 123           defaultOpenValue={defaultOpenValue}
 124           format={format}
 125           onChange={this.onChange}
 126           showHour={showHour}
 127           showSecond={showSecond}
 128           hourOptions={hourOptions}
 129           minuteOptions={minuteOptions}
 130           secondOptions={secondOptions}
 131           disabledHours={disabledHours}
 132           disabledMinutes={disabledMinutes}
 133           disabledSeconds={disabledSeconds}
 134           onCurrentSelectPanelChange={this.onCurrentSelectPanelChange}
 135         />
 136       </div>
 137     );
 138   },
 139 });
 140
 141 export default Panel;