1 | import _extends from 'babel-runtime/helpers/extends';
|
2 | import _classCallCheck from 'babel-runtime/helpers/classCallCheck';
|
3 | import _possibleConstructorReturn from 'babel-runtime/helpers/possibleConstructorReturn';
|
4 | import _inherits from 'babel-runtime/helpers/inherits';
|
5 |
|
6 | var _class, _temp2;
|
7 |
|
8 | import React from 'react';
|
9 | import PropTypes from 'prop-types';
|
10 | import classNames from 'classnames';
|
11 | import { polyfill } from 'react-lifecycles-compat';
|
12 |
|
13 | import ConfigProvider from '../config-provider';
|
14 | import { func } from '../util';
|
15 | import zhCN from '../locale/zh-cn';
|
16 |
|
17 | var Base = (_temp2 = _class = function (_React$Component) {
|
18 | _inherits(Base, _React$Component);
|
19 |
|
20 | function Base() {
|
21 | var _temp, _this, _ret;
|
22 |
|
23 | _classCallCheck(this, Base);
|
24 |
|
25 | for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
|
26 | args[_key] = arguments[_key];
|
27 | }
|
28 |
|
29 | return _ret = (_temp = (_this = _possibleConstructorReturn(this, _React$Component.call.apply(_React$Component, [this].concat(args))), _this), _this.handleCompositionStart = function (e) {
|
30 | _this.setState({
|
31 | composition: true
|
32 | });
|
33 | _this.props.onCompositionStart(e);
|
34 | }, _this.handleCompositionEnd = function (e) {
|
35 | _this.setState({
|
36 | composition: false
|
37 | });
|
38 | _this.props.onCompositionEnd(e);
|
39 |
|
40 | var value = e.target.value;
|
41 | _this.props.onChange(value, e);
|
42 | }, _this.saveRef = function (input) {
|
43 | _this.inputRef = input;
|
44 | }, _temp), _possibleConstructorReturn(_this, _ret);
|
45 | }
|
46 |
|
47 | Base.getDerivedStateFromProps = function getDerivedStateFromProps(nextProps, prevState) {
|
48 | if ('value' in nextProps && nextProps.value !== prevState.value && !prevState.composition) {
|
49 | var value = nextProps.value;
|
50 | return {
|
51 | value: value === undefined || value === null ? '' : value
|
52 | };
|
53 | }
|
54 |
|
55 | return null;
|
56 | };
|
57 |
|
58 | Base.prototype.ieHack = function ieHack(value) {
|
59 | return value;
|
60 | };
|
61 |
|
62 | Base.prototype.onChange = function onChange(e) {
|
63 | if ('stopPropagation' in e) {
|
64 | e.stopPropagation();
|
65 | } else if ('cancelBubble' in e) {
|
66 | e.cancelBubble();
|
67 | }
|
68 |
|
69 | var value = e.target.value;
|
70 |
|
71 | if (this.props.trim) {
|
72 | value = value.trim();
|
73 | }
|
74 |
|
75 | value = this.ieHack(value);
|
76 |
|
77 |
|
78 | if (!('value' in this.props) || this.state.composition) {
|
79 | this.setState({
|
80 | value: value
|
81 | });
|
82 | }
|
83 |
|
84 | if (this.state.composition) {
|
85 | return;
|
86 | }
|
87 |
|
88 |
|
89 | if (value && this.props.htmlType === 'number') {
|
90 | value = Number(value);
|
91 | }
|
92 |
|
93 | this.props.onChange(value, e);
|
94 | };
|
95 |
|
96 | Base.prototype.onKeyDown = function onKeyDown(e) {
|
97 | var value = e.target.value;
|
98 | var maxLength = this.props.maxLength;
|
99 |
|
100 | var len = maxLength > 0 && value ? this.getValueLength(value) : 0;
|
101 | var opts = {};
|
102 |
|
103 |
|
104 | if (this.props.trim && e.keyCode === 32) {
|
105 | opts.beTrimed = true;
|
106 | }
|
107 |
|
108 |
|
109 | if (maxLength > 0 && (len > maxLength + 1 || (len === maxLength || len === maxLength + 1) && e.keyCode !== 8 && e.keyCode !== 46)) {
|
110 | opts.overMaxLength = true;
|
111 | }
|
112 |
|
113 | this.props.onKeyDown(e, opts);
|
114 | };
|
115 |
|
116 | Base.prototype.onFocus = function onFocus(e) {
|
117 | this.setState({
|
118 | focus: true
|
119 | });
|
120 | this.props.onFocus(e);
|
121 | };
|
122 |
|
123 | Base.prototype.onBlur = function onBlur(e) {
|
124 | this.setState({
|
125 | focus: false
|
126 | });
|
127 | this.props.onBlur(e);
|
128 | };
|
129 |
|
130 | Base.prototype.renderLength = function renderLength() {
|
131 | var _classNames;
|
132 |
|
133 | var _props = this.props,
|
134 | maxLength = _props.maxLength,
|
135 | showLimitHint = _props.showLimitHint,
|
136 | prefix = _props.prefix,
|
137 | rtl = _props.rtl;
|
138 |
|
139 | var len = maxLength > 0 && this.state.value ? this.getValueLength(this.state.value) : 0;
|
140 |
|
141 | var classesLenWrap = classNames((_classNames = {}, _classNames[prefix + 'input-len'] = true, _classNames[prefix + 'error'] = len > maxLength, _classNames));
|
142 |
|
143 | var content = rtl ? maxLength + '/' + len : len + '/' + maxLength;
|
144 |
|
145 | return maxLength && showLimitHint ? React.createElement(
|
146 | 'span',
|
147 | { className: classesLenWrap },
|
148 | content
|
149 | ) : null;
|
150 | };
|
151 |
|
152 | Base.prototype.renderControl = function renderControl() {
|
153 | var _this2 = this;
|
154 |
|
155 | var lenWrap = this.renderLength();
|
156 |
|
157 | return lenWrap ? React.createElement(
|
158 | 'span',
|
159 | { onClick: function onClick() {
|
160 | return _this2.focus();
|
161 | }, className: this.props.prefix + 'input-control' },
|
162 | lenWrap
|
163 | ) : null;
|
164 | };
|
165 |
|
166 | Base.prototype.getClass = function getClass() {
|
167 | var _classNames2;
|
168 |
|
169 | var _props2 = this.props,
|
170 | disabled = _props2.disabled,
|
171 | state = _props2.state,
|
172 | prefix = _props2.prefix;
|
173 |
|
174 |
|
175 | return classNames((_classNames2 = {}, _classNames2[prefix + 'input'] = true, _classNames2[prefix + 'disabled'] = !!disabled, _classNames2[prefix + 'error'] = state === 'error', _classNames2[prefix + 'warning'] = state === 'warning', _classNames2[prefix + 'focus'] = this.state.focus, _classNames2));
|
176 | };
|
177 |
|
178 | Base.prototype.getProps = function getProps() {
|
179 | var _props3 = this.props,
|
180 | placeholder = _props3.placeholder,
|
181 | inputStyle = _props3.inputStyle,
|
182 | disabled = _props3.disabled,
|
183 | readOnly = _props3.readOnly,
|
184 | cutString = _props3.cutString,
|
185 | maxLength = _props3.maxLength,
|
186 | name = _props3.name,
|
187 | onCompositionStart = _props3.onCompositionStart,
|
188 | onCompositionEnd = _props3.onCompositionEnd;
|
189 |
|
190 | var props = {
|
191 | style: inputStyle,
|
192 | placeholder: placeholder,
|
193 | disabled: disabled,
|
194 | readOnly: readOnly,
|
195 | name: name,
|
196 | maxLength: cutString ? maxLength : undefined,
|
197 | value: this.state.value,
|
198 | onChange: this.onChange.bind(this),
|
199 | onBlur: this.onBlur.bind(this),
|
200 | onFocus: this.onFocus.bind(this),
|
201 | onCompositionStart: onCompositionStart,
|
202 | onCompositionEnd: onCompositionEnd
|
203 | };
|
204 |
|
205 |
|
206 | if (disabled) {
|
207 | props['aria-disabled'] = disabled;
|
208 | }
|
209 |
|
210 | return props;
|
211 | };
|
212 |
|
213 | Base.prototype.getInputNode = function getInputNode() {
|
214 | return this.inputRef;
|
215 | };
|
216 |
|
217 | Base.prototype.focus = function focus(start, end) {
|
218 | this.inputRef.focus();
|
219 | if (typeof start === 'number') {
|
220 | this.inputRef.selectionStart = start;
|
221 | }
|
222 | if (typeof end === 'number') {
|
223 | this.inputRef.selectionEnd = end;
|
224 | }
|
225 | };
|
226 |
|
227 | return Base;
|
228 | }(React.Component), _class.propTypes = _extends({}, ConfigProvider.propTypes, {
|
229 | |
230 |
|
231 |
|
232 | value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
|
233 | |
234 |
|
235 |
|
236 | defaultValue: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
|
237 | |
238 |
|
239 |
|
240 |
|
241 |
|
242 | onChange: PropTypes.func,
|
243 | |
244 |
|
245 |
|
246 |
|
247 |
|
248 | onKeyDown: PropTypes.func,
|
249 | |
250 |
|
251 |
|
252 | disabled: PropTypes.bool,
|
253 | |
254 |
|
255 |
|
256 | maxLength: PropTypes.number,
|
257 | |
258 |
|
259 |
|
260 | showLimitHint: PropTypes.bool,
|
261 | |
262 |
|
263 |
|
264 | cutString: PropTypes.bool,
|
265 | |
266 |
|
267 |
|
268 | readOnly: PropTypes.bool,
|
269 | |
270 |
|
271 |
|
272 | trim: PropTypes.bool,
|
273 | |
274 |
|
275 |
|
276 | placeholder: PropTypes.string,
|
277 | |
278 |
|
279 |
|
280 |
|
281 | onFocus: PropTypes.func,
|
282 | |
283 |
|
284 |
|
285 |
|
286 | onBlur: PropTypes.func,
|
287 | |
288 |
|
289 |
|
290 |
|
291 |
|
292 | getValueLength: PropTypes.func,
|
293 | inputStyle: PropTypes.object,
|
294 | |
295 |
|
296 |
|
297 | className: PropTypes.string,
|
298 | |
299 |
|
300 |
|
301 | style: PropTypes.object,
|
302 | |
303 |
|
304 |
|
305 | htmlType: PropTypes.string,
|
306 | |
307 |
|
308 |
|
309 | name: PropTypes.string,
|
310 | rtl: PropTypes.bool,
|
311 | state: PropTypes.oneOf(['error', 'loading', 'success', 'warning']),
|
312 | locale: PropTypes.object,
|
313 | |
314 |
|
315 |
|
316 | isPreview: PropTypes.bool,
|
317 | |
318 |
|
319 |
|
320 |
|
321 | renderPreview: PropTypes.func,
|
322 | |
323 |
|
324 |
|
325 |
|
326 | size: PropTypes.oneOf(['small', 'medium', 'large']),
|
327 | |
328 |
|
329 |
|
330 |
|
331 | composition: PropTypes.bool,
|
332 | onCompositionStart: PropTypes.func,
|
333 | onCompositionEnd: PropTypes.func
|
334 | }), _class.defaultProps = {
|
335 | disabled: false,
|
336 | prefix: 'next-',
|
337 | size: 'medium',
|
338 | maxLength: null,
|
339 | showLimitHint: false,
|
340 | cutString: true,
|
341 | readOnly: false,
|
342 | isPreview: false,
|
343 | trim: false,
|
344 | composition: false,
|
345 | onFocus: func.noop,
|
346 | onBlur: func.noop,
|
347 | onChange: func.noop,
|
348 | onKeyDown: func.noop,
|
349 | getValueLength: func.noop,
|
350 | onCompositionStart: func.noop,
|
351 | onCompositionEnd: func.noop,
|
352 | locale: zhCN.Input
|
353 | }, _temp2);
|
354 | Base.displayName = 'Base';
|
355 |
|
356 |
|
357 | export default polyfill(Base); |
\ | No newline at end of file |