Skip to content

fix: header column resize delay #731

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
merged 2 commits into from
May 12, 2022
Merged

fix: header column resize delay #731

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
ffe8f1e
fix: header column resize delay
hemengke1997 Jan 6, 2022
b1e92c3
perf: remove useless code
hemengke1997 Jan 10, 2022
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
1 change: 1 addition & 0 deletions docs/examples/column-resize.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,6 +31,7 @@ interface DemoState {
columns: ColumnType<RecordType>[];
}


class Demo extends React.Component<{}, DemoState> {
state: DemoState = {
columns: [
Expand Down
25 changes: 1 addition & 24 deletions src/Body/MeasureRow.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,6 @@
import * as React from 'react';
import ResizeObserver from 'rc-resize-observer';
import MeasureCell from './MeasureCell';
import raf from 'rc-util/lib/raf';

export interface MeasureCellProps {
prefixCls: string;
Expand All @@ -10,27 +9,6 @@ export interface MeasureCellProps {
}

export default function MeasureRow({ prefixCls, columnsKey, onColumnResize }: MeasureCellProps) {
// delay state update while resize continuously, e.g. window resize
const resizedColumnsRef = React.useRef(new Map());
const rafIdRef = React.useRef(null);

const delayOnColumnResize = () => {
if (rafIdRef.current === null) {
rafIdRef.current = raf(() => {
resizedColumnsRef.current.forEach((width, columnKey) => {
onColumnResize(columnKey, width);
});
resizedColumnsRef.current.clear();
rafIdRef.current = null;
}, 2);
}
};

React.useEffect(() => {
return () => {
raf.cancel(rafIdRef.current);
};
}, []);
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

这样会不会造成 #706 提到的性能问题。

cc @curly210102

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

这里是对连续 resize 的优化，连续拖动的情况较少就先放一边了，主要考虑侧边栏切换动画的场景

可以先看下 Demo：

延迟可以减缓掉帧让 resize 看上去更流畅一点，但整体体验上差异比较细微，考虑到同步性 > 细微优化，个人觉得可以把延迟去掉。

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@curly210102 没太明白，是说这个 PR 没问题可合是么？

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

嗯，他的意思是可以合😁

return (
<tr
aria-hidden="true"
Expand All @@ -40,9 +18,8 @@ export default function MeasureRow({ prefixCls, columnsKey, onColumnResize }: Me
<ResizeObserver.Collection
onBatchResize={infoList => {
infoList.forEach(({ data: columnKey, size }) => {
resizedColumnsRef.current.set(columnKey, size.offsetWidth);
onColumnResize(columnKey, size.offsetWidth);
});
delayOnColumnResize();
}}
>
{columnsKey.map(columnKey => (
Expand Down