diff --git a/development/src/ant-phone/index.tsx b/development/src/ant-phone/index.tsx
index 5952a3e..e0369f7 100644
--- a/development/src/ant-phone/index.tsx
+++ b/development/src/ant-phone/index.tsx
@@ -15,6 +15,7 @@ import useFormInstance from "antd/es/form/hooks/useFormInstance";
import {ConfigContext} from "antd/es/config-provider";
import {FormContext} from "antd/es/form/context";
import {useWatch} from "antd/es/form/Form";
+import version from "antd/es/version";
import Select from "antd/es/select";
import Input from "antd/es/input";
@@ -36,9 +37,14 @@ import locale from "./locale";
import {injectMergedStyles} from "./styles";
import {PhoneInputProps, PhoneNumber} from "./types";
+const [major, minor, _] = version.split(".").map(Number);
+const isV5x = major === 5;
+const isV5x25 = isV5x && minor >= 25;
+
const PhoneInput = forwardRef(({
value: initialValue = "",
country = getDefaultISO2Code(),
+ useSVG = false,
distinct = false,
disabled = false,
enableArrow = false,
@@ -221,9 +227,9 @@ const PhoneInput = forwardRef(({
inputRef.current.input.focus();
}}
optionLabelProp="label"
- dropdownStyle={{minWidth}}
- onDropdownVisibleChange={onDropdownVisibleChange}
- dropdownRender={(menu) => (
+ {...(isV5x ? {onOpenChange: onDropdownVisibleChange} : {onDropdownVisibleChange})}
+ {...(isV5x25 ? {styles: {popup: {root: {minWidth}}}} : {dropdownStyle: {minWidth}})}
+ {...({[isV5x ? "popupRender" : "dropdownRender"]: (menu: any) => (
{enableSearch && (
{searchNotFound}
)}
- )}
+ )})}
>
-
+
{suffixIcon}
}
/>
@@ -256,18 +262,18 @@ const PhoneInput = forwardRef(({
value={iso + dial}
key={`${iso}_${mask}`}
label={}
children={
-
+
{countries[name]} {displayFormat(mask)}
}
/>
)
})}
- ), [selectValue, suffixIcon, countryCode, query, disabled, disableParentheses, disableDropdown, onDropdownVisibleChange, minWidth, searchNotFound, countries, countriesList, setFieldValue, setValue, prefixCls, enableSearch, searchPlaceholder])
+ ), [selectValue, suffixIcon, countryCode, query, disabled, disableParentheses, disableDropdown, onDropdownVisibleChange, minWidth, searchNotFound, countries, countriesList, setFieldValue, setValue, prefixCls, enableSearch, searchPlaceholder, useSVG])
return (
{
value?: PhoneNumber | string;
+ useSVG?: boolean;
+
country?: string;
distinct?: boolean;
diff --git a/development/src/mui-phone/base/index.tsx b/development/src/mui-phone/base/index.tsx
index 6eb1214..31ef9ed 100644
--- a/development/src/mui-phone/base/index.tsx
+++ b/development/src/mui-phone/base/index.tsx
@@ -60,6 +60,7 @@ const Input = forwardRef
(({slotProps, ...props}, r
const PhoneInput = forwardRef(({
value: initialValue = "",
country = getDefaultISO2Code(),
+ useSVG = false,
disableParentheses = false,
onlyCountries = [],
excludeCountries = [],
@@ -138,7 +139,7 @@ const PhoneInput = forwardRef(({
onInput={onInput}
onChange={onChange}
onKeyDown={onKeyDown}
- startAdornment={}
+ startAdornment={}
{...(muiInputProps as any)}
/>
)
diff --git a/development/src/mui-phone/base/types.ts b/development/src/mui-phone/base/types.ts
index 2c023cb..78bce0a 100644
--- a/development/src/mui-phone/base/types.ts
+++ b/development/src/mui-phone/base/types.ts
@@ -9,6 +9,8 @@ export type PhoneNumber = types.PhoneNumber;
export interface PhoneInputProps extends Omit {
value?: PhoneNumber | string;
+ useSVG?: boolean;
+
country?: string;
disableParentheses?: boolean;
diff --git a/development/src/mui-phone/index.tsx b/development/src/mui-phone/index.tsx
index ca7862a..2e30004 100644
--- a/development/src/mui-phone/index.tsx
+++ b/development/src/mui-phone/index.tsx
@@ -27,6 +27,7 @@ const PhoneInput = forwardRef(({
variant = undefined,
searchVariant = undefined,
country = getDefaultISO2Code(),
+ useSVG = false,
distinct = false,
disabled = false,
enableArrow = false,
@@ -181,7 +182,7 @@ const PhoneInput = forwardRef(({
setTimeout(() => input.focus(), 100);
}}
children={
-
+
{countries[name]} {displayFormat(mask)}
@@ -214,7 +215,7 @@ const PhoneInput = forwardRef(({
}}
onClick={() => setOpen(!open)}
>
-
+
{enableArrow && (