lu-lowcode-package-form 0.6.2 → 0.7.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "lu-lowcode-package-form",
-  "version": "0.6.2",
+  "version": "0.7.1",
   "dependencies": {
     "@ant-design/icons": "^5.3.7",
     "@testing-library/jest-dom": "^5.17.0",
@@ -41,6 +41,7 @@
   },
   "devDependencies": {
     "@babel/core": "^7.24.7",
+    "@babel/plugin-proposal-nullish-coalescing-operator": "^7.18.6",
     "@babel/preset-env": "^7.24.7",
     "@babel/preset-react": "^7.24.7",
     "@rollup/plugin-babel": "^6.0.4",

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

@@ -4,7 +4,7 @@ import { Form, Row, Col } from "antd";
 
 function debounce(func, wait) {
     let timeout;
-    return function(...args) {
+    return function (...args) {
         clearTimeout(timeout);
         timeout = setTimeout(() => func.apply(this, args), wait);
     }
@@ -55,7 +55,7 @@ const FormContainer = forwardRef(({ cols, children }, ref) => {
     }, [])
 
     useEffect(() => {
-    },[form])
+    }, [form])
 
     useEffect(() => {
         initWithMap()
@@ -76,23 +76,23 @@ const FormContainer = forwardRef(({ cols, children }, ref) => {
                 show: true
             });
         }
-      
+
         initFieldsShow();
-       
+
     }
-    
+
     // 初始化字段的显示状态
     const initFieldsShow = (reloadFields = false) => {
         const fieldsValues = form.getFieldsValue();
         withMap.current.keys().forEach(function (key) {
-            computeNeedShow(key,fieldsValues)
+            computeNeedShow(key, fieldsValues)
         });
 
-        if (reloadFields)  setFormContent(getChildren())
+        if (reloadFields) setFormContent(getChildren())
     }
 
     // 计算是否显示
-    const computeNeedShow = (name,fieldsValues) => {
+    const computeNeedShow = (name, fieldsValues) => {
         let needRefresh = false;
         if (withMap.current.has(name)) {
             let withChildrens = withMap.current.get(name).children
@@ -113,21 +113,21 @@ const FormContainer = forwardRef(({ cols, children }, ref) => {
         }
         return needRefresh
     }
-    
+
     const handleFieldsChange = debounce((changedFields, allFields) => {
         // 获得所有字段值
         const fieldsValues = form.getFieldsValue();
         let needRefresh = false;
         for (let index = 0; index < changedFields.length; index++) {
             const element = changedFields[index];
-            if (element.name && element.name.length > 0 ) 
-                needRefresh = computeNeedShow(element.name[0],fieldsValues)
+            if (element.name && element.name.length > 0)
+                needRefresh = computeNeedShow(element.name[0], fieldsValues)
         }
         if (needRefresh) {
             setFormContent(getChildren())
         }
     }, 100);  // 字段变化时会调用三次此函数，使用 100 毫秒的防抖时间
-    
+
     const getChildren = () => {
         let childrenArray = React.Children.toArray(children);
         const newArray = groupArray(childrenArray.filter((item) => {
@@ -189,3 +189,19 @@ const FormContainer = forwardRef(({ cols, children }, ref) => {
 
 export default FormContainer;
 
+/**
+ * 简单包装，不做任何处理
+ * 部分组件ref比较特殊，包一层会解决这个问题
+ */
+export function withWrap(Comp) {
+    return forwardRef((props, ref) => {
+        return <Comp {...props} ref={ref} forwardedRef={ref} />;
+    });
+}
+
+const FormContainerClass = () => {
+    const { forwardedRef, ...otherProps } = this.props;
+    return <FormContainerWrapper {...otherProps} ref={forwardedRef} />
+}
+
+export const FormContainerWrapper = withWrap(FormContainerClass);

package/src/components/index.jsx

@@ -2,7 +2,7 @@ import { Input, TextArea, Password, Search ,CodeMachine} from './field/input/ind
 import '../App.css';
 import { TreeSelect, Select } from './field/select/index.jsx'
 import Custom from './field/custom/index.jsx'
-import { default as FormContainer } from './form-container/index.jsx'
+import { default as FormContainer, FormContainerWrapper } from './form-container/index.jsx'
 import { Checkbox ,CheckboxTree } from './field/checkbox/index.jsx'
 import { default as RadioGrop } from './field/radio/index.jsx'
 const Field = {
@@ -19,4 +19,4 @@ const Field = {
     Custom,
 }
 
-export { FormContainer, Field }
+export { FormContainer, Field ,FormContainerWrapper }

package/vite.config.js

@@ -19,7 +19,21 @@ export default defineConfig({
           react: 'React',
           'react-dom': 'ReactDOM'
         }
-      }
+      },
+      plugins: [
+        babel({
+          babelHelpers: 'bundled',
+          exclude: 'node_modules/**',
+          presets: [
+            '@babel/preset-env',
+            '@babel/preset-react'
+          ],
+          plugins: [
+            '@babel/plugin-proposal-nullish-coalescing-operator',
+            '@babel/plugin-proposal-optional-chaining'
+          ]
+        })
+      ]
     }
   },
   css: {
@@ -32,11 +46,5 @@ export default defineConfig({
   },
   plugins: [
     react(),
-    babel({
-      babelHelpers: 'bundled',
-      exclude: 'node_modules/**',
-      presets: ['@babel/preset-env', '@babel/preset-react'],
-      plugins: ['@babel/plugin-proposal-nullish-coalescing-operator'],
-    }),
   ],
 });