upgrade react-draggable, added missing nodeRef

Author: raheeliftikhar5

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

@@ -1,7 +1,7 @@
 import { ButtonProps } from "antd/es/button";
 import { default as AntdModal, ModalFuncProps, ModalProps as AntdModalProps } from "antd/es/modal";
 import { ReactComponent as PackUpIcon } from "icons/v1/icon-Pack-up.svg";
-import React, { ReactNode, useState } from "react";
+import React, { ReactNode, useRef, useState } from "react";
 import styled from "styled-components";
 import { TacoButtonType, TacoButton } from "components/button";
 import Draggable from "react-draggable";
@@ -221,9 +221,12 @@ const DEFAULT_PROPS = {
 } as const;
 
 function CustomModalRender(props: Omit<CustomModalProps & ModalFuncProps, "width"> & { width?: string | number }) {
+  const draggableRef = useRef<HTMLDivElement>(null);
+
   return (
-    <Draggable handle=".handle" disabled={!props.draggable}>
-      <ModalWrapper 
+    <Draggable handle=".handle" disabled={!props.draggable} nodeRef={draggableRef}>
+      <ModalWrapper
+        ref={draggableRef} 
         $width={props.width}
         $customStyles={props?.customStyles}
       >

client/packages/lowcoder-design/src/components/iconSelect/index.tsx

@@ -152,6 +152,7 @@ class Icon {
     else
       return (
         <FontAwesomeIcon
+          className=""
           icon={this.def}
           style={{ width: "1em", height: "1em"}}
         />
@@ -256,6 +257,7 @@ const IconPopup = (props: {
   searchKeywords?: Record<string, string>;
   IconType?: "OnlyAntd" | "All" | "default" | undefined;
 }) => {
+  const draggableRef = useRef<HTMLDivElement>(null);
   const [searchText, setSearchText] = useState("");
   const [allIcons, setAllIcons] = useState<Record<string, Icon>>({});
   const searchResults = useMemo(
@@ -289,6 +291,7 @@ const IconPopup = (props: {
               title={icon.title + ", Key: " + key}
               placement="bottom"
               align={{ offset: [0, -7, 0, 0] }}
+              getPopupContainer={(node: any) => node.parentNode}
               destroyTooltipOnHide
             >
               <IconItemContainer
@@ -311,8 +314,8 @@ const IconPopup = (props: {
     [searchResults, allIcons, onChangeIcon]
   );
   return (
-    <Draggable handle=".dragHandle">
-      <PopupContainer>
+    <Draggable handle=".dragHandle" nodeRef={draggableRef}>
+      <PopupContainer ref={draggableRef}>
         <TitleDiv className="dragHandle">
           <TitleText>{trans("iconSelect.title")}</TitleText>
           <StyledCloseIcon onClick={props.onClose} />

client/packages/lowcoder-design/src/components/shapeSelect/index.tsx

@@ -328,6 +328,7 @@ const IconPopup = (props: {
   searchKeywords?: Record<string, string>;
   IconType?: "OnlyAntd" | "All" | "default" | undefined;
 }) => {
+  const draggableRef = useRef<HTMLDivElement>(null);
   const [allIcons, setAllIcons] = useState<Record<string, Icon>>({});
   const onChangeRef = useRef(props.onChange);
   onChangeRef.current = props.onChange;
@@ -374,8 +375,8 @@ const IconPopup = (props: {
   //   [searchResults, allIcons, onChangeIcon]
   // );
   return (
-    <Draggable handle=".dragHandle">
-      <PopupContainer>
+    <Draggable handle=".dragHandle" nodeRef={draggableRef}>
+      <PopupContainer ref={draggableRef}>
         <TitleDiv className="dragHandle">
           <TitleText>{trans("shapeSelect.title")}</TitleText>
           <StyledCloseIcon onClick={props.onClose} />

client/packages/lowcoder/src/components/resultPanel/BottomResultPanel.tsx

@@ -55,6 +55,7 @@ export const BottomResultPanel = (props: BottomResultPanelProps) => {
 
   return (
     <Draggable
+      nodeRef={draggableRef}
       disabled={unDraggable}
       bounds={bounds}
       enableUserSelectHack={false}

client/packages/lowcoder/src/pages/editor/codeEditorPanel.tsx

@@ -164,6 +164,7 @@ export const CodeEditorPanel = (props: {
       getPopupContainer={(node: any) => node.parentNode.parentNode}
       popup={() => (
         <Draggable
+          nodeRef={draggableRef}
           positionOffset={{ x: "-50%", y: "-50%" }}
           disabled={unDraggable}
           bounds={bounds}