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

Comparing version 1.4.1 to 1.4.3

dist/amd/index.d.ts

@@ -1,2 +0,1 @@
-/// <reference types="react" />
 declare module "mask" {
@@ -47,8 +46,8 @@ export default function mask(value?: string | number | undefined | null, precision?: string | number, decimalSeparator?: string, thousandSeparator?: string, allowNegative?: boolean, prefix?: string, suffix?: string): {
     class CurrencyInput extends React.Component<CurrencyInputProps, CurrencyInputState> {
+        static DEBUG_SELECTION: boolean;
+        static DEBUG_FULL: boolean;
         static defaultProps: CurrencyInputProps;
         inputSelectionStart: number;
         inputSelectionEnd: number;
-        theInput: RefObject<HTMLInputElement>;
-        static DEBUG_SELECTION: boolean;
-        static DEBUG_FULL: boolean;
+        thisInputRef: RefObject<HTMLInputElement>;
         constructor(props: CurrencyInputProps);
@@ -55,0 +54,0 @@ /**

dist/amd/index.js

@@ -44,2 +44,3 @@ var __extends = (this && this.__extends) || (function () {
     Object.defineProperty(exports, "__esModule", { value: true });
+    exports.default = mask;
     function mask(value, precision, decimalSeparator, thousandSeparator, allowNegative, prefix, suffix) {
@@ -119,3 +120,2 @@ if (precision === void 0) { precision = 2; }
     }
-    exports.default = mask;
 });
@@ -134,3 +134,3 @@ // 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
             _this.inputSelectionEnd = 1;
-            _this.theInput = react_1.default.createRef();
+            _this.thisInputRef = react_1.default.createRef();
             /**
@@ -205,3 +205,3 @@ * Set selection range only if input is in focused state
                 }
-                var node = _this.theInput.current;
+                var node = _this.thisInputRef.current;
                 if (!node) {
@@ -243,3 +243,3 @@ return;
                 CurrencyInput.DEBUG_FULL && console.log('* handleSelect', event);
-                var node = _this.theInput.current;
+                var node = _this.thisInputRef.current;
                 var constraints = _this.getSelectionConstraints();
@@ -349,3 +349,3 @@ CurrencyInput.DEBUG_SELECTION && console.warn('**** handleSelect', node.selectionStart, node.selectionEnd, constraints);
             }
-            var node = this.theInput.current;
+            var node = this.thisInputRef.current;
             return {
@@ -373,3 +373,3 @@ inputSelectionStart: node.selectionStart,
             }
-            var node = this.theInput.current;
+            var node = this.thisInputRef.current;
             var prevSelectionStart = this.inputSelectionStart;
@@ -403,3 +403,3 @@ var prevSelectionEnd = this.inputSelectionEnd;
         CurrencyInput.prototype.getSelectionConstraints = function () {
-            var node = this.theInput.current;
+            var node = this.thisInputRef.current;
             if (this.state.disableSelectionHandling) {
@@ -418,4 +418,8 @@ return {
         CurrencyInput.prototype.render = function () {
-            return (react_1.default.createElement("input", __assign({ ref: this.theInput, type: this.props.inputType, value: this.state.maskedValue, onChange: this.handleChangeEvent, onFocus: this.handleFocus }, this.state.customProps, { style: this.props.style, onClick: this.props.onClick, onBlur: this.handleBlur, id: this.props.id, autoFocus: this.props.autoFocus, tabIndex: this.props.tabIndex, onSelect: this.handleSelect })));
+            return (react_1.default.createElement("input", __assign({ ref: this.thisInputRef, type: this.props.inputType, value: this.state.maskedValue, onChange: this.handleChangeEvent, onFocus: this.handleFocus }, this.state.customProps, { style: this.props.style, onClick: this.props.onClick, onBlur: this.handleBlur, id: this.props.id, autoFocus: this.props.autoFocus, tabIndex: this.props.tabIndex, onSelect: this.handleSelect })));
         };
+        // if true, enable console logging for selection tracking
+        CurrencyInput.DEBUG_SELECTION = false;
+        // if true, enable additional logging beyond selection tracking. does not imply DEBUG_SELECTION = true.
+        CurrencyInput.DEBUG_FULL = false;
         CurrencyInput.defaultProps = {
@@ -437,4 +441,2 @@ onChangeEvent: function (event, maskedValue, value) { },
         };
-        CurrencyInput.DEBUG_SELECTION = false;
-        CurrencyInput.DEBUG_FULL = false;
         return CurrencyInput;
@@ -445,5 +447,5 @@ }(react_1.default.Component));
     // certain of stability.
-    if (typeof 'window' !== 'undefined') {
+    if (typeof window !== 'undefined') {
         window['CurrencyInput'] = CurrencyInput;
     }
 });

dist/cjs/index.d.ts

@@ -39,8 +39,8 @@ import React, { type RefObject } from 'react';
 declare class CurrencyInput extends React.Component<CurrencyInputProps, CurrencyInputState> {
+    static DEBUG_SELECTION: boolean;
+    static DEBUG_FULL: boolean;
     static defaultProps: CurrencyInputProps;
     inputSelectionStart: number;
     inputSelectionEnd: number;
-    theInput: RefObject<HTMLInputElement>;
-    static DEBUG_SELECTION: boolean;
-    static DEBUG_FULL: boolean;
+    thisInputRef: RefObject<HTMLInputElement>;
     constructor(props: CurrencyInputProps);
@@ -47,0 +47,0 @@ /**

dist/cjs/index.js

@@ -53,3 +53,3 @@ "use strict";
         _this.inputSelectionEnd = 1;
-        _this.theInput = react_1.default.createRef();
+        _this.thisInputRef = react_1.default.createRef();
         /**
@@ -124,3 +124,3 @@ * Set selection range only if input is in focused state
             }
-            var node = _this.theInput.current;
+            var node = _this.thisInputRef.current;
             if (!node) {
@@ -162,3 +162,3 @@ return;
             CurrencyInput.DEBUG_FULL && console.log('* handleSelect', event);
-            var node = _this.theInput.current;
+            var node = _this.thisInputRef.current;
             var constraints = _this.getSelectionConstraints();
@@ -268,3 +268,3 @@ CurrencyInput.DEBUG_SELECTION && console.warn('**** handleSelect', node.selectionStart, node.selectionEnd, constraints);
         }
-        var node = this.theInput.current;
+        var node = this.thisInputRef.current;
         return {
@@ -292,3 +292,3 @@ inputSelectionStart: node.selectionStart,
         }
-        var node = this.theInput.current;
+        var node = this.thisInputRef.current;
         var prevSelectionStart = this.inputSelectionStart;
@@ -322,3 +322,3 @@ var prevSelectionEnd = this.inputSelectionEnd;
     CurrencyInput.prototype.getSelectionConstraints = function () {
-        var node = this.theInput.current;
+        var node = this.thisInputRef.current;
         if (this.state.disableSelectionHandling) {
@@ -337,4 +337,8 @@ return {
     CurrencyInput.prototype.render = function () {
-        return (react_1.default.createElement("input", __assign({ ref: this.theInput, type: this.props.inputType, value: this.state.maskedValue, onChange: this.handleChangeEvent, onFocus: this.handleFocus }, this.state.customProps, { style: this.props.style, onClick: this.props.onClick, onBlur: this.handleBlur, id: this.props.id, autoFocus: this.props.autoFocus, tabIndex: this.props.tabIndex, onSelect: this.handleSelect })));
+        return (react_1.default.createElement("input", __assign({ ref: this.thisInputRef, type: this.props.inputType, value: this.state.maskedValue, onChange: this.handleChangeEvent, onFocus: this.handleFocus }, this.state.customProps, { style: this.props.style, onClick: this.props.onClick, onBlur: this.handleBlur, id: this.props.id, autoFocus: this.props.autoFocus, tabIndex: this.props.tabIndex, onSelect: this.handleSelect })));
     };
+    // if true, enable console logging for selection tracking
+    CurrencyInput.DEBUG_SELECTION = false;
+    // if true, enable additional logging beyond selection tracking. does not imply DEBUG_SELECTION = true.
+    CurrencyInput.DEBUG_FULL = false;
     CurrencyInput.defaultProps = {
@@ -356,4 +360,2 @@ onChangeEvent: function (event, maskedValue, value) { },
     };
-    CurrencyInput.DEBUG_SELECTION = false;
-    CurrencyInput.DEBUG_FULL = false;
     return CurrencyInput;
@@ -364,4 +366,4 @@ }(react_1.default.Component));
 // certain of stability.
-if (typeof 'window' !== 'undefined') {
+if (typeof window !== 'undefined') {
     window['CurrencyInput'] = CurrencyInput;
 }

dist/cjs/mask.js

 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = mask;
 function mask(value, precision, decimalSeparator, thousandSeparator, allowNegative, prefix, suffix) {
@@ -77,2 +78,1 @@ if (precision === void 0) { precision = 2; }
 }
-exports.default = mask;

dist/es2015/index.d.ts

@@ -39,8 +39,8 @@ import React, { type RefObject } from 'react';
 declare class CurrencyInput extends React.Component<CurrencyInputProps, CurrencyInputState> {
+    static DEBUG_SELECTION: boolean;
+    static DEBUG_FULL: boolean;
     static defaultProps: CurrencyInputProps;
     inputSelectionStart: number;
     inputSelectionEnd: number;
-    theInput: RefObject<HTMLInputElement>;
-    static DEBUG_SELECTION: boolean;
-    static DEBUG_FULL: boolean;
+    thisInputRef: RefObject<HTMLInputElement>;
     constructor(props: CurrencyInputProps);
@@ -47,0 +47,0 @@ /**

dist/es2015/index.js

@@ -21,3 +21,3 @@ // 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
         this.inputSelectionEnd = 1;
-        this.theInput = React.createRef();
+        this.thisInputRef = React.createRef();
         /**
@@ -92,3 +92,3 @@ * Set selection range only if input is in focused state
             }
-            const node = this.theInput.current;
+            const node = this.thisInputRef.current;
             if (!node) {
@@ -130,3 +130,3 @@ return;
             CurrencyInput.DEBUG_FULL && console.log('* handleSelect', event);
-            const node = this.theInput.current;
+            const node = this.thisInputRef.current;
             const constraints = this.getSelectionConstraints();
@@ -235,3 +235,3 @@ CurrencyInput.DEBUG_SELECTION && console.warn('**** handleSelect', node.selectionStart, node.selectionEnd, constraints);
         }
-        const node = this.theInput.current;
+        const node = this.thisInputRef.current;
         return {
@@ -259,3 +259,3 @@ inputSelectionStart: node.selectionStart,
         }
-        const node = this.theInput.current;
+        const node = this.thisInputRef.current;
         let prevSelectionStart = this.inputSelectionStart;
@@ -289,3 +289,3 @@ let prevSelectionEnd = this.inputSelectionEnd;
     getSelectionConstraints() {
-        const node = this.theInput.current;
+        const node = this.thisInputRef.current;
         if (this.state.disableSelectionHandling) {
@@ -304,5 +304,9 @@ return {
     render() {
-        return (React.createElement("input", Object.assign({ ref: this.theInput, type: this.props.inputType, value: this.state.maskedValue, onChange: this.handleChangeEvent, onFocus: this.handleFocus }, this.state.customProps, { style: this.props.style, onClick: this.props.onClick, onBlur: this.handleBlur, id: this.props.id, autoFocus: this.props.autoFocus, tabIndex: this.props.tabIndex, onSelect: this.handleSelect })));
+        return (React.createElement("input", Object.assign({ ref: this.thisInputRef, type: this.props.inputType, value: this.state.maskedValue, onChange: this.handleChangeEvent, onFocus: this.handleFocus }, this.state.customProps, { style: this.props.style, onClick: this.props.onClick, onBlur: this.handleBlur, id: this.props.id, autoFocus: this.props.autoFocus, tabIndex: this.props.tabIndex, onSelect: this.handleSelect })));
     }
 }
+// if true, enable console logging for selection tracking
+CurrencyInput.DEBUG_SELECTION = false;
+// if true, enable additional logging beyond selection tracking. does not imply DEBUG_SELECTION = true.
+CurrencyInput.DEBUG_FULL = false;
 CurrencyInput.defaultProps = {
@@ -324,9 +328,7 @@ onChangeEvent: function (event, maskedValue, value) { },
 };
-CurrencyInput.DEBUG_SELECTION = false;
-CurrencyInput.DEBUG_FULL = false;
 export default CurrencyInput;
 // TODO: quick way to enable/disable debugging on the fly, but should really be removed when we are
 // certain of stability.
-if (typeof 'window' !== 'undefined') {
+if (typeof window !== 'undefined') {
     window['CurrencyInput'] = CurrencyInput;
 }

dist/esm/index.d.ts

@@ -39,8 +39,8 @@ import React, { type RefObject } from 'react';
 declare class CurrencyInput extends React.Component<CurrencyInputProps, CurrencyInputState> {
+    static DEBUG_SELECTION: boolean;
+    static DEBUG_FULL: boolean;
     static defaultProps: CurrencyInputProps;
     inputSelectionStart: number;
     inputSelectionEnd: number;
-    theInput: RefObject<HTMLInputElement>;
-    static DEBUG_SELECTION: boolean;
-    static DEBUG_FULL: boolean;
+    thisInputRef: RefObject<HTMLInputElement>;
     constructor(props: CurrencyInputProps);
@@ -47,0 +47,0 @@ /**

dist/esm/index.js

@@ -48,3 +48,3 @@ // 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
         _this.inputSelectionEnd = 1;
-        _this.theInput = React.createRef();
+        _this.thisInputRef = React.createRef();
         /**
@@ -119,3 +119,3 @@ * Set selection range only if input is in focused state
             }
-            var node = _this.theInput.current;
+            var node = _this.thisInputRef.current;
             if (!node) {
@@ -157,3 +157,3 @@ return;
             CurrencyInput.DEBUG_FULL && console.log('* handleSelect', event);
-            var node = _this.theInput.current;
+            var node = _this.thisInputRef.current;
             var constraints = _this.getSelectionConstraints();
@@ -263,3 +263,3 @@ CurrencyInput.DEBUG_SELECTION && console.warn('**** handleSelect', node.selectionStart, node.selectionEnd, constraints);
         }
-        var node = this.theInput.current;
+        var node = this.thisInputRef.current;
         return {
@@ -287,3 +287,3 @@ inputSelectionStart: node.selectionStart,
         }
-        var node = this.theInput.current;
+        var node = this.thisInputRef.current;
         var prevSelectionStart = this.inputSelectionStart;
@@ -317,3 +317,3 @@ var prevSelectionEnd = this.inputSelectionEnd;
     CurrencyInput.prototype.getSelectionConstraints = function () {
-        var node = this.theInput.current;
+        var node = this.thisInputRef.current;
         if (this.state.disableSelectionHandling) {
@@ -332,4 +332,8 @@ return {
     CurrencyInput.prototype.render = function () {
-        return (React.createElement("input", __assign({ ref: this.theInput, type: this.props.inputType, value: this.state.maskedValue, onChange: this.handleChangeEvent, onFocus: this.handleFocus }, this.state.customProps, { style: this.props.style, onClick: this.props.onClick, onBlur: this.handleBlur, id: this.props.id, autoFocus: this.props.autoFocus, tabIndex: this.props.tabIndex, onSelect: this.handleSelect })));
+        return (React.createElement("input", __assign({ ref: this.thisInputRef, type: this.props.inputType, value: this.state.maskedValue, onChange: this.handleChangeEvent, onFocus: this.handleFocus }, this.state.customProps, { style: this.props.style, onClick: this.props.onClick, onBlur: this.handleBlur, id: this.props.id, autoFocus: this.props.autoFocus, tabIndex: this.props.tabIndex, onSelect: this.handleSelect })));
     };
+    // if true, enable console logging for selection tracking
+    CurrencyInput.DEBUG_SELECTION = false;
+    // if true, enable additional logging beyond selection tracking. does not imply DEBUG_SELECTION = true.
+    CurrencyInput.DEBUG_FULL = false;
     CurrencyInput.defaultProps = {
@@ -351,4 +355,2 @@ onChangeEvent: function (event, maskedValue, value) { },
     };
-    CurrencyInput.DEBUG_SELECTION = false;
-    CurrencyInput.DEBUG_FULL = false;
     return CurrencyInput;
@@ -359,4 +361,4 @@ }(React.Component));
 // certain of stability.
-if (typeof 'window' !== 'undefined') {
+if (typeof window !== 'undefined') {
     window['CurrencyInput'] = CurrencyInput;
 }

package.json

 {
   "name": "@ericblade/react-currency-input",
-  "version": "1.4.1",
-  "description": "React component for inputing currency amounts",
+  "version": "1.4.3",
+  "description": "React component for inputting currency amounts",
   "main": "dist/cjs/index.js",
@@ -9,3 +9,2 @@ "module": "dist/esm/index.js",
     "audit": "npm audit fix --production",
-    "cypress": "npm run build-example && cypress open",
     "lint": "eslint src/**",
@@ -18,4 +17,4 @@ "build": "npm run build:es2015 && npm run build:esm && npm run build:cjs && npm run build:amd",
     "build-example": "npm run build && browserify examples/index.js -o examples/bundle.js -t [ babelify --presets [ @babel/preset-env ] ]",
-    "test": "npm run build-example && cypress run",
-    "upgrade-deps": "npx npm-check-updates --doctor",
+    "test": "npm run build-example && npx playwright test",
+    "upgrade-deps": "npx npm-check-updates --doctor -u",
     "webpack": "webpack",
@@ -51,25 +50,25 @@ "webpack-dev": "webpack-dev-server"
   "devDependencies": {
-    "@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",
+    "@babel/preset-env": "^7.24.8",
+    "@babel/preset-react": "^7.24.7",
+    "@playwright/test": "^1.45.2",
+    "@types/chai": "^4.3.16",
+    "@types/mocha": "^10.0.7",
+    "@types/node": "^20.14.11",
+    "@types/react": "^18.3.3",
+    "@types/react-dom": "^18.3.0",
+    "@types/sinon": "^17.0.3",
     "ansi-regex": ">=6.0.1",
     "babelify": "^10.0.0",
     "browserify": "^17.0.0",
-    "chai": "^4.3.7",
+    "chai": "^5.1.1",
     "cross-env": "^7.0.3",
-    "cypress": "^12.16.0",
-    "eslint": "^8.44.0",
+    "eslint": "^9.7.0",
     "eslint-config-react-app": "^7.0.1",
     "jsdom": "^16.5.0",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
-    "rimraf": "^5.0.1",
-    "sinon": "^15.2.0",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "rimraf": "^6.0.1",
+    "sinon": "^18.0.0",
     "sinon-chai": "^3.7.0",
-    "typescript": "^5.1.6",
-    "@types/node": "^20.3.3"
+    "typescript": "^5.5.3"
   },
@@ -76,0 +75,0 @@ "dependencies": {

README.md

@@ -11,2 +11,11 @@ # @ericblade/react-currency-input
 
+# Changes since the original
+
+- Now in TypeScript
+- Supports React 17, 18
+- Totally new automated testing setup with Cypress
+- Automated Testing setup much more thorough
+- Caret selection redone and seems to work everywhere
+- Uses react-device-detect to workaround issues with Gboard
+
 ## Codepen Demonstrations
@@ -34,3 +43,3 @@
 ```bash
-npm install react-currency-input --save
+npm install @ericblade/react-currency-input --save
 ```
@@ -44,3 +53,3 @@
 import React from 'react'
-import CurrencyInput from 'react-currency-input';
+import CurrencyInput from '@ericblade/react-currency-input';
 
@@ -70,3 +79,3 @@ const MyApp = React.createClass({
 import React from 'react'
-import CurrencyInput from 'react-currency-input';
+import CurrencyInput from '@ericblade/react-currency-input';
 
@@ -73,0 +82,0 @@ const MyApp = React.createClass({

No alert changes

Improved metrics

Total package byte prevSize

154474

14.64%

Lines of code

2942

15.28%

Number of lines in readme file

166

5.73%

Worsened metrics

Number of package files

22

-29.03%

No dependency changes