refactor: use global instances of modal, message

Author: raheeliftikhar5

client/packages/lowcoder-design/src/components/CustomModal.tsx

@@ -8,6 +8,7 @@ import Draggable from "react-draggable";
 import { DarkActiveTextColor, GreyTextColor } from "constants/style";
 import { CloseIcon, ErrorIcon, SuccessIcon, WarningIcon, WarningWhiteIcon } from "icons";
 import { trans } from "i18n/design";
+import { modalInstance } from "components/GlobalInstances";
 
 type ModalWrapperProps = {
   width?: string | number;
@@ -108,6 +109,7 @@ export const ModalFooterWrapper = styled.div`
   }
 `;
 
+
 function ModalHeader(props: {
   title?: React.ReactNode;
   onCancel?: (e: React.MouseEvent<HTMLElement>) => void;
@@ -242,6 +244,7 @@ function CustomModalRender(props: CustomModalProps & ModalFuncProps) {
 /**
  * an antd modal capsulation
  */
+
 function CustomModal(props: CustomModalProps) {
   return (
     <AntdModal
@@ -272,6 +275,7 @@ CustomModal.confirm = (props: {
   type?: "info" | "warn" | "error" | "success";
   width?: number | string;
 }): any => {
+
   const defaultConfirmProps: ModalFuncProps = {
     ...DEFAULT_PROPS,
     okText: trans("ok"),
@@ -285,7 +289,7 @@ CustomModal.confirm = (props: {
     },
   };
   // create model
-  const model = AntdModal.confirm({
+  const model = modalInstance.confirm({
     width: "fit-content",
     style: props.style,
     centered: true,

client/packages/lowcoder-design/src/components/copyTextButton.tsx

@@ -1,9 +1,9 @@
 import copy from "copy-to-clipboard";
 import styled from "styled-components";
 import { ReactComponent as Dcopy } from "icons/icon-copy.svg";
-import { message } from "antd";
 import { trans } from "i18n/design";
 import { CSSProperties } from "react";
+import { messageInstance } from "./GlobalInstances";
 
 const Copy = styled(Dcopy)`
   flex-shrink: 0;
@@ -26,10 +26,10 @@ export function CopyTextButton(props: { text: string; style?: CSSProperties }) {
       onClick={(e) => {
         e.stopPropagation();
         if (props.text) {
-          message.success(trans("notification.copySuccess"));
+          messageInstance.success(trans("notification.copySuccess"));
           return copy(props.text);
         }
-        message.error(trans("notification.copyFail"));
+        messageInstance.error(trans("notification.copyFail"));
         return;
       }}
     />

client/packages/lowcoder/src/api/apiUtils.ts

@@ -10,11 +10,11 @@ import {
 import { AUTH_BIND_URL, OAUTH_REDIRECT } from "constants/routesURL";
 import log from "loglevel";
 import history from "util/history";
-import { message } from "antd";
 import axios, { AxiosError, AxiosRequestConfig, AxiosResponse } from "axios";
 import { trans } from "i18n";
 import StoreRegistry from "redux/store/storeRegistry";
 import { logoutAction } from "redux/reduxActions/userActions";
+import { messageInstance } from "lowcoder-design";
 
 const executeActionRegex = /query\/execute/;
 const timeoutErrorRegex = /timeout of (\d+)ms exceeded/;
@@ -146,8 +146,8 @@ export const apiFailureResponseInterceptor = (error: any) => {
         error.response?.data?.code === SERVER_ERROR_CODES.CURRENT_EDITION_NOT_SUPPORT_THIS_FEATURE
       ) {
         const errMsg = error.response.data?.message ?? trans("apiMessage.functionNotSupported");
-        message.destroy();
-        message.error(errMsg);
+        messageInstance.destroy();
+        messageInstance.error(errMsg);
         return Promise.reject({ message: errMsg });
       }
 

client/packages/lowcoder/src/base/codeEditor/extensions.tsx

@@ -56,7 +56,6 @@ import { SQLCompletionSource } from "./completion/sqlCompletionSource";
 import { getFormatter } from "./autoFormat";
 import { CodeType } from "lowcoder-core";
 import { CompletionSource } from "./completion/completion";
-import { message } from "antd";
 import { CodeEditorTooltipContainer } from "./codeEditor";
 import { libNames } from "constants/libConstants";
 import { QueryContext } from "../../util/context/QueryContext";
@@ -65,6 +64,7 @@ import { highlightJsTheme, useHighlightJsExtension } from "./extensions/highligh
 import { trans } from "i18n";
 import log from "loglevel";
 import { highlightSyntaxExtension } from "./extensions/highlightSyntax";
+import { messageInstance } from "lowcoder-design";
 
 // reference: https://github.com/codemirror/basic-setup/blob/main/src/codemirror.ts
 const basicSetup = [
@@ -392,10 +392,10 @@ export function languageExtension(language?: Language, codeType?: CodeType): Ext
               }
             })
             .catch((e) => {
-              message.error(e instanceof Error ? e.message : e);
+              messageInstance.error(e instanceof Error ? e.message : e);
             });
         } else {
-          message.warn(trans("codeEditor.notSupportAutoFormat"));
+          messageInstance.warning(trans("codeEditor.notSupportAutoFormat"));
         }
         return true;
       },

client/packages/lowcoder/src/components/JSLibraryModal.tsx

@@ -5,7 +5,7 @@ import { trans } from "i18n";
 import { DocLink } from "components/ExternalLink";
 import { Input } from "components/Input";
 import { TacoButton } from "components/button";
-import { message, Spin } from "antd";
+import { Spin } from "antd";
 import { useDispatch, useSelector } from "react-redux";
 import { recommendJSLibrarySelector } from "redux/selectors/jsLibrarySelector";
 import { JSLibraryInfo, JSLibraryLabel } from "components/JSLibraryTree";
@@ -22,6 +22,7 @@ import { LoadingOutlined } from "@ant-design/icons";
 import { RecommendedJSLibraryMeta } from "api/jsLibraryApi";
 import log from "loglevel";
 import { TacoMarkDown } from "components/markdown";
+import { messageInstance } from "lowcoder-design";
 
 const ModalLabel = styled.div`
   display: flex;
@@ -81,7 +82,7 @@ const handleDownload = (
     .onLoad(trimUrl)
     .then(() => {
       props.onSuccess(trimUrl);
-      message.success(trans("preLoad.jsLibraryInstallSuccess"));
+      messageInstance.success(trans("preLoad.jsLibraryInstallSuccess"));
     })
     .catch((e) => {
       if (props.runInHost) {
@@ -251,7 +252,7 @@ export function JSLibraryModal(props: JSLibraryModalProps) {
       </div>
       <CustomModal
         draggable
-        visible={visible}
+        open={visible}
         title={
           <ModalLabel>
             {trans("preLoad.jsLibrary")}

client/packages/lowcoder/src/components/PermissionDialog/AppPermissionDialog.tsx

@@ -17,7 +17,6 @@ import { PermissionItemsType } from "./PermissionList";
 import { trans } from "../../i18n";
 import ApplicationApi from "../../api/applicationApi";
 import { validateResponse } from "../../api/apiUtils";
-import { message } from "antd";
 import { PermissionDialog } from "./PermissionDialog";
 import { TacoSwitch } from "components/Switch";
 import styled from "styled-components";
@@ -29,6 +28,7 @@ import copy from "copy-to-clipboard";
 import { StyledLoading } from "./commonComponents";
 import { PermissionRole } from "./Permission";
 import { SHARE_TITLE } from "../../constants/apiConstants";
+import { messageInstance } from "lowcoder-design";
 
 export const AppPermissionDialog = (props: {
   applicationId: string;
@@ -125,7 +125,7 @@ export const AppPermissionDialog = (props: {
             }
           })
           .catch((e) => {
-            message.error(trans("home.addPermissionErrorMessage", { message: e.message }));
+            messageInstance.error(trans("home.addPermissionErrorMessage", { message: e.message }));
           })
       }
       updatePermission={(permissionId, role) =>
@@ -171,9 +171,9 @@ const AppInviteView = (props: { appId: string }) => {
           buttonType="primary"
           onClick={() => {
             if (copy(inviteLink)) {
-              message.success(trans("copySuccess"));
+              messageInstance.success(trans("copySuccess"));
             } else {
-              message.error(trans("copyError"));
+              messageInstance.error(trans("copyError"));
             }
           }}
         >
@@ -214,7 +214,7 @@ function AppShareView(props: {
                 dispatch(updateAppPermissionInfo({ publicToAll: checked }));
               })
               .catch((e) => {
-                message.error(e.message);
+                messageInstance.error(e.message);
               });
           }}
           label={isModule ? trans("home.modulePublicMessage") : trans("home.appPublicMessage")}

client/packages/lowcoder/src/comps/comps/fileComp/fileComp.tsx

@@ -1,4 +1,4 @@
-import { Button, message, Upload as AntdUpload } from "antd";
+import { Button, Upload as AntdUpload } from "antd";
 import { UploadChangeParam } from "antd/lib/upload";
 import { UploadFile, UploadProps } from "antd/lib/upload/interface";
 import { Buffer } from "buffer";
@@ -38,6 +38,7 @@ import { changeEvent, eventHandlerControl } from "../../controls/eventHandlerCon
 import { stateComp, UICompBuilder, withDefault } from "../../generators";
 import { CommonNameConfig, NameConfig, withExposingConfigs } from "../../generators/withExposing";
 import { formDataChildren, FormDataPropertyView } from "../formComp/formDataConstants";
+import { messageInstance } from "lowcoder-design";
 
 const FileSizeControl = codeControl((value) => {
   if (typeof value === "number") {
@@ -248,15 +249,15 @@ const Upload = (
       fileList={fileList}
       beforeUpload={(file) => {
         if (!file.size || file.size <= 0) {
-          message.error(`${file.name} ` + trans("file.fileEmptyErrorMsg"));
+          messageInstance.error(`${file.name} ` + trans("file.fileEmptyErrorMsg"));
           return AntdUpload.LIST_IGNORE;
         }
 
         if (
           (!!props.minSize && file.size < props.minSize) ||
           (!!props.maxSize && file.size > props.maxSize)
         ) {
-          message.error(`${file.name} ` + trans("file.fileSizeExceedErrorMsg"));
+          messageInstance.error(`${file.name} ` + trans("file.fileSizeExceedErrorMsg"));
           return AntdUpload.LIST_IGNORE;
         }
         return true;

client/packages/lowcoder/src/comps/comps/formComp/createForm.tsx

@@ -1,4 +1,4 @@
-import { Form, FormInstance, message, Select } from "antd";
+import { Form, FormInstance, Select } from "antd";
 import {
   CheckBox,
   CustomModal,
@@ -26,6 +26,7 @@ import { trans } from "i18n";
 import log from "loglevel";
 import { Datasource } from "@lowcoder-ee/constants/datasourceConstants";
 import DataSourceIcon from "components/DataSourceIcon";
+import { messageInstance } from "lowcoder-design";
 
 const OpenDialogButton = styled.span`
   :hover {
@@ -384,14 +385,14 @@ function onClick(
     .then((data: FormData) => {
       return onSubmit(data, dataSourceTypeConfig, items, onCreate, (error) => {
         if (error) {
-          message.error(error);
+          messageInstance.error(error);
         } else {
-          message.success(trans("formComp.success"));
+          messageInstance.success(trans("formComp.success"));
         }
       });
     })
     .catch((e) => {
-      message.error(JSON.stringify(e));
+      messageInstance.error(JSON.stringify(e));
     });
 }
 
@@ -661,7 +662,7 @@ export const CreateForm = (props: { onCreate: CreateHandler }) => {
         onClick={(e) => e.stopPropagation()}
       >
         <CustomModal
-          visible={visible}
+          open={visible}
           destroyOnClose={true}
           title={trans("formComp.generateForm")}
           footer={null}

client/packages/lowcoder/src/comps/comps/formComp/formComp.tsx

@@ -40,7 +40,7 @@ import {
 import { TriContainer } from "../triContainerComp/triContainer";
 import { traverseCompTree } from "../containerBase/utils";
 import { IForm } from "./formDataConstants";
-import { message, Spin } from "antd";
+import { Spin } from "antd";
 import { BoolControl } from "comps/controls/boolControl";
 import { BottomResTypeEnum } from "types/bottomRes";
 import { BoolCodeControl, JSONObjectControl } from "comps/controls/codeControl";
@@ -56,6 +56,7 @@ import { trans } from "i18n";
 import log from "loglevel";
 import { DisabledContext } from "comps/generators/uiCompBuilder";
 import { LoadingOutlined } from "@ant-design/icons";
+import { messageInstance } from "lowcoder-design";
 
 const eventOptions = [submitEvent] as const;
 
@@ -290,7 +291,7 @@ let FormTmpComp = class extends FormBaseComp implements IForm {
         return Promise.resolve();
       });
     } else {
-      message.error(trans("formComp.notValidForm"));
+      messageInstance.error(trans("formComp.notValidForm"));
       return Promise.reject("formComp.notValidForm");
     }
   }

client/packages/lowcoder/src/comps/comps/moduleContainerComp/moduleEventListComp.tsx

@@ -1,4 +1,3 @@
-import { message } from "antd";
 import { EmptyContent } from "components/EmptyContent";
 import { KeyValueItem, KeyValueItemListWithNewCreateState } from "components/KeyValueItemList";
 import { StringControl } from "comps/controls/codeControl";
@@ -11,6 +10,7 @@ import { controlItem, Section, Switch, SwitchWrapper } from "lowcoder-design";
 import { trans } from "i18n";
 import { ModuleEventListItemComp } from "./moduleEventListItemComp";
 import { ConfigViewSection } from "./styled";
+import { messageInstance } from "lowcoder-design";
 
 const ModuleEventListComp = list(ModuleEventListItemComp);
 
@@ -26,7 +26,7 @@ export class ModuleEventComp extends simpleMultiComp({
 
   trigger(name: string) {
     if (this.children.enableEventTestMessage.getView()) {
-      message.success(trans("module.eventTriggered", { name: name }));
+      messageInstance.success(trans("module.eventTriggered", { name: name }));
     }
   }