pkg-components
Version:
2 lines (1 loc) • 1.79 kB
JavaScript
import{a as C,j as a}from"./jsx-runtime-DI8_P1Ft.js";import{P as r}from"./index-B3IC6ylx.js";import{r as o}from"./index-DPzuYzxM.js";import{r as v}from"./index-RGaBZlDs.js";const N=[{code:"CO",name:"Colombia"}],P=/^(\+57)?([1-9]{1}[0-9]{0,9})$/,s=({value:u,required:$=!1,onChange:i=l=>l,defaultCountry:c="CO"})=>{const[l,d]=o.useState(c),[p,m]=o.useState(u),[h,f]=o.useState(!0),y=t=>{d(t),i(t)},b=t=>{const e=t.replace(/\D/g,"");let n=e;e.length>=3&&e.length<=6?n=`${e.slice(0,3)} ${e.slice(3)}`:e.length>6&&(n=`${e.slice(0,3)} ${e.slice(3,6)} ${e.slice(6)}`),m(n),i(n)},g=t=>{let e=t.target.value;e.length>12?e=e.slice(0,12):e.length===3&&t.nativeEvent.inputType==="deleteContentBackward"&&(e=""),b(e),f(P.test(e))};return C("div",{className:"phone-input-container",children:[a("div",{className:"phone-country-selector",children:N.map(t=>a("button",{"aria-label":`Select ${t.name}`,className:`phone-country-selector-button ${l===t.code?"selected":""}`,onClick:()=>y(t.code),title:t.name,children:a(v,{size:25})},t.code))}),a("input",{className:`phone-input ${h?"":"invalid"}`,onChange:g,placeholder:"Enter phone number",type:"tel",value:p})]})};s.propTypes={defaultCountry:r.string,onChange:r.func,required:r.bool,value:r.any};try{s.displayName="PhoneInput",s.__docgenInfo={description:"",displayName:"PhoneInput",props:{value:{defaultValue:null,description:"",name:"value",required:!0,type:{name:"any"}},required:{defaultValue:{value:"false"},description:"",name:"required",required:!1,type:{name:"boolean"}},onChange:{defaultValue:{value:"(value) => { return value }"},description:"",name:"onChange",required:!1,type:{name:"((value: any) => any)"}},defaultCountry:{defaultValue:{value:"CO"},description:"",name:"defaultCountry",required:!1,type:{name:"string"}}}}}catch{}export{s as P};