chore: make search box optional in Input Phone Number field (#501)

deriv-com · Nov 14, 2024 · a8c5185 · a8c5185
1 parent 93cfe24
commit a8c5185
Show file tree

Hide file tree

Showing 4 changed files with 24 additions and 0 deletions.
diff --git a/lib/components/Input/input-phone-number/dropdown-content.tsx b/lib/components/Input/input-phone-number/dropdown-content.tsx
@@ -14,12 +14,14 @@ const DropdownContent = ({
     containerRef,
     headcompRef,
     onItemClick,
+    showSearchBar = false,
 }: {
     options: TCountryCodes[];
     code: string;
     showFlags?: boolean;
     containerRef: React.RefObject<HTMLDivElement>;
     headcompRef: React.RefObject<HTMLDivElement>;
+    showSearchBar?: boolean;
     onItemClick: (item: TCountryCodes) => void;
 }) => {
     const [searchKey, setSearchKey] = useState("");
@@ -73,6 +75,19 @@ const DropdownContent = ({
                     className="quill-custom-dropdown__content"
                     ref={dropdownRef}
                 >
+                    {showSearchBar && (
+                        <div className="phone-code-search">
+                            <SearchField
+                                inputSize="sm"
+                                variant="fill"
+                                autoComplete="off"
+                                value={searchKey}
+                                onChange={(e) => {
+                                    setSearchKey(e.target.value);
+                                }}
+                            />
+                        </div>
+                    )}
                     <Content />
                 </ItemContainer>
             ) : (

diff --git a/lib/components/Input/input-phone-number/index.tsx b/lib/components/Input/input-phone-number/index.tsx
@@ -24,6 +24,7 @@ export interface InputPhoneNumberProps
     onCodeChange?: (item: TCountryCodes) => void;
     onValueChange?: (phoneNumber: string) => void;
     showFlags?: boolean;
+    showSearchBar?: boolean;
 }
 
 const InputPhoneNumberContent = forwardRef<
@@ -43,6 +44,7 @@ const InputPhoneNumberContent = forwardRef<
             onCodeChange,
             onValueChange,
             showFlags = true,
+            showSearchBar = false,
             value,
             disabled,
             onChange,
@@ -111,6 +113,7 @@ const InputPhoneNumberContent = forwardRef<
                         options={countryCodes}
                         code={shortCode}
                         showFlags={showFlags}
+                        showSearchBar={showSearchBar}
                         containerRef={containerRef}
                         headcompRef={headcompRef}
                         onItemClick={handleItemChange}

diff --git a/lib/components/Input/input-phone-number/input-phone-number-docs.mdx b/lib/components/Input/input-phone-number/input-phone-number-docs.mdx
@@ -29,6 +29,7 @@ import { Markdown } from "@storybook/blocks";
 | onCodeChange         | (item: TCountryCodes) => void                  |                            | Callback function called when the country code changes.                                   |
 | onValueChange        | (phoneNumber: string) => void                  |                            | Callback function called input or code values changed and returns phone number with code. |
 | showFlags            | boolean                                        | true                       | Determines if flags should be displayed in the dropdown.                                  |
+| showSearchBar        | boolean                                        | false                      | Determines if search bar should be displayed in the dropdown.                             |
 | inputSize            | "sm", "md" ,"lg"                               | "lg"                       | Sets the size of the input field.                                                         |
 | variant              | "outline" ,"fill"                              | "outline"                  | Sets the variant style of the input.                                                      |
 | status               | "neutral" ,"error" ,"success"                  | "neutral"                  | Sets the status style of the input.                                                       |

diff --git a/lib/components/Input/input-phone-number/input-phone-number.stories.tsx b/lib/components/Input/input-phone-number/input-phone-number.stories.tsx
@@ -138,6 +138,11 @@ const meta = {
                 defaultValue: { summary: "outline" },
             },
         },
+        showSearchBar: {
+            control: {
+                type: "boolean",
+            },
+        },
         rightIcon: {
             options: Object.keys(icons),
             mapping: icons,