refactor: separate out Draggable from ComponentList

measuredco · Oct 17, 2023 · fdb6f32 · fdb6f32
1 parent fa7af7d
commit fdb6f32
Show file tree

Hide file tree

Showing 3 changed files with 60 additions and 44 deletions.
diff --git a/packages/core/components/ComponentList/index.tsx b/packages/core/components/ComponentList/index.tsx
@@ -1,10 +1,10 @@
 import DroppableStrictMode from "../DroppableStrictMode";
-import { ComponentConfig, Config } from "../../types/Config";
-import { Draggable } from "react-beautiful-dnd";
+import { Config } from "../../types/Config";
 
 import styles from "./styles.module.css";
 import getClassNameFactory from "../../lib/get-class-name-factory";
 import { Grid } from "react-feather";
+import { Draggable } from "../Draggable";
 
 const getClassName = getClassNameFactory("ComponentList", styles);
 
@@ -15,50 +15,25 @@ export const ComponentList = ({ config }: { config: Config }) => {
         <div
           {...provided.droppableProps}
           ref={provided.innerRef}
-          className={getClassName()}
+          className={getClassName({
+            isDraggingFrom: !!snapshot.draggingFromThisWith,
+          })}
         >
           {Object.keys(config.components).map((componentKey, i) => {
-            const componentConfig: ComponentConfig = config[componentKey];
-
             return (
               <Draggable
                 key={componentKey}
-                draggableId={componentKey}
+                id={componentKey}
                 index={i}
+                showShadow
+                disableAnimations
               >
-                {(provided, snapshot) => (
-                  <>
-                    <div
-                      ref={provided.innerRef}
-                      {...provided.draggableProps}
-                      {...provided.dragHandleProps}
-                      className={getClassName("item")}
-                      style={{
-                        ...provided.draggableProps.style,
-                        transform: snapshot.isDragging
-                          ? provided.draggableProps.style?.transform
-                          : "translate(0px, 0px)",
-                      }}
-                    >
-                      {componentKey}
-                      <div className={getClassName("itemIcon")}>
-                        <Grid size={18} />
-                      </div>
-                    </div>
-                    {/* See https://github.com/atlassian/react-beautiful-dnd/issues/216#issuecomment-906890987 */}
-                    {snapshot.isDragging && (
-                      <div
-                        className={getClassName("itemShadow")}
-                        style={{ transform: "none !important" }}
-                      >
-                        {componentKey}
-                        <div className={getClassName("itemIcon")}>
-                          <Grid size={18} />
-                        </div>
-                      </div>
-                    )}
-                  </>
-                )}
+                <div className={getClassName("item")}>
+                  {componentKey}
+                  <div className={getClassName("itemIcon")}>
+                    <Grid size={18} />
+                  </div>
+                </div>
               </Draggable>
             );
           })}

diff --git a/packages/core/components/ComponentList/styles.module.css b/packages/core/components/ComponentList/styles.module.css
@@ -6,8 +6,7 @@
   grid-gap: 12px;
 }
 
-.ComponentList-item,
-.ComponentList-itemShadow {
+.ComponentList-item {
   background: white;
   padding: 12px;
   display: flex;
@@ -20,15 +19,14 @@
   cursor: grab;
 }
 
-.ComponentList-item:last-of-type,
-.ComponentList-itemShadow:last-of-type {
+.ComponentList-item:last-of-type {
   margin-bottom: 0px;
 }
 
 .ComponentList-itemIcon {
   color: var(--puck-color-grey-4);
 }
 
-.ComponentList-item:hover {
+.ComponentList:not(.ComponentList--isDraggingFrom) .ComponentList-item:hover {
   background-color: var(--puck-color-azure-9);
 }
diff --git a/packages/core/components/Draggable/index.tsx b/packages/core/components/Draggable/index.tsx
@@ -0,0 +1,43 @@
+import { ReactNode } from "react";
+import { Draggable as DndDraggable } from "react-beautiful-dnd";
+
+export const Draggable = ({
+  children,
+  id,
+  index,
+  showShadow,
+  disableAnimations = false,
+}: {
+  children: ReactNode;
+  id: string;
+  index: number;
+  showShadow?: boolean;
+  disableAnimations?: boolean;
+}) => {
+  return (
+    <DndDraggable draggableId={id} index={index}>
+      {(provided, snapshot) => (
+        <>
+          <div
+            ref={provided.innerRef}
+            {...provided.draggableProps}
+            {...provided.dragHandleProps}
+            style={{
+              ...provided.draggableProps.style,
+              transform:
+                snapshot.isDragging || !disableAnimations
+                  ? provided.draggableProps.style?.transform
+                  : "translate(0px, 0px)",
+            }}
+          >
+            {children}
+          </div>
+          {/* See https://github.com/atlassian/react-beautiful-dnd/issues/216#issuecomment-906890987 */}
+          {showShadow && snapshot.isDragging && (
+            <div style={{ transform: "none !important" }}>{children}</div>
+          )}
+        </>
+      )}
+    </DndDraggable>
+  );
+};