refactor: use @rc-component/context (#916)

zombieJ · web-flow · commit 8c14d8f66a69 · 2022-12-27T15:03:34.000+08:00
diff --git a/package.json b/package.json
@@ -54,6 +54,7 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.10.1",
+    "@rc-component/context": "^1.0.0",
     "classnames": "^2.2.5",
     "rc-resize-observer": "^1.1.0",
     "rc-util": "^5.22.5",
diff --git a/src/Body/BodyRow.tsx b/src/Body/BodyRow.tsx
@@ -3,7 +3,7 @@ import * as React from 'react';
 import Cell from '../Cell';
 import BodyContext from '../context/BodyContext';
 import TableContext from '../context/TableContext';
-import { useContextSelector } from '../ContextSelector';
+import { useContext } from '@rc-component/context';
 import type {
   ColumnType,
   CustomizeComponent,
@@ -52,7 +52,7 @@ function BodyRow<RecordType extends { children?: readonly RecordType[] }>(
     scopeCellComponent,
     childrenColumnName,
   } = props;
-  const { prefixCls, fixedInfoList } = useContextSelector(TableContext, [
+  const { prefixCls, fixedInfoList } = useContext(TableContext, [
     'prefixCls',
     'fixedInfoList',
   ]);
@@ -67,7 +67,7 @@ function BodyRow<RecordType extends { children?: readonly RecordType[] }>(
     expandIcon,
     expandedRowRender,
     expandIconColumnIndex,
-  } = useContextSelector(BodyContext, [
+  } = useContext(BodyContext, [
     'flattenColumns',
     'expandableType',
     'expandRowByClick',
diff --git a/src/Body/ExpandedRow.tsx b/src/Body/ExpandedRow.tsx
@@ -2,7 +2,7 @@ import * as React from 'react';
 import Cell from '../Cell';
 import ExpandedRowContext from '../context/ExpandedRowContext';
 import TableContext from '../context/TableContext';
-import { useContextSelector } from '../ContextSelector';
+import { useContext } from '@rc-component/context';
 import type { CustomizeComponent } from '../interface';
 
 export interface ExpandedRowProps {
@@ -26,8 +26,8 @@ function ExpandedRow({
   colSpan,
   isEmpty,
 }: ExpandedRowProps) {
-  const scrollbarSize = useContextSelector(TableContext, 'scrollbarSize');
-  const { fixHeader, fixColumn, componentWidth, horizonScroll } = useContextSelector(
+  const scrollbarSize = useContext(TableContext, 'scrollbarSize');
+  const { fixHeader, fixColumn, componentWidth, horizonScroll } = useContext(
     ExpandedRowContext,
     ['fixHeader', 'fixColumn', 'componentWidth', 'horizonScroll'],
   );
diff --git a/src/Body/index.tsx b/src/Body/index.tsx
@@ -5,7 +5,7 @@ import type { PerfRecord } from '../context/PerfContext';
 import PerfContext from '../context/PerfContext';
 import ResizeContext from '../context/ResizeContext';
 import TableContext from '../context/TableContext';
-import { useContextSelector } from '../ContextSelector';
+import { useContext } from '@rc-component/context';
 import useFlattenRecords from '../hooks/useFlattenRecords';
 import type { GetComponentProps, GetRowKey, Key } from '../interface';
 import { getColumnsKey } from '../utils/valueUtil';
@@ -34,12 +34,12 @@ function Body<RecordType>({
   emptyNode,
   childrenColumnName,
 }: BodyProps<RecordType>) {
-  const onColumnResize = useContextSelector(ResizeContext, 'onColumnResize');
-  const { prefixCls, getComponent } = useContextSelector(TableContext, [
+  const onColumnResize = useContext(ResizeContext, 'onColumnResize');
+  const { prefixCls, getComponent } = useContext(TableContext, [
     'prefixCls',
     'getComponent',
   ]);
-  const flattenColumns = useContextSelector(BodyContext, 'flattenColumns');
+  const flattenColumns = useContext(BodyContext, 'flattenColumns');
 
   const flattenData: { record: RecordType; indent: number; index: number }[] =
     useFlattenRecords<RecordType>(data, childrenColumnName, expandedKeys, getRowKey);
diff --git a/src/Cell/index.tsx b/src/Cell/index.tsx
@@ -8,7 +8,7 @@ import type { HoverContextProps } from '../context/HoverContext';
 import HoverContext from '../context/HoverContext';
 import PerfContext from '../context/PerfContext';
 import StickyContext from '../context/StickyContext';
-import { useContextSelector } from '../ContextSelector';
+import { useContext } from '@rc-component/context';
 import type {
   AlignType,
   CellEllipsisType,
@@ -146,7 +146,7 @@ function Cell<RecordType extends DefaultRecordType>(
 
   const perfRecord = React.useContext(PerfContext);
   const supportSticky = React.useContext(StickyContext);
-  const allColumnsFixedLeft = useContextSelector(BodyContext, 'allColumnsFixedLeft');
+  const allColumnsFixedLeft = useContext(BodyContext, 'allColumnsFixedLeft');
 
   // ==================== Child Node ====================
   const [childNode, legacyCellProps] = React.useMemo<
@@ -342,7 +342,7 @@ const WrappedCell = React.forwardRef((props: CellProps<any>, ref: React.Ref<any>
   const mergedColSpan = colSpan ?? cellColSpan;
   const mergedRowSpan = rowSpan ?? cellRowSpan;
 
-  const { onHover, hovering } = useContextSelector(HoverContext, cxt => {
+  const { onHover, hovering } = useContext(HoverContext, cxt => {
     const isHovering = inHoverRange(index, mergedRowSpan || 1, cxt?.startRow, cxt?.endRow);
 
     return {
diff --git a/src/ContextSelector/index.tsx b/src/ContextSelector/index.tsx
diff --git a/src/FixedHolder/index.tsx b/src/FixedHolder/index.tsx
@@ -4,7 +4,7 @@ import * as React from 'react';
 import { useMemo } from 'react';
 import ColGroup from '../ColGroup';
 import TableContext from '../context/TableContext';
-import { useContextSelector } from '../ContextSelector';
+import { useContext } from '@rc-component/context';
 import type { HeaderProps } from '../Header/Header';
 import type { ColumnsType, ColumnType } from '../interface';
 
@@ -60,7 +60,7 @@ const FixedHolder = React.forwardRef<HTMLDivElement, FixedHeaderProps<unknown>>(
     },
     ref,
   ) => {
-    const { prefixCls, scrollbarSize, isSticky } = useContextSelector(TableContext, [
+    const { prefixCls, scrollbarSize, isSticky } = useContext(TableContext, [
       'prefixCls',
       'scrollbarSize',
       'isSticky',
diff --git a/src/Footer/Cell.tsx b/src/Footer/Cell.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import Cell from '../Cell';
 import TableContext from '../context/TableContext';
-import { useContextSelector } from '../ContextSelector';
+import { useContext } from '@rc-component/context';
 import type { AlignType } from '../interface';
 import { getCellFixedInfo } from '../utils/fixUtil';
 import SummaryContext from './SummaryContext';
@@ -23,7 +23,7 @@ export default function SummaryCell({
   rowSpan,
   align,
 }: SummaryCellProps) {
-  const { prefixCls, direction } = useContextSelector(TableContext, ['prefixCls', 'direction']);
+  const { prefixCls, direction } = useContext(TableContext, ['prefixCls', 'direction']);
   const { scrollColumnIndex, stickyOffsets, flattenColumns } = React.useContext(SummaryContext);
   const lastIndex = index + colSpan - 1;
   const mergedColSpan = lastIndex + 1 === scrollColumnIndex ? colSpan + 1 : colSpan;
diff --git a/src/Footer/index.tsx b/src/Footer/index.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import TableContext from '../context/TableContext';
-import { useContextSelector } from '../ContextSelector';
+import { useContext } from '@rc-component/context';
 import type { ColumnType, StickyOffsets } from '../interface';
 import Summary from './Summary';
 import SummaryContext from './SummaryContext';
@@ -14,7 +14,7 @@ export interface FooterProps<RecordType> {
 }
 
 function Footer<RecordType>({ children, stickyOffsets, flattenColumns }: FooterProps<RecordType>) {
-  const prefixCls = useContextSelector(TableContext, 'prefixCls');
+  const prefixCls = useContext(TableContext, 'prefixCls');
 
   const lastColumnIndex = flattenColumns.length - 1;
   const scrollColumn = flattenColumns[lastColumnIndex];
diff --git a/src/Header/Header.tsx b/src/Header/Header.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import TableContext from '../context/TableContext';
-import { useContextSelector } from '../ContextSelector';
+import { useContext } from '@rc-component/context';
 import type {
   CellType,
   ColumnGroupType,
@@ -95,7 +95,7 @@ function Header<RecordType>({
   flattenColumns,
   onHeaderRow,
 }: HeaderProps<RecordType>): React.ReactElement {
-  const { prefixCls, getComponent } = useContextSelector(TableContext, [
+  const { prefixCls, getComponent } = useContext(TableContext, [
     'prefixCls',
     'getComponent',
   ]);
diff --git a/src/Header/HeaderRow.tsx b/src/Header/HeaderRow.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import Cell from '../Cell';
 import TableContext from '../context/TableContext';
-import { useContextSelector } from '../ContextSelector';
+import { useContext } from '@rc-component/context';
 import type {
   CellType,
   ColumnType,
@@ -33,7 +33,7 @@ function HeaderRow<RecordType>({
   onHeaderRow,
   index,
 }: RowProps<RecordType>) {
-  const { prefixCls, direction } = useContextSelector(TableContext, ['prefixCls', 'direction']);
+  const { prefixCls, direction } = useContext(TableContext, ['prefixCls', 'direction']);
 
   let rowProps: React.HTMLAttributes<HTMLElement>;
   if (onHeaderRow) {
diff --git a/src/context/BodyContext.tsx b/src/context/BodyContext.tsx
@@ -1,4 +1,4 @@
-import { createContext } from '../ContextSelector';
+import { createContext } from '@rc-component/context';
 import type {
   ColumnsType,
   ColumnType,
diff --git a/src/context/ExpandedRowContext.tsx b/src/context/ExpandedRowContext.tsx
@@ -1,4 +1,4 @@
-import { createContext } from '../ContextSelector';
+import { createContext } from '@rc-component/context';
 
 export interface ExpandedRowProps {
   componentWidth: number;
diff --git a/src/context/HoverContext.tsx b/src/context/HoverContext.tsx
@@ -1,4 +1,4 @@
-import { createContext } from '../ContextSelector';
+import { createContext } from '@rc-component/context';
 
 export interface HoverContextProps {
   startRow: number;
diff --git a/src/context/ResizeContext.tsx b/src/context/ResizeContext.tsx
@@ -1,5 +1,5 @@
 import type * as React from 'react';
-import { createContext } from '../ContextSelector';
+import { createContext } from '@rc-component/context';
 
 interface ResizeContextProps {
   onColumnResize: (columnKey: React.Key, width: number) => void;
diff --git a/src/context/TableContext.tsx b/src/context/TableContext.tsx
@@ -1,4 +1,4 @@
-import { createContext } from '../ContextSelector';
+import { createContext } from '@rc-component/context';
 import type { GetComponent } from '../interface';
 import type { FixedInfo } from '../utils/fixUtil';
 
diff --git a/src/stickyScrollBar.tsx b/src/stickyScrollBar.tsx
@@ -4,7 +4,7 @@ import { getOffset } from 'rc-util/lib/Dom/css';
 import getScrollBarSize from 'rc-util/lib/getScrollBarSize';
 import * as React from 'react';
 import TableContext from './context/TableContext';
-import { useContextSelector } from './ContextSelector';
+import { useContext } from '@rc-component/context';
 import { useLayoutState } from './hooks/useFrame';
 
 interface StickyScrollBarProps {
@@ -18,7 +18,7 @@ const StickyScrollBar: React.ForwardRefRenderFunction<unknown, StickyScrollBarPr
   { scrollBodyRef, onScroll, offsetScroll, container },
   ref,
 ) => {
-  const prefixCls = useContextSelector(TableContext, 'prefixCls');
+  const prefixCls = useContext(TableContext, 'prefixCls');
   const bodyScrollWidth = scrollBodyRef.current?.scrollWidth || 0;
   const bodyWidth = scrollBodyRef.current?.clientWidth || 0;
   const scrollBarWidth = bodyScrollWidth && bodyWidth * (bodyWidth / bodyScrollWidth);
diff --git a/tests/useContextSelector.spec.tsx b/tests/useContextSelector.spec.tsx
