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 === " { 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[];