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