refactor: Merge context (#920)

* refactor: merge ResizeContext

* refactor: merge hover context

* refactor: merge sticky context

* refactor: merge body context

* refactor: merge Expand context

* chore: comment

Author: zombieJ

src/Body/BodyRow.tsx

@@ -1,9 +1,8 @@
+import { useContext } from '@rc-component/context';
 import classNames from 'classnames';
 import * as React from 'react';
 import Cell from '../Cell';
-import BodyContext from '../context/BodyContext';
 import TableContext from '../context/TableContext';
-import { useContext } from '@rc-component/context';
 import type {
   ColumnType,
   CustomizeComponent,
@@ -52,11 +51,9 @@ function BodyRow<RecordType extends { children?: readonly RecordType[] }>(
     scopeCellComponent,
     childrenColumnName,
   } = props;
-  const { prefixCls, fixedInfoList } = useContext(TableContext, [
-    'prefixCls',
-    'fixedInfoList',
-  ]);
   const {
+    prefixCls,
+    fixedInfoList,
     flattenColumns,
     expandableType,
     expandRowByClick,
@@ -67,7 +64,9 @@ function BodyRow<RecordType extends { children?: readonly RecordType[] }>(
     expandIcon,
     expandedRowRender,
     expandIconColumnIndex,
-  } = useContext(BodyContext, [
+  } = useContext(TableContext, [
+    'prefixCls',
+    'fixedInfoList',
     'flattenColumns',
     'expandableType',
     'expandRowByClick',

src/Body/ExpandedRow.tsx

@@ -1,8 +1,7 @@
+import { useContext } from '@rc-component/context';
 import * as React from 'react';
 import Cell from '../Cell';
-import ExpandedRowContext from '../context/ExpandedRowContext';
 import TableContext from '../context/TableContext';
-import { useContext } from '@rc-component/context';
 import type { CustomizeComponent } from '../interface';
 
 export interface ExpandedRowProps {
@@ -26,10 +25,9 @@ function ExpandedRow({
   colSpan,
   isEmpty,
 }: ExpandedRowProps) {
-  const scrollbarSize = useContext(TableContext, 'scrollbarSize');
-  const { fixHeader, fixColumn, componentWidth, horizonScroll } = useContext(
-    ExpandedRowContext,
-    ['fixHeader', 'fixColumn', 'componentWidth', 'horizonScroll'],
+  const { scrollbarSize, fixHeader, fixColumn, componentWidth, horizonScroll } = useContext(
+    TableContext,
+    ['scrollbarSize', 'fixHeader', 'fixColumn', 'componentWidth', 'horizonScroll'],
   );
 
   // Cache render node

src/Body/index.tsx

@@ -1,11 +1,8 @@
+import { useContext } from '@rc-component/context';
 import * as React from 'react';
-import BodyContext from '../context/BodyContext';
-import HoverContext from '../context/HoverContext';
 import type { PerfRecord } from '../context/PerfContext';
 import PerfContext from '../context/PerfContext';
-import ResizeContext from '../context/ResizeContext';
 import TableContext from '../context/TableContext';
-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 +31,12 @@ function Body<RecordType>({
   emptyNode,
   childrenColumnName,
 }: BodyProps<RecordType>) {
-  const onColumnResize = useContext(ResizeContext, 'onColumnResize');
-  const { prefixCls, getComponent } = useContext(TableContext, [
+  const { prefixCls, getComponent, onColumnResize, flattenColumns } = useContext(TableContext, [
     'prefixCls',
     'getComponent',
+    'onColumnResize',
+    'flattenColumns',
   ]);
-  const flattenColumns = useContext(BodyContext, 'flattenColumns');
 
   const flattenData: { record: RecordType; indent: number; index: number }[] =
     useFlattenRecords<RecordType>(data, childrenColumnName, expandedKeys, getRowKey);
@@ -49,15 +46,6 @@ function Body<RecordType>({
     renderWithProps: false,
   });
 
-  // ====================== Hover =======================
-  const [startRow, setStartRow] = React.useState(-1);
-  const [endRow, setEndRow] = React.useState(-1);
-
-  const onHover = React.useCallback((start: number, end: number) => {
-    setStartRow(start);
-    setEndRow(end);
-  }, []);
-
   // ====================== Render ======================
   const bodyNode = React.useMemo(() => {
     const WrapperComponent = getComponent(['body', 'wrapper'], 'tbody');
@@ -140,13 +128,7 @@ function Body<RecordType>({
     flattenData,
   ]);
 
-  return (
-    <PerfContext.Provider value={perfRef.current}>
-      <HoverContext.Provider value={{ startRow, endRow, onHover }}>
-        {bodyNode}
-      </HoverContext.Provider>
-    </PerfContext.Provider>
-  );
+  return <PerfContext.Provider value={perfRef.current}>{bodyNode}</PerfContext.Provider>;
 }
 
 const MemoBody = React.memo(Body);

src/Cell/index.tsx

@@ -5,11 +5,9 @@ import { supportRef } from 'rc-util/lib/ref';
 import getValue from 'rc-util/lib/utils/get';
 import warning from 'rc-util/lib/warning';
 import * as React from 'react';
-import BodyContext from '../context/BodyContext';
-import type { HoverContextProps } from '../context/HoverContext';
-import HoverContext from '../context/HoverContext';
 import PerfContext from '../context/PerfContext';
-import StickyContext from '../context/StickyContext';
+import type { TableContextProps } from '../context/TableContext';
+import TableContext from '../context/TableContext';
 import type {
   AlignType,
   CellEllipsisType,
@@ -44,7 +42,7 @@ function isRefComponent(component: CustomizeComponent) {
 }
 
 interface InternalCellProps<RecordType extends DefaultRecordType>
-  extends Pick<HoverContextProps, 'onHover'> {
+  extends Pick<TableContextProps, 'onHover'> {
   prefixCls?: string;
   className?: string;
   record?: RecordType;
@@ -89,7 +87,7 @@ interface InternalCellProps<RecordType extends DefaultRecordType>
 
 export type CellProps<RecordType extends DefaultRecordType> = Omit<
   InternalCellProps<RecordType>,
-  keyof HoverContextProps
+  keyof Omit<TableContextProps, 'prefixCls'>
 >;
 
 const getTitleFromCellRenderChildren = ({
@@ -146,8 +144,10 @@ function Cell<RecordType extends DefaultRecordType>(
   const cellPrefixCls = `${prefixCls}-cell`;
 
   const perfRecord = React.useContext(PerfContext);
-  const supportSticky = React.useContext(StickyContext);
-  const allColumnsFixedLeft = useContext(BodyContext, 'allColumnsFixedLeft');
+  const { supportSticky, allColumnsFixedLeft } = useContext(TableContext, [
+    'supportSticky',
+    'allColumnsFixedLeft',
+  ]);
 
   // ==================== Child Node ====================
   const [childNode, legacyCellProps] = React.useMemo<
@@ -347,8 +347,13 @@ const WrappedCell = React.forwardRef((props: CellProps<any>, ref: React.Ref<any>
   const mergedColSpan = colSpan ?? cellColSpan;
   const mergedRowSpan = rowSpan ?? cellRowSpan;
 
-  const { onHover, hovering } = useContext(HoverContext, cxt => {
-    const isHovering = inHoverRange(index, mergedRowSpan || 1, cxt?.startRow, cxt?.endRow);
+  const { onHover, hovering } = useContext(TableContext, cxt => {
+    const isHovering = inHoverRange(
+      index,
+      mergedRowSpan || 1,
+      cxt?.hoverStartRow,
+      cxt?.hoverEndRow,
+    );
 
     return {
       onHover: cxt?.onHover,

src/Table.tsx

@@ -38,10 +38,6 @@ import * as React from 'react';
 import Body from './Body';
 import ColGroup from './ColGroup';
 import { EXPAND_COLUMN } from './constant';
-import BodyContext from './context/BodyContext';
-import ExpandedRowContext from './context/ExpandedRowContext';
-import ResizeContext from './context/ResizeContext';
-import StickyContext from './context/StickyContext';
 import TableContext from './context/TableContext';
 import FixedHolder from './FixedHolder';
 import Footer, { FooterComponents } from './Footer';
@@ -262,6 +258,15 @@ function Table<RecordType extends DefaultRecordType>(tableProps: TableProps<Reco
     };
   }, [rowKey]);
 
+  // ====================== Hover =======================
+  const [startRow, setStartRow] = React.useState(-1);
+  const [endRow, setEndRow] = React.useState(-1);
+
+  const onHover = React.useCallback((start: number, end: number) => {
+    setStartRow(start);
+    setEndRow(end);
+  }, []);
+
   // ====================== Expand ======================
   const expandableConfig = getExpandableProps(props);
 
@@ -829,6 +834,7 @@ function Table<RecordType extends DefaultRecordType>(tableProps: TableProps<Reco
 
   const TableContextValue = React.useMemo(
     () => ({
+      // Table
       prefixCls,
       getComponent,
       scrollbarSize,
@@ -837,13 +843,15 @@ function Table<RecordType extends DefaultRecordType>(tableProps: TableProps<Reco
         getCellFixedInfo(colIndex, colIndex, flattenColumns, stickyOffsets, direction),
       ),
       isSticky,
-    }),
-    [prefixCls, getComponent, scrollbarSize, direction, flattenColumns, stickyOffsets, isSticky],
-  );
+      supportSticky,
+
+      componentWidth,
+      fixHeader,
+      fixColumn,
+      horizonScroll,
+
+      // Body
 
-  const BodyContextValue = React.useMemo(
-    () => ({
-      ...columnContext,
       tableLayout: mergedTableLayout,
       rowClassName,
       expandedRowClassName,
@@ -854,10 +862,34 @@ function Table<RecordType extends DefaultRecordType>(tableProps: TableProps<Reco
       onTriggerExpand,
       expandIconColumnIndex,
       indentSize,
-      allColumnsFixedLeft: columnContext.flattenColumns.every(col => col.fixed === 'left'),
+      allColumnsFixedLeft: flattenColumns.every(col => col.fixed === 'left'),
+
+      // Column
+      columns,
+      flattenColumns,
+      onColumnResize,
+
+      // Row
+      hoverStartRow: startRow,
+      hoverEndRow: endRow,
+      onHover,
     }),
     [
-      columnContext,
+      // Table
+      prefixCls,
+      getComponent,
+      scrollbarSize,
+      direction,
+      stickyOffsets,
+      isSticky,
+      supportSticky,
+
+      componentWidth,
+      fixHeader,
+      fixColumn,
+      horizonScroll,
+
+      // Body
       mergedTableLayout,
       rowClassName,
       expandedRowClassName,
@@ -868,32 +900,20 @@ function Table<RecordType extends DefaultRecordType>(tableProps: TableProps<Reco
       onTriggerExpand,
       expandIconColumnIndex,
       indentSize,
-    ],
-  );
 
-  const ExpandedRowContextValue = React.useMemo(
-    () => ({
-      componentWidth,
-      fixHeader,
-      fixColumn,
-      horizonScroll,
-    }),
-    [componentWidth, fixHeader, fixColumn, horizonScroll],
-  );
+      // Column
+      columns,
+      flattenColumns,
+      onColumnResize,
 
-  const ResizeContextValue = React.useMemo(() => ({ onColumnResize }), [onColumnResize]);
-
-  return (
-    <StickyContext.Provider value={supportSticky}>
-      <TableContext.Provider value={TableContextValue}>
-        <BodyContext.Provider value={BodyContextValue}>
-          <ExpandedRowContext.Provider value={ExpandedRowContextValue}>
-            <ResizeContext.Provider value={ResizeContextValue}>{fullTable}</ResizeContext.Provider>
-          </ExpandedRowContext.Provider>
-        </BodyContext.Provider>
-      </TableContext.Provider>
-    </StickyContext.Provider>
+      // Row
+      startRow,
+      endRow,
+      onHover,
+    ],
   );
+
+  return <TableContext.Provider value={TableContextValue}>{fullTable}</TableContext.Provider>;
 }
 
 const ImmutableTable = makeImmutable(Table);

src/context/BodyContext.tsx

@@ -4,6 +4,7 @@ export interface PerfRecord {
   renderWithProps: boolean;
 }
 
+// TODO: Remove when use `responsiveImmutable`
 const PerfContext = React.createContext<PerfRecord>({
   renderWithProps: false,
 });