antd-input-otp/dist/index.esm.js

An OTP Input Component based on Ant Design Component Library for React.

import{jsx as e}from"react/jsx-runtime";import{useState as t,useCallback as n,memo as r,forwardRef as a}from"react";import{Input as l}from"antd";var o=function(){return o=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},o.apply(this,arguments)};function i(e,t){var n={};for(var r in e)Object.prototype.hasOwnProperty.call(e,r)&&t.indexOf(r)<0&&(n[r]=e[r]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var a=0;for(r=Object.getOwnPropertySymbols(e);a<r.length;a++)t.indexOf(r[a])<0&&Object.prototype.propertyIsEnumerable.call(e,r[a])&&(n[r[a]]=e[r[a]])}return n}function u(e){return e&&e.__esModule&&Object.prototype.hasOwnProperty.call(e,"default")?e.default:e}"function"==typeof SuppressedError&&SuppressedError;var p,s={exports:{}};
/*!
	Copyright (c) 2018 Jed Watson.
	Licensed under the MIT License (MIT), see
	http://jedwatson.github.io/classnames
*/p=s,function(){var e={}.hasOwnProperty;function t(){for(var n=[],r=0;r<arguments.length;r++){var a=arguments[r];if(a){var l=typeof a;if("string"===l||"number"===l)n.push(a);else if(Array.isArray(a)){if(a.length){var o=t.apply(null,a);o&&n.push(o)}}else if("object"===l){if(a.toString!==Object.prototype.toString&&!a.toString.toString().includes("[native code]")){n.push(a.toString());continue}for(var i in a)e.call(a,i)&&a[i]&&n.push(i)}}}return n.join(" ")}p.exports?(t.default=t,p.exports=t):window.classNames=t}();var c=u(s.exports),f={alphabet:/[^A-Za-z]/,"alphabet-numeric":/[\W_]/,"alphabet-symbol":/[\d]|[^\S]/,numeric:/\D/,"numeric-symbol":/[A-Za-z]|[^\S]/,symbol:/[^\W_]|[^\S]/},d=function(e){var t=e.currentTarget;return{nextTarget:t.nextElementSibling,prevTarget:t.previousElementSibling}},v=function(e){var t=null==e?void 0:e.target;return Array.from(null==t?void 0:t.parentNode.children)},y=function(e){var t=null==e?void 0:e.target;return v(e).indexOf(t)},h=function(e){var t=e.inputType,n=e.inputRegex,r=e.value,a="string"==typeof n?new RegExp(n):n,l="custom"===t&&n&&!a.test(r),o="all"!==t&&"custom"!==t&&f[t].test(r);return Boolean(l||o)},g=function(e,t){var n;(n=e)&&"submit"in n?e.submit():null==e||e(t)},m=function(e){e.currentTarget.select()},b=function(e){var r=e.autoSubmit,a=e.fieldLength,l=e.inputRegex,o=e.inputType,i=e.isPreserveFocus,u=e.onChange,p=e.value,s=t([]),c=s[0],f=s[1],b=n((function(e,t){var n=u?p:c,r=y(e),a=function(e,t,n){if(n||2===arguments.length)for(var r,a=0,l=t.length;a<l;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))}([],null!=n?n:[],!0);return a[r]=e.currentTarget.value,(!n||n.join("").length<1)&&f([]),null==t||t(a),u?u(a):f(a),a}),[u,c,p]),x=n((function(e){var t=d(e),n=t.nextTarget,l=t.prevTarget,o=e.currentTarget,u=b(e),p=u.join("").length===a,s=e.nativeEvent.inputType,c="insertText"===s,f=c&&!n;return f&&r&&p&&g(r,u),f&&!i?o.blur():c?null==n?void 0:n.select():"deleteContentBackward"===s?null==l?void 0:l.select():void 0}),[r,a,b,i]),S=n((function(e){if("Enter"!==(null==e?void 0:e.key)&&!(null==e?void 0:e.metaKey))return h({inputRegex:l,inputType:o,value:null==e?void 0:e.key})?e.preventDefault():void 0}),[l,o]),w=n((function(e){var t=d(e),n=t.nextTarget,r=t.prevTarget;switch(e.key){case"Backspace":if(e.currentTarget.value)break;case"ArrowLeft":e.preventDefault(),null==r||r.select();break;case"ArrowRight":e.preventDefault(),null==n||n.select()}}),[]),T=n((function(e){e.preventDefault();var t=y(e),n=v(e),i=e.clipboardData.getData("text");if(!h({inputRegex:l,inputType:o,value:i})){var u=i.split("").slice(0,a-t),p=b(e,function(e,t,n){return function(r){(!r||r.length<1)&&(r=Array(n).fill(""));for(var a=0;a<n;a++)t[a]&&(r[a+e]=t[a]);return r}}(t,u,a)),s=u.length+t,c=n[s]||n[s-1];c&&(s===t?c.select():c.focus());var f=p.join("").length===a;r&&f&&g(r,p)}}),[l,o,a,b,r]);return{handleFocus:m,handleInput:x,handleKeyDown:w,handleKeyPress:S,handlePaste:T,otp:c}};!function(e,t){void 0===t&&(t={});var n=t.insertAt;if(e&&"undefined"!=typeof document){var r=document.head||document.getElementsByTagName("head")[0],a=document.createElement("style");a.type="text/css","top"===n&&r.firstChild?r.insertBefore(a,r.firstChild):r.appendChild(a),a.styleSheet?a.styleSheet.cssText=e:a.appendChild(document.createTextNode(e))}}(".input-otp{display:flex;gap:1em;justify-content:center}.input-otp__field{font-size:20px;font-weight:700;height:64px;max-width:44px;text-align:center;width:100%}");var x=r(a((function(t,n){var r=t.className,a=i(t,["className"]);return e(l,o({className:c("input-otp__field",r),ref:n,maxLength:1},a))}))),S=a((function(t,n){var r=t.autoFocus,a=void 0!==r&&r,l=t.autoSubmit,u=void 0===l?null:l,p=t.disabled,s=t.id,f=t.inputClassName,d=t.inputRef,v=void 0===d?null:d,y=t.inputRegex,h=t.inputStyle,g=t.inputType,m=void 0===g?"all":g,S=t.isPreserveFocus,w=void 0!==S&&S,T=t.length,O=void 0===T?6:T,P=t.placeholder,j=void 0===P?"":P,C=t.onChange,N=t.value,A=t.wrapperClassName,R=t.wrapperStyle,D=i(t,["autoFocus","autoSubmit","disabled","id","inputClassName","inputRef","inputRegex","inputStyle","inputType","isPreserveFocus","length","placeholder","onChange","value","wrapperClassName","wrapperStyle"]),E=function(e){return e<2?2:e>16?16:e}(O),F=b({autoSubmit:u,fieldLength:E,inputRegex:y,inputType:m,isPreserveFocus:w,onChange:C,value:N}),_=F.handleFocus,k=F.handleInput,K=F.handleKeyDown,B=F.handleKeyPress,I=F.handlePaste,L=F.otp;return e("div",{className:c("input-otp",A),id:s,ref:n,style:R,children:Array(E).fill(null).map((function(t,n){return e(x,o({autoFocus:a&&0===n,className:f,disabled:p,onFocus:_,onInput:k,onKeyDown:K,onKeyPress:B,onPaste:I,ref:function(e){v&&(null===v.current&&(v.current=[]),v.current[n]=e)},style:h,value:(null==N?void 0:N[n])||(null==L?void 0:L[n]),placeholder:1===(null==j?void 0:j.length)?j:null==j?void 0:j[n]},D),"input-otp-".concat(n))}))})}));export{S as InputOTP};
//# sourceMappingURL=index.esm.js.map