migrated from react-sortable-hoc to dnd-kit

Author: arunasd463

packages/naksha-mapbox-list/package.json

@@ -34,15 +34,17 @@
     "typescript": "^4.7.3"
   },
   "dependencies": {
-    "@bumaga/tabs": "^0.2.0",
     "@biodiv-platform/naksha-commons": "*",
+    "@bumaga/tabs": "^0.2.0",
+    "@dnd-kit/core": "^6.3.1",
+    "@dnd-kit/sortable": "^10.0.0",
+    "@dnd-kit/utilities": "^3.2.2",
     "boundingbox": "^1.4.0",
     "clsx": "^1.1.1",
     "colorbrewer": "^1.5.2",
     "geohash": "^0.0.1",
     "highlight-search-result": "^1.0.4",
     "immer": "^9.0.15",
-    "react-sortable-hoc": "^2.0.0",
     "react-tiny-popover": "^7.0.1",
     "react-virtual": "^2.10.4",
     "react-virtualized-auto-sizer": "^1.0.6",

packages/naksha-mapbox-list/src/components/sidebar/common/layer-item.tsx

@@ -1,6 +1,5 @@
 import { useT } from "@biodiv-platform/naksha-commons";
 import React, { useMemo, useState } from "react";
-import { SortableHandle } from "react-sortable-hoc";
 import { RWebShare } from "react-web-share";
 import { tw } from "twind";
 
@@ -25,20 +24,19 @@ import GridLegend from "./grid-legend";
 import { PopoverWrapper } from "./info-popover";
 import LayerItemStyle from "./layer-item-style";
 
-const DragHandle = SortableHandle(() => (
-  <div className={tw`mt-1 w-6 text-center cursor-move`}>
-    <GrabberIcon />
-  </div>
-));
-
 interface LayerItemProps {
   item: GeoserverLayer;
   extended?: boolean;
+  dragHandleProps?: any;
 }
 
 declare const window;
 
-export default function LayerItem({ item, extended }: LayerItemProps) {
+export default function LayerItem({
+  item,
+  extended,
+  dragHandleProps,
+}: LayerItemProps) {
   const { t } = useT();
   const {
     layer,
@@ -97,7 +95,14 @@ export default function LayerItem({ item, extended }: LayerItemProps) {
             onChange={onToggleLayer}
             isLoading={isLoading}
           />
-          {extended && <DragHandle />}
+          {extended && (
+            <div
+              className={tw`mt-1 w-6 text-center cursor-move`}
+              {...dragHandleProps}
+            >
+              <GrabberIcon />
+            </div>
+          )}
         </div>
         <img
           className={tw`flex-shrink-0 overflow-hidden h-16 w-16 p-1 mb-2 object-cover border border-gray-200 rounded`}

packages/naksha-mapbox-list/src/components/sidebar/selected/index.tsx

@@ -1,6 +1,5 @@
 import { arrayMoveImmutable } from "../../../utils/array-move";
 import React from "react";
-
 import useLayers from "../../../hooks/use-layers";
 import { SelectedItemList } from "./selected-item-list";
 import { Button } from "../../core";
@@ -11,7 +10,7 @@ export default function SelectedTabPanel() {
   const { layer } = useLayers();
   const { t } = useT();
 
-  const onSortEnd = ({ oldIndex, newIndex }) => {
+  const handleSortEnd = (oldIndex: number, newIndex: number) => {
     layer.setSelectedIds(
       arrayMoveImmutable(layer.selectedIds, oldIndex, newIndex)
     );
@@ -26,8 +25,7 @@ export default function SelectedTabPanel() {
       )}
       <SelectedItemList
         layerList={layer.selectedLayers}
-        useDragHandle={true}
-        onSortEnd={onSortEnd}
+        onSortEnd={handleSortEnd}
       />
     </div>
   );

packages/naksha-mapbox-list/src/components/sidebar/selected/selected-item-list.tsx

@@ -1,16 +1,68 @@
 import React from "react";
-import { SortableContainer, SortableElement } from "react-sortable-hoc";
-
+import {
+  SortableContext,
+  useSortable,
+  verticalListSortingStrategy,
+} from "@dnd-kit/sortable";
+import { CSS } from "@dnd-kit/utilities";
+import { DndContext } from "@dnd-kit/core";
 import LayerItem from "../common/layer-item";
+import { GeoserverLayer } from "../../../interfaces";
+
+export const SelectedItem = ({
+  item,
+  extended,
+}: {
+  item: GeoserverLayer;
+  extended: boolean;
+}) => {
+  const { attributes, listeners, setNodeRef, transform, transition } =
+    useSortable({ id: item.id });
+
+  const style = {
+    transform: CSS.Transform.toString(transform),
+    transition,
+  };
+
+  return (
+    <div ref={setNodeRef} style={style}>
+      <LayerItem
+        item={item}
+        extended={extended}
+        dragHandleProps={{ ...attributes, ...listeners }}
+      />
+    </div>
+  );
+};
+
+interface SelectedItemListProps {
+  layerList: GeoserverLayer[];
+  onSortEnd: (oldIndex: number, newIndex: number) => void;
+}
 
-export const SelectedItem = SortableElement(({ item, extended }) => (
-  <LayerItem item={item} extended={extended} />
-));
+export const SelectedItemList = ({
+  layerList,
+  onSortEnd,
+}: SelectedItemListProps) => {
+  const handleDragEnd = (event: any) => {
+    const { active, over } = event;
+    if (over && active.id !== over.id) {
+      const oldIndex = layerList.findIndex((item) => item.id === active.id);
+      const newIndex = layerList.findIndex((item) => item.id === over.id);
+      onSortEnd(oldIndex, newIndex);
+    }
+  };
 
-export const SelectedItemList = SortableContainer(({ layerList }) => (
-  <div>
-    {layerList.map((item, index) => (
-      <SelectedItem key={item.id} index={index} item={item} extended={true} />
-    ))}
-  </div>
-));
+  return (
+    <DndContext onDragEnd={handleDragEnd}>
+      <SortableContext
+        items={layerList.map((item) => item.id)}
+        strategy={verticalListSortingStrategy}
+      >
+        {layerList.map((item) => (
+          <SelectedItem key={item.id} item={item} extended={true} />
+        ))}
+      </SortableContext>
+    </DndContext>
+  );
+};