Dashboard: draggable cards! (codesandbox#4091)

Author: siddharthkp

packages/app/src/app/pages/NewDashboard/Components/Sandbox/SandboxCard.tsx

@@ -8,7 +8,6 @@ import {
   Stats,
   Input,
   SkeletonText,
-  isMenuClicked,
 } from '@codesandbox/components';
 import css from '@styled-system/css';
 import { MenuOptions } from './Menu';
@@ -28,19 +27,14 @@ export const SandboxCard = ({
   enterEditing,
   ...props
 }) => (
-  <Link
-    as={RouterLink}
-    to={url}
-    onClick={event => {
-      if (edit || isMenuClicked(event)) event.preventDefault();
-    }}
-  >
+  <Link as={RouterLink} to={url} {...props}>
     <Stack
       direction="vertical"
       gap={2}
       css={css({
         width: '100%',
         height: 240,
+        backgroundColor: 'grays.700',
         border: '1px solid',
         borderColor: 'grays.600',
         borderRadius: 'medium',
@@ -52,7 +46,6 @@ export const SandboxCard = ({
           boxShadow: theme => '0 4px 16px 0 ' + theme.colors.grays[900],
         },
       })}
-      {...props}
     >
       <Element
         as="div"

packages/app/src/app/pages/NewDashboard/Components/Sandbox/SandboxListItem.tsx

@@ -9,7 +9,6 @@ import {
   Link,
   ListAction,
   SkeletonText,
-  isMenuClicked,
 } from '@codesandbox/components';
 import css from '@styled-system/css';
 import { MenuOptions } from './Menu';
@@ -30,14 +29,7 @@ export const SandboxListItem = ({
   ...props
 }) => (
   <ListAction css={css({ paddingX: 0 })}>
-    <Link
-      as={RouterLink}
-      to={url}
-      onClick={event => {
-        if (edit || isMenuClicked(event)) event.preventDefault();
-      }}
-      style={{ width: '100%' }}
-    >
+    <Link as={RouterLink} to={url} style={{ width: '100%' }} {...props}>
       <Stack
         gap={2}
         align="center"
@@ -49,7 +41,6 @@ export const SandboxListItem = ({
           borderBottomColor: 'grays.600',
           overflow: 'hidden',
         })}
-        {...props}
       >
         <Stack gap={4} align="center">
           <Element

packages/app/src/app/pages/NewDashboard/Components/Sandbox/index.tsx

@@ -1,8 +1,10 @@
 import React from 'react';
 import { useLocation } from 'react-router-dom';
+import { motion } from 'framer-motion';
 import { useOvermind } from 'app/overmind';
 import { sandboxUrl } from '@codesandbox/common/lib/utils/url-generator';
 import { ESC } from '@codesandbox/common/lib/utils/keycodes';
+import { isMenuClicked } from '@codesandbox/components';
 import { SandboxCard, SkeletonCard } from './SandboxCard';
 import { SandboxListItem, SkeletonListItem } from './SandboxListItem';
 
@@ -22,6 +24,8 @@ export const Sandbox = ({ sandbox, isTemplate = false, ...props }) => {
     alias: sandbox.alias,
   });
 
+  /* Edit logic */
+
   const onChange = (event: React.ChangeEvent<HTMLInputElement>) => {
     setNewTitle(event.target.value);
   };
@@ -57,13 +61,43 @@ export const Sandbox = ({ sandbox, isTemplate = false, ...props }) => {
     setTimeout(() => inputRef.current.focus());
   };
 
+  /* Drag logic */
+
+  const [dragging, setDragging] = React.useState(false);
+
+  const onDragStart = () => {
+    setDragging(true);
+  };
+
+  const onDragEnd = () => {
+    // delay by a frame so that click happens first
+    window.requestAnimationFrame(() => setDragging(false));
+  };
+
+  /* View logic */
+  const location = useLocation();
+
+  let viewMode: string;
+  if (location.pathname.includes('deleted')) viewMode = 'list';
+  else if (location.pathname.includes('start')) viewMode = 'grid';
+  else viewMode = dashboard.viewMode;
+
+  const Component = viewMode === 'list' ? SandboxListItem : SandboxCard;
+
+  /* Prevent opening sandbox while interacting */
+  const onClick = event => {
+    if (edit || dragging || isMenuClicked(event)) event.preventDefault();
+  };
+
   const sandboxProps = {
     sandboxTitle,
-    newTitle,
     sandbox,
     isTemplate,
     url,
+    onClick,
+    // edit mode
     edit,
+    newTitle,
     inputRef,
     onChange,
     onKeyDown,
@@ -72,17 +106,24 @@ export const Sandbox = ({ sandbox, isTemplate = false, ...props }) => {
     enterEditing,
   };
 
-  const location = useLocation();
-
-  let viewMode;
-  if (location.pathname.includes('deleted')) viewMode = 'list';
-  else if (location.pathname.includes('start')) viewMode = 'grid';
-  else viewMode = dashboard.viewMode;
+  const dragProps = {
+    drag: true,
+    // boundaries beyond which dragging is constrained
+    // setting it to 0 brings card back to its position
+    dragConstraints: { top: 0, bottom: 0, left: 0, right: 0 },
+    // To allow drag dispite constraints, we can allow
+    // movement outside constraints (it still springs back)
+    dragElastic: 1,
+    // event handlers
+    onDragStart,
+    onDragEnd,
+  };
 
-  if (viewMode === 'list') {
-    return <SandboxListItem {...sandboxProps} {...props} />;
-  }
-  return <SandboxCard {...sandboxProps} {...props} />;
+  return (
+    <motion.div {...dragProps}>
+      <Component {...sandboxProps} {...props} />
+    </motion.div>
+  );
 };
 
 export const SkeletonSandbox = props => {