Skip to content

Fixing directory drop for docs low level DnD api example #3582

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
LFDanLu merged 2 commits into from
Sep 30, 2022
Merged

Fixing directory drop for docs low level DnD api example #3582

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
953acdf
Fixing directory drops for low level API drop example
LFDanLu Sep 30, 2022
4f988a1
small revision
LFDanLu Sep 30, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
18 changes: 10 additions & 8 deletions packages/@react-spectrum/dnd/docs/dnd.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -240,7 +240,7 @@ let onInsert = async (e) => {
} = e;

let processedItems = await Promise.all(
items.map(async item => JSON.parse(await item.getText(acceptedDragTypes[0])))
items.map(async item => JSON.parse(await item.getText('adobe-app')))
);

if (target.dropPosition === 'before') {
Expand All @@ -262,7 +262,7 @@ let onItemDrop = async (e) => {
target
} = e;
let processedItems = await Promise.all(
items.map(async item => JSON.parse(await item.getText(acceptedDragTypes[0])))
items.map(async item => JSON.parse(await item.getText('adobe-app')))
);
let targetItem = list.getItem(target.key);
list.update(target.key, {...targetItem, childNodes: [...targetItem.childNodes, ...processedItems]});
Expand Down Expand Up @@ -291,15 +291,17 @@ function DroppableList() {
{id: 'k', type: 'folder', name: 'Apps', childNodes: []}
]
});
let acceptedDragTypes = ['adobe-app'];

let {dragAndDropHooks} = useDragAndDrop({
acceptedDragTypes: ['adobe-app'],
shouldAcceptItemDrop: (target) => !!list.getItem(target.key).childNodes,
onInsert: async (e) => {
let {
items,
target
} = e;
let processedItems = await Promise.all(
items.map(async item => JSON.parse(await item.getText(acceptedDragTypes[0])))
items.map(async item => JSON.parse(await item.getText('adobe-app')))
);

if (target.dropPosition === 'before') {
Expand All @@ -314,13 +316,11 @@ function DroppableList() {
target
} = e;
let processedItems = await Promise.all(
items.map(async item => JSON.parse(await item.getText(acceptedDragTypes[0])))
items.map(async item => JSON.parse(await item.getText('adobe-app')))
);
let targetItem = list.getItem(target.key);
list.update(target.key, {...targetItem, childNodes: [...targetItem.childNodes, ...processedItems]});
},
acceptedDragTypes,
shouldAcceptItemDrop: (target) => !!list.getItem(target.key).childNodes
}
});

return (
Expand Down Expand Up @@ -355,6 +355,8 @@ see the [API section](#low-level-drop-handlers-and-options) below and the `useDr
The ListView below allows external directories to be dropped at its root level or between existing items. Files of a specific type can be dropped on certain pre-existing directories only.

```tsx example
import {DIRECTORY_DRAG_TYPE} from '@react-spectrum/dnd';

function DroppableListLowLevelAPI() {
let list = useListData({
initialItems: [
Expand Down