Implement distinct option for countries list (GH-67)

Author: ArtyomVancyan

development/package.json

@@ -13,7 +13,7 @@
     "antd": "^5.8.3",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "react-phone-hooks": "0.1.0-beta.1",
+    "react-phone-hooks": "^0.1.12",
     "react-scripts": "^5.0.1",
     "typescript": "^4.9.5"
   },

development/src/ant-phone/index.tsx

@@ -39,6 +39,7 @@ import {PhoneInputProps, PhoneNumber} from "./types";
 const PhoneInput = forwardRef(({
                                    value: initialValue = "",
                                    country = getDefaultISO2Code(),
+                                   distinct = false,
                                    disabled = false,
                                    enableArrow = false,
                                    enableSearch = false,
@@ -86,6 +87,7 @@ const PhoneInput = forwardRef(({
     } = usePhone({
         query,
         country,
+        distinct,
         countryCode,
         initialValue,
         onlyCountries,

development/src/ant-phone/types.ts

@@ -11,6 +11,8 @@ export interface PhoneInputProps extends Omit<InputProps, "value" | "onChange">
 
     country?: string;
 
+    distinct?: boolean;
+
     enableArrow?: boolean;
 
     enableSearch?: boolean;

development/src/mui-phone/index.tsx

@@ -27,6 +27,7 @@ const PhoneInput = forwardRef(({
                                    variant = undefined,
                                    searchVariant = undefined,
                                    country = getDefaultISO2Code(),
+                                   distinct = false,
                                    disabled = false,
                                    enableArrow = false,
                                    enableSearch = false,
@@ -69,6 +70,7 @@ const PhoneInput = forwardRef(({
         query,
         locale,
         country,
+        distinct,
         countryCode,
         initialValue,
         onlyCountries,

development/src/mui-phone/joy/index.tsx

@@ -27,6 +27,7 @@ const PhoneInput = forwardRef(({
                                    variant = undefined,
                                    searchVariant = undefined,
                                    country = getDefaultISO2Code(),
+                                   distinct = false,
                                    disabled = false,
                                    enableArrow = false,
                                    enableSearch = false,
@@ -69,6 +70,7 @@ const PhoneInput = forwardRef(({
         query,
         locale,
         country,
+        distinct,
         countryCode,
         initialValue,
         onlyCountries,

development/src/mui-phone/joy/types.ts

@@ -13,6 +13,8 @@ export interface PhoneInputProps extends Omit<InputProps, "value" | "onChange">
 
     country?: string;
 
+    distinct?: boolean;
+
     enableArrow?: boolean;
 
     enableSearch?: boolean;

development/src/mui-phone/types.ts

@@ -13,6 +13,8 @@ export interface PhoneInputProps extends Omit<TextFieldProps, "onChange"> {
 
     country?: string;
 
+    distinct?: boolean;
+
     enableArrow?: boolean;
 
     enableSearch?: boolean;

development/src/phone-hooks/index.ts

@@ -116,6 +116,7 @@ export const usePhone = ({
                              query = "",
                              locale = "",
                              country = "",
+                             distinct = false,
                              countryCode = "",
                              initialValue = "",
                              onlyCountries = [],
@@ -143,11 +144,13 @@ export const usePhone = ({
             const localized = countries && (countries[name] || "").toLowerCase();
             return [localized, name.toLowerCase(), dial, mask].some(component => component.includes(q));
         });
-        return [
+        const seen = new Set();
+        const whitelistCountries = [
             ...filteredCountries.filter(([iso]) => preferredCountries.includes(iso)),
             ...filteredCountries.filter(([iso]) => !preferredCountries.includes(iso)),
         ];
-    }, [countriesOnly, preferredCountries, locale, query])
+        return whitelistCountries.filter(([iso]) => !seen.has(iso) && seen.add(iso));
+    }, [countriesOnly, preferredCountries, distinct, locale, query])
 
     const metadata = useMemo(() => {
         const calculatedMetadata = getMetadata(getRawValue(value), countriesList, countryCode);

development/src/phone-hooks/types.ts

@@ -13,6 +13,7 @@ export interface usePhoneOptions {
     query?: string;
     locale?: string;
     country?: string;
+    distinct?: boolean;
     countryCode?: string;
     onlyCountries?: string[];
     excludeCountries?: string[];

package.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.1.12",
+  "version": "0.1.13",
   "name": "react-phone-hooks",
   "description": "React hooks and utility functions for parsing and validating phone numbers.",
   "keywords": [

src/index.ts

@@ -116,6 +116,7 @@ export const usePhone = ({
                              query = "",
                              locale = "",
                              country = "",
+                             distinct = false,
                              countryCode = "",
                              initialValue = "",
                              onlyCountries = [],
@@ -143,11 +144,13 @@ export const usePhone = ({
             const localized = countries && (countries[name] || "").toLowerCase();
             return [localized, name.toLowerCase(), dial, mask].some(component => component.includes(q));
         });
-        return [
+        const seen = new Set();
+        const whitelistCountries = [
             ...filteredCountries.filter(([iso]) => preferredCountries.includes(iso)),
             ...filteredCountries.filter(([iso]) => !preferredCountries.includes(iso)),
         ];
-    }, [countriesOnly, preferredCountries, locale, query])
+        return whitelistCountries.filter(([iso]) => !seen.has(iso) && seen.add(iso));
+    }, [countriesOnly, preferredCountries, distinct, locale, query])
 
     const metadata = useMemo(() => {
         const calculatedMetadata = getMetadata(getRawValue(value), countriesList, countryCode);

src/types.ts

@@ -13,6 +13,7 @@ export interface usePhoneOptions {
     query?: string;
     locale?: string;
     country?: string;
+    distinct?: boolean;
     countryCode?: string;
     onlyCountries?: string[];
     excludeCountries?: string[];