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