@teamix/pro 1.5.24 → 1.5.26-beta-2

package/es/table/index.js

@@ -1,10 +1,13 @@
-var _excluded = ["header", "className", "tableClassName", "mainAction", "extra", "dataFilter", "afterDataFilter", "toolBar", "columns", "useRowSelection", "rowSelection", "onChangeRowSelection", "getRowSelection", "primaryKey", "footerAction", "footer", "url", "pageKey", "pageSizeKey", "method", "params", "formatSort", "formatParams", "formatResult", "requestConfig", "requestWhenMount", "showPagination", "pageSizeList", "responsivePaginationType", "showSkeleton", "skeletonSize", "actionRef", "dataSource", "filterDebounce", "footerSuction", "autoRefresh", "autoRefreshProps", "customRequest", "filterColumnType", "defaultFilterParams", "reserveSelectedRecords", "size", "disableSelectAll", "context", "fixedTableBody", "isTree", "toolBarAutoWidth", "data-teamix-spm", "switchCardView", "cardViewProps", "defaultView", "emptyProps", "bindUrlProps", "bindUrl", "autoRedirect", "useMaxData"],
-  _excluded2 = ["onChange"];
+var _excluded = ["header", "className", "tableClassName", "mainAction", "extra", "dataFilter", "afterDataFilter", "toolBar", "columns", "useRowSelection", "rowSelection", "onChangeRowSelection", "getRowSelection", "primaryKey", "footerAction", "footer", "url", "pageKey", "pageSizeKey", "method", "params", "formatSort", "formatParams", "formatResult", "requestConfig", "requestWhenMount", "showPagination", "pageSizeList", "responsivePaginationType", "showSkeleton", "skeletonSize", "actionRef", "dataSource", "filterDebounce", "footerSuction", "autoRefresh", "autoRefreshProps", "customRequest", "filterColumnType", "defaultFilterParams", "reserveSelectedRecords", "size", "disableSelectAll", "context", "autoWidth", "fixedTableBody", "isTree", "toolBarAutoWidth", "data-teamix-spm", "switchCardView", "cardViewProps", "defaultView", "emptyProps", "bindUrlProps", "bindUrl", "autoRedirect", "useMaxData"],
+  _excluded2 = ["onChange", "onPageSizeChange"];
 function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
 function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
 function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
 function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
 function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
 function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
 function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
@@ -13,12 +16,10 @@ function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Sy
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-import React, { useState, useEffect, useRef, useMemo } from 'react';
+import React, { useState, useEffect, useRef, useMemo, useCallback } from 'react';
 import { Table, Checkbox } from '@alicloudfe/components';
 import Pagination from './components/Pagination';
+import TableContent from './components/TableContent';
 import genProColumnToColumn from './utils/genProColumnToColumn';
 import { getGlobalConfig, useRequest, request as utilResquest, getDeepValue, getMessage, pickProps, usePrefixCls, getTargetValue } from '@teamix/utils';
 import { ProSkeletonRaw as Skeleton } from '../skeleton';
@@ -26,53 +27,19 @@ import './index.scss';
 import Layout from './components/Layout';
 import { actionRefUseStateOn, emit, initActionRef, processDefaultFilter, useActionType } from './utils';
 import getTableProps from './utils/getTableProps';
-import getTableSortIcons from './utils/getTableSortIcons';
 import useTableSelection from './utils/useTableSelection';
 import FullScreen from './components/ToolBar/Fullscreen';
-import { EmptyContent } from '@teamix/pro-field';
 import { ProActionGroup } from '../actions';
 import classNames from 'classnames';
 import ProPageContainer from '../page-container';
+import { genAutoWidthColumns, shadowContainer, shadowActionColumnContainer } from './utils/genAutoWidthColumns';
 import debounce from 'lodash.debounce';
 import CardView from './components/CardView';
 import { useUrlState } from '@teamix/hooks';
 import { getUrlStateFilter } from './utils/util';
+import processColumns from './utils/processColumns';
 export * from './typing';
 var cls = usePrefixCls('teamix-pro-table');
-/**
- * 处理原生传入的 columns 以便于 选择列 方便处理
- * @param columns 原生传入的 columns
- * @returns
- */
-var processColumns = function processColumns(columns, initialColumns) {
-  var _getGlobalConfig;
-  var globalFilterColumns = (_getGlobalConfig = getGlobalConfig('ProTable')) === null || _getGlobalConfig === void 0 ? void 0 : _getGlobalConfig.filterColumns;
-  var filterColumns = columns.filter(function (item) {
-    return item.columnFilters !== false && (item === null || item === void 0 ? void 0 : item.hidden) !== true && (!globalFilterColumns || globalFilterColumns(_objectSpread({}, item)));
-  });
-  // 处理只剩一列批量选择的情况下宽度错乱问题
-  if (filterColumns === null || filterColumns === void 0 ? void 0 : filterColumns.length) {
-    var _initialColumns$;
-    if ((filterColumns === null || filterColumns === void 0 ? void 0 : filterColumns.length) === 1) {
-      var _filterColumns$, _filterColumns$2;
-      if ((_filterColumns$ = filterColumns[0]) === null || _filterColumns$ === void 0 ? void 0 : _filterColumns$.width) {
-        delete filterColumns[0].width;
-      }
-      if ((_filterColumns$2 = filterColumns[0]) === null || _filterColumns$2 === void 0 ? void 0 : _filterColumns$2.lock) {
-        filterColumns[0].lock = false;
-      }
-    } else if (((_initialColumns$ = initialColumns[0]) === null || _initialColumns$ === void 0 ? void 0 : _initialColumns$.columnFilters) !== false) {
-      var _initialColumns$2, _initialColumns$3;
-      if ((_initialColumns$2 = initialColumns[0]) === null || _initialColumns$2 === void 0 ? void 0 : _initialColumns$2.width) {
-        filterColumns[0].width = initialColumns[0].width;
-      }
-      if ((_initialColumns$3 = initialColumns[0]) === null || _initialColumns$3 === void 0 ? void 0 : _initialColumns$3.lock) {
-        filterColumns[0].lock = initialColumns[0].lock;
-      }
-    }
-  }
-  return filterColumns;
-};
 /** 默认请求翻页参数 */
 var globalPageKey = 'currentPage';
 var globalPageSizeKey = 'pageSize';
@@ -86,6 +53,7 @@ var globalFormatSort = function globalFormatSort(sort) {
 };
 var ProTable = function ProTable(props) {
   var _urlState$currentPage, _rowSelection$selecte;
+  console.log('ProTable 代理成功');
   var header = props.header,
     className = props.className,
     tableClassName = props.tableClassName,
@@ -146,6 +114,8 @@ var ProTable = function ProTable(props) {
     propsSize = _props$size === void 0 ? 'medium' : _props$size,
     disableSelectAll = props.disableSelectAll,
     context = props.context,
+    _props$autoWidth = props.autoWidth,
+    autoWidthProp = _props$autoWidth === void 0 ? true : _props$autoWidth,
     _props$fixedTableBody = props.fixedTableBody,
     fixedTableBody = _props$fixedTableBody === void 0 ? false : _props$fixedTableBody,
     isTree = props.isTree,
@@ -195,7 +165,9 @@ var ProTable = function ProTable(props) {
     _useState12 = _slicedToArray(_useState11, 2),
     showSkeleton = _useState12[0],
     setShowSkeleton = _useState12[1]; // 首次加载，渲染骨架屏
-  var skeletonDataSource = new Array(skeletonSize).fill({});
+  var skeletonDataSource = useMemo(function () {
+    return new Array(skeletonSize).fill({});
+  }, [skeletonSize]);
   var requestDataKey = method.toLowerCase() === 'get' ? 'params' : 'data';
   // 如果使用 customRequest 的话，内置 loading
   var _useState13 = useState(requestWhenMount),
@@ -209,6 +181,19 @@ var ProTable = function ProTable(props) {
     _useState16 = _slicedToArray(_useState15, 2),
     filteredColumns = _useState16[0],
     setFilteredColumns = _useState16[1];
+  // 全局状态 ： 自适应表格
+  var autoWidth = useMemo(function () {
+    var _getGlobalConfig;
+    return ((_getGlobalConfig = getGlobalConfig('ProTable')) === null || _getGlobalConfig === void 0 ? void 0 : _getGlobalConfig.autoWidth) || autoWidthProp;
+  }, [autoWidthProp]);
+  // 判断是否有操作列，有的话则渲染一个 shadow dom
+  var hasActionColumn = false;
+  if (autoWidth) {
+    hasActionColumn = filteredColumns.some(function (column) {
+      var _column$actionSchema, _column$actionSchema$;
+      return (column === null || column === void 0 ? void 0 : column.actionSchema) && ((_column$actionSchema = column.actionSchema) === null || _column$actionSchema === void 0 ? void 0 : (_column$actionSchema$ = _column$actionSchema.actions) === null || _column$actionSchema$ === void 0 ? void 0 : _column$actionSchema$.length) > 0;
+    });
+  }
   var _useState17 = useState(propsSize),
     _useState18 = _slicedToArray(_useState17, 2),
     size = _useState18[0],
@@ -217,6 +202,13 @@ var ProTable = function ProTable(props) {
     _useState20 = _slicedToArray(_useState19, 2),
     showLoading = _useState20[0],
     setShowLoading = _useState20[1];
+  // 自动计算列宽需要的一些hook
+  var _useState21 = useState(false),
+    _useState22 = _slicedToArray(_useState21, 2),
+    showShadowContainer = _useState22[0],
+    setShowShadowContainer = _useState22[1];
+  var shadowContainerRef = useRef(null);
+  var shadowActionColumnContainerRef = useRef(null);
   // 表格内部用作存储的 Ref，标识 Table 组件是否被第一次渲染。用作 useUrlState filter 第一次渲染时使用 state 数据请求
   var dataRef = useRef({
     flag: true
@@ -237,19 +229,19 @@ var ProTable = function ProTable(props) {
   }, [currentPage, pageSize, urlState]);
   // 存储能够被 on 监听到的 ProTable 状态
   // 因为只做存储用。不需要更新视图以及需要同步更改。所以不使用 setState 更新
-  var _useState21 = useState({
+  var _useState23 = useState({
       fullScreenState: false,
       filterRules: {},
       filterColumns: []
     }),
-    _useState22 = _slicedToArray(_useState21, 1),
-    actionRefState = _useState22[0];
+    _useState24 = _slicedToArray(_useState23, 1),
+    actionRefState = _useState24[0];
   // 存储 on 监听事件
-  var _useState23 = useState({
+  var _useState25 = useState({
       fullScreenState: {}
     }),
-    _useState24 = _slicedToArray(_useState23, 1),
-    actionRefCallback = _useState24[0];
+    _useState26 = _slicedToArray(_useState25, 1),
+    actionRefCallback = _useState26[0];
   // 存储定时器 id
   var autoRefreshTimerRef = useRef();
   var onResize = null;
@@ -361,20 +353,20 @@ var ProTable = function ProTable(props) {
     }, 50);
   };
   // header 区域高度。用作全屏计算吸顶吸底高度。默认不做计算
-  var _useState25 = useState(0),
-    _useState26 = _slicedToArray(_useState25, 2),
-    headerHeight = _useState26[0],
-    setHeaderHeight = _useState26[1];
-  // 全屏显示 className
-  var _useState27 = useState(false),
+  var _useState27 = useState(0),
     _useState28 = _slicedToArray(_useState27, 2),
-    fullscreenState = _useState28[0],
-    setFullscreenState = _useState28[1];
-  // 切换视角
-  var _useState29 = useState(defaultView !== null && defaultView !== void 0 ? defaultView : 'table'),
+    headerHeight = _useState28[0],
+    setHeaderHeight = _useState28[1];
+  // 全屏显示 className
+  var _useState29 = useState(false),
     _useState30 = _slicedToArray(_useState29, 2),
-    switchViewState = _useState30[0],
-    setSwitchViewState = _useState30[1];
+    fullscreenState = _useState30[0],
+    setFullscreenState = _useState30[1];
+  // 切换视角
+  var _useState31 = useState(defaultView !== null && defaultView !== void 0 ? defaultView : 'table'),
+    _useState32 = _slicedToArray(_useState31, 2),
+    switchViewState = _useState32[0],
+    setSwitchViewState = _useState32[1];
   // 切换全屏搜索开关
   var filterEnableRef = useRef({
     fullscreen: false,
@@ -394,10 +386,10 @@ var ProTable = function ProTable(props) {
   var dataFilterFormRef = !fullscreenState ? normalDataFilterFormRef : fullscreenDataFilterFormRef;
   // let dataFilterForm = dataFilterFormRef.current;
   // 整个内容区是否超过一屏。用于表格在非全屏模式下的吸底
-  var _useState31 = useState(false),
-    _useState32 = _slicedToArray(_useState31, 2),
-    footerSuctionState = _useState32[0],
-    setFooterSuctionState = _useState32[1];
+  var _useState33 = useState(false),
+    _useState34 = _slicedToArray(_useState33, 2),
+    footerSuctionState = _useState34[0],
+    setFooterSuctionState = _useState34[1];
   // TODO 获取内容区是否超出一屏（暂时仅支持全家桶）
   var getFooterSuctionState = function getFooterSuctionState() {
     if (!footerSuction) {
@@ -548,6 +540,9 @@ var ProTable = function ProTable(props) {
       setFullscreenState(state);
       getHeaderHeight(state);
       actionRef === null || actionRef === void 0 ? void 0 : (_actionRef$current2 = actionRef.current) === null || _actionRef$current2 === void 0 ? void 0 : (_actionRef$current2$s = _actionRef$current2.setState) === null || _actionRef$current2$s === void 0 ? void 0 : _actionRef$current2$s.call(_actionRef$current2, 'fullScreenState', state);
+      if (autoWidth) {
+        reGenFilteredColumnsByAutoWidth();
+      }
       return state;
     },
     setColumn: function setColumn(newColumns) {
@@ -559,10 +554,16 @@ var ProTable = function ProTable(props) {
       if (update) {
         emit('refreshFilterState', newColumns);
       }
+      if (autoWidth) {
+        reGenFilteredColumnsByAutoWidth(columns);
+      }
     },
     size: size,
     setSize: function setSize(mode) {
       _setSize(mode);
+      if (autoWidth) {
+        reGenFilteredColumnsByAutoWidth();
+      }
     },
     refresh: function refresh(params) {
       // card视角的刷新等于重新请求
@@ -626,6 +627,9 @@ var ProTable = function ProTable(props) {
     filterEnableRef: filterEnableRef,
     setData: function setData(data) {
       _setData(data);
+      if (autoWidth) {
+        reGenFilteredColumnsByAutoWidth();
+      }
     },
     resetTableMaxBodyHeight: function resetTableMaxBodyHeight(offset) {
       getHeaderHeight(fullscreenState, offset);
@@ -672,6 +676,21 @@ var ProTable = function ProTable(props) {
   if (propsActionRef) {
     propsActionRef.current = actionRef.current;
   }
+  function reGenFilteredColumnsByAutoWidth(columns) {
+    if (!autoWidth) {
+      return;
+    }
+    setShowShadowContainer(true);
+    var authWidthedColumns = genAutoWidthColumns(columns !== null && columns !== void 0 ? columns : filteredColumns, shadowContainerRef, data, size, useRowSelection, shadowActionColumnContainerRef);
+    setFilteredColumns(authWidthedColumns);
+    // 移除 shadow dom
+    // setTimeout(() => {
+    //   if (document.querySelector('.teamix-pro-table-shadow-container')) {
+    //     document.querySelector('.teamix-pro-table-shadow-container')?.remove();
+    //   }
+    // }, 0);
+  }
+
   function onFormatResult(next) {
     props.onFormatResult && props.onFormatResult(next);
     // 如果开启了 autoRedirect 当当前页数不为1，并且data为空的时候，重定向到第一页
@@ -711,6 +730,9 @@ var ProTable = function ProTable(props) {
       setTotal(total + (next.total || ((_next$data3 = next.data) === null || _next$data3 === void 0 ? void 0 : _next$data3.length)));
     }
     setShowSkeleton(false);
+    if (autoWidth) {
+      reGenFilteredColumnsByAutoWidth();
+    }
   }
   // 请求表格数据工具函数
   var getData = useRequest(function (params) {
@@ -777,7 +799,7 @@ var ProTable = function ProTable(props) {
     }
   });
   // 请求函数
-  function _request(params, noLoading, filterParams, isReset) {
+  var _request = useCallback(function (params, noLoading, filterParams, isReset) {
     var _dataFilterFormRef$cu2, _actionRef$current$ge, _actionRef$current6, _actionRef$current6$g, _objectSpread3;
     // 首次渲染表格，获取 urlState 上的 表头 filter 数据
     if (bindUrl && (bindUrlProps === null || bindUrlProps === void 0 ? void 0 : bindUrlProps.headerFilters) !== false && dataRef.current.flag) {
@@ -857,6 +879,9 @@ var ProTable = function ProTable(props) {
               _setData([].concat(_toConsumableArray(data), _toConsumableArray(dataRes || [])));
               setTotal(total + (totalRes || (dataRes === null || dataRes === void 0 ? void 0 : dataRes.length)));
             }
+            if (autoWidth) {
+              reGenFilteredColumnsByAutoWidth();
+            }
             setShowSkeleton(false);
             setCustomTableLoading(false);
           }
@@ -878,7 +903,7 @@ var ProTable = function ProTable(props) {
           if (Number.isInteger(time) && time >= 1000) {
             autoRefreshTimerRef.current = setTimeout(function () {
               // 自动刷新不显示 loading
-              _request({}, true);
+              _request(params, true);
             }, Number(time));
             emit('PRO_TABLE_REFRESH_TIMER_FLAG', Number(time));
           }
@@ -889,57 +914,64 @@ var ProTable = function ProTable(props) {
         getData.run(requestData);
       }
     }
-  }
-  function onSort(dataIndex, order) {
+  }, [bindUrl, bindUrlProps, dataRef, url, customRequest]);
+  var onSort = useCallback(function (dataIndex, order) {
     var nextSort = _defineProperty({}, dataIndex, order);
     setSort(nextSort);
     _request(targetFormatSort(nextSort));
-  }
+  }, [_request, targetFormatSort]);
   // 处理 dataFilter 中的 onFilter、onReset
-  var dataFilter = _objectSpread(_objectSpread({
-    mode: 'inline',
-    forceClear: true
-  }, propsDataFilter), {}, {
-    onInit: (propsDataFilter === null || propsDataFilter === void 0 ? void 0 : propsDataFilter.onInit) || requestWhenMount ? function (values) {
-      var _propsDataFilter$onIn;
-      // 表单初始化请求处理
-      propsDataFilter === null || propsDataFilter === void 0 ? void 0 : (_propsDataFilter$onIn = propsDataFilter.onInit) === null || _propsDataFilter$onIn === void 0 ? void 0 : _propsDataFilter$onIn.call(propsDataFilter, values);
-      !fullscreenState && requestWhenMount && _request({}, false, values);
-      return true;
-    } : undefined,
-    onFilter: function onFilter(values) {
-      var _actionRef$current7, _actionRef$current7$c;
-      // 全屏状态，判断全屏表单onFilter是否禁用
-      if (fullscreenState && !filterEnableRef.current.fullscreen) {
-        filterEnableRef.current.fullscreen = true;
-        return;
-      }
-      // 非全屏状态，判断普通表单onFiler是否禁用
-      if (!fullscreenState && !filterEnableRef.current.normal) {
-        filterEnableRef.current.normal = true;
-        return;
+  var dataFilter = useMemo(function () {
+    return _objectSpread(_objectSpread({
+      mode: 'inline',
+      forceClear: true
+    }, propsDataFilter), {}, {
+      onInit: (propsDataFilter === null || propsDataFilter === void 0 ? void 0 : propsDataFilter.onInit) || requestWhenMount ? function (values) {
+        var _propsDataFilter$onIn;
+        // 表单初始化请求处理
+        propsDataFilter === null || propsDataFilter === void 0 ? void 0 : (_propsDataFilter$onIn = propsDataFilter.onInit) === null || _propsDataFilter$onIn === void 0 ? void 0 : _propsDataFilter$onIn.call(propsDataFilter, values);
+        !fullscreenState && requestWhenMount && _request({}, false, values);
+        return true;
+      } : undefined,
+      onFilter: function onFilter(values) {
+        var _actionRef$current7, _actionRef$current7$c;
+        // 全屏状态，判断全屏表单onFilter是否禁用
+        if (fullscreenState && !filterEnableRef.current.fullscreen) {
+          filterEnableRef.current.fullscreen = true;
+          return;
+        }
+        // 非全屏状态，判断普通表单onFiler是否禁用
+        if (!fullscreenState && !filterEnableRef.current.normal) {
+          filterEnableRef.current.normal = true;
+          return;
+        }
+        (propsDataFilter === null || propsDataFilter === void 0 ? void 0 : propsDataFilter.onFilter) && (propsDataFilter === null || propsDataFilter === void 0 ? void 0 : propsDataFilter.onFilter(values));
+        // 搜索变化时，暂时先清空选择
+        (_actionRef$current7 = actionRef.current) === null || _actionRef$current7 === void 0 ? void 0 : (_actionRef$current7$c = _actionRef$current7.clearRowSelection) === null || _actionRef$current7$c === void 0 ? void 0 : _actionRef$current7$c.call(_actionRef$current7);
+        setCurrentPage(1);
+        _request(_defineProperty({}, targetPageKey, 1), false, values);
+      },
+      onReset: function onReset(values) {
+        var _dataFilterFormRef$cu3;
+        (propsDataFilter === null || propsDataFilter === void 0 ? void 0 : propsDataFilter.onReset) && (propsDataFilter === null || propsDataFilter === void 0 ? void 0 : propsDataFilter.onReset());
+        (_dataFilterFormRef$cu3 = dataFilterFormRef.current) === null || _dataFilterFormRef$cu3 === void 0 ? void 0 : _dataFilterFormRef$cu3.reset();
+        setCurrentPage(1);
+        _request(_defineProperty({}, targetPageKey, 1), false, values);
       }
-      (propsDataFilter === null || propsDataFilter === void 0 ? void 0 : propsDataFilter.onFilter) && (propsDataFilter === null || propsDataFilter === void 0 ? void 0 : propsDataFilter.onFilter(values));
-      // 搜索变化时，暂时先清空选择
-      (_actionRef$current7 = actionRef.current) === null || _actionRef$current7 === void 0 ? void 0 : (_actionRef$current7$c = _actionRef$current7.clearRowSelection) === null || _actionRef$current7$c === void 0 ? void 0 : _actionRef$current7$c.call(_actionRef$current7);
-      setCurrentPage(1);
-      _request(_defineProperty({}, targetPageKey, 1), false, values);
-    },
-    onReset: function onReset(values) {
-      var _dataFilterFormRef$cu3;
-      (propsDataFilter === null || propsDataFilter === void 0 ? void 0 : propsDataFilter.onReset) && (propsDataFilter === null || propsDataFilter === void 0 ? void 0 : propsDataFilter.onReset());
-      (_dataFilterFormRef$cu3 = dataFilterFormRef.current) === null || _dataFilterFormRef$cu3 === void 0 ? void 0 : _dataFilterFormRef$cu3.reset();
-      setCurrentPage(1);
-      _request(_defineProperty({}, targetPageKey, 1), false, values);
-    }
-  });
-  var getTableLoading = function getTableLoading() {
+    });
+  }, [propsDataFilter, fullscreenState, filterEnableRef, actionRef]);
+  var isLoading = useMemo(function () {
     if (!customRequest) {
       return showLoading && !showSkeleton && (getData.loading || props.loading);
     } else {
       return showLoading && !showSkeleton && (customTableLoading || props.loading);
     }
-  };
+  }, [customRequest, showLoading, showSkeleton, customTableLoading, props.loading, getData]);
+  var memorizedGenProColumnToColumn = useMemo(function () {
+    return genProColumnToColumn(filteredColumns, showSkeleton, actionRef, context, dataTeamixSpm, bindUrl, bindUrlProps);
+  }, [
+  // filteredColumns,
+  showSkeleton, actionRef, context, dataTeamixSpm, bindUrl, bindUrlProps]);
   var renderTable = function renderTable(isFullScreen) {
     if (propsColumns) {
       return /*#__PURE__*/React.createElement("div", {
@@ -966,11 +998,11 @@ var ProTable = function ProTable(props) {
         autoRefreshProps: autoRefreshProps,
         bindUrlProps: bindUrlProps,
         bindUrl: bindUrl
-      }), switchViewState === 'table' && /*#__PURE__*/React.createElement(Table.StickyLock, _objectSpread({
+      }), switchViewState === 'table' && /*#__PURE__*/React.createElement(TableContent, _objectSpread({
         hasBorder: false,
         dataSource: showSkeleton ? skeletonDataSource : data || props.dataSource,
-        columns: genProColumnToColumn(filteredColumns, showSkeleton, actionRef, context, dataTeamixSpm, bindUrl, bindUrlProps),
-        loading: getTableLoading(),
+        columns: memorizedGenProColumnToColumn,
+        loading: isLoading,
         className: classNames('teamix-pro-table', tableClassName, {
           'with-row-select': rowSelection,
           'teamix-pro-tree-table': isTree
@@ -981,14 +1013,12 @@ var ProTable = function ProTable(props) {
         sort: sort,
         primaryKey: primaryKey,
         rowSelection: rowSelection,
-        emptyContent: /*#__PURE__*/React.createElement(EmptyContent, _objectSpread({}, emptyProps)),
-        sortIcons: getTableSortIcons(),
         fixedHeader: fullscreenState || fixedTableBody,
         maxBodyHeight: "calc(100vh - ".concat(headerHeight, "px)")
       }, pickProps(getTableProps(), otherProps))), switchViewState === 'card' && /*#__PURE__*/React.createElement(CardView, {
         dataSource: showSkeleton ? skeletonDataSource : data || props.dataSource,
         showSkeleton: showSkeleton,
-        loading: getTableLoading(),
+        loading: isLoading,
         originColumns: propsColumns,
         cardViewProps: cardViewProps,
         scrollHeight: fullscreenState || fixedTableBody ? "calc(100vh - ".concat(headerHeight, "px)") : undefined,
@@ -1030,28 +1060,28 @@ var ProTable = function ProTable(props) {
       })));
     } else return footerAction;
   };
-  var renderFooter = function renderFooter() {
-    function onChangePagination(currentPage) {
-      var params = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
-      // 翻页默认清空选择
-      if (!reserveSelectedRecords) {
-        var _actionRef$current8, _actionRef$current8$c;
-        (_actionRef$current8 = actionRef.current) === null || _actionRef$current8 === void 0 ? void 0 : (_actionRef$current8$c = _actionRef$current8.clearRowSelection) === null || _actionRef$current8$c === void 0 ? void 0 : _actionRef$current8$c.call(_actionRef$current8);
-      }
-      setCurrentPage(currentPage);
-      _request(_objectSpread(_defineProperty({}, targetPageKey, currentPage), params));
+  var onChangePagination = useCallback(function (currentPage) {
+    var params = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+    // 翻页默认清空选择
+    if (!reserveSelectedRecords) {
+      var _actionRef$current8, _actionRef$current8$c;
+      (_actionRef$current8 = actionRef.current) === null || _actionRef$current8 === void 0 ? void 0 : (_actionRef$current8$c = _actionRef$current8.clearRowSelection) === null || _actionRef$current8$c === void 0 ? void 0 : _actionRef$current8$c.call(_actionRef$current8);
     }
-    function onChangePaginationSize(currentPageSize) {
-      var _request10;
-      // 翻页默认清空选择
-      if (!reserveSelectedRecords) {
-        var _actionRef$current9, _actionRef$current9$c;
-        (_actionRef$current9 = actionRef.current) === null || _actionRef$current9 === void 0 ? void 0 : (_actionRef$current9$c = _actionRef$current9.clearRowSelection) === null || _actionRef$current9$c === void 0 ? void 0 : _actionRef$current9$c.call(_actionRef$current9);
-      }
-      setPageSize(currentPageSize);
-      setCurrentPage(1);
-      _request((_request10 = {}, _defineProperty(_request10, targetPageSizeKey, currentPageSize), _defineProperty(_request10, targetPageKey, 1), _request10));
+    setCurrentPage(currentPage);
+    _request(_objectSpread(_defineProperty({}, targetPageKey, currentPage), params));
+  }, [reserveSelectedRecords, targetPageKey, actionRef]);
+  var onChangePaginationSize = useCallback(function (currentPageSize) {
+    var _request10;
+    // 翻页默认清空选择
+    if (!reserveSelectedRecords) {
+      var _actionRef$current9, _actionRef$current9$c;
+      (_actionRef$current9 = actionRef.current) === null || _actionRef$current9 === void 0 ? void 0 : (_actionRef$current9$c = _actionRef$current9.clearRowSelection) === null || _actionRef$current9$c === void 0 ? void 0 : _actionRef$current9$c.call(_actionRef$current9);
     }
+    setPageSize(currentPageSize);
+    setCurrentPage(1);
+    _request((_request10 = {}, _defineProperty(_request10, targetPageSizeKey, currentPageSize), _defineProperty(_request10, targetPageKey, 1), _request10));
+  }, [reserveSelectedRecords, actionRef, targetPageSizeKey, targetPageKey]);
+  var renderFooter = function renderFooter() {
     function renderRowSelection() {
       if (rowSelection) {
         if (showSkeleton) {
@@ -1085,6 +1115,7 @@ var ProTable = function ProTable(props) {
       var _props$paginationProp3;
       var _ref8 = (_props$paginationProp3 = props === null || props === void 0 ? void 0 : props.paginationProps) !== null && _props$paginationProp3 !== void 0 ? _props$paginationProp3 : {},
         onPaginationPropsChange = _ref8.onChange,
+        onPageSizeChangeProp = _ref8.onPageSizeChange,
         othersPaginationProps = _objectWithoutProperties(_ref8, _excluded2);
       return /*#__PURE__*/React.createElement("div", {
         className: cls('footer', {
@@ -1109,7 +1140,8 @@ var ProTable = function ProTable(props) {
         pageSizeSelector: total > (props.pageSize || 10) * 2 ? 'dropdown' : false,
         type: total / pageSize <= 2 ? 'simple' : 'normal',
         onPageSizeChange: function onPageSizeChange(number) {
-          return onChangePaginationSize(number);
+          onChangePaginationSize(number);
+          onPageSizeChangeProp === null || onPageSizeChangeProp === void 0 ? void 0 : onPageSizeChangeProp(number);
         },
         useMaxData: globalUseMaxData !== null && globalUseMaxData !== void 0 ? globalUseMaxData : useMaxData
       }, othersPaginationProps)))));
@@ -1147,7 +1179,11 @@ var ProTable = function ProTable(props) {
         // 'footer-suction': footerSuctionState && footerSuction,
       }),
       ref: tableRef
-    }, renderTable(isFullScreen), fixFooterState && /*#__PURE__*/React.createElement(ProPageContainer.FixedFooter, null, renderFooter()), !fixFooterState && renderFooter());
+    }, showShadowContainer && shadowContainer({
+      columns: filteredColumns,
+      data: data,
+      shadowContainerRef: shadowContainerRef
+    }), hasActionColumn && shadowActionColumnContainer(filteredColumns, shadowActionColumnContainerRef), renderTable(isFullScreen), fixFooterState && /*#__PURE__*/React.createElement(ProPageContainer.FixedFooter, null, renderFooter()), !fixFooterState && renderFooter());
   });
 };
 export default ProTable;

package/es/table/index.scss

@@ -1,3 +1,4 @@
+@import "xconsole";
 $prefix: 'teamix-pro-table';
 $fullscreenPadding: 24px;
 
@@ -77,6 +78,32 @@ $fullscreenPadding: 24px;
       transition: all 0.1s;
     }
   }
+  &-shadow-container {
+    overflow: hidden;
+    position: absolute;
+    right: 0;
+    left: 0;
+    top: 0;
+    visibility: hidden;
+    pointer-events: none;
+  }
+  &-shadow-container-columns {
+    display: flex;
+    >* {
+      flex-shrink: 0;
+    }
+  }
+  &-action-column-shadow-container {
+    overflow: hidden;
+    position: absolute;
+    right: 0;
+    left: 0;
+    top: 0;
+    visibility: hidden;
+    pointer-events: none;
+    display: flex;
+  }
+  
   // sort icon
   .next-table-sort.next-table-header-icon {
     line-height: 16px;

package/es/table/typing.d.ts

@@ -13,7 +13,7 @@ import { ProCardProps } from '../card';
 declare type IFieldRenderProps = keyof ProFieldRenderProps;
 /** 列record函数 */
 declare type ProTableCellFunProp = (value: any, index: number, record: any, ...others: any) => any;
-declare type ITableCellRender = {
+export declare type ITableCellRender = {
     [key in IFieldRenderProps]?: ProFieldRenderProps[key] | ProTableCellFunProp;
 } | ((...other: any) => React.ReactNode);
 declare type TDataService = {
@@ -24,6 +24,12 @@ declare type TDataService = {
 };
 export declare type responsivePaginationType = 'mini' | 'small' | 'simple' | 'normal';
 export declare type ProTableColumnProps = {
+    /** 是否开启了自动计算宽度 */
+    isAutoWidth?: boolean;
+    /** 自动计算宽度时的被挤占的情况 */
+    shrink?: number;
+    /** 是否自动适应该列宽度 */
+    autoWidth?: boolean;
     /**
      * 会在 title 之后展示一个 icon，hover 之后提示一些信息
      */
@@ -65,6 +71,8 @@ export declare type ProTableColumnProps = {
 } & Omit<ColumnProps, 'filters' | 'dataIndex' | 'filtersMode' | 'children'>;
 export declare type ProColumnProps = ProTableColumnProps;
 export declare type ProTableProps = {
+    /** 表格是否自适应宽度 */
+    autoWidth?: boolean;
     /** ProColums 定义，取代 Table 的 columns */
     columns: ProTableColumnProps[];
     /** 请求地址 */

package/es/table/utils/columnRender.d.ts

@@ -11,3 +11,4 @@ export declare const renderColumnsTitle: (item: ProTableColumnProps, actionRef:
  * 负责单元格的具体渲染
  */
 export declare const renderCell: (value: any, item: ProTableColumnProps, index: number, record: any, actionRef: React.MutableRefObject<ProTableActionType | undefined>, context?: any, dataTeamixSpm?: string) => JSX.Element;
+export declare const renderCellSmartWidth: (value: any, item: ProTableColumnProps, index: number, record: any) => 0 | import("@teamix/pro-field/lib/autoWidth/typing").ProFieldAutoWidthPropsItem;