Skip to content

Commit 2160731

Browse files
linxianxilinxianxi
committed
feat: add HeaderCell
1 parent 4fab1d2 commit 2160731

File tree

8 files changed

+50
-33
lines changed

8 files changed

+50
-33
lines changed

‎docs/examples/column-resize.tsx

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -54,10 +54,10 @@ const Demo = () => {
5454
scroll={{ y: 300, x: columns1.reduce((t, c) => t + (c.width as number), 0) }}
5555
columns={columns1}
5656
data={data}
57-
onColumnResizeComplete={({ columnKeyWidths }) => {
57+
onColumnResizeComplete={({ columnWidths }) => {
5858
setWidthMap(prev => {
5959
const result = new Map(prev);
60-
columnKeyWidths.forEach(i => {
60+
columnWidths.forEach(i => {
6161
result.set(i.columnKey, i.width);
6262
});
6363
return result;
@@ -71,10 +71,10 @@ const Demo = () => {
7171
scroll={{ y: 300, x: columns2.reduce((t, c) => t + (c.width as number), 0) }}
7272
columns={columns2}
7373
data={data}
74-
onColumnResizeComplete={({ columnKeyWidths }) => {
74+
onColumnResizeComplete={({ columnWidths }) => {
7575
setWidthMap(prev => {
7676
const result = new Map(prev);
77-
columnKeyWidths.forEach(i => {
77+
columnWidths.forEach(i => {
7878
result.set(i.columnKey, i.width);
7979
});
8080
return result;

‎src/Cell/index.tsx

Lines changed: 0 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,6 @@ import type {
1515
import useCellRender from './useCellRender';
1616
import useHoverState from './useHoverState';
1717
import { useEvent } from 'rc-util';
18-
import useCellResize from './useCellResize';
1918

2019
export interface CellProps<RecordType extends DefaultRecordType> {
2120
prefixCls?: string;
@@ -54,10 +53,6 @@ export interface CellProps<RecordType extends DefaultRecordType> {
5453
rowType?: 'header' | 'body' | 'footer';
5554

5655
isSticky?: boolean;
57-
58-
columnKey?: React.Key;
59-
60-
resizable?: boolean | { minWidth?: number };
6156
}
6257

6358
const getTitleFromCellRenderChildren = ({
@@ -120,9 +115,6 @@ function Cell<RecordType>(props: CellProps<RecordType>) {
120115
appendNode,
121116
additionalProps = {},
122117
isSticky,
123-
124-
columnKey,
125-
resizable,
126118
} = props;
127119
const cellPrefixCls = `${prefixCls}-cell`;
128120
const { supportSticky, allColumnsFixedLeft, rowHoverable } = useContext(TableContext, [
@@ -155,9 +147,6 @@ function Cell<RecordType>(props: CellProps<RecordType>) {
155147
fixedStyle.right = fixRight as number;
156148
}
157149

158-
// ====================== Resize =======================
159-
const resizeHandle = useCellResize(columnKey, isFixRight, cellPrefixCls, resizable);
160-
161150
// ================ RowSpan & ColSpan =================
162151
const mergedColSpan = legacyCellProps?.colSpan ?? additionalProps.colSpan ?? colSpan ?? 1;
163152
const mergedRowSpan = legacyCellProps?.rowSpan ?? additionalProps.rowSpan ?? rowSpan ?? 1;
@@ -263,7 +252,6 @@ function Cell<RecordType>(props: CellProps<RecordType>) {
263252
>
264253
{appendNode}
265254
{mergedChildNode}
266-
{rowType === 'header' && resizeHandle}
267255
</Component>
268256
);
269257
}

‎src/Header/HeaderCell.tsx

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
import * as React from 'react';
2+
import type { CellProps } from '../Cell';
3+
import Cell from '../Cell';
4+
import useCellResize from './useCellResize';
5+
import { useContext } from '@rc-component/context';
6+
import TableContext from '../context/TableContext';
7+
8+
interface HeaderCellProps<RecordType> extends CellProps<RecordType> {
9+
columnKey?: React.Key;
10+
resizable?: boolean | { minWidth?: number };
11+
}
12+
13+
function HeaderCell<RecordType>({
14+
columnKey,
15+
resizable,
16+
...cellProps
17+
}: HeaderCellProps<RecordType>) {
18+
const { supportSticky } = useContext(TableContext, ['supportSticky']);
19+
20+
const { fixRight, prefixCls } = cellProps;
21+
const isFixRight = typeof fixRight === 'number' && supportSticky;
22+
const cellPrefixCls = `${prefixCls}-cell`;
23+
24+
const resizeHandleNode = useCellResize(columnKey, isFixRight, cellPrefixCls, resizable);
25+
26+
return <Cell {...cellProps} appendNode={resizeHandleNode} />;
27+
}
28+
29+
export default HeaderCell;

‎src/Header/HeaderRow.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
11
import * as React from 'react';
2-
import Cell from '../Cell';
32
import TableContext from '../context/TableContext';
43
import { useContext } from '@rc-component/context';
54
import type {
@@ -11,6 +10,7 @@ import type {
1110
} from '../interface';
1211
import { getCellFixedInfo } from '../utils/fixUtil';
1312
import { getColumnsKey } from '../utils/valueUtil';
13+
import HeaderCell from './HeaderCell';
1414

1515
export interface RowProps<RecordType> {
1616
cells: readonly CellType<RecordType>[];
@@ -61,7 +61,7 @@ const HeaderRow = <RecordType extends any>(props: RowProps<RecordType>) => {
6161
}
6262

6363
return (
64-
<Cell
64+
<HeaderCell
6565
{...cell}
6666
scope={column.title ? (cell.colSpan > 1 ? 'colgroup' : 'col') : null}
6767
ellipsis={column.ellipsis}

‎src/Cell/useCellResize.tsx renamed to ‎src/Header/useCellResize.tsx

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -67,17 +67,17 @@ export default function useCelResize(
6767
addWidthColumnKey = colsKeys[index + 1] ?? colsKeys[index - 1];
6868
}
6969

70-
const columnKeyWidthsMap = new Map(colsWidths);
71-
columnKeyWidthsMap.set(columnKey, newWidth);
70+
const columnWidthsMap = new Map(colsWidths);
71+
columnWidthsMap.set(columnKey, newWidth);
7272
if (addWidthColumnKey) {
7373
const addWidthColumnNewWidth = colsWidths.get(addWidthColumnKey) + (oldWidth - newWidth);
74-
columnKeyWidthsMap.set(addWidthColumnKey, addWidthColumnNewWidth);
74+
columnWidthsMap.set(addWidthColumnKey, addWidthColumnNewWidth);
7575
}
76-
const columnKeyWidths = Array.from(columnKeyWidthsMap).map(([key, width]) => ({
76+
const columnWidths = Array.from(columnWidthsMap).map(([key, width]) => ({
7777
columnKey: key,
7878
width,
7979
}));
80-
onColumnResizeComplete?.({ columnKey, width: newWidth, columnKeyWidths });
80+
onColumnResizeComplete?.({ columnKey, width: newWidth, columnWidths });
8181
}
8282
};
8383

@@ -107,7 +107,7 @@ export default function useCelResize(
107107
setIsResizing(true);
108108
};
109109

110-
const resizeHandle = resizable && (
110+
const resizeHandleNode = resizable && (
111111
<>
112112
<div
113113
className={`${cellPrefixCls}-resize-handle`}
@@ -127,5 +127,5 @@ export default function useCelResize(
127127
</>
128128
);
129129

130-
return resizeHandle;
130+
return resizeHandleNode;
131131
}

‎src/Table.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -128,7 +128,7 @@ export interface TableProps<RecordType = any>
128128
onColumnResizeComplete?: (info: {
129129
columnKey: React.Key;
130130
width: number;
131-
columnKeyWidths: { columnKey: React.Key; width: number }[];
131+
columnWidths: { columnKey: React.Key; width: number }[];
132132
}) => void;
133133

134134
// =================================== Internal ===================================

‎src/context/TableContext.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -75,7 +75,7 @@ export interface TableContextProps<RecordType = any> {
7575
onColumnResizeComplete?: (info: {
7676
columnKey: React.Key;
7777
width: number;
78-
columnKeyWidths: { columnKey: React.Key; width: number }[];
78+
columnWidths: { columnKey: React.Key; width: number }[];
7979
}) => void;
8080
onResizingChange: (value: boolean) => void;
8181
}

‎tests/Resizable.spec.jsx

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -47,7 +47,7 @@ describe('Table.resizable', () => {
4747
onColumnResizeComplete={info => {
4848
setWidthMap(prev => {
4949
const result = new Map(prev);
50-
info.columnKeyWidths.forEach(i => {
50+
info.columnWidths.forEach(i => {
5151
result.set(i.columnKey, i.width);
5252
});
5353
return result;
@@ -99,7 +99,7 @@ describe('Table.resizable', () => {
9999
expect(onColumnResizeComplete).toHaveBeenCalledWith({
100100
columnKey: 'a',
101101
width: 500,
102-
columnKeyWidths: [
102+
columnWidths: [
103103
{ columnKey: 'a', width: 500 },
104104
{ columnKey: 'b', width: 400 },
105105
],
@@ -129,7 +129,7 @@ describe('Table.resizable', () => {
129129
onColumnResizeComplete={info => {
130130
setWidthMap(prev => {
131131
const result = new Map(prev);
132-
info.columnKeyWidths.forEach(i => {
132+
info.columnWidths.forEach(i => {
133133
result.set(i.columnKey, i.width);
134134
});
135135
return result;
@@ -183,7 +183,7 @@ describe('Table.resizable', () => {
183183
expect(onColumnResizeComplete).toHaveBeenCalledWith({
184184
columnKey: 'a',
185185
width: 300,
186-
columnKeyWidths: [
186+
columnWidths: [
187187
{ columnKey: 'a', width: 300 },
188188
{ columnKey: 'b', width: 500 },
189189
],
@@ -212,7 +212,7 @@ describe('Table.resizable', () => {
212212
onColumnResizeComplete={info => {
213213
setWidthMap(prev => {
214214
const result = new Map(prev);
215-
info.columnKeyWidths.forEach(i => {
215+
info.columnWidths.forEach(i => {
216216
result.set(i.columnKey, i.width);
217217
});
218218
return result;
@@ -264,7 +264,7 @@ describe('Table.resizable', () => {
264264
expect(onColumnResizeComplete).toHaveBeenCalledWith({
265265
columnKey: 'a',
266266
width: 400,
267-
columnKeyWidths: [
267+
columnWidths: [
268268
{ columnKey: 'a', width: 400 },
269269
{ columnKey: 'b', width: 800 },
270270
],

0 commit comments

Comments
 (0)