From 02de449a0474765a4796fa607e7e3922252f574f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=B4=96=E9=B9=B0?= Date: Fri, 13 Nov 2015 11:33:48 +0800 Subject: release 0.1.0 --- src/module/Header.jsx | 139 ++++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 139 insertions(+) create mode 100644 src/module/Header.jsx (limited to 'src/module/Header.jsx') diff --git a/src/module/Header.jsx b/src/module/Header.jsx new file mode 100644 index 0000000..f7e443f --- /dev/null +++ b/src/module/Header.jsx @@ -0,0 +1,139 @@ +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; -- cgit v1.2.3