fix: Customize scroll bar size of table (#616)

* fix: customize scrollbar size should not break

* fix: Test case

package.json

@@ -56,7 +56,7 @@
     "@babel/runtime": "^7.10.1",
     "classnames": "^2.2.5",
     "rc-resize-observer": "^1.0.0",
-    "rc-util": "^5.4.0",
+    "rc-util": "^5.13.0",
     "shallowequal": "^1.1.0"
   },
   "devDependencies": {

src/Table.tsx

@@ -30,7 +30,7 @@ import classNames from 'classnames';
 import shallowEqual from 'shallowequal';
 import warning from 'rc-util/lib/warning';
 import ResizeObserver from 'rc-resize-observer';
-import getScrollBarSize from 'rc-util/lib/getScrollBarSize';
+import { getTargetScrollBarSize } from 'rc-util/lib/getScrollBarSize';
 import ColumnGroup from './sugar/ColumnGroup';
 import Column from './sugar/Column';
 import FixedHeader from './Header/FixedHeader';
@@ -199,13 +199,6 @@ function Table<RecordType extends DefaultRecordType>(props: TableProps<RecordTyp
   const mergedData = data || EMPTY_DATA;
   const hasData = !!mergedData.length;
 
-  // ===================== Effects ======================
-  const [scrollbarSize, setScrollbarSize] = React.useState(0);
-
-  React.useEffect(() => {
-    setScrollbarSize(getScrollBarSize());
-  });
-
   // ===================== Warning ======================
   if (process.env.NODE_ENV !== 'production') {
     [
@@ -496,6 +489,13 @@ function Table<RecordType extends DefaultRecordType>(props: TableProps<RecordTyp
     }
   }, [horizonScroll]);
 
+  // ===================== Effects ======================
+  const [scrollbarSize, setScrollbarSize] = React.useState(0);
+
+  React.useEffect(() => {
+    setScrollbarSize(getTargetScrollBarSize(scrollBodyRef.current).width);
+  }, []);
+
   // ================== INTERNAL HOOKS ==================
   React.useEffect(() => {
     if (internalHooks === INTERNAL_HOOKS && internalRefs) {

tests/__mocks__/rc-util/lib/getScrollBarSize.ts

@@ -1 +1,3 @@
 export default () => 15;
+
+export const getTargetScrollBarSize = () => ({ width: 15, height: 15 });