Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit 8e9ab45

Browse files
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
1 parent 966fa27 commit 8e9ab45

File tree

10 files changed

+169
-9
lines changed

10 files changed

+169
-9
lines changed

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

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -29,6 +29,7 @@ import { useInterval, useTitle, useWindowSize } from "react-use";
2929
import { useCurrentUser } from "util/currentUser";
3030
import { LocalStorageComp } from "./localStorageComp";
3131
import { MessageComp } from "./messageComp";
32+
import { ToastComp } from "./toastComp";
3233
import { ThemeComp } from "./themeComp";
3334
import UrlParamsHookComp from "./UrlParamsHookComp";
3435
import { UtilsComp } from "./utilsComp";
@@ -94,6 +95,7 @@ const HookMap: HookCompMapRawType = {
9495
momentJsLib: DayJsLib, // old components use this hook
9596
utils: UtilsComp,
9697
message: MessageComp,
98+
toast: ToastComp,
9799
localStorage: LocalStorageComp,
98100
modal: ModalComp,
99101
meeting: VideoMeetingControllerComp,

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

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@ const AllHookComp = [
1212
"momentJsLib",
1313
"utils",
1414
"message",
15+
"toast",
1516
"localStorage",
1617
"currentUser",
1718
"screenInfo",
@@ -58,6 +59,7 @@ const HookCompConfig: Record<
5859
},
5960
utils: { category: "hide" },
6061
message: { category: "hide" },
62+
toast: { category: "hide" },
6163
};
6264

6365
// Get hook component category

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,7 @@ const defaultHookListValue = [
1919
{ compType: "lodashJsLib", name: "_" },
2020
{ compType: "utils", name: "utils" },
2121
{ compType: "message", name: "message" },
22+
{ compType: "toast", name: "toast" },
2223
{ compType: "localStorage", name: "localStorage" },
2324
{ compType: "currentUser", name: "currentUser" },
2425
{ compType: "screenInfo", name: "screenInfo" },

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

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@ const params: ParamsConfig = [
1111
{ name: "options", type: "JSON" },
1212
];
1313

14-
const showMessage = (params: EvalParamType[], level: "info" | "success" | "warning" | "error") => {
14+
const showMessage = (params: EvalParamType[], level: "info" | "success" | "loading"|"warning" | "error") => {
1515
const text = params?.[0];
1616
const options = params?.[1] as JSONObject;
1717
const duration = options?.["duration"] ?? 3;
@@ -35,6 +35,12 @@ MessageComp = withMethodExposing(MessageComp, [
3535
showMessage(params, "success");
3636
},
3737
},
38+
{
39+
method: { name: "loading", description: trans("messageComp.loading"), params: params },
40+
execute: (comp, params) => {
41+
showMessage(params, "loading");
42+
},
43+
},
3844
{
3945
method: { name: "warn", description: trans("messageComp.warn"), params: params },
4046
execute: (comp, params) => {
Lines changed: 102 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,102 @@
1+
import { withMethodExposing } from "../generators/withMethodExposing";
2+
import { simpleMultiComp } from "../generators";
3+
import { withExposingConfigs } from "../generators/withExposing";
4+
import { EvalParamType, ParamsConfig } from "../controls/actionSelector/executeCompTypes";
5+
import { JSONObject } from "../../util/jsonTypes";
6+
import { trans } from "i18n";
7+
import { notificationInstance } from "lowcoder-design";
8+
import type { ArgsProps, NotificationPlacement } from 'antd/es/notification/interface';
9+
10+
const params: ParamsConfig = [
11+
{ name: "text", type: "string" },
12+
{ name: "options", type: "JSON" },
13+
];
14+
15+
const showNotification = (
16+
params: EvalParamType[],
17+
level: "open" | "info" | "success" | "warning" | "error"
18+
) => {
19+
const text = params?.[0] as string;
20+
const options = params?.[1] as JSONObject;
21+
22+
const { message , duration, id, placement } = options;
23+
24+
// Convert duration to a number or null, if it's not a valid number, default to null
25+
const durationNumberOrNull: number | null = typeof duration === 'number' ? duration : null;
26+
27+
const notificationArgs: ArgsProps = {
28+
message: text,
29+
description: message as React.ReactNode,
30+
duration: durationNumberOrNull ?? 3,
31+
key: id as React.Key, // Ensure id is a valid React.Key
32+
placement: placement as NotificationPlacement ?? "bottomRight", // Ensure placement is a valid NotificationPlacement or undefined
33+
};
34+
35+
// Use notificationArgs to trigger the notification
36+
37+
text && notificationInstance[level](notificationArgs);
38+
};
39+
40+
//what we would like to expose: title, text, duration, id, btn-obj, onClose, placement
41+
42+
const ToastCompBase = simpleMultiComp({});
43+
44+
export let ToastComp = withExposingConfigs(ToastCompBase, []);
45+
46+
/*
47+
export declare const NotificationPlacements: readonly ["top", "topLeft", "topRight", "bottom", "bottomLeft", "bottomRight"];
48+
export type NotificationPlacement = (typeof NotificationPlacements)[number];
49+
export type IconType = 'success' | 'info' | 'error' | 'warning';
50+
export interface ArgsProps {
51+
message: React.ReactNode;
52+
description?: React.ReactNode;
53+
btn?: React.ReactNode;
54+
key?: React.Key;
55+
onClose?: () => void;
56+
duration?: number | null;
57+
icon?: React.ReactNode;
58+
placement?: NotificationPlacement;
59+
style?: React.CSSProperties;
60+
className?: string;
61+
readonly type?: IconType;
62+
onClick?: () => void;
63+
closeIcon?: React.ReactNode;
64+
props?: DivProps;
65+
role?: 'alert' | 'status';
66+
}
67+
*/
68+
69+
ToastComp = withMethodExposing(ToastComp, [
70+
{
71+
method: { name: "open", description: trans("toastComp.info"), params: params },
72+
execute: (comp, params) => {
73+
showNotification(params, "open");
74+
},
75+
},
76+
{
77+
method: { name: "info", description: trans("toastComp.info"), params: params },
78+
execute: (comp, params) => {
79+
showNotification(params, "info");
80+
},
81+
},
82+
{
83+
method: { name: "success", description: trans("toastComp.success"), params: params },
84+
execute: (comp, params) => {
85+
showNotification(params, "success");
86+
},
87+
},
88+
{
89+
method: { name: "warn", description: trans("toastComp.warn"), params: params },
90+
execute: (comp, params) => {
91+
showNotification(params, "warning");
92+
},
93+
},
94+
{
95+
method: { name: "error", description: trans("toastComp.error"), params: params },
96+
execute: (comp, params) => {
97+
showNotification(params, "error");
98+
},
99+
},
100+
]);
101+
102+

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

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1612,10 +1612,18 @@ export const de = {
16121612
},
16131613
"messageComp": {
16141614
"info": "Eine Benachrichtigung senden",
1615+
"loading": "Ladebestätigung senden",
16151616
"success": "Erfolgsbenachrichtigung senden",
16161617
"warn": "Eine Warnmeldung senden",
16171618
"error": "Eine Fehlerbenachrichtigung senden"
16181619
},
1620+
"tostComp": {
1621+
"info": "Eine Benachrichtigung senden",
1622+
"loading": "Ladebestätigung senden",
1623+
"success": "Erfolgsbenachrichtigung senden",
1624+
"warn": "Eine Warnmeldung senden",
1625+
"error": "Eine Fehlerbenachrichtigung senden"
1626+
},
16191627
"themeComp": {
16201628
"switchTo": "Thema wechseln"
16211629
},

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

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1775,6 +1775,14 @@ export const en = {
17751775
},
17761776
"messageComp": {
17771777
"info": "Send a Notification",
1778+
"loading": "Send a Loading Notification",
1779+
"success": "Send a Success Notification",
1780+
"warn": "Send a Warning Notification",
1781+
"error": "Send an Error Notification"
1782+
},
1783+
"toastComp": {
1784+
"info": "Send a Notification",
1785+
"loading": "Send a Loading Notification",
17781786
"success": "Send a Success Notification",
17791787
"warn": "Send a Warning Notification",
17801788
"error": "Send an Error Notification"

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

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1683,6 +1683,14 @@ utilsComp: {
16831683
},
16841684
messageComp: {
16851685
info: "发送通知",
1686+
loading: "发送加载通知",
1687+
success: "发送成功通知",
1688+
warn: "发送警告通知",
1689+
error: "发送错误通知",
1690+
},
1691+
toastComp: {
1692+
info: "发送通知",
1693+
loading: "发送加载通知",
16861694
success: "发送成功通知",
16871695
warn: "发送警告通知",
16881696
error: "发送错误通知",
30.6 KB
Loading[フレーム]

‎docs/build-apps/write-javascript/built-in-javascript-functions.md‎

Lines changed: 31 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -109,18 +109,41 @@ utils.copyToClipboard( input1.value )
109109
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.
110110

111111
```javascript
112-
// messageInstance.info( text: string, options?: {duration: number = 3 } )
113-
messageInstance.info("Please confirm your information", { duration: 10 })
114-
// messageInstance.success( text: string, options?: {duration: number = 3 } )
115-
messageInstance.success("Query runs successfully", { duration: 10 })
116-
// messageInstance.warning( text: string, options?: {duration: number = 3 } )
117-
messageInstance.warning("Warning", { duration: 10 })
118-
// messageInstance.error( text: string, options?: {duration: number = 3 } )
119-
messageInstance.error("Query runs with error", { duration: 10 })
112+
// message.info( text: string, options?: {duration: number = 3 } )
113+
message.info("Please confirm your information", { duration: 10 })
114+
// message.loading( text: string, options?: {duration: number = 3 } )
115+
message.loading("Query is running", { duration: 5 })
116+
// message.success( text: string, options?: {duration: number = 3 } )
117+
message.success("Query runs successfully", { duration: 10 })
118+
// message.warning( text: string, options?: {duration: number = 3 } )
119+
message.warning("Warning", { duration: 10 })
120+
// message.error( text: string, options?: {duration: number = 3 } )
121+
message.error("Query runs with error", { duration: 10 })
120122
```
121123

122124
<figure><img src="../../.gitbook/assets/builtin-js-messages.png" alt=""><figcaption></figcaption></figure>
123125

126+
## toast - dismissible stack-able notifications
127+
128+
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.
129+
130+
The id field can be used to update previous toasts.
131+
132+
```javascript
133+
// toast.open( title: string, options?: { message?: string, duration?: number = 3, id?: string, placement?: "top" | "topLeft" | "topRight" | "bottom" | "bottomRight", "bottomRight" = "bottomRight" } )
134+
toast.open("This Is a Notification", {message: "I do not go away automatically.", duration: 0})
135+
// toast.info( title: string, options?: { message?: string, duration?: number = 3, id?: string, placement?: "top" | "topLeft" | "topRight" | "bottom" | "bottomRight", "bottomRight" = "bottomRight" } )
136+
toast.info("Order #1519", {message: "Shipped out on Tuesday, Jan 3rd.", duration: 5})
137+
// toast.success( title: string, options?: { message?: string, duration?: number = 3, id?: string, placement?: "top" | "topLeft" | "topRight" | "bottom" | "bottomRight", "bottomRight" = "bottomRight" } )
138+
toast.success("Query runs successfully", { duration: 10 })
139+
// toast.warn( title: string, options?: { message?: string, duration?: number = 3, id?: string, placement?: "top" | "topLeft" | "topRight" | "bottom" | "bottomRight", "bottomRight" = "bottomRight" } )
140+
toast.warn("Duplicate Action", {message: "The email was previously sent on Jan 3rd. Click the button again to send.", duration: 5})
141+
// toast.error( title: string, options?: { message?: string, duration?: number = 3, id?: string, placement?: "top" | "topLeft" | "topRight" | "bottom" | "bottomRight", "bottomRight" = "bottomRight" } )
142+
toast.error("Your credentials were invalid", {message: "You have 5 tries left", duration: 5})
143+
```
144+
145+
<figure><img src="../../.gitbook/assets/builtin-js-toasts.png" alt=""><figcaption></figcaption></figure>
146+
124147
## localStorage
125148

126149
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`.

0 commit comments

Comments
(0)

AltStyle によって変換されたページ (->オリジナル) /