feat: update sortable again

sadmann7 · Jul 8, 2024 · 3ae875e · 3ae875e
1 parent e7dee0f
commit 3ae875e
Show file tree

Hide file tree

Showing 2 changed files with 29 additions and 19 deletions.
diff --git a/src/app/_components/mixed-sorting-demo.tsx b/src/app/_components/mixed-sorting-demo.tsx
@@ -37,7 +37,7 @@ export function MixedSortingDemo() {
           <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 md:grid-cols-4">
             {specialTricks.map((item) => (
               <SortableItem key={item.id} value={item.id} asTrigger asChild>
-                <Card className="flex aspect-video cursor-auto items-center justify-center rounded-md bg-accent hover:bg-accent/80">
+                <Card className="flex aspect-video items-center justify-center rounded-md bg-accent hover:bg-accent/80">
                   <CardHeader className="items-center">
                     <CardTitle>{item.name}</CardTitle>
                     <CardDescription>{item.points} points</CardDescription>

diff --git a/src/components/ui/sortable.tsx b/src/components/ui/sortable.tsx
@@ -191,22 +191,28 @@ interface SortableOverlayProps
   activeId?: UniqueIdentifier | null
 }
 
-function SortableOverlay({
-  activeId,
-  dropAnimation = dropAnimationOpts,
-  children,
-  ...props
-}: SortableOverlayProps) {
-  return (
-    <DragOverlay dropAnimation={dropAnimation} {...props}>
-      {activeId ? (
-        <SortableItem value={activeId} asChild>
-          {children}
-        </SortableItem>
-      ) : null}
-    </DragOverlay>
-  )
-}
+const SortableOverlay = React.forwardRef<HTMLDivElement, SortableOverlayProps>(
+  (
+    { activeId, dropAnimation = dropAnimationOpts, children, ...props },
+    ref
+  ) => {
+    return (
+      <DragOverlay dropAnimation={dropAnimation} {...props}>
+        {activeId ? (
+          <SortableItem
+            ref={ref}
+            value={activeId}
+            className="cursor-grabbing"
+            asChild
+          >
+            {children}
+          </SortableItem>
+        ) : null}
+      </DragOverlay>
+    )
+  }
+)
+SortableOverlay.displayName = "SortableOverlay"
 
 interface SortableItemContextProps {
   attributes: React.HTMLAttributes<HTMLElement>
@@ -273,7 +279,7 @@ const SortableItem = React.forwardRef<HTMLDivElement, SortableItemProps>(
       [attributes, listeners, isDragging]
     )
     const style: React.CSSProperties = {
-      opacity: isDragging ? 0.4 : undefined,
+      opacity: isDragging ? 0.5 : 1,
       transform: CSS.Translate.toString(transform),
       transition,
     }
@@ -284,7 +290,11 @@ const SortableItem = React.forwardRef<HTMLDivElement, SortableItemProps>(
       <SortableItemContext.Provider value={context}>
         <Comp
           data-state={isDragging ? "dragging" : undefined}
-          className={cn("data-[state=dragging]:cursor-grabbing", className)}
+          className={cn(
+            "data-[state=dragging]:cursor-grabbing",
+            { "cursor-grab": !isDragging && asTrigger },
+            className
+          )}
           ref={composeRefs(ref, setNodeRef as React.Ref<HTMLDivElement>)}
           style={style}
           {...(asTrigger ? attributes : {})}