Implement advanced country filtering (GH-39)

Author: ArtyomVancyan

development/src/AntDemo.tsx

@@ -49,7 +49,6 @@ const AntDemo = () => {
                     <Form>
                         <FormItem name="phone" rules={[{validator}]}>
                             <PhoneInput
-                                enableArrow
                                 enableSearch
                                 onChange={(e) => setValue(e as any)}
                             />

development/src/MuiDemo.tsx

@@ -32,7 +32,6 @@ const Demo = () => {
                     )}
                     <form noValidate autoComplete="off" onSubmit={e => e.preventDefault()}>
                         <PhoneInput
-                            enableArrow
                             enableSearch
                             error={error}
                             variant="filled"

development/src/phone-hooks/index.ts

@@ -129,17 +129,15 @@ export const usePhone = ({
 
     const countriesOnly = useMemo(() => {
         const allowList = onlyCountries.length > 0 ? onlyCountries : countries.map(([iso]) => iso);
-        return countries.map(([iso]) => iso).filter((iso) => {
-            return allowList.includes(iso) && !excludeCountries.includes(iso);
+        return countries.filter(([iso, _1, dial]) => {
+            return (allowList.includes(iso) || allowList.includes(dial)) && !excludeCountries.includes(iso) && !excludeCountries.includes(dial);
         });
     }, [onlyCountries, excludeCountries])
 
     const countriesList = useMemo(() => {
-        const filteredCountries = countries.filter(([iso, name, _1, dial]) => {
-            return countriesOnly.includes(iso) && (
-                name.toLowerCase().startsWith(query.toLowerCase()) || dial.includes(query)
-            );
-        });
+        const filteredCountries = countriesOnly.filter(([_1, name, dial, mask]) => (
+            name.toLowerCase().startsWith(query.toLowerCase()) || dial.includes(query) || mask.includes(query)
+        ));
         return [
             ...filteredCountries.filter(([iso]) => preferredCountries.includes(iso)),
             ...filteredCountries.filter(([iso]) => !preferredCountries.includes(iso)),

package.json

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

src/index.ts

@@ -129,17 +129,15 @@ export const usePhone = ({
 
     const countriesOnly = useMemo(() => {
         const allowList = onlyCountries.length > 0 ? onlyCountries : countries.map(([iso]) => iso);
-        return countries.map(([iso]) => iso).filter((iso) => {
-            return allowList.includes(iso) && !excludeCountries.includes(iso);
+        return countries.filter(([iso, _1, dial]) => {
+            return (allowList.includes(iso) || allowList.includes(dial)) && !excludeCountries.includes(iso) && !excludeCountries.includes(dial);
         });
     }, [onlyCountries, excludeCountries])
 
     const countriesList = useMemo(() => {
-        const filteredCountries = countries.filter(([iso, name, _1, dial]) => {
-            return countriesOnly.includes(iso) && (
-                name.toLowerCase().startsWith(query.toLowerCase()) || dial.includes(query)
-            );
-        });
+        const filteredCountries = countriesOnly.filter(([_1, name, dial, mask]) => (
+            name.toLowerCase().startsWith(query.toLowerCase()) || dial.includes(query) || mask.includes(query)
+        ));
         return [
             ...filteredCountries.filter(([iso]) => preferredCountries.includes(iso)),
             ...filteredCountries.filter(([iso]) => !preferredCountries.includes(iso)),

tests/hooks.test.tsx

@@ -124,6 +124,23 @@ describe("Verifying the functionality of hooks", () => {
         expect((result.current.metadata as any)[0]).toBe("am");
     })
 
+    it("Check usePhone for advanced country filtering", () => {
+        const {result} = renderHook(usePhoneTester, {
+            initialProps: {
+                onlyCountries: ["ae", "gb", "us"] as any,
+                excludeCountries: ["1907", "1205", "1251"] as any,
+            }
+        });
+
+        expect(result.current.countriesList.map(c => c[2]).includes("1"));
+        expect(result.current.countriesList.map(c => c[2]).includes("44"));
+        expect(result.current.countriesList.map(c => c[2]).includes("971"));
+
+        expect(!result.current.countriesList.map(c => c[2]).includes("1907"));
+        expect(!result.current.countriesList.map(c => c[2]).includes("1205"));
+        expect(!result.current.countriesList.map(c => c[2]).includes("1251"));
+    })
+
     it("Check usePhone without parentheses", () => {
         const {result} = renderHook(usePhoneTester, {
             initialProps: {