Skip to content

Commit

Permalink
Implement a hook for handling the input mask (GH-8)
Browse files Browse the repository at this point in the history
  • Loading branch information
@ArtyomVancyan
ArtyomVancyan authored Dec 16, 2023
2 parents 77821ed + d5d14b7 commit 425e948
Show file tree
Hide file tree
Showing 17 changed files with 935 additions and 871 deletions.
6 changes: 3 additions & 3 deletions development/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>Development</title>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<title>Development</title>
</head>
<body>
<div id="root" style="height: 100%;"></div>
Expand Down
86 changes: 43 additions & 43 deletions development/src/AntDemo.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,54 +12,54 @@ import PhoneInput from "./ant-phone";
import "antd/dist/reset.css";

const AntDemo = () => {
const [value, setValue] = useState({});
const [algorithm, setAlgorithm] = useState("defaultAlgorithm");
const [value, setValue] = useState({});
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");
}
}

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>
<FormItem name="phone" rules={[{validator}]}>
<PhoneInput enableSearch onChange={(e) => setValue(e as any)}/>
</FormItem>
<FormItem name="test">
<Input/>
</FormItem>
<div style={{display: "flex", gap: 24}}>
<Button htmlType="reset">Reset Value</Button>
<Button onClick={changeTheme}>Change Theme</Button>
</div>
</Form>
</div>
</Card>
</ConfigProvider>
)
)}
<Form>
<FormItem name="phone" rules={[{validator}]}>
<PhoneInput enableSearch onChange={(e) => setValue(e as any)}/>
</FormItem>
<FormItem name="test">
<Input/>
</FormItem>
<div style={{display: "flex", gap: 24}}>
<Button htmlType="reset">Reset Value</Button>
<Button onClick={changeTheme}>Change Theme</Button>
</div>
</Form>
</div>
</Card>
</ConfigProvider>
)
}

export default AntDemo;
20 changes: 10 additions & 10 deletions development/src/Demo.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,16 +2,16 @@ import AntDemo from "./AntDemo";
import MuiDemo from "./MuiDemo";

const Demo = () => {
return (
<div style={{display: "flex"}}>
<div style={{width: "50vw", height: "100vh"}}>
<AntDemo/>
</div>
<div style={{width: "50vw", height: "100vh"}}>
<MuiDemo/>
</div>
</div>
)
return (
<div style={{display: "flex"}}>
<div style={{width: "50vw", height: "100vh"}}>
<AntDemo/>
</div>
<div style={{width: "50vw", height: "100vh"}}>
<MuiDemo/>
</div>
</div>
)
}

export default Demo;
70 changes: 35 additions & 35 deletions development/src/MuiDemo.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,47 +5,47 @@ import {Button, Container, CssBaseline, TextField} from "@mui/material";
import PhoneInput from "./mui-phone";

const Demo = () => {
const [value, setValue] = useState({});
const [mode, setMode] = useState("dark");
const [value, setValue] = useState({});
const [mode, setMode] = useState("dark");

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

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

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

return (
<ThemeProvider theme={theme}>
<CssBaseline/>
<Container>
<div style={{margin: 20, maxWidth: 400}}>
{value && (
<pre style={{
background: mode === "light" ? "#efefef" : "#1f1f1f",
color: mode === "light" ? "#1f1f1f" : "#efefef",
padding: 10, marginBottom: 24,
}}>
return (
<ThemeProvider theme={theme}>
<CssBaseline/>
<Container>
<div style={{margin: 20, maxWidth: 400}}>
{value && (
<pre style={{
background: mode === "light" ? "#efefef" : "#1f1f1f",
color: mode === "light" ? "#1f1f1f" : "#efefef",
padding: 10, marginBottom: 24,
}}>
{JSON.stringify(value, null, 2)}
</pre>
)}
<form noValidate autoComplete="off" onSubmit={e => e.preventDefault()}>
<PhoneInput
enableSearch
error={error}
variant="filled"
searchVariant="standard"
onChange={(e) => setValue(e as any)}
/>
<TextField variant="filled" style={{marginTop: "1.5rem"}}/>
<div style={{display: "flex", gap: 24, marginTop: "1rem"}}>
<Button type="reset">Reset Value</Button>
<Button onClick={handleThemeChange}>Change Theme</Button>
</div>
</form>
</div>
</Container>
</ThemeProvider>
);
)}
<form noValidate autoComplete="off" onSubmit={e => e.preventDefault()}>
<PhoneInput
enableSearch
error={error}
variant="filled"
searchVariant="standard"
onChange={(e) => setValue(e as any)}
/>
<TextField variant="filled" style={{marginTop: "1.5rem"}}/>
<div style={{display: "flex", gap: 24, marginTop: "1rem"}}>
<Button type="reset">Reset Value</Button>
<Button onClick={handleThemeChange}>Change Theme</Button>
</div>
</form>
</div>
</Container>
</ThemeProvider>
);
}

export default Demo;
Loading

0 comments on commit 425e948

Please sign in to comment.