fix(Table): fix table height not reset after fillHeight is changed

docs/index.tsx

@@ -1,12 +1,22 @@
 import React, { Profiler } from 'react';
 import ReactDOM from 'react-dom';
-import { Popover, Whisper, Toggle, Grid, Button, ButtonGroup, Checkbox } from 'rsuite';
+import {
+  Popover,
+  Whisper,
+  Toggle,
+  Grid,
+  Button,
+  ButtonGroup,
+  Checkbox,
+  Stack,
+  Divider,
+  Input
+} from 'rsuite';
 import clone from 'lodash/clone';
 import isFunction from 'lodash/isFunction';
 import get from 'lodash/get';
 import without from 'lodash/without';
 import Examples from './Examples';
-import './less/index.less';
 import { Table, Column, Cell, HeaderCell, ColumnGroup } from '../src';
 import fakeData from './data/users';
 import fakeTreeData from './data/treeData';
@@ -18,13 +28,18 @@ import fakeObjectDataListStore, { createFakeRowObjectData } from './data/fakeObj
 import { useDrag, useDrop, DndProvider } from 'react-dnd';
 import Backend from 'react-dnd-html5-backend';
 import GearIcon from '@rsuite/icons/Gear';
+
 import 'rsuite/Popover/styles/index.less';
 import 'rsuite/Toggle/styles/index.less';
 import 'rsuite/Grid/styles/index.less';
 import 'rsuite/Button/styles/index.less';
 import 'rsuite/ButtonGroup/styles/index.less';
 import 'rsuite/Checkbox/styles/index.less';
 import 'rsuite/Nav/styles/index.less';
+import 'rsuite/Input/styles/index.less';
+import 'rsuite/Stack/styles/index.less';
+import 'rsuite/Divider/styles/index.less';
+import './less/index.less';
 
 function App() {
   return (
@@ -65,7 +80,10 @@ function App() {
           Backend,
           DndProvider,
           GearIcon,
-          Profiler
+          Profiler,
+          Stack,
+          Divider,
+          Input
         }}
         list={[
           {

docs/md/FillHeightTable.md

@@ -4,21 +4,40 @@
 
 ```js
 const App = () => {
-  const [height, setheight] = React.useState(30);
-  const handleChange = event => {
-    const value = parseInt(event.target.value);
-    setheight(value);
-  };
+  const [height, setHeight] = React.useState(30);
+  const [fillHeight, setFillHeight] = React.useState(false);
 
   const data = fakeData.filter((item, index) => index < 50);
   return (
     <div>
-      container height: <input type="text" onChange={handleChange} value={height} /> rem
+      <Stack spacing={10} divider={<Divider vertical />}>
+        <span>
+          <Checkbox
+            checked={fillHeight}
+            onChange={(_v, checked) => {
+              setFillHeight(checked);
+            }}
+          >
+            fillHeight
+          </Checkbox>
+        </span>
+
+        <span>
+          Container height:{' '}
+          <Input
+            type="text"
+            style={{ width: 100, display: 'inline-block' }}
+            onChange={setHeight}
+            value={height}
+          />{' '}
+          rem
+        </span>
+      </Stack>
       <hr />
       <div style={{ border: '1px solid red', height: `${height}rem` }}>
         <Table
           height={400}
-          fillHeight
+          fillHeight={fillHeight}
           data={data}
           onRowClick={data => {
             console.log(data);

karma.conf.js

@@ -1,3 +1,6 @@
+// eslint-disable-next-line @typescript-eslint/no-var-requires
+const MiniCssExtractPlugin = require('mini-css-extract-plugin');
+
 const webpackConfig = {
   mode: 'development',
   output: {
@@ -12,9 +15,33 @@ const webpackConfig = {
         test: [/\.tsx?$/, /\.jsx?$/],
         use: ['babel-loader?babelrc'],
         exclude: /node_modules/
+      },
+      {
+        test: /\.(less|css)$/,
+        use: [
+          MiniCssExtractPlugin.loader,
+          {
+            loader: 'css-loader'
+          },
+          {
+            loader: 'less-loader',
+            options: {
+              sourceMap: true,
+              lessOptions: {
+                javascriptEnabled: true
+              }
+            }
+          }
+        ]
       }
     ]
   },
+  plugins: [
+    new MiniCssExtractPlugin({
+      filename: '[name].css',
+      chunkFilename: '[id].css'
+    })
+  ],
   devtool: 'eval'
 };
 

package.json

@@ -129,7 +129,7 @@
     "react-dom": "^17.0.2",
     "react-markdown-reader": "^1.2.0",
     "react-test-renderer": "^16.14.0",
-    "rsuite": "^5.3.0",
+    "rsuite": "^5.8.0",
     "sinon": "^11.1.2",
     "sinon-chai": "^3.7.0",
     "style-loader": "^0.13.1",

src/@types/common.ts

@@ -14,6 +14,12 @@ export interface StandardProps extends React.HTMLAttributes<HTMLElement> {
 
 export type SortType = 'desc' | 'asc';
 
+export type TableSizeChangeEventName =
+  | 'bodyHeightChanged'
+  | 'bodyWidthChanged'
+  | 'widthChanged'
+  | 'heightChanged';
+
 export interface RowDataType {
   dataKey?: string;
   children?: RowDataType[];

src/Scrollbar.tsx

@@ -1,4 +1,4 @@
-import React, { useState, useRef, useCallback, useEffect, useImperativeHandle } from 'react';
+import React, { useState, useRef, useCallback, useImperativeHandle } from 'react';
 import DOMMouseMoveTracker from 'dom-lib/DOMMouseMoveTracker';
 import addStyle, { CSSProperty } from 'dom-lib/addStyle';
 import getOffset from 'dom-lib/getOffset';
@@ -79,14 +79,11 @@ const Scrollbar = React.forwardRef((props: ScrollbarProps, ref) => {
         setBarOffset(getOffset(barRef.current));
       }
     }, 1);
-  });
 
-  useEffect(() => {
     return () => {
       releaseMouseMoves();
     };
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
+  });
 
   useUpdateEffect(() => {
     if (scrollOffset.current) {

src/Table.tsx

@@ -42,7 +42,8 @@ import type {
   SortType,
   RowDataType,
   RowKeyType,
-  TableLocaleType
+  TableLocaleType,
+  TableSizeChangeEventName
 } from './@types/common';
 /**
  * Filter those expanded nodes.
@@ -159,7 +160,7 @@ export interface TableProps extends Omit<StandardProps, 'onScroll'> {
    */
   shouldUpdateScroll?:
     | boolean
-    | ((event: 'bodyHeightChanged' | 'bodyWidthChanged' | 'widthChanged') => {
+    | ((event: TableSizeChangeEventName) => {
         x?: number;
         y?: number;
       });
@@ -367,12 +368,12 @@ const Table = React.forwardRef((props: TableProps, ref) => {
   const scrollbarXRef = useRef<ScrollbarInstance>(null);
   const scrollbarYRef = useRef<ScrollbarInstance>(null);
 
-  /**
-   * Reset the position of the scroll bar after the table size changes.
-   */
-  const resetScrollbar = (event: 'bodyHeightChanged' | 'bodyWidthChanged' | 'widthChanged') => {
+  const handleTableResizeChange = (_prevSize, event: TableSizeChangeEventName) => {
     forceUpdate();
 
+    /**
+     * Reset the position of the scroll bar after the table size changes.
+     */
     if (typeof shouldUpdateScroll === 'function') {
       onScrollTo(shouldUpdateScroll(event));
     } else if (shouldUpdateScroll) {
@@ -413,15 +414,7 @@ const Table = React.forwardRef((props: TableProps, ref) => {
     onTableScroll: (coords: { x?: number; y?: number }) => {
       onScrollTo(coords);
     },
-    onTableContentHeightChange: () => {
-      resetScrollbar('bodyHeightChanged');
-    },
-    onTableContentWidthChange: () => {
-      resetScrollbar('bodyWidthChanged');
-    },
-    onTableWidthChange: () => {
-      resetScrollbar('widthChanged');
-    }
+    onTableResizeChange: handleTableResizeChange
   });
 
   useAffix({

src/index.ts

@@ -10,4 +10,10 @@ export type { ColumnProps } from './Column';
 export type { CellProps } from './Cell';
 export type { HeaderCellProps } from './HeaderCell';
 export type { ColumnGroupProps } from './ColumnGroup';
-export type { StandardProps, SortType, RowDataType, RowKeyType } from './@types/common';
+export type {
+  StandardProps,
+  SortType,
+  RowDataType,
+  RowKeyType,
+  TableSizeChangeEventName
+} from './@types/common';