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