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 = 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, }); } catch (ex) { this.setState({ invalid: true, }); return; } if (value) { if ( hourOptions.indexOf(value.getHourOfDay()) < 0 || minuteOptions.indexOf(value.getMinutes()) < 0 || secondOptions.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 { 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 ; }, render() { const { prefixCls } = this.props; return (
{this.getInput()} {this.getClearButton()}
); }, }); export default Header;