feat:adjust placeholder & row gap

src/app/modules/report-module/components/placeholder/index.tsx

@@ -0,0 +1,134 @@
+import React from "react";
+import { PlaceholderProps } from "app/modules/report-module/views/create/data";
+import { ReportElementsType } from "app/modules/report-module/components/right-panel-create-view";
+import { useDrop } from "react-dnd";
+import { isDividerOrRowFrameDraggingAtom } from "app/state/recoil/atoms";
+import { useRecoilValue } from "recoil";
+import { v4 } from "uuid";
+
+const PlaceHolder = (props: PlaceholderProps) => {
+  const moveCard = React.useCallback((itemId: string) => {
+    props.updateFramesArray((draft) => {
+      const dragIndex = draft.findIndex((frame) => frame.id === itemId);
+
+      const dropIndex =
+        props.index ?? draft.findIndex((frame) => frame.id === props.rowId) + 1;
+
+      const fakeId = v4();
+      const tempItem = draft[dragIndex];
+      draft[dragIndex].id = fakeId;
+
+      draft.splice(dropIndex, 0, tempItem);
+      const fakeIndex = draft.findIndex((frame) => frame.id === fakeId);
+      draft.splice(fakeIndex, 1);
+    });
+  }, []);
+  const [{ isOver, handlerId, item: dragItem }, drop] = useDrop(() => ({
+    // The type (or types) to accept - strings or symbols
+    accept: [
+      ReportElementsType.DIVIDER,
+      ReportElementsType.ROWFRAME,
+      ReportElementsType.ROW,
+    ],
+    // Props to collect
+    collect: (monitor) => ({
+      isOver: monitor.isOver(),
+      canDrop: monitor.canDrop(),
+      item: monitor.getItem(),
+      handlerId: monitor.getHandlerId(),
+    }),
+    drop: (item: any, monitor) => {
+      if (item.type === ReportElementsType.ROW) {
+        moveCard(item.id);
+      } else {
+        props.updateFramesArray((draft) => {
+          const tempIndex =
+            props.index ??
+            draft.findIndex((frame) => frame.id === props.rowId) + 1;
+
+          const id = v4();
+          draft.splice(tempIndex, 0, {
+            id,
+            frame: {
+              rowId: id,
+              rowIndex: tempIndex,
+
+              type: item.type,
+            },
+            content:
+              item.type === ReportElementsType.ROWFRAME ? [] : ["divider"],
+            contentWidths: [],
+            contentHeights: [],
+            contentTypes:
+              item.type === ReportElementsType.ROWFRAME ? [] : ["divider"],
+            structure: null,
+          });
+        });
+      }
+    },
+  }));
+
+  const isItemDragging = useRecoilValue(isDividerOrRowFrameDraggingAtom);
+
+  const itemDragIndex = props.framesArray.findIndex(
+    (frame) => frame.id === isItemDragging.rowId
+  );
+
+  const placeholderIndex =
+    props.index ??
+    props.framesArray.findIndex((frame) => frame.id === props.rowId) + 1;
+
+  const dragIndex = props.framesArray.findIndex(
+    (frame) => frame.id === (dragItem as any)?.id
+  );
+
+  const placeholderActive = () => {
+    if (isOver) {
+      if (dragIndex === -1) {
+        return true;
+      }
+      if (placeholderIndex === dragIndex) {
+        return false;
+      }
+      if (placeholderIndex - 1 === dragIndex) {
+        return false;
+      }
+      return true;
+    }
+    return false;
+  };
+
+  const isDroppable = () => {
+    if (isItemDragging.state) {
+      if (itemDragIndex === -1) {
+        return true;
+      }
+      if (placeholderIndex === itemDragIndex) {
+        return false;
+      }
+      if (placeholderIndex - 1 === itemDragIndex) {
+        return false;
+      }
+      return true;
+    }
+    return false;
+  };
+
+  return (
+    <div
+      data-cy="report-row-placeholder"
+      data-handler-id={handlerId}
+      ref={drop}
+      css={`
+        width: 100%;
+        height: 10px;
+        display: ${isItemDragging.state ? "block" : "none"};
+        background-color: ${placeholderActive() ? "#6061E5" : "#262c34"};
+        opacity: ${isDroppable() ? 1 : 0.5};
+        margin-bottom: 10px;
+      `}
+    />
+  );
+};
+
+export default PlaceHolder;

src/app/modules/report-module/views/edit/index.tsx

@@ -8,15 +8,14 @@ import Container from "@material-ui/core/Container";
 import { EditorState, RawDraftContentState, convertFromRaw } from "draft-js";
 import { useTitle } from "react-use";
 import { useAuth0 } from "@auth0/auth0-react";
-import { PlaceHolder } from "app/modules/report-module/views/create";
 import { useStoreActions, useStoreState } from "app/state/store/hooks";
 import { ReportModel, emptyReport } from "app/modules/report-module/data";
 import { ReportEditViewProps } from "app/modules/report-module/views/edit/data";
-import HeaderBlock from "app/modules/report-module/sub-module/components/headerBlock";
+import HeaderBlock from "app/modules/report-module/components/headerBlock";
 import { NotAuthorizedMessageModule } from "app/modules/common/not-authorized-message";
 import { ItemComponent } from "app/modules/report-module/components/order-container";
 import { ReportElementsType } from "app/modules/report-module/components/right-panel-create-view";
-import AddRowFrameButton from "app/modules/report-module/sub-module/rowStructure/addRowFrameButton";
+import AddRowFrameButton from "app/modules/report-module/components/rowStructure/addRowFrameButton";
 import { GridColumns } from "app/modules/report-module/components/grid-columns";
 
 import {
@@ -25,7 +24,7 @@ import {
   reportContentContainerWidth,
 } from "app/state/recoil/atoms";
 import { IFramesArray } from "app/modules/report-module/views/create/data";
-import RowFrame from "app/modules/report-module/sub-module/rowStructure";
+import RowFrame from "app/modules/report-module/components/rowStructure";
 import TourGuide from "app/components/Dialogs/TourGuide";
 import useCookie from "@devhammed/use-cookie";
 import isEqual from "lodash/isEqual";
@@ -36,8 +35,9 @@ import {
   compareFramesArrayState,
   compareHeaderDetailsState,
 } from "app/modules/report-module/views/edit/compareStates";
+import PlaceHolder from "app/modules/report-module/components/placeholder";
 
-function ReportEditView(props: ReportEditViewProps) {
+function ReportEditView(props: Readonly<ReportEditViewProps>) {
   useTitle("DX Dataxplorer - Edit Report");
 
   const { page } = useParams<{ page: string }>();
@@ -395,7 +395,12 @@ function ReportEditView(props: ReportEditViewProps) {
                     />
                   </div>
                 </ItemComponent>
-                <Box height={8} />
+                <div
+                  css={`
+                    height: 20px;
+                  `}
+                />
+                {/* <Box height={8} /> */}
 
                 <PlaceHolder
                   rowId={frame.id}