From 4984ed85e54f442998a335db70618d6184fa397e Mon Sep 17 00:00:00 2001 From: yiminghe Date: Thu, 4 Aug 2016 19:53:55 +0800 Subject: 2.x :boom: --- src/Header.jsx | 175 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 175 insertions(+) create mode 100644 src/Header.jsx (limited to 'src/Header.jsx') diff --git a/src/Header.jsx b/src/Header.jsx new file mode 100644 index 0000000..4196ea9 --- /dev/null +++ b/src/Header.jsx @@ -0,0 +1,175 @@ +import React, { PropTypes } from 'react'; +import moment from 'moment'; + +const Header = React.createClass({ + propTypes: { + format: PropTypes.string, + prefixCls: PropTypes.string, + disabledDate: PropTypes.func, + placeholder: PropTypes.string, + clearText: PropTypes.string, + value: PropTypes.object, + hourOptions: PropTypes.array, + minuteOptions: PropTypes.array, + secondOptions: PropTypes.array, + disabledHours: PropTypes.func, + disabledMinutes: PropTypes.func, + disabledSeconds: PropTypes.func, + onChange: PropTypes.func, + onClear: PropTypes.func, + onEsc: PropTypes.func, + allowEmpty: PropTypes.bool, + defaultOpenValue: PropTypes.object, + currentSelectPanel: PropTypes.string, + }, + + getInitialState() { + const { value, format } = this.props; + return { + str: value && value.format(format) || '', + invalid: false, + }; + }, + + componentWillReceiveProps(nextProps) { + const { value, format } = nextProps; + this.setState({ + str: value && value.format(format) || '', + invalid: false, + }); + }, + + onInputChange(event) { + const str = event.target.value; + this.setState({ + str, + }); + const { + format, hourOptions, minuteOptions, secondOptions, + disabledHours, disabledMinutes, + disabledSeconds, onChange, allowEmpty, + } = this.props; + + if (str) { + const originalValue = this.props.value; + const value = this.getProtoValue().clone(); + const parsed = moment(str, format, true); + if (!parsed.isValid()) { + this.setState({ + invalid: true, + }); + return; + } + value.hour(parsed.hour()).minute(parsed.minute()).second(parsed.second()); + + // if time value not allowed, response warning. + if ( + hourOptions.indexOf(value.hour()) < 0 || + minuteOptions.indexOf(value.minute()) < 0 || + secondOptions.indexOf(value.second()) < 0 + ) { + this.setState({ + invalid: true, + }); + return; + } + + // if time value is disabled, response warning. + const disabledHourOptions = disabledHours(); + const disabledMinuteOptions = disabledMinutes(value.hour()); + const disabledSecondOptions = disabledSeconds(value.hour(), value.minute()); + if ( + (disabledHourOptions && disabledHourOptions.indexOf(value.hour()) >= 0) || + (disabledMinuteOptions && disabledMinuteOptions.indexOf(value.minute()) >= 0) || + (disabledSecondOptions && disabledSecondOptions.indexOf(value.second()) >= 0) + ) { + this.setState({ + invalid: true, + }); + return; + } + + if (originalValue) { + if ( + originalValue.hour() !== value.hour() || + originalValue.minute() !== value.minute() || + originalValue.second() !== value.second() + ) { + // keep other fields for rc-calendar + const changedValue = originalValue.clone(); + changedValue.hour(value.hour()); + changedValue.minute(value.minute()); + changedValue.second(value.second()); + onChange(changedValue); + } + } else if (originalValue !== value) { + onChange(value); + } + } 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 { prefixCls, allowEmpty } = this.props; + if (!allowEmpty) { + return null; + } + return (); + }, + + getProtoValue() { + return this.props.value || this.props.defaultOpenValue; + }, + + 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; -- cgit v1.2.3 From f429b4a79df25c9eadc3901e2483716835cc7de7 Mon Sep 17 00:00:00 2001 From: yiminghe Date: Tue, 25 Oct 2016 17:41:51 +0800 Subject: add addon prop --- src/Header.jsx | 18 ++++++++++-------- 1 file changed, 10 insertions(+), 8 deletions(-) (limited to 'src/Header.jsx') diff --git a/src/Header.jsx b/src/Header.jsx index 4196ea9..2ef9827 100644 --- a/src/Header.jsx +++ b/src/Header.jsx @@ -151,14 +151,16 @@ const Header = React.createClass({ const { prefixCls, placeholder } = this.props; const { invalid, str } = this.state; const invalidClass = invalid ? `${prefixCls}-input-invalid` : ''; - return (); + return ( + + ); }, render() { -- cgit v1.2.3