@teamix/pro 1.5.1-aplha.0 → 1.5.2

package/lib/table/index.js

@@ -34,7 +34,7 @@ var _Fullscreen = _interopRequireDefault(require("./components/ToolBar/Fullscree
 
 var _EmptyContent = _interopRequireDefault(require("./components/EmptyContent"));
 
-var _actions2 = require("../actions");
+var _actions = require("../actions");
 
 var _classnames = _interopRequireDefault(require("classnames"));
 
@@ -42,6 +42,10 @@ var _pageContainer = _interopRequireDefault(require("../page-container"));
 
 var _lodash = _interopRequireDefault(require("lodash.debounce"));
 
+var _CardView = _interopRequireDefault(require("./components/CardView"));
+
+var _columns = _interopRequireDefault(require("../../demos/table/columns"));
+
 var _typing = require("./typing");
 
 Object.keys(_typing).forEach(function (key) {
@@ -55,7 +59,7 @@ Object.keys(_typing).forEach(function (key) {
     }
   });
 });
-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", "customRequest", "filterColumnType", "defaultFilterParams", "reserveSelectedRecords", "size", "disableSelectAll", "context", "fixedTableBody", "isTree", "data-teamix-spm"];
+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", "customRequest", "filterColumnType", "defaultFilterParams", "reserveSelectedRecords", "size", "disableSelectAll", "context", "fixedTableBody", "isTree", "toolBarAutoWidth", "data-teamix-spm", "switchCardView", "cardViewProps", "defaultView"];
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
@@ -63,8 +67,6 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
-function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-
 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(); }
@@ -223,7 +225,14 @@ var ProTable = function ProTable(props) {
       _props$fixedTableBody = props.fixedTableBody,
       fixedTableBody = _props$fixedTableBody === void 0 ? false : _props$fixedTableBody,
       isTree = props.isTree,
+      _props$toolBarAutoWid = props.toolBarAutoWidth,
+      toolBarAutoWidth = _props$toolBarAutoWid === void 0 ? true : _props$toolBarAutoWid,
       dataTeamixSpm = props['data-teamix-spm'],
+      _props$switchCardView = props.switchCardView,
+      switchCardView = _props$switchCardView === void 0 ? false : _props$switchCardView,
+      cardViewProps = props.cardViewProps,
+      _props$defaultView = props.defaultView,
+      defaultView = _props$defaultView === void 0 ? 'table' : _props$defaultView,
       otherProps = _objectWithoutProperties(props, _excluded);
 
   var targetPageKey = pageKey || globalPageKey;
@@ -248,7 +257,7 @@ var ProTable = function ProTable(props) {
   var _useState7 = (0, _react.useState)(propsDataSource !== null && propsDataSource !== void 0 ? propsDataSource : []),
       _useState8 = _slicedToArray(_useState7, 2),
       data = _useState8[0],
-      setData = _useState8[1];
+      _setData = _useState8[1];
 
   var _useState9 = (0, _react.useState)(props.sort || {}),
       _useState10 = _slicedToArray(_useState9, 2),
@@ -400,7 +409,11 @@ var ProTable = function ProTable(props) {
 
         var offsetHeaderHeight = headerHeight + tableHeaderHeight + pageHeaderHeight + teamixNavHeight + footerRowSelectionHeight + 16 + (offset !== null && offset !== void 0 ? offset : 0) + 1;
 
-        if (tableBodyDom.clientHeight < tableBodyDom.scrollHeight) {
+        if (switchViewState === 'card') {
+          offsetHeaderHeight = offsetHeaderHeight - tableHeaderHeight - footerRowSelectionHeight;
+        }
+
+        if ((tableBodyDom === null || tableBodyDom === void 0 ? void 0 : tableBodyDom.clientHeight) < (tableBodyDom === null || tableBodyDom === void 0 ? void 0 : tableBodyDom.scrollHeight)) {
           setFooterSuctionState(true);
         } else {
           setFooterSuctionState(false);
@@ -435,7 +448,13 @@ var ProTable = function ProTable(props) {
   var _useState27 = (0, _react.useState)(false),
       _useState28 = _slicedToArray(_useState27, 2),
       fullscreenState = _useState28[0],
-      setFullscreenState = _useState28[1]; // 切换全屏搜索开关
+      setFullscreenState = _useState28[1]; // 切换视角
+
+
+  var _useState29 = (0, _react.useState)(defaultView !== null && defaultView !== void 0 ? defaultView : 'table'),
+      _useState30 = _slicedToArray(_useState29, 2),
+      switchViewState = _useState30[0],
+      setSwitchViewState = _useState30[1]; // 切换全屏搜索开关
 
 
   var filterEnableRef = (0, _react.useRef)({
@@ -451,10 +470,10 @@ var ProTable = function ProTable(props) {
   var dataFilterFormRef = !fullscreenState ? normalDataFilterFormRef : fullscreenDataFilterFormRef; // let dataFilterForm = dataFilterFormRef.current;
   // 整个内容区是否超过一屏。用于表格在非全屏模式下的吸底
 
-  var _useState29 = (0, _react.useState)(false),
-      _useState30 = _slicedToArray(_useState29, 2),
-      footerSuctionState = _useState30[0],
-      setFooterSuctionState = _useState30[1]; // TODO 获取内容区是否超出一屏（暂时仅支持全家桶）
+  var _useState31 = (0, _react.useState)(false),
+      _useState32 = _slicedToArray(_useState31, 2),
+      footerSuctionState = _useState32[0],
+      setFooterSuctionState = _useState32[1]; // TODO 获取内容区是否超出一屏（暂时仅支持全家桶）
 
 
   var getFooterSuctionState = function getFooterSuctionState() {
@@ -519,14 +538,13 @@ var ProTable = function ProTable(props) {
   }, [rowSelectionHook]); // 获取 table 左下角 checkbox 属性
 
   function getCheckAllProps() {
-    var _ref = rowSelection,
-        _ref$onChange = _ref.onChange,
-        _onChange = _ref$onChange === void 0 ? function () {} : _ref$onChange,
-        _ref$onSelectAll = _ref.onSelectAll,
-        onSelectAll = _ref$onSelectAll === void 0 ? function () {} : _ref$onSelectAll,
-        _ref$selectedRowKeys = _ref.selectedRowKeys,
-        selectedRowKeys = _ref$selectedRowKeys === void 0 ? [] : _ref$selectedRowKeys,
-        getProps = _ref.getProps;
+    var _rowSelection$onChang = rowSelection.onChange,
+        _onChange = _rowSelection$onChang === void 0 ? function () {} : _rowSelection$onChang,
+        _rowSelection$onSelec = rowSelection.onSelectAll,
+        onSelectAll = _rowSelection$onSelec === void 0 ? function () {} : _rowSelection$onSelec,
+        _rowSelection$selecte2 = rowSelection.selectedRowKeys,
+        selectedRowKeys = _rowSelection$selecte2 === void 0 ? [] : _rowSelection$selecte2,
+        getProps = rowSelection.getProps;
 
     var dataSource = data;
     var allRowKeys = dataSource.filter(function (d, i) {
@@ -580,7 +598,7 @@ var ProTable = function ProTable(props) {
 
   (0, _react.useEffect)(function () {
     if (propsDataSource) {
-      setData(propsDataSource);
+      _setData(propsDataSource);
     }
   }, [propsDataSource]); // 初始化 ActionRef。
 
@@ -603,14 +621,14 @@ var ProTable = function ProTable(props) {
       actionRefCallback[state][name] = fun;
     },
     off: function off(name) {
-      actionRefCallback = Object.fromEntries(Object.entries(actionRefCallback).map(function (_ref2) {
-        var _ref3 = _slicedToArray(_ref2, 2),
-            k = _ref3[0],
-            v = _ref3[1];
+      actionRefCallback = Object.fromEntries(Object.entries(actionRefCallback).map(function (_ref) {
+        var _ref2 = _slicedToArray(_ref, 2),
+            k = _ref2[0],
+            v = _ref2[1];
 
-        var filterV = Object.fromEntries(Object.entries(v).filter(function (_ref4) {
-          var _ref5 = _slicedToArray(_ref4, 1),
-              k = _ref5[0];
+        var filterV = Object.fromEntries(Object.entries(v).filter(function (_ref3) {
+          var _ref4 = _slicedToArray(_ref3, 1),
+              k = _ref4[0];
 
           return k !== name;
         }));
@@ -647,7 +665,16 @@ var ProTable = function ProTable(props) {
       _setSize(mode);
     },
     refresh: function refresh(params) {
-      return _request(params);
+      // card视角的刷新等于重新请求
+      if (switchViewState === 'card') {
+        setCurrentPage(1);
+
+        _request(_objectSpread(_objectSpread({}, params), {}, _defineProperty({}, targetPageKey, 1)));
+
+        setShowSkeleton(true);
+      } else {
+        _request(params);
+      }
     },
     request: function request(params) {
       // 如果请求中还有翻页相关信息，需要自动设置到指定页
@@ -675,6 +702,12 @@ var ProTable = function ProTable(props) {
     resetPage: function resetPage() {
       setCurrentPage(1);
     },
+    nextPage: function nextPage() {
+      var newCurrentPage = currentPage + 1;
+      setCurrentPage(newCurrentPage);
+
+      _request(_defineProperty({}, targetPageKey, newCurrentPage));
+    },
     rowSelection: rowSelection,
     clearRowSelection: function clearRowSelection() {
       rowSelectionHook.setSelectedRowKeys([]);
@@ -694,8 +727,34 @@ var ProTable = function ProTable(props) {
     normalDataFilterForm: normalDataFilterForm,
     fullscreenDataFilterForm: fullscreenDataFilterForm,
     filterEnableRef: filterEnableRef,
+    setData: function setData(data) {
+      _setData(data);
+    },
     resetTableMaxBodyHeight: function resetTableMaxBodyHeight(offset) {
       getHeaderHeight(fullscreenState, offset);
+    },
+    switchView: function switchView(view) {
+      setSwitchViewState(view);
+      setShowSkeleton(true);
+      setCurrentPage(1);
+
+      if (view === 'table') {
+        var _request4;
+
+        setPageSize(pageSize !== null && pageSize !== void 0 ? pageSize : 20);
+
+        _request((_request4 = {}, _defineProperty(_request4, targetPageSizeKey, pageSize !== null && pageSize !== void 0 ? pageSize : 20), _defineProperty(_request4, targetPageKey, 1), _request4));
+      }
+
+      if (view === 'card') {
+        var _cardViewProps$pageSi, _cardViewProps$pageSi2, _request5;
+
+        setPageSize((_cardViewProps$pageSi = cardViewProps === null || cardViewProps === void 0 ? void 0 : cardViewProps.pageSize) !== null && _cardViewProps$pageSi !== void 0 ? _cardViewProps$pageSi : 12);
+
+        _request((_request5 = {}, _defineProperty(_request5, targetPageSizeKey, (_cardViewProps$pageSi2 = cardViewProps === null || cardViewProps === void 0 ? void 0 : cardViewProps.pageSize) !== null && _cardViewProps$pageSi2 !== void 0 ? _cardViewProps$pageSi2 : 12), _defineProperty(_request5, targetPageKey, 1), _request5));
+      }
+
+      getHeaderHeight(fullscreenState);
     }
   }); // 将 Actions 绑定到传入的 propsActionRef 中
 
@@ -704,8 +763,6 @@ var ProTable = function ProTable(props) {
   }
 
   function onFormatResult(next) {
-    var _next$data;
-
     props.onFormatResult && props.onFormatResult(next);
     var time = autoRefresh ? autoRefresh(next.data) : false;
 
@@ -717,8 +774,22 @@ var ProTable = function ProTable(props) {
     } // 设置 dataSource、total
 
 
-    setData(next.data || []);
-    setTotal(next.total || ((_next$data = next.data) === null || _next$data === void 0 ? void 0 : _next$data.length));
+    if (switchViewState === 'table' || currentPage === 1) {
+      var _next$data;
+
+      _setData(next.data || []);
+
+      setTotal(next.total || ((_next$data = next.data) === null || _next$data === void 0 ? void 0 : _next$data.length));
+    }
+
+    if (switchViewState === 'card' && currentPage !== 1) {
+      var _next$data2;
+
+      _setData([].concat(_toConsumableArray(data), _toConsumableArray(next.data || [])));
+
+      setTotal(total + (next.total || ((_next$data2 = next.data) === null || _next$data2 === void 0 ? void 0 : _next$data2.length)));
+    }
+
     setShowSkeleton(false);
   } // 请求表格数据工具函数
 
@@ -790,7 +861,7 @@ var ProTable = function ProTable(props) {
   }); // 请求函数
 
   function _request(params, noLoading, filterParams) {
-    var _dataFilterFormRef$cu2, _actionRef$current$ge, _actionRef$current5, _actionRef$current5$g, _objectSpread2;
+    var _dataFilterFormRef$cu2, _actionRef$current$ge, _actionRef$current5, _actionRef$current5$g, _objectSpread3;
 
     // 如果没有传 url 且没有 customRequest，直接返回
     if (!url && !customRequest) {
@@ -807,7 +878,7 @@ var ProTable = function ProTable(props) {
 
     var columnsFilterParams = (_actionRef$current$ge = (_actionRef$current5 = actionRef.current) === null || _actionRef$current5 === void 0 ? void 0 : (_actionRef$current5$g = _actionRef$current5.getFilterRules) === null || _actionRef$current5$g === void 0 ? void 0 : _actionRef$current5$g.call(_actionRef$current5)) !== null && _actionRef$current$ge !== void 0 ? _actionRef$current$ge : {}; // 格式化后的请求参数
 
-    var requestData = formatParams(_objectSpread(_objectSpread({}, !showPagination ? _objectSpread(_objectSpread(_objectSpread(_objectSpread({}, dataFilterParams), propsParams), sortParams), columnsFilterParams) : _objectSpread(_objectSpread(_objectSpread(_objectSpread((_objectSpread2 = {}, _defineProperty(_objectSpread2, targetPageKey, currentPage), _defineProperty(_objectSpread2, targetPageSizeKey, pageSize), _objectSpread2), dataFilterParams), propsParams), sortParams), columnsFilterParams)), params));
+    var requestData = formatParams(_objectSpread(_objectSpread({}, !showPagination ? _objectSpread(_objectSpread(_objectSpread(_objectSpread({}, dataFilterParams), propsParams), sortParams), columnsFilterParams) : _objectSpread(_objectSpread(_objectSpread(_objectSpread((_objectSpread3 = {}, _defineProperty(_objectSpread3, targetPageKey, currentPage), _defineProperty(_objectSpread3, targetPageSizeKey, pageSize), _objectSpread3), dataFilterParams), propsParams), sortParams), columnsFilterParams)), params));
 
     if (requestData) {
       if (autoRefreshTimerRef.current) {
@@ -835,14 +906,24 @@ var ProTable = function ProTable(props) {
       if (customRequest && typeof customRequest === 'function') {
         setCustomTableLoading(true);
         customRequest(requestData).then(function (res) {
-          var data = res.data,
-              total = res.total,
+          var dataRes = res.data,
+              totalRes = res.total,
               success = res.success;
 
           if (success === true) {
             // 设置 dataSource、total
-            setData(data || []);
-            setTotal(total || (data === null || data === void 0 ? void 0 : data.length));
+            if (switchViewState === 'table' || params['targetPageKey'] === 1) {
+              _setData(dataRes || []);
+
+              setTotal(totalRes || (dataRes === null || dataRes === void 0 ? void 0 : dataRes.length));
+            }
+
+            if (switchViewState === 'card' && params['targetPageKey'] !== 1) {
+              _setData([].concat(_toConsumableArray(data), _toConsumableArray(dataRes || [])));
+
+              setTotal(total + (totalRes || (dataRes === null || dataRes === void 0 ? void 0 : dataRes.length)));
+            }
+
             setShowSkeleton(false);
             setCustomTableLoading(false);
           } // 重新计算是否需要吸底
@@ -912,7 +993,6 @@ var ProTable = function ProTable(props) {
 
       (_actionRef$current6 = actionRef.current) === null || _actionRef$current6 === void 0 ? void 0 : (_actionRef$current6$c = _actionRef$current6.clearRowSelection) === null || _actionRef$current6$c === void 0 ? void 0 : _actionRef$current6$c.call(_actionRef$current6);
       setCurrentPage(1);
-      console.log('currentPageSize1', pageSize);
 
       _request(_defineProperty({}, targetPageKey, 1), false, values);
     },
@@ -922,7 +1002,6 @@ var ProTable = function ProTable(props) {
       (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);
-      console.log('currentPageSize2', pageSize);
 
       _request(_defineProperty({}, targetPageKey, 1), false, values);
     }
@@ -957,11 +1036,14 @@ var ProTable = function ProTable(props) {
         rowSelection: rowSelection,
         filterColumnType: filterColumnType,
         fullScreenState: isFullScreen,
-        dataTeamixSpm: dataTeamixSpm
-      }), /*#__PURE__*/_react.default.createElement(_components.Table.StickyLock, _extends({
+        toolBarAutoWidth: toolBarAutoWidth,
+        dataTeamixSpm: dataTeamixSpm,
+        switchCardView: switchCardView,
+        defaultView: defaultView
+      }), switchViewState === 'table' && /*#__PURE__*/_react.default.createElement(_components.Table.StickyLock, _objectSpread({
         hasBorder: false,
         dataSource: showSkeleton ? skeletonDataSource : data || props.dataSource,
-        columns: (0, _genProColumnToColumn.default)(filteredColumns, showSkeleton, actionRef, context),
+        columns: (0, _genProColumnToColumn.default)(filteredColumns, showSkeleton, actionRef, context, dataTeamixSpm),
         loading: getTableLoading(),
         className: (0, _classnames.default)('teamix-pro-table', tableClassName, {
           'with-row-select': rowSelection,
@@ -976,21 +1058,30 @@ var ProTable = function ProTable(props) {
         emptyContent: /*#__PURE__*/_react.default.createElement(_EmptyContent.default, null),
         sortIcons: (0, _getTableSortIcons.default)(),
         fixedHeader: fullscreenState || fixedTableBody,
-        maxBodyHeight: "calc(100vh - ".concat(headerHeight, "px)") // 过滤出可以传到 Table 的 Props
-
-      }, (0, _utils.pickProps)((0, _getTableProps.default)(), otherProps))));
+        maxBodyHeight: "calc(100vh - ".concat(headerHeight, "px)")
+      }, (0, _utils.pickProps)((0, _getTableProps.default)(), otherProps))), switchViewState === 'card' && /*#__PURE__*/_react.default.createElement(_CardView.default, {
+        dataSource: showSkeleton ? skeletonDataSource : data || props.dataSource,
+        showSkeleton: showSkeleton,
+        loading: getTableLoading(),
+        originColumns: _columns.default,
+        cardViewProps: cardViewProps,
+        scrollHeight: fullscreenState || fixedTableBody ? "calc(100vh - ".concat(headerHeight, "px)") : undefined,
+        actionRef: actionRef,
+        context: context,
+        columns: (0, _genProColumnToColumn.default)(filteredColumns, showSkeleton, actionRef, context)
+      }));
     } else {
       // 不传 columns 直接返回原始 Table
-      return /*#__PURE__*/_react.default.createElement(_components.Table, _extends({
+      return /*#__PURE__*/_react.default.createElement(_components.Table, _objectSpread({
         className: cls()
       }, (0, _utils.pickProps)((0, _getTableProps.default)(), otherProps)));
     }
   };
 
   var renderFooterAction = function renderFooterAction() {
-    var _actions;
+    var _footerAction$actions;
 
-    if (_typeof(footerAction) === 'object' && (footerAction === null || footerAction === void 0 ? void 0 : (_actions = footerAction.actions) === null || _actions === void 0 ? void 0 : _actions.length) >= 0) {
+    if (_typeof(footerAction) === 'object' && (footerAction === null || footerAction === void 0 ? void 0 : (_footerAction$actions = footerAction.actions) === null || _footerAction$actions === void 0 ? void 0 : _footerAction$actions.length) >= 0) {
       // 默认 context
       var defaultContext = {
         action: actionRef.current,
@@ -1009,8 +1100,9 @@ var ProTable = function ProTable(props) {
 
       return /*#__PURE__*/_react.default.createElement("div", {
         className: cls('footer-action')
-      }, /*#__PURE__*/_react.default.createElement(_actions2.ProActionGroup, _extends({}, targetFooterActions, {
-        context: _objectSpread(_objectSpread({}, defaultContext), targetFooterActions === null || targetFooterActions === void 0 ? void 0 : targetFooterActions.context)
+      }, /*#__PURE__*/_react.default.createElement(_actions.ProActionGroup, _objectSpread(_objectSpread({}, targetFooterActions), {}, {
+        context: _objectSpread(_objectSpread({}, defaultContext), targetFooterActions === null || targetFooterActions === void 0 ? void 0 : targetFooterActions.context),
+        "data-teamix-spm": dataTeamixSpm ? "".concat(dataTeamixSpm, "-footerAction") : undefined
       })));
     } else return footerAction;
   };
@@ -1032,7 +1124,7 @@ var ProTable = function ProTable(props) {
     }
 
     function onChangePaginationSize(currentPageSize) {
-      var _request5;
+      var _request8;
 
       // 翻页默认清空选择
       if (!reserveSelectedRecords) {
@@ -1044,7 +1136,7 @@ var ProTable = function ProTable(props) {
       setPageSize(currentPageSize);
       setCurrentPage(1);
 
-      _request((_request5 = {}, _defineProperty(_request5, targetPageSizeKey, currentPageSize), _defineProperty(_request5, targetPageKey, 1), _request5));
+      _request((_request8 = {}, _defineProperty(_request8, targetPageSizeKey, currentPageSize), _defineProperty(_request8, targetPageKey, 1), _request8));
     }
 
     function renderRowSelection() {
@@ -1056,13 +1148,13 @@ var ProTable = function ProTable(props) {
         } else {
           return /*#__PURE__*/_react.default.createElement("div", {
             className: cls('footer-left-wrapper')
-          }, rowSelection.mode !== 'single' && /*#__PURE__*/_react.default.createElement(_components.Checkbox, _extends({
+          }, /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, rowSelection.mode !== 'single' && /*#__PURE__*/_react.default.createElement(_components.Checkbox, _objectSpread({
             className: cls("footer-checkbox-".concat(size))
           }, getCheckAllProps())), footerAction && renderFooterAction(), /*#__PURE__*/_react.default.createElement("span", {
             className: cls('selected-msg')
           }, (0, _utils.getMessage)('selected', {
             count: selectedCount
-          })));
+          }))));
         }
       } else if (footerAction) {
         if (showSkeleton) {
@@ -1077,7 +1169,7 @@ var ProTable = function ProTable(props) {
       }
     }
 
-    if (showPagination) {
+    if (showPagination && switchViewState === 'table') {
       return /*#__PURE__*/_react.default.createElement("div", {
         className: cls('footer', {
           'footer-has-rowSelection': rowSelection,
@@ -1085,15 +1177,15 @@ var ProTable = function ProTable(props) {
         })
       }, renderRowSelection(), /*#__PURE__*/_react.default.createElement("div", {
         className: cls('footer-right-wrapper')
-      }, showSkeleton ? /*#__PURE__*/_react.default.createElement(_skeleton.ProSkeletonRaw.Footer.Pagination, null) : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, data.length > 0 && /*#__PURE__*/_react.default.createElement(_Pagination.default, _extends({
+      }, showSkeleton ? /*#__PURE__*/_react.default.createElement(_skeleton.ProSkeletonRaw.Footer.Pagination, null) : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, data.length > 0 && /*#__PURE__*/_react.default.createElement(_Pagination.default, _objectSpread({
         className: cls('pagination'),
         onChange: function onChange(number) {
           return onChangePagination(number);
         },
         total: total,
-        responsivePaginationType: responsivePaginationType // shape="arrow-only"
+        responsivePaginationType: responsivePaginationType,
+        // shape="arrow-only"
         // pageSizePosition="end"
-        ,
         totalRender: function totalRender(total) {
           return (0, _utils.getMessage)('total', {
             total: new Intl.NumberFormat().format(total)
@@ -1108,7 +1200,7 @@ var ProTable = function ProTable(props) {
           return onChangePaginationSize(number);
         }
       }, props.paginationProps)))));
-    } else if (!showPagination) {
+    } else if (!showPagination && (footerAction || rowSelection || useRowSelection)) {
       return /*#__PURE__*/_react.default.createElement("div", {
         className: cls('footer', {
           'footer-has-rowSelection': rowSelection
@@ -1122,6 +1214,7 @@ var ProTable = function ProTable(props) {
 
   var fixFooterState = (0, _react.useMemo)(function () {
     if (fullscreenState) {
+      // TODO XXX
       return false;
     }