MCPcopy Create free account
hub / github.com/adobe/react-spectrum / useDropIndicator

Function useDropIndicator

packages/react-aria/src/dnd/useDropIndicator.ts:45–127  ·  view source on GitHub ↗
(
  props: DropIndicatorProps,
  state: DroppableCollectionState,
  ref: RefObject<HTMLElement | null>
)

Source from the content-addressed store, hash-verified

43 * Handles drop interactions for a target within a droppable collection.
44 */
45export function useDropIndicator(
46 props: DropIndicatorProps,
47 state: DroppableCollectionState,
48 ref: RefObject<HTMLElement | null>
49): DropIndicatorAria {
50 let {target} = props;
51 let {collection} = state;
52
53 let stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-aria/dnd');
54 let dragSession = DragManager.useDragSession();
55 let {dropProps} = useDroppableItem(props, state, ref);
56 let id = useId();
57 let getText = (key: Key | null) => {
58 if (key == null) {
59 return '';
60 } else {
61 return collection.getTextValue?.(key) ?? collection.getItem(key)?.textValue ?? '';
62 }
63 };
64
65 let label = '';
66 let labelledBy: string | undefined;
67 if (target.type === 'root') {
68 label = stringFormatter.format('dropOnRoot');
69 labelledBy = `${id} ${getDroppableCollectionId(state)}`;
70 } else if (target.dropPosition === 'on') {
71 label = stringFormatter.format('dropOnItem', {
72 itemText: getText(target.key)
73 });
74 } else {
75 let before: Key | null | undefined;
76 let after: Key | null | undefined;
77 if (target.dropPosition === 'before') {
78 let prevKey = collection.getItem(target.key)?.prevKey;
79 let prevNode = prevKey != null ? collection.getItem(prevKey) : null;
80 before = prevNode?.type === 'item' ? prevNode.key : null;
81 } else {
82 before = target.key;
83 }
84
85 if (target.dropPosition === 'after') {
86 let nextKey = collection.getItem(target.key)?.nextKey;
87 let nextNode = nextKey != null ? collection.getItem(nextKey) : null;
88 after = nextNode?.type === 'item' ? nextNode.key : null;
89 } else {
90 after = target.key;
91 }
92
93 if (before != null && after != null) {
94 label = stringFormatter.format('insertBetween', {
95 beforeItemText: getText(before),
96 afterItemText: getText(after)
97 });
98 } else if (before != null) {
99 label = stringFormatter.format('insertAfter', {
100 itemText: getText(before)
101 });
102 } else if (after != null) {

Callers 10

InsertionIndicatorFunction · 0.90
ReorderableGridFunction · 0.90
CollectionItemFunction · 0.90
InsertionIndicatorFunction · 0.90
DroppableGrid.tsxFile · 0.90
CollectionItemFunction · 0.90
InsertionIndicatorFunction · 0.90
InsertionIndicatorFunction · 0.90
RootDropIndicatorFunction · 0.90

Calls 8

useDroppableItemFunction · 0.90
useIdFunction · 0.90
getDroppableCollectionIdFunction · 0.90
isDropTargetMethod · 0.80
getTextFunction · 0.70
getItemMethod · 0.65
formatMethod · 0.45

Tested by

no test coverage detected