]>
Commit | Line | Data |
---|---|---|
3ab3a128 | 1 | import React, { Component } from 'react'; |
2 | import PropTypes from 'prop-types'; | |
4984ed85 | 3 | import moment from 'moment'; |
4 | ||
3ab3a128 | 5 | class Header extends Component { |
6 | static propTypes = { | |
4984ed85 | 7 | format: PropTypes.string, |
8 | prefixCls: PropTypes.string, | |
9 | disabledDate: PropTypes.func, | |
10 | placeholder: PropTypes.string, | |
11 | clearText: PropTypes.string, | |
12 | value: PropTypes.object, | |
4e70ea0d | 13 | inputReadOnly: PropTypes.bool, |
4984ed85 | 14 | hourOptions: PropTypes.array, |
15 | minuteOptions: PropTypes.array, | |
16 | secondOptions: PropTypes.array, | |
17 | disabledHours: PropTypes.func, | |
18 | disabledMinutes: PropTypes.func, | |
19 | disabledSeconds: PropTypes.func, | |
20 | onChange: PropTypes.func, | |
21 | onClear: PropTypes.func, | |
22 | onEsc: PropTypes.func, | |
23 | allowEmpty: PropTypes.bool, | |
24 | defaultOpenValue: PropTypes.object, | |
25 | currentSelectPanel: PropTypes.string, | |
d18ecfb6 | 26 | focusOnOpen: PropTypes.bool, |
0e4fd162 | 27 | onKeyDown: PropTypes.func, |
3ab3a128 | 28 | }; |
4984ed85 | 29 | |
d907505b | 30 | static defaultProps = { |
4e70ea0d | 31 | inputReadOnly: false, |
d907505b AD |
32 | } |
33 | ||
3ab3a128 | 34 | constructor(props) { |
35 | super(props); | |
36 | const { value, format } = props; | |
37 | this.state = { | |
4984ed85 | 38 | str: value && value.format(format) || '', |
39 | invalid: false, | |
40 | }; | |
3ab3a128 | 41 | } |
4984ed85 | 42 | |
d18ecfb6 LL |
43 | componentDidMount() { |
44 | if (this.props.focusOnOpen) { | |
45 | // Wait one frame for the panel to be positioned before focusing | |
46 | const requestAnimationFrame = (window.requestAnimationFrame || window.setTimeout); | |
1c72daf0 LL |
47 | requestAnimationFrame(() => { |
48 | this.refs.input.focus(); | |
49 | this.refs.input.select(); | |
50 | }); | |
d18ecfb6 LL |
51 | } |
52 | } | |
53 | ||
4984ed85 | 54 | componentWillReceiveProps(nextProps) { |
55 | const { value, format } = nextProps; | |
56 | this.setState({ | |
57 | str: value && value.format(format) || '', | |
58 | invalid: false, | |
59 | }); | |
3ab3a128 | 60 | } |
4984ed85 | 61 | |
3ab3a128 | 62 | onInputChange = (event) => { |
4984ed85 | 63 | const str = event.target.value; |
64 | this.setState({ | |
65 | str, | |
66 | }); | |
67 | const { | |
68 | format, hourOptions, minuteOptions, secondOptions, | |
69 | disabledHours, disabledMinutes, | |
70 | disabledSeconds, onChange, allowEmpty, | |
71 | } = this.props; | |
72 | ||
73 | if (str) { | |
74 | const originalValue = this.props.value; | |
75 | const value = this.getProtoValue().clone(); | |
76 | const parsed = moment(str, format, true); | |
77 | if (!parsed.isValid()) { | |
78 | this.setState({ | |
79 | invalid: true, | |
80 | }); | |
81 | return; | |
82 | } | |
83 | value.hour(parsed.hour()).minute(parsed.minute()).second(parsed.second()); | |
84 | ||
85 | // if time value not allowed, response warning. | |
86 | if ( | |
87 | hourOptions.indexOf(value.hour()) < 0 || | |
88 | minuteOptions.indexOf(value.minute()) < 0 || | |
89 | secondOptions.indexOf(value.second()) < 0 | |
90 | ) { | |
91 | this.setState({ | |
92 | invalid: true, | |
93 | }); | |
94 | return; | |
95 | } | |
96 | ||
97 | // if time value is disabled, response warning. | |
98 | const disabledHourOptions = disabledHours(); | |
99 | const disabledMinuteOptions = disabledMinutes(value.hour()); | |
100 | const disabledSecondOptions = disabledSeconds(value.hour(), value.minute()); | |
101 | if ( | |
102 | (disabledHourOptions && disabledHourOptions.indexOf(value.hour()) >= 0) || | |
103 | (disabledMinuteOptions && disabledMinuteOptions.indexOf(value.minute()) >= 0) || | |
104 | (disabledSecondOptions && disabledSecondOptions.indexOf(value.second()) >= 0) | |
105 | ) { | |
106 | this.setState({ | |
107 | invalid: true, | |
108 | }); | |
109 | return; | |
110 | } | |
111 | ||
112 | if (originalValue) { | |
113 | if ( | |
114 | originalValue.hour() !== value.hour() || | |
115 | originalValue.minute() !== value.minute() || | |
116 | originalValue.second() !== value.second() | |
117 | ) { | |
118 | // keep other fields for rc-calendar | |
119 | const changedValue = originalValue.clone(); | |
120 | changedValue.hour(value.hour()); | |
121 | changedValue.minute(value.minute()); | |
122 | changedValue.second(value.second()); | |
123 | onChange(changedValue); | |
124 | } | |
125 | } else if (originalValue !== value) { | |
126 | onChange(value); | |
127 | } | |
128 | } else if (allowEmpty) { | |
129 | onChange(null); | |
130 | } else { | |
131 | this.setState({ | |
132 | invalid: true, | |
133 | }); | |
134 | return; | |
135 | } | |
136 | ||
137 | this.setState({ | |
138 | invalid: false, | |
139 | }); | |
3ab3a128 | 140 | } |
4984ed85 | 141 | |
3ab3a128 | 142 | onKeyDown = (e) => { |
0e4fd162 | 143 | const { onEsc, onKeyDown } = this.props; |
3931819e | 144 | if (e.keyCode === 27 && onEsc) { |
0e4fd162 | 145 | onEsc(); |
4984ed85 | 146 | } |
0e4fd162 | 147 | |
148 | onKeyDown(e); | |
3ab3a128 | 149 | } |
4984ed85 | 150 | |
3ab3a128 | 151 | onClear = () => { |
4984ed85 | 152 | this.setState({ str: '' }); |
153 | this.props.onClear(); | |
3ab3a128 | 154 | } |
4984ed85 | 155 | |
156 | getClearButton() { | |
157 | const { prefixCls, allowEmpty } = this.props; | |
158 | if (!allowEmpty) { | |
159 | return null; | |
160 | } | |
161 | return (<a | |
162 | className={`${prefixCls}-clear-btn`} | |
163 | role="button" | |
164 | title={this.props.clearText} | |
165 | onMouseDown={this.onClear} | |
166 | />); | |
3ab3a128 | 167 | } |
4984ed85 | 168 | |
169 | getProtoValue() { | |
170 | return this.props.value || this.props.defaultOpenValue; | |
3ab3a128 | 171 | } |
4984ed85 | 172 | |
173 | getInput() { | |
4e70ea0d | 174 | const { prefixCls, placeholder, inputReadOnly } = this.props; |
4984ed85 | 175 | const { invalid, str } = this.state; |
176 | const invalidClass = invalid ? `${prefixCls}-input-invalid` : ''; | |
f429b4a7 | 177 | return ( |
178 | <input | |
179 | className={`${prefixCls}-input ${invalidClass}`} | |
180 | ref="input" | |
181 | onKeyDown={this.onKeyDown} | |
182 | value={str} | |
183 | placeholder={placeholder} | |
184 | onChange={this.onInputChange} | |
4e70ea0d | 185 | readOnly={!!inputReadOnly} |
f429b4a7 | 186 | /> |
187 | ); | |
3ab3a128 | 188 | } |
4984ed85 | 189 | |
190 | render() { | |
191 | const { prefixCls } = this.props; | |
192 | return ( | |
193 | <div className={`${prefixCls}-input-wrap`}> | |
194 | {this.getInput()} | |
195 | {this.getClearButton()} | |
196 | </div> | |
197 | ); | |
3ab3a128 | 198 | } |
199 | } | |
4984ed85 | 200 | |
201 | export default Header; |