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