Update wasSorting property to wasDragging

clauderic · Sep 10, 2021 · 9cfac05 · 9cfac05
1 parent 431a9e7
commit 9cfac05
Show file tree

Hide file tree

Showing 8 changed files with 22 additions and 16 deletions.
diff --git a/.changeset/was-sorting-rename.md b/.changeset/was-sorting-rename.md
@@ -0,0 +1,5 @@
+---
+'@dnd-kit/sortable': major
+---
+
+Renamed the `wasSorting` property to `wasDragging` on the `SortableContext` and `AnimateLayoutChanges` interfaces.
diff --git a/packages/sortable/src/components/SortableContext.tsx b/packages/sortable/src/components/SortableContext.tsx
@@ -24,7 +24,7 @@ interface ContextDescriptor {
   useDragOverlay: boolean;
   sortedRects: LayoutRect[];
   strategy: SortingStrategy;
-  wasSorting: MutableRefObject<boolean>;
+  wasDragging: MutableRefObject<boolean>;
 }
 
 export const Context = React.createContext<ContextDescriptor>({
@@ -36,7 +36,7 @@ export const Context = React.createContext<ContextDescriptor>({
   useDragOverlay: false,
   sortedRects: [],
   strategy: rectSortingStrategy,
-  wasSorting: {current: false},
+  wasDragging: {current: false},
 });
 
 export function SortableContext({
@@ -63,8 +63,9 @@ export function SortableContext({
     [userDefinedItems]
   );
   const activeIndex = active ? items.indexOf(active.id) : -1;
+  const isDragging = active != null;
   const isSorting = activeIndex !== -1;
-  const wasSorting = useRef(isSorting);
+  const wasDragging = useRef(isDragging);
   const overIndex = over ? items.indexOf(over.id) : -1;
   const previousItemsRef = useRef(items);
   const sortedRects = getSortedRects(items, droppableRects);
@@ -85,9 +86,9 @@ export function SortableContext({
 
   useEffect(() => {
     requestAnimationFrame(() => {
-      wasSorting.current = isSorting;
+      wasDragging.current = isDragging;
     });
-  }, [isSorting]);
+  }, [isDragging]);
 
   const contextValue = useMemo(
     (): ContextDescriptor => ({
@@ -99,7 +100,7 @@ export function SortableContext({
       useDragOverlay,
       sortedRects,
       strategy,
-      wasSorting,
+      wasDragging,
     }),
     [
       activeIndex,
@@ -110,7 +111,7 @@ export function SortableContext({
       sortedRects,
       useDragOverlay,
       strategy,
-      wasSorting,
+      wasDragging,
     ]
   );
 

diff --git a/packages/sortable/src/hooks/types.ts b/packages/sortable/src/hooks/types.ts
@@ -15,5 +15,5 @@ export type AnimateLayoutChanges = (args: {
   previousContainerId: UniqueIdentifier;
   newIndex: number;
   transition: SortableTransition | null;
-  wasSorting: boolean;
+  wasDragging: boolean;
 }) => boolean;
diff --git a/packages/sortable/src/hooks/useSortable.ts b/packages/sortable/src/hooks/useSortable.ts
@@ -39,7 +39,7 @@ export function useSortable({
     overIndex,
     useDragOverlay,
     strategy: globalStrategy,
-    wasSorting,
+    wasDragging,
   } = useContext(Context);
   const index = items.indexOf(id);
   const data = useMemo(
@@ -73,7 +73,7 @@ export function useSortable({
   const isSorting = Boolean(active);
   const displaceItem =
     isSorting &&
-    wasSorting.current &&
+    wasDragging.current &&
     !disableTransforms &&
     isValidIndex(activeIndex) &&
     isValidIndex(overIndex);
@@ -111,7 +111,7 @@ export function useSortable({
     previousItems: prevItems.current,
     previousContainerId: previousContainerId.current,
     transition,
-    wasSorting: wasSorting.current,
+    wasDragging: wasDragging.current,
   });
   const derivedTransform = useDerivedTransform({
     disabled: !shouldAnimateLayoutChanges,

diff --git a/stories/2 - Presets/Sortable/1-Vertical.story.tsx b/stories/2 - Presets/Sortable/1-Vertical.story.tsx
@@ -149,7 +149,7 @@ export const RerenderBeforeSorting = () => {
 
 export const RemovableItems = () => {
   const animateLayoutChanges: AnimateLayoutChanges = (args) =>
-    args.isSorting || args.wasSorting
+    args.isSorting || args.wasDragging
       ? defaultAnimateLayoutChanges(args)
       : true;
 

diff --git a/stories/2 - Presets/Sortable/2-Horizontal.story.tsx b/stories/2 - Presets/Sortable/2-Horizontal.story.tsx
@@ -115,7 +115,7 @@ export const MarginBetweenItems = () => {
 
 export const RemovableItems = () => {
   const animateLayoutChanges: AnimateLayoutChanges = (args) =>
-    args.isSorting || args.wasSorting
+    args.isSorting || args.wasDragging
       ? defaultAnimateLayoutChanges(args)
       : true;
 

diff --git a/stories/2 - Presets/Sortable/3-Grid.story.tsx b/stories/2 - Presets/Sortable/3-Grid.story.tsx
@@ -125,7 +125,7 @@ export const MinimumDistance = () => (
 
 export const RemovableItems = () => {
   const animateLayoutChanges: AnimateLayoutChanges = (args) =>
-    args.isSorting || args.wasSorting
+    args.isSorting || args.wasDragging
       ? defaultAnimateLayoutChanges(args)
       : true;
 

diff --git a/stories/3 - Examples/Tree/components/TreeItem/SortableTreeItem.tsx b/stories/3 - Examples/Tree/components/TreeItem/SortableTreeItem.tsx
@@ -9,8 +9,8 @@ interface Props extends TreeItemProps {
   id: string;
 }
 
-const animateLayoutChanges: AnimateLayoutChanges = ({isSorting, wasSorting}) =>
-  isSorting || wasSorting ? false : true;
+const animateLayoutChanges: AnimateLayoutChanges = ({isSorting, wasDragging}) =>
+  isSorting || wasDragging ? false : true;
 
 export function SortableTreeItem({id, depth, ...props}: Props) {
   const {