1 import React, {PropTypes} from 'react';
3 const Header = React.createClass({
5 formatter: PropTypes.object,
6 prefixCls: PropTypes.string,
7 gregorianCalendarLocale: PropTypes.object,
8 locale: PropTypes.object,
9 disabledDate: PropTypes.func,
10 placeholder: PropTypes.string,
11 value: PropTypes.object,
12 hourOptions: PropTypes.array,
13 minuteOptions: PropTypes.array,
14 secondOptions: PropTypes.array,
15 onChange: PropTypes.func,
16 onClear: PropTypes.func,
17 onEsc: PropTypes.func,
18 allowEmpty: PropTypes.bool,
22 const value = this.props.value;
24 str: value && this.props.formatter.format(value) || '',
30 this.timer = setTimeout(() => {
31 this.refs.input.focus();
35 componentWillReceiveProps(nextProps) {
36 const value = nextProps.value;
38 str: value && nextProps.formatter.format(value) || '',
43 componentWillUnmount() {
44 clearTimeout(this.timer);
47 onInputChange(event) {
48 const str = event.target.value;
53 const {formatter, gregorianCalendarLocale, hourOptions, minuteOptions, secondOptions, onChange, allowEmpty} = this.props;
56 const originalValue = this.props.value;
58 value = formatter.parse(str, {
59 locale: gregorianCalendarLocale,
71 hourOptions.indexOf(value.getHourOfDay()) < 0 ||
72 minuteOptions.indexOf(value.getMinutes()) < 0 ||
73 secondOptions.indexOf(value.getSeconds()) < 0
81 if (originalValue && value) {
83 originalValue.getHourOfDay() !== value.getHourOfDay() ||
84 originalValue.getMinutes() !== value.getMinutes() ||
85 originalValue.getSeconds() !== value.getSeconds()
89 } else if (originalValue !== value) {
98 } else if (allowEmpty) {
113 if (e.keyCode === 27) {
119 this.setState({str: ''});
120 this.props.onClear();
124 const { locale, prefixCls, allowEmpty } = this.props;
128 return <a className={`${prefixCls}-clear-btn`} role="button" title={locale.clear} onMouseDown={this.onClear}/>;
132 const { prefixCls, placeholder } = this.props;
133 const { invalid, str } = this.state;
134 const invalidClass = invalid ? `${prefixCls}-input-invalid` : '';
135 return (<input className={`${prefixCls}-input ${invalidClass}`}
137 onKeyDown={this.onKeyDown}
139 placeholder={placeholder} onChange={this.onInputChange}/>);
143 const { prefixCls } = this.props;
145 <div className={`${prefixCls}-input-wrap`}>
147 {this.getClearButton()}
153 export default Header;