Implement support for localized search query (GH-60)

typesnippet · Nov 13, 2024 · f796cd4 · f796cd4
2 parents 9ad4bfb + 39241cb
commit f796cd4
Show file tree

Hide file tree

Showing 10 changed files with 105 additions and 85 deletions.
diff --git a/development/src/ant-phone/index.tsx b/development/src/ant-phone/index.tsx
@@ -57,9 +57,8 @@ const PhoneInput = forwardRef(({
                                    ...antInputProps
                                }: PhoneInputProps, forwardedRef: any) => {
     const formInstance = useFormInstance();
-    const {locale = {}} = useContext(ConfigContext);
+    const {locale = {}, getPrefixCls} = useContext(ConfigContext);
     const formContext = useContext(FormContext);
-    const {getPrefixCls} = useContext(ConfigContext);
     const inputRef = useRef<any>(null);
     const searchRef = useRef<any>(null);
     const selectedRef = useRef<boolean>(false);
@@ -69,6 +68,7 @@ const PhoneInput = forwardRef(({
     const [countryCode, setCountryCode] = useState<string>(country);
 
     const {
+        locale: localeIdentifier,
         searchNotFound = defaultSearchNotFound,
         searchPlaceholder = defaultSearchPlaceholder,
         countries = new Proxy({}, ({get: (_: any, prop: any) => prop})),
@@ -92,6 +92,7 @@ const PhoneInput = forwardRef(({
         excludeCountries,
         preferredCountries,
         disableParentheses,
+        locale: localeIdentifier,
     });
 
     const {

diff --git a/development/src/ant-phone/locale.ts b/development/src/ant-phone/locale.ts
@@ -1,86 +1,86 @@
-import arEG from "antd/locale/ar_EG";
-import bnBD from "antd/locale/bn_BD";
-import csCZ from "antd/locale/cs_CZ";
-import elGR from "antd/locale/el_GR";
-import esES from "antd/locale/es_ES";
-import faIR from "antd/locale/fa_IR";
-import frCA from "antd/locale/fr_CA";
-import glES from "antd/locale/gl_ES";
-import hrHR from "antd/locale/hr_HR";
-import idID from "antd/locale/id_ID";
-import jaJP from "antd/locale/ja_JP";
-import kmKH from "antd/locale/km_KH";
-import koKR from "antd/locale/ko_KR";
-import lvLV from "antd/locale/lv_LV";
-import mnMN from "antd/locale/mn_MN";
-import nbNO from "antd/locale/nb_NO";
-import nlNL from "antd/locale/nl_NL";
-import ptPT from "antd/locale/pt_PT";
-import siLK from "antd/locale/si_LK";
-import srRS from "antd/locale/sr_RS";
-import thTH from "antd/locale/th_TH";
-import ukUA from "antd/locale/uk_UA";
-import viVN from "antd/locale/vi_VN";
-import zhTW from "antd/locale/zh_TW";
-import azAZ from "antd/locale/az_AZ";
-import byBY from "antd/locale/by_BY";
-import daDK from "antd/locale/da_DK";
-import enGB from "antd/locale/en_GB";
-import etEE from "antd/locale/et_EE";
-import fiFI from "antd/locale/fi_FI";
-import frFR from "antd/locale/fr_FR";
-import heIL from "antd/locale/he_IL";
-import huHU from "antd/locale/hu_HU";
-import isIS from "antd/locale/is_IS";
-import kaGE from "antd/locale/ka_GE";
-import kmrIQ from "antd/locale/kmr_IQ";
-import kuIQ from "antd/locale/ku_IQ";
-import mkMK from "antd/locale/mk_MK";
-import msMY from "antd/locale/ms_MY";
-import neNP from "antd/locale/ne_NP";
-import plPL from "antd/locale/pl_PL";
-import roRO from "antd/locale/ro_RO";
-import skSK from "antd/locale/sk_SK";
-import svSE from "antd/locale/sv_SE";
-import tkTK from "antd/locale/tk_TK";
-import urPK from "antd/locale/ur_PK";
-import zhCN from "antd/locale/zh_CN";
-import bgBG from "antd/locale/bg_BG";
-import caES from "antd/locale/ca_ES";
-import deDE from "antd/locale/de_DE";
-import enUS from "antd/locale/en_US";
-import euES from "antd/locale/eu_ES";
-import frBE from "antd/locale/fr_BE";
-import gaIE from "antd/locale/ga_IE";
-import hiIN from "antd/locale/hi_IN";
-import hyAM from "antd/locale/hy_AM";
-import itIT from "antd/locale/it_IT";
-import kkKZ from "antd/locale/kk_KZ";
-import knIN from "antd/locale/kn_IN";
-import ltLT from "antd/locale/lt_LT";
-import mlIN from "antd/locale/ml_IN";
-import myMM from "antd/locale/my_MM";
-import nlBE from "antd/locale/nl_BE";
-import ptBR from "antd/locale/pt_BR";
-import ruRU from "antd/locale/ru_RU";
-import slSI from "antd/locale/sl_SI";
-import taIN from "antd/locale/ta_IN";
-import trTR from "antd/locale/tr_TR";
-import uzUZ from "antd/locale/uz_UZ";
-import zhHK from "antd/locale/zh_HK";
+import arEG from "antd/es/locale/ar_EG";
+import bnBD from "antd/es/locale/bn_BD";
+import csCZ from "antd/es/locale/cs_CZ";
+import elGR from "antd/es/locale/el_GR";
+import esES from "antd/es/locale/es_ES";
+import faIR from "antd/es/locale/fa_IR";
+import frCA from "antd/es/locale/fr_CA";
+import glES from "antd/es/locale/gl_ES";
+import hrHR from "antd/es/locale/hr_HR";
+import idID from "antd/es/locale/id_ID";
+import jaJP from "antd/es/locale/ja_JP";
+import kmKH from "antd/es/locale/km_KH";
+import koKR from "antd/es/locale/ko_KR";
+import lvLV from "antd/es/locale/lv_LV";
+import mnMN from "antd/es/locale/mn_MN";
+import nbNO from "antd/es/locale/nb_NO";
+import nlNL from "antd/es/locale/nl_NL";
+import ptPT from "antd/es/locale/pt_PT";
+import siLK from "antd/es/locale/si_LK";
+import srRS from "antd/es/locale/sr_RS";
+import thTH from "antd/es/locale/th_TH";
+import ukUA from "antd/es/locale/uk_UA";
+import viVN from "antd/es/locale/vi_VN";
+import zhTW from "antd/es/locale/zh_TW";
+import azAZ from "antd/es/locale/az_AZ";
+import byBY from "antd/es/locale/by_BY";
+import daDK from "antd/es/locale/da_DK";
+import enGB from "antd/es/locale/en_GB";
+import etEE from "antd/es/locale/et_EE";
+import fiFI from "antd/es/locale/fi_FI";
+import frFR from "antd/es/locale/fr_FR";
+import heIL from "antd/es/locale/he_IL";
+import huHU from "antd/es/locale/hu_HU";
+import isIS from "antd/es/locale/is_IS";
+import kaGE from "antd/es/locale/ka_GE";
+import kmrIQ from "antd/es/locale/kmr_IQ";
+import kuIQ from "antd/es/locale/ku_IQ";
+import mkMK from "antd/es/locale/mk_MK";
+import msMY from "antd/es/locale/ms_MY";
+import neNP from "antd/es/locale/ne_NP";
+import plPL from "antd/es/locale/pl_PL";
+import roRO from "antd/es/locale/ro_RO";
+import skSK from "antd/es/locale/sk_SK";
+import svSE from "antd/es/locale/sv_SE";
+import tkTK from "antd/es/locale/tk_TK";
+import urPK from "antd/es/locale/ur_PK";
+import zhCN from "antd/es/locale/zh_CN";
+import bgBG from "antd/es/locale/bg_BG";
+import caES from "antd/es/locale/ca_ES";
+import deDE from "antd/es/locale/de_DE";
+import enUS from "antd/es/locale/en_US";
+import frBE from "antd/es/locale/fr_BE";
+import gaIE from "antd/es/locale/ga_IE";
+import hiIN from "antd/es/locale/hi_IN";
+import hyAM from "antd/es/locale/hy_AM";
+import itIT from "antd/es/locale/it_IT";
+import kkKZ from "antd/es/locale/kk_KZ";
+import knIN from "antd/es/locale/kn_IN";
+import ltLT from "antd/es/locale/lt_LT";
+import mlIN from "antd/es/locale/ml_IN";
+import nlBE from "antd/es/locale/nl_BE";
+import ptBR from "antd/es/locale/pt_BR";
+import ruRU from "antd/es/locale/ru_RU";
+import slSI from "antd/es/locale/sl_SI";
+import taIN from "antd/es/locale/ta_IN";
+import trTR from "antd/es/locale/tr_TR";
+import zhHK from "antd/es/locale/zh_HK";
 import * as phoneLocale from "../phone-hooks/locale";
 
 const locale = {
     arEG, bnBD, csCZ, elGR, esES, faIR, frCA, glES, hrHR, idID, jaJP, kmKH, koKR, lvLV,
     mnMN, nbNO, nlNL, ptPT, siLK, srRS, thTH, ukUA, viVN, zhTW, azAZ, byBY, daDK, enGB,
     etEE, fiFI, frFR, heIL, huHU, isIS, kaGE, kmrIQ, kuIQ, mkMK, msMY, neNP, plPL, roRO,
-    skSK, svSE, tkTK, urPK, zhCN, bgBG, caES, deDE, enUS, euES, frBE, gaIE, hiIN, hyAM,
-    itIT, kkKZ, knIN, ltLT, mlIN, myMM, nlBE, ptBR, ruRU, slSI, taIN, trTR, uzUZ, zhHK,
+    skSK, svSE, tkTK, urPK, zhCN, bgBG, caES, deDE, enUS, frBE, gaIE, hiIN, hyAM, itIT,
+    kkKZ, knIN, ltLT, mlIN, nlBE, ptBR, ruRU, slSI, taIN, trTR, zhHK,
 }
 
 type Locale = keyof typeof locale;
 
 export default (lang: Locale) => ({
     ...locale[lang],
-    PhoneInput: (phoneLocale as any)[lang],
+    PhoneInput: {
+        ...(phoneLocale as any)[lang],
+        locale: lang,
+    },
 })
diff --git a/development/src/mui-phone/index.tsx b/development/src/mui-phone/index.tsx
@@ -53,6 +53,7 @@ const PhoneInput = forwardRef(({
     const [countryCode, setCountryCode] = useState<string>(country);
 
     const {
+        locale,
         searchNotFound = defaultSearchNotFound,
         searchPlaceholder = defaultSearchPlaceholder,
         countries = new Proxy({}, ({get: (_: any, prop: any) => prop})),
@@ -66,6 +67,7 @@ const PhoneInput = forwardRef(({
         countriesList,
     } = usePhone({
         query,
+        locale,
         country,
         countryCode,
         initialValue,

diff --git a/development/src/mui-phone/joy/index.tsx b/development/src/mui-phone/joy/index.tsx
@@ -53,6 +53,7 @@ const PhoneInput = forwardRef(({
     const [countryCode, setCountryCode] = useState<string>(country);
 
     const {
+        locale,
         searchNotFound = defaultSearchNotFound,
         searchPlaceholder = defaultSearchPlaceholder,
         countries = new Proxy({}, ({get: (_: any, prop: any) => prop})),
@@ -66,6 +67,7 @@ const PhoneInput = forwardRef(({
         countriesList,
     } = usePhone({
         query,
+        locale,
         country,
         countryCode,
         initialValue,

diff --git a/development/src/mui-phone/locale.ts b/development/src/mui-phone/locale.ts
@@ -7,7 +7,10 @@ export default (lang: Locale) => ({
     components: {
         ...locale[lang].components,
         MuiPhoneInput: {
-            defaultProps: (phoneLocale as any)[lang],
+            defaultProps: {
+                ...(phoneLocale as any)[lang],
+                locale: lang,
+            },
         }
     }
 })
diff --git a/development/src/phone-hooks/index.ts b/development/src/phone-hooks/index.ts
@@ -4,6 +4,7 @@ import {ChangeEvent, KeyboardEvent, useCallback, useMemo, useRef, useState} from
 
 import {PhoneNumber, usePhoneOptions} from "./types";
 
+import * as phoneLocale from "./locale";
 import countries from "./metadata/countries.json";
 import timezones from "./metadata/timezones.json";
 import validations from "./metadata/validations.json";
@@ -113,6 +114,7 @@ export const useMask = (pattern: string) => {
 
 export const usePhone = ({
                              query = "",
+                             locale = "",
                              country = "",
                              countryCode = "",
                              initialValue = "",
@@ -135,14 +137,17 @@ export const usePhone = ({
     }, [onlyCountries, excludeCountries])
 
     const countriesList = useMemo(() => {
-        const filteredCountries = countriesOnly.filter(([_1, name, dial, mask]) => (
-            name.toLowerCase().startsWith(query.toLowerCase()) || dial.includes(query) || mask.includes(query)
-        ));
+        const filteredCountries = countriesOnly.filter(([_1, name, dial, mask]) => {
+            const q = query.toLowerCase();
+            const countries = locale && ((phoneLocale as any)[locale])?.countries;
+            const localized = countries && (countries[name] || "").toLowerCase();
+            return [localized, name.toLowerCase(), dial, mask].some(component => component.includes(q));
+        });
         return [
             ...filteredCountries.filter(([iso]) => preferredCountries.includes(iso)),
             ...filteredCountries.filter(([iso]) => !preferredCountries.includes(iso)),
         ];
-    }, [countriesOnly, preferredCountries, query])
+    }, [countriesOnly, preferredCountries, locale, query])
 
     const metadata = useMemo(() => {
         const calculatedMetadata = getMetadata(getRawValue(value), countriesList, countryCode);

diff --git a/development/src/phone-hooks/types.ts b/development/src/phone-hooks/types.ts
@@ -11,6 +11,7 @@ export interface PhoneNumber {
 
 export interface usePhoneOptions {
     query?: string;
+    locale?: string;
     country?: string;
     countryCode?: string;
     onlyCountries?: string[];

diff --git a/package.json b/package.json
@@ -1,5 +1,5 @@
 {
-  "version": "0.1.11",
+  "version": "0.1.12",
   "name": "react-phone-hooks",
   "description": "React hooks and utility functions for parsing and validating phone numbers.",
   "keywords": [

diff --git a/src/index.ts b/src/index.ts
@@ -4,6 +4,7 @@ import {ChangeEvent, KeyboardEvent, useCallback, useMemo, useRef, useState} from
 
 import {PhoneNumber, usePhoneOptions} from "./types";
 
+import * as phoneLocale from "./locale";
 import countries from "./metadata/countries.json";
 import timezones from "./metadata/timezones.json";
 import validations from "./metadata/validations.json";
@@ -113,6 +114,7 @@ export const useMask = (pattern: string) => {
 
 export const usePhone = ({
                              query = "",
+                             locale = "",
                              country = "",
                              countryCode = "",
                              initialValue = "",
@@ -135,14 +137,17 @@ export const usePhone = ({
     }, [onlyCountries, excludeCountries])
 
     const countriesList = useMemo(() => {
-        const filteredCountries = countriesOnly.filter(([_1, name, dial, mask]) => (
-            name.toLowerCase().startsWith(query.toLowerCase()) || dial.includes(query) || mask.includes(query)
-        ));
+        const filteredCountries = countriesOnly.filter(([_1, name, dial, mask]) => {
+            const q = query.toLowerCase();
+            const countries = locale && ((phoneLocale as any)[locale])?.countries;
+            const localized = countries && (countries[name] || "").toLowerCase();
+            return [localized, name.toLowerCase(), dial, mask].some(component => component.includes(q));
+        });
         return [
             ...filteredCountries.filter(([iso]) => preferredCountries.includes(iso)),
             ...filteredCountries.filter(([iso]) => !preferredCountries.includes(iso)),
         ];
-    }, [countriesOnly, preferredCountries, query])
+    }, [countriesOnly, preferredCountries, locale, query])
 
     const metadata = useMemo(() => {
         const calculatedMetadata = getMetadata(getRawValue(value), countriesList, countryCode);

diff --git a/src/types.ts b/src/types.ts
@@ -11,6 +11,7 @@ export interface PhoneNumber {
 
 export interface usePhoneOptions {
     query?: string;
+    locale?: string;
     country?: string;
     countryCode?: string;
     onlyCountries?: string[];