refactor: rc-component/table

docs/examples/animation.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import CSSMotionList from 'rc-animate/lib/CSSMotionList';
 import classNames from 'classnames';
-import toArray from 'rc-util/lib/Children/toArray';
+import toArray from '@rc-component/util/lib/Children/toArray';
 import type { TableProps } from 'rc-table';
 import Table from 'rc-table';
 import '../../assets/index.less';

package.json

@@ -1,6 +1,6 @@
 {
-  "name": "rc-table",
-  "version": "7.50.2",
+  "name": "@rc-component/table",
+  "version": "1.0.0",
   "description": "table ui component for react",
   "engines": {
     "node": ">=8.x"
@@ -55,9 +55,9 @@
   "dependencies": {
     "@babel/runtime": "^7.10.1",
     "@rc-component/context": "^1.4.0",
+    "@rc-component/util": "^1.1.0",
     "classnames": "^2.2.5",
     "rc-resize-observer": "^1.1.0",
-    "rc-util": "^5.44.3",
     "rc-virtual-list": "^3.14.2"
   },
   "devDependencies": {

src/Cell/index.tsx

@@ -14,7 +14,7 @@ import type {
 } from '../interface';
 import useCellRender from './useCellRender';
 import useHoverState from './useHoverState';
-import { useEvent } from 'rc-util';
+import { useEvent } from '@rc-component/util';
 
 export interface CellProps<RecordType extends DefaultRecordType> {
   prefixCls?: string;

src/Cell/useCellRender.ts

@@ -1,7 +1,7 @@
-import useMemo from 'rc-util/lib/hooks/useMemo';
-import isEqual from 'rc-util/lib/isEqual';
-import getValue from 'rc-util/lib/utils/get';
-import warning from 'rc-util/lib/warning';
+import useMemo from '@rc-component/util/lib/hooks/useMemo';
+import isEqual from '@rc-component/util/lib/isEqual';
+import getValue from '@rc-component/util/lib/utils/get';
+import warning from '@rc-component/util/lib/warning';
 import * as React from 'react';
 import PerfContext from '../context/PerfContext';
 import type { CellType, ColumnType, DataIndex, RenderedCell } from '../interface';

src/FixedHolder/index.tsx

@@ -1,6 +1,6 @@
 import { useContext } from '@rc-component/context';
 import classNames from 'classnames';
-import { fillRef } from 'rc-util/lib/ref';
+import { fillRef } from '@rc-component/util/lib/ref';
 import * as React from 'react';
 import { useMemo } from 'react';
 import ColGroup from '../ColGroup';

src/Table.tsx

@@ -27,13 +27,13 @@
 import type { CompareProps } from '@rc-component/context/lib/Immutable';
 import classNames from 'classnames';
 import ResizeObserver from 'rc-resize-observer';
-import isVisible from 'rc-util/lib/Dom/isVisible';
-import { isStyleSupport } from 'rc-util/lib/Dom/styleChecker';
-import { getTargetScrollBarSize } from 'rc-util/lib/getScrollBarSize';
-import useEvent from 'rc-util/lib/hooks/useEvent';
-import pickAttrs from 'rc-util/lib/pickAttrs';
-import getValue from 'rc-util/lib/utils/get';
-import warning from 'rc-util/lib/warning';
+import isVisible from '@rc-component/util/lib/Dom/isVisible';
+import { isStyleSupport } from '@rc-component/util/lib/Dom/styleChecker';
+import { getTargetScrollBarSize } from '@rc-component/util/lib/getScrollBarSize';
+import useEvent from '@rc-component/util/lib/hooks/useEvent';
+import pickAttrs from '@rc-component/util/lib/pickAttrs';
+import getValue from '@rc-component/util/lib/utils/get';
+import warning from '@rc-component/util/lib/warning';
 import * as React from 'react';
 import Body from './Body';
 import ColGroup from './ColGroup';
@@ -75,7 +75,7 @@ import StickyScrollBar from './stickyScrollBar';
 import Column from './sugar/Column';
 import ColumnGroup from './sugar/ColumnGroup';
 import { getColumnsKey, validateValue, validNumberValue } from './utils/valueUtil';
-import { getDOM } from 'rc-util/lib/Dom/findDOMNode';
+import { getDOM } from '@rc-component/util/lib/Dom/findDOMNode';
 
 export const DEFAULT_PREFIX = 'rc-table';
 

src/VirtualTable/index.tsx

@@ -1,14 +1,14 @@
 import type { CompareProps } from '@rc-component/context/lib/Immutable';
 import classNames from 'classnames';
-import { useEvent, warning } from 'rc-util';
+import { useEvent, warning } from '@rc-component/util';
 import * as React from 'react';
 import { INTERNAL_HOOKS } from '../constant';
 import { makeImmutable } from '../context/TableContext';
 import type { CustomizeScrollBody, GetComponent, Reference } from '../interface';
 import Table, { DEFAULT_PREFIX, type TableProps } from '../Table';
 import Grid from './BodyGrid';
 import { StaticContext } from './context';
-import getValue from 'rc-util/lib/utils/get';
+import getValue from '@rc-component/util/lib/utils/get';
 
 const renderBody: CustomizeScrollBody<any> = (rawData, props) => {
   const { ref, onScroll } = props;

src/hooks/useColumns/index.tsx

@@ -1,5 +1,5 @@
-import toArray from 'rc-util/lib/Children/toArray';
-import warning from 'rc-util/lib/warning';
+import toArray from '@rc-component/util/lib/Children/toArray';
+import warning from '@rc-component/util/lib/warning';
 import * as React from 'react';
 import { EXPAND_COLUMN } from '../../constant';
 import type {

src/hooks/useExpand.ts

@@ -1,4 +1,4 @@
-import warning from 'rc-util/lib/warning';
+import warning from '@rc-component/util/lib/warning';
 import * as React from 'react';
 import { INTERNAL_HOOKS } from '../constant';
 import type {

src/hooks/useFixedInfo.ts

@@ -1,5 +1,5 @@
-import useMemo from 'rc-util/lib/hooks/useMemo';
-import isEqual from 'rc-util/lib/isEqual';
+import useMemo from '@rc-component/util/lib/hooks/useMemo';
+import isEqual from '@rc-component/util/lib/isEqual';
 import type { ColumnType, Direction, StickyOffsets } from '../interface';
 import { getCellFixedInfo } from '../utils/fixUtil';
 

src/hooks/useRowInfo.tsx

@@ -2,7 +2,7 @@ import { useContext } from '@rc-component/context';
 import type { TableContextProps } from '../context/TableContext';
 import TableContext from '../context/TableContext';
 import { getColumnsKey } from '../utils/valueUtil';
-import { useEvent } from 'rc-util';
+import { useEvent } from '@rc-component/util';
 import classNames from 'classnames';
 
 export default function useRowInfo<RecordType>(

src/hooks/useSticky.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import canUseDom from 'rc-util/lib/Dom/canUseDom';
+import canUseDom from '@rc-component/util/lib/Dom/canUseDom';
 import type { TableSticky } from '../interface';
 
 // fix ssr render

src/stickyScrollBar.tsx

@@ -1,13 +1,17 @@
 import { useContext } from '@rc-component/context';
 import classNames from 'classnames';
-import addEventListener from 'rc-util/lib/Dom/addEventListener';
-import getScrollBarSize from 'rc-util/lib/getScrollBarSize';
+import getScrollBarSize from '@rc-component/util/lib/getScrollBarSize';
 import * as React from 'react';
 import TableContext from './context/TableContext';
 import { useLayoutState } from './hooks/useFrame';
-import raf from 'rc-util/lib/raf';
+import raf from '@rc-component/util/lib/raf';
 import { getOffset } from './utils/offsetUtil';
 
+const MOUSEUP_EVENT: keyof WindowEventMap = 'mouseup';
+const MOUSEMOVE_EVENT: keyof WindowEventMap = 'mousemove';
+const SCROLL_EVENT: keyof WindowEventMap = 'scroll';
+const RESIZE_EVENT: keyof WindowEventMap = 'resize';
+
 interface StickyScrollBarProps {
   scrollBodyRef: React.RefObject<HTMLDivElement>;
   onScroll: (params: { scrollLeft?: number }) => void;
@@ -50,19 +54,19 @@ const StickyScrollBar: React.ForwardRefRenderFunction<unknown, StickyScrollBarPr
     [],
   );
 
-  const onMouseUp: React.MouseEventHandler<HTMLDivElement> = () => {
+  const onMouseUp = () => {
     setActive(false);
   };
 
-  const onMouseDown: React.MouseEventHandler<HTMLDivElement> = event => {
+  const onMouseDown = (event: React.MouseEvent) => {
     event.persist();
     refState.current.delta = event.pageX - scrollState.scrollLeft;
     refState.current.x = 0;
     setActive(true);
     event.preventDefault();
   };
 
-  const onMouseMove: React.MouseEventHandler<HTMLDivElement> = event => {
+  const onMouseMove = (event: any) => {
     // https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/buttons
     const { buttons } = event || (window?.event as any);
     if (!isActive || buttons === 0) {
@@ -72,8 +76,7 @@ const StickyScrollBar: React.ForwardRefRenderFunction<unknown, StickyScrollBarPr
       }
       return;
     }
-    let left: number =
-      refState.current.x + event.pageX - refState.current.x - refState.current.delta;
+    let left = refState.current.x + event.pageX - refState.current.x - refState.current.delta;
 
     const isRTL = direction === 'rtl';
     // Limit scroll range
@@ -135,23 +138,24 @@ const StickyScrollBar: React.ForwardRefRenderFunction<unknown, StickyScrollBarPr
   }));
 
   React.useEffect(() => {
-    const onMouseUpListener = addEventListener(document.body, 'mouseup', onMouseUp, false);
-    const onMouseMoveListener = addEventListener(document.body, 'mousemove', onMouseMove, false);
+    document.body.addEventListener(MOUSEUP_EVENT, onMouseUp, false);
+    document.body.addEventListener(MOUSEMOVE_EVENT, onMouseMove, false);
     checkScrollBarVisible();
     return () => {
-      onMouseUpListener.remove();
-      onMouseMoveListener.remove();
+      document.body.removeEventListener(MOUSEUP_EVENT, onMouseUp, false);
+      document.body.removeEventListener(MOUSEMOVE_EVENT, onMouseMove, false);
     };
-  }, [scrollBarWidth, isActive]);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [scrollBarWidth, isActive, checkScrollBarVisible]);
 
   React.useEffect(() => {
-    const onScrollListener = addEventListener(container, 'scroll', checkScrollBarVisible, false);
-    const onResizeListener = addEventListener(window, 'resize', checkScrollBarVisible, false);
-
+    container.addEventListener(SCROLL_EVENT, checkScrollBarVisible, false);
+    window.addEventListener(RESIZE_EVENT, checkScrollBarVisible, false);
     return () => {
-      onScrollListener.remove();
-      onResizeListener.remove();
+      container.removeEventListener(SCROLL_EVENT, checkScrollBarVisible, false);
+      window.removeEventListener(RESIZE_EVENT, checkScrollBarVisible, false);
     };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [container]);
 
   React.useEffect(() => {
@@ -167,6 +171,7 @@ const StickyScrollBar: React.ForwardRefRenderFunction<unknown, StickyScrollBarPr
         };
       });
     }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [scrollState.isHiddenScrollBar]);
 
   if (bodyScrollWidth <= bodyWidth || !scrollBarWidth || scrollState.isHiddenScrollBar) {
@@ -175,11 +180,7 @@ const StickyScrollBar: React.ForwardRefRenderFunction<unknown, StickyScrollBarPr
 
   return (
     <div
-      style={{
-        height: getScrollBarSize(),
-        width: bodyWidth,
-        bottom: offsetScroll,
-      }}
+      style={{ height: getScrollBarSize(), width: bodyWidth, bottom: offsetScroll }}
       className={`${prefixCls}-sticky-scroll`}
     >
       <div

src/utils/legacyUtil.ts

@@ -1,4 +1,4 @@
-import warning from 'rc-util/lib/warning';
+import warning from '@rc-component/util/lib/warning';
 import type { ExpandableConfig, LegacyExpandableProps } from '../interface';
 
 export const INTERNAL_COL_DEFINE = 'RC_TABLE_INTERNAL_COL_DEFINE';

src/utils/offsetUtil.ts

@@ -1,6 +1,6 @@
-import { getDOM } from 'rc-util/lib/Dom/findDOMNode';
+import { getDOM } from '@rc-component/util/lib/Dom/findDOMNode';
 
-// Copy from `rc-util/Dom/css.js`
+// Copy from `rc-component/util/Dom/css.js`
 export function getOffset(node: HTMLElement | Window) {
   const element = getDOM(node);
   const box = element.getBoundingClientRect();

tests/Deprecated.spec.jsx

@@ -1,5 +1,5 @@
 import { mount } from 'enzyme';
-import { resetWarned } from 'rc-util/lib/warning';
+import { resetWarned } from '@rc-component/util/lib/warning';
 import React from 'react';
 import Table from '../src';
 

tests/ExpandRow.spec.jsx

@@ -1,7 +1,7 @@
 import { render } from '@testing-library/react';
 import { mount } from 'enzyme';
-import { spyElementPrototype } from 'rc-util/lib/test/domHook';
-import { resetWarned } from 'rc-util/lib/warning';
+import { spyElementPrototype } from '@rc-component/util/lib/test/domHook';
+import { resetWarned } from '@rc-component/util/lib/warning';
 import React from 'react';
 import { act } from 'react-dom/test-utils';
 import Table from '../src';

tests/FixedColumn-IE.spec.jsx

@@ -1,12 +1,12 @@
 import { mount } from 'enzyme';
-import { spyElementPrototype } from 'rc-util/lib/test/domHook';
+import { spyElementPrototype } from '@rc-component/util/lib/test/domHook';
 import React from 'react';
 import { act } from 'react-dom/test-utils';
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
 import RcResizeObserver from 'rc-resize-observer';
 import Table from '../src';
 
-vi.mock('rc-util/lib/Dom/styleChecker', () => {
+vi.mock('@rc-component/util/lib/Dom/styleChecker', () => {
   return {
     isStyleSupport: (name, val) => val !== 'sticky',
   };

tests/FixedColumn.spec.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import { mount } from 'enzyme';
 import { render } from '@testing-library/react';
 import RcResizeObserver, { _rs } from 'rc-resize-observer';
-import { spyElementPrototypes } from 'rc-util/lib/test/domHook';
+import { spyElementPrototypes } from '@rc-component/util/lib/test/domHook';
 import { act } from 'react-dom/test-utils';
 import Table, { type ColumnsType } from '../src';
 import { safeAct } from './utils';

tests/FixedHeader.spec.jsx

@@ -1,6 +1,6 @@
 import { mount } from 'enzyme';
 import RcResizeObserver from 'rc-resize-observer';
-import { spyElementPrototype } from 'rc-util/lib/test/domHook';
+import { spyElementPrototype } from '@rc-component/util/lib/test/domHook';
 import React from 'react';
 import { act } from 'react-dom/test-utils';
 import Table, { INTERNAL_COL_DEFINE } from '../src';

tests/Hover.spec.tsx

@@ -1,6 +1,6 @@
 import { mount } from 'enzyme';
-import toArray from 'rc-util/lib/Children/toArray';
-import { resetWarned } from 'rc-util/lib/warning';
+import toArray from '@rc-component/util/lib/Children/toArray';
+import { resetWarned } from '@rc-component/util/lib/warning';
 import React from 'react';
 import Table from '../src';
 import type { TableProps } from '../src/Table';

tests/Scroll.spec.jsx

@@ -1,5 +1,5 @@
 import { mount } from 'enzyme';
-import { spyElementPrototypes } from 'rc-util/lib/test/domHook';
+import { spyElementPrototypes } from '@rc-component/util/lib/test/domHook';
 import React from 'react';
 import { act } from 'react-dom/test-utils';
 import Table from '../src';

tests/Sticky.spec.jsx

@@ -1,5 +1,5 @@
 import { mount } from 'enzyme';
-import { spyElementPrototypes } from 'rc-util/lib/test/domHook';
+import { spyElementPrototypes } from '@rc-component/util/lib/test/domHook';
 import React from 'react';
 import { act } from 'react-dom/test-utils';
 import Table from '../src';

tests/Table.spec.jsx

@@ -1,5 +1,5 @@
 import { mount } from 'enzyme';
-import { resetWarned } from 'rc-util/lib/warning';
+import { resetWarned } from '@rc-component/util/lib/warning';
 import React from 'react';
 import { VariableSizeGrid as Grid } from 'react-window';
 import Table, { INTERNAL_COL_DEFINE } from '../src';

tests/Virtual.spec.tsx

@@ -1,8 +1,8 @@
 import { act, fireEvent, render } from '@testing-library/react';
 import { _rs as onEsResize } from 'rc-resize-observer/es/utils/observerUtil';
 import { _rs as onLibResize } from 'rc-resize-observer/lib/utils/observerUtil';
-import { spyElementPrototypes } from 'rc-util/lib/test/domHook';
-import { resetWarned } from 'rc-util/lib/warning';
+import { spyElementPrototypes } from '@rc-component/util/lib/test/domHook';
+import { resetWarned } from '@rc-component/util/lib/warning';
 import React from 'react';
 import { VirtualTable, type Reference, type VirtualTableProps } from '../src';
 

tests/refs.spec.tsx

@@ -1,5 +1,5 @@
 import { render } from '@testing-library/react';
-import { spyElementPrototypes } from 'rc-util/lib/test/domHook';
+import { spyElementPrototypes } from '@rc-component/util/lib/test/domHook';
 import React from 'react';
 import Table, { type Reference } from '../src';
 

tests/setup.ts

@@ -7,7 +7,7 @@ window.getComputedStyle = elt => getComputedStyle(elt);
 global.requestAnimationFrame = cb => setTimeout(cb, 0);
 require('regenerator-runtime');
 
-vi.mock('rc-util/lib/getScrollBarSize');
+vi.mock('@rc-component/util/lib/getScrollBarSize');
 
 const Enzyme = require('enzyme');
 const Adapter = require('enzyme-adapter-react-16');