Add localization support (GH-99)

Author: ArtyomVancyan

README.md

@@ -57,6 +57,20 @@ export default Demo;
 
 The `valid` function primarily checks if a phone number has a length appropriate for its specified country. In addition, a more comprehensive validation can be performed, including verifying the dial and area codes' accuracy for the selected country. To activate the strict validation, pass `true` as the first argument to the `valid` function.
 
+## Localization
+
+The package provides a built-in localization feature that allows you to change the language of the component. The `locale` function returns the language object that can be passed to the `ConfigProvider` component of Ant Design.
+
+```javascript
+import PhoneInput, {locale} from "antd-phone-input";
+
+<ConfigProvider locale={locale("frFR")}>
+  <PhoneInput/>
+</ConfigProvider>
+```
+
+NOTE: If you use localization in the [documented](https://ant.design/docs/react/i18n) way, you should replace the object passed to the `locale` property with the `locale` function, specifying the desired language code.
+
 ## Props
 
 Apart from the phone-specific properties described below, all [Input](https://ant.design/components/input#input) properties supported by the used Ant Design version can be applied to the phone input component.

package.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.3.8",
+  "version": "0.3.9",
   "name": "antd-phone-input",
   "description": "Advanced, highly customizable phone input component for Ant Design.",
   "keywords": [
@@ -46,20 +46,28 @@
         "default": "./styles.d.ts"
       }
     },
+    "./locale": {
+      "import": "./locale.js",
+      "require": "./locale.cjs.js",
+      "types": {
+        "default": "./locale.d.ts"
+      }
+    },
     "./package.json": "./package.json"
   },
   "files": [
     "index*",
     "types*",
     "styles*",
+    "locale*",
     "LICENSE",
     "resources",
     "README.md"
   ],
   "scripts": {
     "rename": "bash -c 'for file in *.js; do mv $file \"${file%.js}.$0.js\"; done'",
     "build": "tsc --module commonjs && npm run rename -- cjs && tsc --declaration",
-    "prebuild": "rm -r resources index* types* styles* || true",
+    "prebuild": "rm -r resources index* locale* types* styles* || true",
     "postpack": "tsx scripts/prepare-package.ts",
     "test": "jest --config jestconfig.json",
     "postbuild": "cp -r src/resources ."
@@ -70,7 +78,7 @@
     "react": ">=16"
   },
   "dependencies": {
-    "react-phone-hooks": "^0.1.5"
+    "react-phone-hooks": "^0.1.6"
   },
   "devDependencies": {
     "@testing-library/react": "^14.0.0",

src/index.tsx

@@ -32,6 +32,7 @@ import {
     usePhone,
 } from "react-phone-hooks";
 
+import locale from "./locale";
 import {injectMergedStyles} from "./styles";
 import {PhoneInputProps, PhoneNumber} from "./types";
 
@@ -45,8 +46,8 @@ const PhoneInput = forwardRef(({
                                    onlyCountries = [],
                                    excludeCountries = [],
                                    preferredCountries = [],
-                                   searchNotFound = "No country found",
-                                   searchPlaceholder = "Search country",
+                                   searchNotFound: defaultSearchNotFound = "No country found",
+                                   searchPlaceholder: defaultSearchPlaceholder = "Search country",
                                    dropdownRender = (node) => node,
                                    onMount: handleMount = () => null,
                                    onInput: handleInput = () => null,
@@ -55,6 +56,7 @@ const PhoneInput = forwardRef(({
                                    ...antInputProps
                                }: PhoneInputProps, forwardedRef: any) => {
     const formInstance = useFormInstance();
+    const {locale = {}} = useContext(ConfigContext);
     const formContext = useContext(FormContext);
     const {getPrefixCls} = useContext(ConfigContext);
     const inputRef = useRef<any>(null);
@@ -65,6 +67,12 @@ const PhoneInput = forwardRef(({
     const [minWidth, setMinWidth] = useState<number>(0);
     const [countryCode, setCountryCode] = useState<string>(country);
 
+    const {
+        searchNotFound = defaultSearchNotFound,
+        searchPlaceholder = defaultSearchPlaceholder,
+        countries = new Proxy({}, ({get: (_: any, prop: any) => prop})),
+    } = (locale as any).PhoneInput || {};
+
     const prefixCls = getPrefixCls();
     injectMergedStyles(prefixCls);
 
@@ -222,13 +230,13 @@ const PhoneInput = forwardRef(({
                         label={<div className={`flag ${iso}`}/>}
                         children={<div className={`${prefixCls}-phone-input-select-item`}>
                             <div className={`flag ${iso}`}/>
-                            {name}&nbsp;{displayFormat(mask)}
+                            {countries[name]}&nbsp;{displayFormat(mask)}
                         </div>}
                     />
                 )
             })}
         </Select>
-    ), [selectValue, query, disabled, disableParentheses, disableDropdown, onDropdownVisibleChange, minWidth, searchNotFound, countriesList, setFieldValue, setValue, prefixCls, enableSearch, searchPlaceholder])
+    ), [selectValue, query, disabled, disableParentheses, disableDropdown, onDropdownVisibleChange, minWidth, searchNotFound, countries, countriesList, setFieldValue, setValue, prefixCls, enableSearch, searchPlaceholder])
 
     return (
         <div className={`${prefixCls}-phone-input-wrapper`}
@@ -249,3 +257,4 @@ const PhoneInput = forwardRef(({
 })
 
 export default PhoneInput;
+export {PhoneInputProps, PhoneNumber, locale};

src/locale.ts

@@ -0,0 +1,83 @@
+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 "react-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, 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],
+})

tests/antd.test.tsx

@@ -6,7 +6,7 @@ import ConfigProvider from "antd/lib/config-provider";
 import userEvent from "@testing-library/user-event";
 import {act, render, screen} from "@testing-library/react";
 
-import PhoneInput from "../src";
+import PhoneInput, {locale} from "../src";
 
 Object.defineProperty(console, "warn", {
     value: jest.fn(),
@@ -34,6 +34,16 @@ describe("Checking the basic rendering and functionality", () => {
         assert(screen.getByDisplayValue("+1 (702) 123 4567"));
     })
 
+    it("Localization support check", async () => {
+        const {container, getByText} = render(<ConfigProvider locale={locale("frFR")}>
+            <PhoneInput onlyCountries={["am"]}/>
+        </ConfigProvider>);
+        await act(async () => {
+            await userEvent.click(container.querySelector(".flag") as any);
+        });
+        assert(!!getByText(/Arménie[\S\s]+\+374/));
+    })
+
     it("Rendering with an initial value", () => {
         render(<PhoneInput
             onMount={(value: any) => {