armstrong-react - npm Package Compare versions

Comparing version 2.5.9 to 2.5.10

dist/components/form/inputs/codeInput.d.ts

@@ -23,4 +23,7 @@ /// <reference types="react" />
     handleFocus(index: number, input: HTMLInputElement): void;
+    private storedKey;
+    keyDown(e: React.KeyboardEvent<HTMLInputElement>): void;
+    handleClick(e: React.MouseEvent<HTMLInputElement>): void;
     componentDidMount(): void;
     render(): JSX.Element;
 }

dist/components/form/inputs/codeInput.js

@@ -22,3 +22,5 @@ "use strict";
         var currentVal = current.value.trim();
-        currentVal = currentVal.slice(0, this.props.lengthPerBox[this.state.focusIndex]);
+        var lpb = this.props.lengthPerBox[this.state.focusIndex];
+        var retFromStore = false;
+        currentVal = currentVal.slice(0, lpb);
         if (e.keyCode === 8) {
@@ -35,4 +37,9 @@ movingBack = true;
             el = current.nextSibling;
+            if (this.storedKey && el && !el.value) {
+                el.value = this.storedKey;
+                this.storedKey = null;
+                retFromStore = true;
+            }
         }
-        if (currentVal.length < this.props.lengthPerBox[this.state.focusIndex] && !movingBack) {
+        if (currentVal.length < lpb && !movingBack) {
             return;
@@ -42,2 +49,5 @@ }
             el.focus();
+            if (el && el.value && !movingBack && !retFromStore) {
+                el.value = "";
+            }
         }
@@ -85,8 +95,25 @@ };
     CodeInput.prototype.handleFocus = function (index, input) {
-        this.setState({ focusIndex: index }, function () {
-            input.select();
-            // ios safari fix
-            //input.setSelectionRange(0, 9999);
-        });
+        this.setState({ focusIndex: index });
+        this.storedKey = null;
     };
+    CodeInput.prototype.keyDown = function (e) {
+        var lpb = this.props.lengthPerBox[this.state.focusIndex];
+        var selectionLength = window.getSelection().toString().length;
+        if (selectionLength === lpb) {
+            return;
+        }
+        if (e.currentTarget["value"].length === lpb) {
+            if (e.keyCode >= 48 && e.keyCode <= 57) {
+                this.storedKey = e.key;
+            }
+            if (e.keyCode >= 65 && e.keyCode <= 90) {
+                this.storedKey = e.key;
+            }
+        }
+    };
+    CodeInput.prototype.handleClick = function (e) {
+        if (e.currentTarget.value) {
+            e.currentTarget.select();
+        }
+    };
     CodeInput.prototype.componentDidMount = function () {
@@ -112,3 +139,3 @@ var _this = this;
         return (React.createElement("div", { className: classes },
-            React.createElement("div", null, this.props.lengthPerBox.map(function (lpb, i) { return (React.createElement("input", { id: "input_" + _this.uniq + "_" + i, readOnly: _this.props.readonly, className: "code-input-field", key: "cb_" + _this.uniq + "_" + i, type: _this.props.type || "text", placeholder: _this.props.placeholder, maxLength: lpb, onFocus: function (e) { return _this.handleFocus(i, e.target); }, onKeyUp: function (e) { return _this.focusNext(e); }, onPaste: function (e) { return _this.handlePaste(e); }, onChange: function (e) { return _this.buildValue(); } })); })),
+            React.createElement("div", null, this.props.lengthPerBox.map(function (lpb, i) { return (React.createElement("input", { id: "input_" + _this.uniq + "_" + i, readOnly: _this.props.readonly, className: "code-input-field", key: "cb_" + _this.uniq + "_" + i, type: _this.props.type || "text", placeholder: _this.props.placeholder, maxLength: lpb, onClick: function (e) { return _this.handleClick(e); }, onFocus: function (e) { return _this.handleFocus(i, e.target); }, onKeyUp: function (e) { return _this.focusNext(e); }, onKeyDown: function (e) { return _this.keyDown(e); }, onPaste: function (e) { return _this.handlePaste(e); }, onChange: function (e) { return _this.buildValue(); } })); })),
             React.createElement(validationWrapper_1.ValidationLabel, { message: validationMessage, mode: validationMode })));
@@ -115,0 +142,0 @@ };

package.json

 {
   "name": "armstrong-react",
-  "version": "2.5.9",
+  "version": "2.5.10",
   "description": "Rocketmakers Armstrong library of React components",
@@ -5,0 +5,0 @@ "main": "./dist/index.js",

No alert changes

Improved metrics

Total package byte prevSize

759700

0.27%

Lines of code

14992

0.4%

No dependency changes