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