Skip to content

B
bkunyun
Commit 754128e9 authored by chenshouchao's avatar chenshouchao
Browse files
Options

feat: 修改提示信息默认显示时间

parent cd3761aa
Hide whitespace changes
Inline Side-by-side
Showing with 126 additions and 129 deletions
src/components/MySnackbar/MySnackbarProvider.tsx
View file @ 754128e9
...@@ -5,152 +5,149 @@ import snackbarContext from "./snackbarContext"; ...@@ -5,152 +5,149 @@ import snackbarContext from "./snackbarContext";
import { ThemeProvider, createTheme } from "@mui/material/styles"; import { ThemeProvider, createTheme } from "@mui/material/styles";
type MySnackbarProviderProp = { type MySnackbarProviderProp = {
vertical?: "bottom" | "top"; vertical?: "bottom" | "top";
horizontal?: "center" | "left" | "right"; horizontal?: "center" | "left" | "right";
autoHideDuration?: number; autoHideDuration?: number;
snackerClasses?: object; snackerClasses?: object;
ClickAwayListenerProps?: object; ClickAwayListenerProps?: object;
ContentProps?: object; ContentProps?: object;
disableWindowBlurListener?: boolean; disableWindowBlurListener?: boolean;
resumeHideDuration?: number; resumeHideDuration?: number;
snackbarSx?: object; snackbarSx?: object;
transition?: "grow" | "fade"; transition?: "grow" | "fade";
transitionDuration?: number; transitionDuration?: number;
TransitionProps?: object; TransitionProps?: object;
alertClasses?: object; alertClasses?: object;
closeText?: string; closeText?: string;
variant?: "filled" | "outlined" | "standard"; variant?: "filled" | "outlined" | "standard";
errorIcon?: ReactNode; errorIcon?: ReactNode;
infoIcon?: ReactNode; infoIcon?: ReactNode;
successIcon?: ReactNode; successIcon?: ReactNode;
warningIcon?: ReactNode; warningIcon?: ReactNode;
elevation?: number; elevation?: number;
alertSx?: object; alertSx?: object;
children?: ReactNode; children?: ReactNode;
}; };
const getTransitionComponent = (transition: "grow" | "fade") => { const getTransitionComponent = (transition: "grow" | "fade") => {
switch (transition) { switch (transition) {
case "grow": case "grow":
return Grow; return Grow;
case "fade": case "fade":
return Fade; return Fade;
default: default:
return Grow; return Grow;
} }
}; };
const MySnackbarProvider = ({ const MySnackbarProvider = ({
vertical = "top", vertical = "top",
horizontal = "center", horizontal = "center",
autoHideDuration = 890000, autoHideDuration = 3000,
snackerClasses, snackerClasses,
ClickAwayListenerProps, ClickAwayListenerProps,
ContentProps, ContentProps,
disableWindowBlurListener = true, disableWindowBlurListener = true,
resumeHideDuration, resumeHideDuration,
snackbarSx, snackbarSx,
transition = "grow", transition = "grow",
transitionDuration, transitionDuration,
TransitionProps = {}, TransitionProps = {},
alertClasses, alertClasses,
closeText = "Close", closeText = "Close",
variant = "standard", variant = "standard",
errorIcon, errorIcon,
infoIcon, infoIcon,
successIcon, successIcon,
warningIcon, warningIcon,
elevation = 3, elevation = 3,
alertSx, alertSx,
children, children,
}: MySnackbarProviderProp) => { }: MySnackbarProviderProp) => {
const { const {
open, open,
messageInfo, messageInfo,
handleExited, handleExited,
success, success,
error, error,
warning, warning,
info, info,
close, close,
} = useMySnackbar(); } = useMySnackbar();
// .MuiAlert-filledInfo // .MuiAlert-filledInfo
const getColorStyle = useMemo(()=>{ const getColorStyle = useMemo(() => {
if(messageInfo.severity === 'success'){ if (messageInfo.severity === "success") {
return '#02AB83' return "#02AB83";
} }
if(messageInfo.severity === 'info'){ if (messageInfo.severity === "info") {
return '#1370FF' return "#1370FF";
} }
if(messageInfo.severity === 'warning'){ if (messageInfo.severity === "warning") {
return '#FFB919' return "#FFB919";
} }
if(messageInfo.severity === 'error'){ if (messageInfo.severity === "error") {
return '#FF4E4E' return "#FF4E4E";
} }
},[messageInfo.severity]) }, [messageInfo.severity]);
const theme = createTheme({ const theme = createTheme({
components: { components: {
MuiAlert: { MuiAlert: {
styleOverrides: { styleOverrides: {
root: { root: {
color: getColorStyle, color: getColorStyle,
"& .MuiAlert-icon": { "& .MuiAlert-icon": {
color: getColorStyle color: getColorStyle,
}, },
} },
}, },
}, },
}, },
}); });
return (
return ( <Fragment>
<Fragment> <ThemeProvider theme={theme}>
<ThemeProvider theme={theme}> <Snackbar
open={open}
autoHideDuration={autoHideDuration}
<Snackbar onClose={close}
open={open} anchorOrigin={{ vertical: vertical, horizontal: horizontal }}
autoHideDuration={autoHideDuration} classes={snackerClasses}
onClose={close} ClickAwayListenerProps={ClickAwayListenerProps}
anchorOrigin={{ vertical: vertical, horizontal: horizontal }} ContentProps={ContentProps}
classes={snackerClasses} disableWindowBlurListener={disableWindowBlurListener}
ClickAwayListenerProps={ClickAwayListenerProps} resumeHideDuration={resumeHideDuration}
ContentProps={ContentProps} sx={snackbarSx}
disableWindowBlurListener={disableWindowBlurListener} TransitionComponent={getTransitionComponent(transition)}
resumeHideDuration={resumeHideDuration} transitionDuration={transitionDuration}
sx={snackbarSx} TransitionProps={{ onExited: handleExited, ...TransitionProps }}
TransitionComponent={getTransitionComponent(transition)} >
transitionDuration={transitionDuration} <Alert
TransitionProps={{ onExited: handleExited, ...TransitionProps }} id="Alert"
> classes={alertClasses}
<Alert closeText={closeText}
id="Alert" iconMapping={{
classes={alertClasses} error: errorIcon,
closeText={closeText} info: infoIcon,
iconMapping={{ success: successIcon,
error: errorIcon, warning: warningIcon,
info: infoIcon, }}
success: successIcon, severity={messageInfo?.severity}
warning: warningIcon, variant={variant}
}} elevation={elevation}
severity={messageInfo?.severity} sx={{ boxShadow: "unset", ...alertSx }}
variant={variant} >
elevation={elevation} {messageInfo?.content}
sx={{ boxShadow: "unset", ...alertSx }} </Alert>
> </Snackbar>
{messageInfo?.content} </ThemeProvider>
</Alert> <snackbarContext.Provider value={{ success, error, warning, info }}>
</Snackbar> {children}
</ThemeProvider> </snackbarContext.Provider>
<snackbarContext.Provider value={{ success, error, warning, info }}> </Fragment>
{children} );
</snackbarContext.Provider>
</Fragment>
);
}; };
export default MySnackbarProvider; export default MySnackbarProvider;
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment