diff --git a/.changeset/was-sorting-rename.md b/.changeset/was-sorting-rename.md new file mode 100644 index 00000000..8e18da3e --- /dev/null +++ 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 index fb412070..2d4c1b88 100644 --- 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; + wasDragging: MutableRefObject; } export const Context = React.createContext({ @@ -36,7 +36,7 @@ export const Context = React.createContext({ 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 index 5b47db20..c7cbfc5f 100644 --- 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 index f4ba6cca..2a77c904 100644 --- 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 index 8298fdb7..71633254 100644 --- 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 index 9479d0b2..8f0afee8 100644 --- 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 index aa0b53c4..4edc62ff 100644 --- 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 index b1b2481e..05622026 100644 --- 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 {