GH-35: Implement localization support

Author: ArtyomVancyan

development/src/ant-phone/index.tsx

@@ -45,8 +45,6 @@ const PhoneInput = forwardRef(({
                                    onlyCountries = [],
                                    excludeCountries = [],
                                    preferredCountries = [],
-                                   searchNotFound = "No country found",
-                                   searchPlaceholder = "Search country",
                                    dropdownRender = (node) => node,
                                    onMount: handleMount = () => null,
                                    onInput: handleInput = () => null,
@@ -55,6 +53,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 +64,12 @@ const PhoneInput = forwardRef(({
     const [minWidth, setMinWidth] = useState<number>(0);
     const [countryCode, setCountryCode] = useState<string>(country);
 
+    const {
+        searchNotFound = "No country found",
+        searchPlaceholder = "Search country",
+        countries = new Proxy({}, ({get: (_: any, prop: any) => prop})),
+    } = (locale as any).PhoneInput || {};
+
     const prefixCls = getPrefixCls();
     injectMergedStyles(prefixCls);
 
@@ -222,13 +227,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`}

development/src/mui-phone/index.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import {ChangeEvent, forwardRef, KeyboardEvent, useCallback, useEffect, useMemo, useRef, useState} from "react";
-import {InputAdornment, MenuItem, Select, TextField} from "@mui/material";
+import {InputAdornment, MenuItem, Select, TextField, useThemeProps} from "@mui/material";
 
 import {
     checkValidity,
@@ -33,8 +33,6 @@ const PhoneInput = forwardRef(({
                                    onlyCountries = [],
                                    excludeCountries = [],
                                    preferredCountries = [],
-                                   searchNotFound = "No country found",
-                                   searchPlaceholder = "Search country",
                                    onMount: handleMount = () => null,
                                    onInput: handleInput = () => null,
                                    onChange: handleChange = () => null,
@@ -50,6 +48,12 @@ const PhoneInput = forwardRef(({
     const [maxWidth, setMaxWidth] = useState<number>(0);
     const [countryCode, setCountryCode] = useState<string>(country);
 
+    const {
+        searchNotFound = "No country found",
+        searchPlaceholder = "Search country",
+        countries = new Proxy({}, ({get: (_: any, prop: any) => prop})),
+    } = useThemeProps({props: {}, name: "MuiPhoneInput"}) as any;
+
     const {
         value,
         pattern,
@@ -171,7 +175,7 @@ const PhoneInput = forwardRef(({
                                         children={<div className="mui-phone-input-select-item">
                                             <div className={`flag ${iso}`}/>
                                             <div className="label">
-                                                {name}&nbsp;{displayFormat(mask)}
+                                                {countries[name]}&nbsp;{displayFormat(mask)}
                                             </div>
                                         </div>}
                                     />