diff --git a/README.md b/README.md
index 6cc1cc0..f2761c3 100644
--- a/README.md
+++ b/README.md
@@ -69,6 +69,7 @@ Apart from the phone-specific properties described below, all [Input](https://an
| searchNotFound | The value is shown if `enableSearch` is `true` and the query does not match any country. Default value is `No country found`. | string |
| searchPlaceholder | The value is shown if `enableSearch` is `true`. Default value is `Search country`. | string |
| disableDropdown | Disables the manual country selection through the dropdown menu. | boolean |
+| disableParentheses | Disables parentheses from the input masks. Default enabled. | boolean |
| onlyCountries | Country codes to be included in the list. E.g. `onlyCountries={['us', 'ca', 'uk']}`. | string[] |
| excludeCountries | Country codes to be excluded from the list of countries. E.g. `excludeCountries={['us', 'ca', 'uk']}`. | string[] |
| preferredCountries | Country codes to be at the top of the list. E.g. `preferredCountries={['us', 'ca', 'uk']}`. | string[] |
diff --git a/examples/antd4.x/package.json b/examples/antd4.x/package.json
index caa1cb2..f9a06b9 100644
--- a/examples/antd4.x/package.json
+++ b/examples/antd4.x/package.json
@@ -7,7 +7,7 @@
"@types/react": "^18.2.0",
"@types/react-dom": "^18.2.0",
"antd": "^4.24.8",
- "antd-phone-input": "^0.3.5",
+ "antd-phone-input": "^0.3.8",
"craco-less": "^2.0.0",
"react": "^18.2.0",
"react-dom": "^18.2.0",
diff --git a/examples/antd4.x/src/Demo.tsx b/examples/antd4.x/src/Demo.tsx
index 865d6a0..f6dbf98 100644
--- a/examples/antd4.x/src/Demo.tsx
+++ b/examples/antd4.x/src/Demo.tsx
@@ -24,6 +24,7 @@ const Demo = () => {
const [copied, setCopied] = useState(false);
const [dropdown, setDropdown] = useState(true);
const [disabled, setDisabled] = useState(false);
+ const [parentheses, setParentheses] = useState(true);
const validator = useCallback((_: any, {valid}: any) => {
if (valid(strict)) return Promise.resolve();
@@ -35,10 +36,11 @@ const Demo = () => {
if (disabled) code += " disabled\n";
if (search && dropdown) code += " enableSearch\n";
if (!dropdown) code += " disableDropdown\n";
+ if (!parentheses) code += " disableParentheses\n";
if (code === "";
return code;
- }, [disabled, search, dropdown])
+ }, [disabled, search, dropdown, parentheses])
const changeTheme = () => {
const pathname = window.location.pathname.replace(/\/$/, '');
@@ -95,7 +97,7 @@ const Demo = () => {
-
+
{
onChange={() => setSearch(!search)}
/>
-
+
{
/>
+
+
+ setParentheses(!parentheses)}
+ />
+
+
Code
-
+
{
onChange={() => setSearch(!search)}
/>
-
+
{
/>
+
+
+ setParentheses(!parentheses)}
+ />
+
+
Code
)}
>
- {countriesList.map(([iso, name, dial, mask]) => (
- }
- children={
-
- {name} {displayFormat(mask)}
-
}
- />
- ))}
+ {countriesList.map(([iso, name, dial, pattern]) => {
+ const mask = disableParentheses ? pattern.replace(/[()]/g, "") : pattern;
+ return (
+ }
+ children={
+
+ {name} {displayFormat(mask)}
+
}
+ />
+ )
+ })}
- ), [selectValue, query, disabled, disableDropdown, onDropdownVisibleChange, minWidth, searchNotFound, countriesList, setFieldValue, setValue, prefixCls, enableSearch, searchPlaceholder])
+ ), [selectValue, query, disabled, disableParentheses, disableDropdown, onDropdownVisibleChange, minWidth, searchNotFound, countriesList, setFieldValue, setValue, prefixCls, enableSearch, searchPlaceholder])
return (
disableDropdown?: boolean;
+ disableParentheses?: boolean;
+
onlyCountries?: string[];
excludeCountries?: string[];