What is preview ?

[vincentwinkel]

Hi,
Based on your examples and my attempts, I dont understand what is preview and how to use it (I never see a snapshot of the dragged item, only a non-customisable horizontal bar).

[hosembafer]

Hi Vincent,

Just found that demo app is outdated. Please check demo app again. The preview component will be shown anchored to the cursor when dragging the element.

[hosembafer]

Regarding non-customizable horizontal bar. Do you need to change it somehow? Actually, I was not sure what properties of the horizontal bar needed to be customizable, can you describe your case?

[vincentwinkel]

Thanks, I figured out about the preview. I was expecting we could "inject" the preview in the horizontal bar, or change its className (color, margin...).

Also, I currently use a dnd list, and for each item, it opens a modal (in a differrent DOM node but the children are declared inside the dnd item), this modal also uses a dnd list. And it doesnt work. If I remove the dnd behavior on the mother list tho, the child list works. So I understand that nested dnd lists (even in different DOM nodes) don't work.

Is the context global to the page?

[hosembafer]

dividerClassName was just introduced, check the README, please.

[hosembafer]

Can you provide a sandbox with a nested example so we can proceed?

[vincentwinkel]

I copy pasted your demo example: https://codesandbox.io/s/red-bird-969e5c?file=/src/App.js
When I duplicate the logic, the 2nd list doesnt work.
If I keep your original App.tsx that I include twice in index.tsx, then both lists work. I'm not sure to get the logics...

[vincentwinkel]

Well, I understand we cannot use 2 contexts in the same component, I played with the sandbox, trying to have sibling lists, nested lists, etc, everything works with the code from your example.

But on my specific case, the "nested" list doesnt work (nested in the React hierarchy but thecomponent is actually created in a different DOM node as a modal). I cannot copy my code since it's quite huge. But I tried to remove the nested lists and make them appear as siblings, I moved the list from a page to a component, etc, I tried everything but still doesnt work.

After putting logs in your lib, I figured out setMousePressedY(event.clientY); works fine (in the onMouseDown listener) but in the onMove listener, mousePressedY is always undefined, only for the nested list (it has a value for the main list).

I start to lose hope.

[hosembafer]

I'm trying to find some time to fix this. I'll update the thread soon.

[vincentwinkel]

It's super weird. In my case, it seems buggy when I add a random callback as property, even not used, like:

<Dnd defaultItems={getItems()}> // works
<Dnd defaultItems={getItems()} cb={() => {}}> // doesnt work

and / or when I directly use a Dnd list component inside a <Draggable> or inside a component using a context (useDraggableContext()).

I tried to reproduce the issue on the sandbox, but I get different errors, as follows: https://codesandbox.io/s/red-bird-969e5c

[EDIT] A concrete example, in my case:

const Playlists = ({ playlists, onChange }: Props) => {
  const [sortedPlaylists, setSortedPlaylists] = useState(playlists);

  // After (re)loading
  useEffect(() => {
    setSortedPlaylists(playlists);
  }, [playlists]);

  const dndCtx = useDraggableContext({
    onDrop: (dragIndex: number, overIndex: number) => {
      const nextItems = moveItems(sortedPlaylists, dragIndex, overIndex);
      PlaylistService.sort(nextItems)
        .then((res) => setSortedPlaylists(res))
        .catch(console.log);
    },
  });

  return <>
    <Dnd /> // This one always work
    <Dnd cb={() => {}} /> // This one works only when I comment the useDraggableContext() call above
  </>;
}

[EDIT2] if I export Dnd instead of memo(Dnd), in my case they both dont work.