src/Header.jsx

   1 import React, { Component } from 'react';
   2 import PropTypes from 'prop-types';
   3 import moment from 'moment';
   4
   5 class Header extends Component {
   6   static propTypes = {
   7     format: PropTypes.string,
   8     prefixCls: PropTypes.string,
   9     disabledDate: PropTypes.func,
  10     placeholder: PropTypes.string,
  11     clearText: PropTypes.string,
  12     value: PropTypes.object,
  13     hourOptions: PropTypes.array,
  14     minuteOptions: PropTypes.array,
  15     secondOptions: PropTypes.array,
  16     disabledHours: PropTypes.func,
  17     disabledMinutes: PropTypes.func,
  18     disabledSeconds: PropTypes.func,
  19     onChange: PropTypes.func,
  20     onClear: PropTypes.func,
  21     onEsc: PropTypes.func,
  22     allowEmpty: PropTypes.bool,
  23     defaultOpenValue: PropTypes.object,
  24     currentSelectPanel: PropTypes.string,
  25     focusOnOpen: PropTypes.bool,
  26     onKeyDown: PropTypes.func,
  27   };
  28
  29   constructor(props) {
  30     super(props);
  31     const { value, format } = props;
  32     this.state = {
  33       str: value && value.format(format) || '',
  34       invalid: false,
  35     };
  36   }
  37
  38   componentDidMount() {
  39     if (this.props.focusOnOpen) {
  40       // Wait one frame for the panel to be positioned before focusing
  41       const requestAnimationFrame = (window.requestAnimationFrame || window.setTimeout);
  42       requestAnimationFrame(() => {
  43         this.refs.input.focus();
  44         this.refs.input.select();
  45       });
  46     }
  47   }
  48
  49   componentWillReceiveProps(nextProps) {
  50     const { value, format } = nextProps;
  51     this.setState({
  52       str: value && value.format(format) || '',
  53       invalid: false,
  54     });
  55   }
  56
  57   onInputChange = (event) => {
  58     const str = event.target.value;
  59     this.setState({
  60       str,
  61     });
  62     const {
  63       format, hourOptions, minuteOptions, secondOptions,
  64       disabledHours, disabledMinutes,
  65       disabledSeconds, onChange, allowEmpty,
  66     } = this.props;
  67
  68     if (str) {
  69       const originalValue = this.props.value;
  70       const value = this.getProtoValue().clone();
  71       const parsed = moment(str, format, true);
  72       if (!parsed.isValid()) {
  73         this.setState({
  74           invalid: true,
  75         });
  76         return;
  77       }
  78       value.hour(parsed.hour()).minute(parsed.minute()).second(parsed.second());
  79
  80       // if time value not allowed, response warning.
  81       if (
  82         hourOptions.indexOf(value.hour()) < 0 ||
  83         minuteOptions.indexOf(value.minute()) < 0 ||
  84         secondOptions.indexOf(value.second()) < 0
  85       ) {
  86         this.setState({
  87           invalid: true,
  88         });
  89         return;
  90       }
  91
  92       // if time value is disabled, response warning.
  93       const disabledHourOptions = disabledHours();
  94       const disabledMinuteOptions = disabledMinutes(value.hour());
  95       const disabledSecondOptions = disabledSeconds(value.hour(), value.minute());
  96       if (
  97         (disabledHourOptions && disabledHourOptions.indexOf(value.hour()) >= 0) ||
  98         (disabledMinuteOptions && disabledMinuteOptions.indexOf(value.minute()) >= 0) ||
  99         (disabledSecondOptions && disabledSecondOptions.indexOf(value.second()) >= 0)
 100       ) {
 101         this.setState({
 102           invalid: true,
 103         });
 104         return;
 105       }
 106
 107       if (originalValue) {
 108         if (
 109           originalValue.hour() !== value.hour() ||
 110           originalValue.minute() !== value.minute() ||
 111           originalValue.second() !== value.second()
 112         ) {
 113           // keep other fields for rc-calendar
 114           const changedValue = originalValue.clone();
 115           changedValue.hour(value.hour());
 116           changedValue.minute(value.minute());
 117           changedValue.second(value.second());
 118           onChange(changedValue);
 119         }
 120       } else if (originalValue !== value) {
 121         onChange(value);
 122       }
 123     } else if (allowEmpty) {
 124       onChange(null);
 125     } else {
 126       this.setState({
 127         invalid: true,
 128       });
 129       return;
 130     }
 131
 132     this.setState({
 133       invalid: false,
 134     });
 135   }
 136
 137   onKeyDown = (e) => {
 138     const { onEsc, onKeyDown } = this.props;
 139     if (e.keyCode === 27) {
 140       onEsc();
 141     }
 142
 143     onKeyDown(e);
 144   }
 145
 146   onClear = () => {
 147     this.setState({ str: '' });
 148     this.props.onClear();
 149   }
 150
 151   getClearButton() {
 152     const { prefixCls, allowEmpty } = this.props;
 153     if (!allowEmpty) {
 154       return null;
 155     }
 156     return (<a
 157       className={`${prefixCls}-clear-btn`}
 158       role="button"
 159       title={this.props.clearText}
 160       onMouseDown={this.onClear}
 161     />);
 162   }
 163
 164   getProtoValue() {
 165     return this.props.value || this.props.defaultOpenValue;
 166   }
 167
 168   getInput() {
 169     const { prefixCls, placeholder } = this.props;
 170     const { invalid, str } = this.state;
 171     const invalidClass = invalid ? `${prefixCls}-input-invalid` : '';
 172     return (
 173       <input
 174         className={`${prefixCls}-input  ${invalidClass}`}
 175         ref="input"
 176         onKeyDown={this.onKeyDown}
 177         value={str}
 178         placeholder={placeholder}
 179         onChange={this.onInputChange}
 180       />
 181     );
 182   }
 183
 184   render() {
 185     const { prefixCls } = this.props;
 186     return (
 187       <div className={`${prefixCls}-input-wrap`}>
 188         {this.getInput()}
 189         {this.getClearButton()}
 190       </div>
 191     );
 192   }
 193 }
 194
 195 export default Header;