@privy-io/react-auth
Version:
React client for the Privy Auth API
2 lines (1 loc) • 4.27 kB
JavaScript
import{jsx as o,jsxs as e,Fragment as n}from"react/jsx-runtime";import{forwardRef as r,useState as t,useEffect as i}from"react";import{styled as a}from"styled-components";import{countryCodesAndNumbers as d,validatePhoneNumber as l,phoneNumberTypingFormatter as c,getPlaceholderPhoneNumber as p,getCountryCallingCode as u,getPhoneCountryCodeAndNumber as h,formatPhoneNumber as s}from"@privy-io/js-sdk-core";import{u as g}from"./context-Bycd1SKV.mjs";import{F as m}from"./useActiveWallet-Bsy5GTCV.mjs";import{E as v,P as x}from"./Button-B8mqatRx.mjs";import{C as b}from"./Chip-Bsgj4Yc-.mjs";const f=({value:n,onChange:r})=>/*#__PURE__*/o("select",{value:n,onChange:r,children:d.map((o=>/*#__PURE__*/e("option",{value:o.code,children:[o.code," +",o.callCode]},o.code)))}),w=/*#__PURE__*/r(((r,a)=>{let d=g(),[w,k]=t(!1),{accountType:N}=m(),[P,S]=t(""),[$,j]=t(d?.intl.defaultCountry??"US"),I=l(P,$),V=c($),z=p($),L=u($),q=!I,[B,E]=t(!1),D=L.length,F=o=>{let e=o.target.value;j(e),S(""),r.onChange&&r.onChange({rawPhoneNumber:P,qualifiedPhoneNumber:s(P,e),countryCode:e,isValid:l(P,$)})},R=(o,e)=>{try{let n=o.replace(/\D/g,"")===P.replace(/\D/g,"")?o:V.input(o);S(n),r.onChange&&r.onChange({rawPhoneNumber:n,qualifiedPhoneNumber:s(o,e),countryCode:e,isValid:l(o,e)})}catch(o){console.error("Error processing phone number:",o)}},T=()=>{E(!0);let o=s(P,$);r.onSubmit({rawPhoneNumber:P,qualifiedPhoneNumber:o,countryCode:$,isValid:l(P,$)}).finally((()=>E(!1)))};return i((()=>{if(r.defaultValue){let o=h(r.defaultValue);V.reset(),F({target:{value:o.countryCode}}),R(o.phone,o.countryCode)}}),[r.defaultValue]),/*#__PURE__*/e(n,{children:[/*#__PURE__*/o(y,{children:/*#__PURE__*/e(C,{$callingCodeLength:D,$stacked:r.stacked,children:[/*#__PURE__*/o(f,{value:$,onChange:F}),/*#__PURE__*/o("input",{ref:a,id:"phone-number-input",className:"login-method-button",type:"tel",placeholder:z,onFocus:()=>k(!0),onChange:o=>{R(o.target.value,$)},onKeyUp:o=>{"Enter"===o.key&&T()},value:P,autoComplete:"tel"}),"phone"!==N||w||r.hideRecent?r.stacked||r.noIncludeSubmitButton?/*#__PURE__*/o("span",{}):/*#__PURE__*/o(v,{isSubmitting:B,onClick:T,disabled:q,children:"Submit"}):/*#__PURE__*/o(b,{color:"gray",children:"Recent"})]})}),r.stacked&&!r.noIncludeSubmitButton?/*#__PURE__*/o(x,{loading:B,loadingText:null,onClick:T,disabled:q,children:"Submit"}):null]})}));let y=/*#__PURE__*/a.div.withConfig({displayName:"InputContainer",componentId:"sc-545daacd-0"})(["width:100%;"]),C=/*#__PURE__*/a.label.withConfig({displayName:"PhoneNumberInput",componentId:"sc-545daacd-1"})(["--country-code-dropdown-width:calc(54px + calc(12 * ","px));--phone-input-extra-padding-left:calc(12px + calc(3 * ","px));display:block;position:relative;width:100%;@media (min-width:441px){--country-code-dropdown-width:calc(52px + calc(10 * ","px));}&& > select{font-size:16px;height:24px;position:absolute;margin:13px calc(var(--country-code-dropdown-width) / 4);line-height:24px;width:var(--country-code-dropdown-width);background-color:var(--privy-color-background);background-size:auto;background-position-x:right;cursor:pointer;@media (min-width:441px){font-size:14px;width:var(--country-code-dropdown-width);}:focus{outline:none;box-shadow:none;}}&& > input{font-size:16px;line-height:24px;color:var(--privy-color-foreground);overflow:hidden;white-space:nowrap;text-overflow:ellipsis;width:calc(100% - var(--country-code-dropdown-width));padding:12px 88px 12px calc(var(--country-code-dropdown-width) + var(--phone-input-extra-padding-left));padding-right:",";flex-grow:1;background:var(--privy-color-background);border:1px solid var(--privy-color-foreground-4);border-radius:var(--privy-border-radius-md);width:100%;:focus{outline:none;border-color:var(--privy-color-accent);}:autofill,:-webkit-autofill{background:var(--privy-color-background);}@media (min-width:441px){font-size:14px;padding-right:78px;}}&& > :last-child{right:16px;position:absolute;top:50%;transform:translate(0,-50%);}&& > button:last-child{right:0px;line-height:24px;padding:13px 17px;:focus{outline:none;border-color:var(--privy-color-accent);}}&& > input::placeholder{color:var(--privy-color-foreground-3);}"],(o=>o.$callingCodeLength),(o=>o.$callingCodeLength),(o=>o.$callingCodeLength),(o=>o.$stacked?"16px":"88px"));export{w as C};