@zat-design/sisyphus-react 3.8.2-beta.17 → 3.8.2-beta.18

package/es/ProTable/components/FormatColumn/index.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 import { ProTableColumn } from '../../propsType';
-export declare const formatColumn: ({ column, originalObj, dataSourceObj, rowKey, diffToolTip, wrapToolTipProps, scroll, }: {
+export declare const formatColumn: ({ column, originalObj, dataSourceObj, rowKey, diffToolTip, wrapToolTipProps, scroll, onUpdateMinWidth, }: {
     column: ProTableColumn;
     originalObj: any;
     dataSourceObj: any;
@@ -8,6 +8,7 @@ export declare const formatColumn: ({ column, originalObj, dataSourceObj, rowKey
     diffToolTip?: boolean;
     wrapToolTipProps?: any;
     scroll?: any;
+    onUpdateMinWidth?: any;
 }) => void;
 /**
  * 查找最近的父级className

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

@@ -5,6 +5,7 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 import { isValidElement } from 'react';
 import moment from 'moment';
 import classnames from 'classnames';
+import ReactDOM from 'react-dom';
 import { isEqual, isFunction, isString, isObject } from 'lodash';
 import { tools } from '@zat-design/utils';
 import TooltipTitle from '../TooltipTitle';
@@ -12,22 +13,35 @@ import RenderColumn from '../RenderColumn';
 import { getDecimalDigits, getOriginalValue } from '../../utils';
 import getEnumLabel from '../../../ProEnum/utils/getEnumLabel';
 import ProForm from '../../../ProForm';
+var isReactElement = function isReactElement(element) {
+  return /*#__PURE__*/isValidElement(element);
+};
 var calcMinWidth = function calcMinWidth(_ref) {
   var minWidth = _ref.minWidth,
     width = _ref.width,
     title = _ref.title,
-    isMaxContentOverFlow = _ref.isMaxContentOverFlow;
-  var resultMinWidth = minWidth;
+    isMaxContentOverFlow = _ref.isMaxContentOverFlow,
+    callback = _ref.callback;
   if (!minWidth && !width && isMaxContentOverFlow) {
     var tempEl = document.createElement('div');
-    tempEl.innerHTML = title;
-    tempEl.style.display = 'inline-block'; // 确保元素有宽度
-    document.body.appendChild(tempEl); // 将元素添加到 DOM 中
-    var _width = tempEl.offsetWidth;
-    tempEl.remove();
-    resultMinWidth = _width;
+    tempEl.style.display = 'inline-block';
+    document.body.appendChild(tempEl);
+    if (isFunction(title)) {
+      var component = title();
+      ReactDOM.render(component, tempEl);
+    } else if (isReactElement(title)) {
+      ReactDOM.render(title, tempEl);
+    } else {
+      tempEl.innerHTML = title;
+    }
+    // 使用 requestAnimationFrame 确保在下一个浏览器重绘周期中获取宽度
+    requestAnimationFrame(function () {
+      var _width = tempEl.offsetWidth;
+      ReactDOM.unmountComponentAtNode(tempEl);
+      tempEl.remove();
+      callback(_width);
+    });
   }
-  return resultMinWidth;
 };
 export var formatColumn = function formatColumn(_ref2) {
   var column = _ref2.column,
@@ -36,7 +50,8 @@ export var formatColumn = function formatColumn(_ref2) {
     rowKey = _ref2.rowKey,
     diffToolTip = _ref2.diffToolTip,
     wrapToolTipProps = _ref2.wrapToolTipProps,
-    scroll = _ref2.scroll;
+    scroll = _ref2.scroll,
+    onUpdateMinWidth = _ref2.onUpdateMinWidth;
   var title = column.title,
     valueType = column.valueType,
     _column$format = column.format,
@@ -56,14 +71,15 @@ export var formatColumn = function formatColumn(_ref2) {
     originalDiffTip = _column$originalDiffT === void 0 ? true : _column$originalDiffT,
     _column$toolTipProps = column.toolTipProps,
     toolTipProps = _column$toolTipProps === void 0 ? {} : _column$toolTipProps,
-    _minWidth = column.minWidth;
+    minWidth = column.minWidth;
   // 仅在 {x: 'max-content', y: 300 } 且 column无指定 width minWidth 情况下 才开启 minWidth的自动计算
   var isMaxContentOverFlow = isObject(scroll) ? (scroll === null || scroll === void 0 ? void 0 : scroll.x) === 'max-content' && Reflect.ownKeys(scroll).includes('y') : false;
-  var minWidth = calcMinWidth({
-    minWidth: _minWidth,
+  calcMinWidth({
+    minWidth: minWidth,
     width: width,
     title: title,
-    isMaxContentOverFlow: isMaxContentOverFlow
+    isMaxContentOverFlow: isMaxContentOverFlow,
+    callback: onUpdateMinWidth
   });
   var _toolTipProps = _objectSpread(_objectSpread({}, toolTipProps), wrapToolTipProps);
   var _originalDiffTip = diffToolTip !== null && diffToolTip !== void 0 ? diffToolTip : originalDiffTip;

package/es/ProTable/index.js

@@ -204,7 +204,7 @@ function ProTable(props) {
     }).filter(function (item) {
       return !(item === null || item === void 0 ? void 0 : item.delete);
     });
-    newColumns === null || newColumns === void 0 ? void 0 : newColumns.forEach(function (item) {
+    newColumns === null || newColumns === void 0 ? void 0 : newColumns.forEach(function (item, index) {
       formatColumn({
         column: item,
         originalObj: originalObj,
@@ -212,7 +212,10 @@ function ProTable(props) {
         rowKey: 'rowKey',
         diffToolTip: toolTip,
         wrapToolTipProps: wrapToolTipProps,
-        scroll: _scroll
+        scroll: _scroll,
+        onUpdateMinWidth: function onUpdateMinWidth(w) {
+          curColumns[index].minWidth = w;
+        }
       });
     });
     return newColumns;

package/lib/ProTable/components/FormatColumn/index.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 import { ProTableColumn } from '../../propsType';
-export declare const formatColumn: ({ column, originalObj, dataSourceObj, rowKey, diffToolTip, wrapToolTipProps, scroll, }: {
+export declare const formatColumn: ({ column, originalObj, dataSourceObj, rowKey, diffToolTip, wrapToolTipProps, scroll, onUpdateMinWidth, }: {
     column: ProTableColumn;
     originalObj: any;
     dataSourceObj: any;
@@ -8,6 +8,7 @@ export declare const formatColumn: ({ column, originalObj, dataSourceObj, rowKey
     diffToolTip?: boolean;
     wrapToolTipProps?: any;
     scroll?: any;
+    onUpdateMinWidth?: any;
 }) => void;
 /**
  * 查找最近的父级className

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

@@ -10,6 +10,7 @@ var _jsxRuntime = require("react/jsx-runtime");
 var _react = require("react");
 var _moment15 = _interopRequireDefault(require("moment"));
 var _classnames = _interopRequireDefault(require("classnames"));
+var _reactDom = _interopRequireDefault(require("react-dom"));
 var _antd = require("antd");
 var _lodash = require("lodash");
 var _utils = require("@zat-design/utils");
@@ -18,22 +19,35 @@ var _RenderColumn = _interopRequireDefault(require("../RenderColumn"));
 var _utils2 = require("../../utils");
 var _getEnumLabel = _interopRequireDefault(require("../../../ProEnum/utils/getEnumLabel"));
 var _ProForm = _interopRequireDefault(require("../../../ProForm"));
+var isReactElement = function isReactElement(element) {
+  return /*#__PURE__*/(0, _react.isValidElement)(element);
+};
 var calcMinWidth = function calcMinWidth(_ref) {
   var minWidth = _ref.minWidth,
     width = _ref.width,
     title = _ref.title,
-    isMaxContentOverFlow = _ref.isMaxContentOverFlow;
-  var resultMinWidth = minWidth;
+    isMaxContentOverFlow = _ref.isMaxContentOverFlow,
+    callback = _ref.callback;
   if (!minWidth && !width && isMaxContentOverFlow) {
     var tempEl = document.createElement('div');
-    tempEl.innerHTML = title;
-    tempEl.style.display = 'inline-block'; // 确保元素有宽度
-    document.body.appendChild(tempEl); // 将元素添加到 DOM 中
-    var _width = tempEl.offsetWidth;
-    tempEl.remove();
-    resultMinWidth = _width;
+    tempEl.style.display = 'inline-block';
+    document.body.appendChild(tempEl);
+    if ((0, _lodash.isFunction)(title)) {
+      var component = title();
+      _reactDom.default.render(component, tempEl);
+    } else if (isReactElement(title)) {
+      _reactDom.default.render(title, tempEl);
+    } else {
+      tempEl.innerHTML = title;
+    }
+    // 使用 requestAnimationFrame 确保在下一个浏览器重绘周期中获取宽度
+    requestAnimationFrame(function () {
+      var _width = tempEl.offsetWidth;
+      _reactDom.default.unmountComponentAtNode(tempEl);
+      tempEl.remove();
+      callback(_width);
+    });
   }
-  return resultMinWidth;
 };
 var formatColumn = exports.formatColumn = function formatColumn(_ref2) {
   var column = _ref2.column,
@@ -42,7 +56,8 @@ var formatColumn = exports.formatColumn = function formatColumn(_ref2) {
     rowKey = _ref2.rowKey,
     diffToolTip = _ref2.diffToolTip,
     wrapToolTipProps = _ref2.wrapToolTipProps,
-    scroll = _ref2.scroll;
+    scroll = _ref2.scroll,
+    onUpdateMinWidth = _ref2.onUpdateMinWidth;
   var title = column.title,
     valueType = column.valueType,
     _column$format = column.format,
@@ -62,14 +77,15 @@ var formatColumn = exports.formatColumn = function formatColumn(_ref2) {
     originalDiffTip = _column$originalDiffT === void 0 ? true : _column$originalDiffT,
     _column$toolTipProps = column.toolTipProps,
     toolTipProps = _column$toolTipProps === void 0 ? {} : _column$toolTipProps,
-    _minWidth = column.minWidth;
+    minWidth = column.minWidth;
   // 仅在 {x: 'max-content', y: 300 } 且 column无指定 width minWidth 情况下 才开启 minWidth的自动计算
   var isMaxContentOverFlow = (0, _lodash.isObject)(scroll) ? (scroll === null || scroll === void 0 ? void 0 : scroll.x) === 'max-content' && Reflect.ownKeys(scroll).includes('y') : false;
-  var minWidth = calcMinWidth({
-    minWidth: _minWidth,
+  calcMinWidth({
+    minWidth: minWidth,
     width: width,
     title: title,
-    isMaxContentOverFlow: isMaxContentOverFlow
+    isMaxContentOverFlow: isMaxContentOverFlow,
+    callback: onUpdateMinWidth
   });
   var _toolTipProps = (0, _objectSpread2.default)((0, _objectSpread2.default)({}, toolTipProps), wrapToolTipProps);
   var _originalDiffTip = diffToolTip !== null && diffToolTip !== void 0 ? diffToolTip : originalDiffTip;

package/lib/ProTable/index.js

@@ -211,7 +211,7 @@ function ProTable(props) {
     }).filter(function (item) {
       return !(item === null || item === void 0 ? void 0 : item.delete);
     });
-    newColumns === null || newColumns === void 0 ? void 0 : newColumns.forEach(function (item) {
+    newColumns === null || newColumns === void 0 ? void 0 : newColumns.forEach(function (item, index) {
       (0, _FormatColumn.formatColumn)({
         column: item,
         originalObj: originalObj,
@@ -219,7 +219,10 @@ function ProTable(props) {
         rowKey: 'rowKey',
         diffToolTip: toolTip,
         wrapToolTipProps: wrapToolTipProps,
-        scroll: _scroll
+        scroll: _scroll,
+        onUpdateMinWidth: function onUpdateMinWidth(w) {
+          curColumns[index].minWidth = w;
+        }
       });
     });
     return newColumns;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zat-design/sisyphus-react",
-  "version": "3.8.2-beta.17",
+  "version": "3.8.2-beta.18",
   "license": "Apache-2.0",
   "main": "lib/index.js",
   "module": "es/index.js",