Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 | 37x 27x 27x 27x 27x 27x 37x | import { useStateEffect } from "@hooks/customReactCore";
import { Box, Slide, Drawer, DrawerProps, Grid, SxProps } from "@mui/material";
import { palette } from "@palette";
import { useCustomTheme } from "@theme/hooks/useCustomTheme";
import React, { CSSProperties } from "react";
import { useLocation } from "react-router-dom";
import ErrorCatcher from "@common/Error/ErrorCatcher";
import { CAMPAIGN_PANEL_WIDTH } from "@common/CampaignCard/CampaignDetailsModal/useCampaignModal";
import { useBannerOffset } from "@hooks/common/useBannerOffset";
export interface SidePanelProps extends DrawerProps {
onCloseDrawer?: () => void;
children: React.ReactNode;
width?: number | string | null;
paperStyle?: CSSProperties | undefined;
doublePanel?: boolean;
}
export const SidePanel = ({
onCloseDrawer,
children,
width,
paperStyle,
doublePanel,
...props
}: SidePanelProps) => {
const { isDesktopView } = useCustomTheme();
const location = useLocation();
const bannerOffset = useBannerOffset();
useStateEffect(() => {
if (onCloseDrawer) onCloseDrawer();
}, [location.pathname]);
return (
<Drawer
{...props}
SlideProps={{
easing: "ease-in-out",
timeout: 300,
...((props?.SlideProps as any) || {}),
}}
PaperProps={{
...props?.PaperProps,
sx: {
flexDirection: "row",
width: width ? width : isDesktopView ? "620px" : "100%",
boxShadow: isDesktopView
? "-4px 0px 20px 0px rgba(0, 0, 0, 0.05)"
: "none",
background: palette.neutral.white3,
overflow: "visible !important",
...(doublePanel
? { transitionProperty: "transform, width !important" }
: {}),
...paperStyle,
...(props?.PaperProps?.sx || {}),
},
}}
slotProps={{
...props?.slotProps,
backdrop: {
sx: {
background: palette.backdrop.main,
},
...props?.slotProps?.backdrop,
},
}}
type="sidepanel"
bannerOffset={bannerOffset}
anchor="right"
onClose={onCloseDrawer}
>
<Grid
container
flexDirection={"column"}
style={{
overflow: "hidden",
height: "100%",
flexWrap: "nowrap",
}}
>
{children}
</Grid>
</Drawer>
);
};
export const SidePanelSecondaryContainer = ({
open,
children,
containerSx,
}: {
open: boolean;
errorID: string;
children: React.ReactNode;
containerSx?: SxProps;
}) => {
return (
<Slide direction="left" in={open} timeout={300} unmountOnExit>
<Box
padding="12px 16px"
flex={1}
height="100vh"
maxWidth={CAMPAIGN_PANEL_WIDTH}
boxShadow={palette.shadow.secondPanel}
sx={containerSx}
>
<ErrorCatcher errorID="enterprise-double-panel">
{children}
</ErrorCatcher>
</Box>
</Slide>
);
};
|