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     gregorianTimepickerLocale: 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     showClear: PropTypes.bool,
  18   },
  19
  20   getInitialState() {
  21     const value = this.props.value;
  22     return {
  23       str: value && this.props.formatter.format(value) || '',
  24       invalid: false,
  25     };
  26   },
  27
  28   componentWillReceiveProps(nextProps) {
  29     const value = this.formatValue(nextProps.value);
  30     this.setState({
  31       str: value && nextProps.formatter.format(value) || '',
  32       invalid: false,
  33     });
  34   },
  35
  36   onInputChange(event) {
  37     const str = event.target.value;
  38     this.setState({
  39       str,
  40     });
  41     let value = null;
  42     const {formatter, gregorianTimepickerLocale, hourOptions, minuteOptions, secondOptions, onChange} = this.props;
  43
  44     if (str) {
  45       const originalValue = this.props.value;
  46       try {
  47         value = formatter.parse(str, {
  48           locale: gregorianTimepickerLocale,
  49           obeyCount: true,
  50         });
  51         value = this.formatValue(value);
  52       } catch (ex) {
  53         this.setState({
  54           invalid: true,
  55         });
  56         return;
  57       }
  58
  59       if (value) {
  60         if (
  61           hourOptions.indexOf(value.fields[4]) < 0 ||
  62           minuteOptions.indexOf(value.fields[5]) < 0 ||
  63           secondOptions.indexOf(value.fields[6]) < 0
  64         ) {
  65           this.setState({
  66             invalid: true,
  67           });
  68           return;
  69         }
  70
  71         if (originalValue && value) {
  72           if (
  73             originalValue.fields[4] !== value.fields[4] ||
  74             originalValue.fields[5] !== value.fields[5] ||
  75             originalValue.fields[6] !== value.fields[6]
  76           ) {
  77             onChange(value);
  78           }
  79         } else if (originalValue !== value) {
  80           onChange(value);
  81         }
  82       } else {
  83         this.setState({
  84           invalid: true,
  85         });
  86         return;
  87       }
  88     } else {
  89       onChange(null);
  90     }
  91
  92     this.setState({
  93       invalid: false,
  94     });
  95   },
  96
  97   onClear() {
  98     this.setState({str: ''});
  99     this.props.onClear();
 100   },
 101
 102   getClearButton() {
 103     const { locale, prefixCls, showClear } = this.props;
 104     if (!showClear) {
 105       return null;
 106     }
 107     return <a className={`${prefixCls}-clear-btn`} role="button" title={locale.clear} onMouseDown={this.onClear} />;
 108   },
 109
 110   getInput() {
 111     const { prefixCls, placeholder } = this.props;
 112     const { invalid, str } = this.state;
 113     const invalidClass = invalid ? `${prefixCls}-input-invalid` : '';
 114     return <input className={`${prefixCls}-input  ${invalidClass}`} value={str} placeholder={placeholder} onChange={this.onInputChange} />;
 115   },
 116
 117   formatValue(value) {
 118     const newValue = this.props.value.clone();
 119     if (!value) {
 120       return newValue;
 121     }
 122     newValue.fields[4] = value.fields[4];
 123     newValue.fields[5] = value.fields[5];
 124     newValue.fields[6] = value.fields[6];
 125     return newValue;
 126   },
 127
 128   render() {
 129     const { prefixCls } = this.props;
 130     return (
 131       <div className={`${prefixCls}-input-wrap`}>
 132         {this.getInput()}
 133         {this.getClearButton()}
 134       </div>
 135     );
 136   },
 137 });
 138
 139 export default Header;