Skip to content

Commit 41caabc

Browse files
zombieJzombieJ
authored
refactor: Expandable without fixed column should not sticky (#450)
* not fixed expand when scroll x only * update test case
1 parent 4595542 commit 41caabc

File tree

9 files changed

+63
-8
lines changed

9 files changed

+63
-8
lines changed

‎.eslintrc.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ module.exports = {
44
...base,
55
rules: {
66
...base.rules,
7+
'arrow-parens': 0,
78
'react/no-array-index-key': 0,
89
'react/sort-comp': 0,
910
'@typescript-eslint/no-explicit-any': 1,

‎src/Body/BodyRow.tsx‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -52,6 +52,7 @@ function BodyRow<RecordType extends { children?: RecordType[] }>(props: BodyRowP
5252
const { prefixCls, direction } = React.useContext(TableContext);
5353
const {
5454
fixHeader,
55+
fixColumn,
5556
horizonScroll,
5657
componentWidth,
5758
flattenColumns,
@@ -196,6 +197,7 @@ function BodyRow<RecordType extends { children?: RecordType[] }>(props: BodyRowP
196197
)}
197198
prefixCls={prefixCls}
198199
fixHeader={fixHeader}
200+
fixColumn={fixColumn}
199201
horizonScroll={horizonScroll}
200202
component={RowComponent}
201203
componentWidth={componentWidth}

‎src/Body/ExpandedRow.tsx‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@ export interface ExpandedRowProps<RecordType> {
88
component: CustomizeComponent;
99
cellComponent: CustomizeComponent;
1010
fixHeader: boolean;
11+
fixColumn: boolean;
1112
horizonScroll: boolean;
1213
componentWidth: number;
1314
className: string;
@@ -22,6 +23,7 @@ function ExpandedRow<RecordType>({
2223
component: Component,
2324
cellComponent,
2425
fixHeader,
26+
fixColumn,
2527
horizonScroll,
2628
className,
2729
expanded,
@@ -34,7 +36,7 @@ function ExpandedRow<RecordType>({
3436
return React.useMemo(() => {
3537
let contentNode = children;
3638

37-
if (horizonScroll) {
39+
if (fixColumn) {
3840
contentNode = (
3941
<div
4042
style={{

‎src/Body/index.tsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -72,6 +72,7 @@ function Body<RecordType>({
7272
className={`${prefixCls}-placeholder`}
7373
prefixCls={prefixCls}
7474
fixHeader={fixHeader}
75+
fixColumn={horizonScroll}
7576
horizonScroll={horizonScroll}
7677
component={trComponent}
7778
componentWidth={componentWidth}

‎src/Table.tsx‎

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -370,6 +370,7 @@ function Table<RecordType extends DefaultRecordType>(props: TableProps<RecordTyp
370370
const stickyOffsets = useStickyOffsets(colWidths, flattenColumns.length, direction);
371371
const fixHeader = hasData && scroll && validateValue(scroll.y);
372372
const horizonScroll = scroll && validateValue(scroll.x);
373+
const fixColumn = horizonScroll && flattenColumns.some(({ fixed }) => fixed);
373374

374375
let scrollXStyle: React.CSSProperties;
375376
let scrollYStyle: React.CSSProperties;
@@ -469,11 +470,11 @@ function Table<RecordType extends DefaultRecordType>(props: TableProps<RecordTyp
469470
if (tableLayout) {
470471
return tableLayout;
471472
}
472-
if (fixHeader || flattenColumns.some(({ ellipsis, fixed }) => ellipsis || fixed)) {
473+
if (fixHeader || fixColumn || flattenColumns.some(({ ellipsis }) => ellipsis)) {
473474
return 'fixed';
474475
}
475476
return 'auto';
476-
}, [fixHeader, flattenColumns, tableLayout]);
477+
}, [fixHeader, fixColumn, flattenColumns, tableLayout]);
477478

478479
let groupTableNode: React.ReactNode;
479480

@@ -625,7 +626,7 @@ function Table<RecordType extends DefaultRecordType>(props: TableProps<RecordTyp
625626
[`${prefixCls}-ping-right`]: pingedRight,
626627
[`${prefixCls}-layout-fixed`]: tableLayout === 'fixed',
627628
[`${prefixCls}-fixed-header`]: fixHeader,
628-
[`${prefixCls}-fixed-column`]: horizonScroll,
629+
[`${prefixCls}-fixed-column`]: fixColumn,
629630
[`${prefixCls}-has-fix-left`]: flattenColumns[0] && flattenColumns[0].fixed,
630631
[`${prefixCls}-has-fix-right`]:
631632
flattenColumns[flattenColumns.length - 1] &&
@@ -670,6 +671,7 @@ function Table<RecordType extends DefaultRecordType>(props: TableProps<RecordTyp
670671
expandedRowClassName,
671672
componentWidth,
672673
fixHeader,
674+
fixColumn,
673675
horizonScroll,
674676
expandIcon: mergedExpandIcon,
675677
expandableType,
@@ -686,6 +688,7 @@ function Table<RecordType extends DefaultRecordType>(props: TableProps<RecordTyp
686688
expandedRowClassName,
687689
componentWidth,
688690
fixHeader,
691+
fixColumn,
689692
horizonScroll,
690693
mergedExpandIcon,
691694
expandableType,

‎src/context/BodyContext.tsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,7 @@ export interface BodyContextProps<RecordType = DefaultRecordType> {
2121
componentWidth: number;
2222
tableLayout: TableLayout;
2323
fixHeader: boolean;
24+
fixColumn: boolean;
2425
horizonScroll: boolean;
2526

2627
indentSize: number;

‎tests/FixedColumn.spec.js‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -158,7 +158,9 @@ describe('Table.FixedColumn', () => {
158158
});
159159

160160
it('fixed column renders correctly RTL', () => {
161-
const wrapper = mount(<Table columns={columns} data={data} direction="rtl" />);
161+
const wrapper = mount(
162+
<Table columns={columns} data={data} direction="rtl" scroll={{ x: 1 }} />,
163+
);
162164
expect(wrapper.render()).toMatchSnapshot();
163165
});
164166
it('has correct scroll classNames when table direction is RTL', () => {

‎tests/__snapshots__/FixedColumn.spec.js.snap‎

Lines changed: 45 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,16 +2,17 @@
22

33
exports[`Table.FixedColumn fixed column renders correctly RTL 1`] = `
44
<div
5-
class="rc-table rc-table-rtl rc-table-has-fix-left"
5+
class="rc-table rc-table-rtl rc-table-fixed-column rc-table-has-fix-left"
66
>
77
<div
88
class="rc-table-container"
99
>
1010
<div
1111
class="rc-table-content"
12+
style="overflow-x: scroll; overflow-y: hidden;"
1213
>
1314
<table
14-
style="table-layout: fixed;"
15+
style="width: 1px; min-width: 100%; table-layout: fixed;"
1516
>
1617
<colgroup>
1718
<col
@@ -105,6 +106,48 @@ exports[`Table.FixedColumn fixed column renders correctly RTL 1`] = `
105106
<tbody
106107
class="rc-table-tbody"
107108
>
109+
<tr
110+
aria-hidden="true"
111+
class="rc-table-measure-row"
112+
style="height: 0px;"
113+
>
114+
<td
115+
style="padding: 0px; border: 0px; height: 0px;"
116+
/>
117+
<td
118+
style="padding: 0px; border: 0px; height: 0px;"
119+
/>
120+
<td
121+
style="padding: 0px; border: 0px; height: 0px;"
122+
/>
123+
<td
124+
style="padding: 0px; border: 0px; height: 0px;"
125+
/>
126+
<td
127+
style="padding: 0px; border: 0px; height: 0px;"
128+
/>
129+
<td
130+
style="padding: 0px; border: 0px; height: 0px;"
131+
/>
132+
<td
133+
style="padding: 0px; border: 0px; height: 0px;"
134+
/>
135+
<td
136+
style="padding: 0px; border: 0px; height: 0px;"
137+
/>
138+
<td
139+
style="padding: 0px; border: 0px; height: 0px;"
140+
/>
141+
<td
142+
style="padding: 0px; border: 0px; height: 0px;"
143+
/>
144+
<td
145+
style="padding: 0px; border: 0px; height: 0px;"
146+
/>
147+
<td
148+
style="padding: 0px; border: 0px; height: 0px;"
149+
/>
150+
</tr>
108151
<tr
109152
class="rc-table-row rc-table-row-level-0"
110153
data-row-key="1"

‎tests/__snapshots__/Table.spec.js.snap‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -186,7 +186,7 @@ exports[`Table.Basic custom components renders fixed column and header correctly
186186

187187
exports[`Table.Basic custom components scroll content with scroll 1`] = `
188188
<div
189-
class="rc-table rc-table-fixed-header rc-table-fixed-column"
189+
class="rc-table rc-table-fixed-header"
190190
>
191191
<div
192192
class="rc-table-container"

0 commit comments

Comments
 (0)