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