The for loop in <SortableProvider> doesn't accept objects? about solid-dnd HOT 9 CLOSED

Commenting here rather than creating a new issue as the fix is likely related.

I'm also wondering how to get Sortable to work with objects - in particular, a store containing an array of objects. Replacing the items signal with a store throws the attached errors (even after implementing your codepen changes).

Below is a basic example of the code, which throws the same errors:

import {
  DragDropProvider,
  DragDropSensors,
  DragOverlay,
  SortableProvider,
  createSortable,
  closestCenter
} from "@thisbeyond/solid-dnd";
import { createSignal, For } from "solid-js";
import { createStore } from "solid-js/store";

const Sortable = (props) => {
  const sortable = createSortable(props.item);
  return (
    <div
      use:sortable
      class="sortable"
      classList={{ "opacity-25": sortable.isActiveDraggable }}
    >
      {props.item}
    </div>
  );
};

export const SortableTest = () => {
  const [items, setItems] = createStore([
    {
      toDoId: 4,
      description: "Lorem Ipsum4"
    },
    {
      toDoId: 12,
      description: "Lorem Ipsum12"
    },
    {
      toDoId: 1,
      description: "Lorem Ipsum1"
    },
    {
      toDoId: 20,
      description: "Lorem Ipsum20"
    }
  ]);
  const [activeItem, setActiveItem] = createSignal(null);
  const ids = () => items.map((item) => item.toDoId);

  const onDragStart = ({ draggable }) => setActiveItem(draggable.id);

  const onDragEnd = ({ draggable, droppable }) => {
    if (draggable && droppable) {
      const currentItems = ids();
      const fromIndex = currentItems.indexOf(draggable.id);
      const toIndex = currentItems.indexOf(droppable.id);
      if (fromIndex !== toIndex) {
        const updatedItems = currentItems.slice();
        updatedItems.splice(toIndex, 0, ...updatedItems.splice(fromIndex, 1));
        setItems(updatedItems);
      }
    }
    setActiveItem(null);
  };

  return (
    <DragDropProvider
      onDragStart={onDragStart}
      onDragEnd={onDragEnd}
      collisionDetector={closestCenter}
    >
      <DragDropSensors />
      <div class="column self-stretch">
        <SortableProvider ids={ids()}>
          <For each={items}>{(item) => <Sortable item={item} />}</For>
        </SortableProvider>
      </div>
      <DragOverlay>
        <div class="sortable">{activeItem()}</div>
      </DragOverlay>
    </DragDropProvider>
  );
};
export default SortableTest;

from solid-dnd.

No problem! And, yeah, better docs is on the list for future #17

from solid-dnd.

Yeah, I created the examples to be as simple as possible - just numbers - but I appreciate how they might actually complicate things when applied to real world usage. I'll think about updating them in future.

from solid-dnd.

SortableProvider coordinates the ordering of items so that sortables can tranform themselves to the correct position as the order changes. The ids property should be an array of the initial ordering of items as per their unique id - e.g. [1, 3, 5, 7]. Those ids should correspond to the ids you use to register each Sortable -> e.g. sortable = createSortable(id).

In your example, I imagine the error is coming from your item - what does that look like? If you have a full example to share that demonstrates the error then I can look into this more.

from solid-dnd.

An item looks roughly like this:

{
    "title": "Hello, world",
    "body": {
        "content": "Lorem ipsum dolor sit amet"
    }
}

If an item ISN'T an object (e.g. a string), it does work.

Before I made this issue I already tried to set ids to unique ID strings (I also tried numbers), but they gave the same error.

from solid-dnd.

Without a full example it will be hard to debug this further.

One thing I note is that you are not creating sortable's anywhere so even without the error it won't actually do anything.
Another thing to check is that you have a <DragDropProvider> wrapping everything.

I made a go at recreating your setup from the limited info shared that might help you -> https://codesandbox.io/s/solid-dnd-github-issue-41-bxc17o

from solid-dnd.

The error is correct - you need to pass the unique identifier (not an object) to createSortable.

So in your code the fix would be:

const sortable = createSortable(props.item.toDoId)

You can also pass arbitrary data (your item) as an optional argument if you want to access that in the onX handlers. Note that solid-dnd doesn't care about the data at all, it just passes it through.

const sortable = createSortable(props.item.toDoId, props.item)

from solid-dnd.

That makes sense to me - thanks for taking the time to provide some explanation. Just starting to wrap my head around this - perhaps the docs could do with a little more hand-holding for the newcomers like myself?

from solid-dnd.

After changing sortable to:

const sortable = createSortable(props.item.toDoId, props.item)

And then further changing the return from props.item to props.item.description (since, obviously, you can't return an object in jsx), I was still getting some bug where the items would drag correctly but never drop into a new order.

After racking my brain for far too long, I realised .indexOf only works for primitive data types. As such, a better solution is to replace:

const fromIndex = currentItems.indexOf(draggable.id);

with:

const fromIndex = currentItems.findIndex(
    (item) => item.toDoId === draggable.id
);

Felt a little ridiculous once I spotted it - figured it was worth posting both to help others and also potentially to update the example in the docs, as findIndex will work with all data types.

from solid-dnd.