Merge pull request #721 from sudoischenny/main

Add toast notifications & loading message type.

Author: FalkWolsky

.vscode/settings.json

@@ -0,0 +1,7 @@
+{
+    "workbench.colorCustomizations": {
+        "activityBar.background": "#2A3012",
+        "titleBar.activeBackground": "#3B431A",
+        "titleBar.activeForeground": "#F9FAF2"
+    }
+}

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,95 @@
+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, dismissible } = options;
+
+  const closeIcon: boolean | undefined = dismissible === true ? undefined : (dismissible === false ? false : undefined);
+
+  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,
+    placement: placement as NotificationPlacement ?? "bottomRight",
+    closeIcon: closeIcon as boolean,
+  };
+
+  // Use notificationArgs to trigger the notification
+
+  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, []);
+
+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) => {
+      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

@@ -1615,10 +1615,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

@@ -1778,6 +1778,15 @@ 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": {
+    "destroy": "close a Notification",
+    "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

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