MUI deprecations

This commit is contained in:
Manav Rathi 2025-01-30 15:23:41 +05:30
parent 369999e0aa
commit 8407816d14
No known key found for this signature in database
3 changed files with 35 additions and 41 deletions

View File

@ -58,7 +58,7 @@ const ExportPendingList = (props: Iprops) => {
<TitledMiniDialog
open={props.isOpen}
onClose={props.onClose}
slotProps={{ paper: { sx: { maxWidth: "444px" } } }}
paperMaxWidth="444px"
title={t("PENDING_ITEMS")}
>
<ItemList

View File

@ -393,9 +393,11 @@ const parseExifInfo = (
return info;
};
const FileInfoSidebar = styled((props: DialogProps) => (
<SidebarDrawer {...props} anchor="right" />
))({
const FileInfoSidebar = styled(
(props: Pick<DialogProps, "open" | "onClose" | "children">) => (
<SidebarDrawer {...props} anchor="right" />
),
)({
zIndex: fileInfoDrawerZIndex,
"& .MuiPaper-root": {
padding: 8,

View File

@ -143,7 +143,7 @@ export interface MiniDialogAttributes {
buttonDirection?: "row" | "column";
}
type MiniDialogProps = Omit<DialogProps, "onClose"> & {
type MiniDialogProps = Pick<DialogProps, "open" | "sx"> & {
onClose: () => void;
attributes?: MiniDialogAttributes;
};
@ -158,7 +158,7 @@ type MiniDialogProps = Omit<DialogProps, "onClose"> & {
*/
export const AttributedMiniDialog: React.FC<
React.PropsWithChildren<MiniDialogProps>
> = ({ open, onClose, attributes, children, ...props }) => {
> = ({ open, onClose, sx, attributes, children }) => {
const [phase, setPhase] = useState<
"loading" | "secondary-loading" | "failed" | undefined
>();
@ -199,8 +199,6 @@ export const AttributedMiniDialog: React.FC<
];
})(attributes.cancel);
const { PaperProps, ...rest } = props;
const loadingButton = attributes.continue && (
<LoadingButton
loading={phase == "loading"}
@ -260,17 +258,14 @@ export const AttributedMiniDialog: React.FC<
return (
<Dialog
open={open}
{...{ open, sx }}
onClose={handleClose}
fullWidth
PaperProps={{
...PaperProps,
sx: {
maxWidth: "360px",
...PaperProps?.sx,
slotProps={{
paper: {
sx: { maxWidth: "360px" },
},
}}
onClose={handleClose}
{...rest}
>
{(attributes.icon ?? attributes.title) ? (
<Stack
@ -343,12 +338,18 @@ export const AttributedMiniDialog: React.FC<
);
};
type TitledMiniDialogProps = Omit<DialogProps, "onClose"> & {
type TitledMiniDialogProps = Pick<DialogProps, "open" | "sx"> & {
onClose: () => void;
/**
* The dialog's title.
*/
title?: React.ReactNode;
/**
* Optional max width of the underlying MUI {@link Paper}.
*
* Default: 360px (same as {@link AttributedMiniDialog}).
*/
paperMaxWidth?: string;
};
/**
@ -366,27 +367,18 @@ type TitledMiniDialogProps = Omit<DialogProps, "onClose"> & {
*/
export const TitledMiniDialog: React.FC<
React.PropsWithChildren<TitledMiniDialogProps>
> = ({ open, onClose, title, children, ...props }) => {
const { PaperProps, ...rest } = props;
return (
<Dialog
open={open}
onClose={onClose}
fullWidth
PaperProps={{
...PaperProps,
sx: {
maxWidth: "360px",
...PaperProps?.sx,
},
}}
{...rest}
>
<DialogTitle sx={{ "&&&": { paddingBlock: "24px 16px" } }}>
{title}
</DialogTitle>
<DialogContent>{children}</DialogContent>
</Dialog>
);
};
> = ({ open, onClose, sx, paperMaxWidth, title, children }) => (
<Dialog
{...{ open, sx }}
onClose={onClose}
fullWidth
slotProps={{
paper: { sx: { maxWidth: paperMaxWidth ?? "360px" } },
}}
>
<DialogTitle sx={{ "&&&": { paddingBlock: "24px 16px" } }}>
{title}
</DialogTitle>
<DialogContent>{children}</DialogContent>
</Dialog>
);