1 | "use strict";
|
2 |
|
3 | var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
4 | var _typeof3 = require("@babel/runtime/helpers/typeof");
|
5 | Object.defineProperty(exports, "__esModule", {
|
6 | value: true
|
7 | });
|
8 | exports.default = void 0;
|
9 | var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
|
10 | var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
|
11 | var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
|
12 | var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
|
13 | var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
|
14 | var _miniDecimal = _interopRequireWildcard(require("@rc-component/mini-decimal"));
|
15 | var _classnames = _interopRequireDefault(require("classnames"));
|
16 | var _rcInput = require("rc-input");
|
17 | var _useLayoutEffect = require("rc-util/lib/hooks/useLayoutEffect");
|
18 | var _ref = require("rc-util/lib/ref");
|
19 | var React = _interopRequireWildcard(require("react"));
|
20 | var _useCursor3 = _interopRequireDefault(require("./hooks/useCursor"));
|
21 | var _StepHandler = _interopRequireDefault(require("./StepHandler"));
|
22 | var _numberUtil = require("./utils/numberUtil");
|
23 | var _commonUtils = require("rc-input/lib/utils/commonUtils");
|
24 | var _useFrame = _interopRequireDefault(require("./hooks/useFrame"));
|
25 | var _excluded = ["prefixCls", "className", "style", "min", "max", "step", "defaultValue", "value", "disabled", "readOnly", "upHandler", "downHandler", "keyboard", "controls", "classNames", "stringMode", "parser", "formatter", "precision", "decimalSeparator", "onChange", "onInput", "onPressEnter", "onStep"],
|
26 | _excluded2 = ["disabled", "style", "prefixCls", "value", "prefix", "suffix", "addonBefore", "addonAfter", "classes", "className", "classNames"];
|
27 | function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
|
28 | function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof3(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
|
29 |
|
30 |
|
31 |
|
32 |
|
33 |
|
34 |
|
35 |
|
36 |
|
37 |
|
38 |
|
39 |
|
40 | var getDecimalValue = function getDecimalValue(stringMode, decimalValue) {
|
41 | if (stringMode || decimalValue.isEmpty()) {
|
42 | return decimalValue.toString();
|
43 | }
|
44 | return decimalValue.toNumber();
|
45 | };
|
46 | var getDecimalIfValidate = function getDecimalIfValidate(value) {
|
47 | var decimal = (0, _miniDecimal.default)(value);
|
48 | return decimal.isInvalidate() ? null : decimal;
|
49 | };
|
50 | var InternalInputNumber = React.forwardRef(function (props, ref) {
|
51 | var _clsx;
|
52 | var _props$prefixCls = props.prefixCls,
|
53 | prefixCls = _props$prefixCls === void 0 ? 'rc-input-number' : _props$prefixCls,
|
54 | className = props.className,
|
55 | style = props.style,
|
56 | min = props.min,
|
57 | max = props.max,
|
58 | _props$step = props.step,
|
59 | step = _props$step === void 0 ? 1 : _props$step,
|
60 | defaultValue = props.defaultValue,
|
61 | value = props.value,
|
62 | disabled = props.disabled,
|
63 | readOnly = props.readOnly,
|
64 | upHandler = props.upHandler,
|
65 | downHandler = props.downHandler,
|
66 | keyboard = props.keyboard,
|
67 | _props$controls = props.controls,
|
68 | controls = _props$controls === void 0 ? true : _props$controls,
|
69 | classNames = props.classNames,
|
70 | stringMode = props.stringMode,
|
71 | parser = props.parser,
|
72 | formatter = props.formatter,
|
73 | precision = props.precision,
|
74 | decimalSeparator = props.decimalSeparator,
|
75 | onChange = props.onChange,
|
76 | onInput = props.onInput,
|
77 | onPressEnter = props.onPressEnter,
|
78 | onStep = props.onStep,
|
79 | inputProps = (0, _objectWithoutProperties2.default)(props, _excluded);
|
80 | var inputClassName = "".concat(prefixCls, "-input");
|
81 | var inputRef = React.useRef(null);
|
82 | var _React$useState = React.useState(false),
|
83 | _React$useState2 = (0, _slicedToArray2.default)(_React$useState, 2),
|
84 | focus = _React$useState2[0],
|
85 | setFocus = _React$useState2[1];
|
86 | var userTypingRef = React.useRef(false);
|
87 | var compositionRef = React.useRef(false);
|
88 | var shiftKeyRef = React.useRef(false);
|
89 |
|
90 |
|
91 |
|
92 | var _React$useState3 = React.useState(function () {
|
93 | return (0, _miniDecimal.default)(value !== null && value !== void 0 ? value : defaultValue);
|
94 | }),
|
95 | _React$useState4 = (0, _slicedToArray2.default)(_React$useState3, 2),
|
96 | decimalValue = _React$useState4[0],
|
97 | setDecimalValue = _React$useState4[1];
|
98 | function setUncontrolledDecimalValue(newDecimal) {
|
99 | if (value === undefined) {
|
100 | setDecimalValue(newDecimal);
|
101 | }
|
102 | }
|
103 |
|
104 |
|
105 | |
106 |
|
107 |
|
108 |
|
109 |
|
110 |
|
111 |
|
112 |
|
113 |
|
114 |
|
115 |
|
116 | var getPrecision = React.useCallback(function (numStr, userTyping) {
|
117 | if (userTyping) {
|
118 | return undefined;
|
119 | }
|
120 | if (precision >= 0) {
|
121 | return precision;
|
122 | }
|
123 | return Math.max((0, _miniDecimal.getNumberPrecision)(numStr), (0, _miniDecimal.getNumberPrecision)(step));
|
124 | }, [precision, step]);
|
125 |
|
126 |
|
127 | var mergedParser = React.useCallback(function (num) {
|
128 | var numStr = String(num);
|
129 | if (parser) {
|
130 | return parser(numStr);
|
131 | }
|
132 | var parsedStr = numStr;
|
133 | if (decimalSeparator) {
|
134 | parsedStr = parsedStr.replace(decimalSeparator, '.');
|
135 | }
|
136 |
|
137 |
|
138 | return parsedStr.replace(/[^\w.-]+/g, '');
|
139 | }, [parser, decimalSeparator]);
|
140 |
|
141 |
|
142 | var inputValueRef = React.useRef('');
|
143 | var mergedFormatter = React.useCallback(function (number, userTyping) {
|
144 | if (formatter) {
|
145 | return formatter(number, {
|
146 | userTyping: userTyping,
|
147 | input: String(inputValueRef.current)
|
148 | });
|
149 | }
|
150 | var str = typeof number === 'number' ? (0, _miniDecimal.num2str)(number) : number;
|
151 |
|
152 |
|
153 | if (!userTyping) {
|
154 | var mergedPrecision = getPrecision(str, userTyping);
|
155 | if ((0, _miniDecimal.validateNumber)(str) && (decimalSeparator || mergedPrecision >= 0)) {
|
156 |
|
157 | var separatorStr = decimalSeparator || '.';
|
158 | str = (0, _miniDecimal.toFixed)(str, separatorStr, mergedPrecision);
|
159 | }
|
160 | }
|
161 | return str;
|
162 | }, [formatter, getPrecision, decimalSeparator]);
|
163 |
|
164 |
|
165 | |
166 |
|
167 |
|
168 |
|
169 |
|
170 |
|
171 |
|
172 |
|
173 |
|
174 | var _React$useState5 = React.useState(function () {
|
175 | var initValue = defaultValue !== null && defaultValue !== void 0 ? defaultValue : value;
|
176 | if (decimalValue.isInvalidate() && ['string', 'number'].includes((0, _typeof2.default)(initValue))) {
|
177 | return Number.isNaN(initValue) ? '' : initValue;
|
178 | }
|
179 | return mergedFormatter(decimalValue.toString(), false);
|
180 | }),
|
181 | _React$useState6 = (0, _slicedToArray2.default)(_React$useState5, 2),
|
182 | inputValue = _React$useState6[0],
|
183 | setInternalInputValue = _React$useState6[1];
|
184 | inputValueRef.current = inputValue;
|
185 |
|
186 |
|
187 | function setInputValue(newValue, userTyping) {
|
188 | setInternalInputValue(mergedFormatter(
|
189 |
|
190 |
|
191 |
|
192 | newValue.isInvalidate() ? newValue.toString(false) : newValue.toString(!userTyping), userTyping));
|
193 | }
|
194 |
|
195 |
|
196 | var maxDecimal = React.useMemo(function () {
|
197 | return getDecimalIfValidate(max);
|
198 | }, [max, precision]);
|
199 | var minDecimal = React.useMemo(function () {
|
200 | return getDecimalIfValidate(min);
|
201 | }, [min, precision]);
|
202 | var upDisabled = React.useMemo(function () {
|
203 | if (!maxDecimal || !decimalValue || decimalValue.isInvalidate()) {
|
204 | return false;
|
205 | }
|
206 | return maxDecimal.lessEquals(decimalValue);
|
207 | }, [maxDecimal, decimalValue]);
|
208 | var downDisabled = React.useMemo(function () {
|
209 | if (!minDecimal || !decimalValue || decimalValue.isInvalidate()) {
|
210 | return false;
|
211 | }
|
212 | return decimalValue.lessEquals(minDecimal);
|
213 | }, [minDecimal, decimalValue]);
|
214 |
|
215 |
|
216 | var _useCursor = (0, _useCursor3.default)(inputRef.current, focus),
|
217 | _useCursor2 = (0, _slicedToArray2.default)(_useCursor, 2),
|
218 | recordCursor = _useCursor2[0],
|
219 | restoreCursor = _useCursor2[1];
|
220 |
|
221 |
|
222 | |
223 |
|
224 |
|
225 |
|
226 |
|
227 |
|
228 |
|
229 | var getRangeValue = function getRangeValue(target) {
|
230 |
|
231 | if (maxDecimal && !target.lessEquals(maxDecimal)) {
|
232 | return maxDecimal;
|
233 | }
|
234 |
|
235 |
|
236 | if (minDecimal && !minDecimal.lessEquals(target)) {
|
237 | return minDecimal;
|
238 | }
|
239 | return null;
|
240 | };
|
241 |
|
242 | |
243 |
|
244 |
|
245 | var isInRange = function isInRange(target) {
|
246 | return !getRangeValue(target);
|
247 | };
|
248 |
|
249 | |
250 |
|
251 |
|
252 |
|
253 | var triggerValueUpdate = function triggerValueUpdate(newValue, userTyping) {
|
254 | var updateValue = newValue;
|
255 | var isRangeValidate = isInRange(updateValue) || updateValue.isEmpty();
|
256 |
|
257 |
|
258 |
|
259 |
|
260 | if (!updateValue.isEmpty() && !userTyping) {
|
261 |
|
262 | updateValue = getRangeValue(updateValue) || updateValue;
|
263 | isRangeValidate = true;
|
264 | }
|
265 | if (!readOnly && !disabled && isRangeValidate) {
|
266 | var numStr = updateValue.toString();
|
267 | var mergedPrecision = getPrecision(numStr, userTyping);
|
268 | if (mergedPrecision >= 0) {
|
269 | updateValue = (0, _miniDecimal.default)((0, _miniDecimal.toFixed)(numStr, '.', mergedPrecision));
|
270 |
|
271 |
|
272 |
|
273 | if (!isInRange(updateValue)) {
|
274 | updateValue = (0, _miniDecimal.default)((0, _miniDecimal.toFixed)(numStr, '.', mergedPrecision, true));
|
275 | }
|
276 | }
|
277 |
|
278 |
|
279 | if (!updateValue.equals(decimalValue)) {
|
280 | setUncontrolledDecimalValue(updateValue);
|
281 | onChange === null || onChange === void 0 ? void 0 : onChange(updateValue.isEmpty() ? null : getDecimalValue(stringMode, updateValue));
|
282 |
|
283 |
|
284 | if (value === undefined) {
|
285 | setInputValue(updateValue, userTyping);
|
286 | }
|
287 | }
|
288 | return updateValue;
|
289 | }
|
290 | return decimalValue;
|
291 | };
|
292 |
|
293 |
|
294 | var onNextPromise = (0, _useFrame.default)();
|
295 |
|
296 |
|
297 | var collectInputValue = function collectInputValue(inputStr) {
|
298 | recordCursor();
|
299 |
|
300 |
|
301 |
|
302 | inputValueRef.current = inputStr;
|
303 | setInternalInputValue(inputStr);
|
304 |
|
305 |
|
306 | if (!compositionRef.current) {
|
307 | var finalValue = mergedParser(inputStr);
|
308 | var finalDecimal = (0, _miniDecimal.default)(finalValue);
|
309 | if (!finalDecimal.isNaN()) {
|
310 | triggerValueUpdate(finalDecimal, true);
|
311 | }
|
312 | }
|
313 |
|
314 |
|
315 | onInput === null || onInput === void 0 ? void 0 : onInput(inputStr);
|
316 |
|
317 |
|
318 |
|
319 | onNextPromise(function () {
|
320 | var nextInputStr = inputStr;
|
321 | if (!parser) {
|
322 | nextInputStr = inputStr.replace(/。/g, '.');
|
323 | }
|
324 | if (nextInputStr !== inputStr) {
|
325 | collectInputValue(nextInputStr);
|
326 | }
|
327 | });
|
328 | };
|
329 |
|
330 |
|
331 | var onCompositionStart = function onCompositionStart() {
|
332 | compositionRef.current = true;
|
333 | };
|
334 | var onCompositionEnd = function onCompositionEnd() {
|
335 | compositionRef.current = false;
|
336 | collectInputValue(inputRef.current.value);
|
337 | };
|
338 |
|
339 |
|
340 | var onInternalInput = function onInternalInput(e) {
|
341 | collectInputValue(e.target.value);
|
342 | };
|
343 |
|
344 |
|
345 | var onInternalStep = function onInternalStep(up) {
|
346 | var _inputRef$current;
|
347 |
|
348 | if (up && upDisabled || !up && downDisabled) {
|
349 | return;
|
350 | }
|
351 |
|
352 |
|
353 |
|
354 | userTypingRef.current = false;
|
355 | var stepDecimal = (0, _miniDecimal.default)(shiftKeyRef.current ? (0, _numberUtil.getDecupleSteps)(step) : step);
|
356 | if (!up) {
|
357 | stepDecimal = stepDecimal.negate();
|
358 | }
|
359 | var target = (decimalValue || (0, _miniDecimal.default)(0)).add(stepDecimal.toString());
|
360 | var updatedValue = triggerValueUpdate(target, false);
|
361 | onStep === null || onStep === void 0 ? void 0 : onStep(getDecimalValue(stringMode, updatedValue), {
|
362 | offset: shiftKeyRef.current ? (0, _numberUtil.getDecupleSteps)(step) : step,
|
363 | type: up ? 'up' : 'down'
|
364 | });
|
365 | (_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 ? void 0 : _inputRef$current.focus();
|
366 | };
|
367 |
|
368 |
|
369 | |
370 |
|
371 |
|
372 |
|
373 |
|
374 | var flushInputValue = function flushInputValue(userTyping) {
|
375 | var parsedValue = (0, _miniDecimal.default)(mergedParser(inputValue));
|
376 | var formatValue = parsedValue;
|
377 | if (!parsedValue.isNaN()) {
|
378 |
|
379 |
|
380 | formatValue = triggerValueUpdate(parsedValue, userTyping);
|
381 | } else {
|
382 | formatValue = triggerValueUpdate(decimalValue, userTyping);
|
383 | }
|
384 | if (value !== undefined) {
|
385 |
|
386 | setInputValue(decimalValue, false);
|
387 | } else if (!formatValue.isNaN()) {
|
388 |
|
389 | setInputValue(formatValue, false);
|
390 | }
|
391 | };
|
392 |
|
393 |
|
394 | var onBeforeInput = function onBeforeInput() {
|
395 | userTypingRef.current = true;
|
396 | };
|
397 | var onKeyDown = function onKeyDown(event) {
|
398 | var key = event.key,
|
399 | shiftKey = event.shiftKey;
|
400 | userTypingRef.current = true;
|
401 | shiftKeyRef.current = shiftKey;
|
402 | if (key === 'Enter') {
|
403 | if (!compositionRef.current) {
|
404 | userTypingRef.current = false;
|
405 | }
|
406 | flushInputValue(false);
|
407 | onPressEnter === null || onPressEnter === void 0 ? void 0 : onPressEnter(event);
|
408 | }
|
409 | if (keyboard === false) {
|
410 | return;
|
411 | }
|
412 |
|
413 |
|
414 | if (!compositionRef.current && ['Up', 'ArrowUp', 'Down', 'ArrowDown'].includes(key)) {
|
415 | onInternalStep(key === 'Up' || key === 'ArrowUp');
|
416 | event.preventDefault();
|
417 | }
|
418 | };
|
419 | var onKeyUp = function onKeyUp() {
|
420 | userTypingRef.current = false;
|
421 | shiftKeyRef.current = false;
|
422 | };
|
423 |
|
424 |
|
425 | var onBlur = function onBlur() {
|
426 | flushInputValue(false);
|
427 | setFocus(false);
|
428 | userTypingRef.current = false;
|
429 | };
|
430 |
|
431 |
|
432 |
|
433 | (0, _useLayoutEffect.useLayoutUpdateEffect)(function () {
|
434 | if (!decimalValue.isInvalidate()) {
|
435 | setInputValue(decimalValue, false);
|
436 | }
|
437 | }, [precision]);
|
438 |
|
439 |
|
440 | (0, _useLayoutEffect.useLayoutUpdateEffect)(function () {
|
441 | var newValue = (0, _miniDecimal.default)(value);
|
442 | setDecimalValue(newValue);
|
443 | var currentParsedValue = (0, _miniDecimal.default)(mergedParser(inputValue));
|
444 |
|
445 |
|
446 |
|
447 | if (!newValue.equals(currentParsedValue) || !userTypingRef.current || formatter) {
|
448 |
|
449 | setInputValue(newValue, userTypingRef.current);
|
450 | }
|
451 | }, [value]);
|
452 |
|
453 |
|
454 | (0, _useLayoutEffect.useLayoutUpdateEffect)(function () {
|
455 | if (formatter) {
|
456 | restoreCursor();
|
457 | }
|
458 | }, [inputValue]);
|
459 |
|
460 |
|
461 | return React.createElement("div", {
|
462 | className: (0, _classnames.default)(prefixCls, classNames === null || classNames === void 0 ? void 0 : classNames.input, className, (_clsx = {}, (0, _defineProperty2.default)(_clsx, "".concat(prefixCls, "-focused"), focus), (0, _defineProperty2.default)(_clsx, "".concat(prefixCls, "-disabled"), disabled), (0, _defineProperty2.default)(_clsx, "".concat(prefixCls, "-readonly"), readOnly), (0, _defineProperty2.default)(_clsx, "".concat(prefixCls, "-not-a-number"), decimalValue.isNaN()), (0, _defineProperty2.default)(_clsx, "".concat(prefixCls, "-out-of-range"), !decimalValue.isInvalidate() && !isInRange(decimalValue)), _clsx)),
|
463 | style: style,
|
464 | onFocus: function onFocus() {
|
465 | setFocus(true);
|
466 | },
|
467 | onBlur: onBlur,
|
468 | onKeyDown: onKeyDown,
|
469 | onKeyUp: onKeyUp,
|
470 | onCompositionStart: onCompositionStart,
|
471 | onCompositionEnd: onCompositionEnd,
|
472 | onBeforeInput: onBeforeInput
|
473 | }, controls && React.createElement(_StepHandler.default, {
|
474 | prefixCls: prefixCls,
|
475 | upNode: upHandler,
|
476 | downNode: downHandler,
|
477 | upDisabled: upDisabled,
|
478 | downDisabled: downDisabled,
|
479 | onStep: onInternalStep
|
480 | }), React.createElement("div", {
|
481 | className: "".concat(inputClassName, "-wrap")
|
482 | }, React.createElement("input", (0, _extends2.default)({
|
483 | autoComplete: "off",
|
484 | role: "spinbutton",
|
485 | "aria-valuemin": min,
|
486 | "aria-valuemax": max,
|
487 | "aria-valuenow": decimalValue.isInvalidate() ? null : decimalValue.toString(),
|
488 | step: step
|
489 | }, inputProps, {
|
490 | ref: (0, _ref.composeRef)(inputRef, ref),
|
491 | className: inputClassName,
|
492 | value: inputValue,
|
493 | onChange: onInternalInput,
|
494 | disabled: disabled,
|
495 | readOnly: readOnly
|
496 | }))));
|
497 | });
|
498 | var InputNumber = React.forwardRef(function (props, ref) {
|
499 | var disabled = props.disabled,
|
500 | style = props.style,
|
501 | prefixCls = props.prefixCls,
|
502 | value = props.value,
|
503 | prefix = props.prefix,
|
504 | suffix = props.suffix,
|
505 | addonBefore = props.addonBefore,
|
506 | addonAfter = props.addonAfter,
|
507 | classes = props.classes,
|
508 | className = props.className,
|
509 | classNames = props.classNames,
|
510 | rest = (0, _objectWithoutProperties2.default)(props, _excluded2);
|
511 | var inputFocusRef = React.useRef(null);
|
512 | var focus = function focus(option) {
|
513 | if (inputFocusRef.current) {
|
514 | (0, _commonUtils.triggerFocus)(inputFocusRef.current, option);
|
515 | }
|
516 | };
|
517 | return React.createElement(_rcInput.BaseInput, {
|
518 | inputElement: React.createElement(InternalInputNumber, (0, _extends2.default)({
|
519 | prefixCls: prefixCls,
|
520 | disabled: disabled,
|
521 | classNames: classNames,
|
522 | ref: (0, _ref.composeRef)(inputFocusRef, ref)
|
523 | }, rest)),
|
524 | className: className,
|
525 | triggerFocus: focus,
|
526 | prefixCls: prefixCls,
|
527 | value: value,
|
528 | disabled: disabled,
|
529 | style: style,
|
530 | prefix: prefix,
|
531 | suffix: suffix,
|
532 | addonAfter: addonAfter,
|
533 | addonBefore: addonBefore,
|
534 | classes: classes,
|
535 | classNames: classNames,
|
536 | components: {
|
537 | affixWrapper: 'div',
|
538 | groupWrapper: 'div',
|
539 | wrapper: 'div',
|
540 | groupAddon: 'div'
|
541 | }
|
542 | });
|
543 | });
|
544 | InputNumber.displayName = 'InputNumber';
|
545 | var _default = InputNumber;
|
546 | exports.default = _default; |
\ | No newline at end of file |