feat: update toast api to account for duration and closable (#5427)

* feat: update toast api to account for duration and closable

* fix

* update snaps

* update docs

* male toast nullable

* fix snaps

* remove clearToast from App.tsx and replace clearToast prop in Toast comp with onClose

src/components/App.tsx

@@ -380,7 +380,7 @@ class App extends React.Component<AppProps, AppState> {
         getAppState: () => this.state,
         getFiles: () => this.files,
         refresh: this.refresh,
-        setToastMessage: this.setToastMessage,
+        setToast: this.setToast,
         id: this.id,
         setActiveTool: this.setActiveTool,
         setCursor: this.setCursor,
@@ -549,16 +549,12 @@ class App extends React.Component<AppProps, AppState> {
                 onLinkOpen={this.props.onLinkOpen}
               />
             )}
-            {this.state.toastMessage !== null && (
+            {this.state.toast !== null && (
               <Toast
-                message={this.state.toastMessage}
-                clearToast={this.clearToast}
-                duration={
-                  this.state.toastMessage === t("alerts.browserZoom")
-                    ? Infinity
-                    : undefined
-                }
-                closable={this.state.toastMessage === t("alerts.browserZoom")}
+                message={this.state.toast.message}
+                onClose={() => this.setToast(null)}
+                duration={this.state.toast.duration}
+                closable={this.state.toast.closable}
               />
             )}
             <main>{this.renderCanvas()}</main>
@@ -772,7 +768,7 @@ class App extends React.Component<AppProps, AppState> {
           ? { ...scene.appState.activeTool, type: "selection" }
           : scene.appState.activeTool,
       isLoading: false,
-      toastMessage: this.state.toastMessage || null,
+      toast: this.state.toast,
     };
     if (initialData?.scrollToContent) {
       scene.appState = {
@@ -931,9 +927,13 @@ class App extends React.Component<AppProps, AppState> {
         (window.outerWidth - scrollBarWidth) / window.innerWidth;
       const isBrowserZoomed = widthRatio < 0.75 || widthRatio > 1.1;
       if (isBrowserZoomed) {
-        this.setToastMessage(t("alerts.browserZoom"));
+        this.setToast({
+          message: t("alerts.browserZoom"),
+          closable: true,
+          duration: Infinity,
+        });
       } else {
-        this.clearToast();
+        this.setToast(null);
       }
     }
   };
@@ -1643,12 +1643,14 @@ class App extends React.Component<AppProps, AppState> {
     });
   };
 
-  clearToast = () => {
-    this.setState({ toastMessage: null });
-  };
-
-  setToastMessage = (toastMessage: string) => {
-    this.setState({ toastMessage });
+  setToast = (
+    toast: {
+      message: string;
+      closable?: boolean;
+      duration?: number;
+    } | null,
+  ) => {
+    this.setState({ toast });
   };
 
   restoreFileFromShare = async () => {

src/components/Toast.tsx

@@ -7,13 +7,13 @@ const DEFAULT_TOAST_TIMEOUT = 5000;
 
 export const Toast = ({
   message,
-  clearToast,
+  onClose,
   closable = false,
   // To prevent autoclose, pass duration as Infinity
   duration = DEFAULT_TOAST_TIMEOUT,
 }: {
   message: string;
-  clearToast: () => void;
+  onClose: () => void;
   closable?: boolean;
   duration?: number;
 }) => {
@@ -23,8 +23,8 @@ export const Toast = ({
     if (!shouldAutoClose) {
       return;
     }
-    timerRef.current = window.setTimeout(() => clearToast(), duration);
-  }, [clearToast, duration, shouldAutoClose]);
+    timerRef.current = window.setTimeout(() => onClose(), duration);
+  }, [onClose, duration, shouldAutoClose]);
 
   useEffect(() => {
     if (!shouldAutoClose) {
@@ -50,7 +50,7 @@ export const Toast = ({
           icon={close}
           aria-label="close"
           type="icon"
-          onClick={clearToast}
+          onClick={onClose}
           className="close"
         />
       )}