Skip to content

Commit ae6e16e

Browse files
ArtyomVancyanArtyomVancyan
authored
Provide i18n support with 70+ languages (GH-36)
2 parents 75888fd + f1bec18 commit ae6e16e

File tree

9 files changed

+36934
-11
lines changed

9 files changed

+36934
-11
lines changed

‎development/src/AntDemo.tsx

+2
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@ import FormItem from "antd/es/form/FormItem";
88
import ConfigProvider from "antd/es/config-provider";
99

1010
import PhoneInput from "./ant-phone";
11+
import locale from "./ant-phone/locale";
1112

1213
import "antd/dist/reset.css";
1314

@@ -32,6 +33,7 @@ const AntDemo = () => {
3233

3334
return (
3435
<ConfigProvider
36+
locale={locale("frFR")}
3537
theme={{algorithm: algorithm === "defaultAlgorithm" ? theme.defaultAlgorithm : theme.darkAlgorithm}}>
3638
<Card style={{height: "100%", borderRadius: 0, border: "none"}} bodyStyle={{padding: 0}}>
3739
<div style={{margin: 20, maxWidth: 400}}>

‎development/src/MuiDemo.tsx

+2-1
Original file line numberDiff line numberDiff line change
@@ -4,14 +4,15 @@ import {Button, Container, CssBaseline, TextField} from "@mui/material";
44

55
import PhoneInput from "./mui-phone";
66
import BasePhoneInput from "./mui-phone/base";
7+
import locale from "./mui-phone/locale";
78

89
const Demo = () => {
910
const [value, setValue] = useState({});
1011
const [mode, setMode] = useState("dark");
1112

1213
const error = useMemo(() => (value as any).valid && !(value as any).valid(), [value]);
1314

14-
const theme = useMemo(() => createTheme({palette: {mode: mode as any}}), [mode]);
15+
const theme = useMemo(() => createTheme({palette: {mode: mode as any}}, locale("frFR")), [mode]);
1516

1617
const handleThemeChange = useCallback(() => setMode(mode === "dark" ? "light" : "dark"), [mode]);
1718

‎development/src/ant-phone/index.tsx

+9-4
Original file line numberDiff line numberDiff line change
@@ -45,8 +45,6 @@ const PhoneInput = forwardRef(({
4545
onlyCountries = [],
4646
excludeCountries = [],
4747
preferredCountries = [],
48-
searchNotFound = "No country found",
49-
searchPlaceholder = "Search country",
5048
dropdownRender = (node) => node,
5149
onMount: handleMount = () => null,
5250
onInput: handleInput = () => null,
@@ -55,6 +53,7 @@ const PhoneInput = forwardRef(({
5553
...antInputProps
5654
}: PhoneInputProps, forwardedRef: any) => {
5755
const formInstance = useFormInstance();
56+
const {locale = {}} = useContext(ConfigContext);
5857
const formContext = useContext(FormContext);
5958
const {getPrefixCls} = useContext(ConfigContext);
6059
const inputRef = useRef<any>(null);
@@ -65,6 +64,12 @@ const PhoneInput = forwardRef(({
6564
const [minWidth, setMinWidth] = useState<number>(0);
6665
const [countryCode, setCountryCode] = useState<string>(country);
6766

67+
const {
68+
searchNotFound = "No country found",
69+
searchPlaceholder = "Search country",
70+
countries = new Proxy({}, ({get: (_: any, prop: any) => prop})),
71+
} = (locale as any).PhoneInput || {};
72+
6873
const prefixCls = getPrefixCls();
6974
injectMergedStyles(prefixCls);
7075

@@ -222,13 +227,13 @@ const PhoneInput = forwardRef(({
222227
label={<div className={`flag ${iso}`}/>}
223228
children={<div className={`${prefixCls}-phone-input-select-item`}>
224229
<div className={`flag ${iso}`}/>
225-
{name}&nbsp;{displayFormat(mask)}
230+
{countries[name]}&nbsp;{displayFormat(mask)}
226231
</div>}
227232
/>
228233
)
229234
})}
230235
</Select>
231-
), [selectValue, query, disabled, disableParentheses, disableDropdown, onDropdownVisibleChange, minWidth, searchNotFound, countriesList, setFieldValue, setValue, prefixCls, enableSearch, searchPlaceholder])
236+
), [selectValue, query, disabled, disableParentheses, disableDropdown, onDropdownVisibleChange, minWidth, searchNotFound, countries, countriesList, setFieldValue, setValue, prefixCls, enableSearch, searchPlaceholder])
232237

233238
return (
234239
<div className={`${prefixCls}-phone-input-wrapper`}

‎development/src/ant-phone/locale.ts

+86
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,86 @@
1+
import arEG from "antd/locale/ar_EG";
2+
import bnBD from "antd/locale/bn_BD";
3+
import csCZ from "antd/locale/cs_CZ";
4+
import elGR from "antd/locale/el_GR";
5+
import esES from "antd/locale/es_ES";
6+
import faIR from "antd/locale/fa_IR";
7+
import frCA from "antd/locale/fr_CA";
8+
import glES from "antd/locale/gl_ES";
9+
import hrHR from "antd/locale/hr_HR";
10+
import idID from "antd/locale/id_ID";
11+
import jaJP from "antd/locale/ja_JP";
12+
import kmKH from "antd/locale/km_KH";
13+
import koKR from "antd/locale/ko_KR";
14+
import lvLV from "antd/locale/lv_LV";
15+
import mnMN from "antd/locale/mn_MN";
16+
import nbNO from "antd/locale/nb_NO";
17+
import nlNL from "antd/locale/nl_NL";
18+
import ptPT from "antd/locale/pt_PT";
19+
import siLK from "antd/locale/si_LK";
20+
import srRS from "antd/locale/sr_RS";
21+
import thTH from "antd/locale/th_TH";
22+
import ukUA from "antd/locale/uk_UA";
23+
import viVN from "antd/locale/vi_VN";
24+
import zhTW from "antd/locale/zh_TW";
25+
import azAZ from "antd/locale/az_AZ";
26+
import byBY from "antd/locale/by_BY";
27+
import daDK from "antd/locale/da_DK";
28+
import enGB from "antd/locale/en_GB";
29+
import etEE from "antd/locale/et_EE";
30+
import fiFI from "antd/locale/fi_FI";
31+
import frFR from "antd/locale/fr_FR";
32+
import heIL from "antd/locale/he_IL";
33+
import huHU from "antd/locale/hu_HU";
34+
import isIS from "antd/locale/is_IS";
35+
import kaGE from "antd/locale/ka_GE";
36+
import kmrIQ from "antd/locale/kmr_IQ";
37+
import kuIQ from "antd/locale/ku_IQ";
38+
import mkMK from "antd/locale/mk_MK";
39+
import msMY from "antd/locale/ms_MY";
40+
import neNP from "antd/locale/ne_NP";
41+
import plPL from "antd/locale/pl_PL";
42+
import roRO from "antd/locale/ro_RO";
43+
import skSK from "antd/locale/sk_SK";
44+
import svSE from "antd/locale/sv_SE";
45+
import tkTK from "antd/locale/tk_TK";
46+
import urPK from "antd/locale/ur_PK";
47+
import zhCN from "antd/locale/zh_CN";
48+
import bgBG from "antd/locale/bg_BG";
49+
import caES from "antd/locale/ca_ES";
50+
import deDE from "antd/locale/de_DE";
51+
import enUS from "antd/locale/en_US";
52+
import euES from "antd/locale/eu_ES";
53+
import frBE from "antd/locale/fr_BE";
54+
import gaIE from "antd/locale/ga_IE";
55+
import hiIN from "antd/locale/hi_IN";
56+
import hyAM from "antd/locale/hy_AM";
57+
import itIT from "antd/locale/it_IT";
58+
import kkKZ from "antd/locale/kk_KZ";
59+
import knIN from "antd/locale/kn_IN";
60+
import ltLT from "antd/locale/lt_LT";
61+
import mlIN from "antd/locale/ml_IN";
62+
import myMM from "antd/locale/my_MM";
63+
import nlBE from "antd/locale/nl_BE";
64+
import ptBR from "antd/locale/pt_BR";
65+
import ruRU from "antd/locale/ru_RU";
66+
import slSI from "antd/locale/sl_SI";
67+
import taIN from "antd/locale/ta_IN";
68+
import trTR from "antd/locale/tr_TR";
69+
import uzUZ from "antd/locale/uz_UZ";
70+
import zhHK from "antd/locale/zh_HK";
71+
import * as phoneLocale from "../phone-hooks/locale";
72+
73+
const locale = {
74+
arEG, bnBD, csCZ, elGR, esES, faIR, frCA, glES, hrHR, idID, jaJP, kmKH, koKR, lvLV,
75+
mnMN, nbNO, nlNL, ptPT, siLK, srRS, thTH, ukUA, viVN, zhTW, azAZ, byBY, daDK, enGB,
76+
etEE, fiFI, frFR, heIL, huHU, isIS, kaGE, kmrIQ, kuIQ, mkMK, msMY, neNP, plPL, roRO,
77+
skSK, svSE, tkTK, urPK, zhCN, bgBG, caES, deDE, enUS, euES, frBE, gaIE, hiIN, hyAM,
78+
itIT, kkKZ, knIN, ltLT, mlIN, myMM, nlBE, ptBR, ruRU, slSI, taIN, trTR, uzUZ, zhHK,
79+
}
80+
81+
type Locale = keyof typeof locale;
82+
83+
export default (lang: Locale) => ({
84+
...locale[lang],
85+
PhoneInput: (phoneLocale as any)[lang],
86+
})

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

+8-4
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
"use client";
22

33
import {ChangeEvent, forwardRef, KeyboardEvent, useCallback, useEffect, useMemo, useRef, useState} from "react";
4-
import {InputAdornment, MenuItem, Select, TextField} from "@mui/material";
4+
import {InputAdornment, MenuItem, Select, TextField, useThemeProps} from "@mui/material";
55

66
import {
77
checkValidity,
@@ -33,8 +33,6 @@ const PhoneInput = forwardRef(({
3333
onlyCountries = [],
3434
excludeCountries = [],
3535
preferredCountries = [],
36-
searchNotFound = "No country found",
37-
searchPlaceholder = "Search country",
3836
onMount: handleMount = () => null,
3937
onInput: handleInput = () => null,
4038
onChange: handleChange = () => null,
@@ -50,6 +48,12 @@ const PhoneInput = forwardRef(({
5048
const [maxWidth, setMaxWidth] = useState<number>(0);
5149
const [countryCode, setCountryCode] = useState<string>(country);
5250

51+
const {
52+
searchNotFound = "No country found",
53+
searchPlaceholder = "Search country",
54+
countries = new Proxy({}, ({get: (_: any, prop: any) => prop})),
55+
} = useThemeProps({props: {}, name: "MuiPhoneInput"}) as any;
56+
5357
const {
5458
value,
5559
pattern,
@@ -171,7 +175,7 @@ const PhoneInput = forwardRef(({
171175
children={<div className="mui-phone-input-select-item">
172176
<div className={`flag ${iso}`}/>
173177
<div className="label">
174-
{name}&nbsp;{displayFormat(mask)}
178+
{countries[name]}&nbsp;{displayFormat(mask)}
175179
</div>
176180
</div>}
177181
/>

‎development/src/mui-phone/locale.ts

+13
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
import * as locale from "@mui/material/locale";
2+
import * as phoneLocale from "../phone-hooks/locale";
3+
4+
type Locale = keyof typeof locale;
5+
6+
export default (lang: Locale) => ({
7+
components: {
8+
...locale[lang].components,
9+
MuiPhoneInput: {
10+
defaultProps: (phoneLocale as any)[lang],
11+
}
12+
}
13+
})

0 commit comments

Comments
 (0)