Implement disableParentheses option (GH-98)

typesnippet · Jun 15, 2024 · 7ff6ec4 · 7ff6ec4
2 parents 25811de + 6e5711d
commit 7ff6ec4
Show file tree

Hide file tree

Showing 9 changed files with 58 additions and 22 deletions.
diff --git 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
@@ -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
@@ -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 === "<PhoneInput\n") code = "<PhoneInput />";
         else code += "/>";
         return code;
-    }, [disabled, search, dropdown])
+    }, [disabled, search, dropdown, parentheses])
 
     const changeTheme = () => {
         const pathname = window.location.pathname.replace(/\/$/, '');
@@ -95,15 +97,15 @@ const Demo = () => {
                     </Form.Item>
                 </div>
                 <div style={{gap: 24, display: "flex", alignItems: "center"}}>
-                    <Form.Item label="Search" style={{margin: 0}}>
+                    <Form.Item label="Search">
                         <Switch
                             disabled={!dropdown}
                             checkedChildren="enabled"
                             unCheckedChildren="disabled"
                             onChange={() => setSearch(!search)}
                         />
                     </Form.Item>
-                    <Form.Item label="Dropdown" style={{margin: 0}}>
+                    <Form.Item label="Dropdown">
                         <Switch
                             defaultChecked
                             checkedChildren="enabled"
@@ -112,6 +114,16 @@ const Demo = () => {
                         />
                     </Form.Item>
                 </div>
+                <div style={{gap: 24, display: "flex", alignItems: "center"}}>
+                    <Form.Item label="Parentheses" style={{margin: 0}}>
+                        <Switch
+                            defaultChecked
+                            checkedChildren="enabled"
+                            unCheckedChildren="disabled"
+                            onChange={() => setParentheses(!parentheses)}
+                        />
+                    </Form.Item>
+                </div>
                 <Divider orientation="left" plain>Code</Divider>
                 <div style={{position: "relative"}}>
                     <Button
@@ -140,6 +152,7 @@ const Demo = () => {
                             disabled={disabled}
                             enableSearch={search}
                             disableDropdown={!dropdown}
+                            disableParentheses={!parentheses}
                         />
                     </FormItem>
                     {value && (

diff --git a/examples/antd5.x/package.json b/examples/antd5.x/package.json
@@ -6,7 +6,7 @@
     "@types/react": "^18.2.0",
     "@types/react-dom": "^18.2.0",
     "antd": "^5.8.3",
-    "antd-phone-input": "^0.3.5",
+    "antd-phone-input": "^0.3.8",
     "copy-to-clipboard": "^3.3.3",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",

diff --git a/examples/antd5.x/src/Demo.tsx b/examples/antd5.x/src/Demo.tsx
@@ -28,6 +28,7 @@ const Demo = () => {
     const [copied, setCopied] = useState(false);
     const [dropdown, setDropdown] = useState(true);
     const [disabled, setDisabled] = useState(false);
+    const [parentheses, setParentheses] = useState(true);
     const [algorithm, setAlgorithm] = useState("defaultAlgorithm");
 
     const validator = useCallback((_: any, {valid}: any) => {
@@ -40,10 +41,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 === "<PhoneInput\n") code = "<PhoneInput />";
         else code += "/>";
         return code;
-    }, [disabled, search, dropdown])
+    }, [disabled, search, dropdown, parentheses])
 
     const changeTheme = () => {
         if (algorithm === "defaultAlgorithm") {
@@ -100,15 +102,15 @@ const Demo = () => {
                         </Form.Item>
                     </div>
                     <div style={{gap: 24, display: "flex", alignItems: "center"}}>
-                        <Form.Item label="Search" style={{margin: 0}}>
+                        <Form.Item label="Search">
                             <Switch
                                 disabled={!dropdown}
                                 checkedChildren="enabled"
                                 unCheckedChildren="disabled"
                                 onChange={() => setSearch(!search)}
                             />
                         </Form.Item>
-                        <Form.Item label="Dropdown" style={{margin: 0}}>
+                        <Form.Item label="Dropdown">
                             <Switch
                                 defaultChecked
                                 checkedChildren="enabled"
@@ -117,6 +119,16 @@ const Demo = () => {
                             />
                         </Form.Item>
                     </div>
+                <div style={{gap: 24, display: "flex", alignItems: "center"}}>
+                    <Form.Item label="Parentheses" style={{margin: 0}}>
+                        <Switch
+                            defaultChecked
+                            checkedChildren="enabled"
+                            unCheckedChildren="disabled"
+                            onChange={() => setParentheses(!parentheses)}
+                        />
+                    </Form.Item>
+                </div>
                     <Divider orientation="left" plain>Code</Divider>
                     <div style={{position: "relative"}}>
                         <Button
@@ -145,6 +157,7 @@ const Demo = () => {
                                 disabled={disabled}
                                 enableSearch={search}
                                 disableDropdown={!dropdown}
+                                disableParentheses={!parentheses}
                             />
                         </FormItem>
                         {value && (

diff --git a/examples/deploy.sh b/examples/deploy.sh
@@ -4,9 +4,11 @@ git restore .
 git pull
 
 cd ~/antd-phone-input/examples/antd4.x
+rm -r node_modules package-lock.json
 npm install --legacy-peer-deps && npm run build
 
 cd ~/antd-phone-input/examples/antd5.x
+rm -r node_modules package-lock.json
 npm install && npm run build
 
 sudo rm -r /var/www/playground/antd-phone-input/*

diff --git a/package.json b/package.json
@@ -1,5 +1,5 @@
 {
-  "version": "0.3.7",
+  "version": "0.3.8",
   "name": "antd-phone-input",
   "description": "Advanced, highly customizable phone input component for Ant Design.",
   "keywords": [
@@ -70,7 +70,7 @@
     "react": ">=16"
   },
   "dependencies": {
-    "react-phone-hooks": "^0.1.4"
+    "react-phone-hooks": "^0.1.5"
   },
   "devDependencies": {
     "@testing-library/react": "^14.0.0",

diff --git a/src/index.tsx b/src/index.tsx
@@ -41,6 +41,7 @@ const PhoneInput = forwardRef(({
                                    disabled = false,
                                    enableSearch = false,
                                    disableDropdown = false,
+                                   disableParentheses = false,
                                    onlyCountries = [],
                                    excludeCountries = [],
                                    preferredCountries = [],
@@ -81,6 +82,7 @@ const PhoneInput = forwardRef(({
         onlyCountries,
         excludeCountries,
         preferredCountries,
+        disableParentheses,
     });
 
     const {
@@ -211,19 +213,22 @@ const PhoneInput = forwardRef(({
                 </div>
             )}
         >
-            {countriesList.map(([iso, name, dial, mask]) => (
-                <Select.Option
-                    value={iso + dial}
-                    key={`${iso}_${mask}`}
-                    label={<div className={`flag ${iso}`}/>}
-                    children={<div className={`${prefixCls}-phone-input-select-item`}>
-                        <div className={`flag ${iso}`}/>
-                        {name}&nbsp;{displayFormat(mask)}
-                    </div>}
-                />
-            ))}
+            {countriesList.map(([iso, name, dial, pattern]) => {
+                const mask = disableParentheses ? pattern.replace(/[()]/g, "") : pattern;
+                return (
+                    <Select.Option
+                        value={iso + dial}
+                        key={`${iso}_${mask}`}
+                        label={<div className={`flag ${iso}`}/>}
+                        children={<div className={`${prefixCls}-phone-input-select-item`}>
+                            <div className={`flag ${iso}`}/>
+                            {name}&nbsp;{displayFormat(mask)}
+                        </div>}
+                    />
+                )
+            })}
         </Select>
-    ), [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 (
         <div className={`${prefixCls}-phone-input-wrapper`}

diff --git a/src/types.ts b/src/types.ts
@@ -19,6 +19,8 @@ export interface PhoneInputProps extends Omit<InputProps, "value" | "onChange">
 
     disableDropdown?: boolean;
 
+    disableParentheses?: boolean;
+
     onlyCountries?: string[];
 
     excludeCountries?: string[];