]>
Commit | Line | Data |
---|---|---|
1882f74d | 1 | import React, { PropTypes } from 'react'; |
182e9fcc | 2 | import createSelection from '../util/selection'; |
02de449a | 3 | |
4 | const Header = React.createClass({ | |
5 | propTypes: { | |
6 | formatter: PropTypes.object, | |
7 | prefixCls: PropTypes.string, | |
8133e8cf | 8 | gregorianCalendarLocale: PropTypes.object, |
02de449a | 9 | locale: PropTypes.object, |
10 | disabledDate: PropTypes.func, | |
11 | placeholder: PropTypes.string, | |
12 | value: PropTypes.object, | |
13 | hourOptions: PropTypes.array, | |
14 | minuteOptions: PropTypes.array, | |
15 | secondOptions: PropTypes.array, | |
71bd9bc1 M |
16 | disabledHours: PropTypes.func, |
17 | disabledMinutes: PropTypes.func, | |
18 | disabledSeconds: PropTypes.func, | |
02de449a | 19 | onChange: PropTypes.func, |
20 | onClear: PropTypes.func, | |
8133e8cf | 21 | onEsc: PropTypes.func, |
22 | allowEmpty: PropTypes.bool, | |
182e9fcc | 23 | currentSelectPanel: PropTypes.string, |
02de449a | 24 | }, |
25 | ||
26 | getInitialState() { | |
27 | const value = this.props.value; | |
28 | return { | |
29 | str: value && this.props.formatter.format(value) || '', | |
30 | invalid: false, | |
31 | }; | |
32 | }, | |
33 | ||
8133e8cf | 34 | componentDidMount() { |
182e9fcc | 35 | this.timer = setTimeout(this.selectRange, 0); |
8133e8cf | 36 | }, |
37 | ||
02de449a | 38 | componentWillReceiveProps(nextProps) { |
78637ac0 | 39 | const value = nextProps.value; |
02de449a | 40 | this.setState({ |
41 | str: value && nextProps.formatter.format(value) || '', | |
42 | invalid: false, | |
43 | }); | |
44 | }, | |
45 | ||
182e9fcc | 46 | componentDidUpdate() { |
47 | this.timer = setTimeout(this.selectRange, 0); | |
48 | }, | |
49 | ||
8133e8cf | 50 | componentWillUnmount() { |
51 | clearTimeout(this.timer); | |
52 | }, | |
53 | ||
02de449a | 54 | onInputChange(event) { |
55 | const str = event.target.value; | |
56 | this.setState({ | |
57 | str, | |
58 | }); | |
59 | let value = null; | |
1882f74d | 60 | const { formatter, gregorianCalendarLocale, hourOptions, minuteOptions, secondOptions, disabledHours, disabledMinutes, disabledSeconds, onChange, allowEmpty } = this.props; |
02de449a | 61 | |
62 | if (str) { | |
63 | const originalValue = this.props.value; | |
64 | try { | |
65 | value = formatter.parse(str, { | |
8133e8cf | 66 | locale: gregorianCalendarLocale, |
02de449a | 67 | obeyCount: true, |
68 | }); | |
02de449a | 69 | } catch (ex) { |
70 | this.setState({ | |
71 | invalid: true, | |
72 | }); | |
73 | return; | |
74 | } | |
75 | ||
76 | if (value) { | |
518b852e | 77 | // if time value not allowed, response warning. |
02de449a | 78 | if ( |
11b97949 M |
79 | hourOptions.indexOf(value.getHourOfDay()) < 0 || |
80 | minuteOptions.indexOf(value.getMinutes()) < 0 || | |
81 | secondOptions.indexOf(value.getSeconds()) < 0 | |
02de449a | 82 | ) { |
83 | this.setState({ | |
84 | invalid: true, | |
85 | }); | |
86 | return; | |
87 | } | |
88 | ||
518b852e | 89 | // if time value is disabled, response warning. |
71bd9bc1 M |
90 | const disabledHourOptions = disabledHours(); |
91 | const disabledMinuteOptions = disabledMinutes(value.getHourOfDay()); | |
92 | const disabledSecondOptions = disabledSeconds(value.getHourOfDay(), value.getMinutes()); | |
518b852e | 93 | if ( |
71bd9bc1 M |
94 | (disabledHourOptions && disabledHourOptions.indexOf(value.getHourOfDay()) >= 0) || |
95 | (disabledMinuteOptions && disabledMinuteOptions.indexOf(value.getMinutes()) >= 0) || | |
96 | (disabledSecondOptions && disabledSecondOptions.indexOf(value.getSeconds()) >= 0) | |
518b852e M |
97 | ) { |
98 | this.setState({ | |
99 | invalid: true, | |
100 | }); | |
101 | return; | |
102 | } | |
103 | ||
02de449a | 104 | if (originalValue && value) { |
105 | if ( | |
11b97949 M |
106 | originalValue.getHourOfDay() !== value.getHourOfDay() || |
107 | originalValue.getMinutes() !== value.getMinutes() || | |
108 | originalValue.getSeconds() !== value.getSeconds() | |
02de449a | 109 | ) { |
2ddd3f18 | 110 | // keep other fields for rc-calendar |
111 | const changedValue = originalValue.clone(); | |
112 | changedValue.setHourOfDay(value.getHourOfDay()); | |
113 | changedValue.setMinutes(value.getMinutes()); | |
114 | changedValue.setSeconds(value.getSeconds()); | |
115 | onChange(changedValue); | |
02de449a | 116 | } |
117 | } else if (originalValue !== value) { | |
118 | onChange(value); | |
119 | } | |
120 | } else { | |
121 | this.setState({ | |
122 | invalid: true, | |
123 | }); | |
124 | return; | |
125 | } | |
8133e8cf | 126 | } else if (allowEmpty) { |
02de449a | 127 | onChange(null); |
8133e8cf | 128 | } else { |
129 | this.setState({ | |
130 | invalid: true, | |
131 | }); | |
132 | return; | |
02de449a | 133 | } |
134 | ||
135 | this.setState({ | |
136 | invalid: false, | |
137 | }); | |
138 | }, | |
139 | ||
8133e8cf | 140 | onKeyDown(e) { |
141 | if (e.keyCode === 27) { | |
142 | this.props.onEsc(); | |
143 | } | |
144 | }, | |
145 | ||
02de449a | 146 | onClear() { |
1882f74d | 147 | this.setState({ str: '' }); |
02de449a | 148 | this.props.onClear(); |
149 | }, | |
150 | ||
151 | getClearButton() { | |
8133e8cf | 152 | const { locale, prefixCls, allowEmpty } = this.props; |
153 | if (!allowEmpty) { | |
02de449a | 154 | return null; |
155 | } | |
8133e8cf | 156 | return <a className={`${prefixCls}-clear-btn`} role="button" title={locale.clear} onMouseDown={this.onClear}/>; |
02de449a | 157 | }, |
158 | ||
159 | getInput() { | |
160 | const { prefixCls, placeholder } = this.props; | |
161 | const { invalid, str } = this.state; | |
162 | const invalidClass = invalid ? `${prefixCls}-input-invalid` : ''; | |
1882f74d | 163 | return (<input |
164 | className={`${prefixCls}-input ${invalidClass}`} | |
165 | ref="input" | |
166 | onKeyDown={this.onKeyDown} | |
167 | value={str} | |
168 | placeholder={placeholder} onChange={this.onInputChange} | |
169 | />); | |
02de449a | 170 | }, |
171 | ||
182e9fcc | 172 | selectRange() { |
840e3d48 | 173 | this.refs.input.select(); |
182e9fcc | 174 | if (this.props.currentSelectPanel && this.refs.input.value) { |
175 | let selectionRangeStart = 0; | |
176 | let selectionRangeEnd = 0; | |
177 | if (this.props.currentSelectPanel === 'hour') { | |
178 | selectionRangeStart = 0; | |
179 | selectionRangeEnd = this.refs.input.value.indexOf(':'); | |
180 | } else if (this.props.currentSelectPanel === 'minute') { | |
181 | selectionRangeStart = this.refs.input.value.indexOf(':') + 1; | |
182 | selectionRangeEnd = this.refs.input.value.lastIndexOf(':'); | |
183 | } else if (this.props.currentSelectPanel === 'second') { | |
184 | selectionRangeStart = this.refs.input.value.lastIndexOf(':') + 1; | |
185 | selectionRangeEnd = this.refs.input.value.length; | |
186 | } | |
187 | if (selectionRangeEnd - selectionRangeStart === 2) { | |
188 | createSelection(this.refs.input, selectionRangeStart, selectionRangeEnd); | |
189 | } | |
190 | } | |
191 | }, | |
192 | ||
02de449a | 193 | render() { |
194 | const { prefixCls } = this.props; | |
195 | return ( | |
196 | <div className={`${prefixCls}-input-wrap`}> | |
197 | {this.getInput()} | |
198 | {this.getClearButton()} | |
199 | </div> | |
200 | ); | |
201 | }, | |
202 | }); | |
203 | ||
204 | export default Header; |