refactor: updated dropdown

Author: raheeliftikhar5

client/packages/lowcoder/src/comps/comps/buttonComp/dropdownComp.tsx

@@ -82,6 +82,7 @@ const DropdownTmpComp = (function () {
         icon: hasIcon && <span>{option.prefixIcon}</span>,
         onEvent: option.onEvent,
       }));
+
     const menu = (
       <Menu
         items={items}
@@ -93,15 +94,18 @@ const DropdownTmpComp = (function () {
       <ButtonCompWrapper disabled={props.disabled}>
         {console.log("props,", props)}
         {props.onlyMenu ? (
-          <Dropdown disabled={props.disabled} overlay={menu}>
+          <Dropdown
+            disabled={props.disabled}
+            dropdownRender={() => menu}
+          >
             <Button100 $buttonStyle={props.style} disabled={props.disabled}>
               {props.text || " " /* Avoid button disappearing */}
             </Button100>
           </Dropdown>
         ) : (
           <DropdownButton
             disabled={props.disabled}
-            overlay={menu}
+            dropdownRender={() => menu}
             onClick={() => props.onEvent("click")}
             buttonsRender={([left, right]) => [
               <LeftButtonWrapper $buttonStyle={props.style}>

client/packages/lowcoder/src/comps/comps/buttonComp/scannerComp.tsx

@@ -147,7 +147,7 @@ const ScannerTmpComp = (function () {
         <CustomModalStyled
           showOkButton={false}
           showCancelButton={false}
-          visible={showModal}
+          open={showModal}
           maskClosable={props.maskClosable}
           destroyOnClose
           onCancel={() => {
@@ -178,16 +178,16 @@ const ScannerTmpComp = (function () {
                   <Dropdown
                     placement="bottomRight"
                     trigger={["click"]}
-                    visible={dropdownShow}
-                    onVisibleChange={(value) => setDropdownShow(value)}
-                    overlay={
+                    open={dropdownShow}
+                    onOpenChange={(value) => setDropdownShow(value)}
+                    dropdownRender={() => (
                       <Menu
                         items={modeList}
                         onClick={(value) =>
                           setVideoConstraints({ ...videoConstraints, deviceId: value.key })
                         }
                       />
-                    }
+                    )}
                   >
                     <Button
                       style={{ float: "right", marginTop: "10px" }}

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

@@ -158,7 +158,10 @@ const NavCompBase = new UICompBuilder(childrenMap, (props) => {
             />
           );
           return (
-            <Dropdown key={idx} overlay={subMenu}>
+            <Dropdown
+              key={idx}
+              dropdownRender={() => subMenu}
+            >
               {item}
             </Dropdown>
           );

client/packages/lowcoder/src/comps/comps/tableComp/column/columnTypeComps/columnLinksComp.tsx

@@ -101,7 +101,10 @@ export const ColumnLinksComp = (function () {
               />
             ))}
           {menu && (
-            <Dropdown overlay={menu} trigger={["hover"]}>
+            <Dropdown
+              trigger={["hover"]}
+              dropdownRender={() => menu}
+            >
               <EllipsisOutlined onClick={(e) => e.preventDefault()} />
             </Dropdown>
           )}

client/packages/lowcoder/src/pages/ApplicationV2/CreateDropdown.tsx

@@ -150,7 +150,7 @@ function NavLayoutPickModal(props: {
   const { visible, setVisible, onCreate } = props;
   return (
     <CustomModal
-      visible={visible}
+      open={visible}
       footer={null}
       onCancel={() => setVisible(false)}
       title={trans("home.createNavigation")}
@@ -238,11 +238,11 @@ export const CreateDropdown = (props: { defaultVisible?: boolean; mode: HomeLayo
         setVisible={setLayoutPickerVisible}
       />
       <Dropdown
-        visible={createDropdownVisible || defaultVisible}
+        open={createDropdownVisible || defaultVisible}
         trigger={["hover"]}
         getPopupContainer={(node) => node}
-        onVisibleChange={() => setCreateDropdownVisible(!createDropdownVisible)}
-        overlay={
+        onOpenChange={() => setCreateDropdownVisible(!createDropdownVisible)}
+        dropdownRender={() => (
           <CreateDropdownMenu
             items={[
               getCreateMenuItem(HomeResTypeEnum.Application, mode),
@@ -265,7 +265,7 @@ export const CreateDropdown = (props: { defaultVisible?: boolean; mode: HomeLayo
                 : null,
             ]}
           />
-        }
+        )}
       >
         <CreateBtn buttonType={"primary"}>
           {isCreating ? trans("home.creating") : trans("newItem")}

client/packages/lowcoder/src/pages/common/header.tsx

@@ -1,4 +1,4 @@
-import { Dropdown, message, Skeleton } from "antd";
+import { Dropdown, Skeleton } from "antd";
 import LayoutHeader from "components/layout/Header";
 import { SHARE_TITLE } from "constants/apiConstants";
 import { AppTypeEnum } from "constants/applicationConstants";
@@ -17,7 +17,7 @@ import {
   TacoButton,
 } from "lowcoder-design";
 import { trans } from "i18n";
-import moment from "moment";
+import dayjs from "dayjs";
 import { useContext, useState } from "react";
 import { useDispatch, useSelector } from "react-redux";
 import { publishApplication, updateAppMetaAction } from "redux/reduxActions/applicationActions";
@@ -38,6 +38,7 @@ import { Logo, LogoHome, LogoWithName } from "@lowcoder-ee/assets/images";
 import { HeaderStartDropdown } from "./headerStartDropdown";
 import { AppPermissionDialog } from "../../components/PermissionDialog/AppPermissionDialog";
 import { getBrandingConfig } from "../../redux/selectors/configSelectors";
+import { messageInstance } from "lowcoder-design/src/components/GlobalInstances";
 
 const StyledLink = styled.a`
   display: flex;
@@ -301,7 +302,7 @@ export default function Header(props: HeaderProps) {
             editing={editing}
             onFinish={(value) => {
               if (!value.trim()) {
-                message.warn(trans("header.nameCheckMessage"));
+                messageInstance.warning(trans("header.nameCheckMessage"));
                 return;
               }
               dispatch(updateAppMetaAction({ applicationId: applicationId, name: value }));
@@ -342,7 +343,7 @@ export default function Header(props: HeaderProps) {
               CustomModal.confirm({
                 title: trans("header.recoverAppSnapshotTitle"),
                 content: trans("header.recoverAppSnapshotContent", {
-                  time: moment(selectedSnapshot.createTime).format("YYYY-MM-DD HH:mm"),
+                  time: dayjs(selectedSnapshot.createTime).format("YYYY-MM-DD HH:mm"),
                 }),
                 onConfirm: () => {
                   dispatch(
@@ -388,7 +389,7 @@ export default function Header(props: HeaderProps) {
         className="cypress-header-dropdown"
         placement="bottomRight"
         trigger={["click"]}
-        overlay={
+        dropdownRender={() => (
           <DropdownMenuStyled
             style={{ minWidth: "110px", borderRadius: "4px" }}
             onClick={(e) => {
@@ -409,7 +410,7 @@ export default function Header(props: HeaderProps) {
               },
             ]}
           />
-        }
+        )}
       >
         <PackUpBtn buttonType="primary">
           <PackUpIcon />

client/packages/lowcoder/src/pages/common/headerStartDropdown.tsx

@@ -1,4 +1,4 @@
-import { Dropdown, message } from "antd";
+import { Dropdown } from "antd";
 import { BASE_URL } from "constants/routesURL";
 import {
   CommonTextLabel,
@@ -22,6 +22,7 @@ import { AppTypeEnum } from "constants/applicationConstants";
 import { recycleApplication } from "redux/reduxActions/applicationActions";
 import { CopyModal } from "./copyModal";
 import { ExternalEditorContext } from "util/context/ExternalEditorContext";
+import { messageInstance } from "lowcoder-design/src/components/GlobalInstances";
 
 const PackUpIconStyled = styled(PackUpIcon)`
   transform: rotate(180deg);
@@ -81,7 +82,7 @@ export function HeaderStartDropdown(props: { setEdit: () => void }) {
         placement="bottomLeft"
         trigger={["click"]}
         disabled={showAppSnapshot}
-        overlay={
+        dropdownRender={() => (
           <DropdownMenuStyled
             style={{ minWidth: "136px", maxWidth: "288px", borderRadius: "4px" }}
             onClick={(e) => {
@@ -103,10 +104,10 @@ export function HeaderStartDropdown(props: { setEdit: () => void }) {
                       recycleApplication(
                         { applicationId: applicationId, folderId: "" },
                         () => {
-                          message.success(trans("success"));
+                          messageInstance.success(trans("success"));
                           history.push(BASE_URL);
                         },
-                        () => message.error(trans("home.deleteErrorMsg"))
+                        () => messageInstance.error(trans("home.deleteErrorMsg"))
                       )
                     ),
                   confirmBtnType: "delete",
@@ -139,7 +140,7 @@ export function HeaderStartDropdown(props: { setEdit: () => void }) {
               },
             ]}
           />
-        }
+        )}
       >
         <EditTextWrapper
           style={{ width: "fit-content", maxWidth: "288px", padding: "0 8px" }}

client/packages/lowcoder/src/pages/common/help.tsx

@@ -399,50 +399,48 @@ export function HelpDropdown(props: HelpDropdownProps) {
     return null;
   }
 
-  return (
-    <>
-      {introVideoUrl && (
-        <VideoDialog
-          visible={videoVisible}
-          setVisible={(v) => setVideoVisible(v)}
-          videoSrc={introVideoUrl}
-        />
+  return (<>
+    {introVideoUrl && (
+      <VideoDialog
+        visible={videoVisible}
+        setVisible={(v) => setVideoVisible(v)}
+        videoSrc={introVideoUrl}
+      />
+    )}
+    <HelpWrapper>
+      {toolTipContent && (
+        <Popover
+          content={toolTipContent}
+          open={true}
+          align={{
+            points: ["br", "cc"],
+            offset: [-16, 24],
+          }}
+          placement="left"
+        >
+          <span />
+        </Popover>
       )}
-      <HelpWrapper>
-        {toolTipContent && (
-          <Popover
-            content={toolTipContent}
-            visible
-            align={{
-              points: ["br", "cc"],
-              offset: [-16, 24],
-            }}
-            placement="left"
-          >
-            <span />
-          </Popover>
-        )}
-        {props.showShortcutList && props.setShowShortcutList && (
-          <ShortcutListPopup setShowShortcutList={props.setShowShortcutList} />
+      {props.showShortcutList && props.setShowShortcutList && (
+        <ShortcutListPopup setShowShortcutList={props.setShowShortcutList} />
+      )}
+      <Dropdown
+        dropdownRender={() => overlayMenus}
+        placement="topRight"
+        trigger={["click"]}
+        open={showDropdown}
+        onOpenChange={(open: boolean) => setShowDropdown(open)}
+      >
+        {props.isEdit ? (
+          <SpanStyled selected={showDropdown}>
+            <LeftHelpIcon />
+          </SpanStyled>
+        ) : (
+          <HelpDiv>
+            <HelpIcon />
+          </HelpDiv>
         )}
-        <Dropdown
-          overlay={overlayMenus}
-          placement="topRight"
-          trigger={["click"]}
-          visible={showDropdown}
-          onVisibleChange={(open: boolean) => setShowDropdown(open)}
-        >
-          {props.isEdit ? (
-            <SpanStyled selected={showDropdown}>
-              <LeftHelpIcon />
-            </SpanStyled>
-          ) : (
-            <HelpDiv>
-              <HelpIcon />
-            </HelpDiv>
-          )}
-        </Dropdown>
-      </HelpWrapper>
-    </>
-  );
+      </Dropdown>
+    </HelpWrapper>
+  </>);
 }

client/packages/lowcoder/src/pages/setting/theme/themeList.tsx

@@ -1,4 +1,4 @@
-import { Button, Dropdown, Empty, Menu, message, Table, Typography } from "antd";
+import { Button, Dropdown, Empty, Menu, Table, Typography } from "antd";
 import { timestampToHumanReadable } from "util/dateTimeUtils";
 import { MENU_TYPE } from "./themeConstant";
 import React, { useState } from "react";
@@ -16,6 +16,7 @@ import {
 } from "./styledComponents";
 import { ThemeType } from "api/commonSettingApi";
 import { trans } from "i18n";
+import { messageInstance } from "lowcoder-design/src/components/GlobalInstances";
 
 const { Column } = Table;
 
@@ -100,13 +101,13 @@ function ThemeList(props: ThemeListProp) {
                   triggerType: ["text"],
                   onChange: (value) => {
                     if (!value.trim()) {
-                      message.warn(trans("home.nameCheckMessage"));
+                      messageInstance.warning(trans("home.nameCheckMessage"));
                       return;
                     }
                     // check duplicate names
                     const isExist = themeList?.find((theme) => theme.name === value);
                     if (isExist && value !== theme.name) {
-                      message.error(trans("theme.checkDuplicateNames"));
+                      messageInstance.error(trans("theme.checkDuplicateNames"));
                       return;
                     }
                     clickMenu({ key: MENU_TYPE.RENAME, themeId: theme.id, name: value });
@@ -153,7 +154,7 @@ function ThemeList(props: ThemeListProp) {
                 <Dropdown
                   trigger={["click"]}
                   getPopupContainer={() => tableRef.current!}
-                  overlay={
+                  dropdownRender={() => (
                     <Menu
                       onClick={(params) => {
                         if (params.key !== MENU_TYPE.RENAME) {
@@ -186,7 +187,7 @@ function ThemeList(props: ThemeListProp) {
                         },
                       ]}
                     />
-                  }
+                  )}
                 >
                   <MoreIconDiv>
                     <StyledMoreActionIcon />