src/module/Header.jsx

   1 import React, {PropTypes} from 'react';
   2
   3 const Header = React.createClass({
   4   propTypes: {
   5     formatter: PropTypes.object,
   6     prefixCls: PropTypes.string,
   7     gregorianCalendarLocale: PropTypes.object,
   8     locale: PropTypes.object,
   9     disabledDate: PropTypes.func,
  10     placeholder: PropTypes.string,
  11     value: PropTypes.object,
  12     hourOptions: PropTypes.array,
  13     minuteOptions: PropTypes.array,
  14     secondOptions: PropTypes.array,
  15     onChange: PropTypes.func,
  16     onClear: PropTypes.func,
  17     onEsc: PropTypes.func,
  18     allowEmpty: PropTypes.bool,
  19   },
  20
  21   getInitialState() {
  22     const value = this.props.value;
  23     return {
  24       str: value && this.props.formatter.format(value) || '',
  25       invalid: false,
  26     };
  27   },
  28
  29   componentDidMount() {
  30     this.timer = setTimeout(() => {
  31       this.refs.input.focus();
  32     }, 0);
  33   },
  34
  35   componentWillReceiveProps(nextProps) {
  36     const value = nextProps.value;
  37     this.setState({
  38       str: value && nextProps.formatter.format(value) || '',
  39       invalid: false,
  40     });
  41   },
  42
  43   componentWillUnmount() {
  44     clearTimeout(this.timer);
  45   },
  46
  47   onInputChange(event) {
  48     const str = event.target.value;
  49     this.setState({
  50       str,
  51     });
  52     let value = null;
  53     const {formatter, gregorianCalendarLocale, hourOptions, minuteOptions, secondOptions, onChange, allowEmpty} = this.props;
  54
  55     if (str) {
  56       const originalValue = this.props.value;
  57       try {
  58         value = formatter.parse(str, {
  59           locale: gregorianCalendarLocale,
  60           obeyCount: true,
  61         });
  62       } catch (ex) {
  63         this.setState({
  64           invalid: true,
  65         });
  66         return;
  67       }
  68
  69       if (value) {
  70         if (
  71           hourOptions.indexOf(value.getHourOfDay()) < 0 ||
  72           minuteOptions.indexOf(value.getMinutes()) < 0 ||
  73           secondOptions.indexOf(value.getSeconds()) < 0
  74         ) {
  75           this.setState({
  76             invalid: true,
  77           });
  78           return;
  79         }
  80
  81         if (originalValue && value) {
  82           if (
  83             originalValue.getHourOfDay() !== value.getHourOfDay() ||
  84             originalValue.getMinutes() !== value.getMinutes() ||
  85             originalValue.getSeconds() !== value.getSeconds()
  86           ) {
  87             onChange(value);
  88           }
  89         } else if (originalValue !== value) {
  90           onChange(value);
  91         }
  92       } else {
  93         this.setState({
  94           invalid: true,
  95         });
  96         return;
  97       }
  98     } else if (allowEmpty) {
  99       onChange(null);
 100     } else {
 101       this.setState({
 102         invalid: true,
 103       });
 104       return;
 105     }
 106
 107     this.setState({
 108       invalid: false,
 109     });
 110   },
 111
 112   onKeyDown(e) {
 113     if (e.keyCode === 27) {
 114       this.props.onEsc();
 115     }
 116   },
 117
 118   onClear() {
 119     this.setState({str: ''});
 120     this.props.onClear();
 121   },
 122
 123   getClearButton() {
 124     const { locale, prefixCls, allowEmpty } = this.props;
 125     if (!allowEmpty) {
 126       return null;
 127     }
 128     return <a className={`${prefixCls}-clear-btn`} role="button" title={locale.clear} onMouseDown={this.onClear}/>;
 129   },
 130
 131   getInput() {
 132     const { prefixCls, placeholder } = this.props;
 133     const { invalid, str } = this.state;
 134     const invalidClass = invalid ? `${prefixCls}-input-invalid` : '';
 135     return (<input className={`${prefixCls}-input  ${invalidClass}`}
 136                    ref="input"
 137                    onKeyDown={this.onKeyDown}
 138                    value={str}
 139                    placeholder={placeholder} onChange={this.onInputChange}/>);
 140   },
 141
 142   render() {
 143     const { prefixCls } = this.props;
 144     return (
 145       <div className={`${prefixCls}-input-wrap`}>
 146         {this.getInput()}
 147         {this.getClearButton()}
 148       </div>
 149     );
 150   },
 151 });
 152
 153 export default Header;