Introduce useDndMonitor hook

clauderic · Apr 18, 2021 · 18ee17a · 18ee17a
1 parent a9d92cf
commit 18ee17a
Show file tree

Hide file tree

Showing 17 changed files with 279 additions and 171 deletions.
diff --git a/packages/accessibility/src/hooks/useAnnouncement.ts b/packages/accessibility/src/hooks/useAnnouncement.ts
@@ -1,7 +1,12 @@
-import {useState} from 'react';
+import {useCallback, useState} from 'react';
 
 export function useAnnouncement() {
   const [announcement, setAnnouncement] = useState('');
+  const announce = useCallback((value: string | undefined) => {
+    if (value != null) {
+      setAnnouncement(value);
+    }
+  }, []);
 
-  return {announce: setAnnouncement, announcement} as const;
+  return {announce, announcement} as const;
 }
diff --git a/packages/core/src/components/Accessibility/Accessibility.tsx b/packages/core/src/components/Accessibility/Accessibility.tsx
@@ -1,73 +1,46 @@
-import React, {useRef, useEffect} from 'react';
+import React, {useMemo} from 'react';
 import {createPortal} from 'react-dom';
 import {canUseDOM, useUniqueId} from '@dnd-kit/utilities';
 import {HiddenText, LiveRegion, useAnnouncement} from '@dnd-kit/accessibility';
 
 import type {Announcements, ScreenReaderInstructions} from './types';
 import type {UniqueIdentifier} from '../../types';
 import {defaultAnnouncements} from './defaults';
-import {Action, State} from '../../store';
+import {DndMonitorArguments, useDndMonitor} from '../../hooks';
 
 interface Props {
   announcements?: Announcements;
-  activeId: UniqueIdentifier | null;
-  overId: UniqueIdentifier | null;
-  lastEvent: State['draggable']['lastEvent'];
   screenReaderInstructions: ScreenReaderInstructions;
   hiddenTextDescribedById: UniqueIdentifier;
 }
 
 export function Accessibility({
   announcements = defaultAnnouncements,
-  activeId,
-  overId,
-  lastEvent,
   hiddenTextDescribedById,
   screenReaderInstructions,
 }: Props) {
   const {announce, announcement} = useAnnouncement();
-  const tracked = useRef({
-    activeId,
-    overId,
-  });
   const liveRegionId = useUniqueId(`DndLiveRegion`);
 
-  useEffect(() => {
-    const {
-      activeId: previousActiveId,
-      overId: previousOverId,
-    } = tracked.current;
-    let announcement: string | undefined;
-
-    if (!previousActiveId && activeId) {
-      announcement = announcements.onDragStart(activeId);
-    } else if (!activeId && previousActiveId) {
-      if (lastEvent === Action.DragEnd) {
-        announcement = announcements.onDragEnd(
-          previousActiveId,
-          previousOverId ?? undefined
-        );
-      } else if (lastEvent === Action.DragCancel) {
-        announcement = announcements.onDragCancel(previousActiveId);
-      }
-    } else if (activeId && previousActiveId && overId !== previousOverId) {
-      announcement = announcements.onDragOver(activeId, overId ?? undefined);
-    }
-
-    if (announcement) {
-      announce(announcement);
-    }
-
-    if (
-      tracked.current.overId !== overId ||
-      tracked.current.activeId !== activeId
-    ) {
-      tracked.current = {
-        activeId,
-        overId,
-      };
-    }
-  }, [announcements, announce, activeId, overId, lastEvent]);
+  useDndMonitor(
+    useMemo<DndMonitorArguments>(
+      () => ({
+        onDragStart({active}) {
+          announce(announcements.onDragStart(active.id));
+        },
+        onDragOver({active, over}) {
+          announce(announcements.onDragOver(active.id, over?.id));
+        },
+        onDragEnd({active, over}) {
+          announce(announcements.onDragEnd(active.id, over?.id));
+        },
+        onDragCancel({active}) {
+          announce(announcements.onDragCancel(active.id));
+        },
+      }),
+      [announce, announcements]
+    )
+  );
 
   return canUseDOM
     ? createPortal(