@ant-design/pro-components 3.0.1-0 → 3.1.0-0

package/es/table/Table.js

@@ -1,12 +1,12 @@
 import _regeneratorRuntime from "@babel/runtime/helpers/esm/regeneratorRuntime";
 import _asyncToGenerator from "@babel/runtime/helpers/esm/asyncToGenerator";
-import _typeof from "@babel/runtime/helpers/esm/typeof";
 import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
-import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
-import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-var _excluded = ["rowKey", "tableClassName", "defaultClassName", "action", "tableColumn", "type", "pagination", "rowSelection", "size", "defaultSize", "tableStyle", "toolbarDom", "hideToolbar", "searchNode", "style", "cardProps", "alertDom", "name", "onSortChange", "onFilterChange", "options", "isLightFilter", "className", "cardBordered", "editableUtils", "getRowKey"],
+import _typeof from "@babel/runtime/helpers/esm/typeof";
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
+var _excluded = ["rowKey", "tableClassName", "defaultClassName", "action", "tableColumn", "type", "pagination", "rowSelection", "size", "defaultSize", "tableStyle", "toolbarDom", "hideToolbar", "searchNode", "style", "cardProps", "alertDom", "name", "onSortChange", "onFilterChange", "options", "isLightFilter", "className", "cardBordered", "editableUtils", "getRowKey", "tableRef"],
   _excluded2 = ["cardBordered", "request", "className", "params", "defaultData", "headerTitle", "postData", "ghost", "pagination", "actionRef", "columns", "toolBarRender", "optionsRender", "onLoad", "onRequestError", "style", "cardProps", "tableStyle", "tableClassName", "options", "search", "name", "onLoadingChange", "rowSelection", "beforeSearchSubmit", "tableAlertRender", "defaultClassName", "formRef", "type", "columnEmptyText", "toolbar", "rowKey", "manualRequest", "polling", "tooltip", "revalidateOnFocus", "searchFormRender"];
 import { ConfigProvider, Table } from 'antd';
 import classNames from 'classnames';
@@ -24,14 +24,277 @@ import Toolbar from "./components/ToolBar";
 import { Container, TableContext } from "./Store/Provide";
 import { useStyle } from "./style";
 import useFetchData from "./useFetchData";
-import { genColumnKey, isBordered, mergePagination, parseDefaultColumnConfig, useActionType } from "./utils";
+import { flattenColumns, genColumnKey, getServerFilterResult, getServerSorterResult, isBordered, mergePagination, parseServerDefaultColumnConfig, useActionType } from "./utils";
 import { columnSort } from "./utils/columnSort";
 import { genProColumnToColumn } from "./utils/genProColumnToColumn";
-import { jsx as _jsx } from "react/jsx-runtime";
 import { createElement as _createElement } from "react";
 import { Fragment as _Fragment } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx } from "react/jsx-runtime";
+function useEditableDataSource(_ref) {
+  var dataSource = _ref.dataSource,
+    editableUtils = _ref.editableUtils,
+    pagination = _ref.pagination,
+    getRowKey = _ref.getRowKey,
+    childrenColumnName = _ref.childrenColumnName;
+  return useMemo(function () {
+    var baseData = Array.isArray(dataSource) ? _toConsumableArray(dataSource) : [];
+    var newLineConfig = editableUtils === null || editableUtils === void 0 ? void 0 : editableUtils.newLineRecord;
+    var defaultValue = newLineConfig === null || newLineConfig === void 0 ? void 0 : newLineConfig.defaultValue;
+    if (!newLineConfig || !defaultValue) {
+      return baseData;
+    }
+    var newLineOptions = newLineConfig.options;
+    var childrenName = childrenColumnName || 'children';
+    if (newLineOptions !== null && newLineOptions !== void 0 && newLineOptions.parentKey) {
+      var _recordKeyToString, _newLineOptions$recor;
+      var newRow = _objectSpread(_objectSpread({}, defaultValue), {}, {
+        map_row_parentKey: (_recordKeyToString = recordKeyToString(newLineOptions.parentKey)) === null || _recordKeyToString === void 0 ? void 0 : _recordKeyToString.toString()
+      });
+      var actionProps = {
+        data: baseData,
+        getRowKey: getRowKey,
+        row: newRow,
+        key: (_newLineOptions$recor = newLineOptions === null || newLineOptions === void 0 ? void 0 : newLineOptions.recordKey) !== null && _newLineOptions$recor !== void 0 ? _newLineOptions$recor : getRowKey(newRow, -1),
+        childrenColumnName: childrenName
+      };
+      return editableRowByKey(actionProps, (newLineOptions === null || newLineOptions === void 0 ? void 0 : newLineOptions.position) === 'top' ? 'top' : 'update');
+    }
+    if ((newLineOptions === null || newLineOptions === void 0 ? void 0 : newLineOptions.position) === 'top') {
+      return [defaultValue].concat(_toConsumableArray(baseData));
+    }
+    var pageConfig = pagination && _typeof(pagination) === 'object' ? pagination : undefined;
+    if (pageConfig !== null && pageConfig !== void 0 && pageConfig.current && pageConfig !== null && pageConfig !== void 0 && pageConfig.pageSize) {
+      if (pageConfig.pageSize > baseData.length) {
+        baseData.push(defaultValue);
+        return baseData;
+      }
+      var insertIndex = pageConfig.current * pageConfig.pageSize - 1;
+      baseData.splice(insertIndex, 0, defaultValue);
+      return baseData;
+    }
+    baseData.push(defaultValue);
+    return baseData;
+  }, [childrenColumnName, dataSource, editableUtils === null || editableUtils === void 0 ? void 0 : editableUtils.newLineRecord, getRowKey, pagination]);
+}
+function useTableCardBodyStyle(_ref2) {
+  var propsCardProps = _ref2.propsCardProps,
+    notNeedCardDom = _ref2.notNeedCardDom,
+    name = _ref2.name,
+    hideToolbar = _ref2.hideToolbar,
+    toolbarDom = _ref2.toolbarDom,
+    pagination = _ref2.pagination;
+  return useMemo(function () {
+    if (propsCardProps === false || notNeedCardDom || !!name) {
+      return {};
+    }
+    if (hideToolbar) {
+      return {
+        padding: 0
+      };
+    }
+    if (toolbarDom) {
+      return {
+        paddingBlockStart: 0
+      };
+    }
+    return {
+      padding: 0
+    };
+  }, [hideToolbar, name, notNeedCardDom, pagination, propsCardProps, toolbarDom]);
+}
+function useTableContent(_ref3) {
+  var editable = _ref3.editable,
+    name = _ref3.name,
+    toolbarDom = _ref3.toolbarDom,
+    alertDom = _ref3.alertDom,
+    tableDom = _ref3.tableDom,
+    dateFormatter = _ref3.dateFormatter,
+    editableOnValuesChange = _ref3.editableOnValuesChange;
+  return useMemo(function () {
+    if (editable && !name) {
+      var _editable$formProps;
+      return /*#__PURE__*/_jsxs(_Fragment, {
+        children: [toolbarDom, alertDom, /*#__PURE__*/_createElement(ProForm, _objectSpread(_objectSpread({}, editable.formProps), {}, {
+          formRef: (_editable$formProps = editable.formProps) === null || _editable$formProps === void 0 ? void 0 : _editable$formProps.formRef,
+          component: false,
+          form: editable.form,
+          onValuesChange: editableOnValuesChange,
+          key: "table",
+          submitter: false,
+          omitNil: false,
+          dateFormatter: dateFormatter
+        }), tableDom)]
+      });
+    }
+    return /*#__PURE__*/_jsxs(_Fragment, {
+      children: [toolbarDom, alertDom, tableDom]
+    });
+  }, [alertDom, dateFormatter, editable, editableOnValuesChange, name, tableDom, toolbarDom]);
+}
+function useRowKey(_ref4) {
+  var rowKey = _ref4.rowKey,
+    name = _ref4.name;
+  return useMemo(function () {
+    if (typeof rowKey === 'function') {
+      return rowKey;
+    }
+    return function (record, index) {
+      var _ref5;
+      if (index === -1) {
+        return record === null || record === void 0 ? void 0 : record[rowKey];
+      }
+      if (name) {
+        return index === null || index === void 0 ? void 0 : index.toString();
+      }
+      return (_ref5 = record === null || record === void 0 ? void 0 : record[rowKey]) !== null && _ref5 !== void 0 ? _ref5 : index === null || index === void 0 ? void 0 : index.toString();
+    };
+  }, [name, rowKey]);
+}
+function useMergedPagination(_ref6) {
+  var propsPagination = _ref6.propsPagination,
+    action = _ref6.action,
+    intl = _ref6.intl,
+    request = _ref6.request,
+    type = _ref6.type;
+  return useMemo(function () {
+    var newPropsPagination = propsPagination === false ? false : _objectSpread({}, propsPagination || {});
+    var pageConfig = _objectSpread(_objectSpread({}, action.pageInfo), {}, {
+      setPageInfo: function setPageInfo(_ref7) {
+        var pageSize = _ref7.pageSize,
+          current = _ref7.current;
+        var pageInfo = action.pageInfo;
+        if (pageSize === pageInfo.pageSize || pageInfo.current === 1) {
+          action.setPageInfo({
+            pageSize: pageSize,
+            current: current
+          });
+          return;
+        }
+        if (request) action.setDataSource([]);
+        action.setPageInfo({
+          pageSize: pageSize,
+          current: type === 'list' ? current : 1
+        });
+      }
+    });
+    if (request && newPropsPagination) {
+      delete newPropsPagination.onChange;
+      delete newPropsPagination.onShowSizeChange;
+    }
+    return mergePagination(newPropsPagination, pageConfig, intl);
+  }, [action, intl, propsPagination, request, type]);
+}
+function useSearchNode(_ref8) {
+  var search = _ref8.search,
+    type = _ref8.type,
+    pagination = _ref8.pagination,
+    beforeSearchSubmit = _ref8.beforeSearchSubmit,
+    actionRef = _ref8.actionRef,
+    columns = _ref8.columns,
+    _onFormSearchSubmit = _ref8.onFormSearchSubmit,
+    ghost = _ref8.ghost,
+    onReset = _ref8.onReset,
+    onSubmit = _ref8.onSubmit,
+    loading = _ref8.loading,
+    manualRequest = _ref8.manualRequest,
+    form = _ref8.form,
+    formRef = _ref8.formRef,
+    cardBordered = _ref8.cardBordered,
+    dateFormatter = _ref8.dateFormatter,
+    searchFormRender = _ref8.searchFormRender,
+    proTableProps = _ref8.proTableProps;
+  return useMemo(function () {
+    var node = search === false && type !== 'form' ? null : /*#__PURE__*/_jsx(FormRender, {
+      pagination: pagination,
+      beforeSearchSubmit: beforeSearchSubmit,
+      action: actionRef,
+      columns: columns,
+      onFormSearchSubmit: function onFormSearchSubmit(values) {
+        _onFormSearchSubmit(values);
+      },
+      ghost: ghost,
+      onReset: onReset,
+      onSubmit: onSubmit,
+      loading: loading,
+      manualRequest: manualRequest,
+      search: search,
+      form: form,
+      formRef: formRef,
+      type: type || 'table',
+      cardBordered: cardBordered,
+      dateFormatter: dateFormatter
+    });
+    if (searchFormRender && node) {
+      return /*#__PURE__*/_jsx(_Fragment, {
+        children: searchFormRender(proTableProps, node)
+      });
+    }
+    return node;
+  }, [actionRef, beforeSearchSubmit, cardBordered, columns, dateFormatter, form, formRef, ghost, loading, manualRequest, _onFormSearchSubmit, onReset, onSubmit, pagination, proTableProps, search, searchFormRender, type]);
+}
+function useToolbarDom(context) {
+  var toolBarRender = context.toolBarRender,
+    headerTitle = context.headerTitle,
+    hideToolbar = context.hideToolbar,
+    selectedRows = context.selectedRows,
+    selectedRowKeys = context.selectedRowKeys,
+    tableColumn = context.tableColumn,
+    tooltip = context.tooltip,
+    toolbar = context.toolbar,
+    isLightFilter = context.isLightFilter,
+    searchNode = context.searchNode,
+    options = context.options,
+    optionsRender = context.optionsRender,
+    actionRef = context.actionRef,
+    setFormSearch = context.setFormSearch,
+    formSearch = context.formSearch;
+  return useMemo(function () {
+    if (toolBarRender === false) {
+      return null;
+    }
+    return /*#__PURE__*/_jsx(Toolbar, {
+      headerTitle: headerTitle,
+      hideToolbar: hideToolbar,
+      selectedRows: selectedRows,
+      selectedRowKeys: selectedRowKeys,
+      tableColumn: tableColumn,
+      tooltip: tooltip,
+      toolbar: toolbar,
+      onFormSearchSubmit: function onFormSearchSubmit(newValues) {
+        setFormSearch(_objectSpread(_objectSpread({}, formSearch || {}), newValues));
+      },
+      searchNode: isLightFilter ? searchNode : null,
+      options: options,
+      optionsRender: optionsRender,
+      actionRef: actionRef,
+      toolBarRender: toolBarRender
+    });
+  }, [actionRef, formSearch, headerTitle, hideToolbar, isLightFilter, options, optionsRender, searchNode, selectedRowKeys, selectedRows, setFormSearch, tableColumn, toolBarRender, tooltip, toolbar]);
+}
+function useAlertDom(_ref9) {
+  var propsRowSelection = _ref9.propsRowSelection,
+    selectedRowKeys = _ref9.selectedRowKeys,
+    selectedRows = _ref9.selectedRows,
+    onCleanSelected = _ref9.onCleanSelected,
+    tableAlertOptionRender = _ref9.tableAlertOptionRender,
+    tableAlertRender = _ref9.tableAlertRender;
+  return useMemo(function () {
+    if (propsRowSelection === false) {
+      return null;
+    }
+    return /*#__PURE__*/_jsx(Alert, {
+      selectedRowKeys: selectedRowKeys,
+      selectedRows: selectedRows,
+      onCleanSelected: onCleanSelected,
+      alertOptionRender: tableAlertOptionRender,
+      alertInfoRender: tableAlertRender,
+      alwaysShowAlert: propsRowSelection === null || propsRowSelection === void 0 ? void 0 : propsRowSelection.alwaysShowAlert
+    });
+  }, [onCleanSelected, propsRowSelection, selectedRowKeys, selectedRows, tableAlertOptionRender, tableAlertRender]);
+}
 function TableRender(props) {
+  var _props$expandable;
   var rowKey = props.rowKey,
     tableClassName = props.tableClassName,
     defaultClassName = props.defaultClassName,
@@ -58,8 +321,16 @@ function TableRender(props) {
     cardBordered = props.cardBordered,
     editableUtils = props.editableUtils,
     getRowKey = props.getRowKey,
+    tableRef = props.tableRef,
     rest = _objectWithoutProperties(props, _excluded);
   var counter = useContext(TableContext);
+  var mergedDataSource = useEditableDataSource({
+    dataSource: action.dataSource,
+    editableUtils: editableUtils,
+    pagination: pagination,
+    getRowKey: getRowKey,
+    childrenColumnName: ((_props$expandable = props.expandable) === null || _props$expandable === void 0 ? void 0 : _props$expandable.childrenColumnName) || 'children'
+  });
 
   /** 需要遍历一下，不然不支持嵌套表格 */
   var columns = useMemo(function () {
@@ -82,44 +353,13 @@ function TableRender(props) {
     return loopFilter(tableColumns);
   }, [counter.columnsMap, tableColumns]);
 
-  /**
-   * 如果是分页的新增，总是加到最后一行
-   *
-   * @returns
-   */
-  var editableDataSource = function editableDataSource(dataSource) {
-    var _ref = editableUtils.newLineRecord || {},
-      newLineOptions = _ref.options,
-      row = _ref.defaultValue;
-    var isNewLineRecordAtTop = (newLineOptions === null || newLineOptions === void 0 ? void 0 : newLineOptions.position) === 'top';
-    if (newLineOptions !== null && newLineOptions !== void 0 && newLineOptions.parentKey) {
-      var _recordKeyToString, _props$expandable;
-      var actionProps = {
-        data: dataSource,
-        getRowKey: getRowKey,
-        row: _objectSpread(_objectSpread({}, row), {}, {
-          map_row_parentKey: (_recordKeyToString = recordKeyToString(newLineOptions.parentKey)) === null || _recordKeyToString === void 0 ? void 0 : _recordKeyToString.toString()
-        }),
-        key: newLineOptions === null || newLineOptions === void 0 ? void 0 : newLineOptions.recordKey,
-        childrenColumnName: ((_props$expandable = props.expandable) === null || _props$expandable === void 0 ? void 0 : _props$expandable.childrenColumnName) || 'children'
-      };
-      return editableRowByKey(actionProps, isNewLineRecordAtTop ? 'top' : 'update');
-    }
-    if (isNewLineRecordAtTop) {
-      return [row].concat(_toConsumableArray(action.dataSource));
-    }
-    // 如果有分页的功能，我们加到这一页的末尾
-    if (pagination && pagination !== null && pagination !== void 0 && pagination.current && pagination !== null && pagination !== void 0 && pagination.pageSize) {
-      var newDataSource = _toConsumableArray(action.dataSource);
-      if ((pagination === null || pagination === void 0 ? void 0 : pagination.pageSize) > newDataSource.length) {
-        newDataSource.push(row);
-        return newDataSource;
-      }
-      newDataSource.splice((pagination === null || pagination === void 0 ? void 0 : pagination.current) * (pagination === null || pagination === void 0 ? void 0 : pagination.pageSize) - 1, 0, row);
-      return newDataSource;
-    }
-    return [].concat(_toConsumableArray(action.dataSource), [row]);
-  };
+  // 需要进行筛选的列
+  var useFilterColumns = useMemo(function () {
+    var _columns = flattenColumns(columns);
+    return _columns.filter(function (column) {
+      return !!column.filters;
+    });
+  }, [columns]);
   var getTableProps = function getTableProps() {
     return _objectSpread(_objectSpread({}, rest), {}, {
       size: size,
@@ -128,27 +368,19 @@ function TableRender(props) {
       style: tableStyle,
       columns: columns,
       loading: action.loading,
-      dataSource: editableUtils.newLineRecord ? editableDataSource(action.dataSource) : action.dataSource,
+      dataSource: mergedDataSource,
       pagination: pagination,
       onChange: function onChange(changePagination, filters, sorter, extra) {
         var _rest$onChange;
         (_rest$onChange = rest.onChange) === null || _rest$onChange === void 0 || _rest$onChange.call(rest, changePagination, filters, sorter, extra);
-        onFilterChange(omitUndefined(filters));
-
-        // 制造筛选的数据
-        // 制造一个排序的数据
-        if (Array.isArray(sorter)) {
-          var _omitUndefined;
-          var data = sorter.reduce(function (pre, value) {
-            return _objectSpread(_objectSpread({}, pre), {}, _defineProperty({}, "".concat(value.field), value.order));
-          }, {});
-          onSortChange((_omitUndefined = omitUndefined(data)) !== null && _omitUndefined !== void 0 ? _omitUndefined : {});
-        } else {
-          var _sorter$column, _omitUndefined2;
-          var sorterOfColumn = (_sorter$column = sorter.column) === null || _sorter$column === void 0 ? void 0 : _sorter$column.sorter;
-          var isSortByField = (sorterOfColumn === null || sorterOfColumn === void 0 ? void 0 : sorterOfColumn.toString()) === sorterOfColumn;
-          onSortChange((_omitUndefined2 = omitUndefined(_defineProperty({}, "".concat(isSortByField ? sorterOfColumn : sorter.field), sorter.order))) !== null && _omitUndefined2 !== void 0 ? _omitUndefined2 : {});
-        }
+
+        // 传递服务端筛选数据
+        var serverFilter = getServerFilterResult(filters, useFilterColumns);
+        onFilterChange(omitUndefined(serverFilter));
+
+        // 传递服务端排序数据
+        var serverSorter = getServerSorterResult(sorter);
+        onSortChange(omitUndefined(serverSorter));
       }
     });
   };
@@ -171,7 +403,8 @@ function TableRender(props) {
       rowProps: undefined
     },
     children: /*#__PURE__*/_jsx(Table, _objectSpread(_objectSpread({}, getTableProps()), {}, {
-      rowKey: rowKey
+      rowKey: rowKey,
+      ref: tableRef
     }))
   });
 
@@ -179,55 +412,23 @@ function TableRender(props) {
   var tableDom = props.tableViewRender ? props.tableViewRender(_objectSpread(_objectSpread({}, getTableProps()), {}, {
     rowSelection: rowSelection !== false ? rowSelection : undefined
   }), baseTableDom) : baseTableDom;
-
-  /**
-   * 这段代码使用了 useMemo 进行了性能优化，根据 props.editable 和 props.name 的不同情况，渲染不同的页面组件。
-   * 当 props.editable 为 true 并且 props.name 不存在时，渲染一个带有表单和工具栏的页面组件，否则只渲染工具栏和表格组件。
-   * renderContent 函数会在 alertDom、props.loading、props.editable、tableDom、toolbarDom 发生变化时重新执行。
-   * */
-  var tableContentDom = useMemo(function () {
-    if (props.editable && !props.name) {
-      var _props$editable, _props$editable2, _props$editable3;
-      return /*#__PURE__*/_jsxs(_Fragment, {
-        children: [toolbarDom, alertDom, /*#__PURE__*/_createElement(ProForm, _objectSpread(_objectSpread({}, (_props$editable = props.editable) === null || _props$editable === void 0 ? void 0 : _props$editable.formProps), {}, {
-          formRef: (_props$editable2 = props.editable) === null || _props$editable2 === void 0 || (_props$editable2 = _props$editable2.formProps) === null || _props$editable2 === void 0 ? void 0 : _props$editable2.formRef,
-          component: false,
-          form: (_props$editable3 = props.editable) === null || _props$editable3 === void 0 ? void 0 : _props$editable3.form,
-          onValuesChange: editableUtils.onValuesChange,
-          key: "table",
-          submitter: false,
-          omitNil: false,
-          dateFormatter: props.dateFormatter
-        }), tableDom)]
-      });
-    }
-    return /*#__PURE__*/_jsxs(_Fragment, {
-      children: [toolbarDom, alertDom, tableDom]
-    });
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [alertDom, props.loading, !!props.editable, tableDom, toolbarDom]);
-  var cardBodyStyle = useMemo(function () {
-    if (propsCardProps === false || notNeedCardDom === true || !!props.name) return {};
-    if (hideToolbar) {
-      return {
-        padding: 0
-      };
-    }
-    if (toolbarDom) {
-      return {
-        paddingBlockStart: 0
-      };
-    }
-    if (toolbarDom && pagination === false) {
-      return {
-        paddingBlockStart: 0
-      };
-    }
-    // if (!toolbarDom)
-    return {
-      padding: 0
-    };
-  }, [notNeedCardDom, pagination, props.name, propsCardProps, toolbarDom, hideToolbar]);
+  var tableContentDom = useTableContent({
+    editable: props.editable,
+    name: props.name,
+    toolbarDom: toolbarDom,
+    alertDom: alertDom,
+    tableDom: tableDom,
+    dateFormatter: props.dateFormatter,
+    editableOnValuesChange: editableUtils.onValuesChange
+  });
+  var cardBodyStyle = useTableCardBodyStyle({
+    propsCardProps: propsCardProps,
+    notNeedCardDom: notNeedCardDom,
+    name: props.name,
+    hideToolbar: hideToolbar,
+    toolbarDom: toolbarDom,
+    pagination: pagination
+  });
 
   /** Table 区域的 dom，为了方便 render */
   var tableAreaDom =
@@ -235,7 +436,9 @@ function TableRender(props) {
   propsCardProps === false || notNeedCardDom === true || !!props.name ? tableContentDom : /*#__PURE__*/_jsx(ProCard, _objectSpread(_objectSpread({
     ghost: props.ghost,
     variant: isBordered('table', cardBordered) ? 'outlined' : 'borderless',
-    bodyStyle: cardBodyStyle
+    styles: {
+      body: cardBodyStyle
+    }
   }, propsCardProps), {}, {
     children: tableContentDom
   }));
@@ -272,7 +475,7 @@ function TableRender(props) {
 }
 var emptyObj = {};
 var ProTable = function ProTable(props) {
-  var _props$expandable2;
+  var _props$expandable2, _counter$rootDomRef;
   var cardBordered = props.cardBordered,
     request = props.request,
     propsClassName = props.className,
@@ -324,6 +527,8 @@ var ProTable = function ProTable(props) {
 
   /** 通用的来操作子节点的工具类 */
   var actionRef = useRef();
+  // antd Table 实例 ref（仅用于转发 scrollTo 能力）
+  var antTableRef = useRef(null);
   var defaultFormRef = useRef();
   var formRef = propRef || defaultFormRef;
   useImperativeHandle(propsActionRef, function () {
@@ -348,54 +553,25 @@ var ProTable = function ProTable(props) {
     _useMountMergeState4 = _slicedToArray(_useMountMergeState3, 2),
     formSearch = _useMountMergeState4[0],
     setFormSearch = _useMountMergeState4[1];
-  var _useMountMergeState5 = useMountMergeState({}),
+  var _useMemo = useMemo(function () {
+      var _parseServerDefaultCo = parseServerDefaultColumnConfig(flattenColumns(propsColumns)),
+        sort = _parseServerDefaultCo.sort,
+        filter = _parseServerDefaultCo.filter;
+      return {
+        defaultProFilter: filter,
+        defaultProSort: sort
+      };
+    }, [propsColumns]),
+    defaultProFilter = _useMemo.defaultProFilter,
+    defaultProSort = _useMemo.defaultProSort;
+  var _useMountMergeState5 = useMountMergeState(defaultProFilter),
     _useMountMergeState6 = _slicedToArray(_useMountMergeState5, 2),
     proFilter = _useMountMergeState6[0],
     setProFilter = _useMountMergeState6[1];
-  var _useMountMergeState7 = useMountMergeState({}),
+  var _useMountMergeState7 = useMountMergeState(defaultProSort),
     _useMountMergeState8 = _slicedToArray(_useMountMergeState7, 2),
     proSort = _useMountMergeState8[0],
     setProSort = _useMountMergeState8[1];
-
-  // 平铺所有columns, 用于判断是用的是本地筛选/排序
-  var loopColumns = useCallback(function (data) {
-    var _columns = [];
-    for (var i = 0; i < data.length; i++) {
-      var _curItem = data[i];
-      if (_curItem.children) {
-        loopColumns(_curItem.children);
-      } else {
-        _columns.push(_curItem);
-      }
-    }
-    return _columns;
-  }, []);
-
-  /** 如果所有列中的 filters = true | undefined 说明是用的是本地筛选 任何一列配置 filters=false，就能绕过这个判断 */
-  var useLocaleFilter = useMemo(function () {
-    var _columns = loopColumns(propsColumns);
-    return _columns === null || _columns === void 0 ? void 0 : _columns.every(function (column) {
-      return !!column.filters && !!column.onFilter || column.filters === undefined && column.onFilter === undefined;
-    });
-  }, [loopColumns, propsColumns]);
-
-  /** 如果所有列中的 sorter != true 说明是用的是本地排序 任何一列配置 sorter=true，就能绕过这个判断 */
-  var useLocaleSorter = useMemo(function () {
-    var _columns = loopColumns(propsColumns);
-    return _columns === null || _columns === void 0 ? void 0 : _columns.every(function (column) {
-      return column.sorter !== true;
-    });
-  }, [loopColumns, propsColumns]);
-
-  /** 设置默认的服務端排序和筛选值 */
-  useEffect(function () {
-    var _parseDefaultColumnCo = parseDefaultColumnConfig(propsColumns),
-      sort = _parseDefaultColumnCo.sort,
-      filter = _parseDefaultColumnCo.filter;
-    if (!useLocaleFilter) setProFilter(filter);
-    if (!useLocaleSorter) setProSort(sort);
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
   var intl = useIntl();
 
   /** 需要初始化 不然默认可能报错 这里取了 defaultCurrent 和 current 为了保证不会重复刷新 */
@@ -411,7 +587,7 @@ var ProTable = function ProTable(props) {
   var fetchData = useMemo(function () {
     if (!request) return undefined;
     return /*#__PURE__*/function () {
-      var _ref2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee(pageParams) {
+      var _ref10 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee(pageParams) {
         var actionParams, response;
         return _regeneratorRuntime().wrap(function _callee$(_context) {
           while (1) switch (_context.prev = _context.next) {
@@ -430,7 +606,7 @@ var ProTable = function ProTable(props) {
         }, _callee);
       }));
       return function (_x) {
-        return _ref2.apply(this, arguments);
+        return _ref10.apply(this, arguments);
       };
     }();
   }, [formSearch, params, proFilter, proSort, request]);
@@ -483,22 +659,10 @@ var ProTable = function ProTable(props) {
   var preserveRecordsRef = React.useRef(new Map());
 
   // ============================ RowKey ============================
-  var getRowKey = React.useMemo(function () {
-    if (typeof rowKey === 'function') {
-      return rowKey;
-    }
-    return function (record, index) {
-      var _ref3;
-      if (index === -1) {
-        return record === null || record === void 0 ? void 0 : record[rowKey];
-      }
-      // 如果 props 中有name 的话，用index 来做行号，这样方便转化为 index
-      if (props.name) {
-        return index === null || index === void 0 ? void 0 : index.toString();
-      }
-      return (_ref3 = record === null || record === void 0 ? void 0 : record[rowKey]) !== null && _ref3 !== void 0 ? _ref3 : index === null || index === void 0 ? void 0 : index.toString();
-    };
-  }, [props.name, rowKey]);
+  var getRowKey = useRowKey({
+    rowKey: rowKey,
+    name: props.name
+  });
   useMemo(function () {
     var _action$dataSource;
     if ((_action$dataSource = action.dataSource) !== null && _action$dataSource !== void 0 && _action$dataSource.length) {
@@ -513,40 +677,13 @@ var ProTable = function ProTable(props) {
   }, [action.dataSource, getRowKey]);
 
   /** 页面编辑的计算 */
-  var pagination = useMemo(function () {
-    var newPropsPagination = propsPagination === false ? false : _objectSpread({}, propsPagination);
-    var pageConfig = _objectSpread(_objectSpread({}, action.pageInfo), {}, {
-      setPageInfo: function setPageInfo(_ref4) {
-        var pageSize = _ref4.pageSize,
-          current = _ref4.current;
-        var pageInfo = action.pageInfo;
-
-        // pageSize 发生改变，并且你不是在第一页，切回到第一页
-        // 这样可以防止出现 跳转到一个空的数据页的问题
-        if (pageSize === pageInfo.pageSize || pageInfo.current === 1) {
-          action.setPageInfo({
-            pageSize: pageSize,
-            current: current
-          });
-          return;
-        }
-
-        // 通过request的时候清空数据，然后刷新不然可能会导致 pageSize 没有数据多
-        if (request) action.setDataSource([]);
-        action.setPageInfo({
-          pageSize: pageSize,
-          // 目前只有 List 和 Table 支持分页, List 有分页的时候 还是使用之前的当前页码
-          current: type === 'list' ? current : 1
-        });
-      }
-    });
-    if (request && newPropsPagination) {
-      delete newPropsPagination.onChange;
-      delete newPropsPagination.onShowSizeChange;
-    }
-    return mergePagination(newPropsPagination, pageConfig, intl);
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [propsPagination, action, intl]);
+  var pagination = useMergedPagination({
+    propsPagination: propsPagination,
+    action: action,
+    intl: intl,
+    request: request,
+    type: type
+  });
   useDeepCompareEffect(function () {
     var _action$pageInfo;
     // request 存在且params不为空，且已经请求过数据才需要设置。
@@ -579,8 +716,8 @@ var ProTable = function ProTable(props) {
     childrenColumnName: ((_props$expandable2 = props.expandable) === null || _props$expandable2 === void 0 ? void 0 : _props$expandable2.childrenColumnName) || 'children',
     dataSource: action.dataSource || [],
     setDataSource: function setDataSource(data) {
-      var _props$editable4, _props$editable4$onVa;
-      (_props$editable4 = props.editable) === null || _props$editable4 === void 0 || (_props$editable4$onVa = _props$editable4.onValuesChange) === null || _props$editable4$onVa === void 0 || _props$editable4$onVa.call(_props$editable4, undefined, data);
+      var _props$editable, _props$editable$onVal;
+      (_props$editable = props.editable) === null || _props$editable === void 0 || (_props$editable$onVal = _props$editable.onValuesChange) === null || _props$editable$onVal === void 0 || _props$editable$onVal.call(_props$editable, undefined, data);
       action.setDataSource(data);
     }
   }));
@@ -591,16 +728,22 @@ var ProTable = function ProTable(props) {
 
   /** 绑定 action */
   useActionType(actionRef, action, {
+    nativeElement: ((_counter$rootDomRef = counter.rootDomRef) === null || _counter$rootDomRef === void 0 ? void 0 : _counter$rootDomRef.current) || undefined,
+    focus: function focus() {
+      var _counter$rootDomRef2;
+      // 聚焦到表格根元素
+      (_counter$rootDomRef2 = counter.rootDomRef) === null || _counter$rootDomRef2 === void 0 || (_counter$rootDomRef2 = _counter$rootDomRef2.current) === null || _counter$rootDomRef2 === void 0 || _counter$rootDomRef2.focus();
+    },
     fullScreen: function fullScreen() {
-      var _counter$rootDomRef;
-      if (!((_counter$rootDomRef = counter.rootDomRef) !== null && _counter$rootDomRef !== void 0 && _counter$rootDomRef.current) || !document.fullscreenEnabled) {
+      var _counter$rootDomRef3;
+      if (!((_counter$rootDomRef3 = counter.rootDomRef) !== null && _counter$rootDomRef3 !== void 0 && _counter$rootDomRef3.current) || !document.fullscreenEnabled) {
         return;
       }
       if (document.fullscreenElement) {
         document.exitFullscreen();
       } else {
-        var _counter$rootDomRef2;
-        (_counter$rootDomRef2 = counter.rootDomRef) === null || _counter$rootDomRef2 === void 0 || _counter$rootDomRef2.current.requestFullscreen();
+        var _counter$rootDomRef4;
+        (_counter$rootDomRef4 = counter.rootDomRef) === null || _counter$rootDomRef4 === void 0 || _counter$rootDomRef4.current.requestFullscreen();
       }
     },
     onCleanSelected: function onCleanSelected() {
@@ -611,13 +754,6 @@ var ProTable = function ProTable(props) {
       var _formRef$current;
       // 清空选中行
       _onCleanSelected();
-      var _parseDefaultColumnCo2 = parseDefaultColumnConfig(propsColumns),
-        sort = _parseDefaultColumnCo2.sort,
-        filter = _parseDefaultColumnCo2.filter;
-      // 清空筛选
-      setProFilter(filter);
-      // 清空排序
-      setProSort(sort);
 
       // 清空 toolbar 搜索
       counter.setKeyWords(undefined);
@@ -626,11 +762,19 @@ var ProTable = function ProTable(props) {
         current: 1
       });
 
+      // 重置绑定筛选值
+      setProFilter(defaultProFilter);
+      // 重置绑定排序值
+      setProSort(defaultProSort);
+
       // 重置表单
       formRef === null || formRef === void 0 || (_formRef$current = formRef.current) === null || _formRef$current === void 0 || _formRef$current.resetFields();
-      setFormSearch({});
     },
-    editableUtils: editableUtils
+    editableUtils: editableUtils,
+    scrollTo: function scrollTo(arg) {
+      var _current, _current$scrollTo;
+      return antTableRef === null || antTableRef === void 0 || (_current = antTableRef.current) === null || _current === void 0 || (_current$scrollTo = _current.scrollTo) === null || _current$scrollTo === void 0 ? void 0 : _current$scrollTo.call(_current, arg);
+    }
   });
 
   /** 同步 action */
@@ -670,11 +814,11 @@ var ProTable = function ProTable(props) {
   /** 同步 Pagination，支持受控的 页码 和 pageSize */
   useDeepCompareEffect(function () {
     var pageInfo = action.pageInfo;
-    var _ref5 = propsPagination || {},
-      _ref5$current = _ref5.current,
-      current = _ref5$current === void 0 ? pageInfo === null || pageInfo === void 0 ? void 0 : pageInfo.current : _ref5$current,
-      _ref5$pageSize = _ref5.pageSize,
-      pageSize = _ref5$pageSize === void 0 ? pageInfo === null || pageInfo === void 0 ? void 0 : pageInfo.pageSize : _ref5$pageSize;
+    var _ref11 = propsPagination || {},
+      _ref11$current = _ref11.current,
+      current = _ref11$current === void 0 ? pageInfo === null || pageInfo === void 0 ? void 0 : pageInfo.current : _ref11$current,
+      _ref11$pageSize = _ref11.pageSize,
+      pageSize = _ref11$pageSize === void 0 ? pageInfo === null || pageInfo === void 0 ? void 0 : pageInfo.pageSize : _ref11$pageSize;
     if (propsPagination && (current || pageSize) && (pageSize !== (pageInfo === null || pageInfo === void 0 ? void 0 : pageInfo.pageSize) || current !== (pageInfo === null || pageInfo === void 0 ? void 0 : pageInfo.current))) {
       action.setPageInfo({
         pageSize: pageSize || pageInfo.pageSize,
@@ -697,13 +841,13 @@ var ProTable = function ProTable(props) {
 
   /** 是不是 LightFilter, LightFilter 有一些特殊的处理 */
   var isLightFilter = search !== false && (search === null || search === void 0 ? void 0 : search.filterType) === 'light';
-  var _onFormSearchSubmit = useCallback(function (values) {
+  var onFormSearchSubmit = useCallback(function (values) {
     // 判断search.onSearch返回值决定是否更新formSearch
     if (options && options.search) {
       var _options$search, _options$search$onSea;
-      var _ref6 = options.search === true ? {} : options.search,
-        _ref6$name = _ref6.name,
-        name = _ref6$name === void 0 ? 'keyword' : _ref6$name;
+      var _ref12 = options.search === true ? {} : options.search,
+        _ref12$name = _ref12.name,
+        name = _ref12$name === void 0 ? 'keyword' : _ref12$name;
 
       /** 如果传入的 onSearch 返回值为 false，则不要把options.search.name对应的值set到formSearch */
       var success = (_options$search = options.search) === null || _options$search === void 0 || (_options$search$onSea = _options$search.onSearch) === null || _options$search$onSea === void 0 ? void 0 : _options$search$onSea.call(_options$search, counter.keyWords);
@@ -721,35 +865,26 @@ var ProTable = function ProTable(props) {
     }
     return action.loading;
   }, [action.loading]);
-  var searchNode = useMemo(function () {
-    var node = search === false && type !== 'form' ? null : /*#__PURE__*/_jsx(FormRender, {
-      pagination: pagination,
-      beforeSearchSubmit: beforeSearchSubmit,
-      action: actionRef,
-      columns: propsColumns,
-      onFormSearchSubmit: function onFormSearchSubmit(values) {
-        _onFormSearchSubmit(values);
-      },
-      ghost: ghost,
-      onReset: props.onReset,
-      onSubmit: props.onSubmit,
-      loading: !!loading,
-      manualRequest: manualRequest,
-      search: search,
-      form: props.form,
-      formRef: formRef,
-      type: props.type || 'table',
-      cardBordered: props.cardBordered,
-      dateFormatter: props.dateFormatter
-    });
-    if (searchFormRender && node) {
-      return /*#__PURE__*/_jsx(_Fragment, {
-        children: searchFormRender(props, node)
-      });
-    } else {
-      return node;
-    }
-  }, [beforeSearchSubmit, formRef, ghost, loading, manualRequest, _onFormSearchSubmit, pagination, props, propsColumns, search, searchFormRender, type]);
+  var searchNode = useSearchNode({
+    search: search,
+    type: type,
+    pagination: pagination,
+    beforeSearchSubmit: beforeSearchSubmit,
+    actionRef: actionRef,
+    columns: propsColumns,
+    onFormSearchSubmit: onFormSearchSubmit,
+    ghost: ghost,
+    onReset: props.onReset,
+    onSubmit: props.onSubmit,
+    loading: !!loading,
+    manualRequest: manualRequest,
+    form: props.form,
+    formRef: formRef,
+    cardBordered: props.cardBordered,
+    dateFormatter: props.dateFormatter,
+    searchFormRender: searchFormRender,
+    proTableProps: props
+  });
   var selectedRows = useMemo(function () {
     return selectedRowKeys === null || selectedRowKeys === void 0 ? void 0 : selectedRowKeys.map(function (key) {
       var _preserveRecordsRef$c;
@@ -759,9 +894,8 @@ var ProTable = function ProTable(props) {
   var hideToolbar = useMemo(function () {
     return options === false && !headerTitle && !toolBarRender && !toolbar && !isLightFilter;
   }, [options, headerTitle, toolBarRender, toolbar, isLightFilter]);
-
-  /** 内置的工具栏 */
-  var toolbarDom = toolBarRender === false ? null : /*#__PURE__*/_jsx(Toolbar, {
+  var toolbarDom = useToolbarDom({
+    toolBarRender: toolBarRender,
     headerTitle: headerTitle,
     hideToolbar: hideToolbar,
     selectedRows: selectedRows,
@@ -769,25 +903,22 @@ var ProTable = function ProTable(props) {
     tableColumn: tableColumn,
     tooltip: tooltip,
     toolbar: toolbar,
-    onFormSearchSubmit: function onFormSearchSubmit(newValues) {
-      setFormSearch(_objectSpread(_objectSpread({}, formSearch), newValues));
-    },
-    searchNode: isLightFilter ? searchNode : null,
+    isLightFilter: isLightFilter,
+    searchNode: searchNode,
     options: options,
     optionsRender: optionsRender,
     actionRef: actionRef,
-    toolBarRender: toolBarRender
+    setFormSearch: setFormSearch,
+    formSearch: formSearch
   });
-
-  /** 内置的多选操作栏 */
-  var alertDom = propsRowSelection !== false ? /*#__PURE__*/_jsx(Alert, {
+  var alertDom = useAlertDom({
+    propsRowSelection: propsRowSelection,
     selectedRowKeys: selectedRowKeys,
     selectedRows: selectedRows,
     onCleanSelected: _onCleanSelected,
-    alertOptionRender: rest.tableAlertOptionRender,
-    alertInfoRender: tableAlertRender,
-    alwaysShowAlert: propsRowSelection === null || propsRowSelection === void 0 ? void 0 : propsRowSelection.alwaysShowAlert
-  }) : null;
+    tableAlertOptionRender: rest.tableAlertOptionRender,
+    tableAlertRender: tableAlertRender
+  });
   return wrapSSR( /*#__PURE__*/_jsx(TableRender, _objectSpread(_objectSpread({}, props), {}, {
     name: isEditorTable,
     defaultClassName: defaultClassName,
@@ -804,15 +935,16 @@ var ProTable = function ProTable(props) {
     toolbarDom: toolbarDom,
     hideToolbar: hideToolbar,
     onSortChange: function onSortChange(sortConfig) {
-      if (useLocaleSorter || sortConfig === proSort) return;
-      setProSort(sortConfig);
+      if (isEqual(sortConfig, proSort)) return;
+      setProSort(sortConfig !== null && sortConfig !== void 0 ? sortConfig : {});
     },
     onFilterChange: function onFilterChange(filterConfig) {
-      if (useLocaleFilter || filterConfig === proFilter) return;
-      setProFilter(filterConfig);
+      if (isEqual(filterConfig, proFilter)) return;
+      setProFilter(filterConfig !== null && filterConfig !== void 0 ? filterConfig : {});
     },
     editableUtils: editableUtils,
-    getRowKey: getRowKey
+    getRowKey: getRowKey,
+    tableRef: antTableRef
   })));
 };