Skip to content
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.

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

Fixed didn't update fluid width when table was mounted #433

Merged
merged 2 commits into from
May 9, 2023

Conversation

fallenleavesguy
Copy link
Contributor

Fixed didn't update fluid width when table was mounted

@vercel
Copy link

vercel bot commented May 7, 2023

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name Status Preview Comments Updated (UTC)
rsuite-table ✅ Ready (Inspect) Visit Preview 💬 Add feedback May 8, 2023 0:09am

@codesandbox-ci
Copy link

codesandbox-ci bot commented May 7, 2023

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

Latest deployment of this branch, based on commit 3a5c14d:

Sandbox Source
React Configuration
Vanilla Configuration

@fallenleavesguy
Copy link
Contributor Author

新的应该可以了

@simonguo
Copy link
Member

simonguo commented May 8, 2023

@fallenleavesguy 你可以通过以下几种方式,安装当前 PR 的 rsuite-table,看看是否修复你业务中遇到的问题?

# yarn 1
yarn add https://pkg.csb.dev/rsuite/rsuite-table/commit/8ce09c80/rsuite-table
# yarn 2, 3
yarn add rsuite-table@https://pkg.csb.dev/rsuite/rsuite-table/commit/8ce09c80/rsuite-table/_pkg.tgz
# npm
npm i https://pkg.csb.dev/rsuite/rsuite-table/commit/8ce09c80/rsuite-table

@fallenleavesguy
Copy link
Contributor Author

fallenleavesguy commented May 8, 2023

@simonguo 我是直接依赖的rsuite,没办法直接切换到rsuite-table, 我在rsuite-table的demo里也重现出来了,修好了

useMount(() => {
clearCache();
});

Copy link
Member

Choose a reason for hiding this comment

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

表格的 width 计算是在 useTableDimension 的 useMount 中完成的,按理这里 clearCache 是清除单元格配置信息,怎么能解决你当前遇到的问题,我很好奇。
https://github.com/rsuite/rsuite-table/blob/main/src/utils/useTableDimension.ts#L252

Copy link
Contributor Author

@fallenleavesguy fallenleavesguy May 8, 2023

Choose a reason for hiding this comment

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

@simonguo
因为现在useDescriptor跳过了useMount,也就是跳过了第一次useLayoutEffect,没能在浏览器渲染之后完成宽度修改,取的Column的默认值100,width在useTableDimension中计算完成之后, useCellDescriptor不会更新。实际是只在mount之后的update才会更新。因为原来useUpdateEffect用的clearCache,所以这里也用clearCache让他更新。

原来的效果:

default.mov

修改之后的效果:

default.mov

Copy link
Member

Choose a reason for hiding this comment

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

在这里 clearCache() 上添加个注释.

// As the cells are cached before the table width is updated, it is necessary to clear the cache again. fix: #430

Copy link
Contributor Author

Choose a reason for hiding this comment

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

同意提交了

@fallenleavesguy
Copy link
Contributor Author

急急急,在线等😱😱😱🫣

add comment to explain clearCache in useMount

Co-authored-by: Simon Guo <[email protected]>
@fallenleavesguy
Copy link
Contributor Author

要上线了,急急急🥺😭

@simonguo simonguo merged commit f17c226 into rsuite:main May 9, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants