lu-lowcode-package-form 0.10.21 → 0.10.27

package/package.json

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

package/src/App.jsx

@@ -78,6 +78,7 @@ const treeData = [
 function App() {
   const formRef = React.createRef();
   const testRef = React.useRef()
+  const [testCalcHidden, setTestCalcHidden] = useState(false);
   useEffect(() => {
     // console.log("testRef //////", testRef.current)
   }, [testRef.current])
@@ -116,6 +117,9 @@ function App() {
   return (
     <div className='fflex fflex-col fitems-center fh-screen '>
       <div className='fflex fgap-2 fitems-center fjustify-center  fw-full'>
+        <Button type="primary" onClick={()=>{
+          setTestCalcHidden(!testCalcHidden)
+        }}>testCalcHidden</Button>
         <Button type="primary" onClick={validateFields}>validateFields</Button>
         <Button type="primary" onClick={getFormFields}>GetValues</Button>
         <Button type="primary" onClick={setFormFields}>SetValues</Button>
@@ -175,6 +179,7 @@ function App() {
 
           <FormContainerWrapper cols={cols} className="" ref={formRef} >
            
+          <Field.Number label="测试" __id="shuilv111" isRequired={true} calcHidden={testCalcHidden} />
             <Field.UserSelect label="选择用户" __id="userselect" defaultValue={[{ id: 1, username: "十天" }]} />
             <Layout.FormGroupTitle title={"基本信息"} />
             <Field.WithSingleSelect
@@ -195,7 +200,7 @@ function App() {
 
               ]} label="发票类型" options={[{ label: '选项1', value: '1', shuilv: 15, }, { label: '选项2', value: '2', shuilv: 50 }, { label: '选项3', value: '3', shuilv: 2 }]} __id="fapiaoleixing" />
 
-            <Field.Number label="税率（%）" __id="shuilv" />
+            <Field.Number label="税率（%）" __id="shuilv" calcHidden={true} />
 
             <Field.WithSingleSelect isRequired={true} ref={testRef} fillRules={[
               {
@@ -295,7 +300,7 @@ function App() {
             <Field.Input label="测试被填充1" __id="tcinput1" />
             <Field.Input label="测试被填充2" __id="tcinput2" />
 
-                <Field.Number label="税率（%）" __id="shuilv_table" withIds={[
+                <Field.Number label="税率（%）" isRequired={true} calcHidden={true} __id="shuilv_table" withIds={[
                   "shuilv"
                 ]}
                   withFill={{

package/src/components/field/base.jsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from "react";
+import React, { useEffect, useRef, useState } from "react";
 
 const FieldLable = ({ value, onChange }) => {
     const [text, setText] = useState("");
@@ -24,19 +24,33 @@ export const BaseWrapper = ({
     hidePrompt = false,
     subTableIndex,
     addWrapper = true,
+    calcHidden,
     defaultValue,
     value,
     onChange,
     readonly,
     isRequired,
+    initializeFormRender,
     ...otherProps
 }) => {
+    const calcHiddenRef = useRef(false);
+    useEffect(()=>{
+        console.log("typeof initializeFormRender", typeof initializeFormRender)
+        console.log("calcHidden", calcHidden)
+        console.log("calcHiddenRef.current", calcHiddenRef.current)
+        if (calcHiddenRef.current != calcHidden)
+        {
+            typeof initializeFormRender == "function" && initializeFormRender();
+            calcHiddenRef.current = calcHidden;
+        }
+    },[calcHidden])
     useEffect(()=>{
         if (defaultValue && typeof onChange === "function" && !value) {
             // console.log("defaultValue changed", defaultValue)
             onChange(defaultValue)
         }
     },[])
+    // if (noShow) return null;
     if (!addWrapper) return children;
     // 不接管只读属性的组件
     const ignoreReadonly = ["UploadImage", "UploadFile", "Table", "WithMultipleSelect", "WithSingleSelect"]

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

@@ -19,17 +19,18 @@ const TableAction = ({ label, subTableIndex, children, subTableHead = false, ...
 }
 
 
-const TableCol = ({ children, width, ...props }) => {
+const TableCol = ({ children, width, hidden, ...props }) => {
     const [sWidth, setSWidth] = useState(0);
     useEffect(() => {
         setSWidth(width);
     }, [width]);
+    if (hidden) return children;
     return <div className="fflex-1 fpx-1" style={{ minWidth: `${sWidth}px` }} {...props}>
         {children}
     </div>
 }
 
-const Table = ({ children, onTableAddRow, disabled, readonly, onTableRemoveRow, form, fieldName, ...props }) => {
+const Table = ({ children, onTableAddRow, disabled, readonly, onTableRemoveRow, form, fieldName,initializeFormRender, mode, ...props }) => {
     useEffect(()=>{
         console.log("Table form reload",form)
     },[form])
@@ -66,9 +67,10 @@ const Table = ({ children, onTableAddRow, disabled, readonly, onTableRemoveRow,
             return <div className="fw-full ">
                 <div className="fw-full frelative fmin-h-20 foverflow-x-auto">
                     {fields.length === 0 && <div key={`tableHead`} className="fborder-b fflex flex-nowrap fmin-w-full ">
-                        {React.Children.map(children, (child, childIndex) => {
-                            return <TableCol width={150} key={`row_${0}_col_${childIndex}`}>
-                                {React.cloneElement(child, {
+                        {React.Children.map(children, ( child, childIndex) => {
+                            const hidden = child?.props?.calcHidden;
+                            return <TableCol width={150} key={`row_${0}_col_${childIndex}`} hidden={hidden}>
+                                {hidden ? null : React.cloneElement(child, {
                                     key: `row_${0}_child_${childIndex}`,
                                     subTable: true,
                                     subTableHead: true,
@@ -102,9 +104,11 @@ const Table = ({ children, onTableAddRow, disabled, readonly, onTableRemoveRow,
                                 const componentName = child.type?.displayName || _componentName;
                                 const identifier = componentId || __id;
                                
-                                return <TableCol width={150} key={`row_${field.key}_col_${childIndex}`}>
+                                const hidden = props.calcHidden && mode != "desgin";
+                                return <TableCol width={150} key={`row_${field.key}_col_${childIndex}`} hidden={hidden}>
                                     <Form.Item
                                         style={{ margin: 0 }}
+                                        hidden={hidden}
                                         shouldUpdate={(prevValues, curValues) => {
                                             let result = false;
                                             if (
@@ -143,7 +147,7 @@ const Table = ({ children, onTableAddRow, disabled, readonly, onTableRemoveRow,
                                         {( {getFieldsValue}) => {
                                             const fieldsValue = getFieldsValue();
                                             // const newid = nanoid()
-                                            console.log(`[${child.props.label}] key`,`row_${field.key}_child_${childIndex}_${newidRefs.current[childIndex]}`    )
+                                            // console.log(`[${child.props.label}] key`,`row_${field.key}_child_${childIndex}_${newidRefs.current[childIndex]}`    )
                                              return <Form.Item
                                                 label=""
                                                 style={{ marginBottom: 0 }}
@@ -158,6 +162,7 @@ const Table = ({ children, onTableAddRow, disabled, readonly, onTableRemoveRow,
                                                     form,
                                                     fieldName: [fieldName, field.name, col_id],
                                                     fieldsValue:fieldsValue,
+                                                    initializeFormRender,
                                                 })}
                                             </Form.Item>
                                         }}

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

@@ -28,7 +28,8 @@ function batchElements(elements, groupSize) {
             groupedElements.push([element]);
         } else {
             tempArray.push(element);
-            if (tempArray.length === groupSize) {
+            const visibleElementsCount = tempArray.filter(el => !el?.props?.calcHidden).length;
+            if (visibleElementsCount === groupSize) {
                 groupedElements.push(tempArray);
                 tempArray = [];
             }
@@ -61,10 +62,13 @@ const FormContainer = forwardRef(({ cols = 1, children, mode = "view" }, ref) =>
     }), []);
 
     useEffect(() => {
-        initializeDependencyMap();
-        setFormContent(renderChildren());
+        initializeFormRender();
     }, [children, cols]);
 
+    const initializeFormRender = ()=>{
+        initializeDependencyMap();
+        setFormContent(renderChildren());
+    }
 
     const lastFormValues = React.useRef(null);
     const getLastFieldValue = (path) => {
@@ -465,6 +469,8 @@ const FormContainer = forwardRef(({ cols = 1, children, mode = "view" }, ref) =>
                     const identifier = componentId || __id;
                     const isLayoutComponent = componentName && componentName.startsWith('Layout.');
                     const isTable = componentName && componentName == 'Field.Table';
+                    const hidden = props.calcHidden && mode != "desgin";
+                   
                     const rules = []
                     if (props.isRequired)
                         rules.push({ required: true, message: `${props.label}必须填写` });
@@ -481,9 +487,10 @@ const FormContainer = forwardRef(({ cols = 1, children, mode = "view" }, ref) =>
                     }
                     let childComponent
                     if (isTable || isLayoutComponent)
-                        childComponent = React.cloneElement(child, { onTableAddRow: handleTableAddRow, onTableRemoveRow: handleTableRemoveRow, form: form, fieldName: identifier, onCustomChange })
+                        childComponent = React.cloneElement(child, { onTableAddRow: handleTableAddRow, onTableRemoveRow: handleTableRemoveRow, form: form, fieldName: identifier, onCustomChange,initializeFormRender,mode })
                     else if (componentName === "Field.WithSingleSelect" || componentName === "Field.WithMultipleSelect") {
                         childComponent = <Form.Item
+                            hidden={hidden}
                             style={{ margin: 0 }}
                             shouldUpdate={(prevValues, curValues) => {
                                 let result = false;
@@ -515,24 +522,29 @@ const FormContainer = forwardRef(({ cols = 1, children, mode = "view" }, ref) =>
                                     name={identifier}
                                     rules={rules}
                                 >
-                                    {React.cloneElement(child, { onTableAddRow: handleTableAddRow, onTableRemoveRow: handleTableRemoveRow, form: form, fieldName: identifier, onCustomChange, fieldsValue })}
+                                    {React.cloneElement(child, { onTableAddRow: handleTableAddRow, onTableRemoveRow: handleTableRemoveRow, form: form, fieldName: identifier, onCustomChange, fieldsValue,initializeFormRender })}
                                 </Form.Item>
                             }}
                         </Form.Item>
                     } else {
                         childComponent = <Form.Item
+                            hidden={hidden}
                             style={{ marginBottom: 0 }}
                             label=""
                             name={identifier}
                             rules={rules}
                         >
-                            {React.cloneElement(child, { form: form, fieldName: identifier, onCustomChange })}
+                            {React.cloneElement(child, { form: form, fieldName: identifier, onCustomChange,initializeFormRender })}
                         </Form.Item>
                     }
                     return (
-                        <Col key={identifier || `col-${index}`} span={isLayoutComponent ? 24 : 24 / group.length} style={{ marginBottom: 0 }}>
-                            {childComponent}
-                        </Col>
+                        <Col
+                        key={identifier || `col-${index}`}
+                        span={props.calcHidden ? 0 : (isLayoutComponent ? 24 : 24 / cols)}
+                        style={{ marginBottom: 0 }}
+                    >
+                        {childComponent}
+                    </Col>
                     );
                 })}
             </Row>

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

@@ -1,7 +1,7 @@
 import React, { useMemo } from 'react';
 import { Form, Row, Col } from 'antd';
 
-const LayoutFormRow = ({ children, layout, onTableAddRow, onTableRemoveRow, form }) => {
+const LayoutFormRow = ({ children, layout, onTableAddRow, onTableRemoveRow, form,initializeFormRender ,mode}) => {
   layout = layout || '1';
   const getColSpan = (layoutStr) => {
     const layoutArray = layoutStr.split(',').map(Number);
@@ -25,9 +25,9 @@ const LayoutFormRow = ({ children, layout, onTableAddRow, onTableRemoveRow, form
 
       let childComponent = null
       if (componentName == 'Field.Table')
-        childComponent = React.cloneElement(child, { onTableAddRow: onTableAddRow, onTableRemoveRow: onTableRemoveRow, form: form ,fieldName:name})
+        childComponent = React.cloneElement(child, { onTableAddRow: onTableAddRow, onTableRemoveRow: onTableRemoveRow, form: form ,fieldName:name,initializeFormRender,mode})
       else if (React.isValidElement(child))
-        childComponent = React.cloneElement(child, { form: form ,fieldName:name })
+        childComponent = React.cloneElement(child, { form: form ,fieldName:name,initializeFormRender })
       else childComponent = child
 
       if (name) {