@teamix/pro 1.1.3 → 1.1.7

package/es/table/index.js

@@ -0,0 +1,607 @@
+var _excluded = ["header", "className", "tableClassName", "mainAction", "quickAction", "dataFilter", "toolBar", "columns", "useRowSelection", "rowSelection", "onChangeRowSelection", "getRowSelection", "primaryKey", "footerAction", "url", "pageKey", "pageSizeKey", "method", "params", "formatSort", "formatParams", "formatResult", "requestWhenMount", "showPagination", "pageSizeList", "showSkeleton", "skeletonSize", "actionRef", "dataSource", "filterDebounce", "footerSuction"];
+
+function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _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); if (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 = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { 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); }
+
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
+
+function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
+
+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; }
+
+import React, { useState, useEffect, useRef, useMemo } from 'react';
+import { Table, Pagination, Message, Checkbox } from '@alicloudfe/components';
+import genProColumnToColumn from './utils/genProColumnToColumn';
+import { baseClass, useRequest, request as utilResquest, getDeepValue, getMessage, pickProps } from '@teamix/utils';
+import { BaseSkeleton as Skeleton } from '../skeleton';
+import './index.scss';
+import Layout from './components/Layout';
+import { 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 { createForm, formilyReactive } from '../form';
+import { ActionGroup } from '../actions';
+import debounce from 'lodash.debounce';
+import classNames from 'classnames';
+export * from './typing'; // 导出 ProActions 组件
+
+export * from '../actions';
+import { useSize } from 'ahooks';
+var cls = baseClass('teamix-pro-table');
+var toJS = formilyReactive.toJS;
+/**
+ * 处理原生传入的 columns 以便于 选择列 方便处理
+ * @param columns 原生传入的 columns
+ * @returns
+ */
+
+var processColumns = function processColumns(columns) {
+  return columns.filter(function (item) {
+    return item.columnFilters !== false;
+  });
+};
+/** 默认请求翻页参数 */
+
+
+var globalPageKey = 'currentPage';
+var globalPageSizeKey = 'pageSize';
+
+var globalFormatSort = function globalFormatSort(sort) {
+  if (Object.keys(sort).length > 0) {
+    return {
+      sort: sort
+    };
+  }
+
+  return {};
+};
+
+var ProTable = function ProTable(props) {
+  var _rowSelection$selecte;
+
+  var header = props.header,
+      className = props.className,
+      tableClassName = props.tableClassName,
+      mainAction = props.mainAction,
+      quickAction = props.quickAction,
+      propsDataFilter = props.dataFilter,
+      toolBar = props.toolBar,
+      propsColumns = props.columns,
+      useRowSelection = props.useRowSelection,
+      propsRowSelection = props.rowSelection,
+      onChangeRowSelection = props.onChangeRowSelection,
+      getRowSelection = props.getRowSelection,
+      primaryKey = props.primaryKey,
+      footerAction = props.footerAction,
+      url = props.url,
+      pageKey = props.pageKey,
+      pageSizeKey = props.pageSizeKey,
+      _props$method = props.method,
+      method = _props$method === void 0 ? 'get' : _props$method,
+      _props$params = props.params,
+      propsParams = _props$params === void 0 ? {} : _props$params,
+      formatSort = props.formatSort,
+      _props$formatParams = props.formatParams,
+      formatParams = _props$formatParams === void 0 ? function (params) {
+    return params;
+  } : _props$formatParams,
+      formatResult = props.formatResult,
+      _props$requestWhenMou = props.requestWhenMount,
+      requestWhenMount = _props$requestWhenMou === void 0 ? true : _props$requestWhenMou,
+      _props$showPagination = props.showPagination,
+      showPagination = _props$showPagination === void 0 ? true : _props$showPagination,
+      _props$pageSizeList = props.pageSizeList,
+      pageSizeList = _props$pageSizeList === void 0 ? [5, 10, 20, 50, 100] : _props$pageSizeList,
+      _props$showSkeleton = props.showSkeleton,
+      propsShowSkeleton = _props$showSkeleton === void 0 ? true : _props$showSkeleton,
+      _props$skeletonSize = props.skeletonSize,
+      skeletonSize = _props$skeletonSize === void 0 ? 5 : _props$skeletonSize,
+      propsActionRef = props.actionRef,
+      dataSource = props.dataSource,
+      _props$filterDebounce = props.filterDebounce,
+      filterDebounce = _props$filterDebounce === void 0 ? 300 : _props$filterDebounce,
+      _props$footerSuction = props.footerSuction,
+      footerSuction = _props$footerSuction === void 0 ? false : _props$footerSuction,
+      otherProps = _objectWithoutProperties(props, _excluded);
+
+  var targetPageKey = pageKey || globalPageKey;
+  var targetPageSizeKey = pageSizeKey || globalPageSizeKey;
+  var targetFormatSort = formatSort || globalFormatSort;
+
+  var _useState = useState(1),
+      _useState2 = _slicedToArray(_useState, 2),
+      currentPage = _useState2[0],
+      setCurrentPage = _useState2[1];
+
+  var _useState3 = useState(props.pageSize || 10),
+      _useState4 = _slicedToArray(_useState3, 2),
+      pageSize = _useState4[0],
+      setPageSize = _useState4[1];
+
+  var _useState5 = useState(0),
+      _useState6 = _slicedToArray(_useState5, 2),
+      total = _useState6[0],
+      setTotal = _useState6[1];
+
+  var _useState7 = useState([]),
+      _useState8 = _slicedToArray(_useState7, 2),
+      data = _useState8[0],
+      setData = _useState8[1];
+
+  var _useState9 = useState(props.sort || {}),
+      _useState10 = _slicedToArray(_useState9, 2),
+      sort = _useState10[0],
+      setSort = _useState10[1];
+
+  var _useState11 = useState(requestWhenMount && propsShowSkeleton),
+      _useState12 = _slicedToArray(_useState11, 2),
+      showSkeleton = _useState12[0],
+      setShowSkeleton = _useState12[1]; // 首次加载，渲染骨架屏
+
+
+  var skeletonDataSource = new Array(skeletonSize).fill({});
+  var requestDataKey = method.toLowerCase() === 'get' ? 'params' : 'data';
+  var tableRef = useRef(null);
+  var actionRef = useRef(); // 传给 table 的过滤后的 columns
+
+  var _useState13 = useState(processColumns(propsColumns !== null && propsColumns !== void 0 ? propsColumns : [])),
+      _useState14 = _slicedToArray(_useState13, 2),
+      filteredColumns = _useState14[0],
+      setFilteredColumns = _useState14[1];
+
+  var _useState15 = useState('medium'),
+      _useState16 = _slicedToArray(_useState15, 2),
+      size = _useState16[0],
+      _setSize = _useState16[1]; // 获取header高度，用作全屏吸底吸顶高度计算
+
+
+  var getHeaderHeight = function getHeaderHeight() {
+    var _tableDom$getElements, _tableDom$getElements2;
+
+    var tableDom = tableRef.current;
+    var headerDom = tableDom === null || tableDom === void 0 ? void 0 : (_tableDom$getElements = tableDom.getElementsByClassName('teamix-pro-table-layout')) === null || _tableDom$getElements === void 0 ? void 0 : _tableDom$getElements[0];
+    var tableHeaderDom = tableDom === null || tableDom === void 0 ? void 0 : (_tableDom$getElements2 = tableDom.getElementsByClassName('next-table-header-inner')) === null || _tableDom$getElements2 === void 0 ? void 0 : _tableDom$getElements2[0];
+    return new Promise(function (resolve) {
+      setTimeout(function () {
+        var _headerDom$offsetHeig, _tableHeaderDom$offse;
+
+        var headerHeight = (_headerDom$offsetHeig = headerDom === null || headerDom === void 0 ? void 0 : headerDom.offsetHeight) !== null && _headerDom$offsetHeig !== void 0 ? _headerDom$offsetHeig : 0; // table表头默认一行。即42px
+
+        var tableHeaderHeight = (_tableHeaderDom$offse = tableHeaderDom === null || tableHeaderDom === void 0 ? void 0 : tableHeaderDom.offsetHeight) !== null && _tableHeaderDom$offse !== void 0 ? _tableHeaderDom$offse : 42;
+        resolve(headerHeight + tableHeaderHeight);
+      }, 50);
+    });
+  }; // header 区域高度。用作全屏计算吸顶吸底高度。默认不做计算
+
+
+  var _useState17 = useState(0),
+      _useState18 = _slicedToArray(_useState17, 2),
+      headerHeight = _useState18[0],
+      setHeaderHeight = _useState18[1]; // 全屏显示 className
+
+
+  var _useState19 = useState(false),
+      _useState20 = _slicedToArray(_useState19, 2),
+      fullscreenState = _useState20[0],
+      setFullscreenState = _useState20[1]; // 父元素位置。用作非全屏模式下的吸底
+
+
+  var _useState21 = useState(),
+      _useState22 = _slicedToArray(_useState21, 2),
+      parentPosition = _useState22[0],
+      setParentPosition = _useState22[1];
+  /** 筛选区域 form */
+
+
+  var dataFilterForm = useMemo(function () {
+    return createForm();
+  }, []); // 获取表格大小
+
+  var tableSize = useSize(tableRef); // 获取父元素位置
+
+  var getParentPosition = function getParentPosition() {
+    // 暂时仅支持使用全家桶
+    if (footerSuction) {
+      var _parentDom$offsetLeft, _parentDom$offsetRigh;
+
+      var parentDom = document.querySelector('.teamix-pro-page-container');
+      setParentPosition({
+        offsetLeft: (_parentDom$offsetLeft = parentDom === null || parentDom === void 0 ? void 0 : parentDom.offsetLeft) !== null && _parentDom$offsetLeft !== void 0 ? _parentDom$offsetLeft : 0,
+        offsetRight: (_parentDom$offsetRigh = parentDom === null || parentDom === void 0 ? void 0 : parentDom.offsetRight) !== null && _parentDom$offsetRigh !== void 0 ? _parentDom$offsetRigh : 0
+      });
+    }
+  }; // 监听表格大小动态改变吸底footer大小
+
+
+  useEffect(function () {
+    getParentPosition();
+  }, [tableSize]); // rowSelection 相关
+
+  var rowSelectionHook = useTableSelection(_objectSpread(_objectSpread({}, propsRowSelection), {}, {
+    onChange: onChangeRowSelection
+  }), primaryKey);
+  var rowSelection = useRowSelection ? rowSelectionHook.rowSelection : propsRowSelection;
+  var selectedCount = (rowSelection === null || rowSelection === void 0 ? void 0 : (_rowSelection$selecte = rowSelection.selectedRowKeys) === null || _rowSelection$selecte === void 0 ? void 0 : _rowSelection$selecte.length) || 0;
+  useEffect(function () {
+    getRowSelection && getRowSelection(rowSelectionHook);
+  }, [rowSelectionHook]); // 获取 table 左下角 checkbox 属性
+
+  function getCheckAllProps() {
+    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) {
+      var _getProps;
+
+      return getProps ? !((_getProps = getProps(d, i)) === null || _getProps === void 0 ? void 0 : _getProps.disabled) : true;
+    }).map(function (d) {
+      return getDeepValue(primaryKey || 'id', d);
+    });
+    var nowCheckedKeys = allRowKeys.filter(function (k) {
+      return selectedRowKeys.includes(k);
+    });
+    return {
+      onChange: function onChange(check) {
+        if (check) {
+          var result = selectedRowKeys.concat([]);
+          result.push.apply(result, _toConsumableArray(allRowKeys.filter(function (k) {
+            return !selectedRowKeys.includes(k);
+          })));
+
+          _onChange(result, dataSource);
+
+          onSelectAll(check, dataSource);
+        } else {
+          _onChange(selectedRowKeys.filter(function (k) {
+            return !allRowKeys.includes(k);
+          }), []);
+
+          onSelectAll(check, []);
+        }
+      },
+      indeterminate: nowCheckedKeys.length !== allRowKeys.length && nowCheckedKeys.length > 0,
+      checked: nowCheckedKeys.length !== 0 && nowCheckedKeys.length === allRowKeys.length
+    };
+  }
+
+  useEffect(function () {
+    if (typeof propsActionRef === 'function' && actionRef.current) {
+      // @ts-ignore
+      propsActionRef(actionRef.current);
+    }
+  }, [propsActionRef]);
+  useEffect(function () {
+    setFilteredColumns(processColumns(propsColumns !== null && propsColumns !== void 0 ? propsColumns : []));
+  }, [propsColumns]); // 绑定 Actions
+
+  useActionType(actionRef, {
+    fullScreen: function fullScreen() {
+      var state = !fullscreenState; // 全屏时需要重新计算header高度
+
+      getHeaderHeight().then(function (height) {
+        setHeaderHeight(height);
+      });
+      setFullscreenState(state);
+      return state;
+    },
+    setColumn: function setColumn(newColumns) {
+      setFilteredColumns(processColumns(newColumns));
+    },
+    setSize: function setSize(mode) {
+      _setSize(mode);
+    },
+    refresh: function refresh(params) {
+      return _request(params);
+    },
+    request: function request(params) {
+      return _request(params);
+    },
+    reset: function reset() {
+      (propsDataFilter === null || propsDataFilter === void 0 ? void 0 : propsDataFilter.onReset) && (propsDataFilter === null || propsDataFilter === void 0 ? void 0 : propsDataFilter.onReset());
+      dataFilterForm.reset();
+      setCurrentPage(1);
+
+      _request(_defineProperty({}, targetPageKey, 1));
+    },
+    clearRowSelection: function clearRowSelection() {
+      rowSelectionHook.setSelectedRowKeys([]);
+      rowSelectionHook.setSelectedRecords([]);
+      onChangeRowSelection && onChangeRowSelection([]);
+    },
+    pageInfo: {
+      total: total,
+      current: currentPage,
+      pageSize: pageSize
+    },
+    resetTableMaxBodyHeight: function resetTableMaxBodyHeight() {
+      getHeaderHeight().then(function (height) {
+        setHeaderHeight(height);
+      });
+    }
+  }); // 将 Actions 绑定到传入的 propsActionRef 中
+
+  if (propsActionRef) {
+    propsActionRef.current = actionRef.current;
+  } // 请求表格数据工具函数
+
+
+  var getData = useRequest(function (params) {
+    return _defineProperty({
+      url: url,
+      method: method
+    }, requestDataKey, params);
+  }, {
+    // 使用 request 方法代替 fetch
+    requestMethod: function requestMethod(params) {
+      return utilResquest(params);
+    },
+    manual: true,
+    onSuccess: function onSuccess(result) {
+      props.onSuccess && props.onSuccess(result);
+      var nextData = result;
+
+      if (formatResult) {
+        if (typeof formatResult === 'function') {
+          nextData = formatResult(result) || {};
+        } else if (_typeof(formatResult) === 'object') {
+          var dataTotal = getDeepValue(formatResult.total, result);
+          nextData = {
+            data: getDeepValue(formatResult.data, result) || [],
+            total: isNaN(dataTotal) ? 0 : Number(dataTotal)
+          };
+        }
+      }
+
+      function onFormatResult(next) {
+        var _next$data;
+
+        props.onFormatResult && props.onFormatResult(next); // 设置 dataSource、total
+
+        setData(next.data || []);
+        setTotal(next.total || ((_next$data = next.data) === null || _next$data === void 0 ? void 0 : _next$data.length));
+        setShowSkeleton(false);
+      }
+
+      if (nextData instanceof Promise) {
+        nextData.then(function (res) {
+          onFormatResult(res);
+        }).catch(function () {
+          onFormatResult({});
+        });
+      } else {
+        onFormatResult(nextData);
+      }
+    },
+    onError: function onError(error) {
+      setShowSkeleton(false);
+
+      if (props.onError) {
+        props.onError(error);
+      } else {
+        Message.error(error.toString());
+      }
+    }
+  }); // 请求函数
+
+  function _request(params) {
+    var _actionRef$current, _actionRef$current$se, _objectSpread2;
+
+    // 请求前需要优先清空列过滤条件
+    (_actionRef$current = actionRef.current) === null || _actionRef$current === void 0 ? void 0 : (_actionRef$current$se = _actionRef$current.setFilterRules) === null || _actionRef$current$se === void 0 ? void 0 : _actionRef$current$se.call(_actionRef$current, {});
+    var sortParams = targetFormatSort(sort); // 筛选区请求参数
+
+    var dataFilterParams = toJS(dataFilterForm.values); // 格式化后的请求参数
+
+    var requestData = formatParams(_objectSpread(_objectSpread({}, !showPagination ? _objectSpread(_objectSpread(_objectSpread({}, dataFilterParams), propsParams), sortParams) : _objectSpread(_objectSpread(_objectSpread((_objectSpread2 = {}, _defineProperty(_objectSpread2, targetPageKey, currentPage), _defineProperty(_objectSpread2, targetPageSizeKey, pageSize), _objectSpread2), dataFilterParams), propsParams), sortParams)), params));
+
+    if (requestData) {
+      // console.log('requestData', requestData);
+      getData.run(requestData);
+    }
+  }
+
+  useEffect(function () {
+    if (requestWhenMount) {
+      _request();
+    }
+  }, []);
+
+  function onSort(dataIndex, order) {
+    var nextSort = _defineProperty({}, dataIndex, order);
+
+    setSort(nextSort);
+
+    _request(targetFormatSort(nextSort));
+  } // 处理 dataFilter 中的 onFilter、onReset
+
+
+  var dataFilter = _objectSpread(_objectSpread({}, propsDataFilter), {}, {
+    onFilter: debounce(function () {
+      (propsDataFilter === null || propsDataFilter === void 0 ? void 0 : propsDataFilter.onFilter) && (propsDataFilter === null || propsDataFilter === void 0 ? void 0 : propsDataFilter.onFilter(_objectSpread({}, toJS(dataFilterForm.values))));
+      setCurrentPage(1);
+
+      _request(_defineProperty({}, targetPageKey, 1));
+    }, filterDebounce),
+    onReset: function onReset() {
+      (propsDataFilter === null || propsDataFilter === void 0 ? void 0 : propsDataFilter.onReset) && (propsDataFilter === null || propsDataFilter === void 0 ? void 0 : propsDataFilter.onReset());
+      dataFilterForm.reset();
+      setCurrentPage(1);
+
+      _request(_defineProperty({}, targetPageKey, 1));
+    }
+  });
+
+  var renderTable = function renderTable() {
+    if (propsColumns) {
+      return /*#__PURE__*/React.createElement("div", {
+        className: classNames('teamix-pro-table-container', className)
+      }, /*#__PURE__*/React.createElement(Layout, {
+        header: header,
+        mainAction: mainAction,
+        quickAction: quickAction,
+        toolBar: toolBar,
+        actionRef: actionRef,
+        columns: propsColumns,
+        dataFilter: dataFilter,
+        dataFilterForm: dataFilterForm,
+        rowSelection: rowSelection
+      }), /*#__PURE__*/React.createElement(Table.StickyLock, _objectSpread({
+        hasBorder: false,
+        dataSource: showSkeleton ? skeletonDataSource : data || props.dataSource,
+        columns: genProColumnToColumn(filteredColumns, showSkeleton, actionRef),
+        loading: !showSkeleton && (getData.loading || props.loading),
+        className: classNames('teamix-pro-table', tableClassName, {
+          'with-row-select': rowSelection
+        }),
+        size: size,
+        onSort: onSort,
+        sort: sort,
+        primaryKey: primaryKey,
+        rowSelection: rowSelection,
+        sortIcons: getTableSortIcons(),
+        fixedHeader: fullscreenState,
+        // 102px 为 底部 50px + 空格10px + 顶部 24px padding
+        maxBodyHeight: "calc(100vh - 84px - ".concat(headerHeight, "px)")
+      }, pickProps(getTableProps(), otherProps))));
+    } else {
+      // 不传 columns 直接返回原始 Table
+      return /*#__PURE__*/React.createElement(Table, _objectSpread({
+        className: cls()
+      }, pickProps(getTableProps(), otherProps)));
+    }
+  };
+
+  var renderFooterAction = function renderFooterAction() {
+    var _footerAction$actions;
+
+    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,
+        rowSelection: rowSelection
+      };
+      return /*#__PURE__*/React.createElement("div", {
+        className: cls('footer-action')
+      }, /*#__PURE__*/React.createElement(ActionGroup, _objectSpread(_objectSpread({}, footerAction), {}, {
+        context: _objectSpread(_objectSpread({}, defaultContext), footerAction.context)
+      })));
+    } else return footerAction;
+  };
+
+  var renderFooter = function renderFooter() {
+    function onChangePagination(currentPage) {
+      var params = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+      setCurrentPage(currentPage);
+
+      _request(_objectSpread(_defineProperty({}, targetPageKey, currentPage), params));
+    }
+
+    function onChangePaginationSize(currentPageSize) {
+      setPageSize(currentPageSize);
+
+      _request(_defineProperty({}, targetPageSizeKey, currentPageSize));
+    }
+
+    function renderRowSelection() {
+      if (rowSelection) {
+        if (showSkeleton) {
+          return /*#__PURE__*/React.createElement("div", {
+            className: cls('footer-left-wrapper')
+          }, /*#__PURE__*/React.createElement(Skeleton.Footer.Operation, null));
+        } else {
+          return /*#__PURE__*/React.createElement("div", {
+            className: cls('footer-left-wrapper')
+          }, rowSelection.mode !== 'single' && /*#__PURE__*/React.createElement(Checkbox, _objectSpread({
+            className: cls("footer-checkbox-".concat(size))
+          }, getCheckAllProps())), footerAction && renderFooterAction(), /*#__PURE__*/React.createElement("span", {
+            className: cls('selected-msg')
+          }, getMessage('selected', {
+            count: selectedCount
+          })));
+        }
+      }
+    }
+
+    if (showPagination || footerAction) {
+      var _parentPosition$offse, _parentPosition$offse2;
+
+      return /*#__PURE__*/React.createElement("div", {
+        className: cls('footer', {
+          'footer-has-rowSelection': rowSelection
+        }),
+        style: {
+          left: "".concat(fullscreenState ? 0 : (_parentPosition$offse = parentPosition === null || parentPosition === void 0 ? void 0 : parentPosition.offsetLeft) !== null && _parentPosition$offse !== void 0 ? _parentPosition$offse : 0, "px"),
+          right: "".concat(fullscreenState ? 0 : (_parentPosition$offse2 = parentPosition === null || parentPosition === void 0 ? void 0 : parentPosition.offsetRight) !== null && _parentPosition$offse2 !== void 0 ? _parentPosition$offse2 : 0, "px")
+        }
+      }, renderRowSelection(), /*#__PURE__*/React.createElement("div", {
+        className: cls('footer-right-wrapper')
+      }, showSkeleton ? /*#__PURE__*/React.createElement(Skeleton.Footer.Pagination, null) : /*#__PURE__*/React.createElement(Pagination, _objectSpread({
+        className: cls('pagination'),
+        onChange: function onChange(number) {
+          return onChangePagination(number);
+        },
+        total: total,
+        totalRender: function totalRender(total) {
+          return getMessage('total', {
+            total: total
+          });
+        },
+        pageSize: pageSize,
+        current: currentPage,
+        shape: "arrow-only",
+        pageSizeList: pageSizeList,
+        pageSizeSelector: total > (props.pageSize || 10) * 2 ? 'dropdown' : false,
+        pageSizePosition: "end",
+        type: total / pageSize <= 2 ? 'simple' : 'normal',
+        onPageSizeChange: function onPageSizeChange(number) {
+          return onChangePaginationSize(number);
+        }
+      }, props.paginationProps))));
+    }
+  };
+
+  return /*#__PURE__*/React.createElement(FullScreen, {
+    visible: fullscreenState,
+    actionRef: actionRef
+  }, /*#__PURE__*/React.createElement("div", {
+    className: cls({
+      '': true,
+      fullscreen: fullscreenState,
+      'footer-suction': footerSuction
+    }),
+    ref: tableRef
+  }, renderTable(), renderFooter()));
+};
+
+export default ProTable;