kenmirrors/ente
1
0
Fork 0
mirror of https://github.com/ente-io/ente.git synced 2025-08-11 08:53:13 +00:00
Code Issues Packages Projects Releases Wiki Activity

MUI deprecations

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
web/apps/photos/src/components/ExportPendingList.tsx
View File

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

8
web/apps/photos/src/components/PhotoViewer/FileInfo.tsx
View File

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

66
web/packages/base/components/MiniDialog.tsx
View File

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