@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 |
|
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 |
|
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 |
|
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 |
|
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 |
|
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 |
|
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 |
|
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 |
|
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 |
|
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>
)
}
