src/module/Header.jsx

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