otp-input-react - npm Package Compare versions

Comparing version 0.0.10 to 0.0.11

dist/components/OTPReader.js

@@ -9,4 +9,2 @@ "use strict";
 
-var _slicedToArray = function () { function sliceIterator(arr, i) { var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"]) _i["return"](); } finally { if (_d) throw _e; } } return _arr; } return function (arr, i) { if (Array.isArray(arr)) { return arr; } else if (Symbol.iterator in Object(arr)) { return sliceIterator(arr, i); } else { throw new TypeError("Invalid attempt to destructure non-iterable instance"); } }; }();
-
 var _react = require("react");
@@ -24,2 +22,6 @@
 
+var _useOTP2 = require("../hooks/useOTP");
+
+var _useOTP3 = _interopRequireDefault(_useOTP2);
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -41,114 +43,22 @@
 
-  var _useState = (0, _react.useState)(autoFocus ? 0 : -1),
-      _useState2 = _slicedToArray(_useState, 2),
-      activeInput = _useState2[0],
-      setActiveInput = _useState2[1];
+  var _useOTP = (0, _useOTP3.default)({
+    autoFocus: autoFocus,
+    value: value,
+    otpType: otpType,
+    onChange: onChange,
+    OTPLength: OTPLength
+  }),
+      activeInput = _useOTP.activeInput,
+      getOtpValue = _useOTP.getOtpValue,
+      handleOnChange = _useOTP.handleOnChange,
+      handleOnKeyDown = _useOTP.handleOnKeyDown,
+      handelOnInput = _useOTP.handelOnInput,
+      handleOnPaste = _useOTP.handleOnPaste,
+      onInputFocus = _useOTP.onInputFocus;
 
-  var getOtpValue = function getOtpValue() {
-    return value ? value.toString().split("") : [];
-  };
+  // Needs to be memorized
 
-  // Helper to return OTP from input
-  var handleOtpChange = function handleOtpChange(otp) {
-    var otpValue = otp.join("");
-    if (otpType === "number") {
-      otpValue = +otpValue;
-    }
-    onChange(otpValue);
-  };
 
-  // Focus on input by index
-  var focusInput = function focusInput(input) {
-    var nextActiveInput = Math.max(Math.min(OTPLength - 1, input), 0);
-    setActiveInput(nextActiveInput);
-  };
-
-  /**
-   * @typedef {"next" | "prev"} FocusDirections
-   * @param {FocusDirections} direction
-   */
-  var focusInputByDirection = function focusInputByDirection() {
-    var direction = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : "next";
-
-    focusInput(direction === "next" ? activeInput + 1 : activeInput - 1);
-  };
-
-  // Change OTP value at focused input
-  var changeActiveInputValue = function changeActiveInputValue(_ref2) {
-    var _ref3 = _slicedToArray(_ref2, 1),
-        nextValue = _ref3[0];
-
+  var renderInputs = (0, _react.useMemo)(function () {
     var otp = getOtpValue();
-    otp[activeInput] = nextValue;
-    handleOtpChange(otp);
-  };
-
-  // Handle pasted OTP
-  var handleOnPaste = function handleOnPaste(e) {
-    e.preventDefault();
-    var otp = getOtpValue();
-
-    // Get pastedData in an array of max size (num of inputs - current position)
-    var clipboardData = e.clipboardData.getData("text/plain").slice(0, OTPLength - activeInput).split("");
-
-    // Paste data from focused input onwards
-    // eslint-disable-next-line no-plusplus
-    for (var pos = 0; pos < OTPLength; ++pos) {
-      if (pos >= activeInput && clipboardData.length > 0) {
-        otp[pos] = clipboardData.shift();
-      }
-    }
-
-    handleOtpChange(otp);
-  };
-
-  var handleOnChange = function handleOnChange(e) {
-    if (otpType === "number" && Number.isNaN(Number(e.target.value))) {
-      // preventing number other then number inputs
-      return;
-    }
-    changeActiveInputValue(e.target.value);
-    focusInputByDirection("next");
-  };
-
-  // Handle cases of backspace, delete, left arrow, right arrow
-  var handleOnKeyDown = function handleOnKeyDown(e) {
-    switch (e.key) {
-      case "Backspace":
-        e.preventDefault();
-        changeActiveInputValue("");
-        focusInputByDirection("prev");
-        break;
-      case "Delete":
-        e.preventDefault();
-        changeActiveInputValue("");
-        break;
-      case "ArrowLeft":
-        e.preventDefault();
-        focusInputByDirection("prev");
-        break;
-      case "ArrowRight":
-        e.preventDefault();
-        focusInputByDirection("next");
-        break;
-      default:
-        break;
-    }
-  };
-
-  var handelOnInput = function handelOnInput(e) {
-    if (e.target.value.length > 1) {
-      e.preventDefault();
-      focusInputByDirection("next");
-    }
-  };
-
-  var onInputFocus = function onInputFocus(index, event) {
-    setActiveInput(index);
-    event.target.select();
-  };
-
-  // Needs to be memorized
-  var renderInputs = function renderInputs() {
-    var otp = getOtpValue();
     var inputs = [];
@@ -179,3 +89,3 @@
     return inputs;
-  };
+  }, [getOtpValue, OTPLength, inputClassName, inputStyles, activeInput, handleOnChange, handleOnKeyDown, handelOnInput, handleOnPaste, onInputFocus, disabled, autoFocus, secure]);
 
@@ -189,3 +99,3 @@ return _react2.default.createElement(
     },
-    renderInputs()
+    renderInputs
   );
@@ -192,0 +102,0 @@ };

package.json

@@ -6,3 +6,3 @@ {
   "description": "React functional component for otp input",
-  "version": "0.0.10",
+  "version": "0.0.11",
   "private": false,
@@ -51,2 +51,3 @@ "main": "dist/index.js",
     "@testing-library/react": "8.0.7",
+    "@testing-library/react-hooks": "1.1.0",
     "babel-cli": "6.26.0",
@@ -60,3 +61,4 @@ "babel-preset-env": "1.7.0",
     "react-dom": "16.8.6",
-    "react-scripts": "3.0.1"
+    "react-scripts": "3.0.1",
+    "react-test-renderer": "16.8.6"
   },
@@ -63,0 +65,0 @@ "peerDependencies": {

src/lib/components/OTPReader.js

 // @flow
-import React, { useState } from "react";
+import React, { useMemo } from "react";
 import PropTypes from "prop-types";
 import Input from "./Input";
+import useOTP from "../hooks/useOTP";
 
@@ -19,106 +20,20 @@ const OtpInput = ({
 }) => {
-  const [activeInput, setActiveInput] = useState(autoFocus ? 0 : -1);
+  const {
+    activeInput,
+    getOtpValue,
+    handleOnChange,
+    handleOnKeyDown,
+    handelOnInput,
+    handleOnPaste,
+    onInputFocus
+  } = useOTP({
+    autoFocus,
+    value,
+    otpType,
+    onChange,
+    OTPLength
+  });
 
-  const getOtpValue = () => (value ? value.toString().split("") : []);
-
-  // Helper to return OTP from input
-  const handleOtpChange = otp => {
-    let otpValue = otp.join("");
-    if (otpType === "number") {
-      otpValue = +otpValue;
-    }
-    onChange(otpValue);
-  };
-
-  // Focus on input by index
-  const focusInput = input => {
-    const nextActiveInput = Math.max(Math.min(OTPLength - 1, input), 0);
-    setActiveInput(nextActiveInput);
-  };
-
-  /**
-   * @typedef {"next" | "prev"} FocusDirections
-   * @param {FocusDirections} direction
-   */
-  const focusInputByDirection = (direction = "next") => {
-    focusInput(direction === "next" ? activeInput + 1 : activeInput - 1);
-  };
-
-  // Change OTP value at focused input
-  const changeActiveInputValue = ([nextValue]) => {
-    const otp = getOtpValue();
-    otp[activeInput] = nextValue;
-    handleOtpChange(otp);
-  };
-
-  // Handle pasted OTP
-  const handleOnPaste = e => {
-    e.preventDefault();
-    const otp = getOtpValue();
-
-    // Get pastedData in an array of max size (num of inputs - current position)
-    const clipboardData = e.clipboardData
-      .getData("text/plain")
-      .slice(0, OTPLength - activeInput)
-      .split("");
-
-    // Paste data from focused input onwards
-    // eslint-disable-next-line no-plusplus
-    for (let pos = 0; pos < OTPLength; ++pos) {
-      if (pos >= activeInput && clipboardData.length > 0) {
-        otp[pos] = clipboardData.shift();
-      }
-    }
-
-    handleOtpChange(otp);
-  };
-
-  const handleOnChange = e => {
-    if (otpType === "number" && Number.isNaN(Number(e.target.value))) {
-      // preventing number other then number inputs
-      return;
-    }
-    changeActiveInputValue(e.target.value);
-    focusInputByDirection("next");
-  };
-
-  // Handle cases of backspace, delete, left arrow, right arrow
-  const handleOnKeyDown = e => {
-    switch (e.key) {
-      case "Backspace":
-        e.preventDefault();
-        changeActiveInputValue("");
-        focusInputByDirection("prev");
-        break;
-      case "Delete":
-        e.preventDefault();
-        changeActiveInputValue("");
-        break;
-      case "ArrowLeft":
-        e.preventDefault();
-        focusInputByDirection("prev");
-        break;
-      case "ArrowRight":
-        e.preventDefault();
-        focusInputByDirection("next");
-        break;
-      default:
-        break;
-    }
-  };
-
-  const handelOnInput = e => {
-    if (e.target.value.length > 1) {
-      e.preventDefault();
-      focusInputByDirection("next");
-    }
-  };
-
-  const onInputFocus = (index, event) => {
-    setActiveInput(index);
-    event.target.select();
-  };
-
   // Needs to be memorized
-  const renderInputs = () => {
+  const renderInputs = useMemo(() => {
     const otp = getOtpValue();
@@ -152,3 +67,17 @@ const inputs = [];
     return inputs;
-  };
+  }, [
+    getOtpValue,
+    OTPLength,
+    inputClassName,
+    inputStyles,
+    activeInput,
+    handleOnChange,
+    handleOnKeyDown,
+    handelOnInput,
+    handleOnPaste,
+    onInputFocus,
+    disabled,
+    autoFocus,
+    secure
+  ]);
 
@@ -161,3 +90,3 @@ return (
     >
-      {renderInputs()}
+      {renderInputs}
     </div>
@@ -164,0 +93,0 @@ );

New alerts

Environment variable access

Supply chain risk

Package accesses environment variables, which may be a sign of credential stuffing or data theft.

Found 1 instance in 1 package

Fixed alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

68667

increased by28.62%

Number of package files

27

increased by22.73%

Lines of code

1743

increased by44.17%

Number of medium supply chain risk alerts

1

decreased by-50%

Worsened metrics

Dev dependency count

14

increased by16.67%

Number of low supply chain risk alerts

2

increased byInfinity%

No dependency changes