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