fix infinite re-rendering issue

Author: raheeliftikhar5

lowcoder-comp-kanban/index.tsx

@@ -8,7 +8,6 @@ import 'bootstrap/dist/css/bootstrap.css';
 // Put any other imports below so that CSS from your
 // components takes precedence over default styles.
 function CompDevApp() {
-  console.log("compMap", lowcoder.comps)
   return (
     <CompIDE
       compMap={compMap}

lowcoder-comp-kanban/src/KabanComp.tsx

@@ -7,6 +7,7 @@ import {
   withViewFn,
   withPropertyViewFn,
   withMethodExposing,
+  CompAction,
 } from 'lowcoder-sdk';
 import { trans } from "./i18n/comps";
 import { KanbanInitComp } from './kanbanTypes';
@@ -16,6 +17,7 @@ import * as datasource from './datasource.json';
 
 type IContainer = typeof IContainer;
 type NameGenerator = typeof NameGenerator;
+type CompAction = typeof CompAction;
 
 export class KanbanImplComp extends KanbanInitComp implements IContainer {
   private getSlotContainer() {
@@ -44,6 +46,20 @@ export class KanbanImplComp extends KanbanInitComp implements IContainer {
   autoHeight(): boolean {
     return this.children.autoHeight.getView();
   }
+
+  override reduce(action: CompAction): this {
+    let comp = super.reduce(action);
+    const params = comp.children.cardView.children.cardView.getCachedParams('0');
+    if (!Boolean(params)) {
+      comp = comp.setChild(
+        "cardView",
+        comp.children.cardView.reduce(
+          comp.children.cardView.setSelectionAction('0', params)
+        )
+      );
+    }
+    return comp;
+  }
 }
 
 const KanbanRenderComp = withViewFn(KanbanImplComp, (comp: KanbanImplComp) => <KanbanCompView comp={comp} />);

lowcoder-comp-kanban/src/cardViewControl.tsx

@@ -17,6 +17,7 @@ import {
   NameGenerator,
   JSONValue,
 } from "lowcoder-sdk";
+import React from "react";
 
 type ContainerBaseProps = typeof ContainerBaseProps;
 type ConstructorToView<T> = typeof ConstructorToView;
@@ -26,11 +27,11 @@ type JSONValue = typeof JSONValue;
 
 const ContextSlotControl = withSelectedMultiContext(SlotControl);
 
-const ContainerView = (props: ContainerBaseProps) => {
-  return <InnerGrid {...props} emptyRows={30} autoHeight />;
-};
+const ContainerView = React.memo((props: ContainerBaseProps) => {
+  return <InnerGrid {...props} emptyRows={15} autoHeight />;
+});
 
-function CardView(props: { containerProps: ConstructorToView<typeof SimpleContainerComp> }) {
+const CardView = React.memo((props: { containerProps: ConstructorToView<typeof SimpleContainerComp> }) => {
   const { containerProps } = props;
   // const background = useContext(BackgroundColorContext);
   return (
@@ -43,11 +44,10 @@ function CardView(props: { containerProps: ConstructorToView<typeof SimpleContai
       // bgColor={background}
       items={gridItemCompToGridItems(containerProps.items)}
       hintPlaceholder=""
-      onMouseDown
       // containerPadding={[2, 2]}
     />
   );
-}
+});
 
 let CardViewControlTmp = (function () {
   // const label = trans("table.expandable");
@@ -56,8 +56,8 @@ let CardViewControlTmp = (function () {
       // expandable: BoolControl,
       cardView: ContextSlotControl,
     },
-    () => ({ expandableConfig: {}, expandModalView: null })
-    )
+    () => ({ cardViewConfig: {}, cardModalView: null })
+  )
     .setControlItemData({ filterText: '' })
     .setPropertyViewFn((children, dispatch) => {
       return (
@@ -75,26 +75,21 @@ let CardViewControlTmp = (function () {
 
 export class CardViewControl extends CardViewControlTmp {
   getView() {
-    // if (!this.children.expandable.getView()) {
-    //   return { expandableConfig: {}, expandModalView: null };
-    // }
     const selectedContainer = this.children.cardView.getSelectedComp();
     return {
-      cardViewConfig: {
-        cardTemplate: (data: Record<string, string>, index: number) => {
-          const slotControl = this.children.cardView.getView()(
-            {
-              currentRow: data,
-              currentIndex: index,
-              // currentOriginalIndex: tryToNumber(record[OB_ROW_ORI_INDEX]),
-            },
-            String(index)
-          );
-          const containerProps = slotControl.children.container.getView();
-          return <CardView key={index} containerProps={containerProps} />;
-        },
+      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} />;
       },
-      expandModalView: selectedContainer.getView(),
+      cardModalView: selectedContainer.getView(),
     };
   }
 

lowcoder-comp-kanban/src/datasource.json

@@ -45,7 +45,7 @@
       "name": "Nancy Davloio"
     },
     {
-      "id": "1",
+      "id": "2",
       "name": "Andrew Fuller"
     }
   ]

lowcoder-comp-kanban/src/kanbanCompView.tsx

@@ -96,11 +96,16 @@ const CardTemplate = React.memo((props: {
   tagStyles: Record<string, string>;
 }) => {
   const editorState = useContext(EditorContext);
-  if (editorState) {
-    return props.cardView.cardViewConfig.cardTemplate(
+
+  const template = useMemo(() => {
+    return props.cardView.cardTemplate(
       props.data,
       props.cardIndex,
-    );
+    )
+  }, [JSON.stringify(props.data), props.cardIndex]);
+
+  if (editorState) {
+    return template;
   }
 
   return (
@@ -167,12 +172,10 @@ type Props = {
 
 export const KanbanCompView = React.memo((props: Props) => {
   const { comp } = props;
-
   // const childrenProps = useMemo(() => 
   //   childrenToProps(comp.children),
   //   [childrenToProps, comp.children],
   // );
-
   const childrenProps = childrenToProps(comp.children);
 
   const [dataMap, setDataMap] = useState<Record<string, number>>({});
@@ -182,7 +185,7 @@ export const KanbanCompView = React.memo((props: Props) => {
   const updateDataMap = useCallback(() => {
     const mapData: Record<string, number> = {};
     childrenProps.data?.forEach((item: any, index: number) => {
-      mapData[item.Id] = index;
+      mapData[item.id] = index;
     })
     setDataMap(mapData);
   }, [ setDataMap]);
@@ -195,13 +198,13 @@ export const KanbanCompView = React.memo((props: Props) => {
     updateDataMap();
   }, [JSON.stringify(childrenProps.data), updateDataMap]);
 
-  let data: Object[] = useMemo(() => extend(
+  const kanbanData: Object[] = useMemo(() => extend(
       [],
       childrenProps.data as { [key: string]: Object },
       undefined,
       true
     ) as Object[]
-    , [childrenProps.data]
+    , [JSON.stringify(childrenProps.data)]
   );
 
   const showModal = useCallback(() => {
@@ -233,7 +236,7 @@ export const KanbanCompView = React.memo((props: Props) => {
       }
     });
     return assignees;
-  }, [childrenProps.assigneeOptions]);
+  }, [JSON.stringify(childrenProps.assigneeOptions)]);
 
   const statusOptions = useMemo(() => {
     let uniqueObjectsArray: any = [];
@@ -251,7 +254,7 @@ export const KanbanCompView = React.memo((props: Props) => {
       }
     }); 
     return uniqueObjectsArray;
-  }, [childrenProps.statusOptions]);
+  }, [JSON.stringify(childrenProps.statusOptions)]);
 
   const handleDataChange = (kanbanData: Array<Record<string,any>>) => {
     comp.children?.data.children.manual.children.manual.dispatch(
@@ -271,7 +274,7 @@ export const KanbanCompView = React.memo((props: Props) => {
   }: {
     changedRecords : Array<Record<string,any>>
   }) => {
-    const updatedData = [ ...data ] as Array<Record<string,any>>;
+    const updatedData = [ ...kanbanData ] as Array<Record<string,any>>;
     changedRecords.forEach((record) => {
       const { id } = record;
       const index = updatedData.findIndex((item: any) => item.id === id);
@@ -284,7 +287,7 @@ export const KanbanCompView = React.memo((props: Props) => {
 
   const handleOk = (dialogData: Record<string, string>) => {
     const { id } = dialogData;
-    const updatedData = [ ...data ];
+    const updatedData = [ ...kanbanData ];
     const index = updatedData.findIndex((item: any) => item.id === id);
     if (index > -1) {
       updatedData[index] = dialogData;
@@ -303,7 +306,7 @@ export const KanbanCompView = React.memo((props: Props) => {
       const cardIndex = dataMap[data.id] || 0;
       return (
         <CardTemplate
-          data={data}
+          data={{...data}}
           cardIndex={cardIndex}
           cardView={childrenProps.cardView}
           cardHeaderStyles={childrenProps.cardHeaderStyles}
@@ -343,7 +346,7 @@ export const KanbanCompView = React.memo((props: Props) => {
                 id="kanban"
                 cssClass="kanban-overview"
                 keyField="status"
-                dataSource={data}
+                dataSource={[...kanbanData]}
                 cardDoubleClick={OnCardDoubleClick}
                 cardClick={(args: CardClickEventArgs) => args.event?.stopPropagation()}
                 swimlaneSettings={{keyField: 'assignee'}}
@@ -373,7 +376,7 @@ export const KanbanCompView = React.memo((props: Props) => {
             </LayoutContainer>
           </ScrollBar>
           <SlotConfigContext.Provider value={{ modalWidth: 600 }}>
-            {childrenProps.cardView.expandModalView}
+            {childrenProps.cardView.cardModalView}
           </SlotConfigContext.Provider>
         </div>
       </div>