Skip to content

Commit eb58e40

Browse files
devongovettdevongovett
authored
docs: Update dnd docs for new getItems API (#8769)
1 parent 62eb6ce commit eb58e40

File tree

3 files changed

+153
-81
lines changed

3 files changed

+153
-81
lines changed

‎packages/react-aria-components/docs/GridList.mdx

Lines changed: 60 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -859,6 +859,11 @@ This uses [useListData](../react-stately/useListData.html) from React Stately to
859859
import {useListData} from 'react-stately';
860860
import {useDragAndDrop} from 'react-aria-components';
861861

862+
interface Item {
863+
id: number,
864+
name: string
865+
}
866+
862867
function Example() {
863868
let list = useListData({
864869
initialItems: [
@@ -871,8 +876,8 @@ function Example() {
871876
});
872877

873878
///- begin highlight -///
874-
let {dragAndDropHooks} = useDragAndDrop({
875-
getItems: (keys) => [...keys].map(key => ({'text/plain': list.getItem(key).name})),
879+
let {dragAndDropHooks} = useDragAndDrop<Item>({
880+
getItems: (keys, items) => items.map(item => ({'text/plain': item.name})),
876881
onReorder(e) {
877882
if (e.target.dropPosition === 'before') {
878883
list.moveBefore(e.target.key, e.keys);
@@ -948,11 +953,18 @@ This example renders a custom drag preview which shows the number of items being
948953
import {useListData} from 'react-stately';
949954
import {useDragAndDrop} from 'react-aria-components';
950955

956+
///- begin collapse -///
957+
interface Item {
958+
id: number,
959+
name: string
960+
}
961+
///- end collapse -///
962+
951963
function Example() {
952-
let {dragAndDropHooks} = useDragAndDrop({
964+
let {dragAndDropHooks} = useDragAndDrop<Item>({
953965
// ...
954966
///- begin collapse -///
955-
getItems: (keys) => [...keys].map(key => ({'text/plain': list.getItem(key).name})),
967+
getItems: (keys, items) => items.map(item => ({'text/plain': item.name})),
956968
onReorder(e) {
957969
if (e.target.dropPosition === 'before') {
958970
list.moveBefore(e.target.key, e.keys);
@@ -1029,16 +1041,22 @@ This can be done by returning multiple keys for an item from the `getItems` func
10291041
This example provides representations of each item as plain text, HTML, and a custom app-specific data format. Dropping on the drop targets in this page will use the custom data format to render formatted items. If you drop in an external application supporting rich text, the HTML representation will be used. Dropping in a text editor will use the plain text format.
10301042

10311043
```tsx example export=true
1044+
interface RichTextItem {
1045+
id: string,
1046+
name: string,
1047+
style: string
1048+
}
1049+
10321050
function DraggableGridList() {
1033-
let items = new Map([
1034-
['ps', {name: 'Photoshop', style: 'strong'}],
1035-
['xd', {name: 'XD', style: 'strong'}],
1036-
['id', {name: 'InDesign', style: 'strong'}],
1037-
['dw', {name: 'Dreamweaver', style: 'em'}],
1038-
['co', {name: 'Connect', style: 'em'}]
1039-
]);
1051+
let items: RichTextItem[] = [
1052+
{id: 'ps', name: 'Photoshop', style: 'strong'},
1053+
{id: 'xd', name: 'XD', style: 'strong'},
1054+
{id: 'id', name: 'InDesign', style: 'strong'},
1055+
{id: 'dw', name: 'Dreamweaver', style: 'em'},
1056+
{id: 'co', name: 'Connect', style: 'em'}
1057+
];
10401058

1041-
let { dragAndDropHooks } = useDragAndDrop({
1059+
let { dragAndDropHooks } = useDragAndDrop<RichTextItem>({
10421060
///- begin collapse -///
10431061
renderDragPreview(items) {
10441062
return (
@@ -1050,13 +1068,12 @@ function DraggableGridList() {
10501068
},
10511069
///- end collapse -///
10521070
/*- begin highlight -*/
1053-
getItems(keys) {
1054-
return [...keys].map(key => {
1055-
let item = items.get(key as string)!;
1071+
getItems(keys, items) {
1072+
return items.map(item => {
10561073
return {
10571074
'text/plain': item.name,
10581075
'text/html': `<${item.style}>${item.name}</${item.style}>`,
1059-
'custom-app-type': JSON.stringify({id: key, ...item})
1076+
'custom-app-type': JSON.stringify(item)
10601077
};
10611078
});
10621079
},
@@ -1065,7 +1082,7 @@ function DraggableGridList() {
10651082

10661083
return (
10671084
<MyGridList aria-label="Draggable list" selectionMode="multiple" items={items} dragAndDropHooks={dragAndDropHooks}>
1068-
{([id, item]) => <MyItem id={id} textValue={item.name}>{React.createElement(item.style || 'span', null, item.name)}</MyItem>}
1085+
{item => <MyItem textValue={item.name}>{React.createElement(item.style || 'span', null, item.name)}</MyItem>}
10691086
</MyGridList>
10701087
);
10711088
}
@@ -1082,15 +1099,17 @@ function DraggableGridList() {
10821099
Dropping on the GridList as a whole can be enabled using the `onRootDrop` event. When a valid drag hovers over the GridList, it receives the `isDropTarget` state and can be styled using the `[data-drop-target]` CSS selector.
10831100

10841101
```tsx example
1102+
///- begin collapse -///
10851103
interface Item {
10861104
id: number,
10871105
name: string
10881106
}
1107+
///- end collapse -///
10891108

10901109
function Example() {
10911110
let [items, setItems] = React.useState<Item[]>([]);
10921111

1093-
let { dragAndDropHooks } = useDragAndDrop({
1112+
let { dragAndDropHooks } = useDragAndDrop<Item>({
10941113
/*- begin highlight -*/
10951114
async onRootDrop(e) {
10961115
let items = await Promise.all(e.items.map(async (item, i) => {
@@ -1528,6 +1547,13 @@ The `onDragEnd` event allows the drag source to respond when a drag that it init
15281547
This example removes the dragged items from the UI when a move operation is completed. Try holding the <Keyboard>Option</Keyboard> or <Keyboard>Alt</Keyboard> keys to change the operation to copy, and see how the behavior changes.
15291548

15301549
```tsx example
1550+
///- begin collapse -///
1551+
interface Item {
1552+
id: number,
1553+
name: string
1554+
}
1555+
///- end collapse -///
1556+
15311557
function Example() {
15321558
let list = useListData({
15331559
initialItems: [
@@ -1539,7 +1565,7 @@ function Example() {
15391565
]
15401566
});
15411567

1542-
let { dragAndDropHooks } = useDragAndDrop({
1568+
let { dragAndDropHooks } = useDragAndDrop<Item>({
15431569
///- begin collapse -///
15441570
renderDragPreview(items) {
15451571
return (
@@ -1549,9 +1575,8 @@ function Example() {
15491575
</div>
15501576
);
15511577
},
1552-
getItems(keys) {
1553-
return [...keys].map(key => {
1554-
let item = list.getItem(key);
1578+
getItems(keys, items) {
1579+
return items.map(item => {
15551580
return {
15561581
'text/plain': item.name,
15571582
'custom-app-type': JSON.stringify(item)
@@ -1585,6 +1610,13 @@ function Example() {
15851610
The drag source can also control which drop operations are allowed for the data. For example, if moving data is not allowed, and only copying is supported, the `getAllowedDropOperations` function could be implemented to indicate this. When you drag the element below, the cursor now shows the copy affordance by default, and pressing a modifier to switch drop operations results in the drop being canceled.
15861611

15871612
```tsx example
1613+
///- begin collapse -///
1614+
interface Item {
1615+
id: number,
1616+
name: string
1617+
}
1618+
///- end collapse -///
1619+
15881620
function Example() {
15891621
///- begin collapse -///
15901622
let list = useListData({
@@ -1599,7 +1631,7 @@ function Example() {
15991631
///- end collapse -///
16001632
// ...
16011633

1602-
let { dragAndDropHooks } = useDragAndDrop({
1634+
let { dragAndDropHooks } = useDragAndDrop<Item>({
16031635
///- begin collapse -///
16041636
renderDragPreview(items) {
16051637
return (
@@ -1609,9 +1641,8 @@ function Example() {
16091641
</div>
16101642
);
16111643
},
1612-
getItems(keys) {
1613-
return [...keys].map(key => {
1614-
let item = list.getItem(key);
1644+
getItems(keys, items) {
1645+
return items.map(item => {
16151646
return {
16161647
'text/plain': item.name,
16171648
'custom-app-type': JSON.stringify(item)
@@ -1737,7 +1768,7 @@ function DndGridList(props: DndGridListProps) {
17371768
initialItems: props.initialItems
17381769
});
17391770

1740-
let { dragAndDropHooks } = useDragAndDrop({
1771+
let { dragAndDropHooks } = useDragAndDrop<FileItem>({
17411772
///- begin collapse -///
17421773
renderDragPreview(items) {
17431774
return (
@@ -1749,9 +1780,8 @@ function DndGridList(props: DndGridListProps) {
17491780
},
17501781
///- end collapse -///
17511782
// Provide drag data in a custom format as well as plain text.
1752-
getItems(keys) {
1753-
return [...keys].map((key) => {
1754-
let item = list.getItem(key);
1783+
getItems(keys, items) {
1784+
return items.map(item => {
17551785
return {
17561786
'custom-app-type': JSON.stringify(item),
17571787
'text/plain': item.name

0 commit comments

Comments
 (0)