Refactor PhoneInputDialog and PhoneInput.Dialog

iPagar · Feb 5, 2024 · 35607a7 · 35607a7
1 parent adfea6d
commit 35607a7
Show file tree

Hide file tree

Showing 2 changed files with 64 additions and 49 deletions.
diff --git a/src/phone-input/phone-input-dialog.tsx b/src/phone-input/phone-input-dialog.tsx
@@ -6,7 +6,13 @@ import styles from './phone-input.module.scss';
 import { usePhoneInputCountrySelect } from './phone-input-country-select-context';
 import { usePhoneInput } from './phone-input-provider';
 
-export function PhoneInputDialog(props: React.HTMLAttributes<HTMLDivElement>) {
+export function PhoneInputDialog(
+  props: Omit<React.HTMLAttributes<HTMLDivElement>, 'children'> & {
+    children?:
+      | (({ open }: { open: boolean }) => React.ReactNode)
+      | React.ReactNode;
+  }
+) {
   const dialogRef = useRef<HTMLDivElement>(null);
   const { dialogPosition } = usePhoneInput();
   const { isDialogOpen, setIsDialogOpen, triggerRef } =
@@ -32,7 +38,9 @@ export function PhoneInputDialog(props: React.HTMLAttributes<HTMLDivElement>) {
       ref={dialogRef}
       style={{ top: dialogPosition.top }}
     >
-      {children}
+      {typeof children === 'function'
+        ? children({ open: isDialogOpen })
+        : children}
     </div>
   );
 }
diff --git a/stories/phone-input.stories.tsx b/stories/phone-input.stories.tsx
@@ -295,54 +295,61 @@ export function StyledTwo() {
               </div>
             </PhoneInput.Trigger>
             <PhoneInput.Dialog className={styles.countrySelectDialog}>
-              <div className={styles.countrySelectSearch}>
-                <div className={styles.countrySelectSearchWrapper}>
-                  <div className={styles.countrySelectSearchIcon}>
-                    <svg
-                      fill="none"
-                      height="22"
-                      viewBox="0 0 22 22"
-                      width="22"
-                      xmlns="http://www.w3.org/2000/svg"
-                    >
-                      <path
-                        d="M19.25 19.25L13.75 13.75M15.5833 9.16667C15.5833 12.7105 12.7105 15.5833 9.16667 15.5833C5.62284 15.5833 2.75 12.7105 2.75 9.16667C2.75 5.62284 5.62284 2.75 9.16667 2.75C12.7105 2.75 15.5833 5.62284 15.5833 9.16667Z"
-                        stroke="#1F1E58"
-                        strokeLinecap="round"
-                        strokeLinejoin="round"
-                        strokeOpacity="0.8"
-                        strokeWidth="1.5"
-                      />
-                    </svg>
+              {({ open }) => (
+                <>
+                  <div className={styles.countrySelectSearch}>
+                    <div className={styles.countrySelectSearchWrapper}>
+                      <div className={styles.countrySelectSearchIcon}>
+                        <svg
+                          fill="none"
+                          height="22"
+                          viewBox="0 0 22 22"
+                          width="22"
+                          xmlns="http://www.w3.org/2000/svg"
+                        >
+                          <path
+                            d="M19.25 19.25L13.75 13.75M15.5833 9.16667C15.5833 12.7105 12.7105 15.5833 9.16667 15.5833C5.62284 15.5833 2.75 12.7105 2.75 9.16667C2.75 5.62284 5.62284 2.75 9.16667 2.75C12.7105 2.75 15.5833 5.62284 15.5833 9.16667Z"
+                            stroke="#1F1E58"
+                            strokeLinecap="round"
+                            strokeLinejoin="round"
+                            strokeOpacity="0.8"
+                            strokeWidth="1.5"
+                          />
+                        </svg>
+                      </div>
+                      {open && (
+                        <input
+                          autoFocus
+                          className={styles.countrySelectSearchInput}
+                          onChange={(e) => setSearch(e.target.value)}
+                          placeholder="Search"
+                          type="text"
+                          value={search}
+                        />
+                      )}
+                    </div>
                   </div>
-                  <input
-                    className={styles.countrySelectSearchInput}
-                    onChange={(e) => setSearch(e.target.value)}
-                    placeholder="Search"
-                    type="text"
-                    value={search}
-                  />
-                </div>
-              </div>
-              <ul className={styles.countrySelectList}>
-                {searchCountryList.map((countryItem) => (
-                  <PhoneInput.Item
-                    className={styles.countrySelectItem}
-                    data-value={countryItem.alpha2}
-                    key={countryItem.alpha2}
-                    onClick={pickCountry}
-                    onKeyDown={pickCountry}
-                    tabIndex={0}
-                  >
-                    <CountryFlag
-                      className={styles.countrySelectItemFlag}
-                      country={countryItem.alpha2}
-                      type="svg"
-                    />
-                    <span>{countryItem.name}</span>
-                  </PhoneInput.Item>
-                ))}
-              </ul>
+                  <ul className={styles.countrySelectList}>
+                    {searchCountryList.map((countryItem) => (
+                      <PhoneInput.Item
+                        className={styles.countrySelectItem}
+                        data-value={countryItem.alpha2}
+                        key={countryItem.alpha2}
+                        onClick={pickCountry}
+                        onKeyDown={pickCountry}
+                        tabIndex={0}
+                      >
+                        <CountryFlag
+                          className={styles.countrySelectItemFlag}
+                          country={countryItem.alpha2}
+                          type="svg"
+                        />
+                        <span>{countryItem.name}</span>
+                      </PhoneInput.Item>
+                    ))}
+                  </ul>
+                </>
+              )}
             </PhoneInput.Dialog>
           </PhoneInput.CountrySelect>