react-otp-input-z/build/index.js

React hook otp input, copy paste, etc... (Lib)

!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("react"),require("joinclass")):"function"==typeof define&&define.amd?define(["exports","react","joinclass"],t):t((e="undefined"!=typeof globalThis?globalThis:e||self).ReactOtpInput={},e.React,e.joinclass)}(this,(function(e,t,n){"use strict";function o(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var r=o(t),a=o(n),i=function(){return i=Object.assign||function(e){for(var t,n=1,o=arguments.length;n<o;n++)for(var r in t=arguments[n])Object.prototype.hasOwnProperty.call(t,r)&&(e[r]=t[r]);return e},i.apply(this,arguments)};function u(e,t,n){if(n||2===arguments.length)for(var o,r=0,a=t.length;r<a;r++)!o&&r in t||(o||(o=Array.prototype.slice.call(t,0,r)),o[r]=t[r]);return e.concat(o||Array.prototype.slice.call(t))}var l=function(e,t){return e?/^[0-9]+$/.test(t):/^[A-Za-z0-9]+$/.test(t)},c=r.default.forwardRef((function(e,t){var n=e.otpClassName,o=e.type,i=void 0===o?"number":o,u=e.secret,c=void 0!==u&&u,f=e.disabled,s=void 0!==f&&f,d=e.useUpDownArrow,p=void 0!==d&&d,v=e.readonly,y=void 0!==v&&v,m=e.value,k=e.selectionOnFocus,b=e.setValue,C=void 0===b?function(e){}:b,g=e.onSingleDone,h=void 0===g?function(){}:g,O=e.onPasted,E=void 0===O?function(e){}:O,w=e.onKeyEnter,j=void 0===w?function(){}:w,D="number"===i,P=c?"password":D?"tel":"text",A=function(e,t){e.preventDefault(),h(t)},x=function(e,t){e.preventDefault(),C(t)};return r.default.createElement("input",{ref:t,className:a.default("opt2-input-item",c&&"otp2-input-secret",n),type:P,maxLength:1,value:m,disabled:s,readOnly:y,onClick:function(e){var t=e.target;t instanceof HTMLInputElement&&k&&t.select()},onKeyDown:function(e){if("Enter"!==e.key){if(!e.ctrlKey&&!e.metaKey||![67,86,88].includes(e.keyCode)){if(8===e.keyCode||"Backspace"===e.key)return A(e,!0),void C("");if(37===e.keyCode||"ArrowLeft"===e.key||p&&(38===e.keyCode||"ArrowUp"===e.key))A(e,!0);else if(39===e.keyCode||"ArrowRight"===e.key||p&&(40===e.keyCode||"ArrowDown"===e.key))A(e);else 46!==e.keyCode&&"Delete"!==e.key||x(e,""),32!==e.keyCode&&" "!==e.key&&"Spacebar"!==e.key&&"Space"!==e.key||e.preventDefault(),(e.keyCode>=48&&e.keyCode<=57||e.keyCode>=65&&e.keyCode<=90)&&l(D,e.target.value)&&h()}}else j()},onInput:function(e){var t=e.target.value;if(l(D,t))return h(),void C(t);var n=e.nativeEvent;null!==n.data||"deleteContentBackward"!==n.inputType?(e.preventDefault(),C(m)):x(e,"")},onPaste:function(e){if(e.preventDefault(),!s&&!y){var t=e.clipboardData.getData("text/plain").trim();l(D,t)&&E(t.split(""))}}})}));e.default=function(e){var t=e.className,n=e.otpClassName,o=e.hasError,l=void 0!==o&&o,f=e.selectionOnFocus,s=void 0===f||f,d=e.enablePaste,p=void 0===d||d,v=e.autoPasteFull,y=void 0===v||v,m=e.otpSize,k=void 0===m?4:m,b=e.splitIcon,C=e.autoFocus,g=void 0===C||C,h=e.value,O=void 0===h?"":h,E=e.isKeyCard,w=void 0!==E&&E,j=e.onCompleted,D=void 0===j?function(e,t){}:j,P=e.onEnter,A=function(e,t){var n={};for(var o in e)Object.prototype.hasOwnProperty.call(e,o)&&t.indexOf(o)<0&&(n[o]=e[o]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var r=0;for(o=Object.getOwnPropertySymbols(e);r<o.length;r++)t.indexOf(o[r])<0&&Object.prototype.propertyIsEnumerable.call(e,o[r])&&(n[o[r]]=e[o[r]])}return n}(e,["className","otpClassName","hasError","selectionOnFocus","enablePaste","autoPasteFull","otpSize","splitIcon","autoFocus","value","isKeyCard","onCompleted","onEnter"]),x=r.default.useRef([]),F=r.default.useState([]),N=F[0],S=F[1],I=k>0?k:4,T=function(e){return void 0===e&&(e=N),-1!==e.findIndex((function(e){return""===e}))},K=function(e){return void 0===e&&(e=N),Array.isArray(O)?e:e.join("")},R=function(e){return x.current[e].focus()};r.default.useEffect((function(){g&&setTimeout((function(){return R(0)}))}),[x,g]),r.default.useEffect((function(){for(var e=[],t=0;t<I;t++)e.push(void 0===O[t]?"":O[t]);S(e)}),[O,k]);var z=function(e){S(e),D(K(e),!T(e))};return r.default.createElement("div",{className:a.default("otp2-input",l&&"shake-otp2-error",t)},N.map((function(e,t){return r.default.createElement(r.default.Fragment,{key:t},r.default.createElement(c,i({otpClassName:a.default("otp2-input-".concat(t),l&&"otp2-input-error",w&&"otp2-input-card",n),ref:function(e){return x.current[t]=e},value:e,setValue:function(e){var n=u([],N,!0);n[t]=e,z(n)},onSingleDone:function(e){return function(e,t){var n=x.current[e+(t?-1:1)];n&&setTimeout((function(){n.focus(),s&&n.select()}))}(t,e)},onKeyEnter:function(){P&&P(K(),!T)},onPasted:function(e){if(p){if(y&&e.length>=I)return z(e.splice(0,I)),void setTimeout((function(){return R(I-1)}),100);var n=e.slice(0,I-t),o=N.splice(0,t),r=N.splice(n.length,I);z(u(u(u([],o,!0),n,!0),r,!0).slice(0,I));var a=n.length+t-1;a>I-1&&(a=I-1),setTimeout((function(){return R(a)}),100)}},selectionOnFocus:s},A)),b&&t<I-1&&r.default.createElement("span",{className:"otp2-split"},b))})))},e.restrictInput=l,Object.defineProperty(e,"__esModule",{value:!0})}));