Merge pull request #4 from lowcoder-org/kanban-refactor

Kanban refactoring - replace ej2-kanban component with dndkit

Author: raheeliftikhar5

lowcoder-comp-kanban/.yarn/install-state.gz

@@ -4,11 +4,10 @@
   "type": "module",
   "license": "MIT",
   "dependencies": {
+    "@dnd-kit/core": "^6.2.0",
+    "@dnd-kit/sortable": "^9.0.0",
+    "@dnd-kit/utilities": "^3.2.2",
     "@observablehq/runtime": "^5.9.8",
-    "@syncfusion/ej2-base": "^25.2.7",
-    "@syncfusion/ej2-kanban": "^26.1.40",
-    "@syncfusion/ej2-material3-theme": "^26.1.35",
-    "@syncfusion/ej2-react-kanban": "^25.2.6",
     "@types/lodash.differenceby": "^4.8.9",
     "@types/lodash.filter": "^4.6.9",
     "@types/lodash.includes": "^4.3.9",
@@ -18,6 +17,7 @@
     "@types/react-dom": "18",
     "antd": "^5.19.1",
     "bootstrap": "^5.3.3",
+    "immutability-helper": "^3.1.1",
     "lodash.differenceby": "^4.8.0",
     "lodash.differencewith": "^4.5.0",
     "lodash.filter": "^4.6.0",

lowcoder-comp-kanban/lowcoder-comp-kanban-0.0.23.tgz

@@ -9,12 +9,14 @@ import {
   withMethodExposing,
   CompAction,
   CompDepsConfig,
+  CompActionTypes,
 } from 'lowcoder-sdk';
 import { trans } from "./i18n/comps";
 import { KanbanInitComp } from './kanbanTypes';
 import { KanbanPropertyView } from './kanbanPropertyView';
 import { KanbanCompView } from './kanbanCompView';
 import * as datasource from './datasource.json';
+import isEqual from 'lodash.isequal';
 
 type IContainer = typeof IContainer;
 type NameGenerator = typeof NameGenerator;
@@ -50,20 +52,39 @@ export class KanbanImplComp extends KanbanInitComp implements IContainer {
 
   override reduce(action: CompAction): this {
     let comp = super.reduce(action);
-    const params = comp.children.cardView.children.cardView.getCachedParams('0');
-    if (!Boolean(params)) {
+
+    let dataChanged = false;
+    if (action.type === CompActionTypes.UPDATE_NODES_V2) {
+      dataChanged =
+        comp.children.data !== this.children.data &&
+        isEqual(this.children.data.getView(), comp.children.data.getView());
+    }
+
+    const thisSelection = this.children.activeCardIndex.getView() ?? "0";
+    const newSelection = comp.children.activeCardIndex.getView() ?? "0";
+    const selectionChanged = thisSelection !== newSelection;
+    let params = comp.children.cardView.children.cardView.getCachedParams(newSelection);
+    if (selectionChanged || !Boolean(params) || dataChanged) {
+      params = !Boolean(params) || dataChanged
+        ? {
+          currentRow: comp.children.data.getView()[newSelection],
+          currentIndex: newSelection,
+          currentOriginalIndex: newSelection,
+        } : undefined;
       comp = comp.setChild(
         "cardView",
         comp.children.cardView.reduce(
-          comp.children.cardView.setSelectionAction('0', params)
+          comp.children.cardView.setSelectionAction(newSelection, params)
         )
       );
     }
     return comp;
   }
 }
 
-const KanbanRenderComp = withViewFn(KanbanImplComp, (comp: KanbanImplComp) => <KanbanCompView comp={comp} />);
+const KanbanRenderComp = withViewFn(KanbanImplComp, (comp: KanbanImplComp) => {
+  return <KanbanCompView comp={comp} />
+});
 let KanbanPropertyComp = withPropertyViewFn(KanbanRenderComp, (comp: KanbanImplComp) => {
   return <KanbanPropertyView comp={comp} />;
 });

lowcoder-comp-kanban/package.json

@@ -48,7 +48,8 @@ const CardView = React.memo((props: { containerProps: ConstructorToView<typeof S
       // containerPadding={[2, 2]}
     />
   );
-}, (prev, next) => JSON.stringify(prev.containerProps) === JSON.stringify(next.containerProps));
+// }, (prev, next) => JSON.stringify(prev.containerProps) === JSON.stringify(next.containerProps));
+});
 
 const cardTemplate = (props: {
   data: Record<string, string>,