All files / src/features/Minibuilders/modals utils.tsx

0% Statements 0/7
0% Branches 0/2
0% Functions 0/2
0% Lines 0/7

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                                                                                                                                                             
import { BaseModal } from "@common/Modal";
import { DialogProps } from "@mui/material";
import { SwipeableDrawer, useMediaQuery, useTheme } from "@mui/material";
 
export const Wrapper = ({
  open,
  children,
  onClose,
  scroll,
  ...props
}: {
  open: boolean;
  children: React.ReactNode;
  onClose: () => void;
  scroll?: DialogProps["scroll"];
  sx?: any;
}) => {
  const theme = useTheme();
  const isDesktop = useMediaQuery(theme.breakpoints.up("sm"));
 
  if (!isDesktop) {
    return (
      <SwipeableDrawer
        open={open}
        anchor="bottom"
        onClose={onClose}
        onOpen={() => undefined}
        sx={{ zIndex: 1301 }}
        PaperProps={{
          sx: {
            borderRadius: "24px 24px 0 0",
            pt: "8px",
            maxHeight: "90%",
            "&::-webkit-scrollbar": {
              display: "none",
            },
            "&::-webkit-scrollbar-track": {
              display: "none",
            },
          },
        }}
      >
        {children}
      </SwipeableDrawer>
    );
  }
 
  return (
    <BaseModal
      open={open}
      scroll={scroll}
      PaperProps={{
        style: {
          background: "#FBFBFB",
          borderRadius: "12px",
          width: "90%",
          maxWidth: "700px",
        },
        sx: {
          "&::-webkit-scrollbar": {
            display: "none",
          },
          "&::-webkit-scrollbar-track": {
            display: "none",
          },
        },
      }}
      sx={{
        ...props.sx,
        ".MuiDialogActions-root": {
          backgroundColor: "#FBFBFB",
        },
      }}
    >
      {children}
    </BaseModal>
  );
};