UNPKG

react-codes-input

Version:

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

2 lines 11.7 kB
!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,n){n.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,n){var r=this&&this.__assign||function(){return r=Object.assign||function(e){for(var t,n=1,r=arguments.length;n<r;n++)for(var a in t=arguments[n])Object.prototype.hasOwnProperty.call(t,a)&&(e[a]=t[a]);return e},r.apply(this,arguments)},a=this&&this.__createBinding||(Object.create?function(e,t,n,r){void 0===r&&(r=n),Object.defineProperty(e,r,{enumerable:!0,get:function(){return t[n]}})}:function(e,t,n,r){void 0===r&&(r=n),e[r]=t[n]}),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 n in e)"default"!==n&&Object.prototype.hasOwnProperty.call(e,n)&&a(t,e,n);return o(t,e),t},u=this&&this.__read||function(e,t){var n="function"==typeof Symbol&&e[Symbol.iterator];if(!n)return e;var r,a,o=n.call(e),i=[];try{for(;(void 0===t||t-- >0)&&!(r=o.next()).done;)i.push(r.value)}catch(e){a={error:e}}finally{try{r&&!r.done&&(n=o.return)&&n.call(o)}finally{if(a)throw a.error}}return i},c=this&&this.__spreadArray||function(e,t,n){if(n||2===arguments.length)for(var r,a=0,o=t.length;a<o;a++)!r&&a in t||(r||(r=Array.prototype.slice.call(t,0,a)),r[a]=t[a]);return e.concat(r||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(n(24)),f=n(418),p=l(n(855)),v="abcdefghijklmnopqrstuvwxyz",h=v.split(""),g=v.toUpperCase().split(""),m="0123456789".split(""),y=c(c(c([],u(h),!1),u(g),!1),u(m),!1),C="enter",A="backspace",_="delete",E="arrowleft",b="arrowright",S="arrowup",w="arrowdown",P=[C,A,_,E,b,S,w],N=c(c([],u(y),!1),u(P),!1),x="password",L=(0,f.isMobile)(),k=(0,f.isChrome)(),M=(0,f.isAndroid)(),R=function(e,t,n){return e?(n=n.toUpperCase(),t&&(n=n.toLowerCase())):(n=n.toLowerCase(),t&&(n=n.toUpperCase())),n};!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,n=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,j=e.type,O=void 0===j?s.ALPHANUMERTIC:j,U=e.letterCase,T=void 0===U?f.CASE_TYPES.UPPERCASE:U,I=e.value,D=void 0===I?"":I,B=e.disabled,H=void 0!==B&&B,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,ne=void 0===te?"":te,re=e.customStyleComponent,ae=void 0===re?{}:re,oe=e.customStyleWrapper,ie=void 0===oe?{}:oe,ue=e.customStyleCodeWrapper,ce=void 0===ue?{}:ue,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 c([],u(Array(i).keys()),!1)}),[i]),Ae=u((0,d.useState)(D),2),_e=Ae[0],Ee=Ae[1],be=u((0,d.useState)({key:void 0}),2),Se=be[0],we=be[1],Pe=u((0,d.useState)(!1),2),Ne=Pe[0],xe=Pe[1],Le=(0,d.useRef)(null),ke=(0,d.useRef)(null),Me=(0,d.useRef)(null),Re=(0,d.useRef)(!0),je=u((0,d.useState)(0),2),Oe=je[0],Ue=je[1],Te=(0,d.useMemo)((function(){return v||(0,f.getRandomId)()}),[v]);(0,d.useEffect)((function(){if(M&&k){var e=function(e){if(T===f.CASE_TYPES.AUTO&&y.includes(e.data))we({key:e.data});else{var t=e.data.toLowerCase();t.match(/^[a-zA-Z0-9_]*$/gi)&&we({key:t})}};return Me.current.addEventListener("textInput",e),function(){Me.current&&Me.current.removeEventListener("textInput",e)}}}),[]),(0,d.useEffect)((function(){n&&document.getElementById("".concat(Te).concat(0)).click()}),[]);var Ie=(0,d.useCallback)((function(e){if(!L){if(e===E){var t=Oe-1;return void Ue(t<0?0:t)}if(e===b){if(""===_e)return;var n=Math.min(Oe+1,Ce.length-1);return void 0===_e[n]?void Ue(_e.length):void Ue(n)}}De(e)}),[O,_e,Oe]);(0,d.useEffect)((function(){Se.key&&Ie(Se.key)}),[Se]),(0,d.useEffect)((function(){Oe>=Ce.length&&Ue(Ce.length-1)}),[Oe,Ce]),(0,d.useEffect)((function(){var e=(0,f.getCased)(D,T);Ee(e),Re.current&&(Me.current.value=e,Ue(e.length),Re.current=!1)}),[D,T]);var De=(0,d.useCallback)((function(e){var t=_e.split("");if(e!==A)if(e!==_){if(y.includes(e)){var n="";switch(O){case s.ALPHANUMERTIC:n=(0,f.getAlphanumeric)(e);break;case s.ALPHA:n=(0,f.getAlpha)(e);break;case s.NUMBER:n=(0,f.getNumeric)(e);break;default:n=(0,f.getAlphanumeric)(e)}if(n=(0,f.getCased)(n,T),""===_e)return void Be((a=n).length,a,g);if(Oe===_e.length){if(t.length<Ce.length)return t.push(n),r=(a=t.join("")).length,a.length>=Ce.length&&(r-=1),void Be(r,a,g)}else{if(!L)return t[Oe]=n,a=t.join(""),void Be(void 0===t[Oe+1]?Oe+1:null,a,g);if(t.length<Ce.length)return t.push(n),r=(a=t.join("")).length,a.length>=Ce.length&&(r-=1),void Be(r,a,g)}}}else{var r=Oe;void 0===t[Oe]&&(r+=1),t[r=Math.min(r,_e.length)]="";var a=t.join("");Be(r,a,g)}else{r=Oe;if(Oe===Ce.length-1){if(_e.length===Ce.length){t[r]="";var o=t.join("");return void Be(r,o,g)}t[r-=1]="";var i=t.join("");return void Be(r,i,g)}if(Oe===_e.length){t[r-=1]="";var u=t.join("");return void Be(r,u,g)}t[r]="";a=t.join("");Be(Math.max(r-1,0),a,g)}}),[O,T,Ce,_e,Oe]),Be=(0,d.useCallback)((function(e,t,n){Ee(t),null!==e&&Ue(e),Me.current.value=t,"function"==typeof n&&n(t)}),[]),He=(0,d.useCallback)((function(){xe(!0)}),[]),Ye=(0,d.useCallback)((function(){xe(!1)}),[]),We=(0,d.useMemo)((function(){var e={};switch(O){case s.NUMBER:e.type=L?"tel":x,e.pattern="[0-9]{".concat(Ce.length,",}");break;case s.ALPHA:e.type=x,e.pattern="[A-Za-z]{".concat(Ce.length,",}");break;case s.ALPHANUMERTIC:e.type=x,e.pattern="[0-9A-Za-z]{".concat(Ce.length,",}")}return e}),[O]);return d.default.createElement("div",{ref:ke,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 n=void 0!==_e[t],a=!1,o={};return Ne&&(a=Oe===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===_e[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"),n&&p.default.entered,n&&(0,f.getClassName)("entered")),style:ce},d.default.createElement("div",{className:(0,f.cx)(p.default["entered-value"],(0,f.getClassName)("entered-value"),Q,W&&n&&p.default.hide,W&&n&&(0,f.getClassName)("hide")),style:se},void 0===_e[t]&&d.default.createElement("span",{style:r({color:"#ddd"},ye)},ge.split("")[t])," ",W?"":_e[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"),ne),style:r(r({},o),ve)})))}))),d.default.createElement("input",r({ref:Me,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))we({key:L?t:R(e.getModifierState("CapsLock"),e.shiftKey,t)});else{if(t=t.toLowerCase(),M&&k)return t===A&&we({key:t}),!1;if(t&&t!==C&&"tab"!==t&&e.preventDefault(),"tab"===t)_e.length<0||_e.length>Ce.length||(e.shiftKey?0!==Oe&&(t=E,e.preventDefault()):Oe===Ce.length-1&&_e.length===Ce.length||(t=b,e.preventDefault()));else if(e.ctrlKey||e.altKey||e.shiftKey||e.metaKey)return;var n=function(e,t,n){if(!N.includes(e))return"";if(P.includes(e))switch(e){case A:return""===n?"":A;case _:return""===n?"":_;case S:return E;case w:return b;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,O,_e);""!==n&&we({key:n})}},style:{position:"absolute",opacity:"0",marginLeft:"-9999999px"}},We)))}},843:function(e,t,n){var r=this&&this.__importDefault||function(e){return e&&e.__esModule?e:{default:e}};Object.defineProperty(t,"__esModule",{value:!0});var a=r(n(86));"undefined"!=typeof window&&(window.ReactCodesInput=a.default),t.default=a.default},418:function(e,t){var n;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"}(n=t.CASE_TYPES||(t.CASE_TYPES={})),t.cx=function(){for(var e=[],n=0;n<arguments.length;n++)e[n]=arguments[n];for(var r=[],a=0;a<e.length;a+=1){var o=e[a];if(o){var i=typeof o;if("string"===i||"number"===i)r.push(o);else if(Array.isArray(o)&&o.length){var u=t.cx.apply(null,o);u&&r.push(u)}else if("object"===i)for(var c in o)({}).hasOwnProperty.call(o,c)&&o[c]&&r.push(c)}}return r.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 n=e.toLowerCase().charCodeAt(0);(n>=48&&n<=57||n>=97&&n<=122)&&(t+=e)})),t},t.getAlpha=function(e){var t="";return String(e).split("").forEach((function(e){var n=e.toLowerCase().charCodeAt(0);n>=97&&n<=122&&(t+=e)})),t},t.getNumeric=function(e){var t="";return e.split("").forEach((function(e){var n=e.toLowerCase().charCodeAt(0);n>=48&&n<=57&&(t+=e)})),t},t.getCased=function(e,t){if(!t)return e.toUpperCase();switch(t){case n.UPPERCASE:return e.toUpperCase();case n.LOWERCASE:return e.toLowerCase();case n.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)}},24:function(t){t.exports=e}},n={};function r(e){var a=n[e];if(void 0!==a)return a.exports;var o=n[e]={exports:{}};return t[e].call(o.exports,o,o.exports,r),o.exports}return r.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},r(843)}()})); //# sourceMappingURL=react-codes-input.min.js.map