fix: make cursor grabbing hook more explicit

Longhorn-Developers · Feb 3, 2025 · 99360bf · 99360bf
1 parent fdf0a98
commit 99360bf
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 10 deletions.
diff --git a/src/views/components/common/SortableList.tsx b/src/views/components/common/SortableList.tsx
@@ -51,7 +51,7 @@ export function SortableList<T extends BaseItem>({
 }: ListProps<T>): JSX.Element {
     const [active, setActive] = useState<Active | null>(null);
     const [items, setItems] = useState<T[]>(draggables);
-    const { setCursor } = useCursor();
+    const { setCursorGrabbing } = useCursor();
 
     useEffect(() => {
         setItems(draggables);
@@ -73,11 +73,11 @@ export function SortableList<T extends BaseItem>({
                     modifiers={[restrictToParentElement]}
                     sensors={sensors}
                     onDragStart={({ active }) => {
-                        setCursor('grabbing');
+                        setCursorGrabbing(true);
                         setActive(active);
                     }}
                     onDragEnd={({ active, over }) => {
-                        setCursor('default');
+                        setCursorGrabbing(false);
                         if (over && active.id !== over.id) {
                             const activeIndex = items.findIndex(({ id }) => id === active.id);
                             const overIndex = items.findIndex(({ id }) => id === over.id);
@@ -88,7 +88,7 @@ export function SortableList<T extends BaseItem>({
                         setActive(null);
                     }}
                     onDragCancel={() => {
-                        setCursor('default');
+                        setCursorGrabbing(false);
                         setActive(null);
                     }}
                 >

diff --git a/src/views/hooks/useCursor.tsx b/src/views/hooks/useCursor.tsx
@@ -8,18 +8,19 @@ export const useCursor = () => {
         const html = document.documentElement;
         return () => {
             html.style.removeProperty('cursor');
-            html.classList.remove('[&_*]:!cursor-grabbing', '!cursor-grabbing');
+            html.classList.remove('[&_*]:!cursor-grabbing');
         };
     }, []);
 
-    const setCursor = (cursor: string) => {
+    const setCursorGrabbing = (isGrabbing: boolean) => {
         const html = document.documentElement;
-        if (cursor === 'grabbing') {
-            html.classList.add('[&_*]:!cursor-grabbing', '!cursor-grabbing');
+
+        if (isGrabbing) {
+            html.classList.add('[&_*]:!cursor-grabbing');
         } else {
-            html.classList.remove('[&_*]:!cursor-grabbing', '!cursor-grabbing');
+            html.classList.remove('[&_*]:!cursor-grabbing');
         }
     };
 
-    return { setCursor };
+    return { setCursorGrabbing };
 };