otp-input-react - npm Package Compare versions

Comparing version 0.0.12 to 0.1.0

dist/components/__test__/OTPReader.test.js

@@ -179,3 +179,3 @@ "use strict";
 
-test("should only take numbers when otpType is number ", _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee6() {
+test("should prevent non-numeric when otpType is number ", _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee6() {
   var value, onChange, props, _inputSetup7, rerender, getAllByTestId, allInp;
@@ -214,2 +214,74 @@
   }, _callee6, undefined);
+})));
+
+test("should prevent numbers when otpType is alpha ", _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee7() {
+  var value, onChange, props, _inputSetup8, rerender, getAllByTestId, allInp;
+
+  return regeneratorRuntime.wrap(function _callee7$(_context7) {
+    while (1) {
+      switch (_context7.prev = _context7.next) {
+        case 0:
+          value = "";
+          onChange = jest.fn(function (e) {
+            value = e;
+          });
+          props = {
+            onChange: onChange,
+            value: value,
+            autoFocus: true,
+            otpType: "alpha"
+          };
+          _inputSetup8 = inputSetup(props), rerender = _inputSetup8.rerender, getAllByTestId = _inputSetup8.getAllByTestId;
+          allInp = getAllByTestId("input");
+
+          _react3.fireEvent.change(allInp[0], { target: { value: "3" } });
+          _context7.next = 8;
+          return rerender(_react2.default.createElement(_OTPReader2.default, _extends({}, props, { value: value })));
+
+        case 8:
+          expect(allInp[0].value).toBe("");
+          expect(onChange).toBeCalledTimes(0);
+
+        case 10:
+        case "end":
+          return _context7.stop();
+      }
+    }
+  }, _callee7, undefined);
+})));
+
+test("should prevent non-alpha when otpType is alphanumeric", _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee8() {
+  var value, onChange, props, _inputSetup9, rerender, getAllByTestId, allInp;
+
+  return regeneratorRuntime.wrap(function _callee8$(_context8) {
+    while (1) {
+      switch (_context8.prev = _context8.next) {
+        case 0:
+          value = "";
+          onChange = jest.fn(function (e) {
+            value = e;
+          });
+          props = {
+            onChange: onChange,
+            value: value,
+            autoFocus: true,
+            otpType: "alpha"
+          };
+          _inputSetup9 = inputSetup(props), rerender = _inputSetup9.rerender, getAllByTestId = _inputSetup9.getAllByTestId;
+          allInp = getAllByTestId("input");
+
+          _react3.fireEvent.change(allInp[0], { target: { value: "#" } });
+          _context8.next = 8;
+          return rerender(_react2.default.createElement(_OTPReader2.default, _extends({}, props, { value: value })));
+
+        case 8:
+          expect(allInp[0].value).toBe("");
+          expect(onChange).toBeCalledTimes(0);
+
+        case 10:
+        case "end":
+          return _context8.stop();
+      }
+    }
+  }, _callee8, undefined);
 })));

dist/components/OTPReader.js

@@ -107,3 +107,3 @@ "use strict";
   secure: _propTypes2.default.bool,
-  otpType: _propTypes2.default.oneOf(["number", "any"]),
+  otpType: _propTypes2.default.oneOf(["number", "alpha", "alphanumeric", "any"]),
   value: _propTypes2.default.oneOfType([_propTypes2.default.string, _propTypes2.default.number]),
@@ -110,0 +110,0 @@ inputStyles: _propTypes2.default.object,

dist/hooks/useOTP.js

@@ -11,2 +11,9 @@ "use strict";
 
+var LOWER_A_KEYCODE = 97;
+var UPPER_A_KEYCODE = 65;
+var LOWER_Z_KEYCODE = 122;
+var UPPER_Z_KEYCODE = 90;
+var ZERO_KEYCODE = 48;
+var NINE_KEYCODE = 57;
+
 var useOTP = function useOTP(_ref) {
@@ -79,12 +86,33 @@ var autoFocus = _ref.autoFocus,
 
-    handleOtpChange(otp);
+    // Pass copied value through onChange rules
+    var filteredOtpValue = [otp.length];
+    var validCharIndex = 0;
+    for (var charIndex = 0; charIndex < otp.length; ++charIndex) {
+      if (isValidateChar(otp[charIndex])) {
+        filteredOtpValue[validCharIndex] = otp[charIndex];
+        validCharIndex++;
+      }
+    }
+
+    handleOtpChange(filteredOtpValue);
   };
 
+  var isValidateChar = function isValidateChar(char) {
+    switch (otpType) {
+      case "number":
+        return !(char.charCodeAt(0) > NINE_KEYCODE || char.charCodeAt(0) < ZERO_KEYCODE);
+      case "alpha":
+        return !(char.charCodeAt(0) > LOWER_Z_KEYCODE || char.charCodeAt(0) < UPPER_A_KEYCODE);
+      case "alphanumeric":
+        return !(char.charCodeAt(0) > LOWER_Z_KEYCODE || char.charCodeAt(0) < ZERO_KEYCODE);
+      default:
+        return true;
+    }
+  };
+
   var handleOnChange = function handleOnChange(e) {
-    if (otpType === "number" && Number.isNaN(Number(e.target.value))) {
-      // preventing number other then number inputs
-      return;
+    if (isValidateChar(e.target.value)) {
+      changeActiveInputValue(e.target.value);
+      focusInputByDirection("next");
     }
-    changeActiveInputValue(e.target.value);
-    focusInputByDirection("next");
   };
@@ -91,0 +119,0 @@

package.json

@@ -14,3 +14,3 @@ {
   "description": "React functional component for otp input",
-  "version": "0.0.12",
+  "version": "0.1.0",
   "private": false,
@@ -17,0 +17,0 @@ "main": "dist/index.js",

README.md

@@ -39,104 +39,28 @@ # otp-input-react
 
-<table>
-  <tr>
-    <th>Name<br></th>
-    <th>Type</th>
-    <th>Required</th>
-    <th>Default</th>
-    <th>Description</th>
-    <th>Status</th>
-  </tr>
-  <tr>
-    <td>OTPLength</td>
-    <td>number</td>
-    <td>false</td>
-    <td>4</td>
-    <td>Number of input boxes.</td>
-    <td>Working</td>
-  </tr>
-  <tr>
-    <td>onChange</td>
-    <td>function</td>
-    <td><strong>true</strong></td>
-    <td>-</td>
-    <td>Returns OTP code typed in inputs.</td>
-    <td>Working</td>
-  </tr>
-  <tr>
-    <td>value</td>
-    <td>string / number</td>
-    <td><strong>true</strong></td>
-    <td>''</td>
-    <td>The value of the otp passed into the component.</td>
-    <td>Working</td>
-  </tr>      
-  <tr>
-    <td>disabled</td>
-    <td>boolean</td>
-    <td>false</td>
-    <td>false</td>
-    <td>Disables all the inputs.</td>
-    <td>Working</td>
-  </tr>    
-  <tr>
-    <td>autoFocus</td>
-    <td>boolean</td>
-    <td>false</td>
-    <td>false</td>
-    <td>Auto focuses input on inital page load.</td>
-    <td>Working</td>
-  </tr>
-  <tr>
-    <td>otpType</td>
-    <td>Enum: any|number </td>
-    <td>false</td>
-    <td>any</td>
-    <td>any - allows any value. number - allow only numbers.</td>
-    <td>Working</td>
-  </tr>
-  <tr>
-    <td>secure</td>
-    <td>Boolean</td>
-    <td>false</td>
-    <td>false</td>
-    <td>Change input type to password.</td>
-    <td>Working</td>
-  </tr>  
-  <tr>
-    <td>inputClassName</td>
-    <td>String</td>
-    <td>-</td>
-    <td>-</td>
-    <td>Class for root element.</td>
-    <td>Working</td>
-  </tr>  
-  <tr>
-    <td>className</td>
-    <td>String</td>
-    <td>-</td>
-    <td>-</td>
-    <td>Class for root element.</td>
-    <td>Working</td>
-  </tr>  
-  <tr>
-    <td>inputStyles</td>
-    <td>Object</td>
-    <td>-</td>
-    <td>-</td>
-    <td>Styles for input element.</td>
-    <td>Working</td>
-  </tr>  
-  <tr>
-    <td>style</td>
-    <td>Object</td>
-    <td>-</td>
-    <td>-</td>
-    <td>Styles for root element.</td>
-    <td>Working</td>
-  </tr>  
-</table>
+| Name | Type | Required | Default | Description | Status |
+| -- | -- | -- | -- | -- | -- |
+| OTPLength | number | false | 4 | Number of input boxes. | Working |
+| onChange | function | **true** | - | Returns OTP code typed in inputs. | Working |
+| value | string / number | **true** | '' | The value of the otp passed into the component. | Working |
+| disabled | boolean | false | false | Disables all the inputs. | Working |
+| autoFocus | boolean | false | false | Auto focuses input on inital page load. | Working |
+| otpType | Enum: `any\|number\|alpha\|alphanumeric`  | false | any | `any` - allows any value. `number` - allow only numbers. `alpha` - allows only `a-zA-Z`. `alphanumeric` - allows `0-9a-zA-z` | Working |
+| secure | Boolean | false | false | Change input type to password. | Working |
+| inputClassName | String | - | - | Class for root element. | Working |
+| className | String | - | - | Class for root element. | Working |
+| inputStyles | Object | - | - | Styles for input element. | Working |
+| style | Object | - | - | Styles for root element. | Working |
 
+### TODO
+- [x] Add other type input
+- [] Change scaffolding 
+- [] Add CI
+- [] Add OTP Timer with resend otp optional type
+
+### Credits
+https://github.com/hotdang-ca - For adding `alpha|alphanumeric`	type and updating docs
+
 ### Contributing
 
-Feel Free to contributing or feture request
+Feel Free to contributing or feature request
 
@@ -148,1 +72,5 @@ 1. Fork it ( https://github.com/shubhanus/otp-input-react/fork )
 5. Create a new pull request.
+
+
+
+

src/App.js

@@ -46,2 +46,18 @@ import React, { useState } from "react";
         <OtpInputCard
+          title="alpha"
+          // autoFocus
+          OTPLength={4}
+          otpType="alpha"
+          disabled={false}
+          // secure
+        />
+        <OtpInputCard
+          title="alphanumeric"
+          // autoFocus
+          OTPLength={4}
+          otpType="alphanumeric"
+          disabled={false}
+          // secure
+        />
+        <OtpInputCard
           title="Any character input"
@@ -48,0 +64,0 @@ // autoFocus

src/lib/components/__test__/OTPReader.test.js

@@ -124,3 +124,3 @@ import React from "react";
 
-test("should only take numbers when otpType is number ", async () => {
+test("should prevent non-numeric when otpType is number ", async () => {
   let value = "";
@@ -143,1 +143,40 @@ const onChange = jest.fn(e => {
 });
+
+test("should prevent numbers when otpType is alpha ", async () => {
+  let value = "";
+  const onChange = jest.fn(e => {
+    value = e;
+  });
+  const props = {
+    onChange,
+    value,
+    autoFocus: true,
+    otpType: "alpha"
+  };
+  const { rerender, getAllByTestId } = inputSetup(props);
+  const allInp = getAllByTestId("input");
+  fireEvent.change(allInp[0], { target: { value: "3" } });
+  await rerender(<OTPInput {...props} value={value} />);
+  expect(allInp[0].value).toBe("");
+  expect(onChange).toBeCalledTimes(0);
+});
+
+test("should prevent non-alpha when otpType is alphanumeric", async () => {
+  let value = "";
+  const onChange = jest.fn(e => {
+    value = e;
+  });
+  const props = {
+    onChange,
+    value,
+    autoFocus: true,
+    otpType: "alpha"
+  };
+  const { rerender, getAllByTestId } = inputSetup(props);
+  const allInp = getAllByTestId("input");
+  fireEvent.change(allInp[0], { target: { value: "#" } });
+  await rerender(<OTPInput {...props} value={value} />);
+  expect(allInp[0].value).toBe("");
+  expect(onChange).toBeCalledTimes(0);
+});
+

src/lib/components/OTPReader.js

@@ -101,3 +101,3 @@ // @flow
   secure: PropTypes.bool,
-  otpType: PropTypes.oneOf(["number", "any"]),
+  otpType: PropTypes.oneOf(["number", "alpha", "alphanumeric", "any"]),
   value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
@@ -104,0 +104,0 @@ inputStyles: PropTypes.object,

src/lib/hooks/useOTP.js

 import { useState } from "react";
 
+const LOWER_A_KEYCODE = 97;
+const UPPER_A_KEYCODE = 65;
+const LOWER_Z_KEYCODE = 122;
+const UPPER_Z_KEYCODE = 90;
+const ZERO_KEYCODE = 48;
+const NINE_KEYCODE = 57;
+
 const useOTP = ({ autoFocus, value, otpType, onChange, OTPLength }) => {
@@ -60,12 +67,33 @@ const [activeInput, setActiveInput] = useState(autoFocus ? 0 : -1);
 
-    handleOtpChange(otp);
+    // Pass copied value through onChange rules
+    let filteredOtpValue = [otp.length];
+    let validCharIndex = 0;
+    for (let charIndex = 0; charIndex < otp.length; ++charIndex) {
+      if (isValidateChar(otp[charIndex])) {
+        filteredOtpValue[validCharIndex] = (otp[charIndex]);
+        validCharIndex++;
+      }
+    }
+
+    handleOtpChange(filteredOtpValue);
   };
 
+  const isValidateChar = char => {
+    switch (otpType) {
+      case "number":
+        return !(char.charCodeAt(0) > NINE_KEYCODE || char.charCodeAt(0) < ZERO_KEYCODE);
+      case "alpha":
+        return !(char.charCodeAt(0) > LOWER_Z_KEYCODE || char.charCodeAt(0) < UPPER_A_KEYCODE);
+      case "alphanumeric":
+        return !(char.charCodeAt(0) > LOWER_Z_KEYCODE || char.charCodeAt(0) < ZERO_KEYCODE);
+      default:
+        return true;
+    }
+  }
+
   const handleOnChange = e => {
-    if (otpType === "number" && Number.isNaN(Number(e.target.value))) {
-      // preventing number other then number inputs
-      return;
+    if (isValidateChar(e.target.value)) {
+      changeActiveInputValue(e.target.value);
+      focusInputByDirection("next");
     }
-    changeActiveInputValue(e.target.value);
-    focusInputByDirection("next");
   };
@@ -72,0 +100,0 @@

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

73825

increased by7.32%

Lines of code

1907

increased by9.41%

Worsened metrics

Number of lines in readme file

75

decreased by-48.98%

No dependency changes