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