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

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

import e from"react";import t from"joinclass";var n=function(){return n=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},n.apply(this,arguments)};function o(e,t,n){if(n||2===arguments.length)for(var o,r=0,i=t.length;r<i;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 r=function(e,t){return e?/^[0-9]+$/.test(t):/^[A-Za-z0-9]+$/.test(t)},i=e.forwardRef((function(n,o){var i=n.otpClassName,a=n.type,u=void 0===a?"number":a,c=n.secret,l=void 0!==c&&c,s=n.disabled,f=void 0!==s&&s,p=n.useUpDownArrow,d=void 0!==p&&p,v=n.readonly,y=void 0!==v&&v,m=n.value,k=n.selectionOnFocus,C=n.setValue,g=void 0===C?function(e){}:C,b=n.onSingleDone,E=void 0===b?function(){}:b,O=n.onPasted,h=void 0===O?function(e){}:O,w=n.onKeyEnter,D=void 0===w?function(){}:w,P="number"===u,A=l?"password":P?"tel":"text",F=function(e,t){e.preventDefault(),E(t)},N=function(e,t){e.preventDefault(),g(t)};return e.createElement("input",{ref:o,className:t("opt2-input-item",l&&"otp2-input-secret",i),type:A,maxLength:1,value:m,disabled:f,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 F(e,!0),void g("");if(37===e.keyCode||"ArrowLeft"===e.key||d&&(38===e.keyCode||"ArrowUp"===e.key))F(e,!0);else if(39===e.keyCode||"ArrowRight"===e.key||d&&(40===e.keyCode||"ArrowDown"===e.key))F(e);else 46!==e.keyCode&&"Delete"!==e.key||N(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)&&r(P,e.target.value)&&E()}}else D()},onInput:function(e){var t=e.target.value;if(r(P,t))return E(),void g(t);var n=e.nativeEvent;null!==n.data||"deleteContentBackward"!==n.inputType?(e.preventDefault(),g(m)):N(e,"")},onPaste:function(e){if(e.preventDefault(),!f&&!y){var t=e.clipboardData.getData("text/plain").trim();r(P,t)&&h(t.split(""))}}})})),a=function(r){var a=r.className,u=r.otpClassName,c=r.hasError,l=void 0!==c&&c,s=r.selectionOnFocus,f=void 0===s||s,p=r.enablePaste,d=void 0===p||p,v=r.autoPasteFull,y=void 0===v||v,m=r.otpSize,k=void 0===m?4:m,C=r.splitIcon,g=r.autoFocus,b=void 0===g||g,E=r.value,O=void 0===E?"":E,h=r.isKeyCard,w=void 0!==h&&h,D=r.onCompleted,P=void 0===D?function(e,t){}:D,A=r.onEnter,F=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}(r,["className","otpClassName","hasError","selectionOnFocus","enablePaste","autoPasteFull","otpSize","splitIcon","autoFocus","value","isKeyCard","onCompleted","onEnter"]),N=e.useRef([]),S=e.useState([]),j=S[0],x=S[1],K=k>0?k:4,I=function(e){return void 0===e&&(e=j),-1!==e.findIndex((function(e){return""===e}))},T=function(e){return void 0===e&&(e=j),Array.isArray(O)?e:e.join("")},z=function(e){return N.current[e].focus()};e.useEffect((function(){b&&setTimeout((function(){return z(0)}))}),[N,b]),e.useEffect((function(){for(var e=[],t=0;t<K;t++)e.push(void 0===O[t]?"":O[t]);x(e)}),[O,k]);var L=function(e){x(e),P(T(e),!I(e))};return e.createElement("div",{className:t("otp2-input",l&&"shake-otp2-error",a)},j.map((function(r,a){return e.createElement(e.Fragment,{key:a},e.createElement(i,n({otpClassName:t("otp2-input-".concat(a),l&&"otp2-input-error",w&&"otp2-input-card",u),ref:function(e){return N.current[a]=e},value:r,setValue:function(e){var t=o([],j,!0);t[a]=e,L(t)},onSingleDone:function(e){return function(e,t){var n=N.current[e+(t?-1:1)];n&&setTimeout((function(){n.focus(),f&&n.select()}))}(a,e)},onKeyEnter:function(){A&&A(T(),!I)},onPasted:function(e){if(d){if(y&&e.length>=K)return L(e.splice(0,K)),void setTimeout((function(){return z(K-1)}),100);var t=e.slice(0,K-a),n=j.splice(0,a),r=j.splice(t.length,K);L(o(o(o([],n,!0),t,!0),r,!0).slice(0,K));var i=t.length+a-1;i>K-1&&(i=K-1),setTimeout((function(){return z(i)}),100)}},selectionOnFocus:f},F)),C&&a<K-1&&e.createElement("span",{className:"otp2-split"},C))})))};export{a as default,r as restrictInput};