@kevincuadros/react-code/dist/react-code.cjs.production.min.js

> Pin input component for React

"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e,n=require("react"),t=(e=n)&&"object"==typeof e&&"default"in e?e.default:e;function r(){return(r=Object.assign?Object.assign.bind():function(e){for(var n=1;n<arguments.length;n++){var t=arguments[n];for(var r in t)Object.prototype.hasOwnProperty.call(t,r)&&(e[r]=t[r])}return e}).apply(this,arguments)}!function(e,n){void 0===n&&(n={});var t=n.insertAt;if("undefined"!=typeof document){var r=document.head||document.getElementsByTagName("head")[0],o=document.createElement("style");o.type="text/css","top"===t&&r.firstChild?r.insertBefore(o,r.firstChild):r.appendChild(o),o.styleSheet?o.styleSheet.cssText=e:o.appendChild(document.createTextNode(e))}}("\r\n\r\n.InputValidator_input_item__-hc2e::-webkit-outer-spin-button,\r\n.InputValidator_input_item__-hc2e::-webkit-inner-spin-button {\r\n  -webkit-appearance: none;\r\n}\r\n\r\n.InputValidator_input_item__-hc2e {\r\n  border: 2px solid #ccc;\r\n  width: 30px;\r\n  height: 45px;\r\n  margin: 0 5px;\r\n  -webkit-appearance: none;\r\n  text-align: center;\r\n  font-size: 1.5rem;\r\n  outline: none;\r\n  border-radius: 5px;\r\n}\r\n\r\n.InputValidator_input_item__-hc2e:focus {\r\n  border: 2px solid rgb(5, 142, 255);\r\n}\r\n\r\ninput::placeholder{\r\n  color: #ccc;\r\n}\r\n\r\ninput:focus::placeholder {\r\n  color: transparent;\r\n}"),exports.PinCode=function(e){var o=e.length,i=e.onChange,a=e.placeholder,u=e.inputStyle,c=e.className,l=e.valueToValidate,p=e.invalidBorderColor,s=void 0===p?"#ff0000":p,d=e.validBorderColor,f=void 0===d?"#00ff00":d,h=e.autoFocus,m=void 0!==h&&h,v=n.useRef([]),b=n.useState([""]),x=b[0],_=b[1];n.useEffect((function(){i(x.join(""))}),[x]),n.useEffect((function(){_(Array(o).fill(""))}),[o]);var y=function(e,n){var t=v.current["next"===n?e+1:e-1];"next"===n?e<o-1&&t.focus():e>0&&t.focus()},g=n.useMemo((function(){return o!==x.join("").length?u:l===x.join("")?r({},u,{border:"2px solid "+f}):r({},u,{border:"2px solid "+s})}),[o,x]);return t.createElement(t.Fragment,null,x.map((function(e,n){return t.createElement("input",{placeholder:a,style:l?g:u,type:"text",key:n,autoFocus:!!m&&0===n,className:"input_item "+c,maxLength:1,onKeyDown:function(e){return function(e,n){switch(e.key){case"ArrowRight":y(n,"next");break;case"ArrowLeft":y(n,"previous");break;case"Backspace":""===x[n]&&y(n,"previous");var t=x.map((function(e,t){return t===n?"":x[t]}));_(t)}}(e,n)},onChange:function(e){return function(e,n){var t=e.target.value;if(t){var r=x.map((function(e,r){return r===n?t:x[r]}));_(r),y(n,"next")}}(e,n)},ref:function(e){return v.current[n]=e},value:e})})))};
//# sourceMappingURL=react-code.cjs.production.min.js.map