Refactor: phone-input component and use-phone-state hook

iPagar · Feb 13, 2024 · 3de54fb · 3de54fb
1 parent c7dc64a
commit 3de54fb
Show file tree

Hide file tree

Showing 4 changed files with 35 additions and 8 deletions.
diff --git a/src/phone-input/phone-input.tsx b/src/phone-input/phone-input.tsx
@@ -60,9 +60,18 @@ export function PhoneInputRoot(
         | React.ReactNode;
     }
 ) {
-  const { children, onCountryChange, onPhoneChange, onValidationChange } =
-    props;
-  const state = usePhoneState();
+  const {
+    children,
+    initialCountry,
+    initialPhoneNumber,
+    onCountryChange,
+    onPhoneChange,
+    onValidationChange,
+  } = props;
+  const state = usePhoneState({
+    initialCountry,
+    initialPhoneNumber,
+  });
   const [isOpen, setIsOpen] = React.useState(false);
   const phoneProps = usePhone({ isDialogOpen: isOpen }, state);
   const [onOpenChange, setOnOpenChange] = useState<(open: boolean) => void>();

diff --git a/src/use-phone-state/use-phone-state.ts b/src/use-phone-state/use-phone-state.ts
@@ -3,6 +3,7 @@ import {
   AsYouType,
   CountryCode,
   getCountryCallingCode,
+  getPhoneCode,
   isValidPhoneNumber,
   parsePhoneNumberFromString,
 } from 'libphonenumber-js';
@@ -27,10 +28,20 @@ export const phoneValidationSchema = (
       }
     }, invalid);
 
-export function formatPhoneNumber(phoneNumber: string) {
+export function formatPhoneNumber(phoneNumber: string, country?: string) {
   const parsedNumber = parsePhoneNumberFromString(phoneNumber);
   if (!parsedNumber) {
-    return phoneNumber;
+    try {
+      const phoneCode = getPhoneCode(country as CountryCode);
+
+      if (phoneCode) {
+        return `+${phoneCode}`;
+      }
+    } catch (error) {
+      return parsedNumber;
+    }
+
+    return parsedNumber;
   }
 
   return parsedNumber.formatInternational();
@@ -46,7 +57,7 @@ export const usePhoneState = ({
 } = {}) => {
   const [country, setCountry] = useState(initialCountry);
   const [phoneNumber, setPhoneNumber] = useState(
-    formatPhoneNumber(initialPhoneNumber)
+    formatPhoneNumber(initialPhoneNumber, initialCountry)
   );
   const [isValid, setIsValid] = useState(
     phoneValidationSchema().safeParse(initialPhoneNumber).success

diff --git a/stories/Documentation.mdx b/stories/Documentation.mdx
@@ -99,6 +99,7 @@ const FormPhoneInput = forwardRef(
     return (
       <PhoneInput.Root
         className={styles.formPhoneInput}
+        initialCountry={country}
         onCountryChange={(newCountry) => {
           setCountry(newCountry);
         }}

diff --git a/stories/phone-input.stories.tsx b/stories/phone-input.stories.tsx
@@ -43,11 +43,12 @@ const FormPhoneInput = forwardRef(
     return (
       <PhoneInput.Root
         className={styles.formPhoneInput}
+        initialCountry={country}
         onCountryChange={(newCountry) => {
           setCountry(newCountry);
         }}
       >
-        {({ countryList }) => (
+        {({ countryList, phone }) => (
           <>
             <PhoneInput.Trigger>
               <CountryFlag
@@ -82,7 +83,12 @@ const FormPhoneInput = forwardRef(
                 </ul>
               </>
             </PhoneInput.Dialog>
-            <PhoneInput.NumberInput {...props} onChange={onChange} ref={ref} />
+            <PhoneInput.NumberInput
+              {...props}
+              onChange={onChange}
+              ref={ref}
+              value={phone}
+            />
           </>
         )}
       </PhoneInput.Root>