dnd-kit POC

actualbudget · Jan 16, 2024 · 635d449 · 635d449
1 parent e745a40
commit 635d449
Show file tree

Hide file tree

Showing 4 changed files with 273 additions and 177 deletions.
diff --git a/packages/desktop-client/package.json b/packages/desktop-client/package.json
@@ -6,6 +6,10 @@
     "build"
   ],
   "devDependencies": {
+    "@dnd-kit/core": "^6.1.0",
+    "@dnd-kit/modifiers": "^7.0.0",
+    "@dnd-kit/sortable": "^8.0.0",
+    "@dnd-kit/utilities": "^3.2.2",
     "@juggle/resize-observer": "^3.1.2",
     "@playwright/test": "^1.37.1",
     "@reach/listbox": "^0.18.0",

diff --git a/packages/desktop-client/src/components/sidebar/Account.tsx b/packages/desktop-client/src/components/sidebar/Account.tsx
@@ -1,6 +1,8 @@
 // @ts-strict-ignore
 import React from 'react';
 
+import { useSortable } from '@dnd-kit/sortable';
+import { CSS } from '@dnd-kit/utilities';
 import { css } from 'glamor';
 
 import { type AccountEntity } from 'loot-core/src/types/models';
@@ -9,13 +11,6 @@ import { styles, theme, type CSSProperties } from '../../style';
 import { AlignedText } from '../common/AlignedText';
 import { AnchorLink } from '../common/AnchorLink';
 import { View } from '../common/View';
-import {
-  useDraggable,
-  useDroppable,
-  DropHighlight,
-  type OnDragChangeCallback,
-  type OnDropCallback,
-} from '../sort';
 import { type Binding } from '../spreadsheet';
 import { CellValue } from '../spreadsheet/CellValue';
 
@@ -42,8 +37,6 @@ type AccountProps = {
   updated?: boolean;
   style?: CSSProperties;
   outerStyle?: CSSProperties;
-  onDragChange?: OnDragChangeCallback<{ id: string }>;
-  onDrop?: OnDropCallback;
 };
 
 export function Account({
@@ -56,92 +49,85 @@ export function Account({
   query,
   style,
   outerStyle,
-  onDragChange,
-  onDrop,
 }: AccountProps) {
-  const type = account
-    ? account.closed
-      ? 'account-closed'
-      : account.offbudget
-      ? 'account-offbudget'
-      : 'account-onbudget'
-    : 'title';
+  const {
+    isDragging,
+    attributes,
+    listeners,
+    setNodeRef,
+    transform,
+    transition,
+  } = useSortable({ id: account?.id || `sortable-account-${name}` });
 
-  const { dragRef } = useDraggable({
-    type,
-    onDragChange,
-    item: { id: account && account.id },
-    canDrag: account != null,
-  });
-
-  const { dropRef, dropPos } = useDroppable({
-    types: account ? [type] : [],
-    id: account && account.id,
-    onDrop,
-  });
+  const dndStyle = {
+    opacity: isDragging ? 0.5 : undefined,
+    transform: CSS.Transform.toString(transform),
+    transition,
+  };
 
   return (
-    <View innerRef={dropRef} style={{ flexShrink: 0, ...outerStyle }}>
-      <View>
-        <DropHighlight pos={dropPos} />
-        <View innerRef={dragRef}>
-          <AnchorLink
-            to={to}
-            style={{
-              ...accountNameStyle,
-              ...style,
-              position: 'relative',
-              borderLeft: '4px solid transparent',
-              ...(updated && { fontWeight: 700 }),
-            }}
-            activeStyle={{
-              borderColor: theme.sidebarItemAccentSelected,
-              color: theme.sidebarItemTextSelected,
-              // This is kind of a hack, but we don't ever want the account
-              // that the user is looking at to be "bolded" which means it
-              // has unread transactions. The system does mark is read and
-              // unbolds it, but it still "flashes" bold so this just
-              // ignores it if it's active
-              fontWeight: (style && style.fontWeight) || 'normal',
-              '& .dot': {
-                backgroundColor: theme.sidebarItemAccentSelected,
-                transform: 'translateX(-4.5px)',
-              },
-            }}
-          >
-            <View
-              style={{
-                position: 'absolute',
-                left: 0,
-                top: 0,
-                bottom: 0,
-                flexDirection: 'row',
-                alignItems: 'center',
-              }}
-            >
-              <div
-                className={`dot ${css({
-                  marginRight: 3,
-                  width: 5,
-                  height: 5,
-                  borderRadius: 5,
-                  backgroundColor: failed
-                    ? theme.sidebarItemBackgroundFailed
-                    : theme.sidebarItemBackgroundPositive,
-                  marginLeft: 2,
-                  transition: 'transform .3s',
-                  opacity: connected ? 1 : 0,
-                })}`}
-              />
-            </View>
-
-            <AlignedText
-              left={name}
-              right={<CellValue binding={query} type="financial" />}
-            />
-          </AnchorLink>
+    <View
+      innerRef={setNodeRef}
+      style={{ flexShrink: 0, ...outerStyle, ...dndStyle }}
+      {...attributes}
+      {...listeners}
+    >
+      <AnchorLink
+        to={to}
+        style={{
+          ...accountNameStyle,
+          ...style,
+          position: 'relative',
+          borderLeft: '4px solid transparent',
+          ...(updated && { fontWeight: 700 }),
+          ...(isDragging && { pointerEvents: 'none' }),
+        }}
+        activeStyle={{
+          borderColor: theme.sidebarItemAccentSelected,
+          color: theme.sidebarItemTextSelected,
+          // This is kind of a hack, but we don't ever want the account
+          // that the user is looking at to be "bolded" which means it
+          // has unread transactions. The system does mark is read and
+          // unbolds it, but it still "flashes" bold so this just
+          // ignores it if it's active
+          fontWeight: (style && style.fontWeight) || 'normal',
+          '& .dot': {
+            backgroundColor: theme.sidebarItemAccentSelected,
+            transform: 'translateX(-4.5px)',
+          },
+        }}
+      >
+        <View
+          style={{
+            position: 'absolute',
+            left: 0,
+            top: 0,
+            bottom: 0,
+            flexDirection: 'row',
+            alignItems: 'center',
+          }}
+        >
+          <div
+            className={`dot ${css({
+              marginRight: 3,
+              width: 5,
+              height: 5,
+              borderRadius: 5,
+              backgroundColor: failed
+                ? theme.sidebarItemBackgroundFailed
+                : theme.sidebarItemBackgroundPositive,
+              marginLeft: 2,
+              transition: 'transform .3s',
+              opacity: connected ? 1 : 0,
+            })}`}
+          />
         </View>
-      </View>
+
+        <AlignedText
+          left={name}
+          right={<CellValue binding={query} type="financial" />}
+        />
+      </AnchorLink>
     </View>
   );
 }