import React, {PropTypes} from 'react'; const Header = React.createClass({ propTypes: { formatter: PropTypes.object, prefixCls: PropTypes.string, gregorianTimepickerLocale: PropTypes.object, locale: PropTypes.object, disabledDate: PropTypes.func, placeholder: PropTypes.string, value: PropTypes.object, hourOptions: PropTypes.array, minuteOptions: PropTypes.array, secondOptions: PropTypes.array, onChange: PropTypes.func, onClear: PropTypes.func, showClear: PropTypes.bool, }, getInitialState() { const value = this.props.value; return { str: value && this.props.formatter.format(value) || '', invalid: false, }; }, componentWillReceiveProps(nextProps) { const value = this.formatValue(nextProps.value); this.setState({ str: value && nextProps.formatter.format(value) || '', invalid: false, }); }, onInputChange(event) { const str = event.target.value; this.setState({ str, }); let value = null; const {formatter, gregorianTimepickerLocale, hourOptions, minuteOptions, secondOptions, onChange} = this.props; if (str) { const originalValue = this.props.value; try { value = formatter.parse(str, { locale: gregorianTimepickerLocale, obeyCount: true, }); value = this.formatValue(value); } catch (ex) { this.setState({ invalid: true, }); return; } if (value) { if ( hourOptions.indexOf(value.fields[4]) < 0 || minuteOptions.indexOf(value.fields[5]) < 0 || secondOptions.indexOf(value.fields[6]) < 0 ) { this.setState({ invalid: true, }); return; } if (originalValue && value) { if ( originalValue.fields[4] !== value.fields[4] || originalValue.fields[5] !== value.fields[5] || originalValue.fields[6] !== value.fields[6] ) { onChange(value); } } else if (originalValue !== value) { onChange(value); } } else { this.setState({ invalid: true, }); return; } } else { onChange(null); } this.setState({ invalid: false, }); }, onClear() { this.setState({str: ''}); this.props.onClear(); }, getClearButton() { const { locale, prefixCls, showClear } = this.props; if (!showClear) { return null; } return ; }, getInput() { const { prefixCls, placeholder } = this.props; const { invalid, str } = this.state; const invalidClass = invalid ? `${prefixCls}-input-invalid` : ''; return ; }, formatValue(value) { const newValue = this.props.value.clone(); if (!value) { return newValue; } newValue.fields[4] = value.fields[4]; newValue.fields[5] = value.fields[5]; newValue.fields[6] = value.fields[6]; return newValue; }, render() { const { prefixCls } = this.props; return (
{this.getInput()} {this.getClearButton()}
); }, }); export default Header;