optimize card view control

Author: raheeliftikhar5

lowcoder-comp-kanban/package.json

@@ -15,7 +15,7 @@
     "antd": "^5.19.1",
     "bootstrap": "^5.3.3",
     "lowcoder-cli": "^0.0.30",
-    "lowcoder-sdk": "^2.4.12",
+    "lowcoder-sdk": "^2.4.13",
     "prop-types": "^15.8.1",
     "react": "18",
     "react-bootstrap": "^2.10.2",

lowcoder-comp-kanban/src/cardViewControl.tsx

@@ -16,6 +16,7 @@ import {
   RecordType,
   NameGenerator,
   JSONValue,
+  CompActionTypes,
 } from "lowcoder-sdk";
 import React from "react";
 
@@ -28,7 +29,8 @@ type JSONValue = typeof JSONValue;
 const ContextSlotControl = withSelectedMultiContext(SlotControl);
 
 const ContainerView = React.memo((props: ContainerBaseProps) => {
-  return <InnerGrid {...props} emptyRows={15} autoHeight />;
+  console.log('card grid -> ', props);
+  return <InnerGrid {...props} emptyRows={8} autoHeight />;
 });
 
 const CardView = React.memo((props: { containerProps: ConstructorToView<typeof SimpleContainerComp> }) => {
@@ -47,13 +49,28 @@ const CardView = React.memo((props: { containerProps: ConstructorToView<typeof S
       // containerPadding={[2, 2]}
     />
   );
-});
+}, (prev, next) => JSON.stringify(prev.containerProps) === JSON.stringify(next.containerProps));
+
+const cardTemplate = (props: {
+  data: Record<string, string>,
+  index: number,
+  cardView: any,
+}) => {
+  const slotControl = props.cardView.getView()(
+    {
+      currentRow: props.data,
+      currentIndex: props.index,
+      currentOriginalIndex: props.index,
+    },
+    String(props.index)
+  );
+  const containerProps = slotControl.children.container.getView();
+  return <CardView key={`view-${props.index}`} containerProps={containerProps} />
+};
 
 let CardViewControlTmp = (function () {
-  // const label = trans("table.expandable");
   return new ControlItemCompBuilder(
     {
-      // expandable: BoolControl,
       cardView: ContextSlotControl,
     },
     () => ({ cardViewConfig: {}, cardModalView: null })
@@ -65,7 +82,7 @@ let CardViewControlTmp = (function () {
           {children.cardView
             .getSelectedComp()
             .getComp()
-            .propertyView({ buttonText: "Customize" })
+            .propertyView({ buttonText: "Customize Card View" })
           }
         </>
       );
@@ -78,16 +95,12 @@ export class CardViewControl extends CardViewControlTmp {
     const selectedContainer = this.children.cardView.getSelectedComp();
     return {
       cardTemplate: (data: Record<string, string>, index: number) => {
-        const slotControl = this.children.cardView.getView()(
-          {
-            currentRow: data,
-            currentIndex: index,
-            currentOriginalIndex: index,
-          },
-          String(index)
-        );
-        const containerProps = slotControl.children.container.getView();
-        return <CardView key={index} containerProps={containerProps} />;
+        const cardView = this.children.cardView;
+        return cardTemplate({
+          data,
+          index,
+          cardView,
+        });
       },
       cardModalView: selectedContainer.getView(),
     };
@@ -105,6 +118,8 @@ export class CardViewControl extends CardViewControlTmp {
   }
 
   reduce(action: any) {
+    if (action.type === CompActionTypes.CHANGE_VALUE && action.path[action.path.length - 1] === 'positionParams') return this;
+    
     const comp = super.reduce(action);
     // console.info("CardViewControl reduce. action: ", action, "\nthis: ", this, "\ncomp: ", comp);
     return comp;

lowcoder-comp-kanban/src/datasource.json

@@ -1,7 +1,7 @@
 {
   "cardData": [
     {
-      "id": "Task 1",
+      "id": 0,
       "label": "Task - 29001",
       "status": "Open",
       "summary": "Analyze customer requirements.",
@@ -11,7 +11,7 @@
       "assignee": "Nancy Davloio"
     },
     {
-      "id": "Task 2",
+      "id": 1,
       "label": "Task - 29002",
       "status": "InProgress",
       "summary": "Add responsive support to applicaton",

lowcoder-comp-kanban/src/kanbanOptionsControl.tsx

@@ -18,7 +18,7 @@ let KanbanOption = new MultiCompBuilder(
     estimate: NumberControl,
     assignee: StringControl,
     rankId: NumberControl,
-    id: StringControl,
+    id: NumberControl,
   },
   (props: any) => props
 ).build();
@@ -89,4 +89,5 @@ KanbanOption = class extends KanbanOption implements OptionCompProperty {
 export const KanbanOptionControl = optionsControl(KanbanOption, {
   initOptions: dataSource.cardData,
   uniqField: "id",
+  autoIncField: "id",
 });

lowcoder-comp-kanban/yarn.lock

@@ -2894,7 +2894,7 @@ __metadata:
     antd: ^5.19.1
     bootstrap: ^5.3.3
     lowcoder-cli: ^0.0.30
-    lowcoder-sdk: ^2.4.12
+    lowcoder-sdk: ^2.4.13
     prop-types: ^15.8.1
     react: 18
     react-bootstrap: ^2.10.2
@@ -2905,15 +2905,15 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"lowcoder-sdk@npm:^2.4.12":
-  version: 2.4.12
-  resolution: "lowcoder-sdk@npm:2.4.12"
+"lowcoder-sdk@npm:^2.4.13":
+  version: 2.4.13
+  resolution: "lowcoder-sdk@npm:2.4.13"
   dependencies:
     prettier: ^3.1.1
   peerDependencies:
     react: ">=18"
     react-dom: ">=18"
-  checksum: b4c76fad959ce3d19d9c35bbf8ec15dd22e387f28de2c6f22da3f22c73b7e8cb4e6226247dbbb50dbc32f920ae0b4a9e30ee75230ceb32793c98c719e20c44c8
+  checksum: 8687cdcde4b6be46bd798041738f55c0839d992e5551f0ba9d05f6558873cf4b8550424e6a04e755b9437cfb6b845a56cdfc1b83df500d31dd7ac5b241762d63
   languageName: node
   linkType: hard