aboutsummaryrefslogtreecommitdiffhomepage
path: root/src/module/Header.jsx
diff options
context:
space:
mode:
authoryiminghe <yiminghe@gmail.com>2016-08-04 19:53:55 +0800
committeryiminghe <yiminghe@gmail.com>2016-08-04 19:53:55 +0800
commit4984ed85e54f442998a335db70618d6184fa397e (patch)
tree6ae348b2cac5f48f3afb6f7b8dd0c2fd02f044fc /src/module/Header.jsx
parentdeaa6062ea2e274d50d58c70251c1237c0c03c67 (diff)
downloadtime-picker-4984ed85e54f442998a335db70618d6184fa397e.tar.gz
time-picker-4984ed85e54f442998a335db70618d6184fa397e.tar.zst
time-picker-4984ed85e54f442998a335db70618d6184fa397e.zip
2.x :boom:2.0.0
Diffstat (limited to 'src/module/Header.jsx')
-rw-r--r--src/module/Header.jsx204
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 @@
1import React, { PropTypes } from 'react';
2import createSelection from '../util/selection';
3
4const 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
204export default Header;