@mui/material#Modal TypeScript Examples

The following examples show how to use @mui/material#Modal. You can vote up the ones you like or vote down the ones you don't like, and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
Source File: HelpModal.tsx    From rewind with MIT License 6 votes vote down vote up 
export function HelpModalDialog(props: HelpModalProps) {
  const { isOpen, onClose } = props;

  return (
    <Modal open={isOpen} onClose={onClose}>
      <Box
        sx={{
          position: "absolute",
          top: "50%",
          left: "50%",
          transform: "translate(-50%, -50%)",
          minWidth: 600,
          // maxWidth: 700,
          maxWidth: "100%",
          // maxHeight: 600,
          maxHeight: "100%",
        }}
      >
        <HelpBox onClose={onClose} />
      </Box>
    </Modal>
  );
}
Example #2
Source File: UpdateBirthdayModal.tsx    From frontend with MIT License 6 votes vote down vote up 
StyledModal = styled(Modal)({
  [`& .${classes.modal}`]: {
    position: 'absolute',
    top: '50%',
    left: '50%',
    transform: 'translate(-50%, -50%)',
    width: 650,
    backgroundColor: '#EEEEEE',
    padding: 20,
  },
  [`& .${classes.close}`]: {
    position: 'absolute',
    right: '10px',
  },
})
Example #3
Source File: UpdateNameModal.tsx    From frontend with MIT License 6 votes vote down vote up 
StyledModal = styled(Modal)({
  [`& .${classes.modal}`]: {
    position: 'absolute',
    top: '50%',
    left: '50%',
    transform: 'translate(-50%, -50%)',
    width: 650,
    backgroundColor: '#EEEEEE',
    padding: 20,
  },
  [`& .${classes.close}`]: {
    position: 'absolute',
    right: '10px',
  },
})
Example #4
Source File: SideDialogDrawer.tsx    From firecms with MIT License 5 votes vote down vote up 
SideDialogDrawer = React.forwardRef<HTMLDivElement, EntityDrawerProps>(function EntityDrawer(props, ref) {

    const {
        children,
        onClose,
        open,
        offsetPosition,
        onExitAnimation
    } = props;

    const classes = useStyles({ offsetPosition });

    const drawer = (
        <Paper
            elevation={1}
            square
            style={{
                transition: "transform 1000ms cubic-bezier(0.33, 1, 0.68, 1)",
                transform: `translateX(-${(offsetPosition) * 240}px)`
            }}
            className={clsx(
                classes.paper,
                classes.paperAnchorRight
            )}
        >
            {children}
        </Paper>
    );


    const slidingDrawer = (
        <SlideFade
            in={open}
            timeout={defaultTransitionDuration}
            onExitAnimation={onExitAnimation}
        >
            {drawer}
        </SlideFade>
    );

    return (
        <Modal
            BackdropProps={{
                transitionDuration: defaultTransitionDuration
            }}
            BackdropComponent={Backdrop}
            className={clsx(classes.root, classes.modal)}
            open={open}
            onClose={onClose}
            ref={ref}
            keepMounted={true}
            // disableEnforceFocus related to https://github.com/Camberi/firecms/issues/50
            disableEnforceFocus={true}
        >
            {slidingDrawer}
        </Modal>
    );
})
Example #5
Source File: ManagerLogger.tsx    From Cromwell with MIT License 5 votes vote down vote up 
ManagerLogger = (props: { isActive: boolean }) => {
    const [log, setLog] = useState<string[]>([]);
    const [isModalActive, setIsModalActive] = useState<boolean>(false);
    const toastId = React.useRef<null | string | number>(null);
    const lastState = React.useRef<boolean>(false);
    const handleOpenModal = () => setIsModalActive(true);
    const wsClient = getWebSocketClient();

    if (props.isActive && !lastState.current) {
        // open logger
        setLog([]);
        wsClient?.connectToManager((message: string) => {
            setLog(prev => {
                return [...prev, message]
            })
        });

        toastId.current = toast(({ closeToast }) =>
            <Notification onClose={closeToast} onClick={handleOpenModal} />, {
            position: toast.POSITION.TOP_RIGHT,
            autoClose: false,
            onClick: handleOpenModal,
            // closeOnClick: false
        });
    }
    if (!props.isActive && lastState.current) {
        // close logger
        setTimeout(() => {
            if (toastId.current) toast.dismiss(toastId.current);
        }, 2000);
    }

    lastState.current = props.isActive;

    useEffect(() => {
        return () => {
            wsClient?.disconnectManager();
        }
    }, []);

    return (
        <Modal className={commonClasses.center}
            open={isModalActive}
            onClose={() => setIsModalActive(false)}
        >
            <div className={classes.logModal}>
                <div className={classes.logModalContent}>
                    {log.map((message, i) => {
                        return (
                            <p key={i}>{message}</p>
                        )
                    })}
                </div>
            </div>
        </Modal>
    )
}
Example #6
Source File: VehCard.tsx    From mojito_pdm with Creative Commons Attribution Share Alike 4.0 International 5 votes vote down vote up 
VehCard: React.FC<Car> = ({
    name,
    brand,
    description,
    brandLogo,
    image,
    price,
    category,
    spawncode,
    trunkspace,
    performance
}) => {
    const theme = useTheme();
    const [open, setOpen] = useState(false)
    const testDrive = async () => {
        await fetchNui("test_drive", {vehicle: spawncode})
    }

    // Functions
    const handleOpen = () => setOpen(true)
    const handleClose = () => setOpen(false)

    return (
        <Card sx={{
            boxShadow: theme.shadows[3],
            margin: theme.spacing(2)
        }} variant="outlined">
            <CardHeader
                avatar={<img height={40} style={{maxWidth: 100, maxHeight: 40}} src={brandLogo} alt={brand}/>}
                title={name}
                subheader={category}
            />
            <CardMedia style={{height: "150px"}} image={image}/>
            <CardActions>
                <Tooltip TransitionComponent={Zoom} sx={{maxWidth: 120}} arrow title="Test drive this vehicle">
                    <Button
                        size="small"
                        variant={theme.palette.mode === "dark" ? "contained" : "outlined"}
                        color="primary"
                        startIcon={<DirectionsCarIcon/>}
                        onClick={testDrive}
                        disableElevation
                    >
                        TEST DRIVE
                    </Button>
                </Tooltip>
                <Tooltip TransitionComponent={Zoom} arrow sx={{maxWidth: 120}}
                         title="View more information about this vehicle">
                    <Button
                        size="small"
                        variant={theme.palette.mode === "dark" ? "contained" : "outlined"}
                        color="primary"
                        startIcon={<AssignmentIcon/>}
                        onClick={handleOpen}
                        disableElevation
                    >
                        MORE INFO
                    </Button>
                </Tooltip>
                <Modal
                    open={open}
                    onClose={handleClose}
                >
                    {<ModalBody
                        name={name}
                        brand={brand}
                        description={description}
                        price={price}
                        trunkspace={trunkspace}
                        setOpen={setOpen}
                        performance={performance}
                        spawncode={spawncode}
                    />}
                </Modal>
            </CardActions>
        </Card>
    )
}
Example #7
Source File: SettingsModal.tsx    From rewind with MIT License 5 votes vote down vote up 
export function SettingsModal() {
  const { onSettingsModalOpenChange, settingsModalOpen, opacity, onTabIndexChange, onOpacityChange, tabIndex } =
    useSettingsModalContext();
  const onClose = () => onSettingsModalOpenChange(false);

  return (
    <Modal
      open={settingsModalOpen}
      onClose={onClose}
      hideBackdrop={false}
      sx={{
        // We reduce the default backdrop from 0.5 alpha to 0.1 in order for the user to better see the background
        // behind the modal
        "& .MuiBackdrop-root": {
          backgroundColor: "rgba(0,0,0,0.1)",
        },
      }}
    >
      <Box
        sx={{
          position: "absolute",
          top: "50%",
          left: "50%",
          transform: "translate(-50%, -50%)",
          width: 800,
          maxWidth: "100%",
          height: 600,
          maxHeight: "100%",
        }}
      >
        <BaseSettingsModal
          opacity={opacity}
          tabIndex={tabIndex}
          onTabIndexChange={onTabIndexChange}
          onOpacityChange={onOpacityChange}
          onClose={onClose}
          tabs={[
            { label: "General", component: <GeneralSettings /> },
            {
              label: "Skins",
              component: <SkinsSettings />,
            },
          ]}
        />
      </Box>
    </Modal>
  );
}
Example #8
Source File: ModalWrapper.tsx    From genshin-optimizer with MIT License 5 votes vote down vote up 
ScrollModal = styled(Modal)(({ theme }) => ({
  overflow: "scroll",
  paddingTop: theme.spacing(2),
  paddingBottom: theme.spacing(2),

}))
Example #9
Source File: PersonalInfoTab.tsx    From frontend with MIT License 4 votes vote down vote up 
export default function PersonalInfoTab() {
  const { data: session } = useSession()
  const { data: { user: person } = { user: null }, refetch } = useCurrentPerson()
  const [isDeleteAccountModalOpen, setIsDeleteAccountModalOpen] = useState(false)
  const [isUpdateNameModalOpen, setIsUpdateNameModalOpen] = useState(false)
  const [isUpdateBirthdayModalOpen, setIsUpdateBirthdayModalOpen] = useState(false)

  return (
    <Root>
      <Box className={classes.boxTitle}>
        <Typography className={classes.h3}>Лична информация</Typography>
      </Box>
      <ProfileTab name={ProfileTabs.personalInformation}>
        <Box>
          <h2 className={classes.heading}>Login информация:</h2>
          <Box className={classes.infoFlex}>
            <Box className={classes.boxInfo}>
              <p className={classes.bold}>Email адрес:</p>
              <p>{session?.user?.email}</p>
            </Box>
            <Box className={classes.boxInfo}>
              <p className={classes.bold}>Парола:</p>
              <p>***********</p>
              <Box className={classes.editBox}>
                <EditIcon className={classes.editIcon} />
                <span className={classes.editSpan}>Редактирай</span>
              </Box>
            </Box>
          </Box>
          <Divider className={classes.divider} />
          <h2 className={classes.heading}>Лична информация:</h2>
          <Box className={classes.infoFlex}>
            <Box className={classes.boxInfo}>
              <p className={classes.bold}>Име:</p>
              <p>
                {person?.firstName} {person?.lastName}
              </p>
              <Box className={classes.editBox}>
                <Link href="#" onClick={() => setIsUpdateNameModalOpen(true)}>
                  <EditIcon className={classes.editIcon} />
                  <span className={classes.editSpan}>Редактирай</span>
                </Link>
              </Box>
            </Box>
            <Box className={classes.boxInfo}>
              <p className={classes.bold}>Рожден ден:</p>
              <Typography sx={{ color: person?.birthday ? undefined : '#F22727' }}>
                {person?.birthday ? formatDateString(person?.birthday) : 'не e наличен'}
              </Typography>
              <Box className={classes.editBox}>
                <Link href="#" onClick={() => setIsUpdateBirthdayModalOpen(true)}>
                  <EditIcon className={classes.editIcon} />
                  <span className={classes.editSpan}>Редактирай</span>
                </Link>
              </Box>
            </Box>
          </Box>
          <Divider className={classes.divider} />
          <Link
            href="#"
            sx={{ color: '#294E85', float: 'right' }}
            onClick={() => setIsDeleteAccountModalOpen(true)}>
            изтриване на акаунт/ профил
          </Link>
        </Box>
      </ProfileTab>
      <Modal
        style={{ display: 'flex', alignItems: 'center', justifyContent: 'center' }}
        open={isDeleteAccountModalOpen}
        onClose={() => setIsDeleteAccountModalOpen(false)}
        aria-labelledby="modal-modal-title"
        aria-describedby="modal-modal-description">
        <Box bgcolor="white">
          <Box
            sx={(theme) => ({
              padding: theme.spacing(4),
              margin: theme.spacing(2),
              backgroundColor: '#EEEEEE',
            })}>
            <Typography variant="h6" component="h2">
              Изтриване на акаунт
            </Typography>
            <Typography className={classes.graySpan}>Съжаляваме, че ни напускате!</Typography>
            <Typography className={classes.heading}>Преди да ни напуснете ...</Typography>
            <hr />
            <ul style={{ listStyle: 'disc', paddingLeft: '20px' }}>
              <li className={classes.h5}>
                Ако ви е омръзнало да получавате имейли, деактивирайте ги
                <Link href="#"> тук</Link>.
              </li>
              <li className={classes.h5}>
                Ако .........................., моля пишете <Link href="#">тук</Link>.
              </li>
              <li className={classes.h5}>Изтриването на акаунт е необратимо.</li>
              <li className={classes.h5}>Ще бъде невъзможно да възстановите акаунта си.</li>
            </ul>
            <Box display="flex" alignItems="center" justifyContent="space-between">
              <Button
                variant="contained"
                size="large"
                color="primary"
                onClick={() => setIsDeleteAccountModalOpen(false)}>
                Запази моя акаунт
              </Button>
              <Button variant="contained" size="large" color="inherit">
                Изтрий моя акаунт
              </Button>
            </Box>
          </Box>
        </Box>
      </Modal>
      {person && (
        <>
          <UpdateNameModal
            isOpen={isUpdateNameModalOpen}
            person={person}
            handleClose={() => {
              setIsUpdateNameModalOpen(false)
              refetch()
            }}
          />
          <UpdateBirthdayModal
            isOpen={isUpdateBirthdayModalOpen}
            person={person}
            handleClose={() => {
              setIsUpdateBirthdayModalOpen(false)
              refetch()
            }}
          />
        </>
      )}
    </Root>
  )
}