Skip to content

fix: Header flicker #507

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
zombieJ merged 2 commits into from
Jul 22, 2020
Merged

fix: Header flicker #507

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
f543d70
fix: Not use row even fixed header do not have a data
zombieJ Jul 22, 2020
5495281
update test case
zombieJ Jul 22, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
32 changes: 22 additions & 10 deletions src/Header/FixedHeader.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,25 @@
import * as React from 'react';
import { useMemo } from 'react';
import Header, { HeaderProps } from './Header';
import ColGroup from '../ColGroup';
import { ColumnsType, ColumnType } from '../interface';
import TableContext from '../context/TableContext';

function useColumnWidth(colWidths: number[], columCount: number) {
return useMemo(() => {
const cloneColumns: number[] = [];
for (let i = 0; i < columCount; i += 1) {
const val = colWidths[i];
if (val) {
cloneColumns[i] = val;
} else {
return null;
}
}
return cloneColumns;
}, [colWidths.join('_'), columCount]);
}

export interface FixedHeaderProps<RecordType> extends HeaderProps<RecordType> {
colWidths: number[];
columCount: number;
Expand All @@ -30,18 +46,18 @@ function FixedHeader<RecordType>({
}),
};

const columnsWithScrollbar = React.useMemo<ColumnsType<RecordType>>(
const columnsWithScrollbar = useMemo<ColumnsType<RecordType>>(
() => (scrollbarSize ? [...columns, ScrollBarColumn] : columns),
[scrollbarSize, columns],
);

const flattenColumnsWithScrollbar = React.useMemo<ColumnType<RecordType>[]>(
const flattenColumnsWithScrollbar = useMemo<ColumnType<RecordType>[]>(
() => (scrollbarSize ? [...flattenColumns, ScrollBarColumn] : flattenColumns),
[scrollbarSize, flattenColumns],
);

// Calculate the sticky offsets
const headerStickyOffsets = React.useMemo(() => {
const headerStickyOffsets = useMemo(() => {
const { right, left } = stickyOffsets;
return {
...stickyOffsets,
Expand All @@ -50,16 +66,12 @@ function FixedHeader<RecordType>({
};
}, [scrollbarSize, stickyOffsets]);

const cloneWidths: number[] = [];
for (let i = 0; i < columCount; i += 1) {
cloneWidths[i] = colWidths[i];
}
const columnWidthsReady = !colWidths.every(width => !width);
const mergedColumnWidth = useColumnWidth(colWidths, columCount);

return (
<table style={{ tableLayout: 'fixed', visibility: columnWidthsReady ? null : 'hidden' }}>
<table style={{ tableLayout: 'fixed', visibility: mergedColumnWidth ? null : 'hidden' }}>
<ColGroup
colWidths={[...colWidths, scrollbarSize]}
colWidths={mergedColumnWidth ? [...mergedColumnWidth, scrollbarSize] : []}
columCount={columCount + 1}
columns={flattenColumnsWithScrollbar}
/>
Expand Down
2 changes: 1 addition & 1 deletion src/Table.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -373,7 +373,7 @@ function Table<RecordType extends DefaultRecordType>(props: TableProps<RecordTyp
const pureColWidths = colsKeys.map(columnKey => colsWidths.get(columnKey));
const colWidths = React.useMemo(() => pureColWidths, [pureColWidths.join('_')]);
const stickyOffsets = useStickyOffsets(colWidths, flattenColumns.length, direction);
const fixHeader = hasData && scroll && validateValue(scroll.y);
const fixHeader = scroll && validateValue(scroll.y);
const horizonScroll = scroll && validateValue(scroll.x);
const fixColumn = horizonScroll && flattenColumns.some(({ fixed }) => fixed);

Expand Down
88 changes: 42 additions & 46 deletions tests/__snapshots__/FixedColumn.spec.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1428,27 +1428,9 @@ exports[`Table.FixedColumn renders correctly scrollXY - with data 1`] = `
style="overflow: hidden;"
>
<table
style="table-layout: fixed;"
style="table-layout: fixed; visibility: hidden;"
>
<colgroup>
<col
style="width: 93px; min-width: 93px;"
/>
<col />
<col />
<col />
<col />
<col />
<col />
<col />
<col />
<col />
<col />
<col />
<col
style="width: 15px; min-width: 15px;"
/>
</colgroup>
<colgroup />
<thead
class="rc-table-thead"
>
Expand Down Expand Up @@ -2073,38 +2055,19 @@ exports[`Table.FixedColumn renders correctly scrollXY - with data 1`] = `

exports[`Table.FixedColumn renders correctly scrollXY - without data 1`] = `
<div
class="rc-table rc-table-fixed-column rc-table-scroll-horizontal rc-table-has-fix-left rc-table-has-fix-right"
class="rc-table rc-table-fixed-header rc-table-fixed-column rc-table-scroll-horizontal rc-table-has-fix-left rc-table-has-fix-right"
>
<div
class="rc-table-container"
>
<div
class="rc-table-content"
style="overflow-x: auto; overflow-y: hidden;"
class="rc-table-header"
style="overflow: hidden;"
>
<table
style="width: 1200px; min-width: 100%; table-layout: fixed;"
style="table-layout: fixed; visibility: hidden;"
>
<colgroup>
<col
style="width: 100px; min-width: 100px;"
/>
<col
style="width: 100px; min-width: 100px;"
/>
<col />
<col />
<col />
<col />
<col />
<col />
<col />
<col />
<col />
<col
style="width: 100px; min-width: 100px;"
/>
</colgroup>
<colgroup />
<thead
class="rc-table-thead"
>
Expand Down Expand Up @@ -2168,12 +2131,45 @@ exports[`Table.FixedColumn renders correctly scrollXY - without data 1`] = `
</th>
<th
class="rc-table-cell rc-table-cell-fix-right rc-table-cell-fix-right-first"
style="position: sticky; right: 0px;"
style="position: sticky; right: 15px;"
>
title12
</th>
<th
class="rc-table-cell rc-table-cell-fix-right rc-table-cell-scrollbar"
style="position: sticky; right: 0px;"
/>
</tr>
</thead>
</table>
</div>
<div
class="rc-table-body"
style="overflow-x: auto; overflow-y: scroll; max-height: 100px;"
>
<table
style="width: 1200px; min-width: 100%; table-layout: fixed;"
>
<colgroup>
<col
style="width: 100px; min-width: 100px;"
/>
<col
style="width: 100px; min-width: 100px;"
/>
<col />
<col />
<col />
<col />
<col />
<col />
<col />
<col />
<col />
<col
style="width: 100px; min-width: 100px;"
/>
</colgroup>
<tbody
class="rc-table-tbody"
>
Expand Down Expand Up @@ -2228,7 +2224,7 @@ exports[`Table.FixedColumn renders correctly scrollXY - without data 1`] = `
>
<div
class="rc-table-expanded-row-fixed"
style="width: 0px; position: sticky; left: 0px; overflow: hidden;"
style="width: -15px; position: sticky; left: 0px; overflow: hidden;"
>
No Data
</div>
Expand Down
23 changes: 3 additions & 20 deletions tests/__snapshots__/Table.spec.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -79,14 +79,7 @@ exports[`Table.Basic custom components renders fixed column and header correctly
<table
style="table-layout: fixed; visibility: hidden;"
>
<colgroup>
<col />
<col />
<col />
<col
style="width: 15px; min-width: 15px;"
/>
</colgroup>
<colgroup />
<thead
class="rc-table-thead"
name="my-header-wrapper"
Expand Down Expand Up @@ -196,19 +189,9 @@ exports[`Table.Basic custom components scroll content with scroll 1`] = `
style="overflow: hidden;"
>
<table
style="table-layout: fixed;"
style="table-layout: fixed; visibility: hidden;"
>
<colgroup>
<col
style="width: 0px; min-width: 0;"
/>
<col
style="width: 888px; min-width: 888px;"
/>
<col
style="width: 15px; min-width: 15px;"
/>
</colgroup>
<colgroup />
<thead
class="rc-table-thead"
>
Expand Down