test: ⚗️ testing cca naksha upgrade

Author: arunasd463

packages/naksha-mapbox-list/package.json

@@ -34,15 +34,18 @@
     "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/modifiers": "^9.0.0",
+    "@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,8 +1,9 @@
 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";
+import { useSortable } from "@dnd-kit/sortable";
+import { CSS } from "@dnd-kit/utilities";
 
 import useLayers from "../../../hooks/use-layers";
 import { GeoserverLayer } from "../../../interfaces";
@@ -25,20 +26,14 @@ 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;
 }
 
 declare const window;
 
-export default function LayerItem({ item, extended }: LayerItemProps) {
+export default function LayerItem({ item, extended = false }: LayerItemProps) {
   const { t } = useT();
   const {
     layer,
@@ -50,6 +45,14 @@ export default function LayerItem({ item, extended }: LayerItemProps) {
   const [isAdded, setIsAdded] = useState(layer.selectedIds.includes(item.id));
   const [isLoading, setIsLoading] = useState(false);
 
+  const { attributes, listeners, setNodeRef, transform, transition } =
+    useSortable({ id: item.id });
+
+  const style = {
+    transform: CSS.Transform.toString(transform),
+    transition,
+  };
+
   const shareData = useMemo(
     () =>
       mp.canLayerShare
@@ -61,8 +64,7 @@ export default function LayerItem({ item, extended }: LayerItemProps) {
     [item.id]
   );
 
-  const onToggleLayer = async (event) => {
-    event.stopPropagation();
+  const onToggleLayer = async () => {
     setIsLoading(true);
     setIsInfoBarOpen(true);
     layer.setSelectedFeatures([]);
@@ -86,8 +88,11 @@ export default function LayerItem({ item, extended }: LayerItemProps) {
 
   return (
     <div
+      ref={setNodeRef}
+      {...attributes}
+      {...listeners}
       className={tw`z-20 p-3 bg-white`}
-      style={{ borderTop: "1px solid #e5e7eb" }}
+      style={{ borderTop: "1px solid #e5e7eb", ...style }}
     >
       <div className={tw`flex gap-3`}>
         <div className={tw`flex-shrink-0`}>
@@ -97,7 +102,11 @@ 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`}>
+              <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`}
@@ -139,7 +148,6 @@ export default function LayerItem({ item, extended }: LayerItemProps) {
               children={<ZoomExtentIcon />}
             />
           )}
-
           <PopoverWrapper item={item} />
         </div>
       </div>

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

@@ -1,16 +1,54 @@
 import React from "react";
-import { SortableContainer, SortableElement } from "react-sortable-hoc";
+import {
+  DndContext,
+  closestCenter,
+  PointerSensor,
+  useSensor,
+  useSensors,
+} from "@dnd-kit/core";
+import {
+  arrayMove,
+  SortableContext,
+  verticalListSortingStrategy,
+} from "@dnd-kit/sortable";
+import { restrictToVerticalAxis } from "@dnd-kit/modifiers";
 
 import LayerItem from "../common/layer-item";
 
-export const SelectedItem = SortableElement(({ item, extended }) => (
-  <LayerItem item={item} extended={extended} />
-));
+interface Props {
+  layerList: any[];
+  setLayerList: (layers: any[]) => void;
+}
 
-export const SelectedItemList = SortableContainer(({ layerList }) => (
-  <div>
-    {layerList.map((item, index) => (
-      <SelectedItem key={item.id} index={index} item={item} extended={true} />
-    ))}
-  </div>
-));
+export default function SelectedItemList({ layerList, setLayerList }: Props) {
+  const sensors = useSensors(useSensor(PointerSensor));
+
+  const handleDragEnd = (event: any) => {
+    const { active, over } = event;
+    if (active.id !== over?.id) {
+      const oldIndex = layerList.findIndex((i) => i.id === active.id);
+      const newIndex = layerList.findIndex((i) => i.id === over.id);
+      setLayerList(arrayMove(layerList, oldIndex, newIndex));
+    }
+  };
+
+  return (
+    <DndContext
+      sensors={sensors}
+      collisionDetection={closestCenter}
+      modifiers={[restrictToVerticalAxis]}
+      onDragEnd={handleDragEnd}
+    >
+      <SortableContext
+        items={layerList.map((l) => l.id)}
+        strategy={verticalListSortingStrategy}
+      >
+        <div>
+          {layerList.map((item) => (
+            <LayerItem key={item.id} item={item} extended />
+          ))}
+        </div>
+      </SortableContext>
+    </DndContext>
+  );
+}