Skip to content

Commit 8ecb997

Browse files
ArtyomVancyanArtyomVancyan
committed
GH-7: Integrate the useMask hook
1 parent eecf4cb commit 8ecb997

File tree

8 files changed

+463
-452
lines changed

8 files changed

+463
-452
lines changed

‎development/src/AntDemo.tsx

Lines changed: 43 additions & 43 deletions
Original file line numberDiff line numberDiff line change
@@ -12,54 +12,54 @@ import PhoneInput from "./ant-phone";
1212
import "antd/dist/reset.css";
1313

1414
const AntDemo = () => {
15-
const [value, setValue] = useState({});
16-
const [algorithm, setAlgorithm] = useState("defaultAlgorithm");
15+
const [value, setValue] = useState({});
16+
const [algorithm, setAlgorithm] = useState("defaultAlgorithm");
1717

18-
const validator = (_: any, {valid}: any) => {
19-
if (valid()) {
20-
return Promise.resolve();
21-
}
22-
return Promise.reject("Invalid phone number");
23-
}
18+
const validator = (_: any, {valid}: any) => {
19+
if (valid()) {
20+
return Promise.resolve();
21+
}
22+
return Promise.reject("Invalid phone number");
23+
}
2424

25-
const changeTheme = () => {
26-
if (algorithm === "defaultAlgorithm") {
27-
setAlgorithm("darkAlgorithm");
28-
} else {
29-
setAlgorithm("defaultAlgorithm");
30-
}
31-
}
25+
const changeTheme = () => {
26+
if (algorithm === "defaultAlgorithm") {
27+
setAlgorithm("darkAlgorithm");
28+
} else {
29+
setAlgorithm("defaultAlgorithm");
30+
}
31+
}
3232

33-
return (
34-
<ConfigProvider
35-
theme={{algorithm: algorithm === "defaultAlgorithm" ? theme.defaultAlgorithm : theme.darkAlgorithm}}>
36-
<Card style={{height: "100%", borderRadius: 0, border: "none"}} bodyStyle={{padding: 0}}>
37-
<div style={{margin: 20, maxWidth: 400}}>
38-
{value && (
39-
<pre style={{
40-
background: algorithm === "defaultAlgorithm" ? "#efefef" : "#1f1f1f",
41-
color: algorithm === "defaultAlgorithm" ? "#1f1f1f" : "#efefef",
42-
padding: 10, marginBottom: 24,
43-
}}>
33+
return (
34+
<ConfigProvider
35+
theme={{algorithm: algorithm === "defaultAlgorithm" ? theme.defaultAlgorithm : theme.darkAlgorithm}}>
36+
<Card style={{height: "100%", borderRadius: 0, border: "none"}} bodyStyle={{padding: 0}}>
37+
<div style={{margin: 20, maxWidth: 400}}>
38+
{value && (
39+
<pre style={{
40+
background: algorithm === "defaultAlgorithm" ? "#efefef" : "#1f1f1f",
41+
color: algorithm === "defaultAlgorithm" ? "#1f1f1f" : "#efefef",
42+
padding: 10, marginBottom: 24,
43+
}}>
4444
{JSON.stringify(value, null, 2)}
4545
</pre>
46-
)}
47-
<Form>
48-
<FormItem name="phone" rules={[{validator}]}>
49-
<PhoneInput enableSearch onChange={(e) => setValue(e as any)}/>
50-
</FormItem>
51-
<FormItem name="test">
52-
<Input/>
53-
</FormItem>
54-
<div style={{display: "flex", gap: 24}}>
55-
<Button htmlType="reset">Reset Value</Button>
56-
<Button onClick={changeTheme}>Change Theme</Button>
57-
</div>
58-
</Form>
59-
</div>
60-
</Card>
61-
</ConfigProvider>
62-
)
46+
)}
47+
<Form>
48+
<FormItem name="phone" rules={[{validator}]}>
49+
<PhoneInput enableSearch onChange={(e) => setValue(e as any)}/>
50+
</FormItem>
51+
<FormItem name="test">
52+
<Input/>
53+
</FormItem>
54+
<div style={{display: "flex", gap: 24}}>
55+
<Button htmlType="reset">Reset Value</Button>
56+
<Button onClick={changeTheme}>Change Theme</Button>
57+
</div>
58+
</Form>
59+
</div>
60+
</Card>
61+
</ConfigProvider>
62+
)
6363
}
6464

6565
export default AntDemo;

‎development/src/Demo.tsx

Lines changed: 10 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -2,16 +2,16 @@ import AntDemo from "./AntDemo";
22
import MuiDemo from "./MuiDemo";
33

44
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-
)
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+
)
1515
}
1616

1717
export default Demo;

‎development/src/MuiDemo.tsx

Lines changed: 35 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -5,47 +5,47 @@ import {Button, Container, CssBaseline, TextField} from "@mui/material";
55
import PhoneInput from "./mui-phone";
66

77
const Demo = () => {
8-
const [value, setValue] = useState({});
9-
const [mode, setMode] = useState("dark");
8+
const [value, setValue] = useState({});
9+
const [mode, setMode] = useState("dark");
1010

11-
const error = useMemo(() => (value as any).valid && !(value as any).valid(), [value]);
11+
const error = useMemo(() => (value as any).valid && !(value as any).valid(), [value]);
1212

13-
const theme = useMemo(() => createTheme({palette: {mode: mode as any}}), [mode]);
13+
const theme = useMemo(() => createTheme({palette: {mode: mode as any}}), [mode]);
1414

15-
const handleThemeChange = useCallback(() => setMode(mode === "dark" ? "light" : "dark"), [mode]);
15+
const handleThemeChange = useCallback(() => setMode(mode === "dark" ? "light" : "dark"), [mode]);
1616

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-
}}>
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+
}}>
2828
{JSON.stringify(value, null, 2)}
2929
</pre>
30-
)}
31-
<form noValidate autoComplete="off" onSubmit={e => e.preventDefault()}>
32-
<PhoneInput
33-
enableSearch
34-
error={error}
35-
variant="filled"
36-
searchVariant="standard"
37-
onChange={(e) => setValue(e as any)}
38-
/>
39-
<TextField variant="filled" style={{marginTop: "1.5rem"}}/>
40-
<div style={{display: "flex", gap: 24, marginTop: "1rem"}}>
41-
<Button type="reset">Reset Value</Button>
42-
<Button onClick={handleThemeChange}>Change Theme</Button>
43-
</div>
44-
</form>
45-
</div>
46-
</Container>
47-
</ThemeProvider>
48-
);
30+
)}
31+
<form noValidate autoComplete="off" onSubmit={e => e.preventDefault()}>
32+
<PhoneInput
33+
enableSearch
34+
error={error}
35+
variant="filled"
36+
searchVariant="standard"
37+
onChange={(e) => setValue(e as any)}
38+
/>
39+
<TextField variant="filled" style={{marginTop: "1.5rem"}}/>
40+
<div style={{display: "flex", gap: 24, marginTop: "1rem"}}>
41+
<Button type="reset">Reset Value</Button>
42+
<Button onClick={handleThemeChange}>Change Theme</Button>
43+
</div>
44+
</form>
45+
</div>
46+
</Container>
47+
</ThemeProvider>
48+
);
4949
}
5050

5151
export default Demo;

0 commit comments

Comments
 (0)