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

Add toast notifications & loading message type. #721

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
FalkWolsky merged 11 commits into lowcoder-org:dev from sudoischenny:main
Feb 28, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
11 commits
Select commit Hold shift + click to select a range
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 7 additions & 0 deletions .vscode/settings.json
View file Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
{
"workbench.colorCustomizations": {
"activityBar.background": "#2A3012",
"titleBar.activeBackground": "#3B431A",
"titleBar.activeForeground": "#F9FAF2"
}
}
2 changes: 2 additions & 0 deletions client/packages/lowcoder/src/comps/hooks/hookComp.tsx
View file Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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";
Expand Down Expand Up @@ -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,
Expand Down
2 changes: 2 additions & 0 deletions client/packages/lowcoder/src/comps/hooks/hookCompTypes.tsx
View file Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,7 @@ const AllHookComp = [
"momentJsLib",
"utils",
"message",
"toast",
"localStorage",
"currentUser",
"screenInfo",
Expand Down Expand Up @@ -58,6 +59,7 @@ const HookCompConfig: Record<
},
utils: { category: "hide" },
message: { category: "hide" },
toast: { category: "hide" },
};

// Get hook component category
Expand Down
1 change: 1 addition & 0 deletions client/packages/lowcoder/src/comps/hooks/hookListComp.tsx
View file Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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" },
Expand Down
8 changes: 7 additions & 1 deletion client/packages/lowcoder/src/comps/hooks/messageComp.ts
View file Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand All @@ -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) => {
Expand Down
95 changes: 95 additions & 0 deletions client/packages/lowcoder/src/comps/hooks/toastComp.ts
View file Open in desktop
Original file line number Diff line number Diff line change
@@ -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");
},
},
]);


8 changes: 8 additions & 0 deletions client/packages/lowcoder/src/i18n/locales/de.ts
View file Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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"
},
Expand Down
9 changes: 9 additions & 0 deletions client/packages/lowcoder/src/i18n/locales/en.ts
View file Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand Down
8 changes: 8 additions & 0 deletions client/packages/lowcoder/src/i18n/locales/zh.ts
View file Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1686,6 +1686,14 @@ utilsComp: {
},
messageComp: {
info: "发送通知",
loading: "发送加载通知",
success: "发送成功通知",
warn: "发送警告通知",
error: "发送错误通知",
},
toastComp: {
info: "发送通知",
loading: "发送加载通知",
success: "发送成功通知",
warn: "发送警告通知",
error: "发送错误通知",
Expand Down
Binary file added docs/.gitbook/assets/builtin-js-toasts.png
View file Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
[フレーム]
43 changes: 35 additions & 8 deletions docs/build-apps/write-javascript/built-in-javascript-functions.md
View file Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -109,18 +109,45 @@ 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. 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", dismissible?: boolean = true } )
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", dismissible?: boolean = true } )
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", dismissible?: boolean = true } )
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", dismissible?: boolean = true } )
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", dismissible?: boolean = true } )
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>

## 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`.
Expand Down

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