Made more changes

Author: SupertigerDev

README.md

@@ -19,12 +19,13 @@ npm install solid-sortablejs
 Use it:
 
 ```tsx
+import Sortable from "../src";
 import {createStore} from 'solid-js/store'
-import Sortable from 'solid-sortablejs'
+import { JSX } from "solid-js";
 
 const App = () => {
 
-  const itemStyles = {background: 'green', padding: "10px", minWidth: "100px", margin: "5px", "border-radius": "4px", color: "white"};
+  const itemStyles: JSX.CSSProperties = {"user-select": "none", background: 'green', padding: "10px", "min-width": "100px", margin: "5px", "border-radius": "4px", color: "white"};
   const containerStyles = {display: "inline-block", background: 'gray', padding: "10px", "border-radius": "4px"};
 
   const [items, setItems] = createStore([
@@ -34,22 +35,16 @@ const App = () => {
     { id: 3, name: 3 },
   ])
 
-  const onEnd = (event: SortableOnEndEvent<typeof items[0]>) => {
-    // event.movedItem -> the item that was moved
-    // event.newList -> the new list of items
-    // event.oldIndex -> the index of the item that was moved
-    // event.newIndex -> the index of the item that was moved to
-
-    setItems(event.newList);
-  }
-
   return (
     <div style={containerStyles}>
-      <Sortable items={items} onEnd={onEnd}>
+      <Sortable idField="id" items={items} setItems={setItems} >
         {item => <div style={itemStyles}>{item.name} {Math.random()}</div>}
       </Sortable>
     </div>
   );
 
 };
+
+export default App;
+};
 ```

dev/App.module.css

@@ -1,33 +1,33 @@
 .App {
-	text-align: center;
+  text-align: center;
 }
 
 .logo {
-	animation: logo-spin infinite 20s linear;
-	height: 40vmin;
-	pointer-events: none;
+  animation: logo-spin infinite 20s linear;
+  height: 40vmin;
+  pointer-events: none;
 }
 
 .header {
-	background-color: #282c34;
-	min-height: 100vh;
-	display: flex;
-	flex-direction: column;
-	align-items: center;
-	justify-content: center;
-	font-size: calc(10px + 2vmin);
-	color: white;
+  background-color: #282c34;
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  font-size: calc(10px + 2vmin);
+  color: white;
 }
 
 .link {
-	color: #b318f0;
+  color: #b318f0;
 }
 
 @keyframes logo-spin {
-	from {
-		transform: rotate(0deg);
-	}
-	to {
-		transform: rotate(360deg);
-	}
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
 }

dev/App.tsx

@@ -1,36 +1,67 @@
 import Sortable from "../src";
-import {createStore} from 'solid-js/store'
+import { createStore } from "solid-js/store";
 import { JSX } from "solid-js";
 
 const App = () => {
-
-  const itemStyles: JSX.CSSProperties = {"user-select": "none", background: 'green', padding: "10px", "min-width": "100px", margin: "5px", "border-radius": "4px", color: "white"};
-  const containerStyles = {display: "inline-block", background: 'gray', padding: "10px", "border-radius": "4px"};
+  const itemStyles: JSX.CSSProperties = {
+    "user-select": "none",
+    background: "green",
+    padding: "10px",
+    "min-width": "100px",
+    margin: "5px",
+    "border-radius": "4px",
+    color: "white",
+  };
+  const containerStyles = {
+    display: "inline-block",
+    background: "gray",
+    padding: "10px",
+    "border-radius": "4px",
+  };
 
   const [items, setItems] = createStore([
     { id: 0, name: 0 },
     { id: 1, name: 1 },
     { id: 2, name: 2 },
     { id: 3, name: 3 },
-  ])
+  ]);
   const [items2, setItems2] = createStore([
     { id: 4, name: 4 },
     { id: 5, name: 5 },
     { id: 6, name: 6 },
     { id: 7, name: 7 },
-  ])
+  ]);
 
   return (
     <div style={containerStyles}>
-      <Sortable idField="id" style={{ background: "darkgray"}} items={items} setItems={setItems} >
-        {item => <div style={itemStyles}>{item.name} {Math.random()}</div>}
+      <Sortable
+        group="test"
+        idField="id"
+        style={{ "min-height": "30px", background: "darkgray" }}
+        items={items}
+        setItems={setItems}
+      >
+        {(item) => (
+          <div style={itemStyles}>
+            {item.name} {Math.random()}
+          </div>
+        )}
       </Sortable>
-      <Sortable idField="id" style={{ background: "darkgray", "margin-top": "102px"}} items={items2} setItems={setItems2} >
-        {item => <div style={itemStyles}>{item.name} {Math.random()}</div>}
+      <Sortable
+        group="test"
+        idField="id"
+        style={{ "min-height": "30px", background: "darkgray", "margin-top": "102px" }}
+        items={items2}
+        setItems={setItems2}
+      >
+        {(item) => (
+          <div style={itemStyles}>
+            {item.name} {Math.random()}
+          </div>
+        )}
       </Sortable>
     </div>
   );
-
 };
 
 export default App;

dev/vite.config.ts

@@ -1,11 +1,9 @@
-import { defineConfig } from "vite"
-import solidPlugin from "vite-plugin-solid"
+import { defineConfig } from "vite";
+import solidPlugin from "vite-plugin-solid";
 
 export default defineConfig({
-  plugins: [
-    solidPlugin(),
-  ],
+  plugins: [solidPlugin()],
   build: {
     target: "esnext",
   },
-})
+});

package.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.0.1",
+  "version": "2.0.0",
   "name": "solid-sortablejs",
   "description": "A sortable library for solid",
   "license": "MIT",

rollup.config.ts rollup.config.js

@@ -1,87 +1,86 @@
-import {createContext, For, JSX, JSXElement, onCleanup, onMount, Setter} from 'solid-js';
-import SortableJs from 'sortablejs';
-
-
-
+import { createContext, For, JSX, JSXElement, onCleanup, onMount, Setter } from "solid-js";
+import SortableJs from "sortablejs";
 
 interface SortableProps<T> {
+  delay?: number;
+  delayOnTouchOnly?: boolean;
+  group?: string;
   class?: string;
   style?: JSX.CSSProperties;
-  items: T[]
+  items: T[];
   idField: keyof T;
-  setItems: Setter<T[]>
-  children: (item: T) => JSXElement
-}
-
-
-
-const SortableContext = createContext();
-
-
-export function SortableProvider (props: {children: JSXElement}) {
-  const itemMap: Record<string, string> = {};
-
-  const sortable = {
-    itemMap,
-    add() {
-    }
-  }
-
-  return (
-    <SortableContext.Provider value={{}}>
-      {props.children}
-    </SortableContext.Provider>
-  )
+  setItems: Setter<T[]>;
+  children: (item: T) => JSXElement;
 }
 
-
 const dragging = {
-  item: undefined as any
-}
+  item: undefined as any,
+};
 export default function Sortable<T>(props: SortableProps<T>) {
   let sortableContainerRef: HTMLDivElement | undefined;
 
   onMount(() => {
     const sortable = SortableJs.create(sortableContainerRef!, {
-      group: "test",
+      delay: props.delay,
+      delayOnTouchOnly: props.delayOnTouchOnly,
+      group: props.group,
       animation: 150,
       onStart(event) {
         dragging.item = props.items[parseInt(event.item.dataset.index!)];
-        
       },
       onAdd(evt) {
         const children = [...evt.to?.children!] as HTMLSpanElement[];
-        const newItems = children.map(v => props.items.find(item => item[props.idField].toString() === v.dataset.id!) || dragging.item);
-
-
+        const newItems = children.map(
+          (v) =>
+            props.items.find(
+              (item) => (item[props.idField] as string).toString() === v.dataset.id!,
+            ) || dragging.item,
+        );
         // from: where it came from
         // to:   added to
-
         children.splice(evt.newIndex!, 1);
-        evt.to?.replaceChildren(...children)
-        props.setItems(newItems);
+        evt.to?.replaceChildren(...children);
 
+        props.setItems(newItems as T[]);
+      },
+      onRemove(evt) {
+        // from: where it removed from
+        // to: where it added to
+        const children = [...evt.from?.children!] as HTMLSpanElement[];
+        const newItems = children.map((v) =>
+          props.items.find((item) => (item[props.idField] as string).toString() === v.dataset.id!),
+        );
+
+        children.splice(evt.oldIndex!, 0, evt.item);
+        evt.from.replaceChildren(...children);
+        props.setItems(newItems as T[]);
       },
       onEnd(evt) {
         const children = [...sortableContainerRef?.children!] as HTMLSpanElement[];
-        const newItems = children.map(v => props.items.find(item => item[props.idField].toString() === v.dataset.id!));
-        children.sort((a, b) => parseInt(a.dataset.index!) - parseInt(b.dataset.index!))
+        const newItems = children.map((v) =>
+          props.items.find((item) => (item[props.idField] as string).toString() === v.dataset.id!),
+        );
+        children.sort((a, b) => parseInt(a.dataset.index!) - parseInt(b.dataset.index!));
         sortableContainerRef?.replaceChildren(...children);
-        props.setItems(newItems);
+        props.setItems(newItems as T[]);
         dragging.item = undefined;
       },
-    })
+    });
 
     onCleanup(() => {
       sortable.destroy();
-    })
-  })
+    });
+  });
 
   return (
     <div style={props.style} ref={sortableContainerRef} class="sortablejs">
       <For each={props.items}>
-        {(item, i) => <div data-id={item[props.idField]} data-index={i()}>{props.children(item)}</div>}
+        {(item, i) => (
+          <div data-id={item[props.idField]} data-index={i()}>
+            {props.children(item)}
+          </div>
+        )}
       </For>
     </div>
-  )
+  );
 }