react-codes-input/lib/components/index.js

A react component for PIN, verify code and passcode entering.

!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t(require("react")):"function"==typeof define&&define.amd?define(["react"],t):"object"==typeof exports?exports["react-codes-input"]=t(require("react")):e["react-codes-input"]=t(e.react)}(this,(function(e){return function(){"use strict";var t={855:function(e,t,r){r.r(t),t.default={component:"react-codes-input__component",disabled:"react-codes-input__disabled",code:"react-codes-input__code",wrapper:"react-codes-input__wrapper","code-wrapper":"react-codes-input__code-wrapper","entered-value":"react-codes-input__entered-value",hide:"react-codes-input__hide",active:"react-codes-input__active","code-wrapper--focus":"react-codes-input__code-wrapper--focus",entered:"react-codes-input__entered","blink-empty":"react-codes-input__blink-empty"}},86:function(e,t,r){var n=this&&this.__assign||function(){return n=Object.assign||function(e){for(var t,r=1,n=arguments.length;r<n;r++)for(var a in t=arguments[r])Object.prototype.hasOwnProperty.call(t,a)&&(e[a]=t[a]);return e},n.apply(this,arguments)},a=this&&this.__createBinding||(Object.create?function(e,t,r,n){void 0===n&&(n=r),Object.defineProperty(e,n,{enumerable:!0,get:function(){return t[r]}})}:function(e,t,r,n){void 0===n&&(n=r),e[n]=t[r]}),o=this&&this.__setModuleDefault||(Object.create?function(e,t){Object.defineProperty(e,"default",{enumerable:!0,value:t})}:function(e,t){e.default=t}),i=this&&this.__importStar||function(e){if(e&&e.__esModule)return e;var t={};if(null!=e)for(var r in e)"default"!==r&&Object.prototype.hasOwnProperty.call(e,r)&&a(t,e,r);return o(t,e),t},c=this&&this.__read||function(e,t){var r="function"==typeof Symbol&&e[Symbol.iterator];if(!r)return e;var n,a,o=r.call(e),i=[];try{for(;(void 0===t||t-- >0)&&!(n=o.next()).done;)i.push(n.value)}catch(e){a={error:e}}finally{try{n&&!n.done&&(r=o.return)&&r.call(o)}finally{if(a)throw a.error}}return i},u=this&&this.__spreadArray||function(e,t,r){if(r||2===arguments.length)for(var n,a=0,o=t.length;a<o;a++)!n&&a in t||(n||(n=Array.prototype.slice.call(t,0,a)),n[a]=t[a]);return e.concat(n||Array.prototype.slice.call(t))},l=this&&this.__importDefault||function(e){return e&&e.__esModule?e:{default:e}};Object.defineProperty(t,"__esModule",{value:!0}),t.DEFAULT_TYPES=void 0;var s,d=i(r(156)),f=r(418),p=l(r(855)),v="abcdefghijklmnopqrstuvwxyz",h=v.split(""),g=v.toUpperCase().split(""),m="0123456789".split(""),y=u(u(u([],c(h),!1),c(g),!1),c(m),!1),C="enter",_="backspace",A="delete",b="arrowleft",E="arrowright",S="arrowup",P="arrowdown",w=[C,_,A,b,E,S,P],x=u(u([],c(y),!1),c(w),!1),N="password",L=(0,f.isMobile)(),j=(0,f.isChrome)(),k=(0,f.isAndroid)(),M=function(e,t,r){return e?(r=r.toUpperCase(),t&&(r=r.toLowerCase())):(r=r.toLowerCase(),t&&(r=r.toUpperCase())),r};!function(e){e.ALPHANUMERTIC="alphanumeric",e.ALPHA="alpha",e.NUMBER="number"}(s=t.DEFAULT_TYPES||(t.DEFAULT_TYPES={})),t.default=function(e){var t=e.initialFocus,r=void 0!==t&&t,a=e.wrapperRef,o=e.codeLength,i=void 0===o?6:o,l=e.id,v=void 0===l?null:l,g=e.onChange,O=e.type,U=void 0===O?s.ALPHANUMERTIC:O,R=e.letterCase,T=void 0===R?f.CASE_TYPES.UPPERCASE:R,I=e.value,B=void 0===I?"":I,D=e.disabled,H=void 0!==D&&D,Y=e.hide,W=void 0!==Y&&Y,F=e.focusColor,K=void 0===F?"#007bff":F,q=e.classNameComponent,z=void 0===q?"":q,Z=e.classNameWrapper,V=void 0===Z?"":Z,G=e.classNameCodeWrapper,$=void 0===G?"":G,J=e.classNameEnteredValue,Q=void 0===J?"":J,X=e.classNameCode,ee=void 0===X?"":X,te=e.classNameCodeWrapperFocus,re=void 0===te?"":te,ne=e.customStyleComponent,ae=void 0===ne?{}:ne,oe=e.customStyleWrapper,ie=void 0===oe?{}:oe,ce=e.customStyleCodeWrapper,ue=void 0===ce?{}:ce,le=e.customStyleEnteredValue,se=void 0===le?{}:le,de=e.customStyleCode,fe=void 0===de?{}:de,pe=e.customStyleCodeWrapperFocus,ve=void 0===pe?{}:pe,he=e.placeholder,ge=void 0===he?"":he,me=e.customStylePlaceholder,ye=void 0===me?{}:me,Ce=(0,d.useMemo)((function(){return u([],c(Array(i).keys()),!1)}),[i]),_e=c((0,d.useState)(B),2),Ae=_e[0],be=_e[1],Ee=c((0,d.useState)({key:void 0}),2),Se=Ee[0],Pe=Ee[1],we=c((0,d.useState)(!1),2),xe=we[0],Ne=we[1],Le=(0,d.useRef)(null),je=(0,d.useRef)(null),ke=(0,d.useRef)(null),Me=(0,d.useRef)(!0),Oe=c((0,d.useState)(0),2),Ue=Oe[0],Re=Oe[1],Te=(0,d.useMemo)((function(){return v||(0,f.getRandomId)()}),[v]);(0,d.useEffect)((function(){if(k&&j){var e=function(e){if(T===f.CASE_TYPES.AUTO&&y.includes(e.data))Pe({key:e.data});else{var t=e.data.toLowerCase();t.match(/^[a-zA-Z0-9_]*$/gi)&&Pe({key:t})}};return ke.current.addEventListener("textInput",e),function(){ke.current&&ke.current.removeEventListener("textInput",e)}}}),[]),(0,d.useEffect)((function(){r&&document.getElementById("".concat(Te).concat(0)).click()}),[]);var Ie=(0,d.useCallback)((function(e){if(!L){if(e===b){var t=Ue-1;return void Re(t<0?0:t)}if(e===E){if(""===Ae)return;var r=Math.min(Ue+1,Ce.length-1);return void 0===Ae[r]?void Re(Ae.length):void Re(r)}}Be(e)}),[U,Ae,Ue]);(0,d.useEffect)((function(){Se.key&&Ie(Se.key)}),[Se]),(0,d.useEffect)((function(){Ue>=Ce.length&&Re(Ce.length-1)}),[Ue,Ce]),(0,d.useEffect)((function(){var e=(0,f.getCased)(B,T);be(e),Me.current&&(ke.current.value=e,Re(e.length),Me.current=!1)}),[B,T]);var Be=(0,d.useCallback)((function(e){var t=Ae.split("");if(e!==_)if(e!==A){if(y.includes(e)){var r="";switch(U){case s.ALPHANUMERTIC:r=(0,f.getAlphanumeric)(e);break;case s.ALPHA:r=(0,f.getAlpha)(e);break;case s.NUMBER:r=(0,f.getNumeric)(e);break;default:r=(0,f.getAlphanumeric)(e)}if(r=(0,f.getCased)(r,T),""===Ae)return void De((a=r).length,a,g);if(Ue===Ae.length){if(t.length<Ce.length)return t.push(r),n=(a=t.join("")).length,a.length>=Ce.length&&(n-=1),void De(n,a,g)}else{if(!L)return t[Ue]=r,a=t.join(""),void De(void 0===t[Ue+1]?Ue+1:null,a,g);if(t.length<Ce.length)return t.push(r),n=(a=t.join("")).length,a.length>=Ce.length&&(n-=1),void De(n,a,g)}}}else{var n=Ue;void 0===t[Ue]&&(n+=1),t[n=Math.min(n,Ae.length)]="";var a=t.join("");De(n,a,g)}else{n=Ue;if(Ue===Ce.length-1){if(Ae.length===Ce.length){t[n]="";var o=t.join("");return void De(n,o,g)}t[n-=1]="";var i=t.join("");return void De(n,i,g)}if(Ue===Ae.length){t[n-=1]="";var c=t.join("");return void De(n,c,g)}t[n]="";a=t.join("");De(Math.max(n-1,0),a,g)}}),[U,T,Ce,Ae,Ue]),De=(0,d.useCallback)((function(e,t,r){be(t),null!==e&&Re(e),ke.current.value=t,"function"==typeof r&&r(t)}),[]),He=(0,d.useCallback)((function(){Ne(!0)}),[]),Ye=(0,d.useCallback)((function(){Ne(!1)}),[]),We=(0,d.useMemo)((function(){var e={};switch(U){case s.NUMBER:e.type=L?"tel":N,e.pattern="[0-9]{".concat(Ce.length,",}");break;case s.ALPHA:e.type=N,e.pattern="[A-Za-z]{".concat(Ce.length,",}");break;case s.ALPHANUMERTIC:e.type=N,e.pattern="[0-9A-Za-z]{".concat(Ce.length,",}")}return e}),[U]);return d.default.createElement("div",{ref:je,className:(0,f.cx)(p.default.component,(0,f.getClassName)("component"),H&&p.default.disabled,H&&(0,f.getClassName)("disabled"),z),style:ae},d.default.createElement("div",{ref:a||Le,className:(0,f.cx)(p.default.wrapper,(0,f.getClassName)("wrapper"),V),style:ie},Ce.map((function(e,t){Ce.length;var r=void 0!==Ae[t],a=!1,o={};return xe&&(a=Ue===t),a&&(o.border="1px solid ".concat(K),o.boxShadow="0px 0px 5px 0px ".concat(K)),d.default.createElement("div",{key:t,id:"".concat(Te).concat(t),onClick:function(){for(var e=0;e<Ce.length;e+=1)if(void 0===Ae[e]){document.getElementById("".concat(Te).concat(e)).click();break}document.getElementById(Te).focus()},className:(0,f.cx)(p.default["code-wrapper"],(0,f.getClassName)("code-wrapper"),$,a&&p.default.active,a&&(0,f.getClassName)("active"),r&&p.default.entered,r&&(0,f.getClassName)("entered")),style:ue},d.default.createElement("div",{className:(0,f.cx)(p.default["entered-value"],(0,f.getClassName)("entered-value"),Q,W&&r&&p.default.hide,W&&r&&(0,f.getClassName)("hide")),style:se},void 0===Ae[t]&&d.default.createElement("span",{style:n({color:"#ddd"},ye)},ge.split("")[t])," ",W?"":Ae[t]),d.default.createElement("div",{className:(0,f.cx)(p.default.code,(0,f.getClassName)("code"),ee),style:fe},d.default.createElement("div",{className:(0,f.cx)(p.default["code-wrapper--focus"],(0,f.getClassName)("code-wrapper--focus"),re),style:n(n({},o),ve)})))}))),d.default.createElement("input",n({ref:ke,id:Te,autoComplete:"off",disabled:H,maxLength:Ce.length,required:!0,onFocus:He,onBlur:Ye,onKeyDown:function(e){var t=e.key;if(T===f.CASE_TYPES.AUTO&&y.includes(t))Pe({key:L?t:M(e.getModifierState("CapsLock"),e.shiftKey,t)});else{if(t=t.toLowerCase(),k&&j)return t===_&&Pe({key:t}),!1;if(t&&t!==C&&"tab"!==t&&e.preventDefault(),"tab"===t)Ae.length<0||Ae.length>Ce.length||(e.shiftKey?0!==Ue&&(t=b,e.preventDefault()):Ue===Ce.length-1&&Ae.length===Ce.length||(t=E,e.preventDefault()));else if(e.ctrlKey||e.altKey||e.shiftKey||e.metaKey)return;var r=function(e,t,r){if(!x.includes(e))return"";if(w.includes(e))switch(e){case _:return""===r?"":_;case A:return""===r?"":A;case S:return b;case P:return E;default:return e}return t===s.NUMBER&&m.indexOf(e)<0||t===s.ALPHA&&h.indexOf(e)<0||t===s.ALPHANUMERTIC&&y.indexOf(e)<0?"":e}(t,U,Ae);""!==r&&Pe({key:r})}},style:{position:"absolute",opacity:"0",marginLeft:"-9999999px"}},We)))}},460:function(e,t,r){var n=this&&this.__createBinding||(Object.create?function(e,t,r,n){void 0===n&&(n=r),Object.defineProperty(e,n,{enumerable:!0,get:function(){return t[r]}})}:function(e,t,r,n){void 0===n&&(n=r),e[n]=t[r]}),a=this&&this.__exportStar||function(e,t){for(var r in e)"default"===r||Object.prototype.hasOwnProperty.call(t,r)||n(t,e,r)},o=this&&this.__importDefault||function(e){return e&&e.__esModule?e:{default:e}};Object.defineProperty(t,"__esModule",{value:!0}),t.default=void 0,a(r(86),t);var i=r(86);Object.defineProperty(t,"default",{enumerable:!0,get:function(){return o(i).default}})},418:function(e,t){var r;Object.defineProperty(t,"__esModule",{value:!0}),t.isMobile=t.isChrome=t.isAndroid=t.getClassName=t.getCased=t.getNumeric=t.getAlpha=t.getAlphanumeric=t.getRandomId=t.cx=t.CASE_TYPES=void 0,function(e){e.UPPERCASE="upper",e.LOWERCASE="lower",e.AUTO="auto"}(r=t.CASE_TYPES||(t.CASE_TYPES={})),t.cx=function(){for(var e=[],r=0;r<arguments.length;r++)e[r]=arguments[r];for(var n=[],a=0;a<e.length;a+=1){var o=e[a];if(o){var i=typeof o;if("string"===i||"number"===i)n.push(o);else if(Array.isArray(o)&&o.length){var c=t.cx.apply(null,o);c&&n.push(c)}else if("object"===i)for(var u in o)({}).hasOwnProperty.call(o,u)&&o[u]&&n.push(u)}}return n.join(" ")},t.getRandomId=function(){return Math.random().toString(36).slice(-8)},t.getAlphanumeric=function(e){var t="";return String(e).split("").forEach((function(e){var r=e.toLowerCase().charCodeAt(0);(r>=48&&r<=57||r>=97&&r<=122)&&(t+=e)})),t},t.getAlpha=function(e){var t="";return String(e).split("").forEach((function(e){var r=e.toLowerCase().charCodeAt(0);r>=97&&r<=122&&(t+=e)})),t},t.getNumeric=function(e){var t="";return e.split("").forEach((function(e){var r=e.toLowerCase().charCodeAt(0);r>=48&&r<=57&&(t+=e)})),t},t.getCased=function(e,t){if(!t)return e.toUpperCase();switch(t){case r.UPPERCASE:return e.toUpperCase();case r.LOWERCASE:return e.toLowerCase();case r.AUTO:return e}},t.getClassName=function(e){return"RCI-".concat(e)},t.isAndroid=function(){return"undefined"!=typeof navigator&&void 0!==navigator.onLine&&/(android)/i.test(navigator.userAgent)},t.isChrome=function(){return"undefined"!=typeof navigator&&void 0!==navigator.onLine&&/Chrome/.test(navigator.userAgent)&&/Google Inc/.test(navigator.vendor)},t.isMobile=function(){return"undefined"!=typeof navigator&&void 0!==navigator.onLine&&/iPhone|iPad|iPod|Android/i.test(navigator.userAgent)}},156:function(t){t.exports=e}},r={};function n(e){var a=r[e];if(void 0!==a)return a.exports;var o=r[e]={exports:{}};return t[e].call(o.exports,o,o.exports,n),o.exports}return n.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},n(460)}()}));