react-otp-field - npm Package Compare versions

Comparing version 1.1.0 to 2.0.0

lib/index.js

@@ -1,1 +0,1 @@
-"use strict";function _typeof(obj){"@babel/helpers - typeof";if(typeof Symbol==="function"&&typeof Symbol.iterator==="symbol"){_typeof=function _typeof(obj){return typeof obj;};}else{_typeof=function _typeof(obj){return obj&&typeof Symbol==="function"&&obj.constructor===Symbol&&obj!==Symbol.prototype?"symbol":typeof obj;};}return _typeof(obj);}Object.defineProperty(exports,"__esModule",{value:true});exports["default"]=void 0;var _react=_interopRequireWildcard(require("react"));var _propTypes=_interopRequireDefault(require("prop-types"));function _interopRequireDefault(obj){return obj&&obj.__esModule?obj:{"default":obj};}function _getRequireWildcardCache(nodeInterop){if(typeof WeakMap!=="function")return null;var cacheBabelInterop=new WeakMap();var cacheNodeInterop=new WeakMap();return(_getRequireWildcardCache=function _getRequireWildcardCache(nodeInterop){return nodeInterop?cacheNodeInterop:cacheBabelInterop;})(nodeInterop);}function _interopRequireWildcard(obj,nodeInterop){if(!nodeInterop&&obj&&obj.__esModule){return obj;}if(obj===null||_typeof(obj)!=="object"&&typeof obj!=="function"){return{"default":obj};}var cache=_getRequireWildcardCache(nodeInterop);if(cache&&cache.has(obj)){return cache.get(obj);}var newObj={};var hasPropertyDescriptor=Object.defineProperty&&Object.getOwnPropertyDescriptor;for(var key in obj){if(key!=="default"&&Object.prototype.hasOwnProperty.call(obj,key)){var desc=hasPropertyDescriptor?Object.getOwnPropertyDescriptor(obj,key):null;if(desc&&(desc.get||desc.set)){Object.defineProperty(newObj,key,desc);}else{newObj[key]=obj[key];}}}newObj["default"]=obj;if(cache){cache.set(obj,newObj);}return newObj;}function _extends(){_extends=Object.assign||function(target){for(var i=1;i<arguments.length;i++){var source=arguments[i];for(var key in source){if(Object.prototype.hasOwnProperty.call(source,key)){target[key]=source[key];}}}return target;};return _extends.apply(this,arguments);}function _toConsumableArray(arr){return _arrayWithoutHoles(arr)||_iterableToArray(arr)||_unsupportedIterableToArray(arr)||_nonIterableSpread();}function _nonIterableSpread(){throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");}function _iterableToArray(iter){if(typeof Symbol!=="undefined"&&iter[Symbol.iterator]!=null||iter["@@iterator"]!=null)return Array.from(iter);}function _arrayWithoutHoles(arr){if(Array.isArray(arr))return _arrayLikeToArray(arr);}function _slicedToArray(arr,i){return _arrayWithHoles(arr)||_iterableToArrayLimit(arr,i)||_unsupportedIterableToArray(arr,i)||_nonIterableRest();}function _nonIterableRest(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");}function _iterableToArrayLimit(arr,i){var _i=arr==null?null:typeof Symbol!=="undefined"&&arr[Symbol.iterator]||arr["@@iterator"];if(_i==null)return;var _arr=[];var _n=true;var _d=false;var _s,_e;try{for(_i=_i.call(arr);!(_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"]!=null)_i["return"]();}finally{if(_d)throw _e;}}return _arr;}function _arrayWithHoles(arr){if(Array.isArray(arr))return arr;}function _createForOfIteratorHelper(o,allowArrayLike){var it=typeof Symbol!=="undefined"&&o[Symbol.iterator]||o["@@iterator"];if(!it){if(Array.isArray(o)||(it=_unsupportedIterableToArray(o))||allowArrayLike&&o&&typeof o.length==="number"){if(it)o=it;var i=0;var F=function F(){};return{s:F,n:function n(){if(i>=o.length)return{done:true};return{done:false,value:o[i++]};},e:function e(_e2){throw _e2;},f:F};}throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");}var normalCompletion=true,didErr=false,err;return{s:function s(){it=it.call(o);},n:function n(){var step=it.next();normalCompletion=step.done;return step;},e:function e(_e3){didErr=true;err=_e3;},f:function f(){try{if(!normalCompletion&&it["return"]!=null)it["return"]();}finally{if(didErr)throw err;}}};}function _unsupportedIterableToArray(o,minLen){if(!o)return;if(typeof o==="string")return _arrayLikeToArray(o,minLen);var n=Object.prototype.toString.call(o).slice(8,-1);if(n==="Object"&&o.constructor)n=o.constructor.name;if(n==="Map"||n==="Set")return Array.from(o);if(n==="Arguments"||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n))return _arrayLikeToArray(o,minLen);}function _arrayLikeToArray(arr,len){if(len==null||len>arr.length)len=arr.length;for(var i=0,arr2=new Array(len);i<len;i++){arr2[i]=arr[i];}return arr2;}var generateDefaultValues=function generateDefaultValues(length,inputValues){if(length<1)return[];return Array.from({length:length},function(_,i){return inputValues[i]||'';});};var isValid=function isValid(regex,value){return regex.test(value);};var focusOnNextInput=function focusOnNextInput(newValues,currentValues,setFocusInput){var _iterator=_createForOfIteratorHelper(newValues.entries()),_step;try{for(_iterator.s();!(_step=_iterator.n()).done;){var _step$value=_slicedToArray(_step.value,2),i=_step$value[0],element=_step$value[1];if(!element||i===currentValues.length-1){setFocusInput(i);break;}}}catch(err){_iterator.e(err);}finally{_iterator.f();}};var OtpInput=function OtpInput(_ref){var _ref$value=_ref.value,value=_ref$value===void 0?'':_ref$value,_ref$onChange=_ref.onChange,onChange=_ref$onChange===void 0?function(value){return console.log(value);}:_ref$onChange,_ref$numInputs=_ref.numInputs,numInputs=_ref$numInputs===void 0?4:_ref$numInputs,onChangeRegex=_ref.onChangeRegex,_ref$labelText=_ref.labelText,labelText=_ref$labelText===void 0?'Enter verification code':_ref$labelText,_ref$classNames=_ref.classNames,classNames=_ref$classNames===void 0?'otp-input':_ref$classNames,_ref$autoComplete=_ref.autoComplete,autoComplete=_ref$autoComplete===void 0?'off':_ref$autoComplete,_ref$autoFocus=_ref.autoFocus,autoFocus=_ref$autoFocus===void 0?false:_ref$autoFocus,separator=_ref.separator,_ref$isTypeNumber=_ref.isTypeNumber,isTypeNumber=_ref$isTypeNumber===void 0?false:_ref$isTypeNumber,_ref$hasErrored=_ref.hasErrored,hasErrored=_ref$hasErrored===void 0?false:_ref$hasErrored,inputProps=_ref.inputProps;var defaultValues=generateDefaultValues(numInputs,value.split(''));var _useState=(0,_react.useState)(defaultValues),_useState2=_slicedToArray(_useState,2),values=_useState2[0],setValues=_useState2[1];var _useState3=(0,_react.useState)(autoFocus?0:null),_useState4=_slicedToArray(_useState3,2),focusInput=_useState4[0],setFocusInput=_useState4[1];var inputRefs=(0,_react.useRef)([]);(0,_react.useEffect)(function(){setValues(defaultValues);},[value,numInputs]);(0,_react.useEffect)(function(){var input=inputRefs.current[focusInput];!!input&&input.focus();},[focusInput]);var handleChange=function handleChange(inputValue,index){if(!!onChangeRegex&&!isValid(onChangeRegex,inputValue))return;var newValues=_toConsumableArray(values);var j=0;values.forEach(function(element,i){var isNewValuesAndAnyEmptyInput=!element&&!!inputValue;var isActionRemoveInputValue=!!element&&index===i&&!inputValue;if(isNewValuesAndAnyEmptyInput){newValues[i]=inputValue.split('')[!values[index]?j:j+1]||'';j++;}else if(isActionRemoveInputValue){newValues[i]='';}});if(inputValue){focusOnNextInput(newValues,values,setFocusInput);}onChange(newValues.join(''));};var onKeyPressed=function onKeyPressed(key,index){switch(key){case'Backspace':case'ArrowLeft':return setFocusInput(index-1);case'ArrowRight':return setFocusInput(index+1);default:return;}};return _react["default"].createElement("div",{className:"".concat(classNames," ").concat(hasErrored?'otp-input--has-errored':'').trim()},values.map(function(element,index){return _react["default"].createElement("div",{key:index},_react["default"].createElement("input",_extends({ref:function ref(el){return inputRefs.current[index]=el;},type:isTypeNumber?'number':'text',value:element,onChange:function onChange(e){return handleChange(e.target.value,index);},"aria-label":labelText,"aria-required":"true",autoComplete:index===0?autoComplete:'off',onKeyDown:function onKeyDown(_ref2){var key=_ref2.key;return onKeyPressed(key,index);}},inputProps)),index!==values.length-1&&separator&&separator);}));};OtpInput.propTypes={value:_propTypes["default"].oneOfType([_propTypes["default"].string,_propTypes["default"].number]).isRequired,onChange:_propTypes["default"].func.isRequired,numInputs:_propTypes["default"].number.isRequired,onChangeRegex:_propTypes["default"].instanceOf(RegExp),labelText:_propTypes["default"].string,classNames:_propTypes["default"].string,autoComplete:_propTypes["default"].string,autoFocus:_propTypes["default"].bool,separator:_propTypes["default"].node,isTypeNumber:_propTypes["default"].bool,hasErrored:_propTypes["default"].bool,inputProps:_propTypes["default"].object};var _default=OtpInput;exports["default"]=_default;
+"use strict";function _typeof(obj){"@babel/helpers - typeof";if(typeof Symbol==="function"&&typeof Symbol.iterator==="symbol"){_typeof=function _typeof(obj){return typeof obj;};}else{_typeof=function _typeof(obj){return obj&&typeof Symbol==="function"&&obj.constructor===Symbol&&obj!==Symbol.prototype?"symbol":typeof obj;};}return _typeof(obj);}Object.defineProperty(exports,"__esModule",{value:true});exports["default"]=void 0;var _react=_interopRequireWildcard(require("react"));var _propTypes=_interopRequireDefault(require("prop-types"));function _interopRequireDefault(obj){return obj&&obj.__esModule?obj:{"default":obj};}function _getRequireWildcardCache(nodeInterop){if(typeof WeakMap!=="function")return null;var cacheBabelInterop=new WeakMap();var cacheNodeInterop=new WeakMap();return(_getRequireWildcardCache=function _getRequireWildcardCache(nodeInterop){return nodeInterop?cacheNodeInterop:cacheBabelInterop;})(nodeInterop);}function _interopRequireWildcard(obj,nodeInterop){if(!nodeInterop&&obj&&obj.__esModule){return obj;}if(obj===null||_typeof(obj)!=="object"&&typeof obj!=="function"){return{"default":obj};}var cache=_getRequireWildcardCache(nodeInterop);if(cache&&cache.has(obj)){return cache.get(obj);}var newObj={};var hasPropertyDescriptor=Object.defineProperty&&Object.getOwnPropertyDescriptor;for(var key in obj){if(key!=="default"&&Object.prototype.hasOwnProperty.call(obj,key)){var desc=hasPropertyDescriptor?Object.getOwnPropertyDescriptor(obj,key):null;if(desc&&(desc.get||desc.set)){Object.defineProperty(newObj,key,desc);}else{newObj[key]=obj[key];}}}newObj["default"]=obj;if(cache){cache.set(obj,newObj);}return newObj;}function _extends(){_extends=Object.assign||function(target){for(var i=1;i<arguments.length;i++){var source=arguments[i];for(var key in source){if(Object.prototype.hasOwnProperty.call(source,key)){target[key]=source[key];}}}return target;};return _extends.apply(this,arguments);}function _toConsumableArray(arr){return _arrayWithoutHoles(arr)||_iterableToArray(arr)||_unsupportedIterableToArray(arr)||_nonIterableSpread();}function _nonIterableSpread(){throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");}function _iterableToArray(iter){if(typeof Symbol!=="undefined"&&iter[Symbol.iterator]!=null||iter["@@iterator"]!=null)return Array.from(iter);}function _arrayWithoutHoles(arr){if(Array.isArray(arr))return _arrayLikeToArray(arr);}function _slicedToArray(arr,i){return _arrayWithHoles(arr)||_iterableToArrayLimit(arr,i)||_unsupportedIterableToArray(arr,i)||_nonIterableRest();}function _nonIterableRest(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");}function _iterableToArrayLimit(arr,i){var _i=arr==null?null:typeof Symbol!=="undefined"&&arr[Symbol.iterator]||arr["@@iterator"];if(_i==null)return;var _arr=[];var _n=true;var _d=false;var _s,_e;try{for(_i=_i.call(arr);!(_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"]!=null)_i["return"]();}finally{if(_d)throw _e;}}return _arr;}function _arrayWithHoles(arr){if(Array.isArray(arr))return arr;}function _createForOfIteratorHelper(o,allowArrayLike){var it=typeof Symbol!=="undefined"&&o[Symbol.iterator]||o["@@iterator"];if(!it){if(Array.isArray(o)||(it=_unsupportedIterableToArray(o))||allowArrayLike&&o&&typeof o.length==="number"){if(it)o=it;var i=0;var F=function F(){};return{s:F,n:function n(){if(i>=o.length)return{done:true};return{done:false,value:o[i++]};},e:function e(_e2){throw _e2;},f:F};}throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");}var normalCompletion=true,didErr=false,err;return{s:function s(){it=it.call(o);},n:function n(){var step=it.next();normalCompletion=step.done;return step;},e:function e(_e3){didErr=true;err=_e3;},f:function f(){try{if(!normalCompletion&&it["return"]!=null)it["return"]();}finally{if(didErr)throw err;}}};}function _unsupportedIterableToArray(o,minLen){if(!o)return;if(typeof o==="string")return _arrayLikeToArray(o,minLen);var n=Object.prototype.toString.call(o).slice(8,-1);if(n==="Object"&&o.constructor)n=o.constructor.name;if(n==="Map"||n==="Set")return Array.from(o);if(n==="Arguments"||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n))return _arrayLikeToArray(o,minLen);}function _arrayLikeToArray(arr,len){if(len==null||len>arr.length)len=arr.length;for(var i=0,arr2=new Array(len);i<len;i++){arr2[i]=arr[i];}return arr2;}var generateDefaultValues=function generateDefaultValues(length,inputValues){if(length<1)return[];return Array.from({length:length},function(_,i){return inputValues[i]||'';});};var isValid=function isValid(regex,value){return regex.test(value);};var focusOnNextInput=function focusOnNextInput(newValues,currentValues,setFocusInput){var _iterator=_createForOfIteratorHelper(newValues.entries()),_step;try{for(_iterator.s();!(_step=_iterator.n()).done;){var _step$value=_slicedToArray(_step.value,2),i=_step$value[0],element=_step$value[1];if(!element||i===currentValues.length-1){setFocusInput(i);break;}}}catch(err){_iterator.e(err);}finally{_iterator.f();}};var OtpField=function OtpField(_ref){var _ref$value=_ref.value,value=_ref$value===void 0?'':_ref$value,_ref$onChange=_ref.onChange,onChange=_ref$onChange===void 0?function(value){return console.log(value);}:_ref$onChange,_ref$numInputs=_ref.numInputs,numInputs=_ref$numInputs===void 0?4:_ref$numInputs,onChangeRegex=_ref.onChangeRegex,_ref$labelText=_ref.labelText,labelText=_ref$labelText===void 0?'Enter verification code':_ref$labelText,_ref$classNames=_ref.classNames,classNames=_ref$classNames===void 0?'otp-field':_ref$classNames,_ref$autoComplete=_ref.autoComplete,autoComplete=_ref$autoComplete===void 0?'off':_ref$autoComplete,_ref$autoFocus=_ref.autoFocus,autoFocus=_ref$autoFocus===void 0?false:_ref$autoFocus,separator=_ref.separator,_ref$isTypeNumber=_ref.isTypeNumber,isTypeNumber=_ref$isTypeNumber===void 0?false:_ref$isTypeNumber,_ref$hasErrored=_ref.hasErrored,hasErrored=_ref$hasErrored===void 0?false:_ref$hasErrored,inputProps=_ref.inputProps;var defaultValues=generateDefaultValues(numInputs,value.split(''));var _useState=(0,_react.useState)(defaultValues),_useState2=_slicedToArray(_useState,2),values=_useState2[0],setValues=_useState2[1];var _useState3=(0,_react.useState)(autoFocus?0:null),_useState4=_slicedToArray(_useState3,2),focusInput=_useState4[0],setFocusInput=_useState4[1];var inputRefs=(0,_react.useRef)([]);(0,_react.useEffect)(function(){setValues(defaultValues);},[value,numInputs]);(0,_react.useEffect)(function(){var input=inputRefs.current[focusInput];!!input&&input.focus();},[focusInput]);var handleChange=function handleChange(inputValue,index){if(!!onChangeRegex&&!isValid(onChangeRegex,inputValue))return;var newValues=_toConsumableArray(values);var j=0;values.forEach(function(element,i){var isNewValuesAndAnyEmptyInput=!element&&!!inputValue;var isActionRemoveInputValue=!!element&&index===i&&!inputValue;if(isNewValuesAndAnyEmptyInput){newValues[i]=inputValue.split('')[!values[index]?j:j+1]||'';j++;}else if(isActionRemoveInputValue){newValues[i]='';}});if(inputValue){focusOnNextInput(newValues,values,setFocusInput);}onChange(newValues.join(''));};var onKeyPressed=function onKeyPressed(key,index){switch(key){case'Backspace':case'ArrowLeft':return setFocusInput(index-1);case'ArrowRight':return setFocusInput(index+1);default:return;}};return _react["default"].createElement("div",{className:"".concat(classNames," ").concat(hasErrored?'otp-field--has-errored':'').trim()},values.map(function(element,index){return _react["default"].createElement("div",{key:index},_react["default"].createElement("input",_extends({ref:function ref(el){return inputRefs.current[index]=el;},type:isTypeNumber?'number':'text',value:element,onChange:function onChange(e){return handleChange(e.target.value,index);},"aria-label":labelText,"aria-required":"true",autoComplete:index===0?autoComplete:'off',onKeyDown:function onKeyDown(_ref2){var key=_ref2.key;return onKeyPressed(key,index);}},inputProps)),index!==values.length-1&&separator&&separator);}));};OtpField.propTypes={value:_propTypes["default"].oneOfType([_propTypes["default"].string,_propTypes["default"].number]).isRequired,onChange:_propTypes["default"].func.isRequired,numInputs:_propTypes["default"].number.isRequired,onChangeRegex:_propTypes["default"].instanceOf(RegExp),labelText:_propTypes["default"].string,classNames:_propTypes["default"].string,autoComplete:_propTypes["default"].string,autoFocus:_propTypes["default"].bool,separator:_propTypes["default"].node,isTypeNumber:_propTypes["default"].bool,hasErrored:_propTypes["default"].bool,inputProps:_propTypes["default"].object};var _default=OtpField;exports["default"]=_default;

package.json

 {
   "name": "react-otp-field",
-  "version": "1.1.0",
-  "description": "Customizable OTP Input component for the web built with React.js",
+  "version": "2.0.0",
+  "description": "Customizable OTP Field component for the web built with React.js",
   "main": "lib/index.js",
@@ -21,3 +21,3 @@ "scripts": {
     "type": "git",
-    "url": "git+https://github.com/coded-bear/react-otpinput.git"
+    "url": "git+https://github.com/coded-bear/react-otp-field.git"
   },
@@ -27,2 +27,3 @@ "keywords": [
     "otp input",
+    "otp field",
     "react otp input",
@@ -33,6 +34,6 @@ "react otp field"
   "author": "Łukasz Warchoł (https://lukaszwarchol.pl/)",
-  "homepage": "https://coded-bear.github.io/react-otpinput",
+  "homepage": "https://coded-bear.github.io/react-otp-field",
   "license": "MIT",
   "bugs": {
-    "url": "https://github.com/coded-bear/react-otpinput/issues"
+    "url": "https://github.com/coded-bear/react-otp-field/issues"
   },
@@ -39,0 +40,0 @@ "devDependencies": {

README.md

@@ -1,4 +0,4 @@
-# react-otpinput
+# react-otp-field
 
-Customizable OTP Input component for the web built with React.js
+Customizable OTP Field component for the web built with React.js
 
@@ -23,3 +23,3 @@ ## API
             <td>''</td>
-            <td>The value of the OTP Input.</td>
+            <td>The value of the OTP Field.</td>
         </tr>
@@ -58,4 +58,4 @@ <tr>
             <td>false</td>
-            <td>'otp-input'</td>
-            <td>Class names for OTP Input component.</td>
+            <td>'otp-field'</td>
+            <td>Class names for OTP Field component.</td>
         </tr>
@@ -95,3 +95,3 @@ <tr>
             <td>false</td>
-            <td>Error class 'otp-input--has-errored' for otp-input component.</td>
+            <td>Error class 'otp-field--has-errored' for otp-field component.</td>
         </tr>
@@ -98,0 +98,0 @@ <tr>

typings/index.d.ts

 import * as React from 'react';
 
-declare const OtpInput: React.FunctionComponent<OtpInputProps>;
+declare const OtpField: React.FunctionComponent<OtpFieldProps>;
 
-interface OtpInputProps {
+interface OtpFieldProps {
     value: string,
@@ -20,3 +20,3 @@ onChange: Function,
 
-export { OtpInputProps };
-export default OtpInput;
+export { OtpFieldProps };
+export default OtpField;

Fixed alerts

No website

Quality

Package does not have a website.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

15372

increased by0.14%

Number of low quality alerts

1

decreased by-50%

No dependency changes