Skip to content

Commit b4b406c

Browse files
LFDanLuLFDanLu
authored
Revert "feat(dnd): pass keys and draggedKey as arguments to renderDropIndicator (#8459)" (#8582)
This reverts commit 66d65a9.
1 parent 587b230 commit b4b406c

File tree

12 files changed

+23
-196
lines changed

12 files changed

+23
-196
lines changed

‎packages/react-aria-components/src/Collection.tsx‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -114,7 +114,7 @@ export interface CollectionBranchProps {
114114
/** The parent node of the items to render. */
115115
parent: Node<unknown>,
116116
/** A function that renders a drop indicator between items. */
117-
renderDropIndicator?: (target: ItemDropTarget, keys?: Set<Key>, draggedKey?: Key) => ReactNode
117+
renderDropIndicator?: (target: ItemDropTarget) => ReactNode
118118
}
119119

120120
export interface CollectionRootProps extends HTMLAttributes<HTMLElement> {
@@ -125,7 +125,7 @@ export interface CollectionRootProps extends HTMLAttributes<HTMLElement> {
125125
/** A ref to the scroll container for the collection. */
126126
scrollRef?: RefObject<HTMLElement | null>,
127127
/** A function that renders a drop indicator between items. */
128-
renderDropIndicator?: (target: ItemDropTarget, keys?: Set<Key>, draggedKey?: Key) => ReactNode
128+
renderDropIndicator?: (target: ItemDropTarget) => ReactNode
129129
}
130130

131131
export interface CollectionRenderer {
@@ -153,7 +153,7 @@ export const DefaultCollectionRenderer: CollectionRenderer = {
153153
function useCollectionRender(
154154
collection: ICollection<Node<unknown>>,
155155
parent: Node<unknown> | null,
156-
renderDropIndicator?: (target: ItemDropTarget, keys?: Set<Key>, draggedKey?: Key) => ReactNode
156+
renderDropIndicator?: (target: ItemDropTarget) => ReactNode
157157
) {
158158
return useCachedChildren({
159159
items: parent ? collection.getChildren!(parent.key) : collection,
@@ -175,7 +175,7 @@ function useCollectionRender(
175175
});
176176
}
177177

178-
export function renderAfterDropIndicators(collection: ICollection<Node<unknown>>, node: Node<unknown>, renderDropIndicator: (target: ItemDropTarget, keys?: Set<Key>, draggedKey?: Key) => ReactNode): ReactNode {
178+
export function renderAfterDropIndicators(collection: ICollection<Node<unknown>>, node: Node<unknown>, renderDropIndicator: (target: ItemDropTarget) => ReactNode): ReactNode {
179179
let key = node.key;
180180
let keyAfter = collection.getKeyAfter(key);
181181
let nextItemInFlattenedCollection = keyAfter != null ? collection.getItem(keyAfter) : null;

‎packages/react-aria-components/src/DragAndDrop.tsx‎

Lines changed: 3 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -47,23 +47,17 @@ export const DropIndicator = forwardRef(function DropIndicator(props: DropIndica
4747

4848
type RenderDropIndicatorRetValue = ((target: ItemDropTarget) => ReactNode | undefined) | undefined
4949

50-
export function useRenderDropIndicator(dragAndDropHooks?: DragAndDropHooks, dropState?: DroppableCollectionState, dragState?: DraggableCollectionState): RenderDropIndicatorRetValue {
50+
export function useRenderDropIndicator(dragAndDropHooks?: DragAndDropHooks, dropState?: DroppableCollectionState): RenderDropIndicatorRetValue {
5151
let renderDropIndicator = dragAndDropHooks?.renderDropIndicator;
5252
let isVirtualDragging = dragAndDropHooks?.isVirtualDragging?.();
5353
let fn = useCallback((target: ItemDropTarget) => {
5454
// Only show drop indicators when virtual dragging or this is the current drop target.
5555
if (isVirtualDragging || dropState?.isDropTarget(target)) {
56-
if (renderDropIndicator) {
57-
let keys = dragState?.draggingKeys ?? undefined;
58-
let draggedKey = dragState?.draggedKey ?? undefined;
59-
return renderDropIndicator(target, keys, draggedKey);
60-
} else {
61-
return <DropIndicator target={target} />;
62-
}
56+
return renderDropIndicator ? renderDropIndicator(target) : <DropIndicator target={target} />;
6357
}
6458
// We invalidate whenever the target changes.
6559
// eslint-disable-next-line react-hooks/exhaustive-deps
66-
}, [dropState?.target, isVirtualDragging, renderDropIndicator, dragState?.draggingKeys, dragState?.draggedKey]);
60+
}, [dropState?.target, isVirtualDragging, renderDropIndicator]);
6761
return dragAndDropHooks?.useDropIndicator ? fn : undefined;
6862
}
6963

‎packages/react-aria-components/src/GridList.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -252,7 +252,7 @@ function GridListInner<T extends object>({props, collection, gridListRef: ref}:
252252
collection={collection}
253253
scrollRef={ref}
254254
persistedKeys={useDndPersistedKeys(selectionManager, dragAndDropHooks, dropState)}
255-
renderDropIndicator={useRenderDropIndicator(dragAndDropHooks, dropState, dragState)} />
255+
renderDropIndicator={useRenderDropIndicator(dragAndDropHooks, dropState)} />
256256
</Provider>
257257
{emptyState}
258258
{dragPreview}

‎packages/react-aria-components/src/ListBox.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -261,7 +261,7 @@ function ListBoxInner<T extends object>({state: inputState, props, listBoxRef}:
261261
collection={collection}
262262
scrollRef={listBoxRef}
263263
persistedKeys={useDndPersistedKeys(selectionManager, dragAndDropHooks, dropState)}
264-
renderDropIndicator={useRenderDropIndicator(dragAndDropHooks, dropState, dragState)} />
264+
renderDropIndicator={useRenderDropIndicator(dragAndDropHooks, dropState)} />
265265
</Provider>
266266
{emptyState}
267267
{dragPreview}
@@ -274,7 +274,7 @@ export interface ListBoxSectionProps<T> extends SectionProps<T> {}
274274

275275
function ListBoxSectionInner<T extends object>(props: ListBoxSectionProps<T>, ref: ForwardedRef<HTMLElement>, section: Node<T>, className = 'react-aria-ListBoxSection') {
276276
let state = useContext(ListStateContext)!;
277-
let {dragAndDropHooks, dragState, dropState} = useContext(DragAndDropContext)!;
277+
let {dragAndDropHooks, dropState} = useContext(DragAndDropContext)!;
278278
let {CollectionBranch} = useContext(CollectionRendererContext);
279279
let [headingRef, heading] = useSlot();
280280
let {headingProps, groupProps} = useListBoxSection({
@@ -299,7 +299,7 @@ function ListBoxSectionInner<T extends object>(props: ListBoxSectionProps<T>, re
299299
<CollectionBranch
300300
collection={state.collection}
301301
parent={section}
302-
renderDropIndicator={useRenderDropIndicator(dragAndDropHooks, dropState, dragState)} />
302+
renderDropIndicator={useRenderDropIndicator(dragAndDropHooks, dropState)} />
303303
</HeaderContext.Provider>
304304
</section>
305305
);

‎packages/react-aria-components/src/Table.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -924,7 +924,7 @@ export const TableBody = /*#__PURE__*/ createBranchComponent('tablebody', <T ext
924924
let {isVirtualized} = useContext(CollectionRendererContext);
925925
let collection = state.collection;
926926
let {CollectionBranch} = useContext(CollectionRendererContext);
927-
let {dragAndDropHooks, dragState, dropState} = useContext(DragAndDropContext);
927+
let {dragAndDropHooks, dropState} = useContext(DragAndDropContext);
928928
let isDroppable = !!dragAndDropHooks?.useDroppableCollectionState && !dropState?.isDisabled;
929929
let isRootDropTarget = isDroppable && !!dropState && (dropState.isDropTarget({type: 'root'}) ?? false);
930930

@@ -982,7 +982,7 @@ export const TableBody = /*#__PURE__*/ createBranchComponent('tablebody', <T ext
982982
<CollectionBranch
983983
collection={collection}
984984
parent={collection.body}
985-
renderDropIndicator={useRenderDropIndicator(dragAndDropHooks, dropState, dragState)} />
985+
renderDropIndicator={useRenderDropIndicator(dragAndDropHooks, dropState)} />
986986
{emptyState}
987987
</TBody>
988988
);

‎packages/react-aria-components/src/Tree.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -404,7 +404,7 @@ function TreeInner<T extends object>({props, collection, treeRef: ref}: TreeInne
404404
collection={state.collection}
405405
persistedKeys={useDndPersistedKeys(state.selectionManager, dragAndDropHooks, dropState)}
406406
scrollRef={ref}
407-
renderDropIndicator={useRenderDropIndicator(dragAndDropHooks, dropState, dragState)} />
407+
renderDropIndicator={useRenderDropIndicator(dragAndDropHooks, dropState)} />
408408
</Provider>
409409
{emptyState}
410410
</div>

‎packages/react-aria-components/src/Virtualizer.tsx‎

Lines changed: 7 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@
1111
*/
1212

1313
import {CollectionBranchProps, CollectionRenderer, CollectionRendererContext, CollectionRootProps, renderAfterDropIndicators} from './Collection';
14-
import {DropTargetDelegate, ItemDropTarget, Key, Node} from '@react-types/shared';
14+
import {DropTargetDelegate, ItemDropTarget, Node} from '@react-types/shared';
1515
import {Layout, ReusableView, useVirtualizerState, VirtualizerState} from '@react-stately/virtualizer';
1616
import React, {createContext, JSX, ReactNode, useContext, useMemo} from 'react';
1717
import {useScrollView, VirtualizerItem} from '@react-aria/virtualizer';
@@ -117,14 +117,14 @@ function CollectionBranch({parent, renderDropIndicator}: CollectionBranchProps)
117117
return renderChildren(parentView, Array.from(parentView.children), renderDropIndicator);
118118
}
119119

120-
function renderChildren(parent: View | null, children: View[], renderDropIndicator?: (target: ItemDropTarget, keys?: Set<Key>, draggedKey?: Key) => ReactNode) {
120+
function renderChildren(parent: View | null, children: View[], renderDropIndicator?: (target: ItemDropTarget) => ReactNode) {
121121
return children.map(view => renderWrapper(parent, view, renderDropIndicator));
122122
}
123123

124124
function renderWrapper(
125125
parent: View | null,
126126
reusableView: View,
127-
renderDropIndicator?: (target: ItemDropTarget, keys?: Set<Key>, draggedKey?: Key) => ReactNode
127+
renderDropIndicator?: (target: ItemDropTarget) => ReactNode
128128
): ReactNode {
129129
let rendered = (
130130
<VirtualizerItem
@@ -141,9 +141,9 @@ function renderWrapper(
141141
if (node?.type === 'item' && renderDropIndicator && layout.getDropTargetLayoutInfo) {
142142
rendered = (
143143
<React.Fragment key={reusableView.key}>
144-
{renderDropIndicatorWrapper(parent, reusableView, {type: 'item', key: reusableView.content!.key, dropPosition: 'before'}, (target, keys, draggedKey) => renderDropIndicator(target, keys, draggedKey))}
144+
{renderDropIndicatorWrapper(parent, reusableView, {type: 'item', key: reusableView.content!.key, dropPosition: 'before'}, renderDropIndicator)}
145145
{rendered}
146-
{renderAfterDropIndicators(collection, node, (target, keys, draggedKey) => renderDropIndicatorWrapper(parent, reusableView, target, (innerTarget, innerKeys, innerDraggedKey) => renderDropIndicator(innerTarget, innerKeys, innerDraggedKey), keys, draggedKey))}
146+
{renderAfterDropIndicators(collection, node, target => renderDropIndicatorWrapper(parent, reusableView, target, renderDropIndicator))}
147147
</React.Fragment>
148148
);
149149
}
@@ -155,11 +155,9 @@ function renderDropIndicatorWrapper(
155155
parent: View | null,
156156
reusableView: View,
157157
target: ItemDropTarget,
158-
renderDropIndicator: (target: ItemDropTarget, keys?: Set<Key>, draggedKey?: Key) => ReactNode,
159-
keys: Set<Key> = new Set(),
160-
draggedKey?: Key
158+
renderDropIndicator: (target: ItemDropTarget) => ReactNode
161159
) {
162-
let indicator = renderDropIndicator(target, keys, draggedKey);
160+
let indicator = renderDropIndicator(target);
163161
if (indicator) {
164162
let layoutInfo = reusableView.virtualizer.layout.getDropTargetLayoutInfo!(target);
165163
indicator = (

‎packages/react-aria-components/src/useDragAndDrop.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -59,7 +59,7 @@ interface DropHooks {
5959
useDroppableCollection?: (props: DroppableCollectionOptions, state: DroppableCollectionState, ref: RefObject<HTMLElement | null>) => DroppableCollectionResult,
6060
useDroppableItem?: (options: DroppableItemOptions, state: DroppableCollectionState, ref: RefObject<HTMLElement | null>) => DroppableItemResult,
6161
useDropIndicator?: (props: AriaDropIndicatorProps, state: DroppableCollectionState, ref: RefObject<HTMLElement | null>) => DropIndicatorAria,
62-
renderDropIndicator?: (target: DropTarget, keys?: Set<Key>, draggedKey?: Key) => JSX.Element,
62+
renderDropIndicator?: (target: DropTarget) => JSX.Element,
6363
dropTargetDelegate?: DropTargetDelegate,
6464
ListDropTargetDelegate: typeof ListDropTargetDelegate
6565
}
@@ -87,7 +87,7 @@ export interface DragAndDropOptions extends Omit<DraggableCollectionProps, 'prev
8787
* This should render a `<DropIndicator>` element. If this function is not provided, a
8888
* default DropIndicator is provided.
8989
*/
90-
renderDropIndicator?: (target: DropTarget, keys?: Set<Key>, draggedKey?: Key) => JSX.Element,
90+
renderDropIndicator?: (target: DropTarget) => JSX.Element,
9191
/** A custom delegate object that provides drop targets for pointer coordinates within the collection. */
9292
dropTargetDelegate?: DropTargetDelegate,
9393
/** Whether the drag and drop events should be disabled. */

‎packages/react-aria-components/stories/ListBox.stories.tsx‎

Lines changed: 0 additions & 63 deletions
Original file line numberDiff line numberDiff line change
@@ -194,69 +194,6 @@ ListBoxDnd.story = {
194194
}
195195
};
196196

197-
export const ListBoxDndCustomDropIndicator: StoryFn<ListBoxProps<typeof albums[0]>> = (props) => {
198-
let list = useListData({
199-
initialItems: albums
200-
});
201-
202-
let {dragAndDropHooks} = useDragAndDrop({
203-
getItems: (keys) => [...keys].map(key => ({'text/plain': list.getItem(key)?.title ?? ''})),
204-
onReorder(e) {
205-
if (e.target.dropPosition === 'before') {
206-
list.moveBefore(e.target.key, e.keys);
207-
} else if (e.target.dropPosition === 'after') {
208-
list.moveAfter(e.target.key, e.keys);
209-
}
210-
},
211-
renderDropIndicator(target, keys, draggedKey) {
212-
return (
213-
<DropIndicator target={target} style={({isDropTarget}) => ({width: '150px', height: '150px', background: isDropTarget ? 'blue' : 'transparent', color: 'white', display: isDropTarget ? 'flex' : 'none', alignItems: 'center', justifyContent: 'center', flexDirection: 'column'})}>
214-
<div>
215-
keys: {keys ? Array.from(keys).join(', ') : 'undefined'}
216-
</div>
217-
<div>
218-
draggedKey: {draggedKey}
219-
</div>
220-
</DropIndicator>
221-
);
222-
}
223-
});
224-
225-
return (
226-
<ListBox
227-
{...props}
228-
aria-label="Albums"
229-
items={list.items}
230-
selectionMode="multiple"
231-
dragAndDropHooks={dragAndDropHooks}>
232-
{item => (
233-
<ListBoxItem>
234-
<img src={item.image} alt="" />
235-
<Text slot="label">{item.title}</Text>
236-
<Text slot="description">{item.artist}</Text>
237-
</ListBoxItem>
238-
)}
239-
</ListBox>
240-
);
241-
};
242-
243-
ListBoxDndCustomDropIndicator.story = {
244-
args: {
245-
layout: 'stack',
246-
orientation: 'horizontal'
247-
},
248-
argTypes: {
249-
layout: {
250-
control: 'radio',
251-
options: ['stack', 'grid']
252-
},
253-
orientation: {
254-
control: 'radio',
255-
options: ['horizontal', 'vertical']
256-
}
257-
}
258-
};
259-
260197
interface PreviewOffsetArgs {
261198
/** Strategy for positioning the preview. */
262199
mode: 'default' | 'custom',

‎packages/react-aria-components/test/GridList.test.js‎

Lines changed: 0 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -851,42 +851,6 @@ describe('GridList', () => {
851851
expect(onReorder).toHaveBeenCalledTimes(1);
852852
});
853853

854-
it('should pass keys and draggedKey to renderDropIndicator', async () => {
855-
let onReorder = jest.fn();
856-
let renderDropIndicatorCalls = [];
857-
let mockRenderDropIndicator = jest.fn((target, keys, draggedKey) => {
858-
renderDropIndicatorCalls.push({target, keys, draggedKey});
859-
return <DropIndicator target={target}>Keys: {keys ? keys.size : 0} DraggedKey: {draggedKey || 'none'}</DropIndicator>;
860-
});
861-
862-
let {getAllByRole} = render(
863-
<DraggableGridList
864-
onReorder={onReorder}
865-
renderDropIndicator={mockRenderDropIndicator} />
866-
);
867-
868-
await user.tab();
869-
await user.keyboard('{ArrowRight}');
870-
await user.keyboard('{Enter}');
871-
act(() => jest.runAllTimers());
872-
873-
expect(mockRenderDropIndicator).toHaveBeenCalled();
874-
875-
renderDropIndicatorCalls.forEach(call => {
876-
expect(call.target).toBeDefined();
877-
expect(call.keys).toBeInstanceOf(Set);
878-
expect(call.keys.size).toBe(1);
879-
expect(call.keys.has('cat')).toBe(true);
880-
expect(call.draggedKey).toBe('cat');
881-
});
882-
883-
let rows = getAllByRole('row');
884-
expect(rows[0]).toHaveTextContent('Keys: 1 DraggedKey: cat');
885-
886-
fireEvent.keyDown(document.activeElement, {key: 'Enter'});
887-
fireEvent.keyUp(document.activeElement, {key: 'Enter'});
888-
});
889-
890854
it('should support dropping on rows', async () => {
891855
let onItemDrop = jest.fn();
892856
let {getAllByRole} = render(<>

0 commit comments

Comments
 (0)