Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

bugfix: Fixes toastview cannot render consecutively issue #5133

Open
wants to merge 1 commit into
base: release/v1.1.0
Choose a base branch
from
+104 −3
Open

bugfix: Fixes toastview cannot render consecutively issue #5133

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
107 changes: 104 additions & 3 deletions app/packages/core/src/plugins/SchemaIO/components/ToastView.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,10 +1,111 @@
import React from "react";
import { Toast } from "@fiftyone/components";
import React, { useState } from "react";
import { Box, Snackbar, SnackbarContent } from "@mui/material";

export default function ToastView(props) {
const { schema } = props;
const { view = {} } = schema;
const { message, duration, layout } = view;

return <Toast message={message} duration={duration} layout={layout} />;
return (
<Toast
message={message}
duration={duration}
layout={layout}
key={view.key ?? "toast"}
/>
);
}

interface ToastProps {
message: React.ReactNode;
primary?: (setOpen: (open: boolean) => void) => React.ReactNode;
secondary?: (setOpen: (open: boolean) => void) => React.ReactNode;
duration?: number;
layout?: {
vertical?: "top" | "bottom";
horizontal?: "left" | "center" | "right";
height?: number | string;
top?: number | string;
bottom?: number | string;
backgroundColor?: string;
color?: string;
fontSize?: string;
textAlign?: string;
};
onHandleClose?: (
event: React.SyntheticEvent<any> | Event,
reason?: string
) => void;
}

const Toast: React.FC<ToastProps> = ({
message,
primary,
secondary,
duration = 5000,
layout = {},
onHandleClose,
}) => {
const [open, setOpen] = useState(true); // do not use a global recoil atom for this state

const handleClose = (
event: React.SyntheticEvent<any> | Event,
reason?: string
) => {
if (reason === "clickaway") {
return;
}
setOpen(false);

if (onHandleClose) {
onHandleClose(event, reason);
}
};

const snackbarStyle = {
height: layout?.height || 5,
...(layout?.top && { top: layout.top }),
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🛠️ Refactor suggestion

Reconsider the default height value in snackbarStyle

Setting height: layout?.height || 5 may result in an unintended default height of 5 pixels, which could cause the Snackbar content to appear too small or improperly rendered. Consider removing the default height or setting a more appropriate default value that accommodates the content.

Apply the following change to conditionally apply the height only when provided:

-    height: layout?.height || 5,
+    ...(layout?.height && { height: layout.height }),
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
height: layout?.height || 5,
...(layout?.height && { height: layout.height }),

...(layout?.bottom && { bottom: layout.bottom }),
};

const action = (
<Box display="flex" justifyContent="flex-end">
{primary && primary(setOpen)} {/* Pass setOpen to primary button */}
{secondary && secondary(setOpen)} {/* Pass setOpen to secondary button */}
</Box>
);

return (
<Snackbar
anchorOrigin={{
vertical: layout?.vertical || "bottom",
horizontal: layout?.horizontal || "center",
}}
open={open}
onClose={handleClose}
autoHideDuration={duration}
sx={snackbarStyle}
>
<SnackbarContent
message={
<Box
display="flex"
alignItems="center"
justifyContent="space-between"
gap={4}
>
<Box>{message}</Box>
{action}
</Box>
}
sx={{
backgroundColor: layout?.backgroundColor || "#333",
color: layout?.color || "#fff",
fontSize: layout?.fontSize || "14px",
display: "block",
textAlign: layout?.textAlign || "left",
}}
/>
</Snackbar>
);
};
Loading