lu-lowcode-package-form 0.10.51 → 0.10.52

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "lu-lowcode-package-form",
-  "version": "0.10.51",
+  "version": "0.10.52",
   "dependencies": {
     "@ant-design/icons": "^4.8.1",
     "@dnd-kit/core": "^6.1.0",

package/src/components/field/select/search-select.jsx

@@ -6,7 +6,7 @@ import { BaseWrapper } from "../base"
 import { debounce, isEqual } from 'lodash';
 
 
-const SearchSelect = forwardRef(({ addWrapper = true, form, fieldName, fieldsValue, value, type, defaultValue, onChange, option_label, option_value, option_search, options, request, requestParams, callError, subRequest, sub_option_label = "label", mode = "single", sub_option_value = "id", rightIconRender, rightIcon, rightIconClick,recordFieldsChange, ...props }, ref) => {
+const SearchSelect = forwardRef(({ addWrapper = true, form, fieldName, fieldsValue, shouldUpdateKey,value, type, defaultValue, onChange, option_label, option_value, option_search, options, request, requestParams, callError, subRequest, sub_option_label = "label", mode = "single", sub_option_value = "id", rightIconRender, rightIcon, rightIconClick,recordFieldsChange, ...props }, ref) => {
     const [nOptions, setNOptions] = React.useState([])
     const [fetching, setFetching] = useState(false);
     useEffect(() => {
@@ -32,9 +32,10 @@ const SearchSelect = forwardRef(({ addWrapper = true, form, fieldName, fieldsVal
     // }, [requestParams, fieldsValue])
 
     useEffect(() => {
-        console.log("SearchSelect useEffect fieldsValue", fieldsValue)
+        console.log("SearchSelect useEffect shouldUpdateKey", shouldUpdateKey)
+        console.log("SearchSelect useEffect requestParams", requestParams)
         initData(requestParams)
-    }, [fieldsValue])
+    }, [shouldUpdateKey,requestParams])
 
     // useEffect(() => {
     //    console.log("SearchSelect useEffect requestParams", requestParams)

package/src/components/field/table/index.jsx

@@ -136,7 +136,6 @@ const Table = ({ children, onTableAddRow, disabled, readonly, onTableRemoveRow,
                                             }
                                             if (result) {
                                                 newidRefs.current[childIndex] = nanoid();
-                                                console.log(`[${child.props.label}]newid`, newidRefs.current[childIndex]);
                                             }
                                             return result;
                                         }}
@@ -152,11 +151,13 @@ const Table = ({ children, onTableAddRow, disabled, readonly, onTableRemoveRow,
                                                 rules={rules}
                                             >
                                                 {React.cloneElement(child, {
-                                                    key: `row_${field.key}_child_${childIndex}_${newidRefs.current[childIndex]}`,
+                                                    // key: `row_${field.key}_child_${childIndex}_${newidRefs.current[childIndex]}`,
+                                                    key: `row_${field.key}_child_${childIndex}`,
                                                     subTable: true,
                                                     subTableIndex: index,
                                                     subTableHead: index === 0,
                                                     form,
+                                                    shouldUpdateKey: newidRefs.current[childIndex],
                                                     fieldName: [fieldName, field.name, col_id],
                                                     fieldsValue: fieldsValue,
                                                     initializeFormRender,

package/src/components/form-container/index.jsx

@@ -68,9 +68,9 @@ const FormContainer = forwardRef(({ cols = 1, children, mode = "view" }, ref) =>
             initializeDependencyMap();
             setFormContent(renderChildren());
         }, 300),
-        [children, cols] 
+        [children, cols]
     );
- 
+
 
     useEffect(() => {
         throttledInitializeFormRender();
@@ -284,7 +284,7 @@ const FormContainer = forwardRef(({ cols = 1, children, mode = "view" }, ref) =>
         }
 
         setTimeout(() => {
-            recordFieldsChange(changedFields,true)
+            recordFieldsChange(changedFields, true)
             // console.log("idGroups", idGroups)
             if (idGroups.length > 0) idGroups.forEach(ids => { if (Array.isArray(ids) && ids.length > 0) handleTableAddRow(ids) })
         }, 0)
@@ -483,6 +483,8 @@ const FormContainer = forwardRef(({ cols = 1, children, mode = "view" }, ref) =>
             })
         }, 0);
     }
+
+    const shouldUpdateKey = React.useRef({})
     const renderChildren = () => {
         const childrenArray = React.Children.toArray(children);
         const groupedChildren = batchElements(
@@ -492,7 +494,9 @@ const FormContainer = forwardRef(({ cols = 1, children, mode = "view" }, ref) =>
             }),
             cols
         );
-        
+
+
+
 
         return groupedChildren.map((group, index) => (
             <Row key={`row-${index}`} gutter={[24, 24]}>
@@ -500,6 +504,9 @@ const FormContainer = forwardRef(({ cols = 1, children, mode = "view" }, ref) =>
                     const { componentId, __id, _componentName, ...props } = child.props;
                     const componentName = child.type?.displayName || _componentName;
                     const identifier = componentId || __id;
+                    if (!(identifier in shouldUpdateKey.current)) {
+                        shouldUpdateKey.current[identifier] = nanoid()
+                    }
                     const isLayoutComponent = componentName && componentName.startsWith('Layout.');
                     const isTable = componentName && componentName == 'Field.Table';
                     const hidden = props.calcHidden && mode != "desgin";
@@ -518,10 +525,10 @@ const FormContainer = forwardRef(({ cols = 1, children, mode = "view" }, ref) =>
                     const onCustomChange = (value) => {
                         form.setFieldValue(identifier, value)
                     }
-                    
+
                     let childComponent
-                    if (isTable || isLayoutComponent){
-                        childComponent = React.cloneElement(child, { onTableAddRow: handleTableAddRow, onTableRemoveRow: handleTableRemoveRow, form: form, fieldName: identifier, onCustomChange, initializeFormRender, mode , recordFieldsChange })
+                    if (isTable || isLayoutComponent) {
+                        childComponent = React.cloneElement(child, { onTableAddRow: handleTableAddRow, onTableRemoveRow: handleTableRemoveRow, form: form, fieldName: identifier, onCustomChange, initializeFormRender, mode, recordFieldsChange })
                     }
                     else if (componentName === "Field.WithSingleSelect" || componentName === "Field.WithMultipleSelect" || componentName === "Show.WithTable") {
                         childComponent = <Form.Item
@@ -545,18 +552,18 @@ const FormContainer = forwardRef(({ cols = 1, children, mode = "view" }, ref) =>
                                         }
                                     }
                                 }
-                                console.log(" ")
-                                console.log("curValues",curValues)
-                                console.log("prevValues",prevValues)
-                                console.log("result",result)
-                                console.log("props.label",props.label)
-                                console.log(" ")
+                                if (result) {
+                                    shouldUpdateKey.current[identifier] = nanoid()
+                                }
                                 return result;
                             }}
                         >
                             {({ getFieldsValue }) => {
                                 const fieldsValue = getFieldsValue();
-                                let element = React.cloneElement(child, { onTableAddRow: handleTableAddRow, onTableRemoveRow: handleTableRemoveRow, form: form, fieldName: identifier, onCustomChange, fieldsValue, initializeFormRender ,recordFieldsChange})
+                                let element = React.cloneElement(child, {
+                                    onTableAddRow: handleTableAddRow, onTableRemoveRow: handleTableRemoveRow, form: form, fieldName: identifier, onCustomChange, fieldsValue, initializeFormRender, recordFieldsChange,
+                                    shouldUpdateKey: newidRefs.current[childIndex],
+                                })
                                 return componentName === "show.WithTable" ? <>{element}</> : <Form.Item
                                     style={{ marginBottom: 0 }}
                                     label=""
@@ -575,7 +582,7 @@ const FormContainer = forwardRef(({ cols = 1, children, mode = "view" }, ref) =>
                             name={identifier}
                             rules={rules}
                         >
-                            {React.cloneElement(child, { form: form, fieldName: identifier, onCustomChange, initializeFormRender,recordFieldsChange })}
+                            {React.cloneElement(child, { form: form, fieldName: identifier, onCustomChange, initializeFormRender, recordFieldsChange })}
                         </Form.Item>
                     }
                     return (

package/src/components/form-container/layout/form-row.jsx

@@ -1,4 +1,5 @@
 import React, { useMemo } from 'react';
+import { nanoid } from 'nanoid';
 import { Form, Row, Col } from 'antd';
 
 const LayoutFormRow = ({ children, layout, onTableAddRow, onTableRemoveRow, form, initializeFormRender,recordFieldsChange, mode }) => {
@@ -12,6 +13,7 @@ const LayoutFormRow = ({ children, layout, onTableAddRow, onTableRemoveRow, form
   const colSpans = useMemo(() => getColSpan(layout), [layout]);
 
 
+  const shouldUpdateKey = React.useRef({})
   const formItems = useMemo(() => {
     return React.Children.toArray(children).map((child, index) => {
       const props = child.props;
@@ -22,7 +24,9 @@ const LayoutFormRow = ({ children, layout, onTableAddRow, onTableRemoveRow, form
       // let childComponent = child;
       // if (componentName  == 'Field.Table') 
       //     childComponent = React.cloneElement(child, { onTableAddRow: onTableAddRow, onTableRemoveRow: onTableRemoveRow })
-
+      if (!(identifier in shouldUpdateKey.current)) {
+        shouldUpdateKey.current[identifier] = nanoid()
+      }
       const hidden = props?.calcHidden && mode != "desgin";
       const rules = []
       if (props?.isRequired)
@@ -63,12 +67,15 @@ const LayoutFormRow = ({ children, layout, onTableAddRow, onTableRemoveRow, form
                 }
               }
             }
+            if (result) {
+              shouldUpdateKey.current[identifier] = nanoid()
+            }
             return result;
           }}
         >
           {({ getFieldsValue }) => {
             const fieldsValue = getFieldsValue();
-            let element = React.cloneElement(child, { onTableAddRow: onTableAddRow, onTableRemoveRow: onTableRemoveRow, form: form, fieldName: identifier, onCustomChange, fieldsValue, initializeFormRender,recordFieldsChange })
+            let element = React.cloneElement(child, { onTableAddRow: onTableAddRow, onTableRemoveRow: onTableRemoveRow, form: form, fieldName: identifier, onCustomChange, fieldsValue, initializeFormRender,recordFieldsChange, shouldUpdateKey: shouldUpdateKey.current[identifier] })
             return componentName === "Show.WithTable" ? <>{element}</> : <Form.Item
               style={{ marginBottom: 0 }}
               label=""