@salutejs/plasma-new-hope 0.330.0-canary.2050.16051901455.0 → 0.330.0-canary.2050.16069627196.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/cjs/components/NumberFormat/NumberFormat.js +10 -16
- package/cjs/components/NumberFormat/NumberFormat.js.map +1 -1
- package/emotion/cjs/components/NumberFormat/NumberFormat.js +7 -15
- package/emotion/es/components/NumberFormat/NumberFormat.js +8 -16
- package/es/components/NumberFormat/NumberFormat.js +11 -17
- package/es/components/NumberFormat/NumberFormat.js.map +1 -1
- package/package.json +2 -2
- package/styled-components/cjs/components/NumberFormat/NumberFormat.js +7 -15
- package/styled-components/es/components/NumberFormat/NumberFormat.js +8 -16
- package/types/components/NumberFormat/NumberFormat.d.ts.map +1 -1
|
@@ -21,24 +21,25 @@ var composeNumberFormat = function composeNumberFormat(InputComponent) {
|
|
|
21
21
|
_ref$decimalSeparator = _ref.decimalSeparator,
|
|
22
22
|
decimalSeparator = _ref$decimalSeparator === void 0 ? '.' : _ref$decimalSeparator,
|
|
23
23
|
disabled = _ref.disabled,
|
|
24
|
-
|
|
24
|
+
outerValue = _ref.value,
|
|
25
25
|
onChange = _ref.onChange,
|
|
26
26
|
onPaste = _ref.onPaste,
|
|
27
27
|
rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
|
|
28
28
|
var inputRef = React.useRef(null);
|
|
29
29
|
var inputForkRef = plasmaCore.useForkRef(inputRef, outerRef);
|
|
30
|
-
var _useState = React.useState(
|
|
31
|
-
thousandSeparator: thousandSeparator,
|
|
32
|
-
decimalScale: decimalScale,
|
|
33
|
-
decimalSeparator: decimalSeparator
|
|
34
|
-
}) : ''),
|
|
30
|
+
var _useState = React.useState(''),
|
|
35
31
|
_useState2 = _rollupPluginBabelHelpers.slicedToArray(_useState, 2),
|
|
36
32
|
innerValue = _useState2[0],
|
|
37
33
|
setInnerValue = _useState2[1];
|
|
34
|
+
var value = reactNumberFormat.numericFormatter(String(outerValue !== null && outerValue !== void 0 ? outerValue : innerValue), {
|
|
35
|
+
thousandSeparator: thousandSeparator,
|
|
36
|
+
decimalScale: decimalScale,
|
|
37
|
+
decimalSeparator: decimalSeparator
|
|
38
|
+
});
|
|
38
39
|
var handleChangeValue = function handleChangeValue(values, sourceInfo) {
|
|
40
|
+
var changeEvent = sourceInfo.event;
|
|
41
|
+
setInnerValue(values.value);
|
|
39
42
|
if (onChange) {
|
|
40
|
-
var changeEvent = sourceInfo.event;
|
|
41
|
-
setInnerValue(values.value);
|
|
42
43
|
onChange(changeEvent, values);
|
|
43
44
|
}
|
|
44
45
|
};
|
|
@@ -64,15 +65,8 @@ var composeNumberFormat = function composeNumberFormat(InputComponent) {
|
|
|
64
65
|
onPaste(event);
|
|
65
66
|
}
|
|
66
67
|
};
|
|
67
|
-
React.useEffect(function () {
|
|
68
|
-
setInnerValue(value ? reactNumberFormat.numericFormatter(String(value), {
|
|
69
|
-
thousandSeparator: thousandSeparator,
|
|
70
|
-
decimalScale: decimalScale,
|
|
71
|
-
decimalSeparator: decimalSeparator
|
|
72
|
-
}) : '');
|
|
73
|
-
}, [value]);
|
|
74
68
|
return /*#__PURE__*/React__default.default.createElement(reactNumberFormat.NumericFormat, _rollupPluginBabelHelpers.extends({
|
|
75
|
-
value:
|
|
69
|
+
value: value,
|
|
76
70
|
thousandSeparator: thousandSeparator,
|
|
77
71
|
decimalScale: decimalScale,
|
|
78
72
|
decimalSeparator: decimalSeparator,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"NumberFormat.js","sources":["../../../src/components/NumberFormat/NumberFormat.tsx"],"sourcesContent":["import React, { forwardRef,
|
|
1
|
+
{"version":3,"file":"NumberFormat.js","sources":["../../../src/components/NumberFormat/NumberFormat.tsx"],"sourcesContent":["import React, { forwardRef, useRef, useState } from 'react';\nimport type { ChangeEvent, FC, ClipboardEvent } from 'react';\nimport { NumericFormat, numericFormatter } from 'react-number-format';\nimport type { NumberFormatValues, SourceInfo } from 'react-number-format';\nimport { useForkRef } from '@salutejs/plasma-core';\n\nimport type {\n CustomNumberFormatProps,\n CustomNumericFormatProps,\n InputComponentOmittedProps,\n} from './NumberFormat.types';\n\nexport const composeNumberFormat = <T extends InputComponentOmittedProps>(InputComponent: FC<T>) => {\n return forwardRef<HTMLInputElement, T & CustomNumberFormatProps & CustomNumericFormatProps>(\n (\n {\n thousandSeparator = ' ',\n decimalScale = 3,\n decimalSeparator = '.',\n disabled,\n value: outerValue,\n onChange,\n onPaste,\n ...rest\n },\n outerRef,\n ) => {\n const inputRef = useRef<HTMLInputElement>(null);\n const inputForkRef = useForkRef(inputRef, outerRef);\n\n const [innerValue, setInnerValue] = useState('');\n\n const value = numericFormatter(String(outerValue ?? innerValue), {\n thousandSeparator,\n decimalScale,\n decimalSeparator,\n });\n\n const handleChangeValue = (values: NumberFormatValues, sourceInfo: SourceInfo) => {\n const changeEvent = sourceInfo.event as ChangeEvent<HTMLInputElement>;\n setInnerValue(values.value);\n\n if (onChange) {\n onChange(changeEvent, values);\n }\n };\n\n const handlePaste = (event: ClipboardEvent<HTMLInputElement>) => {\n if (disabled) {\n return;\n }\n\n if (decimalSeparator !== '.' && inputRef.current) {\n if (!Number.isNaN(Number(event.clipboardData.getData('text/plain')))) {\n event.preventDefault();\n\n const pastedValue = event.clipboardData.getData('text/plain').replace('.', decimalSeparator);\n const input = event.target as HTMLInputElement;\n const startPos = input.selectionStart || 0;\n\n const newCursorPos = startPos + pastedValue.length;\n setInnerValue(pastedValue);\n\n setTimeout(() => {\n inputRef.current?.setSelectionRange(newCursorPos, newCursorPos);\n }, 10);\n }\n }\n\n if (onPaste) {\n onPaste(event);\n }\n };\n\n return (\n <NumericFormat\n value={value}\n thousandSeparator={thousandSeparator}\n decimalScale={decimalScale}\n decimalSeparator={decimalSeparator}\n customInput={InputComponent}\n getInputRef={inputForkRef}\n _textEllipsisDisable\n onValueChange={handleChangeValue}\n onPaste={handlePaste}\n {...rest}\n />\n );\n },\n );\n};\n"],"names":["composeNumberFormat","InputComponent","forwardRef","_ref","outerRef","_ref$thousandSeparato","thousandSeparator","_ref$decimalScale","decimalScale","_ref$decimalSeparator","decimalSeparator","disabled","outerValue","value","onChange","onPaste","rest","_objectWithoutProperties","_excluded","inputRef","useRef","inputForkRef","useForkRef","_useState","useState","_useState2","_slicedToArray","innerValue","setInnerValue","numericFormatter","String","handleChangeValue","values","sourceInfo","changeEvent","event","handlePaste","current","Number","isNaN","clipboardData","getData","preventDefault","pastedValue","replace","input","target","startPos","selectionStart","newCursorPos","length","setTimeout","_inputRef$current","setSelectionRange","React","createElement","NumericFormat","_extends","customInput","getInputRef","_textEllipsisDisable","onValueChange"],"mappings":"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"}
|
|
@@ -155,7 +155,7 @@ function _unsupported_iterable_to_array(o, minLen) {
|
|
|
155
155
|
}
|
|
156
156
|
var composeNumberFormat = function(InputComponent) {
|
|
157
157
|
return /*#__PURE__*/ (0, _react.forwardRef)(function(_param, outerRef) {
|
|
158
|
-
var _param_thousandSeparator = _param.thousandSeparator, thousandSeparator = _param_thousandSeparator === void 0 ? ' ' : _param_thousandSeparator, _param_decimalScale = _param.decimalScale, decimalScale = _param_decimalScale === void 0 ? 3 : _param_decimalScale, _param_decimalSeparator = _param.decimalSeparator, decimalSeparator = _param_decimalSeparator === void 0 ? '.' : _param_decimalSeparator, disabled = _param.disabled,
|
|
158
|
+
var _param_thousandSeparator = _param.thousandSeparator, thousandSeparator = _param_thousandSeparator === void 0 ? ' ' : _param_thousandSeparator, _param_decimalScale = _param.decimalScale, decimalScale = _param_decimalScale === void 0 ? 3 : _param_decimalScale, _param_decimalSeparator = _param.decimalSeparator, decimalSeparator = _param_decimalSeparator === void 0 ? '.' : _param_decimalSeparator, disabled = _param.disabled, outerValue = _param.value, onChange = _param.onChange, onPaste = _param.onPaste, rest = _object_without_properties(_param, [
|
|
159
159
|
"thousandSeparator",
|
|
160
160
|
"decimalScale",
|
|
161
161
|
"decimalSeparator",
|
|
@@ -166,15 +166,16 @@ var composeNumberFormat = function(InputComponent) {
|
|
|
166
166
|
]);
|
|
167
167
|
var inputRef = (0, _react.useRef)(null);
|
|
168
168
|
var inputForkRef = (0, _plasmacore.useForkRef)(inputRef, outerRef);
|
|
169
|
-
var _useState = _sliced_to_array((0, _react.useState)(
|
|
169
|
+
var _useState = _sliced_to_array((0, _react.useState)(''), 2), innerValue = _useState[0], setInnerValue = _useState[1];
|
|
170
|
+
var value = (0, _reactnumberformat.numericFormatter)(String(outerValue !== null && outerValue !== void 0 ? outerValue : innerValue), {
|
|
170
171
|
thousandSeparator: thousandSeparator,
|
|
171
172
|
decimalScale: decimalScale,
|
|
172
173
|
decimalSeparator: decimalSeparator
|
|
173
|
-
})
|
|
174
|
+
});
|
|
174
175
|
var handleChangeValue = function(values, sourceInfo) {
|
|
176
|
+
var changeEvent = sourceInfo.event;
|
|
177
|
+
setInnerValue(values.value);
|
|
175
178
|
if (onChange) {
|
|
176
|
-
var changeEvent = sourceInfo.event;
|
|
177
|
-
setInnerValue(values.value);
|
|
178
179
|
onChange(changeEvent, values);
|
|
179
180
|
}
|
|
180
181
|
};
|
|
@@ -200,17 +201,8 @@ var composeNumberFormat = function(InputComponent) {
|
|
|
200
201
|
onPaste(event);
|
|
201
202
|
}
|
|
202
203
|
};
|
|
203
|
-
(0, _react.useEffect)(function() {
|
|
204
|
-
setInnerValue(value ? (0, _reactnumberformat.numericFormatter)(String(value), {
|
|
205
|
-
thousandSeparator: thousandSeparator,
|
|
206
|
-
decimalScale: decimalScale,
|
|
207
|
-
decimalSeparator: decimalSeparator
|
|
208
|
-
}) : '');
|
|
209
|
-
}, [
|
|
210
|
-
value
|
|
211
|
-
]);
|
|
212
204
|
return /*#__PURE__*/ _react.default.createElement(_reactnumberformat.NumericFormat, _object_spread({
|
|
213
|
-
value:
|
|
205
|
+
value: value,
|
|
214
206
|
thousandSeparator: thousandSeparator,
|
|
215
207
|
decimalScale: decimalScale,
|
|
216
208
|
decimalSeparator: decimalSeparator,
|
|
@@ -99,12 +99,12 @@ function _unsupported_iterable_to_array(o, minLen) {
|
|
|
99
99
|
if (n === "Map" || n === "Set") return Array.from(n);
|
|
100
100
|
if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array(o, minLen);
|
|
101
101
|
}
|
|
102
|
-
import React, { forwardRef,
|
|
102
|
+
import React, { forwardRef, useRef, useState } from "react";
|
|
103
103
|
import { NumericFormat, numericFormatter } from "react-number-format";
|
|
104
104
|
import { useForkRef } from "@salutejs/plasma-core";
|
|
105
105
|
export var composeNumberFormat = function(InputComponent) {
|
|
106
106
|
return /*#__PURE__*/ forwardRef(function(_param, outerRef) {
|
|
107
|
-
var _param_thousandSeparator = _param.thousandSeparator, thousandSeparator = _param_thousandSeparator === void 0 ? ' ' : _param_thousandSeparator, _param_decimalScale = _param.decimalScale, decimalScale = _param_decimalScale === void 0 ? 3 : _param_decimalScale, _param_decimalSeparator = _param.decimalSeparator, decimalSeparator = _param_decimalSeparator === void 0 ? '.' : _param_decimalSeparator, disabled = _param.disabled,
|
|
107
|
+
var _param_thousandSeparator = _param.thousandSeparator, thousandSeparator = _param_thousandSeparator === void 0 ? ' ' : _param_thousandSeparator, _param_decimalScale = _param.decimalScale, decimalScale = _param_decimalScale === void 0 ? 3 : _param_decimalScale, _param_decimalSeparator = _param.decimalSeparator, decimalSeparator = _param_decimalSeparator === void 0 ? '.' : _param_decimalSeparator, disabled = _param.disabled, outerValue = _param.value, onChange = _param.onChange, onPaste = _param.onPaste, rest = _object_without_properties(_param, [
|
|
108
108
|
"thousandSeparator",
|
|
109
109
|
"decimalScale",
|
|
110
110
|
"decimalSeparator",
|
|
@@ -115,15 +115,16 @@ export var composeNumberFormat = function(InputComponent) {
|
|
|
115
115
|
]);
|
|
116
116
|
var inputRef = useRef(null);
|
|
117
117
|
var inputForkRef = useForkRef(inputRef, outerRef);
|
|
118
|
-
var _useState = _sliced_to_array(useState(
|
|
118
|
+
var _useState = _sliced_to_array(useState(''), 2), innerValue = _useState[0], setInnerValue = _useState[1];
|
|
119
|
+
var value = numericFormatter(String(outerValue !== null && outerValue !== void 0 ? outerValue : innerValue), {
|
|
119
120
|
thousandSeparator: thousandSeparator,
|
|
120
121
|
decimalScale: decimalScale,
|
|
121
122
|
decimalSeparator: decimalSeparator
|
|
122
|
-
})
|
|
123
|
+
});
|
|
123
124
|
var handleChangeValue = function(values, sourceInfo) {
|
|
125
|
+
var changeEvent = sourceInfo.event;
|
|
126
|
+
setInnerValue(values.value);
|
|
124
127
|
if (onChange) {
|
|
125
|
-
var changeEvent = sourceInfo.event;
|
|
126
|
-
setInnerValue(values.value);
|
|
127
128
|
onChange(changeEvent, values);
|
|
128
129
|
}
|
|
129
130
|
};
|
|
@@ -149,17 +150,8 @@ export var composeNumberFormat = function(InputComponent) {
|
|
|
149
150
|
onPaste(event);
|
|
150
151
|
}
|
|
151
152
|
};
|
|
152
|
-
useEffect(function() {
|
|
153
|
-
setInnerValue(value ? numericFormatter(String(value), {
|
|
154
|
-
thousandSeparator: thousandSeparator,
|
|
155
|
-
decimalScale: decimalScale,
|
|
156
|
-
decimalSeparator: decimalSeparator
|
|
157
|
-
}) : '');
|
|
158
|
-
}, [
|
|
159
|
-
value
|
|
160
|
-
]);
|
|
161
153
|
return /*#__PURE__*/ React.createElement(NumericFormat, _object_spread({
|
|
162
|
-
value:
|
|
154
|
+
value: value,
|
|
163
155
|
thousandSeparator: thousandSeparator,
|
|
164
156
|
decimalScale: decimalScale,
|
|
165
157
|
decimalSeparator: decimalSeparator,
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { objectWithoutProperties as _objectWithoutProperties, slicedToArray as _slicedToArray, extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
|
|
2
|
-
import React, { forwardRef, useRef, useState
|
|
2
|
+
import React, { forwardRef, useRef, useState } from 'react';
|
|
3
3
|
import { numericFormatter, NumericFormat } from 'react-number-format';
|
|
4
4
|
import { useForkRef } from '@salutejs/plasma-core';
|
|
5
5
|
|
|
@@ -13,24 +13,25 @@ var composeNumberFormat = function composeNumberFormat(InputComponent) {
|
|
|
13
13
|
_ref$decimalSeparator = _ref.decimalSeparator,
|
|
14
14
|
decimalSeparator = _ref$decimalSeparator === void 0 ? '.' : _ref$decimalSeparator,
|
|
15
15
|
disabled = _ref.disabled,
|
|
16
|
-
|
|
16
|
+
outerValue = _ref.value,
|
|
17
17
|
onChange = _ref.onChange,
|
|
18
18
|
onPaste = _ref.onPaste,
|
|
19
19
|
rest = _objectWithoutProperties(_ref, _excluded);
|
|
20
20
|
var inputRef = useRef(null);
|
|
21
21
|
var inputForkRef = useForkRef(inputRef, outerRef);
|
|
22
|
-
var _useState = useState(
|
|
23
|
-
thousandSeparator: thousandSeparator,
|
|
24
|
-
decimalScale: decimalScale,
|
|
25
|
-
decimalSeparator: decimalSeparator
|
|
26
|
-
}) : ''),
|
|
22
|
+
var _useState = useState(''),
|
|
27
23
|
_useState2 = _slicedToArray(_useState, 2),
|
|
28
24
|
innerValue = _useState2[0],
|
|
29
25
|
setInnerValue = _useState2[1];
|
|
26
|
+
var value = numericFormatter(String(outerValue !== null && outerValue !== void 0 ? outerValue : innerValue), {
|
|
27
|
+
thousandSeparator: thousandSeparator,
|
|
28
|
+
decimalScale: decimalScale,
|
|
29
|
+
decimalSeparator: decimalSeparator
|
|
30
|
+
});
|
|
30
31
|
var handleChangeValue = function handleChangeValue(values, sourceInfo) {
|
|
32
|
+
var changeEvent = sourceInfo.event;
|
|
33
|
+
setInnerValue(values.value);
|
|
31
34
|
if (onChange) {
|
|
32
|
-
var changeEvent = sourceInfo.event;
|
|
33
|
-
setInnerValue(values.value);
|
|
34
35
|
onChange(changeEvent, values);
|
|
35
36
|
}
|
|
36
37
|
};
|
|
@@ -56,15 +57,8 @@ var composeNumberFormat = function composeNumberFormat(InputComponent) {
|
|
|
56
57
|
onPaste(event);
|
|
57
58
|
}
|
|
58
59
|
};
|
|
59
|
-
useEffect(function () {
|
|
60
|
-
setInnerValue(value ? numericFormatter(String(value), {
|
|
61
|
-
thousandSeparator: thousandSeparator,
|
|
62
|
-
decimalScale: decimalScale,
|
|
63
|
-
decimalSeparator: decimalSeparator
|
|
64
|
-
}) : '');
|
|
65
|
-
}, [value]);
|
|
66
60
|
return /*#__PURE__*/React.createElement(NumericFormat, _extends({
|
|
67
|
-
value:
|
|
61
|
+
value: value,
|
|
68
62
|
thousandSeparator: thousandSeparator,
|
|
69
63
|
decimalScale: decimalScale,
|
|
70
64
|
decimalSeparator: decimalSeparator,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"NumberFormat.js","sources":["../../../src/components/NumberFormat/NumberFormat.tsx"],"sourcesContent":["import React, { forwardRef,
|
|
1
|
+
{"version":3,"file":"NumberFormat.js","sources":["../../../src/components/NumberFormat/NumberFormat.tsx"],"sourcesContent":["import React, { forwardRef, useRef, useState } from 'react';\nimport type { ChangeEvent, FC, ClipboardEvent } from 'react';\nimport { NumericFormat, numericFormatter } from 'react-number-format';\nimport type { NumberFormatValues, SourceInfo } from 'react-number-format';\nimport { useForkRef } from '@salutejs/plasma-core';\n\nimport type {\n CustomNumberFormatProps,\n CustomNumericFormatProps,\n InputComponentOmittedProps,\n} from './NumberFormat.types';\n\nexport const composeNumberFormat = <T extends InputComponentOmittedProps>(InputComponent: FC<T>) => {\n return forwardRef<HTMLInputElement, T & CustomNumberFormatProps & CustomNumericFormatProps>(\n (\n {\n thousandSeparator = ' ',\n decimalScale = 3,\n decimalSeparator = '.',\n disabled,\n value: outerValue,\n onChange,\n onPaste,\n ...rest\n },\n outerRef,\n ) => {\n const inputRef = useRef<HTMLInputElement>(null);\n const inputForkRef = useForkRef(inputRef, outerRef);\n\n const [innerValue, setInnerValue] = useState('');\n\n const value = numericFormatter(String(outerValue ?? innerValue), {\n thousandSeparator,\n decimalScale,\n decimalSeparator,\n });\n\n const handleChangeValue = (values: NumberFormatValues, sourceInfo: SourceInfo) => {\n const changeEvent = sourceInfo.event as ChangeEvent<HTMLInputElement>;\n setInnerValue(values.value);\n\n if (onChange) {\n onChange(changeEvent, values);\n }\n };\n\n const handlePaste = (event: ClipboardEvent<HTMLInputElement>) => {\n if (disabled) {\n return;\n }\n\n if (decimalSeparator !== '.' && inputRef.current) {\n if (!Number.isNaN(Number(event.clipboardData.getData('text/plain')))) {\n event.preventDefault();\n\n const pastedValue = event.clipboardData.getData('text/plain').replace('.', decimalSeparator);\n const input = event.target as HTMLInputElement;\n const startPos = input.selectionStart || 0;\n\n const newCursorPos = startPos + pastedValue.length;\n setInnerValue(pastedValue);\n\n setTimeout(() => {\n inputRef.current?.setSelectionRange(newCursorPos, newCursorPos);\n }, 10);\n }\n }\n\n if (onPaste) {\n onPaste(event);\n }\n };\n\n return (\n <NumericFormat\n value={value}\n thousandSeparator={thousandSeparator}\n decimalScale={decimalScale}\n decimalSeparator={decimalSeparator}\n customInput={InputComponent}\n getInputRef={inputForkRef}\n _textEllipsisDisable\n onValueChange={handleChangeValue}\n onPaste={handlePaste}\n {...rest}\n />\n );\n },\n );\n};\n"],"names":["composeNumberFormat","InputComponent","forwardRef","_ref","outerRef","_ref$thousandSeparato","thousandSeparator","_ref$decimalScale","decimalScale","_ref$decimalSeparator","decimalSeparator","disabled","outerValue","value","onChange","onPaste","rest","_objectWithoutProperties","_excluded","inputRef","useRef","inputForkRef","useForkRef","_useState","useState","_useState2","_slicedToArray","innerValue","setInnerValue","numericFormatter","String","handleChangeValue","values","sourceInfo","changeEvent","event","handlePaste","current","Number","isNaN","clipboardData","getData","preventDefault","pastedValue","replace","input","target","startPos","selectionStart","newCursorPos","length","setTimeout","_inputRef$current","setSelectionRange","React","createElement","NumericFormat","_extends","customInput","getInputRef","_textEllipsisDisable","onValueChange"],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@salutejs/plasma-new-hope",
|
|
3
|
-
"version": "0.330.0-canary.2050.
|
|
3
|
+
"version": "0.330.0-canary.2050.16069627196.0",
|
|
4
4
|
"description": "Salute Design System blueprint",
|
|
5
5
|
"main": "cjs/index.js",
|
|
6
6
|
"module": "es/index.js",
|
|
@@ -137,5 +137,5 @@
|
|
|
137
137
|
"sideEffects": [
|
|
138
138
|
"*.css"
|
|
139
139
|
],
|
|
140
|
-
"gitHead": "
|
|
140
|
+
"gitHead": "6922f8da6aba9a636c9c5250fa13433ce72fbe7a"
|
|
141
141
|
}
|
|
@@ -155,7 +155,7 @@ function _unsupported_iterable_to_array(o, minLen) {
|
|
|
155
155
|
}
|
|
156
156
|
var composeNumberFormat = function(InputComponent) {
|
|
157
157
|
return /*#__PURE__*/ (0, _react.forwardRef)(function(_param, outerRef) {
|
|
158
|
-
var _param_thousandSeparator = _param.thousandSeparator, thousandSeparator = _param_thousandSeparator === void 0 ? ' ' : _param_thousandSeparator, _param_decimalScale = _param.decimalScale, decimalScale = _param_decimalScale === void 0 ? 3 : _param_decimalScale, _param_decimalSeparator = _param.decimalSeparator, decimalSeparator = _param_decimalSeparator === void 0 ? '.' : _param_decimalSeparator, disabled = _param.disabled,
|
|
158
|
+
var _param_thousandSeparator = _param.thousandSeparator, thousandSeparator = _param_thousandSeparator === void 0 ? ' ' : _param_thousandSeparator, _param_decimalScale = _param.decimalScale, decimalScale = _param_decimalScale === void 0 ? 3 : _param_decimalScale, _param_decimalSeparator = _param.decimalSeparator, decimalSeparator = _param_decimalSeparator === void 0 ? '.' : _param_decimalSeparator, disabled = _param.disabled, outerValue = _param.value, onChange = _param.onChange, onPaste = _param.onPaste, rest = _object_without_properties(_param, [
|
|
159
159
|
"thousandSeparator",
|
|
160
160
|
"decimalScale",
|
|
161
161
|
"decimalSeparator",
|
|
@@ -166,15 +166,16 @@ var composeNumberFormat = function(InputComponent) {
|
|
|
166
166
|
]);
|
|
167
167
|
var inputRef = (0, _react.useRef)(null);
|
|
168
168
|
var inputForkRef = (0, _plasmacore.useForkRef)(inputRef, outerRef);
|
|
169
|
-
var _useState = _sliced_to_array((0, _react.useState)(
|
|
169
|
+
var _useState = _sliced_to_array((0, _react.useState)(''), 2), innerValue = _useState[0], setInnerValue = _useState[1];
|
|
170
|
+
var value = (0, _reactnumberformat.numericFormatter)(String(outerValue !== null && outerValue !== void 0 ? outerValue : innerValue), {
|
|
170
171
|
thousandSeparator: thousandSeparator,
|
|
171
172
|
decimalScale: decimalScale,
|
|
172
173
|
decimalSeparator: decimalSeparator
|
|
173
|
-
})
|
|
174
|
+
});
|
|
174
175
|
var handleChangeValue = function(values, sourceInfo) {
|
|
176
|
+
var changeEvent = sourceInfo.event;
|
|
177
|
+
setInnerValue(values.value);
|
|
175
178
|
if (onChange) {
|
|
176
|
-
var changeEvent = sourceInfo.event;
|
|
177
|
-
setInnerValue(values.value);
|
|
178
179
|
onChange(changeEvent, values);
|
|
179
180
|
}
|
|
180
181
|
};
|
|
@@ -200,17 +201,8 @@ var composeNumberFormat = function(InputComponent) {
|
|
|
200
201
|
onPaste(event);
|
|
201
202
|
}
|
|
202
203
|
};
|
|
203
|
-
(0, _react.useEffect)(function() {
|
|
204
|
-
setInnerValue(value ? (0, _reactnumberformat.numericFormatter)(String(value), {
|
|
205
|
-
thousandSeparator: thousandSeparator,
|
|
206
|
-
decimalScale: decimalScale,
|
|
207
|
-
decimalSeparator: decimalSeparator
|
|
208
|
-
}) : '');
|
|
209
|
-
}, [
|
|
210
|
-
value
|
|
211
|
-
]);
|
|
212
204
|
return /*#__PURE__*/ _react.default.createElement(_reactnumberformat.NumericFormat, _object_spread({
|
|
213
|
-
value:
|
|
205
|
+
value: value,
|
|
214
206
|
thousandSeparator: thousandSeparator,
|
|
215
207
|
decimalScale: decimalScale,
|
|
216
208
|
decimalSeparator: decimalSeparator,
|
|
@@ -99,12 +99,12 @@ function _unsupported_iterable_to_array(o, minLen) {
|
|
|
99
99
|
if (n === "Map" || n === "Set") return Array.from(n);
|
|
100
100
|
if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array(o, minLen);
|
|
101
101
|
}
|
|
102
|
-
import React, { forwardRef,
|
|
102
|
+
import React, { forwardRef, useRef, useState } from "react";
|
|
103
103
|
import { NumericFormat, numericFormatter } from "react-number-format";
|
|
104
104
|
import { useForkRef } from "@salutejs/plasma-core";
|
|
105
105
|
export var composeNumberFormat = function(InputComponent) {
|
|
106
106
|
return /*#__PURE__*/ forwardRef(function(_param, outerRef) {
|
|
107
|
-
var _param_thousandSeparator = _param.thousandSeparator, thousandSeparator = _param_thousandSeparator === void 0 ? ' ' : _param_thousandSeparator, _param_decimalScale = _param.decimalScale, decimalScale = _param_decimalScale === void 0 ? 3 : _param_decimalScale, _param_decimalSeparator = _param.decimalSeparator, decimalSeparator = _param_decimalSeparator === void 0 ? '.' : _param_decimalSeparator, disabled = _param.disabled,
|
|
107
|
+
var _param_thousandSeparator = _param.thousandSeparator, thousandSeparator = _param_thousandSeparator === void 0 ? ' ' : _param_thousandSeparator, _param_decimalScale = _param.decimalScale, decimalScale = _param_decimalScale === void 0 ? 3 : _param_decimalScale, _param_decimalSeparator = _param.decimalSeparator, decimalSeparator = _param_decimalSeparator === void 0 ? '.' : _param_decimalSeparator, disabled = _param.disabled, outerValue = _param.value, onChange = _param.onChange, onPaste = _param.onPaste, rest = _object_without_properties(_param, [
|
|
108
108
|
"thousandSeparator",
|
|
109
109
|
"decimalScale",
|
|
110
110
|
"decimalSeparator",
|
|
@@ -115,15 +115,16 @@ export var composeNumberFormat = function(InputComponent) {
|
|
|
115
115
|
]);
|
|
116
116
|
var inputRef = useRef(null);
|
|
117
117
|
var inputForkRef = useForkRef(inputRef, outerRef);
|
|
118
|
-
var _useState = _sliced_to_array(useState(
|
|
118
|
+
var _useState = _sliced_to_array(useState(''), 2), innerValue = _useState[0], setInnerValue = _useState[1];
|
|
119
|
+
var value = numericFormatter(String(outerValue !== null && outerValue !== void 0 ? outerValue : innerValue), {
|
|
119
120
|
thousandSeparator: thousandSeparator,
|
|
120
121
|
decimalScale: decimalScale,
|
|
121
122
|
decimalSeparator: decimalSeparator
|
|
122
|
-
})
|
|
123
|
+
});
|
|
123
124
|
var handleChangeValue = function(values, sourceInfo) {
|
|
125
|
+
var changeEvent = sourceInfo.event;
|
|
126
|
+
setInnerValue(values.value);
|
|
124
127
|
if (onChange) {
|
|
125
|
-
var changeEvent = sourceInfo.event;
|
|
126
|
-
setInnerValue(values.value);
|
|
127
128
|
onChange(changeEvent, values);
|
|
128
129
|
}
|
|
129
130
|
};
|
|
@@ -149,17 +150,8 @@ export var composeNumberFormat = function(InputComponent) {
|
|
|
149
150
|
onPaste(event);
|
|
150
151
|
}
|
|
151
152
|
};
|
|
152
|
-
useEffect(function() {
|
|
153
|
-
setInnerValue(value ? numericFormatter(String(value), {
|
|
154
|
-
thousandSeparator: thousandSeparator,
|
|
155
|
-
decimalScale: decimalScale,
|
|
156
|
-
decimalSeparator: decimalSeparator
|
|
157
|
-
}) : '');
|
|
158
|
-
}, [
|
|
159
|
-
value
|
|
160
|
-
]);
|
|
161
153
|
return /*#__PURE__*/ React.createElement(NumericFormat, _object_spread({
|
|
162
|
-
value:
|
|
154
|
+
value: value,
|
|
163
155
|
thousandSeparator: thousandSeparator,
|
|
164
156
|
decimalScale: decimalScale,
|
|
165
157
|
decimalSeparator: decimalSeparator,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"NumberFormat.d.ts","sourceRoot":"","sources":["../../../src/components/NumberFormat/NumberFormat.tsx"],"names":[],"mappings":"AAAA,OAAO,
|
|
1
|
+
{"version":3,"file":"NumberFormat.d.ts","sourceRoot":"","sources":["../../../src/components/NumberFormat/NumberFormat.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAuC,MAAM,OAAO,CAAC;AAC5D,OAAO,KAAK,EAAE,WAAW,EAAE,EAAE,EAAkB,MAAM,OAAO,CAAC;AAE7D,OAAO,KAAK,EAAE,kBAAkB,EAAc,MAAM,qBAAqB,CAAC;AAG1E,OAAO,KAAK,EAER,wBAAwB,EACxB,0BAA0B,EAC7B,MAAM,sBAAsB,CAAC;AAE9B,eAAO,MAAM,mBAAmB,GAAI,CAAC,SAAS,0BAA0B,kBAAkB,EAAE,CAAC,CAAC,CAAC;;;;;;;;;qBAgDvE,CAAZ,uCAAuC,CAAC;mGA8BnD,CAAC"}
|