@alfalab/core-components-amount-input - npm Package Compare versions

Comparing version 7.4.8 to 7.5.0

Component.d.ts

@@ -12,2 +12,8 @@ /// <reference types="react" />
     /**
+     * default - не отображаем копейки, если их значение 0
+     * withZeroMinorPart - отображаем копейки, даже если их значение равно 0
+     * @default default
+     */
+    view?: 'default' | 'withZeroMinorPart';
+    /**
      * Валюта
@@ -22,2 +28,3 @@ */
      * Максимальное число знаков до запятой
+     * max 15
      */
@@ -67,2 +74,8 @@ integerLength?: number;
     /**
+     * default - не отображаем копейки, если их значение 0
+     * withZeroMinorPart - отображаем копейки, даже если их значение равно 0
+     * @default default
+     */
+    view?: "default" | "withZeroMinorPart" | undefined;
+    /**
      * Валюта
@@ -77,2 +90,3 @@ */
      * Максимальное число знаков до запятой
+     * max 15
      */
@@ -79,0 +93,0 @@ integerLength?: number | undefined;

Component.js

@@ -18,9 +18,9 @@ 'use strict';
 
-var defaultColors = {"minorPartAndCurrency":"amount-input__minorPartAndCurrency_h1cko"};
+var defaultColors = {"minorPartAndCurrency":"amount-input__minorPartAndCurrency_1fbkr"};
 require('./default.css')
 
-var styles = {"container":"amount-input__container_lvbqd","bold":"amount-input__bold_lvbqd","input":"amount-input__input_lvbqd","suffixContainer":"amount-input__suffixContainer_lvbqd","filled":"amount-input__filled_lvbqd"};
+var styles = {"container":"amount-input__container_1ohcr","bold":"amount-input__bold_1ohcr","input":"amount-input__input_1ohcr","suffixContainer":"amount-input__suffixContainer_1ohcr","filled":"amount-input__filled_1ohcr"};
 require('./index.css')
 
-var invertedColors = {"minorPartAndCurrency":"amount-input__minorPartAndCurrency_90d9n"};
+var invertedColors = {"minorPartAndCurrency":"amount-input__minorPartAndCurrency_17alg"};
 require('./inverted.css')
@@ -41,15 +41,17 @@
     var _b;
-    var _c = _a.value, value = _c === void 0 ? null : _c, _d = _a.integerLength, integerLength = _d === void 0 ? 9 : _d, _e = _a.minority, minority = _e === void 0 ? 100 : _e, _f = _a.currency, currency = _f === void 0 ? 'RUR' : _f, _g = _a.suffix, suffix = _g === void 0 ? currency : _g, _h = _a.placeholder, placeholder = _h === void 0 ? "0\u2009".concat(suffix === currency ? utils.getCurrencySymbol(currency) || '' : suffix) : _h, _j = _a.integersOnly, integersOnly = _j === void 0 ? false : _j, _k = _a.positiveOnly, positiveOnly = _k === void 0 ? true : _k, _l = _a.bold, bold = _l === void 0 ? true : _l, _m = _a.colors, colors = _m === void 0 ? 'default' : _m, className = _a.className, focusedClassName = _a.focusedClassName, dataTestId = _a.dataTestId, _o = _a.clear, clear = _o === void 0 ? false : _o, onChange = _a.onChange, onClear = _a.onClear, _p = _a.breakpoint, breakpoint = _p === void 0 ? 1024 : _p, restProps = tslib.__rest(_a, ["value", "integerLength", "minority", "currency", "suffix", "placeholder", "integersOnly", "positiveOnly", "bold", "colors", "className", "focusedClassName", "dataTestId", "clear", "onChange", "onClear", "breakpoint"]);
-    var getFormattedAmount = React.useCallback(function () {
-        if (value === '' || value === null || value === '-')
+    var _c = _a.view, view = _c === void 0 ? 'default' : _c, _d = _a.value, value = _d === void 0 ? null : _d, _e = _a.integerLength, integerLengthProp = _e === void 0 ? 9 : _e, _f = _a.minority, minority = _f === void 0 ? 100 : _f, _g = _a.currency, currency = _g === void 0 ? 'RUR' : _g, _h = _a.suffix, suffix = _h === void 0 ? currency : _h, _j = _a.placeholder, placeholder = _j === void 0 ? "0\u2009".concat(suffix === currency ? utils.getCurrencySymbol(currency) || '' : suffix) : _j, _k = _a.integersOnly, integersOnly = _k === void 0 ? false : _k, _l = _a.positiveOnly, positiveOnly = _l === void 0 ? true : _l, _m = _a.bold, bold = _m === void 0 ? true : _m, _o = _a.colors, colors = _o === void 0 ? 'default' : _o, className = _a.className, focusedClassName = _a.focusedClassName, dataTestId = _a.dataTestId, _p = _a.clear, clear = _p === void 0 ? false : _p, onChange = _a.onChange, onClear = _a.onClear, onBlur = _a.onBlur, _q = _a.breakpoint, breakpoint = _q === void 0 ? 1024 : _q, restProps = tslib.__rest(_a, ["view", "value", "integerLength", "minority", "currency", "suffix", "placeholder", "integersOnly", "positiveOnly", "bold", "colors", "className", "focusedClassName", "dataTestId", "clear", "onChange", "onClear", "onBlur", "breakpoint"]);
+    var integerLength = Math.min(integerLengthProp, 15);
+    var getFormattedAmount = React.useCallback(function (val) {
+        if (val === '' || val === null || val === '-')
             return '';
         return utils.formatAmount({
-            value: +value,
+            value: +val,
             currency: currency,
             minority: minority,
-            view: 'default',
+            view: view,
             negativeSymbol: 'hyphen-minus',
         }).formatted;
-    }, [currency, minority, value]);
-    var _q = React.useState(getFormattedAmount()), inputValue = _q[0], setInputValue = _q[1];
+    }, [currency, minority, view]);
+    var _r = React.useState(function () { return getFormattedAmount(value); }), inputValue = _r[0], setInputValue = _r[1];
+    var _s = inputValue.split(','), majorPart = _s[0], minorPart = _s[1];
     var currencySymbol = utils.getCurrencySymbol(currency);
@@ -59,7 +61,6 @@ React.useEffect(function () {
         if (currentAmountValue !== value) {
-            return setInputValue(getFormattedAmount());
+            setInputValue(getFormattedAmount(value));
         }
-        return function () { return undefined; };
         // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [getFormattedAmount]);
+    }, [value, getFormattedAmount]);
     var handleChange = function (e) {
@@ -103,8 +104,6 @@ var input = e.target;
             setInputValue(newFormattedValue);
-            if (onChange) {
-                onChange(e, {
-                    value: utils_index.getAmountValueFromStr(newFormattedValue, minority),
-                    valueString: newFormattedValue,
-                });
-            }
+            onChange === null || onChange === void 0 ? void 0 : onChange(e, {
+                value: utils_index.getAmountValueFromStr(newFormattedValue, minority),
+                valueString: newFormattedValue,
+            });
         }
@@ -126,3 +125,18 @@ else {
     }, [onClear]);
-    var _r = inputValue.split(','), majorPart = _r[0], minorPart = _r[1];
+    var handleBlur = function (event) {
+        if (view === 'withZeroMinorPart') {
+            var newValue = utils_index.getAmountValueFromStr(inputValue, minority);
+            if (newValue !== null) {
+                var formatted = getFormattedAmount(newValue);
+                if (formatted !== inputValue) {
+                    setInputValue(formatted);
+                    onChange === null || onChange === void 0 ? void 0 : onChange(event, {
+                        value: newValue,
+                        valueString: formatted,
+                    });
+                }
+            }
+        }
+        onBlur === null || onBlur === void 0 ? void 0 : onBlur(event);
+    };
     return (React__default.default.createElement("div", { className: cn__default.default(styles.container, (_b = {},
@@ -137,5 +151,5 @@ _b[styles.bold] = bold,
                     utils.THINSP,
-                    suffix === currency ? currencySymbol : suffix)), suffixContainerClassName: styles.suffixContainer, clear: clear, placeholder: placeholder, value: inputValue, colors: colors, className: cn__default.default(styles.component, className), focusedClassName: focusedClassName, inputClassName: styles.input, onChange: handleChange, onClear: handleClear, inputMode: 'decimal', pattern: "[".concat(positiveOnly ? '' : '-', "0-9\\s\\.,]*"), dataTestId: dataTestId, ref: ref, breakpoint: breakpoint }))));
+                    suffix === currency ? currencySymbol : suffix)), suffixContainerClassName: styles.suffixContainer, clear: clear, placeholder: placeholder, value: inputValue, colors: colors, className: cn__default.default(styles.component, className), focusedClassName: focusedClassName, inputClassName: styles.input, onChange: handleChange, onClear: handleClear, onBlur: handleBlur, inputMode: 'decimal', pattern: "[".concat(positiveOnly ? '' : '-', "0-9\\s\\.,]*"), dataTestId: dataTestId, ref: ref, breakpoint: breakpoint }))));
 });
 
 exports.AmountInput = AmountInput;

cssm/Component.d.ts

@@ -12,2 +12,8 @@ /// <reference types="react" />
     /**
+     * default - не отображаем копейки, если их значение 0
+     * withZeroMinorPart - отображаем копейки, даже если их значение равно 0
+     * @default default
+     */
+    view?: 'default' | 'withZeroMinorPart';
+    /**
      * Валюта
@@ -22,2 +28,3 @@ */
      * Максимальное число знаков до запятой
+     * max 15
      */
@@ -67,2 +74,8 @@ integerLength?: number;
     /**
+     * default - не отображаем копейки, если их значение 0
+     * withZeroMinorPart - отображаем копейки, даже если их значение равно 0
+     * @default default
+     */
+    view?: "default" | "withZeroMinorPart" | undefined;
+    /**
      * Валюта
@@ -77,2 +90,3 @@ */
      * Максимальное число знаков до запятой
+     * max 15
      */
@@ -79,0 +93,0 @@ integerLength?: number | undefined;

cssm/Component.js

@@ -37,15 +37,17 @@ 'use strict';
     var _b;
-    var _c = _a.value, value = _c === void 0 ? null : _c, _d = _a.integerLength, integerLength = _d === void 0 ? 9 : _d, _e = _a.minority, minority = _e === void 0 ? 100 : _e, _f = _a.currency, currency = _f === void 0 ? 'RUR' : _f, _g = _a.suffix, suffix = _g === void 0 ? currency : _g, _h = _a.placeholder, placeholder = _h === void 0 ? "0\u2009".concat(suffix === currency ? utils.getCurrencySymbol(currency) || '' : suffix) : _h, _j = _a.integersOnly, integersOnly = _j === void 0 ? false : _j, _k = _a.positiveOnly, positiveOnly = _k === void 0 ? true : _k, _l = _a.bold, bold = _l === void 0 ? true : _l, _m = _a.colors, colors = _m === void 0 ? 'default' : _m, className = _a.className, focusedClassName = _a.focusedClassName, dataTestId = _a.dataTestId, _o = _a.clear, clear = _o === void 0 ? false : _o, onChange = _a.onChange, onClear = _a.onClear, _p = _a.breakpoint, breakpoint = _p === void 0 ? 1024 : _p, restProps = tslib.__rest(_a, ["value", "integerLength", "minority", "currency", "suffix", "placeholder", "integersOnly", "positiveOnly", "bold", "colors", "className", "focusedClassName", "dataTestId", "clear", "onChange", "onClear", "breakpoint"]);
-    var getFormattedAmount = React.useCallback(function () {
-        if (value === '' || value === null || value === '-')
+    var _c = _a.view, view = _c === void 0 ? 'default' : _c, _d = _a.value, value = _d === void 0 ? null : _d, _e = _a.integerLength, integerLengthProp = _e === void 0 ? 9 : _e, _f = _a.minority, minority = _f === void 0 ? 100 : _f, _g = _a.currency, currency = _g === void 0 ? 'RUR' : _g, _h = _a.suffix, suffix = _h === void 0 ? currency : _h, _j = _a.placeholder, placeholder = _j === void 0 ? "0\u2009".concat(suffix === currency ? utils.getCurrencySymbol(currency) || '' : suffix) : _j, _k = _a.integersOnly, integersOnly = _k === void 0 ? false : _k, _l = _a.positiveOnly, positiveOnly = _l === void 0 ? true : _l, _m = _a.bold, bold = _m === void 0 ? true : _m, _o = _a.colors, colors = _o === void 0 ? 'default' : _o, className = _a.className, focusedClassName = _a.focusedClassName, dataTestId = _a.dataTestId, _p = _a.clear, clear = _p === void 0 ? false : _p, onChange = _a.onChange, onClear = _a.onClear, onBlur = _a.onBlur, _q = _a.breakpoint, breakpoint = _q === void 0 ? 1024 : _q, restProps = tslib.__rest(_a, ["view", "value", "integerLength", "minority", "currency", "suffix", "placeholder", "integersOnly", "positiveOnly", "bold", "colors", "className", "focusedClassName", "dataTestId", "clear", "onChange", "onClear", "onBlur", "breakpoint"]);
+    var integerLength = Math.min(integerLengthProp, 15);
+    var getFormattedAmount = React.useCallback(function (val) {
+        if (val === '' || val === null || val === '-')
             return '';
         return utils.formatAmount({
-            value: +value,
+            value: +val,
             currency: currency,
             minority: minority,
-            view: 'default',
+            view: view,
             negativeSymbol: 'hyphen-minus',
         }).formatted;
-    }, [currency, minority, value]);
-    var _q = React.useState(getFormattedAmount()), inputValue = _q[0], setInputValue = _q[1];
+    }, [currency, minority, view]);
+    var _r = React.useState(function () { return getFormattedAmount(value); }), inputValue = _r[0], setInputValue = _r[1];
+    var _s = inputValue.split(','), majorPart = _s[0], minorPart = _s[1];
     var currencySymbol = utils.getCurrencySymbol(currency);
@@ -55,7 +57,6 @@ React.useEffect(function () {
         if (currentAmountValue !== value) {
-            return setInputValue(getFormattedAmount());
+            setInputValue(getFormattedAmount(value));
         }
-        return function () { return undefined; };
         // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [getFormattedAmount]);
+    }, [value, getFormattedAmount]);
     var handleChange = function (e) {
@@ -99,8 +100,6 @@ var input = e.target;
             setInputValue(newFormattedValue);
-            if (onChange) {
-                onChange(e, {
-                    value: utils_index.getAmountValueFromStr(newFormattedValue, minority),
-                    valueString: newFormattedValue,
-                });
-            }
+            onChange === null || onChange === void 0 ? void 0 : onChange(e, {
+                value: utils_index.getAmountValueFromStr(newFormattedValue, minority),
+                valueString: newFormattedValue,
+            });
         }
@@ -122,3 +121,18 @@ else {
     }, [onClear]);
-    var _r = inputValue.split(','), majorPart = _r[0], minorPart = _r[1];
+    var handleBlur = function (event) {
+        if (view === 'withZeroMinorPart') {
+            var newValue = utils_index.getAmountValueFromStr(inputValue, minority);
+            if (newValue !== null) {
+                var formatted = getFormattedAmount(newValue);
+                if (formatted !== inputValue) {
+                    setInputValue(formatted);
+                    onChange === null || onChange === void 0 ? void 0 : onChange(event, {
+                        value: newValue,
+                        valueString: formatted,
+                    });
+                }
+            }
+        }
+        onBlur === null || onBlur === void 0 ? void 0 : onBlur(event);
+    };
     return (React__default.default.createElement("div", { className: cn__default.default(styles__default.default.container, (_b = {},
@@ -133,5 +147,5 @@ _b[styles__default.default.bold] = bold,
                     utils.THINSP,
-                    suffix === currency ? currencySymbol : suffix)), suffixContainerClassName: styles__default.default.suffixContainer, clear: clear, placeholder: placeholder, value: inputValue, colors: colors, className: cn__default.default(styles__default.default.component, className), focusedClassName: focusedClassName, inputClassName: styles__default.default.input, onChange: handleChange, onClear: handleClear, inputMode: 'decimal', pattern: "[".concat(positiveOnly ? '' : '-', "0-9\\s\\.,]*"), dataTestId: dataTestId, ref: ref, breakpoint: breakpoint }))));
+                    suffix === currency ? currencySymbol : suffix)), suffixContainerClassName: styles__default.default.suffixContainer, clear: clear, placeholder: placeholder, value: inputValue, colors: colors, className: cn__default.default(styles__default.default.component, className), focusedClassName: focusedClassName, inputClassName: styles__default.default.input, onChange: handleChange, onClear: handleClear, onBlur: handleBlur, inputMode: 'decimal', pattern: "[".concat(positiveOnly ? '' : '-', "0-9\\s\\.,]*"), dataTestId: dataTestId, ref: ref, breakpoint: breakpoint }))));
 });
 
 exports.AmountInput = AmountInput;

esm/Component.d.ts

@@ -12,2 +12,8 @@ /// <reference types="react" />
     /**
+     * default - не отображаем копейки, если их значение 0
+     * withZeroMinorPart - отображаем копейки, даже если их значение равно 0
+     * @default default
+     */
+    view?: 'default' | 'withZeroMinorPart';
+    /**
      * Валюта
@@ -22,2 +28,3 @@ */
      * Максимальное число знаков до запятой
+     * max 15
      */
@@ -67,2 +74,8 @@ integerLength?: number;
     /**
+     * default - не отображаем копейки, если их значение 0
+     * withZeroMinorPart - отображаем копейки, даже если их значение равно 0
+     * @default default
+     */
+    view?: "default" | "withZeroMinorPart" | undefined;
+    /**
      * Валюта
@@ -77,2 +90,3 @@ */
      * Максимальное число знаков до запятой
+     * max 15
      */
@@ -79,0 +93,0 @@ integerLength?: number | undefined;

esm/Component.js

@@ -9,9 +9,9 @@ import { __rest, __assign } from 'tslib';
 
-var defaultColors = {"minorPartAndCurrency":"amount-input__minorPartAndCurrency_h1cko"};
+var defaultColors = {"minorPartAndCurrency":"amount-input__minorPartAndCurrency_1fbkr"};
 require('./default.css')
 
-var styles = {"container":"amount-input__container_lvbqd","bold":"amount-input__bold_lvbqd","input":"amount-input__input_lvbqd","suffixContainer":"amount-input__suffixContainer_lvbqd","filled":"amount-input__filled_lvbqd"};
+var styles = {"container":"amount-input__container_1ohcr","bold":"amount-input__bold_1ohcr","input":"amount-input__input_1ohcr","suffixContainer":"amount-input__suffixContainer_1ohcr","filled":"amount-input__filled_1ohcr"};
 require('./index.css')
 
-var invertedColors = {"minorPartAndCurrency":"amount-input__minorPartAndCurrency_90d9n"};
+var invertedColors = {"minorPartAndCurrency":"amount-input__minorPartAndCurrency_17alg"};
 require('./inverted.css')
@@ -32,15 +32,17 @@
     var _b;
-    var _c = _a.value, value = _c === void 0 ? null : _c, _d = _a.integerLength, integerLength = _d === void 0 ? 9 : _d, _e = _a.minority, minority = _e === void 0 ? 100 : _e, _f = _a.currency, currency = _f === void 0 ? 'RUR' : _f, _g = _a.suffix, suffix = _g === void 0 ? currency : _g, _h = _a.placeholder, placeholder = _h === void 0 ? "0\u2009".concat(suffix === currency ? getCurrencySymbol(currency) || '' : suffix) : _h, _j = _a.integersOnly, integersOnly = _j === void 0 ? false : _j, _k = _a.positiveOnly, positiveOnly = _k === void 0 ? true : _k, _l = _a.bold, bold = _l === void 0 ? true : _l, _m = _a.colors, colors = _m === void 0 ? 'default' : _m, className = _a.className, focusedClassName = _a.focusedClassName, dataTestId = _a.dataTestId, _o = _a.clear, clear = _o === void 0 ? false : _o, onChange = _a.onChange, onClear = _a.onClear, _p = _a.breakpoint, breakpoint = _p === void 0 ? 1024 : _p, restProps = __rest(_a, ["value", "integerLength", "minority", "currency", "suffix", "placeholder", "integersOnly", "positiveOnly", "bold", "colors", "className", "focusedClassName", "dataTestId", "clear", "onChange", "onClear", "breakpoint"]);
-    var getFormattedAmount = useCallback(function () {
-        if (value === '' || value === null || value === '-')
+    var _c = _a.view, view = _c === void 0 ? 'default' : _c, _d = _a.value, value = _d === void 0 ? null : _d, _e = _a.integerLength, integerLengthProp = _e === void 0 ? 9 : _e, _f = _a.minority, minority = _f === void 0 ? 100 : _f, _g = _a.currency, currency = _g === void 0 ? 'RUR' : _g, _h = _a.suffix, suffix = _h === void 0 ? currency : _h, _j = _a.placeholder, placeholder = _j === void 0 ? "0\u2009".concat(suffix === currency ? getCurrencySymbol(currency) || '' : suffix) : _j, _k = _a.integersOnly, integersOnly = _k === void 0 ? false : _k, _l = _a.positiveOnly, positiveOnly = _l === void 0 ? true : _l, _m = _a.bold, bold = _m === void 0 ? true : _m, _o = _a.colors, colors = _o === void 0 ? 'default' : _o, className = _a.className, focusedClassName = _a.focusedClassName, dataTestId = _a.dataTestId, _p = _a.clear, clear = _p === void 0 ? false : _p, onChange = _a.onChange, onClear = _a.onClear, onBlur = _a.onBlur, _q = _a.breakpoint, breakpoint = _q === void 0 ? 1024 : _q, restProps = __rest(_a, ["view", "value", "integerLength", "minority", "currency", "suffix", "placeholder", "integersOnly", "positiveOnly", "bold", "colors", "className", "focusedClassName", "dataTestId", "clear", "onChange", "onClear", "onBlur", "breakpoint"]);
+    var integerLength = Math.min(integerLengthProp, 15);
+    var getFormattedAmount = useCallback(function (val) {
+        if (val === '' || val === null || val === '-')
             return '';
         return formatAmount({
-            value: +value,
+            value: +val,
             currency: currency,
             minority: minority,
-            view: 'default',
+            view: view,
             negativeSymbol: 'hyphen-minus',
         }).formatted;
-    }, [currency, minority, value]);
-    var _q = useState(getFormattedAmount()), inputValue = _q[0], setInputValue = _q[1];
+    }, [currency, minority, view]);
+    var _r = useState(function () { return getFormattedAmount(value); }), inputValue = _r[0], setInputValue = _r[1];
+    var _s = inputValue.split(','), majorPart = _s[0], minorPart = _s[1];
     var currencySymbol = getCurrencySymbol(currency);
@@ -50,7 +52,6 @@ useEffect(function () {
         if (currentAmountValue !== value) {
-            return setInputValue(getFormattedAmount());
+            setInputValue(getFormattedAmount(value));
         }
-        return function () { return undefined; };
         // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [getFormattedAmount]);
+    }, [value, getFormattedAmount]);
     var handleChange = function (e) {
@@ -94,8 +95,6 @@ var input = e.target;
             setInputValue(newFormattedValue);
-            if (onChange) {
-                onChange(e, {
-                    value: getAmountValueFromStr(newFormattedValue, minority),
-                    valueString: newFormattedValue,
-                });
-            }
+            onChange === null || onChange === void 0 ? void 0 : onChange(e, {
+                value: getAmountValueFromStr(newFormattedValue, minority),
+                valueString: newFormattedValue,
+            });
         }
@@ -117,3 +116,18 @@ else {
     }, [onClear]);
-    var _r = inputValue.split(','), majorPart = _r[0], minorPart = _r[1];
+    var handleBlur = function (event) {
+        if (view === 'withZeroMinorPart') {
+            var newValue = getAmountValueFromStr(inputValue, minority);
+            if (newValue !== null) {
+                var formatted = getFormattedAmount(newValue);
+                if (formatted !== inputValue) {
+                    setInputValue(formatted);
+                    onChange === null || onChange === void 0 ? void 0 : onChange(event, {
+                        value: newValue,
+                        valueString: formatted,
+                    });
+                }
+            }
+        }
+        onBlur === null || onBlur === void 0 ? void 0 : onBlur(event);
+    };
     return (React.createElement("div", { className: cn(styles.container, (_b = {},
@@ -128,5 +142,5 @@ _b[styles.bold] = bold,
                     THINSP,
-                    suffix === currency ? currencySymbol : suffix)), suffixContainerClassName: styles.suffixContainer, clear: clear, placeholder: placeholder, value: inputValue, colors: colors, className: cn(styles.component, className), focusedClassName: focusedClassName, inputClassName: styles.input, onChange: handleChange, onClear: handleClear, inputMode: 'decimal', pattern: "[".concat(positiveOnly ? '' : '-', "0-9\\s\\.,]*"), dataTestId: dataTestId, ref: ref, breakpoint: breakpoint }))));
+                    suffix === currency ? currencySymbol : suffix)), suffixContainerClassName: styles.suffixContainer, clear: clear, placeholder: placeholder, value: inputValue, colors: colors, className: cn(styles.component, className), focusedClassName: focusedClassName, inputClassName: styles.input, onChange: handleChange, onClear: handleClear, onBlur: handleBlur, inputMode: 'decimal', pattern: "[".concat(positiveOnly ? '' : '-', "0-9\\s\\.,]*"), dataTestId: dataTestId, ref: ref, breakpoint: breakpoint }))));
 });
 
 export { AmountInput };

modern/Component.d.ts

@@ -12,2 +12,8 @@ /// <reference types="react" />
     /**
+     * default - не отображаем копейки, если их значение 0
+     * withZeroMinorPart - отображаем копейки, даже если их значение равно 0
+     * @default default
+     */
+    view?: 'default' | 'withZeroMinorPart';
+    /**
      * Валюта
@@ -22,2 +28,3 @@ */
      * Максимальное число знаков до запятой
+     * max 15
      */
@@ -67,2 +74,8 @@ integerLength?: number;
     /**
+     * default - не отображаем копейки, если их значение 0
+     * withZeroMinorPart - отображаем копейки, даже если их значение равно 0
+     * @default default
+     */
+    view?: "default" | "withZeroMinorPart" | undefined;
+    /**
      * Валюта
@@ -77,2 +90,3 @@ */
      * Максимальное число знаков до запятой
+     * max 15
      */
@@ -79,0 +93,0 @@ integerLength?: number | undefined;

modern/Component.js

@@ -8,9 +8,9 @@ import React, { forwardRef, useCallback, useState, useEffect, Fragment } from 'react';
 
-const defaultColors = {"minorPartAndCurrency":"amount-input__minorPartAndCurrency_h1cko"};
+const defaultColors = {"minorPartAndCurrency":"amount-input__minorPartAndCurrency_1fbkr"};
 require('./default.css')
 
-const styles = {"container":"amount-input__container_lvbqd","bold":"amount-input__bold_lvbqd","input":"amount-input__input_lvbqd","suffixContainer":"amount-input__suffixContainer_lvbqd","filled":"amount-input__filled_lvbqd"};
+const styles = {"container":"amount-input__container_1ohcr","bold":"amount-input__bold_1ohcr","input":"amount-input__input_1ohcr","suffixContainer":"amount-input__suffixContainer_1ohcr","filled":"amount-input__filled_1ohcr"};
 require('./index.css')
 
-const invertedColors = {"minorPartAndCurrency":"amount-input__minorPartAndCurrency_90d9n"};
+const invertedColors = {"minorPartAndCurrency":"amount-input__minorPartAndCurrency_17alg"};
 require('./inverted.css')
@@ -29,15 +29,17 @@
  */
-const AmountInput = forwardRef(({ value = null, integerLength = 9, minority = 100, currency = 'RUR', suffix = currency, placeholder = `0\u2009${suffix === currency ? getCurrencySymbol(currency) || '' : suffix}`, integersOnly = false, positiveOnly = true, bold = true, colors = 'default', className, focusedClassName, dataTestId, clear = false, onChange, onClear, breakpoint = 1024, ...restProps }, ref) => {
-    const getFormattedAmount = useCallback(() => {
-        if (value === '' || value === null || value === '-')
+const AmountInput = forwardRef(({ view = 'default', value = null, integerLength: integerLengthProp = 9, minority = 100, currency = 'RUR', suffix = currency, placeholder = `0\u2009${suffix === currency ? getCurrencySymbol(currency) || '' : suffix}`, integersOnly = false, positiveOnly = true, bold = true, colors = 'default', className, focusedClassName, dataTestId, clear = false, onChange, onClear, onBlur, breakpoint = 1024, ...restProps }, ref) => {
+    const integerLength = Math.min(integerLengthProp, 15);
+    const getFormattedAmount = useCallback((val) => {
+        if (val === '' || val === null || val === '-')
             return '';
         return formatAmount({
-            value: +value,
+            value: +val,
             currency,
             minority,
-            view: 'default',
+            view,
             negativeSymbol: 'hyphen-minus',
         }).formatted;
-    }, [currency, minority, value]);
-    const [inputValue, setInputValue] = useState(getFormattedAmount());
+    }, [currency, minority, view]);
+    const [inputValue, setInputValue] = useState(() => getFormattedAmount(value));
+    const [majorPart, minorPart] = inputValue.split(',');
     const currencySymbol = getCurrencySymbol(currency);
@@ -47,7 +49,6 @@ useEffect(() => {
         if (currentAmountValue !== value) {
-            return setInputValue(getFormattedAmount());
+            setInputValue(getFormattedAmount(value));
         }
-        return () => undefined;
         // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [getFormattedAmount]);
+    }, [value, getFormattedAmount]);
     const handleChange = (e) => {
@@ -91,8 +92,6 @@ const input = e.target;
             setInputValue(newFormattedValue);
-            if (onChange) {
-                onChange(e, {
-                    value: getAmountValueFromStr(newFormattedValue, minority),
-                    valueString: newFormattedValue,
-                });
-            }
+            onChange?.(e, {
+                value: getAmountValueFromStr(newFormattedValue, minority),
+                valueString: newFormattedValue,
+            });
         }
@@ -114,3 +113,18 @@ else {
     }, [onClear]);
-    const [majorPart, minorPart] = inputValue.split(',');
+    const handleBlur = (event) => {
+        if (view === 'withZeroMinorPart') {
+            const newValue = getAmountValueFromStr(inputValue, minority);
+            if (newValue !== null) {
+                const formatted = getFormattedAmount(newValue);
+                if (formatted !== inputValue) {
+                    setInputValue(formatted);
+                    onChange?.(event, {
+                        value: newValue,
+                        valueString: formatted,
+                    });
+                }
+            }
+        }
+        onBlur?.(event);
+    };
     return (React.createElement("div", { className: cn(styles.container, {
@@ -125,5 +139,5 @@ [styles.bold]: bold,
                     THINSP,
-                    suffix === currency ? currencySymbol : suffix)), suffixContainerClassName: styles.suffixContainer, clear: clear, placeholder: placeholder, value: inputValue, colors: colors, className: cn(styles.component, className), focusedClassName: focusedClassName, inputClassName: styles.input, onChange: handleChange, onClear: handleClear, inputMode: 'decimal', pattern: `[${positiveOnly ? '' : '-'}0-9\\s\\.,]*`, dataTestId: dataTestId, ref: ref, breakpoint: breakpoint })));
+                    suffix === currency ? currencySymbol : suffix)), suffixContainerClassName: styles.suffixContainer, clear: clear, placeholder: placeholder, value: inputValue, colors: colors, className: cn(styles.component, className), focusedClassName: focusedClassName, inputClassName: styles.input, onChange: handleChange, onClear: handleClear, onBlur: handleBlur, inputMode: 'decimal', pattern: `[${positiveOnly ? '' : '-'}0-9\\s\\.,]*`, dataTestId: dataTestId, ref: ref, breakpoint: breakpoint })));
 });
 
 export { AmountInput };

package.json

 {
     "name": "@alfalab/core-components-amount-input",
-    "version": "7.4.8",
+    "version": "7.5.0",
     "description": "",
@@ -17,4 +17,4 @@ "keywords": [],
     "dependencies": {
-        "@alfalab/core-components-input": "^12.2.0",
-        "@alfalab/core-components-with-suffix": "^4.1.8",
+        "@alfalab/core-components-input": "^12.2.1",
+        "@alfalab/core-components-with-suffix": "^4.1.9",
         "@alfalab/data": "^1.6.0",
@@ -21,0 +21,0 @@ "@alfalab/utils": "^1.14.4",

No alert changes

Improved metrics

Total package byte prevSize

105497

increased by6.82%

Lines of code

2028

increased by7.59%

Dependency changes

• Updated@alfalab/core-components-input@^12.2.1

• Updated@alfalab/core-components-with-suffix@^4.1.9