optimise form components

Author: raheeliftikhar5

client/packages/lowcoder/src/comps/comps/containerComp/containerView.tsx

@@ -397,6 +397,16 @@ export const InnerGrid = React.memo((props: ViewPropsWithSelect) => {
   );
 
   const dispatchPositionParamsTimerRef = useRef(0);
+  
+  // Add cleanup for timeout
+  useEffect(() => {
+    return () => {
+      if (dispatchPositionParamsTimerRef.current) {
+        window.clearTimeout(dispatchPositionParamsTimerRef.current);
+      }
+    };
+  }, []);
+
   const onResize = useCallback(
     ({width, height}: ResizePayload) => {
       if(!width || !height) return;
@@ -444,20 +454,35 @@ export const InnerGrid = React.memo((props: ViewPropsWithSelect) => {
       props.dispatch,
     ]
   );
-  const setSelectedNames = useCallback(
-    (names: Set<string>) => {
-      editorState?.setSelectedCompNames(names);
-    },
-    [editorState?.setSelectedCompNames]
-  );
 
+  // Cleanup resize detector
   const { width, ref } = useResizeDetector({
     onResize,
     handleHeight: isRowCountLocked,
     refreshMode: 'debounce',
     refreshRate: 100,
   });
 
+  const setSelectedNames = useCallback(
+    (names: Set<string>) => {
+      editorState?.setSelectedCompNames(names);
+    },
+    [editorState?.setSelectedCompNames]
+  );
+
+  // Cleanup item references when items are removed
+  useEffect(() => {
+    const currentKeys = new Set(Object.keys(props.items));
+    const refKeys = new Set(Object.keys(itemViewRef.current));
+    
+    // Remove references to items that no longer exist
+    refKeys.forEach(key => {
+      if (!currentKeys.has(key)) {
+        delete itemViewRef.current[key];
+      }
+    });
+  }, [props.items]);
+
   const itemViewRef = useRef<GirdItemViewRecord>({});
   const itemViews = useMemo(() => {
     const newView: GirdItemViewRecord = {};

client/packages/lowcoder/src/comps/comps/formComp/createForm.tsx

@@ -12,7 +12,7 @@ import {
   TacoButton,
 } from "lowcoder-design";
 import _ from "lodash";
-import { useEffect, useState } from "react";
+import { useEffect, useState, useCallback } from "react";
 import { useDispatch, useSelector } from "react-redux";
 import { AppState } from "redux/reducers";
 import { fetchDatasourceStructure } from "redux/reduxActions/datasourceActions";
@@ -552,13 +552,22 @@ const CreateFormBody = (props: { onCreate: CreateHandler }) => {
   const dataSourceId: string | undefined = Form.useWatch("dataSourceId", form);
   const dataSourceItems = useDataSourceItems();
   const dataSourceItem = dataSourceItems.find((t) => t.dataSource.id === dataSourceId);
+  
+  // Cleanup form on unmount
+  useEffect(() => {
+    return () => {
+      form.resetFields();
+    };
+  }, [form]);
+
   // default to the first item
   useEffect(() => {
     if (!dataSourceItem) {
       const id = dataSourceItems.length > 0 ? dataSourceItems[0].dataSource.id : undefined;
       form.setFieldsValue({ dataSourceId: id });
     }
-  }, [dataSourceItems]);
+  }, [dataSourceItems, dataSourceItem, form]);
+
   // Refetch when changed
   const dispatch = useDispatch();
   useEffect(() => {
@@ -570,25 +579,27 @@ const CreateFormBody = (props: { onCreate: CreateHandler }) => {
   const tableName: string | undefined = Form.useWatch("tableName", form);
   const tableStructures = useTableStructures(dataSourceId);
   const tableStructure = tableStructures.find((t) => t.name === tableName);
+  
   // default to the first one
   useEffect(() => {
     if (!tableStructure) {
       const name = tableStructures.length > 0 ? tableStructures[0].name : undefined;
       form.setFieldsValue({ tableName: name });
     }
-  }, [tableStructures]);
+  }, [tableStructures, tableStructure, form]);
+
   // Columns of the data table, saved to support drag and drop
   const [items, setItems] = useState<RowItem[]>([]);
   const dataSourceTypeConfig = dataSourceItem?.typeConfig;
+  
   useEffect(() => {
     const { initItems, initColumns } = getInitItemsAndColumns(dataSourceTypeConfig, tableStructure);
     // Set the initial value by the method. Because if another table has the same column name, setting via initialValue is invalid.
     form.setFieldsValue({ columns: initColumns });
     setItems(initItems);
-  }, [dataSourceTypeConfig, tableStructure]);
+  }, [dataSourceTypeConfig, tableStructure, form]);
 
-  const handleDragEnd = (e: { active: { id: string }; over: { id: string } | null }) => {
-    console.log('handleDragEnd', e);
+  const handleDragEnd = useCallback((e: { active: { id: string }; over: { id: string } | null }) => {
     if (!e.over) {
       return;
     }
@@ -603,7 +614,7 @@ const CreateFormBody = (props: { onCreate: CreateHandler }) => {
     newData.splice(toIndex, 0, movedItem);
 
     setItems(newData);
-  };
+  }, [items]);
 
   const emptyText = getEmptyText(dataSourceItems.length, tableStructures.length, items.length);
 
@@ -688,27 +699,40 @@ const CreateFormBody = (props: { onCreate: CreateHandler }) => {
 
 export const CreateForm = (props: { onCreate: CreateHandler }) => {
   const [visible, setVisible] = useState(false);
+  
+  const handleMouseDown = useCallback((e: React.MouseEvent) => {
+    setVisible(true);
+    e.stopPropagation();
+  }, []);
+  
+  const handleKeyDown = useCallback((e: React.KeyboardEvent) => {
+    e.stopPropagation();
+  }, []);
+  
+  const handleClick = useCallback((e: React.MouseEvent) => {
+    e.stopPropagation();
+  }, []);
+  
+  const handleCancel = useCallback(() => {
+    setVisible(false);
+  }, []);
+
   return (
     <>
-      <OpenDialogButton
-        onMouseDown={(e) => {
-          setVisible(true);
-          e.stopPropagation();
-        }}
-      >
+      <OpenDialogButton onMouseDown={handleMouseDown}>
         {trans("formComp.openDialogButton")}
       </OpenDialogButton>
       <div
-        onKeyDown={(e) => e.stopPropagation()}
-        onMouseDown={(e) => e.stopPropagation()}
-        onClick={(e) => e.stopPropagation()}
+        onKeyDown={handleKeyDown}
+        onMouseDown={handleMouseDown}
+        onClick={handleClick}
       >
         <CustomModal
           open={visible}
           destroyOnClose={true}
           title={trans("formComp.generateForm")}
           footer={null}
-          onCancel={() => setVisible(false)}
+          onCancel={handleCancel}
           width="600px"
           children={<CreateFormBody {...props} />}
           styles={{ body: {padding: 0} }}

client/packages/lowcoder/src/comps/comps/formComp/formComp.tsx

@@ -167,14 +167,18 @@ function onCreate(
 const BodyPlaceholder = (props: FormProps) => {
   const editorState = useContext(EditorContext);
   const formName = useContext(CompNameContext);
+  
+  const handleCreate = (data: CreateData) => {
+    const result = onCreate(data, props, editorState, formName);
+    return Promise.resolve(result);
+  };
+  
   return (
     <ContainerPlaceholder>
       {trans("formComp.containerPlaceholder")}
       <br />
       <CreateForm
-        onCreate={(data: CreateData) =>
-          Promise.resolve(onCreate(data, props, editorState, formName))
-        }
+        onCreate={handleCreate}
       />
     </ContainerPlaceholder>
   );

client/packages/lowcoder/src/comps/comps/formComp/formDataConstants.tsx

@@ -2,7 +2,7 @@ import { RecordConstructorToComp } from "lowcoder-core";
 import { StringControl } from "comps/controls/codeControl";
 import { CompNameContext, EditorContext } from "comps/editorState";
 import { Section } from "lowcoder-design";
-import { ReactNode } from "react";
+import { ReactNode, useContext, useMemo } from "react";
 import { trans } from "i18n";
 
 export interface IForm {
@@ -17,24 +17,26 @@ export const formDataChildren = {
 
 type FormDataComp = RecordConstructorToComp<typeof formDataChildren>;
 
-export const FormDataPropertyView = (children: FormDataComp) => (
-  <EditorContext.Consumer>
-    {(editorState) => (
-      <CompNameContext.Consumer>
-        {(name) => (
-          <>
-            {editorState?.findUIParentContainer(name, "form") && (
-              <Section name={trans("form")}>
-                {children.formDataKey.propertyView({
-                  label: trans("formComp.name"),
-                  placeholder: name,
-                  tooltip: trans("formComp.nameTooltip"),
-                })}
-              </Section>
-            )}
-          </>
-        )}
-      </CompNameContext.Consumer>
-    )}
-  </EditorContext.Consumer>
-);
+export const FormDataPropertyView = (children: FormDataComp) => {
+  const editorState = useContext(EditorContext);
+  const name = useContext(CompNameContext);
+  
+  const isFormParent = useMemo(() => 
+    editorState?.findUIParentContainer(name, "form"),
+    [editorState, name]
+  );
+
+  if (!isFormParent) {
+    return null;
+  }
+
+  return (
+    <Section name={trans("form")}>
+      {children.formDataKey.propertyView({
+        label: trans("formComp.name"),
+        placeholder: name,
+        tooltip: trans("formComp.nameTooltip"),
+      })}
+    </Section>
+  );
+};