Toasts Notification & Loading Mesages

Added a built in function called toast for longer notifications.

Also added message.loading()

Please see docs\build-apps\write-javascript\built-in-javascript-functions.md

Author: sudoischenny

client/packages/lowcoder/src/comps/hooks/hookComp.tsx

@@ -29,6 +29,7 @@ import { useInterval, useTitle, useWindowSize } from "react-use";
 import { useCurrentUser } from "util/currentUser";
 import { LocalStorageComp } from "./localStorageComp";
 import { MessageComp } from "./messageComp";
+import { ToastComp } from "./toastComp";
 import { ThemeComp } from "./themeComp";
 import UrlParamsHookComp from "./UrlParamsHookComp";
 import { UtilsComp } from "./utilsComp";
@@ -94,6 +95,7 @@ const HookMap: HookCompMapRawType = {
   momentJsLib: DayJsLib, // old components use this hook
   utils: UtilsComp,
   message: MessageComp,
+  toast: ToastComp,
   localStorage: LocalStorageComp,
   modal: ModalComp,
   meeting: VideoMeetingControllerComp,

client/packages/lowcoder/src/comps/hooks/hookCompTypes.tsx

@@ -12,6 +12,7 @@ const AllHookComp = [
   "momentJsLib",
   "utils",
   "message",
+  "toast",
   "localStorage",
   "currentUser",
   "screenInfo",
@@ -58,6 +59,7 @@ const HookCompConfig: Record<
   },
   utils: { category: "hide" },
   message: { category: "hide" },
+  toast: { category: "hide" },
 };
 
 // Get hook component category

client/packages/lowcoder/src/comps/hooks/hookListComp.tsx

@@ -19,6 +19,7 @@ const defaultHookListValue = [
   { compType: "lodashJsLib", name: "_" },
   { compType: "utils", name: "utils" },
   { compType: "message", name: "message" },
+  { compType: "toast", name: "toast" },
   { compType: "localStorage", name: "localStorage" },
   { compType: "currentUser", name: "currentUser" },
   { compType: "screenInfo", name: "screenInfo" },

client/packages/lowcoder/src/comps/hooks/messageComp.ts

@@ -11,7 +11,7 @@ const params: ParamsConfig = [
   { name: "options", type: "JSON" },
 ];
 
-const showMessage = (params: EvalParamType[], level: "info" | "success" | "warning" | "error") => {
+const showMessage = (params: EvalParamType[], level: "info" | "success" | "loading" | "warning" | "error") => {
   const text = params?.[0];
   const options = params?.[1] as JSONObject;
   const duration = options?.["duration"] ?? 3;
@@ -35,6 +35,12 @@ MessageComp = withMethodExposing(MessageComp, [
       showMessage(params, "success");
     },
   },
+  {
+    method: { name: "loading", description: trans("messageComp.loading"), params: params },
+    execute: (comp, params) => {
+      showMessage(params, "loading");
+    },
+  },
   {
     method: { name: "warn", description: trans("messageComp.warn"), params: params },
     execute: (comp, params) => {

client/packages/lowcoder/src/comps/hooks/toastComp.ts

@@ -0,0 +1,102 @@
+import { withMethodExposing } from "../generators/withMethodExposing";
+import { simpleMultiComp } from "../generators";
+import { withExposingConfigs } from "../generators/withExposing";
+import { EvalParamType, ParamsConfig } from "../controls/actionSelector/executeCompTypes";
+import { JSONObject } from "../../util/jsonTypes";
+import { trans } from "i18n";
+import { notificationInstance } from "lowcoder-design";
+import type { ArgsProps, NotificationPlacement } from 'antd/es/notification/interface';
+
+const params: ParamsConfig = [
+  { name: "text", type: "string" },
+  { name: "options", type: "JSON" },
+];
+
+const showNotification = (
+  params: EvalParamType[], 
+  level: "open" | "info" | "success" | "warning" | "error"
+) => {
+  const text = params?.[0] as string;
+  const options = params?.[1] as JSONObject;
+
+  const { message , duration, id, placement } = options;
+
+  // Convert duration to a number or null, if it's not a valid number, default to null
+  const durationNumberOrNull: number | null = typeof duration === 'number' ? duration : null;
+
+  const notificationArgs: ArgsProps = {
+    message: text,
+    description: message as React.ReactNode,
+    duration: durationNumberOrNull ?? 3,
+    key: id as React.Key, // Ensure id is a valid React.Key
+    placement: placement as NotificationPlacement ?? "bottomRight", // Ensure placement is a valid NotificationPlacement or undefined
+  };
+
+  // Use notificationArgs to trigger the notification
+
+  text && notificationInstance[level](notificationArgs);
+};
+
+//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: "open", description: trans("toastComp.info"), params: params },
+    execute: (comp, params) => {
+      showNotification(params, "open");
+    },
+  },
+  {
+    method: { name: "info", description: trans("toastComp.info"), params: params },
+    execute: (comp, params) => {
+      showNotification(params, "info");
+    },
+  },
+  {
+    method: { name: "success", description: trans("toastComp.success"), params: params },
+    execute: (comp, params) => {
+      showNotification(params, "success");
+    },
+  },
+  {
+    method: { name: "warn", description: trans("toastComp.warn"), params: params },
+    execute: (comp, params) => {
+      showNotification(params, "warning");
+    },
+  },
+  {
+    method: { name: "error", description: trans("toastComp.error"), params: params },
+    execute: (comp, params) => {
+      showNotification(params, "error");
+    },
+  },
+]);
+
+

client/packages/lowcoder/src/i18n/locales/de.ts

@@ -1612,10 +1612,18 @@ export const de = {
   },
   "messageComp": {
       "info": "Eine Benachrichtigung senden",
+      "loading": "Ladebestätigung senden",
       "success": "Erfolgsbenachrichtigung senden",
       "warn": "Eine Warnmeldung senden",
       "error": "Eine Fehlerbenachrichtigung senden"
   },
+  "tostComp": {
+    "info": "Eine Benachrichtigung senden",
+    "loading": "Ladebestätigung senden",
+    "success": "Erfolgsbenachrichtigung senden",
+    "warn": "Eine Warnmeldung senden",
+    "error": "Eine Fehlerbenachrichtigung senden"
+},
   "themeComp": {
       "switchTo": "Thema wechseln"
   },

client/packages/lowcoder/src/i18n/locales/en.ts

@@ -1775,6 +1775,14 @@ export const en = {
   },
   "messageComp": {
     "info": "Send a Notification",
+    "loading": "Send a Loading Notification",
+    "success": "Send a Success Notification",
+    "warn": "Send a Warning Notification",
+    "error": "Send an Error Notification"
+  },
+  "toastComp": {
+    "info": "Send a Notification",
+    "loading": "Send a Loading Notification",
     "success": "Send a Success Notification",
     "warn": "Send a Warning Notification",
     "error": "Send an Error Notification"

client/packages/lowcoder/src/i18n/locales/zh.ts

@@ -1683,6 +1683,14 @@ utilsComp: {
 },
 messageComp: {
     info: "发送通知",
+    loading: "发送加载通知",
+    success: "发送成功通知",
+    warn: "发送警告通知",
+    error: "发送错误通知",
+},
+toastComp: {
+    info: "发送通知",
+    loading: "发送加载通知",
     success: "发送成功通知",
     warn: "发送警告通知",
     error: "发送错误通知",

docs/.gitbook/assets/builtin-js-toasts.png

@@ -109,18 +109,41 @@ utils.copyToClipboard( input1.value )
 Use `message` methods to send a global alert notification, which displays at the top of the screen and lasts for 3 seconds by default. Each of the following four methods supports a unique display style.
 
 ```javascript
-// messageInstance.info( text: string, options?: {duration: number = 3 } )
-messageInstance.info("Please confirm your information", { duration: 10 })
-// messageInstance.success( text: string, options?: {duration: number = 3 } )
-messageInstance.success("Query runs successfully", { duration: 10 })
-// messageInstance.warning( text: string, options?: {duration: number = 3 } )
-messageInstance.warning("Warning", { duration: 10 })
-// messageInstance.error( text: string, options?: {duration: number = 3 } )
-messageInstance.error("Query runs with error", { duration: 10 })
+// message.info( text: string, options?: {duration: number = 3 } )
+message.info("Please confirm your information", { duration: 10 })
+// message.loading( text: string, options?: {duration: number = 3 } )
+message.loading("Query is running", { duration: 5 })
+// message.success( text: string, options?: {duration: number = 3 } )
+message.success("Query runs successfully", { duration: 10 })
+// message.warning( text: string, options?: {duration: number = 3 } )
+message.warning("Warning", { duration: 10 })
+// message.error( text: string, options?: {duration: number = 3 } )
+message.error("Query runs with error", { duration: 10 })
 ```
 
 <figure><img src="../../.gitbook/assets/builtin-js-messages.png" alt=""><figcaption></figcaption></figure>
 
+## toast - dismissible stack-able notifications
+
+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.
+
+```javascript
+// toast.open( title: string, options?: { message?: string, duration?: number = 3, id?: string, placement?: "top" | "topLeft" | "topRight" | "bottom" | "bottomRight", "bottomRight" = "bottomRight" } )
+toast.open("This Is a Notification", {message: "I do not go away automatically.", duration: 0})
+// toast.info( title: string, options?: { message?: string, duration?: number = 3, id?: string, placement?: "top" | "topLeft" | "topRight" | "bottom" | "bottomRight", "bottomRight" = "bottomRight" } )
+toast.info("Order #1519", {message: "Shipped out on Tuesday, Jan 3rd.", duration: 5})
+// toast.success( title: string, options?: { message?: string, duration?: number = 3, id?: string, placement?: "top" | "topLeft" | "topRight" | "bottom" | "bottomRight", "bottomRight" = "bottomRight" } )
+toast.success("Query runs successfully", { duration: 10 })
+// toast.warn( title: string, options?: { message?: string, duration?: number = 3, id?: string, placement?: "top" | "topLeft" | "topRight" | "bottom" | "bottomRight", "bottomRight" = "bottomRight" } )
+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})
+```
+
+<figure><img src="../../.gitbook/assets/builtin-js-toasts.png" alt=""><figcaption></figcaption></figure>
+
 ## localStorage
 
 Use `localStorage` methods to store and manage key-value pair data locally, which is not reset when the app refreshes, and can be accessed in any app within the workspace using `localStorage.values`.