@vtx/components 4.0.0-beta.20 → 4.0.0-beta.22

package/es/vtx-datagrid/index.js

@@ -122,13 +122,12 @@ function VtxTable(props) {
       if (bodyDiv) {
         bodyDiv.style.minHeight = "".concat(bodyHeight - (rest.scrollY || 0), "px");
       }
-      console.log('tablePlaceholder', tablePlaceholder);
       if (tablePlaceholder) {
-        tablePlaceholder.style.height = "".concat(bodyHeight - (rest.scrollY || 0), "px");
+        tablePlaceholder.style.height = "".concat(bodyHeight - (rest.scrollY || 0) - 12, "px");
         var tableCell = Array.prototype.filter.call(tablePlaceholder.getElementsByTagName('td'), function (dom) {
           return dom.className.includes('ant-table-cell');
         })[0];
-        tableCell.style.height = "".concat(bodyHeight - (rest.scrollY || 0), "px");
+        tableCell.style.height = "".concat(bodyHeight - (rest.scrollY || 0) - 12, "px");
       }
       setState({
         scrollY: bodyHeight
@@ -252,8 +251,37 @@ function VtxTable(props) {
     resizeComponents = _useAntdColumnResize.components,
     tableWidth = _useAntdColumnResize.tableWidth,
     resetColumns = _useAntdColumnResize.resetColumns;
+
+  // const _columns = useMemo(() => {
+  //     let result = [];
+  //     if (!showTable) {
+  //         result = []
+  //     } else if (isDragRef) {
+  //         result = resizableColumns
+  //     } else {
+  //         result = columns
+  //     }
+  //     let flag = false;
+  //     result?.map((v) => {
+  //         if (columnsMap[v.key].width !== v.width) {
+  //             flag = true;
+  //             columnsMap[v.key] = {
+  //                 ...columnsMap[v.key],
+  //                 width: v.width
+  //             };
+  //         }
+  //     })
+  //     if (flag) {
+  //         counter.setColumnsMap(
+  //             columnsMap
+  //         )
+  //     }
+  //     return result;
+
+  // }, [isDragRef, resizableColumns, showTable, columns, columnsMap])
+
+  // 1. 先计算列配置
   var _columns = useMemo(function () {
-    var _result;
     var result = [];
     if (!showTable) {
       result = [];
@@ -262,18 +290,28 @@ function VtxTable(props) {
     } else {
       result = columns;
     }
+    return result;
+  }, [isDragRef, resizableColumns, showTable, columns]);
+
+  // 2. 在 effect 中同步列宽到 columnsMap
+  useEffect(function () {
+    if (!showTable || !_columns.length) return;
     var flag = false;
-    (_result = result) === null || _result === void 0 || _result.map(function (v) {
-      if (columnsMap[v.key].width !== v.width) {
+    var newColumnsMap = _objectSpread({}, columnsMap); // 创建副本避免直接修改
+
+    _columns.forEach(function (v) {
+      var _columnsMap$v$key;
+      if (((_columnsMap$v$key = columnsMap[v.key]) === null || _columnsMap$v$key === void 0 ? void 0 : _columnsMap$v$key.width) !== v.width) {
         flag = true;
-        columnsMap[v.key].width = v.width;
+        newColumnsMap[v.key] = _objectSpread(_objectSpread({}, newColumnsMap[v.key]), {}, {
+          width: v.width
+        });
       }
     });
     if (flag) {
-      counter.setColumnsMap(columnsMap);
+      counter.setColumnsMap(newColumnsMap);
     }
-    return result;
-  }, [isDragRef, resizableColumns, showTable, columns, columnsMap]);
+  }, [_columns, columnsMap, counter, showTable]);
   var _components = useMemo(function () {
     if (isDragRef) {
       return resizeComponents;

package/es/vtx-datagrid/style/index.js

@@ -20,12 +20,11 @@ var genVtxStyle = function genVtxStyle(token) {
   }), '.ant-table-body', _defineProperty({}, '.ant-table-tbody', {
     '>tr.ant-table-placeholder': {
       position: 'absolute',
-      bottom: 0,
+      bottom: 12,
       right: 0,
       left: 0,
       backgroundColor: 'transparent',
       borderTop: 'none',
-      height: '100%',
       borderInlineEnd: "var(--ant-line-width) var(--ant-line-type) var(--ant-table-border-color)",
       borderBottom: "var(--ant-line-width) var(--ant-line-type) var(--ant-table-border-color)",
       '>td.ant-table-cell': {

package/es/vtx-export-async/History.js

@@ -38,7 +38,9 @@ function History(props) {
     _props$customTablePro = props.customTableProps,
     customTableProps = _props$customTablePro === void 0 ? {} : _props$customTablePro,
     refreshTime = props.refreshTime,
-    downloadInNewTab = props.downloadInNewTab;
+    downloadInNewTab = props.downloadInNewTab,
+    _props$headers = props.headers,
+    headers = _props$headers === void 0 ? {} : _props$headers;
   var _Form$useForm = Form.useForm(),
     _Form$useForm2 = _slicedToArray(_Form$useForm, 1),
     form = _Form$useForm2[0];
@@ -151,7 +153,8 @@ function History(props) {
             downloadFile(downFileUrl, {
               data: {
                 id: record.id
-              }
+              },
+              extraHeader: headers
             }, 'blob');
           }
         },
@@ -251,6 +254,7 @@ History.propTypes = {
   TextEnum: PropTypes.object,
   customTableProps: PropTypes.object,
   refreshTime: PropTypes.number,
-  downloadInNewTab: PropTypes.bool
+  downloadInNewTab: PropTypes.bool,
+  headers: PropTypes.object
 };
 export default History;

package/es/vtx-export-async/index.js

@@ -79,9 +79,11 @@ var VtxExportAsync = function VtxExportAsync(props) {
     downloadInNewTab = _props$downloadInNewT === void 0 ? false : _props$downloadInNewT,
     _props$enableCustomSe = props.enableCustomSelect,
     enableCustomSelect = _props$enableCustomSe === void 0 ? false : _props$enableCustomSe,
-    beforeExport = props.beforeExport,
     _props$headers = props.headers,
-    headers = _props$headers === void 0 ? {} : _props$headers;
+    headers = _props$headers === void 0 ? {} : _props$headers,
+    beforeExport = props.beforeExport,
+    _props$historyHeaders = props.historyHeaders,
+    historyHeaders = _props$historyHeaders === void 0 ? {} : _props$historyHeaders;
   var _Form$useForm = Form.useForm(),
     _Form$useForm2 = _slicedToArray(_Form$useForm, 1),
     form = _Form$useForm2[0];
@@ -386,7 +388,8 @@ var VtxExportAsync = function VtxExportAsync(props) {
       TextEnum: TextEnum,
       customTableProps: customTableProps,
       refreshTime: refreshTime,
-      downloadInNewTab: downloadInNewTab
+      downloadInNewTab: downloadInNewTab,
+      headers: historyHeaders
     })]
   }));
 };

package/lib/vtx-datagrid/index.js

@@ -132,13 +132,12 @@ function VtxTable(props) {
       if (bodyDiv) {
         bodyDiv.style.minHeight = "".concat(bodyHeight - (rest.scrollY || 0), "px");
       }
-      console.log('tablePlaceholder', tablePlaceholder);
       if (tablePlaceholder) {
-        tablePlaceholder.style.height = "".concat(bodyHeight - (rest.scrollY || 0), "px");
+        tablePlaceholder.style.height = "".concat(bodyHeight - (rest.scrollY || 0) - 12, "px");
         var tableCell = Array.prototype.filter.call(tablePlaceholder.getElementsByTagName('td'), function (dom) {
           return dom.className.includes('ant-table-cell');
         })[0];
-        tableCell.style.height = "".concat(bodyHeight - (rest.scrollY || 0), "px");
+        tableCell.style.height = "".concat(bodyHeight - (rest.scrollY || 0) - 12, "px");
       }
       setState({
         scrollY: bodyHeight
@@ -262,8 +261,37 @@ function VtxTable(props) {
     resizeComponents = _useAntdColumnResize.components,
     tableWidth = _useAntdColumnResize.tableWidth,
     resetColumns = _useAntdColumnResize.resetColumns;
+
+  // const _columns = useMemo(() => {
+  //     let result = [];
+  //     if (!showTable) {
+  //         result = []
+  //     } else if (isDragRef) {
+  //         result = resizableColumns
+  //     } else {
+  //         result = columns
+  //     }
+  //     let flag = false;
+  //     result?.map((v) => {
+  //         if (columnsMap[v.key].width !== v.width) {
+  //             flag = true;
+  //             columnsMap[v.key] = {
+  //                 ...columnsMap[v.key],
+  //                 width: v.width
+  //             };
+  //         }
+  //     })
+  //     if (flag) {
+  //         counter.setColumnsMap(
+  //             columnsMap
+  //         )
+  //     }
+  //     return result;
+
+  // }, [isDragRef, resizableColumns, showTable, columns, columnsMap])
+
+  // 1. 先计算列配置
   var _columns = (0, _react.useMemo)(function () {
-    var _result;
     var result = [];
     if (!showTable) {
       result = [];
@@ -272,18 +300,28 @@ function VtxTable(props) {
     } else {
       result = columns;
     }
+    return result;
+  }, [isDragRef, resizableColumns, showTable, columns]);
+
+  // 2. 在 effect 中同步列宽到 columnsMap
+  (0, _react.useEffect)(function () {
+    if (!showTable || !_columns.length) return;
     var flag = false;
-    (_result = result) === null || _result === void 0 || _result.map(function (v) {
-      if (columnsMap[v.key].width !== v.width) {
+    var newColumnsMap = _objectSpread({}, columnsMap); // 创建副本避免直接修改
+
+    _columns.forEach(function (v) {
+      var _columnsMap$v$key;
+      if (((_columnsMap$v$key = columnsMap[v.key]) === null || _columnsMap$v$key === void 0 ? void 0 : _columnsMap$v$key.width) !== v.width) {
         flag = true;
-        columnsMap[v.key].width = v.width;
+        newColumnsMap[v.key] = _objectSpread(_objectSpread({}, newColumnsMap[v.key]), {}, {
+          width: v.width
+        });
       }
     });
     if (flag) {
-      counter.setColumnsMap(columnsMap);
+      counter.setColumnsMap(newColumnsMap);
     }
-    return result;
-  }, [isDragRef, resizableColumns, showTable, columns, columnsMap]);
+  }, [_columns, columnsMap, counter, showTable]);
   var _components = (0, _react.useMemo)(function () {
     if (isDragRef) {
       return resizeComponents;

package/lib/vtx-datagrid/style/index.js

@@ -26,12 +26,11 @@ var genVtxStyle = function genVtxStyle(token) {
   }), '.ant-table-body', _defineProperty({}, '.ant-table-tbody', {
     '>tr.ant-table-placeholder': {
       position: 'absolute',
-      bottom: 0,
+      bottom: 12,
       right: 0,
       left: 0,
       backgroundColor: 'transparent',
       borderTop: 'none',
-      height: '100%',
       borderInlineEnd: "var(--ant-line-width) var(--ant-line-type) var(--ant-table-border-color)",
       borderBottom: "var(--ant-line-width) var(--ant-line-type) var(--ant-table-border-color)",
       '>td.ant-table-cell': {

package/lib/vtx-export-async/History.js

@@ -46,7 +46,9 @@ function History(props) {
     _props$customTablePro = props.customTableProps,
     customTableProps = _props$customTablePro === void 0 ? {} : _props$customTablePro,
     refreshTime = props.refreshTime,
-    downloadInNewTab = props.downloadInNewTab;
+    downloadInNewTab = props.downloadInNewTab,
+    _props$headers = props.headers,
+    headers = _props$headers === void 0 ? {} : _props$headers;
   var _Form$useForm = _antd.Form.useForm(),
     _Form$useForm2 = _slicedToArray(_Form$useForm, 1),
     form = _Form$useForm2[0];
@@ -159,7 +161,8 @@ function History(props) {
             (0, _utils.downloadFile)(downFileUrl, {
               data: {
                 id: record.id
-              }
+              },
+              extraHeader: headers
             }, 'blob');
           }
         },
@@ -259,6 +262,7 @@ History.propTypes = {
   TextEnum: _propTypes.default.object,
   customTableProps: _propTypes.default.object,
   refreshTime: _propTypes.default.number,
-  downloadInNewTab: _propTypes.default.bool
+  downloadInNewTab: _propTypes.default.bool,
+  headers: _propTypes.default.object
 };
 var _default = exports.default = History;

package/lib/vtx-export-async/index.js

@@ -87,9 +87,11 @@ var VtxExportAsync = exports.VtxExportAsync = function VtxExportAsync(props) {
     downloadInNewTab = _props$downloadInNewT === void 0 ? false : _props$downloadInNewT,
     _props$enableCustomSe = props.enableCustomSelect,
     enableCustomSelect = _props$enableCustomSe === void 0 ? false : _props$enableCustomSe,
-    beforeExport = props.beforeExport,
     _props$headers = props.headers,
-    headers = _props$headers === void 0 ? {} : _props$headers;
+    headers = _props$headers === void 0 ? {} : _props$headers,
+    beforeExport = props.beforeExport,
+    _props$historyHeaders = props.historyHeaders,
+    historyHeaders = _props$historyHeaders === void 0 ? {} : _props$historyHeaders;
   var _Form$useForm = _antd.Form.useForm(),
     _Form$useForm2 = _slicedToArray(_Form$useForm, 1),
     form = _Form$useForm2[0];
@@ -394,7 +396,8 @@ var VtxExportAsync = exports.VtxExportAsync = function VtxExportAsync(props) {
       TextEnum: TextEnum,
       customTableProps: customTableProps,
       refreshTime: refreshTime,
-      downloadInNewTab: downloadInNewTab
+      downloadInNewTab: downloadInNewTab,
+      headers: historyHeaders
     })]
   }));
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vtx/components",
-  "version": "4.0.0-beta.20",
+  "version": "4.0.0-beta.22",
   "description": "React components for Vortex",
   "keywords": [
     "react",
@@ -216,7 +216,7 @@
     "xhr-mock": "^2.5.1",
     "yorkie": "^2.0.0",
     "zustand": "^4.5.7",
-    "@vtx/utils": "^1.0.20"
+    "@vtx/utils": "^1.0.25"
   },
   "peerDependencies": {
     "@ant-design/icons": "^6.0.0",
@@ -225,7 +225,7 @@
     "react": ">=18.0.0",
     "react-dom": ">=18.0.0",
     "dayjs": "^1.11.18",
-    "@vtx/utils": "^1.0.20"
+    "@vtx/utils": "^1.0.25"
   },
   "peerDependenciesName": "声明宿主依赖",
   "packageManager": "pnpm@9.6.0",