]>
Commit | Line | Data |
---|---|---|
02de449a | 1 | import React, {PropTypes} from 'react'; |
2 | ||
3 | const Header = React.createClass({ | |
4 | propTypes: { | |
5 | formatter: PropTypes.object, | |
6 | prefixCls: PropTypes.string, | |
8133e8cf | 7 | gregorianCalendarLocale: PropTypes.object, |
02de449a | 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, | |
8133e8cf | 17 | onEsc: PropTypes.func, |
18 | allowEmpty: PropTypes.bool, | |
02de449a | 19 | }, |
20 | ||
21 | getInitialState() { | |
22 | const value = this.props.value; | |
23 | return { | |
24 | str: value && this.props.formatter.format(value) || '', | |
25 | invalid: false, | |
26 | }; | |
27 | }, | |
28 | ||
8133e8cf | 29 | componentDidMount() { |
30 | this.timer = setTimeout(() => { | |
31 | this.refs.input.focus(); | |
32 | }, 0); | |
33 | }, | |
34 | ||
02de449a | 35 | componentWillReceiveProps(nextProps) { |
78637ac0 | 36 | const value = nextProps.value; |
02de449a | 37 | this.setState({ |
38 | str: value && nextProps.formatter.format(value) || '', | |
39 | invalid: false, | |
40 | }); | |
41 | }, | |
42 | ||
8133e8cf | 43 | componentWillUnmount() { |
44 | clearTimeout(this.timer); | |
45 | }, | |
46 | ||
02de449a | 47 | onInputChange(event) { |
48 | const str = event.target.value; | |
49 | this.setState({ | |
50 | str, | |
51 | }); | |
52 | let value = null; | |
8133e8cf | 53 | const {formatter, gregorianCalendarLocale, hourOptions, minuteOptions, secondOptions, onChange, allowEmpty} = this.props; |
02de449a | 54 | |
55 | if (str) { | |
56 | const originalValue = this.props.value; | |
57 | try { | |
58 | value = formatter.parse(str, { | |
8133e8cf | 59 | locale: gregorianCalendarLocale, |
02de449a | 60 | obeyCount: true, |
61 | }); | |
02de449a | 62 | } catch (ex) { |
63 | this.setState({ | |
64 | invalid: true, | |
65 | }); | |
66 | return; | |
67 | } | |
68 | ||
69 | if (value) { | |
70 | if ( | |
11b97949 M |
71 | hourOptions.indexOf(value.getHourOfDay()) < 0 || |
72 | minuteOptions.indexOf(value.getMinutes()) < 0 || | |
73 | secondOptions.indexOf(value.getSeconds()) < 0 | |
02de449a | 74 | ) { |
75 | this.setState({ | |
76 | invalid: true, | |
77 | }); | |
78 | return; | |
79 | } | |
80 | ||
81 | if (originalValue && value) { | |
82 | if ( | |
11b97949 M |
83 | originalValue.getHourOfDay() !== value.getHourOfDay() || |
84 | originalValue.getMinutes() !== value.getMinutes() || | |
85 | originalValue.getSeconds() !== value.getSeconds() | |
02de449a | 86 | ) { |
87 | onChange(value); | |
88 | } | |
89 | } else if (originalValue !== value) { | |
90 | onChange(value); | |
91 | } | |
92 | } else { | |
93 | this.setState({ | |
94 | invalid: true, | |
95 | }); | |
96 | return; | |
97 | } | |
8133e8cf | 98 | } else if (allowEmpty) { |
02de449a | 99 | onChange(null); |
8133e8cf | 100 | } else { |
101 | this.setState({ | |
102 | invalid: true, | |
103 | }); | |
104 | return; | |
02de449a | 105 | } |
106 | ||
107 | this.setState({ | |
108 | invalid: false, | |
109 | }); | |
110 | }, | |
111 | ||
8133e8cf | 112 | onKeyDown(e) { |
113 | if (e.keyCode === 27) { | |
114 | this.props.onEsc(); | |
115 | } | |
116 | }, | |
117 | ||
02de449a | 118 | onClear() { |
119 | this.setState({str: ''}); | |
120 | this.props.onClear(); | |
121 | }, | |
122 | ||
123 | getClearButton() { | |
8133e8cf | 124 | const { locale, prefixCls, allowEmpty } = this.props; |
125 | if (!allowEmpty) { | |
02de449a | 126 | return null; |
127 | } | |
8133e8cf | 128 | return <a className={`${prefixCls}-clear-btn`} role="button" title={locale.clear} onMouseDown={this.onClear}/>; |
02de449a | 129 | }, |
130 | ||
131 | getInput() { | |
132 | const { prefixCls, placeholder } = this.props; | |
133 | const { invalid, str } = this.state; | |
134 | const invalidClass = invalid ? `${prefixCls}-input-invalid` : ''; | |
8133e8cf | 135 | return (<input className={`${prefixCls}-input ${invalidClass}`} |
136 | ref="input" | |
137 | onKeyDown={this.onKeyDown} | |
138 | value={str} | |
139 | placeholder={placeholder} onChange={this.onInputChange}/>); | |
02de449a | 140 | }, |
141 | ||
02de449a | 142 | render() { |
143 | const { prefixCls } = this.props; | |
144 | return ( | |
145 | <div className={`${prefixCls}-input-wrap`}> | |
146 | {this.getInput()} | |
147 | {this.getClearButton()} | |
148 | </div> | |
149 | ); | |
150 | }, | |
151 | }); | |
152 | ||
153 | export default Header; |