Skip to content

Commit

Permalink
Trigger onChange on country change (GH-69)
Browse files Browse the repository at this point in the history
  • Loading branch information
@ArtyomVancyan
ArtyomVancyan authored Dec 22, 2023
2 parents d0f084e + bc6686b commit 445a961
Show file tree
Hide file tree
Showing 10 changed files with 554 additions and 540 deletions.
6 changes: 3 additions & 3 deletions examples/antd4.x/public/index.html
View file
Original file line number Diff line number Diff line change
@@ -1,9 +1,9 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<title>Antd 4.x</title>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<title>Antd 4.x</title>
</head>
<body>
<div id="root"></div>
Expand Down
72 changes: 36 additions & 36 deletions examples/antd4.x/src/Demo.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,48 +5,48 @@ import FormItem from "antd/es/form/FormItem";
import PhoneInput from "antd-phone-input";

const Demo = () => {
const [value, setValue] = useState(null);
const [value, setValue] = useState(null);

const validator = (_: any, {valid}: any) => {
if (valid()) {
return Promise.resolve();
}
return Promise.reject("Invalid phone number");
}
const validator = (_: any, {valid}: any) => {
if (valid()) {
return Promise.resolve();
}
return Promise.reject("Invalid phone number");
}

const changeTheme = () => {
if (window.location.pathname === "/dark") {
window.location.replace("/");
} else {
window.location.replace("/dark");
}
}
const changeTheme = () => {
if (window.location.pathname === "/dark") {
window.location.replace("/");
} else {
window.location.replace("/dark");
}
}

const handleFinish = ({phone}: any) => setValue(phone);
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,
}}>
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>
</div>
</Form>
</div>
)
)}
<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>
</div>
</Form>
</div>
)
}

export default Demo;
2 changes: 1 addition & 1 deletion examples/antd4.x/src/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 === "/dark" ? <Dark/> : <Light/>;
}

const elem = document.getElementById("root");
Expand Down
6 changes: 3 additions & 3 deletions examples/antd5.x/public/index.html
View file
Original file line number Diff line number Diff line change
@@ -1,9 +1,9 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<title>Antd 5.x</title>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<title>Antd 5.x</title>
</head>
<body>
<div id="root" style="height: 100%;"></div>
Expand Down
84 changes: 42 additions & 42 deletions examples/antd5.x/src/Demo.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,54 +10,54 @@ import PhoneInput from "antd-phone-input";
import "antd/dist/reset.css";

const Demo = () => {
const [value, setValue] = useState(null);
const [algorithm, setAlgorithm] = useState("defaultAlgorithm");
const [value, setValue] = useState(null);
const [algorithm, setAlgorithm] = useState("defaultAlgorithm");

const validator = (_: any, {valid}: any) => {
if (valid()) {
return Promise.resolve();
}
return Promise.reject("Invalid phone number");
}
const validator = (_: any, {valid}: any) => {
if (valid()) {
return Promise.resolve();
}
return Promise.reject("Invalid phone number");
}

const changeTheme = () => {
if (algorithm === "defaultAlgorithm") {
setAlgorithm("darkAlgorithm");
} else {
setAlgorithm("defaultAlgorithm");
}
}
const changeTheme = () => {
if (algorithm === "defaultAlgorithm") {
setAlgorithm("darkAlgorithm");
} else {
setAlgorithm("defaultAlgorithm");
}
}

const handleFinish = ({phone}: any) => setValue(phone);
const handleFinish = ({phone}: any) => setValue(phone);

return (
<ConfigProvider
theme={{algorithm: algorithm === "defaultAlgorithm" ? theme.defaultAlgorithm : theme.darkAlgorithm}}>
<Card style={{height: "100%", borderRadius: 0, border: "none"}} bodyStyle={{padding: 0}}>
<div style={{margin: 20, maxWidth: 400}}>
{value && (
<pre style={{
background: algorithm === "defaultAlgorithm" ? "#efefef" : "#1f1f1f",
color: algorithm === "defaultAlgorithm" ? "#1f1f1f" : "#efefef",
padding: 10, marginBottom: 24,
}}>
return (
<ConfigProvider
theme={{algorithm: algorithm === "defaultAlgorithm" ? theme.defaultAlgorithm : theme.darkAlgorithm}}>
<Card style={{height: "100%", borderRadius: 0, border: "none"}} bodyStyle={{padding: 0}}>
<div style={{margin: 20, maxWidth: 400}}>
{value && (
<pre style={{
background: algorithm === "defaultAlgorithm" ? "#efefef" : "#1f1f1f",
color: algorithm === "defaultAlgorithm" ? "#1f1f1f" : "#efefef",
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>
</div>
</Form>
</div>
</Card>
</ConfigProvider>
)
)}
<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>
</div>
</Form>
</div>
</Card>
</ConfigProvider>
)
}

export default Demo;
14 changes: 7 additions & 7 deletions scripts/prepare-styles.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,12 +6,12 @@ import stylesheet from "../resources/stylesheet.json";
const exec = (command: string) => util.promisify(process.exec)(command, {shell: "/bin/bash"});

(async () => {
let styles = Object.entries(stylesheet).map(([selector, rules]) => {
return `${selector} {` + Object.entries(rules).map(([key, value]) => {
return `${key}: ${value}; `;
}).join("") + "} ";
}).join("");
let styles = Object.entries(stylesheet).map(([selector, rules]) => {
return `${selector} {` + Object.entries(rules).map(([key, value]) => {
return `${key}: ${value}; `;
}).join("") + "} ";
}).join("");

await exec(`ls *.js | xargs -I {} sed -i 's/styles.css/${styles}/g' {}`);
await exec("ls *.{j,t}s | xargs -I {} sed -i 's/antd\\/lib/antd\\/es/g' {}");
await exec(`ls *.js | xargs -I {} sed -i 's/styles.css/${styles}/g' {}`);
await exec("ls *.{j,t}s | xargs -I {} sed -i 's/antd\\/lib/antd\\/es/g' {}");
})();
Loading

0 comments on commit 445a961

Please sign in to comment.