Added toast.destroy()

Destroys a previous toast based on assigned id.
lowcoder-org · FalkWolsky · Feb 28, 2024 · Feb 26, 2024 · Feb 27, 2024 · Feb 27, 2024
commit 3708c3052158ff087a1f95f179b55ceb6fcfb9ae
diff --git a/client/packages/lowcoder/src/comps/hooks/toastComp.ts b/client/packages/lowcoder/src/comps/hooks/toastComp.ts
@@ -37,36 +37,27 @@ const showNotification = (
   text && notificationInstance[level](notificationArgs);
 };
 
+const destroy = (
+  params: EvalParamType[]
+) => {
+  // Extract the id from the params
+  const id = params[0] as React.Key;
+
+  // Call notificationInstance.destroy with the provided id
+  notificationInstance.destroy(id);
+};
+
 //what we would like to expose: title, text, duration, id, btn-obj, onClose, placement
 
 const ToastCompBase = simpleMultiComp({});
 
 export let ToastComp = withExposingConfigs(ToastCompBase, []);
 
-/*
-export declare const NotificationPlacements: readonly ["top", "topLeft", "topRight", "bottom", "bottomLeft", "bottomRight"];
-export type NotificationPlacement = (typeof NotificationPlacements)[number];
-export type IconType = 'success' | 'info' | 'error' | 'warning';
-export interface ArgsProps {
-    message: React.ReactNode;
-    description?: React.ReactNode;
-    btn?: React.ReactNode;
-    key?: React.Key;
-    onClose?: () => void;
-    duration?: number | null;
-    icon?: React.ReactNode;
-    placement?: NotificationPlacement;
-    style?: React.CSSProperties;
-    className?: string;
-    readonly type?: IconType;
-    onClick?: () => void;
-    closeIcon?: React.ReactNode;
-    props?: DivProps;
-    role?: 'alert' | 'status';
-}
-*/
-
 ToastComp = withMethodExposing(ToastComp, [
+  {
+    method: { name: "destroy", description: trans("toastComp.destroy"), params: params },
+    execute: (comp, params) => destroy(params),
+  },
   {
     method: { name: "open", description: trans("toastComp.info"), params: params },
     execute: (comp, params) => {

diff --git a/client/packages/lowcoder/src/i18n/locales/en.ts b/client/packages/lowcoder/src/i18n/locales/en.ts
@@ -1781,6 +1781,7 @@ export const en = {
     "error": "Send an Error Notification"
   },
   "toastComp": {
+    "destroy": "close a Notification",
     "info": "Send a Notification",
     "loading": "Send a Loading Notification",
     "success": "Send a Success Notification",

diff --git a/docs/build-apps/write-javascript/built-in-javascript-functions.md b/docs/build-apps/write-javascript/built-in-javascript-functions.md
@@ -127,7 +127,9 @@ message.error("Query runs with error", { duration: 10 })
 
 Use `toast` methods to send a notification, which displays at the top of the screen and lasts for 3 seconds by default. Each of the following five methods supports a unique display style. After 3 toasts they will be stacked.
 
-The id field can be used to update previous toasts.
+The id field can be used to update previous toasts. Or used to destroy the previous toast.
+
+Destroy function used without an id will remove all toast.
 
 ```javascript
 // toast.open( title: string, options?: { message?: string, duration?: number = 3, id?: string, placement?: "top" | "topLeft" | "topRight" | "bottom" | "bottomRight", "bottomRight" = "bottomRight" } )
@@ -140,6 +142,8 @@ toast.success("Query runs successfully", { duration: 10 })
 toast.warn("Duplicate Action", {message: "The email was previously sent on Jan 3rd. Click the button again to send.", duration: 5})
 // toast.error( title: string, options?: { message?: string, duration?: number = 3, id?: string, placement?: "top" | "topLeft" | "topRight" | "bottom" | "bottomRight", "bottomRight" = "bottomRight" } )
 toast.error("Your credentials were invalid", {message: "You have 5 tries left", duration: 5})
+//toast.destroy(id?: string)
+toast.destroy()
 ```
 
 <figure><img src="../../.gitbook/assets/builtin-js-toasts.png" alt=""><figcaption></figcaption></figure>