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