@ericblade/react-currency-input - npm Package Compare versions

Comparing version 1.3.2 to 1.4.0

dist/amd/index.d.ts

@@ -30,2 +30,3 @@ /// <reference types="react" />
         value?: number | string;
+        logValues?: boolean;
     };
@@ -143,5 +144,5 @@ type CurrencyInputState = {
         handleSelect: (event: React.SyntheticEvent<HTMLInputElement>) => void;
-        render(): JSX.Element;
+        render(): React.JSX.Element;
     }
     export default CurrencyInput;
 }

dist/amd/index.js

@@ -59,17 +59,11 @@ var __extends = (this && this.__extends) || (function () {
         } // precision cannot be greater than 20
-        if (value === null || value === undefined) {
+        if (!value) {
             return {
                 value: 0,
-                maskedValue: ''
+                maskedValue: "".concat(prefix, "0").concat(decimalSeparator).concat('0'.repeat(precision)).concat(suffix),
             };
         }
         value = String(value); //if the given value is a Number, let's convert into String to manipulate that
-        if (value.length === 0) {
-            return {
-                value: 0,
-                maskedValue: ''
-            };
-        }
         // extract digits. if no digits, fill in a zero.
-        var digits = value.match(/\d/g) || ['0'];
+        var matchedDigits = value.match(/\d/g) || ['0'];
         var numberIsNegative = false;
@@ -83,10 +77,3 @@ if (allowNegative) {
             // if every digit in the array is '0', then the number should never be negative
-            var allDigitsAreZero = true;
-            for (var idx = 0; idx < digits.length; idx += 1) {
-                if (digits[idx] !== '0') {
-                    allDigitsAreZero = false;
-                    break;
-                }
-            }
-            if (allDigitsAreZero) {
+            if (matchedDigits.every(function (digit) { return digit === '0'; })) {
                 numberIsNegative = false;
@@ -96,13 +83,13 @@ }
         // zero-pad a input
-        while (digits.length <= precision) {
-            digits.unshift('0');
+        while (matchedDigits.length <= precision) {
+            matchedDigits.unshift('0');
         }
         if (precision > 0) {
             // add the decimal separator
-            digits.splice(digits.length - precision, 0, ".");
+            matchedDigits.splice(matchedDigits.length - precision, 0, ".");
         }
         // clean up extraneous digits like leading zeros.
-        digits = Number(digits.join('')).toFixed(precision).split('');
-        var raw = Number(digits.join(''));
-        var decimalPosition = digits.length - precision - 1; // -1 needed to position the decimal separator before the digits.
+        var digits = Number(matchedDigits.join('')).toFixed(precision).split('');
+        var raw = Number(digits.join('')); // not const, we may make it negative later
+        var decimalPosition = (precision > 0) ? digits.length - precision - 1 : digits.length;
         if (precision > 0) {
@@ -112,6 +99,2 @@ // set the final decimal separator
         }
-        else {
-            // when precision is 0, there is no decimal separator.
-            decimalPosition = digits.length;
-        }
         // add in any thousand separators
@@ -205,2 +188,5 @@ for (var x = decimalPosition - 3; x > 0; x = x - 3) {
                 }, function () {
+                    if (_this.props.logValues) {
+                        console.log('** onChangeEvent', event, _this.state.maskedValue, _this.state.value);
+                    }
                     _this.props.onChangeEvent(event, _this.state.maskedValue, _this.state.value);
@@ -445,2 +431,3 @@ });
             disableSelectionHandling: false,
+            logValues: false,
         };
@@ -447,0 +434,0 @@ CurrencyInput.DEBUG_SELECTION = false;

dist/cjs/index.d.ts

 import React, { type RefObject } from 'react';
-export declare type CurrencyInputProps = {
+export type CurrencyInputProps = {
     onBlur?: (event: React.FocusEvent) => void;
@@ -22,4 +22,5 @@ onChangeEvent?: (event: React.ChangeEvent, maskedValue: string, value: number | string) => void;
     value?: number | string;
+    logValues?: boolean;
 };
-declare type CurrencyInputState = {
+type CurrencyInputState = {
     customProps: any;
@@ -30,7 +31,7 @@ disableSelectionHandling: boolean;
 };
-declare type SelectionSnapshot = {
+type SelectionSnapshot = {
     inputSelectionStart: number;
     inputSelectionEnd: number;
 };
-declare type SelectionConstraints = {
+type SelectionConstraints = {
     start: number;
@@ -136,4 +137,4 @@ end: number;
     handleSelect: (event: React.SyntheticEvent<HTMLInputElement>) => void;
-    render(): JSX.Element;
+    render(): React.JSX.Element;
 }
 export default CurrencyInput;

dist/cjs/index.js

@@ -105,2 +105,5 @@ "use strict";
             }, function () {
+                if (_this.props.logValues) {
+                    console.log('** onChangeEvent', event, _this.state.maskedValue, _this.state.value);
+                }
                 _this.props.onChangeEvent(event, _this.state.maskedValue, _this.state.value);
@@ -345,2 +348,3 @@ });
         disableSelectionHandling: false,
+        logValues: false,
     };
@@ -347,0 +351,0 @@ CurrencyInput.DEBUG_SELECTION = false;

dist/cjs/mask.d.ts

@@ -0,0 +0,0 @@ export default function mask(value?: string | number | undefined | null, precision?: string | number, decimalSeparator?: string, thousandSeparator?: string, allowNegative?: boolean, prefix?: string, suffix?: string): {

dist/cjs/mask.js

@@ -18,17 +18,11 @@ "use strict";
     } // precision cannot be greater than 20
-    if (value === null || value === undefined) {
+    if (!value) {
         return {
             value: 0,
-            maskedValue: ''
+            maskedValue: "".concat(prefix, "0").concat(decimalSeparator).concat('0'.repeat(precision)).concat(suffix),
         };
     }
     value = String(value); //if the given value is a Number, let's convert into String to manipulate that
-    if (value.length === 0) {
-        return {
-            value: 0,
-            maskedValue: ''
-        };
-    }
     // extract digits. if no digits, fill in a zero.
-    var digits = value.match(/\d/g) || ['0'];
+    var matchedDigits = value.match(/\d/g) || ['0'];
     var numberIsNegative = false;
@@ -42,10 +36,3 @@ if (allowNegative) {
         // if every digit in the array is '0', then the number should never be negative
-        var allDigitsAreZero = true;
-        for (var idx = 0; idx < digits.length; idx += 1) {
-            if (digits[idx] !== '0') {
-                allDigitsAreZero = false;
-                break;
-            }
-        }
-        if (allDigitsAreZero) {
+        if (matchedDigits.every(function (digit) { return digit === '0'; })) {
             numberIsNegative = false;
@@ -55,13 +42,13 @@ }
     // zero-pad a input
-    while (digits.length <= precision) {
-        digits.unshift('0');
+    while (matchedDigits.length <= precision) {
+        matchedDigits.unshift('0');
     }
     if (precision > 0) {
         // add the decimal separator
-        digits.splice(digits.length - precision, 0, ".");
+        matchedDigits.splice(matchedDigits.length - precision, 0, ".");
     }
     // clean up extraneous digits like leading zeros.
-    digits = Number(digits.join('')).toFixed(precision).split('');
-    var raw = Number(digits.join(''));
-    var decimalPosition = digits.length - precision - 1; // -1 needed to position the decimal separator before the digits.
+    var digits = Number(matchedDigits.join('')).toFixed(precision).split('');
+    var raw = Number(digits.join('')); // not const, we may make it negative later
+    var decimalPosition = (precision > 0) ? digits.length - precision - 1 : digits.length;
     if (precision > 0) {
@@ -71,6 +58,2 @@ // set the final decimal separator
     }
-    else {
-        // when precision is 0, there is no decimal separator.
-        decimalPosition = digits.length;
-    }
     // add in any thousand separators
@@ -77,0 +60,0 @@ for (var x = decimalPosition - 3; x > 0; x = x - 3) {

dist/es2015/index.d.ts

 import React, { type RefObject } from 'react';
-export declare type CurrencyInputProps = {
+export type CurrencyInputProps = {
     onBlur?: (event: React.FocusEvent) => void;
@@ -22,4 +22,5 @@ onChangeEvent?: (event: React.ChangeEvent, maskedValue: string, value: number | string) => void;
     value?: number | string;
+    logValues?: boolean;
 };
-declare type CurrencyInputState = {
+type CurrencyInputState = {
     customProps: any;
@@ -30,7 +31,7 @@ disableSelectionHandling: boolean;
 };
-declare type SelectionSnapshot = {
+type SelectionSnapshot = {
     inputSelectionStart: number;
     inputSelectionEnd: number;
 };
-declare type SelectionConstraints = {
+type SelectionConstraints = {
     start: number;
@@ -136,4 +137,4 @@ end: number;
     handleSelect: (event: React.SyntheticEvent<HTMLInputElement>) => void;
-    render(): JSX.Element;
+    render(): React.JSX.Element;
 }
 export default CurrencyInput;

dist/es2015/index.js

@@ -73,2 +73,5 @@ // TODO: disableSelectionHandling really breaks behavior in a way i didn't even kind of expect, will try to figure out root cause later and fix if possible? that may be the way browser deals with it tho
             }, () => {
+                if (this.props.logValues) {
+                    console.log('** onChangeEvent', event, this.state.maskedValue, this.state.value);
+                }
                 this.props.onChangeEvent(event, this.state.maskedValue, this.state.value);
@@ -313,2 +316,3 @@ });
     disableSelectionHandling: false,
+    logValues: false,
 };
@@ -315,0 +319,0 @@ CurrencyInput.DEBUG_SELECTION = false;

dist/es2015/mask.d.ts

@@ -0,0 +0,0 @@ export default function mask(value?: string | number | undefined | null, precision?: string | number, decimalSeparator?: string, thousandSeparator?: string, allowNegative?: boolean, prefix?: string, suffix?: string): {

dist/es2015/mask.js

@@ -10,17 +10,11 @@ export default function mask(value, precision = 2, decimalSeparator = '.', thousandSeparator = ',', allowNegative = false, prefix = '', suffix = '') {
     } // precision cannot be greater than 20
-    if (value === null || value === undefined) {
+    if (!value) {
         return {
             value: 0,
-            maskedValue: ''
+            maskedValue: `${prefix}0${decimalSeparator}${'0'.repeat(precision)}${suffix}`,
         };
     }
     value = String(value); //if the given value is a Number, let's convert into String to manipulate that
-    if (value.length === 0) {
-        return {
-            value: 0,
-            maskedValue: ''
-        };
-    }
     // extract digits. if no digits, fill in a zero.
-    let digits = value.match(/\d/g) || ['0'];
+    const matchedDigits = value.match(/\d/g) || ['0'];
     let numberIsNegative = false;
@@ -34,10 +28,3 @@ if (allowNegative) {
         // if every digit in the array is '0', then the number should never be negative
-        let allDigitsAreZero = true;
-        for (let idx = 0; idx < digits.length; idx += 1) {
-            if (digits[idx] !== '0') {
-                allDigitsAreZero = false;
-                break;
-            }
-        }
-        if (allDigitsAreZero) {
+        if (matchedDigits.every(digit => digit === '0')) {
             numberIsNegative = false;
@@ -47,13 +34,13 @@ }
     // zero-pad a input
-    while (digits.length <= precision) {
-        digits.unshift('0');
+    while (matchedDigits.length <= precision) {
+        matchedDigits.unshift('0');
     }
     if (precision > 0) {
         // add the decimal separator
-        digits.splice(digits.length - precision, 0, ".");
+        matchedDigits.splice(matchedDigits.length - precision, 0, ".");
     }
     // clean up extraneous digits like leading zeros.
-    digits = Number(digits.join('')).toFixed(precision).split('');
-    let raw = Number(digits.join(''));
-    let decimalPosition = digits.length - precision - 1; // -1 needed to position the decimal separator before the digits.
+    const digits = Number(matchedDigits.join('')).toFixed(precision).split('');
+    let raw = Number(digits.join('')); // not const, we may make it negative later
+    const decimalPosition = (precision > 0) ? digits.length - precision - 1 : digits.length;
     if (precision > 0) {
@@ -63,6 +50,2 @@ // set the final decimal separator
     }
-    else {
-        // when precision is 0, there is no decimal separator.
-        decimalPosition = digits.length;
-    }
     // add in any thousand separators
@@ -69,0 +52,0 @@ for (let x = decimalPosition - 3; x > 0; x = x - 3) {

dist/esm/index.d.ts

 import React, { type RefObject } from 'react';
-export declare type CurrencyInputProps = {
+export type CurrencyInputProps = {
     onBlur?: (event: React.FocusEvent) => void;
@@ -22,4 +22,5 @@ onChangeEvent?: (event: React.ChangeEvent, maskedValue: string, value: number | string) => void;
     value?: number | string;
+    logValues?: boolean;
 };
-declare type CurrencyInputState = {
+type CurrencyInputState = {
     customProps: any;
@@ -30,7 +31,7 @@ disableSelectionHandling: boolean;
 };
-declare type SelectionSnapshot = {
+type SelectionSnapshot = {
     inputSelectionStart: number;
     inputSelectionEnd: number;
 };
-declare type SelectionConstraints = {
+type SelectionConstraints = {
     start: number;
@@ -136,4 +137,4 @@ end: number;
     handleSelect: (event: React.SyntheticEvent<HTMLInputElement>) => void;
-    render(): JSX.Element;
+    render(): React.JSX.Element;
 }
 export default CurrencyInput;

dist/esm/index.js

@@ -100,2 +100,5 @@ // TODO: disableSelectionHandling really breaks behavior in a way i didn't even kind of expect, will try to figure out root cause later and fix if possible? that may be the way browser deals with it tho
             }, function () {
+                if (_this.props.logValues) {
+                    console.log('** onChangeEvent', event, _this.state.maskedValue, _this.state.value);
+                }
                 _this.props.onChangeEvent(event, _this.state.maskedValue, _this.state.value);
@@ -340,2 +343,3 @@ });
         disableSelectionHandling: false,
+        logValues: false,
     };
@@ -342,0 +346,0 @@ CurrencyInput.DEBUG_SELECTION = false;

dist/esm/mask.d.ts

@@ -0,0 +0,0 @@ export default function mask(value?: string | number | undefined | null, precision?: string | number, decimalSeparator?: string, thousandSeparator?: string, allowNegative?: boolean, prefix?: string, suffix?: string): {

dist/esm/mask.js

@@ -16,17 +16,11 @@ export default function mask(value, precision, decimalSeparator, thousandSeparator, allowNegative, prefix, suffix) {
     } // precision cannot be greater than 20
-    if (value === null || value === undefined) {
+    if (!value) {
         return {
             value: 0,
-            maskedValue: ''
+            maskedValue: "".concat(prefix, "0").concat(decimalSeparator).concat('0'.repeat(precision)).concat(suffix),
         };
     }
     value = String(value); //if the given value is a Number, let's convert into String to manipulate that
-    if (value.length === 0) {
-        return {
-            value: 0,
-            maskedValue: ''
-        };
-    }
     // extract digits. if no digits, fill in a zero.
-    var digits = value.match(/\d/g) || ['0'];
+    var matchedDigits = value.match(/\d/g) || ['0'];
     var numberIsNegative = false;
@@ -40,10 +34,3 @@ if (allowNegative) {
         // if every digit in the array is '0', then the number should never be negative
-        var allDigitsAreZero = true;
-        for (var idx = 0; idx < digits.length; idx += 1) {
-            if (digits[idx] !== '0') {
-                allDigitsAreZero = false;
-                break;
-            }
-        }
-        if (allDigitsAreZero) {
+        if (matchedDigits.every(function (digit) { return digit === '0'; })) {
             numberIsNegative = false;
@@ -53,13 +40,13 @@ }
     // zero-pad a input
-    while (digits.length <= precision) {
-        digits.unshift('0');
+    while (matchedDigits.length <= precision) {
+        matchedDigits.unshift('0');
     }
     if (precision > 0) {
         // add the decimal separator
-        digits.splice(digits.length - precision, 0, ".");
+        matchedDigits.splice(matchedDigits.length - precision, 0, ".");
     }
     // clean up extraneous digits like leading zeros.
-    digits = Number(digits.join('')).toFixed(precision).split('');
-    var raw = Number(digits.join(''));
-    var decimalPosition = digits.length - precision - 1; // -1 needed to position the decimal separator before the digits.
+    var digits = Number(matchedDigits.join('')).toFixed(precision).split('');
+    var raw = Number(digits.join('')); // not const, we may make it negative later
+    var decimalPosition = (precision > 0) ? digits.length - precision - 1 : digits.length;
     if (precision > 0) {
@@ -69,6 +56,2 @@ // set the final decimal separator
     }
-    else {
-        // when precision is 0, there is no decimal separator.
-        decimalPosition = digits.length;
-    }
     // add in any thousand separators
@@ -75,0 +58,0 @@ for (var x = decimalPosition - 3; x > 0; x = x - 3) {

package.json

 {
   "name": "@ericblade/react-currency-input",
-  "version": "1.3.2",
+  "version": "1.4.0",
   "description": "React component for inputing currency amounts",
@@ -17,4 +17,4 @@ "main": "dist/cjs/index.js",
     "build-example": "npm run build && browserify examples/index.js -o examples/bundle.js -t [ babelify --presets [ @babel/preset-env ] ]",
-    "test": "npx cross-env NODE_ENV=test ts-mocha --exit -p tsconfig.test.json test/**/*.spec.{js,jsx,ts,tsx}",
-    "upgrade-deps": "npx npm-check-updates -u && npm install && npm run audit",
+    "test": "npm run build-example && cypress run",
+    "upgrade-deps": "npx npm-check-updates --doctor",
     "webpack": "webpack",
@@ -46,33 +46,32 @@ "webpack-dev": "webpack-dev-server"
   "peerDependencies": {
-    "react": ">=16.0.0 <19.0.0",
-    "react-dom": ">=16.0.0 <19.0.0"
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
   },
   "devDependencies": {
-    "@babel/preset-env": "^7.16.11",
-    "@babel/preset-react": "^7.16.7",
-    "@types/chai": "^4.3.0",
-    "@types/mocha": "^9.1.0",
-    "@types/react": "^17.0.39",
-    "@types/react-dom": "^17.0.13",
-    "@types/sinon": "^10.0.11",
+    "@babel/preset-env": "^7.22.5",
+    "@babel/preset-react": "^7.22.5",
+    "@types/chai": "^4.3.5",
+    "@types/mocha": "^10.0.1",
+    "@types/react": "^18.2.14",
+    "@types/react-dom": "^18.2.6",
+    "@types/sinon": "^10.0.15",
     "ansi-regex": ">=6.0.1",
     "babelify": "^10.0.0",
     "browserify": "^17.0.0",
-    "chai": "^4.3.6",
+    "chai": "^4.3.7",
     "cross-env": "^7.0.3",
-    "cypress": "^9.5.1",
-    "eslint": "^8.10.0",
-    "eslint-config-react-app": "^7.0.0",
+    "cypress": "^12.16.0",
+    "eslint": "^8.44.0",
+    "eslint-config-react-app": "^7.0.1",
     "jsdom": "^16.5.0",
-    "react": "^18.0.0-rc.2",
-    "react-dom": "^18.0.0-rc.2",
-    "rimraf": "^3.0.2",
-    "sinon": "^13.0.1",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "rimraf": "^5.0.1",
+    "sinon": "^15.2.0",
     "sinon-chai": "^3.7.0",
-    "ts-mocha": "^9.0.2",
-    "ts-node": "^10.7.0",
-    "typescript": "^4.6.2"
+    "typescript": "^5.1.6",
+    "@types/node": "^20.3.3"
   },
   "dependencies": {
-    "react-device-detect": "^2.1.2"
+    "react-device-detect": "^2.2.3"
   },
@@ -79,0 +78,0 @@ "@rollingversions": {

No alert changes

Improved metrics

Dev dependency count

23

-4.17%

Worsened metrics

Total package byte prevSize

134752

-2.12%

Lines of code

2552

-1.85%

Dependency changes

• Updated

  react-device-detect@^2.2.3