🔨 Refactor, 🧠 Overmind, Hactoberfest | packages/app/src/app/p… (codesandbox#2863)

🔨 Refactor, 🧠 Overmind, Hactoberfest | packages/app/src/app/pages/Dashboard/Content/DragLayer/SelectedSandboxItems

Author: christianalfoni

packages/app/src/app/pages/Dashboard/Content/DragLayer/SelectedSandboxItems/AnimatedSandboxItem.js

@@ -0,0 +1,104 @@
+import React, { useState, useEffect } from 'react';
+import { Spring, animated, interpolate } from 'react-spring/renderprops';
+
+import {
+  Container,
+  SandboxImageContainer,
+  SandboxImage,
+  SandboxInfo,
+} from './elements';
+
+type Props = {
+  id: string;
+  i: number;
+  x: number;
+  y: number;
+  scale: number;
+  isLast: boolean;
+  selectedSandboxes: Array<string>;
+};
+
+export const AnimatedSandboxItem: React.FC<Props> = ({
+  id,
+  i,
+  x,
+  y,
+  scale,
+  isLast,
+  selectedSandboxes,
+}) => {
+  const [render, setRender] = useState(true);
+  const [position, setPosition] = useState<DOMRect>(null);
+
+  useEffect(() => {
+    let timeout: NodeJS.Timeout;
+
+    const sandboxBrotherItem = document.getElementById(id);
+
+    if (sandboxBrotherItem) {
+      setPosition(sandboxBrotherItem.getBoundingClientRect() as DOMRect);
+    }
+
+    if (i !== 0 && !isLast) {
+      timeout = global.setTimeout(() => {
+        setRender(false);
+      }, 200);
+    }
+
+    return () => {
+      if (timeout) {
+        global.clearTimeout(timeout);
+      }
+    };
+  }, [id, i, isLast]);
+
+  if (!render || !position) {
+    return null;
+  }
+
+  return (
+    <Spring
+      native
+      immediate={i === 0 ? el => el !== 'scale' : false}
+      from={{ x: position.x, y: position.y, shadow: 2, scale: 1 }}
+      to={{ scale, x, y, shadow: isLast ? 16 : 2 }}
+      key={id}
+    >
+      {({ x: newX, y: newY, scale: newScale, shadow: newShadow }) => (
+        <animated.div
+          style={{
+            position: 'absolute',
+            willChange: 'transform',
+            boxShadow:
+              i === 0 || isLast
+                ? interpolate(
+                    [newShadow],
+                    s => `0 ${s}px ${s * 2}px rgba(0, 0, 0, 0.3)`
+                  )
+                : 'inherit',
+            transform: interpolate(
+              [newX, newY, newScale],
+              (xx, yy, zz) =>
+                `translate3d(${xx}px, ${yy}px, 0px) scale3d(${zz}, ${zz}, ${zz})`
+            ),
+            zIndex: i === 0 ? 20 : 10,
+          }}
+        >
+          <Container>
+            <SandboxImageContainer>
+              <SandboxImage
+                style={{
+                  backgroundImage: `url(${`https://codesandbox.io/api/v1/sandboxes/${id}/screenshot.png`})`,
+                }}
+              />
+            </SandboxImageContainer>
+            <SandboxInfo>
+              {selectedSandboxes.length}{' '}
+              {selectedSandboxes.length === 1 ? 'Sandbox' : 'Sandboxes'}
+            </SandboxInfo>
+          </Container>
+        </animated.div>
+      )}
+    </Spring>
+  );
+};

packages/app/src/app/pages/Dashboard/Content/DragLayer/SelectedSandboxItems/AnimatedSandboxItem.tsx

@@ -0,0 +1,48 @@
+import React, { useMemo } from 'react';
+import { useOvermind } from 'app/overmind';
+
+import { AnimatedSandboxItem } from './AnimatedSandboxItem';
+
+interface ISelectedSandboxItemsProps {
+  x: number;
+  y: number;
+  isOverPossibleTargets: boolean;
+  id: string;
+}
+
+export const SelectedSandboxItems: React.FC<ISelectedSandboxItemsProps> = ({
+  x,
+  y,
+  isOverPossibleTargets,
+  id,
+}) => {
+  const {
+    state: {
+      dashboard: { selectedSandboxes },
+    },
+  } = useOvermind();
+
+  const selectedIds = useMemo(
+    () => [id, ...selectedSandboxes.filter(b => b !== id)],
+    [id, selectedSandboxes]
+  );
+
+  const scale = isOverPossibleTargets ? 0.4 : 0.8;
+
+  return (
+    <>
+      {selectedIds.map((sid, i) => (
+        <AnimatedSandboxItem
+          key={sid}
+          id={sid}
+          i={i}
+          isLast={i === selectedIds.length - 1}
+          x={x}
+          y={y}
+          scale={scale}
+          selectedSandboxes={selectedIds}
+        />
+      ))}
+    </>
+  );
+};

…agLayer/SelectedSandboxItems/elements.js …agLayer/SelectedSandboxItems/elements.tspackages/app/src/app/pages/Dashboard/Content/DragLayer/SelectedSandboxItems/elements.js renamed to packages/app/src/app/pages/Dashboard/Content/DragLayer/SelectedSandboxItems/elements.ts packages/app/src/app/pages/Dashboard/Content/DragLayer/SelectedSandboxItems/elements.js renamed to packages/app/src/app/pages/Dashboard/Content/DragLayer/SelectedSandboxItems/elements.ts

@@ -2,7 +2,7 @@ import React from 'react';
 
 import { DragLayer as DNDDragLayer } from 'react-dnd';
 
-import SelectedSandboxItems from './SelectedSandboxItems';
+import { SelectedSandboxItems } from './SelectedSandboxItems';
 
 const layerStyles = {
   position: 'fixed',
@@ -22,13 +22,11 @@ function getItemCoords(props) {
   return {
     x,
     y,
-    left: props.item.left,
-    top: props.item.top,
   };
 }
 
 class CustomDragLayer extends React.Component {
-  renderItem(type, item, isOverPossibleTargets, { x, y, left, top }) {
+  renderItem(type, item, isOverPossibleTargets, { x, y }) {
     if (type !== 'SANDBOX') {
       return null;
     }
@@ -37,8 +35,6 @@ class CustomDragLayer extends React.Component {
         isOverPossibleTargets={isOverPossibleTargets}
         x={x}
         y={y}
-        left={left}
-        top={top}
         id={item.id}
       />
     );