feat: add inner div for cell with append node #1285
Conversation
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
Walkthrough本次更改在组件内部增加了一个新的内层 Changes
Poem
Warning There were issues while running some tools. Please review the errors and either fix the tool's configuration or disable the tool if it's a critical failure. 🔧 ESLint
src/Cell/index.tsxOops! Something went wrong! :( ESLint: 8.57.1 ESLint couldn't find the config "prettier" to extend from. Please check that the name of the config is correct. The config "prettier" was referenced from the config file in "/.eslintrc.js". If you still have problems, please stop by https://eslint.org/chat/help to chat with the team. ✨ Finishing Touches
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
SupportNeed help? Create a ticket on our support page for assistance with any issues or questions. Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (2)
src/Cell/index.tsx (2)
241-241: 检查 inner wrapper 的 className 命名和样式定义
innerCellDivClassName使用了${cellPrefixCls}-inner-div，并在appendNode存在时额外添加了${cellPrefixCls}-with-append，与外层 cell 的同名 class 会导致样式冗余或冲突。- 建议：
- 为 inner div 增加独立的后缀 class，例如
${cellPrefixCls}-inner-div-with-append，以便更精确地控制样式。- 确认样式文件中已定义
.${cellPrefixCls}-inner-div及相关的 with-append 样式规则，否则该容器 div 可能没有任何视觉效果。
291-294: 校验新增的内层<div>包裹结构
- 新增
<div>将appendNode和mergedChildNode包裹，以提供样式挂钩点，逻辑合理。- 请确认：
- HTML 语义上允许在
<td>中嵌套<div>，且不会影响表格原有布局（可以在样式文件中为.${cellPrefixCls}-inner-div设置display: flex; align-items: center; height: 100%等属性来实现垂直居中）。- 是否需要为该
div添加额外的可访问性属性或自定义事件（如aria-、data-属性）以满足无障碍需求。- 建议：
- 更新或新增组件快照/单元测试，覆盖
inner-div的渲染和 className 行为，确保在未来改动时不被意外移除。
| @@ -287,8 +288,10 @@ function Cell<RecordType>(props: CellProps<RecordType>) { | |||
| colSpan={mergedColSpan !== 1 ? mergedColSpan : null} | |||
| rowSpan={mergedRowSpan !== 1 ? mergedRowSpan : null} | |||
| > | |||
| {appendNode} | |||
| {mergedChildNode} | |||
| <div className={innerCellDivClassName}> | |||
There was a problem hiding this comment.
你可以直接自定义 components ，提供出来一个自带 div 的 td 就够了
背景：当想让nest expandable button垂直居中时，当前没有很好的方式在不影响父元素table-cell的同时，实现expandable居中，因此想要在外层加一个div，方便后续基于这个div进行自定义的扩展。
修改方式：通过在外层新增div的方式，增加样式扩展点，方便样式定制。
Summary by CodeRabbit