zy-react-library 1.0.155 → 1.0.157

package/components/FormBuilder/FormItemsRenderer.d.ts

@@ -71,8 +71,8 @@ export interface FormOption {
   label?: ReactNode;
   /** 渲染类型 */
   render?: FormItemRenderType;
-  /** 占据栅格列数，默认 12 */
-  span?: number | string;
+  /** 占据栅格列数，默认 12，支持函数动态计算 */
+  span?: number | string | ((formValues: FormValues) => number | string);
   /** 是否必填，默认 true，支持函数动态计算 */
   required?: boolean | ((formValues: FormValues) => boolean);
   /** 验证规则 */

package/components/FormBuilder/FormItemsRenderer.js

@@ -206,9 +206,17 @@ const FormItemsRenderer = ({
     return collapse && index >= 3 ? { display: "none" } : undefined;
   };
 
+  // 获取 span
+  const getSpan = (span) => {
+    // 支持动态计算 span
+    return typeof span === "function"
+      ? span(getFormValues())
+      : span;
+  }
+
   // 列数
   const getCol = (option) => {
-    const itemSpan = option.render === FORM_ITEM_RENDER_ENUM.DIVIDER ? 24 : option.span ?? span;
+    const itemSpan = option.render === FORM_ITEM_RENDER_ENUM.DIVIDER ? 24 : (getSpan(option.span) ?? span);
     const itemLabelCol = option.labelCol ?? (itemSpan === 24 ? { span: labelCol.span / 2 } : labelCol);
     const itemWrapperCol = option.wrapperCol ?? { span: 24 - itemLabelCol.span };
     return { span: itemSpan, labelCol: itemLabelCol, wrapperCol: itemWrapperCol };
@@ -482,7 +490,7 @@ const FormItemsRenderer = ({
                               {...getFormItemProps(listOption)}
                             >
                               <div style={{ display: "flex", gap: 10, alignItems: "center", justifyContent: "space-between" }}>
-                                <div>
+                                <div style={{ flex: 1 }}>
                                   <Form.Item
                                     noStyle
                                     rules={getRules(listOption)}

package/components/SelectTree/Basic/index.js

@@ -1,102 +1,102 @@
-import { TreeSelect } from "antd";
-import { useEffect } from "react";
-import { arrayObjectDeduplication, getDataType, getTreeNodePaths, processTreeDataByLevel, processTreeDataForOnlyLastLevel } from "../../../utils";
-
-/**
- * 基础下拉树组件（不建议直接使用此组件，二次继承使用）
- */
-function BasicSelectTree(props) {
-  const {
-    onGetData,
-    onChange,
-    onGetLabel,
-    onGetNodePaths,
-    onGetNodePathsIsIncludeOneself = true,
-    placeholder = "",
-    treeData = [],
-    nameKey = "name",
-    idKey = "id",
-    childrenKey = "children",
-    level,
-    onlyLastLevel = false,
-    ...restProps
-  } = props;
-
-  // 根据 level 处理树数据
-  let processedTreeData = level
-    ? processTreeDataByLevel({
-        data: treeData,
-        level,
-        childrenKey,
-        currentLevel: 1,
-      })
-    : treeData;
-
-  // 根据 onlyLastLevel 处理树数据
-  processedTreeData = processTreeDataForOnlyLastLevel({ data: processedTreeData, childrenKey, onlyLastLevel });
-
-  const handleChange = (value, label, extra) => {
-    if (value) {
-      if (getDataType(value) === "Array") {
-        const parentNodes = [];
-        for (let i = 0; i < value.length; i++) {
-          const targetId = (restProps.labelInValue || restProps.treeCheckStrictly) ? value[i].value : value[i];
-          const currentParentNodes = getTreeNodePaths({
-            data: treeData,
-            targetId,
-            idKey,
-            childrenKey,
-            isIncludeOneself: onGetNodePathsIsIncludeOneself,
-          });
-          parentNodes.push(...currentParentNodes);
-        }
-        const deduplicationParentNodes = arrayObjectDeduplication(parentNodes, idKey);
-        onGetNodePaths?.(deduplicationParentNodes);
-        onGetLabel?.((restProps.labelInValue || restProps.treeCheckStrictly) ? value.map(item => item.label) : label);
-      }
-      else {
-        const targetId = (restProps.labelInValue || restProps.treeCheckStrictly) ? value.value : value;
-        const parentNodes = getTreeNodePaths({
-          data: treeData,
-          targetId,
-          idKey,
-          childrenKey,
-          isIncludeOneself: onGetNodePathsIsIncludeOneself,
-        });
-        onGetNodePaths?.(parentNodes);
-        onGetLabel?.(parentNodes[parentNodes.length - 1][nameKey]);
-      }
-    }
-    else {
-      onGetNodePaths?.([]);
-      onGetLabel?.("");
-    }
-    onChange?.((restProps.labelInValue || restProps.treeCheckStrictly) ? value.map(item => item.value) : value, label, extra);
-  };
-
-  useEffect(() => {
-    onGetData?.(treeData, processedTreeData);
-  }, [treeData, processedTreeData]);
-
-  return (
-    <TreeSelect
-      showSearch
-      style={{ width: "100%" }}
-      styles={{
-        popup: { root: { maxHeight: 400, overflow: "auto" } },
-      }}
-      placeholder={`请选择${placeholder}`}
-      onChange={handleChange}
-      allowClear
-      treeData={processedTreeData}
-      fieldNames={{ label: nameKey, value: idKey, children: childrenKey }}
-      treeNodeFilterProp={nameKey}
-      showCheckedStrategy={TreeSelect.SHOW_ALL}
-      {...restProps}
-    />
-  );
-}
-
-BasicSelectTree.displayName = "BasicSelectTree";
-
-export default BasicSelectTree;
+import { TreeSelect } from "antd";
+import { useEffect } from "react";
+import { arrayObjectDeduplication, getDataType, getTreeNodePaths, processTreeDataByLevel, processTreeDataForOnlyLastLevel } from "../../../utils";
+
+/**
+ * 基础下拉树组件（不建议直接使用此组件，二次继承使用）
+ */
+function BasicSelectTree(props) {
+  const {
+    onGetData,
+    onChange,
+    onGetLabel,
+    onGetNodePaths,
+    onGetNodePathsIsIncludeOneself = true,
+    placeholder = "",
+    treeData = [],
+    nameKey = "name",
+    idKey = "id",
+    childrenKey = "children",
+    level,
+    onlyLastLevel = false,
+    ...restProps
+  } = props;
+
+  // 根据 level 处理树数据
+  let processedTreeData = level
+    ? processTreeDataByLevel({
+        data: treeData,
+        level,
+        childrenKey,
+        currentLevel: 1,
+      })
+    : treeData;
+
+  // 根据 onlyLastLevel 处理树数据
+  processedTreeData = processTreeDataForOnlyLastLevel({ data: processedTreeData, childrenKey, onlyLastLevel });
+
+  const handleChange = (value, label, extra) => {
+    if (value) {
+      if (getDataType(value) === "Array") {
+        const parentNodes = [];
+        for (let i = 0; i < value.length; i++) {
+          const targetId = (restProps.labelInValue || restProps.treeCheckStrictly) ? value[i].value : value[i];
+          const currentParentNodes = getTreeNodePaths({
+            data: treeData,
+            targetId,
+            idKey,
+            childrenKey,
+            isIncludeOneself: onGetNodePathsIsIncludeOneself,
+          });
+          parentNodes.push(...currentParentNodes);
+        }
+        const deduplicationParentNodes = arrayObjectDeduplication(parentNodes, idKey);
+        onGetNodePaths?.(deduplicationParentNodes);
+        onGetLabel?.((restProps.labelInValue || restProps.treeCheckStrictly) ? value.map(item => item.label) : label);
+      }
+      else {
+        const targetId = (restProps.labelInValue || restProps.treeCheckStrictly) ? value.value : value;
+        const parentNodes = getTreeNodePaths({
+          data: treeData,
+          targetId,
+          idKey,
+          childrenKey,
+          isIncludeOneself: onGetNodePathsIsIncludeOneself,
+        });
+        onGetNodePaths?.(parentNodes);
+        onGetLabel?.(parentNodes[parentNodes.length - 1][nameKey]);
+      }
+    }
+    else {
+      onGetNodePaths?.([]);
+      onGetLabel?.("");
+    }
+    onChange?.((restProps.labelInValue || restProps.treeCheckStrictly) ? value.map(item => item.value) : value, label, extra);
+  };
+
+  useEffect(() => {
+    onGetData?.(treeData, processedTreeData);
+  }, [treeData, processedTreeData]);
+
+  return (
+    <TreeSelect
+      showSearch
+      style={{ width: "100%" }}
+      styles={{
+        popup: { root: { maxHeight: 400, overflow: "auto" } },
+      }}
+      placeholder={`请选择${placeholder}`}
+      onChange={handleChange}
+      allowClear
+      treeData={processedTreeData}
+      fieldNames={{ label: nameKey, value: idKey, children: childrenKey }}
+      treeNodeFilterProp={nameKey}
+      showCheckedStrategy={TreeSelect.SHOW_ALL}
+      {...restProps}
+    />
+  );
+}
+
+BasicSelectTree.displayName = "BasicSelectTree";
+
+export default BasicSelectTree;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "zy-react-library",
   "private": false,
-  "version": "1.0.155",
+  "version": "1.0.157",
   "type": "module",
   "description": "",
   "author": "LiuJiaNan",