diff options
author | afc163 <afc163@gmail.com> | 2016-11-11 12:10:26 +0800 |
---|---|---|
committer | afc163 <afc163@gmail.com> | 2016-11-11 12:10:26 +0800 |
commit | 614f6c90232d890984d0f4f2f13ff41fdb144b27 (patch) | |
tree | ce1a9be06b3264fd9fc09b3c2b028646db03a322 /src/module/Header.jsx | |
parent | cb5a445c75c7117c7c705d615099086274c2b254 (diff) | |
parent | f429b4a79df25c9eadc3901e2483716835cc7de7 (diff) | |
download | time-picker-614f6c90232d890984d0f4f2f13ff41fdb144b27.tar.gz time-picker-614f6c90232d890984d0f4f2f13ff41fdb144b27.tar.zst time-picker-614f6c90232d890984d0f4f2f13ff41fdb144b27.zip |
Merge branch 'master' of github.com:react-component/time-picker
Diffstat (limited to 'src/module/Header.jsx')
-rw-r--r-- | src/module/Header.jsx | 204 |
1 files changed, 0 insertions, 204 deletions
diff --git a/src/module/Header.jsx b/src/module/Header.jsx deleted file mode 100644 index a926e98..0000000 --- a/src/module/Header.jsx +++ /dev/null | |||
@@ -1,204 +0,0 @@ | |||
1 | import React, { PropTypes } from 'react'; | ||
2 | import createSelection from '../util/selection'; | ||
3 | |||
4 | const Header = React.createClass({ | ||
5 | propTypes: { | ||
6 | formatter: PropTypes.object, | ||
7 | prefixCls: PropTypes.string, | ||
8 | gregorianCalendarLocale: PropTypes.object, | ||
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, | ||
16 | disabledHours: PropTypes.func, | ||
17 | disabledMinutes: PropTypes.func, | ||
18 | disabledSeconds: PropTypes.func, | ||
19 | onChange: PropTypes.func, | ||
20 | onClear: PropTypes.func, | ||
21 | onEsc: PropTypes.func, | ||
22 | allowEmpty: PropTypes.bool, | ||
23 | currentSelectPanel: PropTypes.string, | ||
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 | |||
34 | componentDidMount() { | ||
35 | this.timer = setTimeout(this.selectRange, 0); | ||
36 | }, | ||
37 | |||
38 | componentWillReceiveProps(nextProps) { | ||
39 | const value = nextProps.value; | ||
40 | this.setState({ | ||
41 | str: value && nextProps.formatter.format(value) || '', | ||
42 | invalid: false, | ||
43 | }); | ||
44 | }, | ||
45 | |||
46 | componentDidUpdate() { | ||
47 | this.timer = setTimeout(this.selectRange, 0); | ||
48 | }, | ||
49 | |||
50 | componentWillUnmount() { | ||
51 | clearTimeout(this.timer); | ||
52 | }, | ||
53 | |||
54 | onInputChange(event) { | ||
55 | const str = event.target.value; | ||
56 | this.setState({ | ||
57 | str, | ||
58 | }); | ||
59 | let value = null; | ||
60 | const { formatter, gregorianCalendarLocale, hourOptions, minuteOptions, secondOptions, disabledHours, disabledMinutes, disabledSeconds, onChange, allowEmpty } = this.props; | ||
61 | |||
62 | if (str) { | ||
63 | const originalValue = this.props.value; | ||
64 | try { | ||
65 | value = formatter.parse(str, { | ||
66 | locale: gregorianCalendarLocale, | ||
67 | obeyCount: true, | ||
68 | }); | ||
69 | } catch (ex) { | ||
70 | this.setState({ | ||
71 | invalid: true, | ||
72 | }); | ||
73 | return; | ||
74 | } | ||
75 | |||
76 | if (value) { | ||
77 | // if time value not allowed, response warning. | ||
78 | if ( | ||
79 | hourOptions.indexOf(value.getHourOfDay()) < 0 || | ||
80 | minuteOptions.indexOf(value.getMinutes()) < 0 || | ||
81 | secondOptions.indexOf(value.getSeconds()) < 0 | ||
82 | ) { | ||
83 | this.setState({ | ||
84 | invalid: true, | ||
85 | }); | ||
86 | return; | ||
87 | } | ||
88 | |||
89 | // if time value is disabled, response warning. | ||
90 | const disabledHourOptions = disabledHours(); | ||
91 | const disabledMinuteOptions = disabledMinutes(value.getHourOfDay()); | ||
92 | const disabledSecondOptions = disabledSeconds(value.getHourOfDay(), value.getMinutes()); | ||
93 | if ( | ||
94 | (disabledHourOptions && disabledHourOptions.indexOf(value.getHourOfDay()) >= 0) || | ||
95 | (disabledMinuteOptions && disabledMinuteOptions.indexOf(value.getMinutes()) >= 0) || | ||
96 | (disabledSecondOptions && disabledSecondOptions.indexOf(value.getSeconds()) >= 0) | ||
97 | ) { | ||
98 | this.setState({ | ||
99 | invalid: true, | ||
100 | }); | ||
101 | return; | ||
102 | } | ||
103 | |||
104 | if (originalValue && value) { | ||
105 | if ( | ||
106 | originalValue.getHourOfDay() !== value.getHourOfDay() || | ||
107 | originalValue.getMinutes() !== value.getMinutes() || | ||
108 | originalValue.getSeconds() !== value.getSeconds() | ||
109 | ) { | ||
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); | ||
116 | } | ||
117 | } else if (originalValue !== value) { | ||
118 | onChange(value); | ||
119 | } | ||
120 | } else { | ||
121 | this.setState({ | ||
122 | invalid: true, | ||
123 | }); | ||
124 | return; | ||
125 | } | ||
126 | } else if (allowEmpty) { | ||
127 | onChange(null); | ||
128 | } else { | ||
129 | this.setState({ | ||
130 | invalid: true, | ||
131 | }); | ||
132 | return; | ||
133 | } | ||
134 | |||
135 | this.setState({ | ||
136 | invalid: false, | ||
137 | }); | ||
138 | }, | ||
139 | |||
140 | onKeyDown(e) { | ||
141 | if (e.keyCode === 27) { | ||
142 | this.props.onEsc(); | ||
143 | } | ||
144 | }, | ||
145 | |||
146 | onClear() { | ||
147 | this.setState({ str: '' }); | ||
148 | this.props.onClear(); | ||
149 | }, | ||
150 | |||
151 | getClearButton() { | ||
152 | const { locale, prefixCls, allowEmpty } = this.props; | ||
153 | if (!allowEmpty) { | ||
154 | return null; | ||
155 | } | ||
156 | return <a className={`${prefixCls}-clear-btn`} role="button" title={locale.clear} onMouseDown={this.onClear}/>; | ||
157 | }, | ||
158 | |||
159 | getInput() { | ||
160 | const { prefixCls, placeholder } = this.props; | ||
161 | const { invalid, str } = this.state; | ||
162 | const invalidClass = invalid ? `${prefixCls}-input-invalid` : ''; | ||
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 | />); | ||
170 | }, | ||
171 | |||
172 | selectRange() { | ||
173 | this.refs.input.select(); | ||
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 | |||
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; | ||