@zat-design/sisyphus-react 3.13.1-beta.5 → 3.13.1-beta.7

package/es/ProForm/components/render/RenderFields.js

@@ -10,6 +10,7 @@ import * as componentMap from '../index';
 import { isSelect } from '../../utils';
 import { FieldProvider } from '../../utils/useFieldProps';
 import locale from '../../../locale';
+import processDependencies from '../../utils/processDependencies';
 var RenderFields = function RenderFields(props) {
   var isView = props.isView,
     _props$columns = props.columns,
@@ -80,10 +81,13 @@ var RenderFields = function RenderFields(props) {
     var component = column.component;
     var _isView = typeof column.isView === 'boolean' ? column.isView : isView;
     var defaultProps = getDefaultProps(column);
+    // 处理dependencies，支持namesPaths格式
+    var processedDeps = processDependencies(column.dependencies);
     // 允许formItem的属性放在column最外层 并优先级高于 formItemProps 内部参数
     var _formItemProps = _objectSpread(_objectSpread(_objectSpread(_objectSpread({}, defaultProps), formItemProps), otherFormItemProps), {}, {
       required: columnRequired !== null && columnRequired !== void 0 ? columnRequired : required,
-      clearNotShow: clearNotShow
+      clearNotShow: clearNotShow,
+      dependencies: processedDeps
     });
     _formItemProps.labelWidth = _formItemProps.labelWidth || labelWidth; // 接收Form中的labelWidth
     if (type && component) {

package/es/ProForm/components/render/propsType.d.ts

@@ -31,6 +31,7 @@ import type { GroupType as GroupCopyProps } from '../combination/Group/propsType
 import type { ProCollapseProps } from '../../../ProLayout/components/ProCollapse/PropTypes';
 import type { DistributiveOmit, DiffConfigType } from '../../propsType';
 import type { DiffOriginalParams } from '../../utils/diffOriginal';
+import { NamePathsDependencyType } from '../../utils/processDependencies';
 type ValidateKey = keyof typeof validate;
 type RegExpKey = keyof typeof regExp;
 export interface ProRule extends Omit<RuleObject, 'type'> {
@@ -230,7 +231,11 @@ export interface ProFormColumn<Values = any> extends Omit<FormItemProps<Values>,
     /** 脱敏数据位置下标 */
     desensitization?: [number, number] | ReactiveFunction<Values, [number, number]>;
 }
-export type ProFormColumnType<T = any> = ProFormColumn<T> & ColumnTypeMap<T, 'ProForm'>;
+export interface ProFormColumnWithExtendedDeps<Values = any> extends Omit<ProFormColumn<Values>, 'dependencies'> {
+    /** 表单项依赖关系，扩展支持namesPaths类型 */
+    dependencies?: NamePath[] | (NamePath | NamePathsDependencyType)[];
+}
+export type ProFormColumnType<T = any> = ProFormColumnWithExtendedDeps<T> & ColumnTypeMap<T, 'ProForm'>;
 /**
  * 表单渲染类型
  */

package/es/ProForm/utils/processDependencies.d.ts

@@ -0,0 +1,29 @@
+import type { NamePath } from 'antd/es/form/interface';
+/**
+ * 定义支持多字段依赖的类型
+ */
+export interface NamePathsDependencyType {
+    type: 'namesPaths';
+    paths: NamePath[][];
+}
+/**
+ * dependencies支持的类型
+ */
+export type Dependencies = NamePath[] | NamePathsDependencyType;
+/**
+ * 处理表单依赖项
+ *
+ * 将常规的依赖项数组与namesPaths类型的依赖项进行处理
+ * 对于namesPaths类型，将其转换为特定格式的字符串：
+ * - 同一路径内的多级通过下划线(_)连接
+ * - 不同路径之间通过连字符(-)连接
+ *
+ * 例如:
+ * { type: 'namesPaths', paths: [['a', 'b'], ['c', 'd']] }
+ * 会被转换成: ['a_b-c_d']
+ *
+ * @param dependencies 依赖项配置
+ * @returns 处理后的依赖项数组
+ */
+export declare function processDependencies(dependencies?: any): any;
+export default processDependencies;

package/es/ProForm/utils/processDependencies.js

@@ -0,0 +1,55 @@
+import _typeof from "@babel/runtime/helpers/esm/typeof";
+/**
+ * 处理表单依赖项
+ *
+ * 将常规的依赖项数组与namesPaths类型的依赖项进行处理
+ * 对于namesPaths类型，将其转换为特定格式的字符串：
+ * - 同一路径内的多级通过下划线(_)连接
+ * - 不同路径之间通过连字符(-)连接
+ *
+ * 例如:
+ * { type: 'namesPaths', paths: [['a', 'b'], ['c', 'd']] }
+ * 会被转换成: ['a_b-c_d']
+ *
+ * @param dependencies 依赖项配置
+ * @returns 处理后的依赖项数组
+ */
+export function processDependencies(dependencies) {
+  /**
+   * 1、没有 dependencies，直接返回
+   */
+  if (!dependencies) return undefined;
+  /**
+   * 2、如果是数组，处理可能包含多种类型的元素
+   */
+  if (Array.isArray(dependencies)) {
+    return dependencies.map(function (item) {
+      // 处理数组中的namesPaths类型元素
+      if (_typeof(item) === 'object' && item !== null && 'type' in item && item.type === 'namesPaths') {
+        // 安全类型转换
+        var itemWithPaths = item;
+        var paths = itemWithPaths.paths;
+        return paths.map(function (path) {
+          return Array.isArray(path) ? path.join('_') : String(path);
+        }).join('-');
+      }
+      // 其他类型元素保持不变
+      return item;
+    });
+  }
+  /**
+   * 3、如果是单个namesPaths对象，转换为特定的字符串形式
+   * 例如：[['a','b','c'], ['a','b','d']] => 'a_b_c-a_b_d'
+   */
+  if ('type' in dependencies && dependencies.type === 'namesPaths') {
+    var paths = dependencies.paths;
+    return [paths.map(function (path) {
+      return Array.isArray(path) ? path.join('_') : String(path);
+    }).join('-')];
+  }
+  /**
+   * 4、如果是普通的 dependencies，直接返回
+   */
+  return dependencies;
+}
+export default processDependencies;

package/es/ProTable/components/RenderColumn/index.js

@@ -13,8 +13,8 @@ import { isBoolean } from 'lodash';
 import classNames from 'classnames';
 import { CheckOutlined } from '@ant-design/icons';
 import { ReactSVG } from 'react-svg';
-import { getPadding, parseWidth } from '../../utils';
-import { isEmpty } from '../../../utils';
+import { parseWidth } from '../../utils';
+import { isEmpty, isEllipsisActive } from '../../../utils';
 import copySvg from '../../../assets/copy.svg';
 var Paragraph = _Typography.Paragraph,
   Text = _Typography.Text;
@@ -57,25 +57,9 @@ var RenderColumn = function RenderColumn(props) {
     'varied-cell': props === null || props === void 0 ? void 0 : props.isChanged,
     'add-cell': props === null || props === void 0 ? void 0 : props.isAddCell
   });
-  var checkEllipsis = function checkEllipsis(box) {
-    var range = document.createRange();
-    range.setStart(box, 0);
-    range.setEnd(box, box.childNodes.length);
-    var rangeWidth = range.getBoundingClientRect().width;
-    var _getPadding = getPadding(box),
-      pLeft = _getPadding.pLeft,
-      pRight = _getPadding.pRight,
-      pTop = _getPadding.pTop,
-      pBottom = _getPadding.pBottom;
-    var horizontalPadding = pLeft + pRight;
-    if (rangeWidth + horizontalPadding > box.clientWidth) {
-      return true;
-    }
-    return false;
-  };
   var handleMouseOver = function handleMouseOver(e) {
     setState({
-      tooltip: checkEllipsis(e.target)
+      tooltip: isEllipsisActive(e.target)
     });
   };
   var tooltipProps = _objectSpread({
@@ -111,9 +95,6 @@ var RenderColumn = function RenderColumn(props) {
         if (ellipsis) {
           return _jsx(_Tooltip, _objectSpread(_objectSpread({
             title: currentValue,
-            getTooltipContainer: function getTooltipContainer() {
-              return document.body;
-            },
             onOpenChange: function onOpenChange(open) {
               setState({
                 tooltip: false
@@ -151,6 +132,7 @@ var RenderColumn = function RenderColumn(props) {
           minWidth: minWidth
         },
         overlayClassName: "original-value-tooltip",
+        destroyTooltipOnHide: true,
         placement: "topLeft",
         autoAdjustOverflow: false,
         title: _jsx(_Space, {
@@ -168,10 +150,7 @@ var RenderColumn = function RenderColumn(props) {
               }) : null
             })]
           }) : node
-        }),
-        getPopupContainer: function getPopupContainer(triggerNode) {
-          return triggerNode.parentNode;
-        }
+        })
       }, toolTipProps), {}, {
         children: renderNode
       }));
@@ -219,9 +198,7 @@ var RenderColumn = function RenderColumn(props) {
     var calculatedWidth = updateCalculatedWidth(textRef.current);
     return _jsx(_Tooltip, _objectSpread(_objectSpread({
       title: value,
-      getTooltipContainer: function getTooltipContainer() {
-        return document.body;
-      },
+      destroyTooltipOnHide: true,
       onOpenChange: function onOpenChange() {
         setState({
           tooltip: false
@@ -229,6 +206,9 @@ var RenderColumn = function RenderColumn(props) {
       },
       open: tooltip
     }, tooltipProps), {}, {
+      getPopupContainer: function getPopupContainer() {
+        return document.body;
+      },
       children: _jsx(Text, {
         ref: textRef,
         style: {

package/es/ProTable/utils/index.d.ts

@@ -33,12 +33,6 @@ export declare const getRowKey: (rowKey: any, record: any) => any;
 export declare const removeEmptyKeys: (obj?: Record<string, any>) => {
     [k: string]: any;
 };
-export declare const getPadding: (el: HTMLElement) => {
-    pLeft: number;
-    pRight: number;
-    pTop: number;
-    pBottom: number;
-};
 /** 判断是有值的对象 */
 export declare const isNonEmptyObject: (obj: any) => obj is Record<string, any>;
 /** 解析宽度值 */

package/es/ProTable/utils/index.js

@@ -88,20 +88,6 @@ export var removeEmptyKeys = function removeEmptyKeys(obj) {
   // 使用 Object.fromEntries() 将过滤后的键值对数组转换回对象
   return Object.fromEntries(filteredEntries);
 };
-/* 获取边距 */
-export var getPadding = function getPadding(el) {
-  var style = window.getComputedStyle(el, null);
-  var paddingLeft = Number.parseInt(style.paddingLeft, 10) || 0;
-  var paddingRight = Number.parseInt(style.paddingRight, 10) || 0;
-  var paddingTop = Number.parseInt(style.paddingTop, 10) || 0;
-  var paddingBottom = Number.parseInt(style.paddingBottom, 10) || 0;
-  return {
-    pLeft: paddingLeft,
-    pRight: paddingRight,
-    pTop: paddingTop,
-    pBottom: paddingBottom
-  };
-};
 /** 判断是有值的对象 */
 export var isNonEmptyObject = function isNonEmptyObject(obj) {
   return obj !== null && _typeof(obj) === 'object' && !Array.isArray(obj) && Object.keys(obj).length > 0;

package/lib/ProForm/components/render/RenderFields.js

@@ -17,6 +17,7 @@ var componentMap = _interopRequireWildcard(require("../index"));
 var _utils = require("../../utils");
 var _useFieldProps = require("../../utils/useFieldProps");
 var _locale = _interopRequireDefault(require("../../../locale"));
+var _processDependencies = _interopRequireDefault(require("../../utils/processDependencies"));
 var _excluded = ["show", "type", "viewRender", "viewType", "valueType", "formItemProps", "colProps", "formItemChildProps", "fieldProps", "onDiff", "clearNotShow", "required", "confirm", "desensitization", "span"];
 var RenderFields = function RenderFields(props) {
   var isView = props.isView,
@@ -88,10 +89,13 @@ var RenderFields = function RenderFields(props) {
     var component = column.component;
     var _isView = typeof column.isView === 'boolean' ? column.isView : isView;
     var defaultProps = (0, _getDefaultProps.getDefaultProps)(column);
+    // 处理dependencies，支持namesPaths格式
+    var processedDeps = (0, _processDependencies.default)(column.dependencies);
     // 允许formItem的属性放在column最外层 并优先级高于 formItemProps 内部参数
     var _formItemProps = (0, _objectSpread2.default)((0, _objectSpread2.default)((0, _objectSpread2.default)((0, _objectSpread2.default)({}, defaultProps), formItemProps), otherFormItemProps), {}, {
       required: columnRequired !== null && columnRequired !== void 0 ? columnRequired : required,
-      clearNotShow: clearNotShow
+      clearNotShow: clearNotShow,
+      dependencies: processedDeps
     });
     _formItemProps.labelWidth = _formItemProps.labelWidth || labelWidth; // 接收Form中的labelWidth
     if (type && component) {

package/lib/ProForm/components/render/propsType.d.ts

@@ -31,6 +31,7 @@ import type { GroupType as GroupCopyProps } from '../combination/Group/propsType
 import type { ProCollapseProps } from '../../../ProLayout/components/ProCollapse/PropTypes';
 import type { DistributiveOmit, DiffConfigType } from '../../propsType';
 import type { DiffOriginalParams } from '../../utils/diffOriginal';
+import { NamePathsDependencyType } from '../../utils/processDependencies';
 type ValidateKey = keyof typeof validate;
 type RegExpKey = keyof typeof regExp;
 export interface ProRule extends Omit<RuleObject, 'type'> {
@@ -230,7 +231,11 @@ export interface ProFormColumn<Values = any> extends Omit<FormItemProps<Values>,
     /** 脱敏数据位置下标 */
     desensitization?: [number, number] | ReactiveFunction<Values, [number, number]>;
 }
-export type ProFormColumnType<T = any> = ProFormColumn<T> & ColumnTypeMap<T, 'ProForm'>;
+export interface ProFormColumnWithExtendedDeps<Values = any> extends Omit<ProFormColumn<Values>, 'dependencies'> {
+    /** 表单项依赖关系，扩展支持namesPaths类型 */
+    dependencies?: NamePath[] | (NamePath | NamePathsDependencyType)[];
+}
+export type ProFormColumnType<T = any> = ProFormColumnWithExtendedDeps<T> & ColumnTypeMap<T, 'ProForm'>;
 /**
  * 表单渲染类型
  */

package/lib/ProForm/utils/processDependencies.d.ts

@@ -0,0 +1,29 @@
+import type { NamePath } from 'antd/es/form/interface';
+/**
+ * 定义支持多字段依赖的类型
+ */
+export interface NamePathsDependencyType {
+    type: 'namesPaths';
+    paths: NamePath[][];
+}
+/**
+ * dependencies支持的类型
+ */
+export type Dependencies = NamePath[] | NamePathsDependencyType;
+/**
+ * 处理表单依赖项
+ *
+ * 将常规的依赖项数组与namesPaths类型的依赖项进行处理
+ * 对于namesPaths类型，将其转换为特定格式的字符串：
+ * - 同一路径内的多级通过下划线(_)连接
+ * - 不同路径之间通过连字符(-)连接
+ *
+ * 例如:
+ * { type: 'namesPaths', paths: [['a', 'b'], ['c', 'd']] }
+ * 会被转换成: ['a_b-c_d']
+ *
+ * @param dependencies 依赖项配置
+ * @returns 处理后的依赖项数组
+ */
+export declare function processDependencies(dependencies?: any): any;
+export default processDependencies;

package/lib/ProForm/utils/processDependencies.js

@@ -0,0 +1,63 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+exports.processDependencies = processDependencies;
+var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
+/**
+ * 处理表单依赖项
+ *
+ * 将常规的依赖项数组与namesPaths类型的依赖项进行处理
+ * 对于namesPaths类型，将其转换为特定格式的字符串：
+ * - 同一路径内的多级通过下划线(_)连接
+ * - 不同路径之间通过连字符(-)连接
+ *
+ * 例如:
+ * { type: 'namesPaths', paths: [['a', 'b'], ['c', 'd']] }
+ * 会被转换成: ['a_b-c_d']
+ *
+ * @param dependencies 依赖项配置
+ * @returns 处理后的依赖项数组
+ */
+function processDependencies(dependencies) {
+  /**
+   * 1、没有 dependencies，直接返回
+   */
+  if (!dependencies) return undefined;
+  /**
+   * 2、如果是数组，处理可能包含多种类型的元素
+   */
+  if (Array.isArray(dependencies)) {
+    return dependencies.map(function (item) {
+      // 处理数组中的namesPaths类型元素
+      if ((0, _typeof2.default)(item) === 'object' && item !== null && 'type' in item && item.type === 'namesPaths') {
+        // 安全类型转换
+        var itemWithPaths = item;
+        var paths = itemWithPaths.paths;
+        return paths.map(function (path) {
+          return Array.isArray(path) ? path.join('_') : String(path);
+        }).join('-');
+      }
+      // 其他类型元素保持不变
+      return item;
+    });
+  }
+  /**
+   * 3、如果是单个namesPaths对象，转换为特定的字符串形式
+   * 例如：[['a','b','c'], ['a','b','d']] => 'a_b_c-a_b_d'
+   */
+  if ('type' in dependencies && dependencies.type === 'namesPaths') {
+    var paths = dependencies.paths;
+    return [paths.map(function (path) {
+      return Array.isArray(path) ? path.join('_') : String(path);
+    }).join('-')];
+  }
+  /**
+   * 4、如果是普通的 dependencies，直接返回
+   */
+  return dependencies;
+}
+var _default = exports.default = processDependencies;

package/lib/ProTable/components/RenderColumn/index.js

@@ -59,25 +59,9 @@ var RenderColumn = function RenderColumn(props) {
     'varied-cell': props === null || props === void 0 ? void 0 : props.isChanged,
     'add-cell': props === null || props === void 0 ? void 0 : props.isAddCell
   });
-  var checkEllipsis = function checkEllipsis(box) {
-    var range = document.createRange();
-    range.setStart(box, 0);
-    range.setEnd(box, box.childNodes.length);
-    var rangeWidth = range.getBoundingClientRect().width;
-    var _getPadding = (0, _utils.getPadding)(box),
-      pLeft = _getPadding.pLeft,
-      pRight = _getPadding.pRight,
-      pTop = _getPadding.pTop,
-      pBottom = _getPadding.pBottom;
-    var horizontalPadding = pLeft + pRight;
-    if (rangeWidth + horizontalPadding > box.clientWidth) {
-      return true;
-    }
-    return false;
-  };
   var handleMouseOver = function handleMouseOver(e) {
     setState({
-      tooltip: checkEllipsis(e.target)
+      tooltip: (0, _utils2.isEllipsisActive)(e.target)
     });
   };
   var tooltipProps = (0, _objectSpread2.default)({
@@ -113,9 +97,6 @@ var RenderColumn = function RenderColumn(props) {
         if (ellipsis) {
           return (0, _jsxRuntime.jsx)(_antd.Tooltip, (0, _objectSpread2.default)((0, _objectSpread2.default)({
             title: currentValue,
-            getTooltipContainer: function getTooltipContainer() {
-              return document.body;
-            },
             onOpenChange: function onOpenChange(open) {
               setState({
                 tooltip: false
@@ -153,6 +134,7 @@ var RenderColumn = function RenderColumn(props) {
           minWidth: minWidth
         },
         overlayClassName: "original-value-tooltip",
+        destroyTooltipOnHide: true,
         placement: "topLeft",
         autoAdjustOverflow: false,
         title: (0, _jsxRuntime.jsx)(_antd.Space, {
@@ -170,10 +152,7 @@ var RenderColumn = function RenderColumn(props) {
               }) : null
             })]
           }) : node
-        }),
-        getPopupContainer: function getPopupContainer(triggerNode) {
-          return triggerNode.parentNode;
-        }
+        })
       }, toolTipProps), {}, {
         children: renderNode
       }));
@@ -221,9 +200,7 @@ var RenderColumn = function RenderColumn(props) {
     var calculatedWidth = updateCalculatedWidth(textRef.current);
     return (0, _jsxRuntime.jsx)(_antd.Tooltip, (0, _objectSpread2.default)((0, _objectSpread2.default)({
       title: value,
-      getTooltipContainer: function getTooltipContainer() {
-        return document.body;
-      },
+      destroyTooltipOnHide: true,
       onOpenChange: function onOpenChange() {
         setState({
           tooltip: false
@@ -231,6 +208,9 @@ var RenderColumn = function RenderColumn(props) {
       },
       open: tooltip
     }, tooltipProps), {}, {
+      getPopupContainer: function getPopupContainer() {
+        return document.body;
+      },
       children: (0, _jsxRuntime.jsx)(Text, {
         ref: textRef,
         style: {

package/lib/ProTable/utils/index.d.ts

@@ -33,12 +33,6 @@ export declare const getRowKey: (rowKey: any, record: any) => any;
 export declare const removeEmptyKeys: (obj?: Record<string, any>) => {
     [k: string]: any;
 };
-export declare const getPadding: (el: HTMLElement) => {
-    pLeft: number;
-    pRight: number;
-    pTop: number;
-    pBottom: number;
-};
 /** 判断是有值的对象 */
 export declare const isNonEmptyObject: (obj: any) => obj is Record<string, any>;
 /** 解析宽度值 */

package/lib/ProTable/utils/index.js

@@ -4,7 +4,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.removeEmptyKeys = exports.parseWidth = exports.isNonEmptyObject = exports.isListResult = exports.getRowKey = exports.getPadding = exports.getOriginalValue = exports.getDecimalDigits = exports.getColumnDataIndex = void 0;
+exports.removeEmptyKeys = exports.parseWidth = exports.isNonEmptyObject = exports.isListResult = exports.getRowKey = exports.getOriginalValue = exports.getDecimalDigits = exports.getColumnDataIndex = void 0;
 var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _lodash = require("lodash");
@@ -95,20 +95,6 @@ var removeEmptyKeys = exports.removeEmptyKeys = function removeEmptyKeys(obj) {
   // 使用 Object.fromEntries() 将过滤后的键值对数组转换回对象
   return Object.fromEntries(filteredEntries);
 };
-/* 获取边距 */
-var getPadding = exports.getPadding = function getPadding(el) {
-  var style = window.getComputedStyle(el, null);
-  var paddingLeft = Number.parseInt(style.paddingLeft, 10) || 0;
-  var paddingRight = Number.parseInt(style.paddingRight, 10) || 0;
-  var paddingTop = Number.parseInt(style.paddingTop, 10) || 0;
-  var paddingBottom = Number.parseInt(style.paddingBottom, 10) || 0;
-  return {
-    pLeft: paddingLeft,
-    pRight: paddingRight,
-    pTop: paddingTop,
-    pBottom: paddingBottom
-  };
-};
 /** 判断是有值的对象 */
 var isNonEmptyObject = exports.isNonEmptyObject = function isNonEmptyObject(obj) {
   return obj !== null && (0, _typeof2.default)(obj) === 'object' && !Array.isArray(obj) && Object.keys(obj).length > 0;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zat-design/sisyphus-react",
-  "version": "3.13.1-beta.5",
+  "version": "3.13.1-beta.7",
   "license": "MIT",
   "main": "lib/index.js",
   "module": "es/index.js",