fix(table): if columns or data changed, status reset (#1004)

src/components/table/FilterPopover.tsx

@@ -1,5 +1,5 @@
 /* eslint-disable react/jsx-wrap-multilines */
-import React, { useState, useContext } from 'react';
+import React, { useState, useContext, useEffect } from 'react';
 import { isObject } from 'lodash';
 import Button from '../button';
 import Popover from '../popover';
@@ -22,13 +22,24 @@ const FilterPopover = (props: FilterPopoverProps): React.ReactElement => {
   const [selectFilterKeys, setSelectFilterKeys] = useState<string[]>(values);
   const [visible, setVisible] = useState<boolean>(false);
   const { tableRef } = useContext(TableContext);
+
+  useEffect(() => {
+    setSelectFilterKeys(values);
+  }, [values]);
+
   return (
     <Popover
       // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
       getTooltipContainer={(triggerNode) => tableRef?.current || triggerNode.parentElement!}
       arrowContent={null}
       visible={visible}
-      onVisibleChange={setVisible}
+      onVisibleChange={(_visible: boolean) => {
+        setVisible(_visible);
+        if(_visible === false) {
+          setSearchValue('');
+          setSelectFilterKeys(values);
+        }
+      }}
       placement="bottomLeft"
       trigger="click"
       overlayClassName={`${prefixCls}-filter-popover`}

src/components/table/Table.tsx

@@ -60,19 +60,15 @@ function Table <RecordType>(
     activePaginationedState,
     paginationedData,
     PaginationComponent,
-    resetPagination,
   ] = usePagination(filtedData, pagination, showIndex);
 
   const [transformSelectionPipeline, selectedRowKeys] = useSelection(paginationedData, rowSelection, {
     rowKey,
   });
   const [transformEllipsisTooltipPipeline] = useEllipsisTooltip();
 
-  const onTriggerStateUpdate = (reset = false, paginationState = activePaginationedState): void => {
-    if (reset) {
-      resetPagination();
-    }
-    // 通过 activePaginationedState 拿不到最新的状态
+  const onTriggerStateUpdate = (paginationState = activePaginationedState): void => {
+    // 分页状态更新的时候，通过 activePaginationedState 拿不到最新的状态。
     onChange?.(paginationState, activeSorterStates, activeFilterStates);
   };
 

src/components/table/Title.tsx

@@ -65,7 +65,7 @@ const Title = <RecordType,>(props: TitleProps<RecordType>): React.ReactElement =
     const { filteredKeys, filters } = filterState;
     const handleFilterPopoverClick = (newFilteredKeys: string[]): void => {
       updateFilterStates({ ...filterState, filteredKeys: newFilteredKeys });
-      onTriggerStateUpdate(true);
+      onTriggerStateUpdate();
     };
 
     return (

src/components/table/__test__/TableFilter.test.js

@@ -115,7 +115,7 @@ describe('Testing Table Filter', () => {
 
   test('object data type', () => {
     const onClick = jest.fn();
-    const { getByText, getAllByRole } = render(
+    const { getByText, getAllByRole, container } = render(
       <FilterPopover 
         prefixCls='gio-table'
         values={[]}
@@ -129,6 +129,14 @@ describe('Testing Table Filter', () => {
     fireEvent.click(getAllByRole('option')[0]);
     fireEvent.click(getByText('确 定'));
     expect(onClick).toBeCalledWith(['1']);
+
+    fireEvent.click(getByText('trigger'));
+    fireEvent.click(getAllByRole('option')[0]);
+    // 不点确定 并关掉 Filter
+    fireEvent.click(getByText('trigger'));
+    // 再打开
+    fireEvent.click(getByText('trigger'));
+    expect(container.getElementsByClassName('gio-checkbox-checked')).toBeTruthy();
   });
 
   it('should re-collect states, after columns update', () => {

src/components/table/hook/usePagination.tsx

@@ -14,28 +14,20 @@ const usePagination = <RecordType,>(
   (columns: ColumnsType<RecordType>) => ColumnsType<RecordType>,
   PaginationState,
   RecordType[],
-  (props: { onTriggerStateUpdate: () => void }) => JSX.Element | null,
-  () => void
+  (props: { onTriggerStateUpdate: (paginationState?: PaginationState) => void }) => JSX.Element | null,
+  // () => void
 ] => {
-  const { current, pageSize, total, onChange, onShowSizeChange, ...rest } = pagination || {};
-  const [controlledCurrent, setControlledCurrent] = useControlledState<number>(current, 1);
-  const [controlledPageSize, setControlledPageSize] = useControlledState<number>(pageSize, 10);
+  const { current, pageSize, total, onChange, onShowSizeChange, defaultCurrent = 1, defaultPageSize = 10, ...rest } = pagination || {};
+  const [controlledCurrent, setControlledCurrent] = useControlledState<number>(current, defaultCurrent);
+  const [controlledPageSize, setControlledPageSize] = useControlledState<number>(pageSize, defaultPageSize);
   const [controlledTotal, setControlledTotal] = useControlledState<number>(total, data.length);
   const prefixCls = usePrefixCls('table');
 
-  // when dataSource update && unControlled, Pagination update.
-  const resetPagination = () => {
-    if (isUndefined(total)) {
-      setControlledTotal(data.length, true);
-      if (Math.ceil(data.length / controlledPageSize) < controlledCurrent) {
-        setControlledCurrent(1, true);
-      }
-    }
-  };
-
   useEffect(() => {
-    resetPagination();
-  }, [data.length]);
+    setControlledTotal(data.length);
+    setControlledCurrent(defaultCurrent);
+    setControlledPageSize(defaultPageSize)
+  }, [data]);
 
   // 通过total字段是否受控判断是否后端分页。
   const paginationData = useMemo(
@@ -73,7 +65,7 @@ const usePagination = <RecordType,>(
   const PaginationComponent = ({
     onTriggerStateUpdate,
   }: {
-    onTriggerStateUpdate: (reset?: boolean, paginationState?: PaginationState) => void;
+    onTriggerStateUpdate: (paginationState?: PaginationState) => void;
   }) => (
     <Pagination
       className={`${prefixCls}-pagination`}
@@ -89,15 +81,15 @@ const usePagination = <RecordType,>(
         setControlledCurrent(_page);
         setControlledPageSize(_pageSize);
         onChange?.(_page, _pageSize);
-        onTriggerStateUpdate(false, { current: _page, pageSize: _pageSize });
+        onTriggerStateUpdate({ current: _page, pageSize: _pageSize });
       }}
       {...rest}
     />
   );
   if (pagination === false) {
-    return [transformShowIndexPipeline, activePaginationState, data, () => null, resetPagination];
+    return [transformShowIndexPipeline, activePaginationState, data, () => null];
   }
-  return [transformShowIndexPipeline, activePaginationState, paginationData, PaginationComponent, resetPagination];
+  return [transformShowIndexPipeline, activePaginationState, paginationData, PaginationComponent];
 };
 
 export default usePagination;

src/components/table/interface.ts

@@ -81,7 +81,7 @@ export interface TitleProps<RecordType> {
   column: ColumnType<RecordType>;
   updateSorterStates: (sortState: SortState<RecordType>) => void;
   updateFilterStates: (filterState: FilterState<RecordType>) => void;
-  onTriggerStateUpdate: (reset?: boolean) => void;
+  onTriggerStateUpdate: () => void;
 }
 
 export interface RowSelection<RecordType> {