Skip to content

Commit ed89437

Browse files
ArtyomVancyanArtyomVancyan
authored
Implement 50:50 demo page for concurrent development (GH-2)
2 parents 3579217 + 173b964 commit ed89437

20 files changed

+11525
-0
lines changed

‎development/package.json

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
{
2+
"name": "sample",
3+
"version": "0.1.0",
4+
"private": true,
5+
"dependencies": {
6+
"@emotion/react": "^11.11.1",
7+
"@emotion/styled": "^11.11.0",
8+
"@mui/material": "^5.14.18",
9+
"@types/react": "^18.2.0",
10+
"@types/react-dom": "^18.2.0",
11+
"antd": "^5.8.3",
12+
"antd-phone-input": "^0.3.0",
13+
"react": "^18.2.0",
14+
"react-dom": "^18.2.0",
15+
"react-scripts": "^5.0.1",
16+
"typescript": "^4.9.5"
17+
},
18+
"scripts": {
19+
"start": "react-scripts start",
20+
"build": "react-scripts build"
21+
},
22+
"eslintConfig": {
23+
"extends": [
24+
"react-app"
25+
]
26+
},
27+
"browserslist": {
28+
"production": [
29+
">0.2%",
30+
"not dead",
31+
"not op_mini all"
32+
],
33+
"development": [
34+
"last 1 chrome version",
35+
"last 1 firefox version",
36+
"last 1 safari version"
37+
]
38+
}
39+
}

‎development/public/index.html

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8"/>
5+
<meta name="viewport" content="width=device-width, initial-scale=1"/>
6+
<title>Development</title>
7+
</head>
8+
<body>
9+
<div id="root" style="height: 100%;"></div>
10+
</body>
11+
</html>

‎development/src/AntDemo.tsx

Lines changed: 61 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,61 @@
1+
import {useState} from "react";
2+
import Form from "antd/es/form";
3+
import theme from "antd/es/theme";
4+
import Button from "antd/es/button";
5+
import Card from "antd/es/card/Card";
6+
import FormItem from "antd/es/form/FormItem";
7+
import ConfigProvider from "antd/es/config-provider";
8+
9+
import PhoneInput from "./ant-phone";
10+
11+
import "antd/dist/reset.css";
12+
13+
const AntDemo = () => {
14+
const [value, setValue] = useState({});
15+
const [algorithm, setAlgorithm] = useState("defaultAlgorithm");
16+
17+
const validator = (_: any, {valid}: any) => {
18+
if (valid()) {
19+
return Promise.resolve();
20+
}
21+
return Promise.reject("Invalid phone number");
22+
}
23+
24+
const changeTheme = () => {
25+
if (algorithm === "defaultAlgorithm") {
26+
setAlgorithm("darkAlgorithm");
27+
} else {
28+
setAlgorithm("defaultAlgorithm");
29+
}
30+
}
31+
32+
return (
33+
<ConfigProvider
34+
theme={{algorithm: algorithm === "defaultAlgorithm" ? theme.defaultAlgorithm : theme.darkAlgorithm}}>
35+
<Card style={{height: "100%", borderRadius: 0, border: "none"}} bodyStyle={{padding: 0}}>
36+
<div style={{margin: 20, maxWidth: 400}}>
37+
{value && (
38+
<pre style={{
39+
background: algorithm === "defaultAlgorithm" ? "#efefef" : "#1f1f1f",
40+
color: algorithm === "defaultAlgorithm" ? "#1f1f1f" : "#efefef",
41+
padding: 10, marginBottom: 24,
42+
}}>
43+
{JSON.stringify(value, null, 2)}
44+
</pre>
45+
)}
46+
<Form>
47+
<FormItem name="phone" rules={[{validator}]}>
48+
<PhoneInput enableSearch onChange={(e) => setValue(e as any)}/>
49+
</FormItem>
50+
<div style={{display: "flex", gap: 24}}>
51+
<Button htmlType="reset">Reset Value</Button>
52+
<Button onClick={changeTheme}>Change Theme</Button>
53+
</div>
54+
</Form>
55+
</div>
56+
</Card>
57+
</ConfigProvider>
58+
)
59+
}
60+
61+
export default AntDemo;

‎development/src/Demo.tsx

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
import AntDemo from "./AntDemo";
2+
import MuiDemo from "./MuiDemo";
3+
4+
const Demo = () => {
5+
return (
6+
<div style={{display: "flex"}}>
7+
<div style={{width: "50vw", height: "100vh"}}>
8+
<AntDemo/>
9+
</div>
10+
<div style={{width: "50vw", height: "100vh"}}>
11+
<MuiDemo/>
12+
</div>
13+
</div>
14+
)
15+
}
16+
17+
export default Demo;

‎development/src/MuiDemo.tsx

Lines changed: 50 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
1+
import {useCallback, useMemo, useState} from "react";
2+
import {createTheme, ThemeProvider} from "@mui/material/styles";
3+
import {Button, Container, CssBaseline} from "@mui/material";
4+
5+
import CustomInput from "./mui-phone";
6+
7+
const Demo = () => {
8+
const [value, setValue] = useState({});
9+
const [mode, setMode] = useState("dark");
10+
11+
const error = useMemo(() => (value as any).valid && !(value as any).valid(), [value]);
12+
13+
const theme = useMemo(() => createTheme({palette: {mode: mode as any}}), [mode]);
14+
15+
const handleThemeChange = useCallback(() => setMode(mode === "dark" ? "light" : "dark"), [mode]);
16+
17+
return (
18+
<ThemeProvider theme={theme}>
19+
<CssBaseline/>
20+
<Container>
21+
<div style={{margin: 20, maxWidth: 400}}>
22+
{value && (
23+
<pre style={{
24+
background: mode === "light" ? "#efefef" : "#1f1f1f",
25+
color: mode === "light" ? "#1f1f1f" : "#efefef",
26+
padding: 10, marginBottom: 24,
27+
}}>
28+
{JSON.stringify(value, null, 2)}
29+
</pre>
30+
)}
31+
<form noValidate autoComplete="off" onSubmit={e => e.preventDefault()}>
32+
<CustomInput
33+
enableSearch
34+
error={error}
35+
variant="filled"
36+
searchVariant="standard"
37+
onChange={(e) => setValue(e as any)}
38+
/>
39+
<div style={{display: "flex", gap: 24, marginTop: "1rem"}}>
40+
<Button type="reset">Reset Value</Button>
41+
<Button onClick={handleThemeChange}>Change Theme</Button>
42+
</div>
43+
</form>
44+
</div>
45+
</Container>
46+
</ThemeProvider>
47+
);
48+
}
49+
50+
export default Demo;

0 commit comments

Comments
 (0)