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 | 20x 20x 20x 20x 20x 20x 34x 20x 1838x 20x 121x 121x 20x 161x 161x 20x 47x 47x 20x 161x 161x | import {
Dialog as MuiDialog,
DialogActions as MuiDialogActions,
DialogActionsProps,
DialogContent as MuiDialogContent,
DialogContentProps,
DialogContentText as MuiDialogContentText,
DialogContentTextProps,
DialogProps,
DialogTitle as MuiDialogTitle,
DialogTitleProps as MuiDialogTitleProps,
} from "@material-ui/core";
import CloseIcon from "@material-ui/icons/Close";
import classNames from "classnames";
import IconButton from "components/IconButton";
import React from "react";
import makeStyles from "utils/makeStyles";
const useStyles = makeStyles((theme) => ({
actions: {
display: "flex",
justifyContent: "space-around",
margin: 0,
padding: theme.spacing(2),
paddingTop: 0,
},
content: {
height: "fit-content",
padding: theme.spacing(3),
width: "100%",
},
contentText: {
padding: theme.spacing(2),
},
title: {
"& > h2": theme.typography.h2,
"&:not(:nth-child(1))": {
paddingTop: 0,
},
padding: theme.spacing(2),
paddingBottom: 0,
textAlign: "center",
},
closeButton: {
position: "absolute",
right: theme.spacing(1),
top: theme.spacing(1),
color: theme.palette.grey[500],
},
}));
export interface AccessibleDialogProps extends Omit<DialogProps, "className"> {
"aria-labelledby": string;
}
export function Dialog(props: AccessibleDialogProps) {
return <MuiDialog {...props} fullWidth maxWidth="sm" scroll="body" />;
}
export function DialogActions(props: Omit<DialogActionsProps, "className">) {
const classes = useStyles();
return <MuiDialogActions {...props} className={classes.actions} />;
}
export function DialogContent(props: Omit<DialogContentProps, "className">) {
const classes = useStyles();
return <MuiDialogContent {...props} className={classes.content} />;
}
export function DialogContentText(props: DialogContentTextProps) {
const classes = useStyles();
return (
<MuiDialogContentText
{...props}
className={classNames(props.className, classes.contentText)}
/>
);
}
interface DialogTitleProps extends Omit<MuiDialogTitleProps, "className"> {
onClose?: () => void;
}
export function DialogTitle({
children,
onClose,
...dialogTitleProps
}: DialogTitleProps) {
const classes = useStyles();
return (
<MuiDialogTitle {...dialogTitleProps} className={classes.title}>
{onClose && (
<IconButton
aria-label="close"
onClick={onClose}
className={classes.closeButton}
>
<CloseIcon />
</IconButton>
)}
{children}
</MuiDialogTitle>
);
}
|