import React, {PropTypes} from 'react'; import createSelection from '../util/selection'; const Header = React.createClass({ propTypes: { formatter: PropTypes.object, prefixCls: PropTypes.string, gregorianCalendarLocale: PropTypes.object, locale: PropTypes.object, disabledDate: PropTypes.func, placeholder: PropTypes.string, value: PropTypes.object, hourOptions: PropTypes.array, minuteOptions: PropTypes.array, secondOptions: PropTypes.array, disabledHours: PropTypes.array, disabledMinutes: PropTypes.array, disabledSeconds: PropTypes.array, onChange: PropTypes.func, onClear: PropTypes.func, onEsc: PropTypes.func, allowEmpty: PropTypes.bool, currentSelectPanel: PropTypes.string, }, getInitialState() { const value = this.props.value; return { str: value && this.props.formatter.format(value) || '', invalid: false, }; }, componentDidMount() { this.timer = setTimeout(this.selectRange, 0); }, componentWillReceiveProps(nextProps) { const value = nextProps.value; this.setState({ str: value && nextProps.formatter.format(value) || '', invalid: false, }); }, componentDidUpdate() { this.timer = setTimeout(this.selectRange, 0); }, componentWillUnmount() { clearTimeout(this.timer); }, onInputChange(event) { const str = event.target.value; this.setState({ str, }); let value = null; const {formatter, gregorianCalendarLocale, hourOptions, minuteOptions, secondOptions, disabledHours, disabledMinutes, disabledSeconds, onChange, allowEmpty} = this.props; if (str) { const originalValue = this.props.value; try { value = formatter.parse(str, { locale: gregorianCalendarLocale, obeyCount: true, }); } catch (ex) { this.setState({ invalid: true, }); return; } if (value) { // if time value not allowed, response warning. if ( hourOptions.indexOf(value.getHourOfDay()) < 0 || minuteOptions.indexOf(value.getMinutes()) < 0 || secondOptions.indexOf(value.getSeconds()) < 0 ) { this.setState({ invalid: true, }); return; } // if time value is disabled, response warning. if ( (disabledHours && disabledHours.indexOf(value.getHourOfDay()) >= 0) || (disabledMinutes && disabledMinutes.indexOf(value.getMinutes()) >= 0) || (disabledSeconds && disabledSeconds.indexOf(value.getSeconds()) >= 0) ) { this.setState({ invalid: true, }); return; } if (originalValue && value) { if ( originalValue.getHourOfDay() !== value.getHourOfDay() || originalValue.getMinutes() !== value.getMinutes() || originalValue.getSeconds() !== value.getSeconds() ) { onChange(value); } } else if (originalValue !== value) { onChange(value); } } else { this.setState({ invalid: true, }); return; } } else if (allowEmpty) { onChange(null); } else { this.setState({ invalid: true, }); return; } this.setState({ invalid: false, }); }, onKeyDown(e) { if (e.keyCode === 27) { this.props.onEsc(); } }, onClear() { this.setState({str: ''}); this.props.onClear(); }, getClearButton() { const { locale, prefixCls, allowEmpty } = this.props; if (!allowEmpty) { return null; } return ; }, getInput() { const { prefixCls, placeholder } = this.props; const { invalid, str } = this.state; const invalidClass = invalid ? `${prefixCls}-input-invalid` : ''; return (); }, selectRange() { this.refs.input.focus(); if (this.props.currentSelectPanel && this.refs.input.value) { let selectionRangeStart = 0; let selectionRangeEnd = 0; if (this.props.currentSelectPanel === 'hour') { selectionRangeStart = 0; selectionRangeEnd = this.refs.input.value.indexOf(':'); } else if (this.props.currentSelectPanel === 'minute') { selectionRangeStart = this.refs.input.value.indexOf(':') + 1; selectionRangeEnd = this.refs.input.value.lastIndexOf(':'); } else if (this.props.currentSelectPanel === 'second') { selectionRangeStart = this.refs.input.value.lastIndexOf(':') + 1; selectionRangeEnd = this.refs.input.value.length; } if (selectionRangeEnd - selectionRangeStart === 2) { createSelection(this.refs.input, selectionRangeStart, selectionRangeEnd); } } }, render() { const { prefixCls } = this.props; return (
{this.getInput()} {this.getClearButton()}
); }, }); export default Header;