Remove StickyNotePreview from ComponentPreview

TouK · Dec 10, 2024 · c76fbc4 · c76fbc4
1 parent b86157d
commit c76fbc4
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 19 deletions.
diff --git a/designer/client/src/components/ComponentDragPreview.tsx b/designer/client/src/components/ComponentDragPreview.tsx
@@ -1,11 +1,13 @@
 import { css } from "@emotion/css";
-import React, { forwardRef, useEffect, useMemo, useState } from "react";
+import React, { forwardRef, ReactPortal, useEffect, useMemo, useState } from "react";
 import { useDragDropManager, useDragLayer } from "react-dnd";
 import { createPortal } from "react-dom";
 import { useDebouncedValue } from "rooks";
 import { NodeType } from "../types";
 import { ComponentPreview } from "./ComponentPreview";
 import { DndTypes } from "./toolbars/creator/Tool";
+import { StickyNotePreview } from "./StickyNotePreview";
+import { StickyNoteType } from "../types/stickyNote";
 
 function useNotNull<T>(value: T) {
     const [current, setCurrent] = useState(() => value);
@@ -53,17 +55,22 @@ export const ComponentDragPreview = forwardRef<HTMLDivElement, { scale: () => nu
         return null;
     }
 
-    return createPortal(
-        <div ref={forwardedRef} className={wrapperStyles} style={{ transform: `translate(${x}px, ${y}px)` }}>
-            <div
-                style={{
-                    transformOrigin: "top left",
-                    transform: `scale(${scale()})`,
-                }}
-            >
-                <ComponentPreview node={node} isActive={active} isOver={isOver} />
-            </div>
-        </div>,
-        document.body,
-    );
+    function createPortalForPreview(child: JSX.Element): ReactPortal {
+        return createPortal(
+            <div ref={forwardedRef} className={wrapperStyles} style={{ transform: `translate(${x}px, ${y}px)` }}>
+                <div
+                    style={{
+                        transformOrigin: "top left",
+                        transform: `scale(${scale()})`,
+                    }}
+                >
+                    {child}
+                </div>
+            </div>,
+            document.body,
+        );
+    }
+
+    if (node?.type === StickyNoteType) return createPortalForPreview(<StickyNotePreview isActive={active} isOver={isOver} />);
+    return createPortalForPreview(<ComponentPreview node={node} isActive={active} isOver={isOver} />);
 });
diff --git a/designer/client/src/components/ComponentPreview.tsx b/designer/client/src/components/ComponentPreview.tsx
@@ -7,8 +7,6 @@ import { ComponentIcon } from "./toolbars/creator/ComponentIcon";
 import { alpha, styled, useTheme } from "@mui/material";
 import { blend } from "@mui/system";
 import { blendLighten, getBorderColor } from "../containers/theme/helpers";
-import { StickyNotePreview } from "./StickyNotePreview";
-import { StickyNoteType } from "../types/stickyNote";
 
 export function ComponentPreview({ node, isActive, isOver }: { node: NodeType; isActive?: boolean; isOver?: boolean }): JSX.Element {
     const theme = useTheme();
@@ -77,9 +75,7 @@ export function ComponentPreview({ node, isActive, isOver }: { node: NodeType; i
 
     const colors = isOver ? nodeColorsHover : nodeColors;
 
-    return node?.type === StickyNoteType ? (
-        <StickyNotePreview isActive={isActive} isOver={isOver} />
-    ) : (
+    return (
         <div className={cx(colors, nodeStyles)}>
             <div className={cx(imageStyles, imageColors)}>
                 <ComponentIcon node={node} />