src/Panel.jsx

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