38 lines
1.1 KiB
TypeScript
38 lines
1.1 KiB
TypeScript
import { Dialog, Theme } from "@mui/material";
|
|
import { DialogProps } from "@mui/material/Dialog";
|
|
// import { TransitionProps } from "@mui/material/transitions";
|
|
import { makeStyles } from "@mui/styles";
|
|
import { useMobile } from "hooks";
|
|
// import React from "react";
|
|
|
|
const useStyles = makeStyles((theme: Theme) => ({
|
|
bg: {
|
|
background: theme.palette.background.default
|
|
}
|
|
}));
|
|
|
|
// const Transition = React.forwardRef(function Transition(
|
|
// props: TransitionProps & { children?: React.ReactElement<any, any> },
|
|
// ref: React.Ref<unknown>
|
|
// ) {
|
|
// return <Slide direction="up" ref={ref} {...props} />;
|
|
// });
|
|
|
|
//renders a fullscren dialog when a mobile viewport is detected
|
|
export default function ResponsiveDialog(props: DialogProps) {
|
|
const classes = useStyles();
|
|
const isMobile = useMobile();
|
|
const fullScreen = props.fullScreen ?? isMobile;
|
|
|
|
return (
|
|
<Dialog
|
|
fullScreen={fullScreen}
|
|
// TransitionComponent={Transition}
|
|
{...props}
|
|
PaperProps={{
|
|
classes: { root: classes.bg }
|
|
}}>
|
|
{props.children}
|
|
</Dialog>
|
|
);
|
|
}
|