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     inputReadOnly: 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     inputReadOnly: 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   disabledHours = () => {
  97     const { use12Hours, disabledHours } = this.props;
  98     let disabledOptions = disabledHours();
  99     if (use12Hours && Array.isArray(disabledOptions)) {
 100       if (this.isAM()) {
 101         disabledOptions = disabledOptions.filter(h => h < 12).map(h => (h === 0 ? 12 : h));
 102       } else {
 103         disabledOptions = disabledOptions.map(h => (h === 12 ? 12 : h - 12));
 104       }
 105     }
 106     return disabledOptions;
 107   }
 108
 109   isAM() {
 110     const value = (this.state.value || this.props.defaultOpenValue);
 111     return value.hour() >= 0 && value.hour() < 12;
 112   }
 113
 114   render() {
 115     const {
 116       prefixCls, className, placeholder, disabledMinutes,
 117       disabledSeconds, hideDisabledOptions, allowEmpty, showHour, showMinute, showSecond,
 118       format, defaultOpenValue, clearText, onEsc, addon, use12Hours, onClear,
 119       focusOnOpen, onKeyDown, hourStep, minuteStep, secondStep, inputReadOnly,
 120     } = this.props;
 121     const {
 122       value, currentSelectPanel,
 123     } = this.state;
 124     const disabledHourOptions = this.disabledHours();
 125     const disabledMinuteOptions = disabledMinutes(value ? value.hour() : null);
 126     const disabledSecondOptions = disabledSeconds(value ? value.hour() : null,
 127       value ? value.minute() : null);
 128     const hourOptions = generateOptions(
 129       24, disabledHourOptions, hideDisabledOptions, hourStep
 130     );
 131     const minuteOptions = generateOptions(
 132       60, disabledMinuteOptions, hideDisabledOptions, minuteStep
 133     );
 134     const secondOptions = generateOptions(
 135       60, disabledSecondOptions, hideDisabledOptions, secondStep
 136     );
 137
 138     return (
 139       <div className={classNames({ [`${prefixCls}-inner`]: true, [className]: !!className })}>
 140         <Header
 141           clearText={clearText}
 142           prefixCls={prefixCls}
 143           defaultOpenValue={defaultOpenValue}
 144           value={value}
 145           currentSelectPanel={currentSelectPanel}
 146           onEsc={onEsc}
 147           format={format}
 148           placeholder={placeholder}
 149           hourOptions={hourOptions}
 150           minuteOptions={minuteOptions}
 151           secondOptions={secondOptions}
 152           disabledHours={this.disabledHours}
 153           disabledMinutes={disabledMinutes}
 154           disabledSeconds={disabledSeconds}
 155           onChange={this.onChange}
 156           onClear={onClear}
 157           allowEmpty={allowEmpty}
 158           focusOnOpen={focusOnOpen}
 159           onKeyDown={onKeyDown}
 160           inputReadOnly={inputReadOnly}
 161         />
 162         <Combobox
 163           prefixCls={prefixCls}
 164           value={value}
 165           defaultOpenValue={defaultOpenValue}
 166           format={format}
 167           onChange={this.onChange}
 168           showHour={showHour}
 169           showMinute={showMinute}
 170           showSecond={showSecond}
 171           hourOptions={hourOptions}
 172           minuteOptions={minuteOptions}
 173           secondOptions={secondOptions}
 174           disabledHours={this.disabledHours}
 175           disabledMinutes={disabledMinutes}
 176           disabledSeconds={disabledSeconds}
 177           onCurrentSelectPanelChange={this.onCurrentSelectPanelChange}
 178           use12Hours={use12Hours}
 179           isAM={this.isAM()}
 180         />
 181         {addon(this)}
 182       </div>
 183     );
 184   }
 185 }
 186
 187 export default Panel;