react-otp-field/lib/index.js

Customizable OTP Field component for the web built with React.js

"use strict";function _typeof(obj){"@babel/helpers - typeof";return _typeof="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(obj){return typeof obj;}:function(obj){return obj&&"function"==typeof Symbol&&obj.constructor===Symbol&&obj!==Symbol.prototype?"symbol":typeof obj;},_typeof(obj);}Object.defineProperty(exports,"__esModule",{value:true});exports["default"]=void 0;var _react=_interopRequireWildcard(require("react"));var _propTypes=_interopRequireDefault(require("prop-types"));var _classnames=_interopRequireDefault(require("classnames"));var _excluded=["value","onChange","numInputs","onChangeRegex","labelText","classNames","autoComplete","autoFocus","separator","isTypeNumber","hasError","inputProps"];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?Object.assign.bind():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 _objectWithoutProperties(source,excluded){if(source==null)return{};var target=_objectWithoutPropertiesLoose(source,excluded);var key,i;if(Object.getOwnPropertySymbols){var sourceSymbolKeys=Object.getOwnPropertySymbols(source);for(i=0;i<sourceSymbolKeys.length;i++){key=sourceSymbolKeys[i];if(excluded.indexOf(key)>=0)continue;if(!Object.prototype.propertyIsEnumerable.call(source,key))continue;target[key]=source[key];}}return target;}function _objectWithoutPropertiesLoose(source,excluded){if(source==null)return{};var target={};var sourceKeys=Object.keys(source);var key,i;for(i=0;i<sourceKeys.length;i++){key=sourceKeys[i];if(excluded.indexOf(key)>=0)continue;target[key]=source[key];}return target;}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$hasError=_ref.hasError,hasError=_ref$hasError===void 0?false:_ref$hasError,inputProps=_ref.inputProps,props=_objectWithoutProperties(_ref,_excluded);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",_extends({className:(0,_classnames["default"])(classNames,{'otp-field--has-error':hasError})},props),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,hasError:_propTypes["default"].bool,inputProps:_propTypes["default"].object};var _default=OtpField;exports["default"]=_default;