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