refactor: notice caller

This commit is contained in:
GyDi
2022-01-16 17:56:43 +08:00
Unverified
parent 9ca83d3291
commit 4e2cb30db7
3 changed files with 92 additions and 75 deletions

View File

@@ -1,68 +0,0 @@
import { useMemo, useState } from "react";
import { Box, IconButton, Slide, Snackbar } from "@mui/material";
import { Close, CheckCircleRounded, ErrorRounded } from "@mui/icons-material";
interface NoticeInstance {
info: (msg: string) => void;
error: (msg: string) => void;
success: (msg: string) => void;
}
const useNotice = () => {
const [message, setMessage] = useState("");
const [level, setLevel] = useState<"info" | "error" | "success">("info");
const handleClose = (_e: any, reason: string) => {
if (reason !== "clickaway") setMessage("");
};
const msgElement =
level === "info" ? (
message
) : (
<Box sx={{ display: "flex", alignItems: "center" }}>
{level === "error" && <ErrorRounded color="error" />}
{level === "success" && <CheckCircleRounded color="success" />}
<span style={{ marginLeft: 4 }}>{message}</span>
</Box>
);
const element = useMemo(
() => (
<Snackbar
open={!!message}
anchorOrigin={{ vertical: "top", horizontal: "right" }}
autoHideDuration={3000}
onClose={handleClose}
message={msgElement}
sx={{ maxWidth: 360 }}
TransitionComponent={(p) => <Slide {...p} direction="left" />}
transitionDuration={200}
action={
<IconButton
size="small"
color="inherit"
onClick={() => setMessage("")}
>
<Close fontSize="small" />
</IconButton>
}
/>
),
[message]
);
const instance = (Object.fromEntries(
(["info", "error", "success"] as const).map((item) => [
item,
(msg: string) => {
setLevel(item);
setMessage(msg);
},
])
) as unknown) as NoticeInstance;
return [instance, element] as const;
};
export default useNotice;