lu-lowcode-package-form 0.11.5 → 0.11.6

package/package.json

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

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

@@ -7,7 +7,7 @@ import { nanoid } from 'nanoid';
 import { eventEmitter } from '../../utils/events'
 
 
-function batchElements(elements, groupSize) {
+function batchElements(elements, groupSize,dmap) {
     const groupedElements = [];
     let tempArray = [];
 
@@ -29,7 +29,11 @@ function batchElements(elements, groupSize) {
             groupedElements.push([element]);
         } else {
             tempArray.push(element);
-            const visibleElementsCount = tempArray.filter(el => !el?.props?.calcHidden).length;
+            const visibleElementsCount = tempArray.filter(el => {
+                const identifier = el.props?.componentId || el.props?.__id;
+                const isShow = !dmap.has(identifier) || dmap.get(identifier)?.show;
+                return isShow && !el?.props?.calcHidden
+            }).length;
             if (visibleElementsCount === groupSize) {
                 groupedElements.push(tempArray);
                 tempArray = [];
@@ -41,7 +45,6 @@ function batchElements(elements, groupSize) {
         fillWithReactElement(groupSize, tempArray);
         groupedElements.push(tempArray);
     }
-
     return groupedElements;
 }
 
@@ -639,11 +642,13 @@ const FormContainer = forwardRef(({ cols = 1, children, mode = "view" }, ref) =>
         console.log("renderChildren")
         const childrenArray = React.Children.toArray(children);
         const groupedChildren = batchElements(
-            childrenArray.filter(child => {
-                const identifier = child.props.componentId || child.props.__id;
-                return !dependencyMap.current.has(identifier) || dependencyMap.current.get(identifier)?.show;
-            }),
-            cols
+            childrenArray,
+            // childrenArray.filter(child => {
+            //     const identifier = child.props.componentId || child.props.__id;
+            //     return !dependencyMap.current.has(identifier) || dependencyMap.current.get(identifier)?.show;
+            // }),
+            cols,
+            dependencyMap.current
         );
 
 
@@ -660,7 +665,8 @@ const FormContainer = forwardRef(({ cols = 1, children, mode = "view" }, ref) =>
                     }
                     const isLayoutComponent = componentName && componentName.startsWith('Layout.');
                     const isTable = componentName && componentName == 'Field.Table';
-                    const hidden = props.calcHidden && mode != "desgin";
+                    const isShow = !dependencyMap.current.has(identifier) || dependencyMap.current.get(identifier)?.show;
+                    const hidden = (props.calcHidden || !isShow) && mode != "desgin";
 
                     const rules = []
                     if (props.isRequired)
@@ -740,7 +746,7 @@ const FormContainer = forwardRef(({ cols = 1, children, mode = "view" }, ref) =>
                     return (
                         <Col
                             key={identifier || `col-${index}`}
-                            span={props.calcHidden ? 0 : (isLayoutComponent ? 24 : 24 / cols)}
+                            span={hidden ? 0 : (isLayoutComponent ? 24 : 24 / cols)}
                             style={{ marginBottom: 0 }}
                         >
                             {childComponent}