diff --git a/src/Body/BodyRow.tsx b/src/Body/BodyRow.tsx index fe3f27214..4d5fefaca 100644 --- a/src/Body/BodyRow.tsx +++ b/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( scopeCellComponent, childrenColumnName, } = props; - const { prefixCls, fixedInfoList } = useContext(TableContext, [ - 'prefixCls', - 'fixedInfoList', - ]); const { + prefixCls, + fixedInfoList, flattenColumns, expandableType, expandRowByClick, @@ -67,7 +64,9 @@ function BodyRow( expandIcon, expandedRowRender, expandIconColumnIndex, - } = useContext(BodyContext, [ + } = useContext(TableContext, [ + 'prefixCls', + 'fixedInfoList', 'flattenColumns', 'expandableType', 'expandRowByClick', diff --git a/src/Body/ExpandedRow.tsx b/src/Body/ExpandedRow.tsx index c20be0c0d..a3ab140ae 100644 --- a/src/Body/ExpandedRow.tsx +++ b/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 diff --git a/src/Body/index.tsx b/src/Body/index.tsx index 0e448be7d..30606150a 100644 --- a/src/Body/index.tsx +++ b/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({ emptyNode, childrenColumnName, }: BodyProps) { - 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(data, childrenColumnName, expandedKeys, getRowKey); @@ -49,15 +46,6 @@ function Body({ 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({ flattenData, ]); - return ( - - - {bodyNode} - - - ); + return {bodyNode}; } const MemoBody = React.memo(Body); diff --git a/src/Cell/index.tsx b/src/Cell/index.tsx index 32c595133..73a3ea875 100644 --- a/src/Cell/index.tsx +++ b/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 - extends Pick { + extends Pick { prefixCls?: string; className?: string; record?: RecordType; @@ -89,7 +87,7 @@ interface InternalCellProps export type CellProps = Omit< InternalCellProps, - keyof HoverContextProps + keyof Omit >; const getTitleFromCellRenderChildren = ({ @@ -146,8 +144,10 @@ function Cell( 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, ref: React.Ref 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, diff --git a/src/Table.tsx b/src/Table.tsx index b3eb3a725..e8a934007 100644 --- a/src/Table.tsx +++ b/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(tableProps: TableProps { + setStartRow(start); + setEndRow(end); + }, []); + // ====================== Expand ====================== const expandableConfig = getExpandableProps(props); @@ -829,6 +834,7 @@ function Table(tableProps: TableProps ({ + // Table prefixCls, getComponent, scrollbarSize, @@ -837,13 +843,15 @@ function Table(tableProps: TableProps ({ - ...columnContext, tableLayout: mergedTableLayout, rowClassName, expandedRowClassName, @@ -854,10 +862,34 @@ function Table(tableProps: TableProps 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(tableProps: TableProps ({ - componentWidth, - fixHeader, - fixColumn, - horizonScroll, - }), - [componentWidth, fixHeader, fixColumn, horizonScroll], - ); + // Column + columns, + flattenColumns, + onColumnResize, - const ResizeContextValue = React.useMemo(() => ({ onColumnResize }), [onColumnResize]); - - return ( - - - - - {fullTable} - - - - + // Row + startRow, + endRow, + onHover, + ], ); + + return {fullTable}; } const ImmutableTable = makeImmutable(Table); diff --git a/src/context/BodyContext.tsx b/src/context/BodyContext.tsx deleted file mode 100644 index 166add7dc..000000000 --- a/src/context/BodyContext.tsx +++ /dev/null @@ -1,36 +0,0 @@ -import { createContext } from '@rc-component/context'; -import type { - ColumnsType, - ColumnType, - DefaultRecordType, - ExpandableType, - ExpandedRowRender, - RenderExpandIcon, - RowClassName, - TableLayout, - TriggerEventHandler, -} from '../interface'; - -export interface BodyContextProps { - rowClassName: string | RowClassName; - expandedRowClassName: RowClassName; - - columns: ColumnsType; - flattenColumns: readonly ColumnType[]; - - tableLayout: TableLayout; - - indentSize: number; - expandableType: ExpandableType; - expandRowByClick: boolean; - expandedRowRender: ExpandedRowRender; - expandIcon: RenderExpandIcon; - onTriggerExpand: TriggerEventHandler; - expandIconColumnIndex: number; - allColumnsFixedLeft: boolean; -} - -// const BodyContext = React.createContext(null); -const BodyContext = createContext(); - -export default BodyContext; diff --git a/src/context/ExpandedRowContext.tsx b/src/context/ExpandedRowContext.tsx deleted file mode 100644 index 39b91e420..000000000 --- a/src/context/ExpandedRowContext.tsx +++ /dev/null @@ -1,12 +0,0 @@ -import { createContext } from '@rc-component/context'; - -export interface ExpandedRowProps { - componentWidth: number; - fixHeader: boolean; - fixColumn: boolean; - horizonScroll: boolean; -} - -const ExpandedRowContext = createContext(null); - -export default ExpandedRowContext; diff --git a/src/context/HoverContext.tsx b/src/context/HoverContext.tsx deleted file mode 100644 index 2d7d3665e..000000000 --- a/src/context/HoverContext.tsx +++ /dev/null @@ -1,11 +0,0 @@ -import { createContext } from '@rc-component/context'; - -export interface HoverContextProps { - startRow: number; - endRow: number; - onHover: (start: number, end: number) => void; -} - -const HoverContext = createContext(); - -export default HoverContext; diff --git a/src/context/PerfContext.tsx b/src/context/PerfContext.tsx index dcc41f49f..bbe6cef59 100644 --- a/src/context/PerfContext.tsx +++ b/src/context/PerfContext.tsx @@ -4,6 +4,7 @@ export interface PerfRecord { renderWithProps: boolean; } +// TODO: Remove when use `responsiveImmutable` const PerfContext = React.createContext({ renderWithProps: false, }); diff --git a/src/context/ResizeContext.tsx b/src/context/ResizeContext.tsx deleted file mode 100644 index d5880789c..000000000 --- a/src/context/ResizeContext.tsx +++ /dev/null @@ -1,10 +0,0 @@ -import type * as React from 'react'; -import { createContext } from '@rc-component/context'; - -interface ResizeContextProps { - onColumnResize: (columnKey: React.Key, width: number) => void; -} - -const ResizeContext = createContext(); - -export default ResizeContext; diff --git a/src/context/StickyContext.tsx b/src/context/StickyContext.tsx deleted file mode 100644 index 420e8cc79..000000000 --- a/src/context/StickyContext.tsx +++ /dev/null @@ -1,6 +0,0 @@ -import * as React from 'react'; - -// Tell cell that browser support sticky -const StickyContext = React.createContext(false); - -export default StickyContext; diff --git a/src/context/TableContext.tsx b/src/context/TableContext.tsx index 69acb2765..049181378 100644 --- a/src/context/TableContext.tsx +++ b/src/context/TableContext.tsx @@ -1,20 +1,55 @@ import { createContext } from '@rc-component/context'; -import type { GetComponent } from '../interface'; +import type { + ColumnsType, + ColumnType, + ExpandableType, + ExpandedRowRender, + GetComponent, + RenderExpandIcon, + RowClassName, + TableLayout, + TriggerEventHandler, +} from '../interface'; import type { FixedInfo } from '../utils/fixUtil'; -export interface TableContextProps { - // Table context +export interface TableContextProps { + // Table prefixCls: string; - getComponent: GetComponent; - scrollbarSize: number; - direction: 'ltr' | 'rtl'; - fixedInfoList: readonly FixedInfo[]; - isSticky: boolean; + supportSticky: boolean; + componentWidth: number; + fixHeader: boolean; + fixColumn: boolean; + horizonScroll: boolean; + + // Body + rowClassName: string | RowClassName; + expandedRowClassName: RowClassName; + + tableLayout: TableLayout; + + indentSize: number; + expandableType: ExpandableType; + expandRowByClick: boolean; + expandedRowRender: ExpandedRowRender; + expandIcon: RenderExpandIcon; + onTriggerExpand: TriggerEventHandler; + expandIconColumnIndex: number; + allColumnsFixedLeft: boolean; + + // Column + columns: ColumnsType; + flattenColumns: readonly ColumnType[]; + onColumnResize: (columnKey: React.Key, width: number) => void; + + // Row + hoverStartRow: number; + hoverEndRow: number; + onHover: (start: number, end: number) => void; } const TableContext = createContext();