Fix disabled prop and add autofocus on searchbox (GH-89)

typesnippet · May 11, 2024 · 5db4058 · 5db4058
2 parents 0d465ed + 10ad856
commit 5db4058
Show file tree

Hide file tree

Showing 12 changed files with 419 additions and 72 deletions.
diff --git a/.github/workflows/playground.yml b/.github/workflows/playground.yml
@@ -0,0 +1,21 @@
+name: playground
+
+on:
+  push:
+    branches: [ master ]
+
+jobs:
+  deploy:
+    environment:
+      name: Playground
+      url: https://playground.typesnippet.org/antd-phone-input-5.x
+    runs-on: ubuntu-latest
+    steps:
+      - name: Run deployment script on server
+        uses: appleboy/ssh-action@master
+        with:
+          host: ${{ secrets.HOST }}
+          username: ${{ secrets.USERNAME }}
+          key: ${{ secrets.KEY_ED25519 }}
+          port: ${{ secrets.PORT }}
+          script: bash ~/antd-phone-input/examples/deploy.sh
diff --git a/README.md b/README.md
@@ -1,12 +1,19 @@
 # Antd Phone Input <img src="https://github.com/typesnippet.png" align="right" height="64" />
 
 [![npm](https://img.shields.io/npm/v/antd-phone-input)](https://www.npmjs.com/package/antd-phone-input)
+[![Playground](https://img.shields.io/badge/playground-blue.svg?logo=data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/PjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+PHN2ZyB0PSIxNzEzNTE0OTc5MTUzIiBjbGFzcz0iaWNvbiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHAtaWQ9IjE2MjciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iMjAwIiBoZWlnaHQ9IjIwMCI+PHBhdGggZD0iTTc2OCA1MDYuMDI2NjY3djExLjk0NjY2NmEzMi40MjY2NjcgMzIuNDI2NjY3IDAgMCAxLTE1Ljc4NjY2NyAyNy43MzMzMzRMMzcwLjM0NjY2NyA3NjhjLTIzLjA0IDEzLjY1MzMzMy0zNC45ODY2NjcgMTMuNjUzMzMzLTQ1LjIyNjY2NyA3LjY4bC0xMC42NjY2NjctNS45NzMzMzNhMzIuNDI2NjY3IDMyLjQyNjY2NyAwIDAgMS0xNS43ODY2NjYtMjYuODhWMjgxLjE3MzMzM2EzMi40MjY2NjcgMzIuNDI2NjY3IDAgMCAxIDE1Ljc4NjY2Ni0yNy43MzMzMzNsMTAuNjY2NjY3LTUuOTczMzMzYzEwLjI0LTUuOTczMzMzIDIyLjE4NjY2Ny01Ljk3MzMzMyA1Mi4wNTMzMzMgMTEuNTJsMzc1LjA0IDIxOS4zMDY2NjZhMzIuNDI2NjY3IDMyLjQyNjY2NyAwIDAgMSAxNS43ODY2NjcgMjcuNzMzMzM0eiIgcC1pZD0iMTYyOCIgZGF0YS1zcG0tYW5jaG9yLWlkPSJhMzEzeC5zZWFyY2hfaW5kZXguMC5pMS40NzE5M2E4MVdiYjYyWiIgY2xhc3M9IiIgZmlsbD0iI2ZmZmZmZiI+PC9wYXRoPjwvc3ZnPg==)](https://playground.typesnippet.org/antd-phone-input-5.x)
 [![antd](https://img.shields.io/badge/antd-4.x%20%7C%205.x-blue)](https://github.com/ant-design/ant-design)
 [![types](https://img.shields.io/npm/types/antd-phone-input)](https://www.npmjs.com/package/antd-phone-input)
 [![License](https://img.shields.io/npm/l/antd-phone-input)](https://github.com/typesnippet/antd-phone-input/blob/master/LICENSE)
 [![Tests](https://github.com/typesnippet/antd-phone-input/actions/workflows/tests.yml/badge.svg)](https://github.com/typesnippet/antd-phone-input/actions/workflows/tests.yml)
 
-Advanced phone input component for Material UI that leverages the [react-phone-hooks](https://www.npmjs.com/package/react-phone-hooks) supporting all countries. The package is compatible with [antd](https://github.com/ant-design/ant-design) 4 and 5 versions. It provides built-in support for area codes and strict validation.
+<p>Advanced phone input component for Material UI that leverages the <a href="https://github.com/typesnippet/react-phone-hooks">react-phone-hooks</a> supporting all countries. The package is compatible with <a href="https://github.com/ant-design/ant-design">antd</a> 4 and 5 versions. It provides built-in support for area codes and strict validation.</p>
+
+<p align="center">
+  <a href="https://playground.typesnippet.org/antd-phone-input-5.x">
+    <img src="https://github.com/typesnippet/antd-phone-input/assets/44609997/37386477-3ab5-4afb-9c85-88be676e8afe" alt="Antd Phone Input"/>
+  </a>
+</p>
 
 ## Value
 

diff --git a/examples/antd4.x/package.json b/examples/antd4.x/package.json
@@ -3,9 +3,9 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@craco/craco": "^7.0.0",
     "@types/react": "^18.2.0",
     "@types/react-dom": "^18.2.0",
-    "@craco/craco": "^7.0.0",
     "antd": "^4.24.8",
     "antd-phone-input": "^0.3.5",
     "craco-less": "^2.0.0",

diff --git a/examples/antd4.x/public/index.html b/examples/antd4.x/public/index.html
@@ -3,9 +3,9 @@
 <head>
     <meta charset="utf-8"/>
     <meta name="viewport" content="width=device-width, initial-scale=1"/>
-    <title>Antd 4.x</title>
+    <title>Playground 4.x</title>
 </head>
 <body>
-<div id="root"></div>
+<div id="root" style="height: 100%"></div>
 </body>
 </html>
diff --git a/examples/antd4.x/src/Demo.tsx b/examples/antd4.x/src/Demo.tsx
@@ -1,51 +1,207 @@
-import {useState} from "react";
+import {useCallback, useMemo, useState} from "react";
+import copy from "copy-to-clipboard";
 import Form from "antd/es/form";
+import Alert from "antd/es/alert";
 import Button from "antd/es/button";
-import FormItem from "antd/es/form/FormItem";
+import Switch from "antd/es/switch";
+import Card from "antd/es/card/Card";
+import Divider from "antd/es/divider";
+import {useForm} from "antd/es/form/Form";
 import PhoneInput from "antd-phone-input";
+import FormItem from "antd/es/form/FormItem";
+import Title from "antd/es/typography/Title";
+import Paragraph from "antd/es/typography/Paragraph";
+import SunOutlined from "@ant-design/icons/SunOutlined";
+import MoonOutlined from "@ant-design/icons/MoonOutlined";
+import CopyOutlined from "@ant-design/icons/CopyOutlined";
+import CheckOutlined from "@ant-design/icons/CheckOutlined";
+
+import "antd/dist/reset.css";
 
 const Demo = () => {
+    const [form] = useForm();
     const [value, setValue] = useState(null);
+    const [strict, setStrict] = useState(false);
+    const [search, setSearch] = useState(false);
+    const [copied, setCopied] = useState(false);
+    const [dropdown, setDropdown] = useState(true);
+    const [disabled, setDisabled] = useState(false);
 
-    const validator = (_: any, {valid}: any) => {
-        if (valid()) {
-            return Promise.resolve();
-        }
+    const validator = useCallback((_: any, {valid}: any) => {
+        if (valid(strict)) return Promise.resolve();
         return Promise.reject("Invalid phone number");
-    }
+    }, [strict])
+
+    const code = useMemo(() => {
+        let code = "<PhoneInput\n";
+        if (disabled) code += "    disabled\n";
+        if (search && dropdown) code += "    enableSearch\n";
+        if (!dropdown) code += "    disableDropdown\n";
+        if (code === "<PhoneInput\n") code = "<PhoneInput />";
+        else code += "/>";
+        return code;
+    }, [disabled, search, dropdown])
 
     const changeTheme = () => {
-        if (window.location.pathname === "/dark") {
-            window.location.replace("/");
+        const pathname = window.location.pathname.replace(/\/$/, '');
+        if (pathname.endsWith("/dark")) {
+            window.location.replace(pathname.replace('/dark', ''));
         } else {
-            window.location.replace("/dark");
+            window.location.replace(pathname + "/dark");
         }
     }
 
     const handleFinish = ({phone}: any) => setValue(phone);
 
     return (
-        <div style={{margin: 20, maxWidth: 400}}>
-            {value && (
-                <pre style={{
-                    background: window.location.pathname === "/dark" ? "#1f1f1f" : "#efefef",
-                    color: window.location.pathname === "/dark" ? "#efefef" : "#1f1f1f",
-                    padding: 10, marginBottom: 24,
-                }}>
-                    {JSON.stringify(value, null, 2)}
-                </pre>
-            )}
-            <Form onFinish={handleFinish}>
-                <FormItem name="phone" rules={[{validator}]}>
-                    <PhoneInput enableSearch/>
-                </FormItem>
-                <div style={{display: "flex", gap: 24}}>
-                    <Button htmlType="submit">Preview Value</Button>
-                    <Button htmlType="reset">Reset Value</Button>
-                    <Button onClick={changeTheme}>Change Theme</Button>
+        <Card style={{height: "100%", borderRadius: 0, border: "none"}}
+              bodyStyle={{
+                  padding: 0,
+                  height: "100%",
+                  display: "flex",
+                  justifyContent: "center",
+              }}>
+            <div style={{
+                minWidth: 415,
+                maxWidth: 415,
+                display: "flex",
+                margin: "10px 20px",
+                flexDirection: "column",
+            }}>
+                <Title level={2}>
+                    Ant Phone Input Playground
+                </Title>
+                <Paragraph>
+                    This is a playground for the Ant Phone Input component. You can change the settings and see how
+                    the component behaves. Also, see the code for the component and the value it returns.
+                </Paragraph>
+                <Divider orientation="left" plain>Settings</Divider>
+                <div style={{gap: 24, display: "flex", alignItems: "center"}}>
+                    <Form.Item label="Theme">
+                        <Switch
+                            onChange={changeTheme}
+                            checkedChildren={<MoonOutlined/>}
+                            unCheckedChildren={<SunOutlined/>}
+                            defaultChecked={window.location.pathname.endsWith("/dark")}
+                        />
+                    </Form.Item>
+                    <Form.Item label="Validation">
+                        <Switch
+                            checkedChildren="strict"
+                            unCheckedChildren="default"
+                            onChange={() => setStrict(!strict)}
+                        />
+                    </Form.Item>
+                    <Form.Item label="Disabled">
+                        <Switch onChange={() => setDisabled(!disabled)}/>
+                    </Form.Item>
+                </div>
+                <div style={{gap: 24, display: "flex", alignItems: "center"}}>
+                    <Form.Item label="Search" style={{margin: 0}}>
+                        <Switch
+                            disabled={!dropdown}
+                            checkedChildren="enabled"
+                            unCheckedChildren="disabled"
+                            onChange={() => setSearch(!search)}
+                        />
+                    </Form.Item>
+                    <Form.Item label="Dropdown" style={{margin: 0}}>
+                        <Switch
+                            defaultChecked
+                            checkedChildren="enabled"
+                            unCheckedChildren="disabled"
+                            onChange={() => setDropdown(!dropdown)}
+                        />
+                    </Form.Item>
+                </div>
+                <Divider orientation="left" plain>Code</Divider>
+                <div style={{position: "relative"}}>
+                    <Button
+                        type="text"
+                        size="small"
+                        onClick={() => {
+                            copy(code);
+                            setCopied(true);
+                            setTimeout(() => setCopied(false), 2000);
+                        }}
+                        style={{position: "absolute", top: 10, right: 10}}
+                        icon={copied ? <CheckOutlined style={{color: "green"}}/> : <CopyOutlined/>}
+                    />
+                    <pre style={{
+                        background: window.location.pathname.endsWith("/dark") ? "#1f1f1f" : "#efefef",
+                        color: window.location.pathname.endsWith("/dark") ? "#efefef" : "#1f1f1f",
+                        padding: 10,
+                    }}>
+                        {code}
+                    </pre>
+                </div>
+                <Divider orientation="left" plain>Component</Divider>
+                <Form form={form} onFinish={handleFinish}>
+                    <FormItem name="phone" rules={[{validator}]}>
+                        <PhoneInput
+                            disabled={disabled}
+                            enableSearch={search}
+                            disableDropdown={!dropdown}
+                        />
+                    </FormItem>
+                    {value && (
+                        <pre style={{
+                            background: window.location.pathname.endsWith("/dark") ? "#1f1f1f" : "#efefef",
+                            color: window.location.pathname.endsWith("/dark") ? "#efefef" : "#1f1f1f",
+                            padding: 10, marginBottom: 24,
+                        }}>
+                            {JSON.stringify(value, null, 2)}
+                        </pre>
+                    )}
+                    <div style={{display: "flex", gap: 24, justifyContent: "flex-start"}}>
+                        <Button htmlType="submit" type="primary">Preview Value</Button>
+                        <Button htmlType="reset">Reset Value</Button>
+                    </div>
+                </Form>
+                <Alert
+                    type="info"
+                    style={{marginTop: 24}}
+                    message={<>
+                        If your application uses <b>5.x</b> version of <b>Ant Design</b>, you should use this&nbsp;
+                        <a target="_blank" rel="noreferrer"
+                           href="//playground.typesnippet.org/antd-phone-input-5.x">playground</a>&nbsp;
+                        server to test the component.
+                    </>}
+                />
+                <div style={{marginTop: "auto"}}>
+                    <Divider style={{margin: "10px 0"}}/>
+                    <div style={{
+                        display: "flex",
+                        alignItems: "center",
+                        justifyContent: "space-between",
+                    }}>
+                        <div>
+                            &copy; Made with ❤️ by&nbsp;
+                            <a href="//github.com/typesnippet" target="_blank" rel="noreferrer author">
+                                TypeSnippet
+                            </a>
+                        </div>
+                        <div style={{display: "flex", gap: 10}}>
+                            <a target="_blank" rel="noreferrer"
+                               href="//github.com/typesnippet/antd-phone-input/blob/master/LICENSE">
+                                <img src="//img.shields.io/npm/l/antd-phone-input" alt="MIT License"/>
+                            </a>
+                            <a href="//www.npmjs.com/package/antd-phone-input" target="_blank" rel="noreferrer">
+                                <img src="//img.shields.io/npm/v/antd-phone-input" alt="NPM Package"/>
+                            </a>
+                        </div>
+                    </div>
+                    <Paragraph style={{margin: "5px 0 0 0"}}>
+                        Find the&nbsp;
+                        <a href="//github.com/typesnippet/antd-phone-input/tree/master/examples/antd4.x"
+                           target="_blank" rel="noreferrer">
+                            source code
+                        </a>
+                        &nbsp;of this playground server on our GitHub repo.
+                    </Paragraph>
                 </div>
-            </Form>
-        </div>
+            </div>
+        </Card>
     )
 }
 

diff --git a/examples/antd4.x/src/index.tsx b/examples/antd4.x/src/index.tsx
@@ -5,7 +5,7 @@ const Light = lazy(() => import("./themes/Light"));
 const Dark = lazy(() => import("./themes/Dark"));
 
 const App = () => {
-    return window.location.pathname === "/dark" ? <Dark/> : <Light/>;
+    return window.location.pathname.endsWith("/dark") ? <Dark/> : <Light/>;
 }
 
 const elem = document.getElementById("root");

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

diff --git a/examples/antd5.x/public/index.html b/examples/antd5.x/public/index.html
@@ -3,7 +3,7 @@
 <head>
     <meta charset="utf-8"/>
     <meta name="viewport" content="width=device-width, initial-scale=1"/>
-    <title>Antd 5.x</title>
+    <title>Playground 5.x</title>
 </head>
 <body>
 <div id="root" style="height: 100%;"></div>