feat(table): add tooltip props#9438
Conversation
- Updated the `ellipsis` property in various components to use the new `ProEllipsis` type for improved type safety and flexibility. - Modified the `LabelIconTip`, `ProDescriptionsItemProps`, and `ProColumnType` to accommodate the new ellipsis structure, allowing for tooltip integration. - Enhanced the `genCopyable` utility to better manage ellipsis behavior, including support for tooltip properties. - Updated documentation to reflect these changes, ensuring clarity on the new ellipsis functionality.
…nction - Adjusted the order of properties in the tooltip object within the genEllipsis function to ensure proper integration of the tooltip title with existing ellipsis properties. - This change enhances the functionality of the genCopyable utility by maintaining the intended behavior of tooltip display.
dosubot
bot
added
the
size:L
Summary of ChangesHello @zzjiaxiang, I'm Gemini Code Assist1! I'm currently reviewing this pull request and will post my feedback shortly. In the meantime, here's a summary to help you and other reviewers quickly get up to speed! 此拉取请求旨在增强表格、描述列表等组件的 Highlights
🧠 New Feature in Public Preview: You can now enable Memory to help Gemini Code Assist learn from your team's feedback. This makes future code reviews more consistent and personalized to your project's style. Click here to enable Memory in your admin console. Changelog
Activity
Using Gemini Code AssistThe full guide for Gemini Code Assist can be found on our documentation page, here are some quick tips. Invoking Gemini You can request assistance from Gemini at any point by creating a comment using either
Customization To customize Gemini Code Assist for GitHub experience, repository maintainers can create a configuration file and/or provide a custom code review style guide (such as PEP-8 for Python) by creating and adding files to a Limitations & Feedback Gemini Code Assist may make mistakes. Please leave feedback on any instances where its feedback is incorrect or counter productive. You can react with 👍 and 👎 on @gemini-code-assist comments. If you're interested in giving your feedback about your experience with Gemini Code Assist for Github and other Google products, sign up here. You can also get AI-powered code generation, chat, as well as code reviews directly in the IDE at no cost with the Gemini Code Assist IDE Extension. Footnotes
|
📝 WalkthroughWalkthrough将 ellipsis 的类型从简单布尔/{showTitle?: boolean} 扩展为可配置的 Changes
Sequence Diagram(s)sequenceDiagram
participant Dev as 开发者/配置 columns
participant TableComp as ProTable/Descriptions
participant Gen as genEllipsis
participant Tooltip as Tooltip 组件
participant DOM as 渲染输出
Dev->>TableComp: 提供 column.ellipsis (ProEllipsis 或 boolean)
TableComp->>Gen: 传入文本与 ellipsis 配置 (needTranText 等)
Gen->>Gen: 判断 ellipsis 与文本，合并 ellipsis.tooltip（若为对象）
alt tooltip 应显示
Gen->>Tooltip: 创建 Tooltip (合并后的 props)
Tooltip->>DOM: 包裹并渲染带 tooltip 的内容
else 不显示 tooltip
Gen->>DOM: 直接返回被截断的 DOM 文本
end
预估代码审查工作量🎯 3 (中等) | ⏱️ ~20 分钟 步骤说明此变更通过引入新的 变更
诗歌
🚥 Pre-merge checks | ✅ 5✅ Passed checks (5 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing touches
🧪 Generate unit tests (beta)
No actionable comments were generated in the recent review. 🎉 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. Comment |
![gemini-code-assist[bot]](https://avatars.githubusercontent.com/in/956858?s=60&v=4){kind=small}
src/utils/genCopyable/index.tsx
Outdated
| tooltip?: TooltipProps; | ||
| }; | ||
|
|
||
| export type ProEllipsis = { ellipsis?: ProEllipsisTooltip } | boolean; |
There was a problem hiding this comment.
ProEllipsis 的类型定义似乎不正确。当前的定义 { ellipsis?: ProEllipsisTooltip } | boolean 会导致一个奇怪的 API 结构，例如 ellipsis={{ ellipsis: { tooltip: ... } }}，这可能不是你的本意，并且会让使用者感到困惑。
从 getEllipsis 函数的实现来看，item.ellipsis 被期望为 ProEllipsisTooltip | boolean 类型。因此，ProEllipsis 类型应该直接是 ProEllipsisTooltip 和 boolean 的联合类型。
| export type ProEllipsis = { ellipsis?: ProEllipsisTooltip } | boolean; | |
| export type ProEllipsis = ProEllipsisTooltip | boolean; |
site/components/table/index.md
Outdated
| | -------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------ | ----------------------------------------------------------------------------------------------------------------- | ------ | | ||
| | title | 与 antd 中基本相同，但是支持通过传入一个方法 | `ReactNode \| ((config: ProColumnType<T>, type: ProTableTypes) => ReactNode)` | - | | ||
| | tooltip | 会在 title 之后展示一个 icon，hover 之后提示一些信息 | `string` | - | | ||
| | ellipsis | 是否自动缩略 | boolean \| showTitle?: boolean,tooltip: [TooltipProps](https://ant-design.antgroup.com/components/tooltip-cn#api) | - | |
There was a problem hiding this comment.
ellipsis 属性的类型在文档中的格式不太正确。为了更清晰地展示其结构，建议使用反引号包裹，并明确表示 tooltip 是对象的一部分。
建议修改为：
`boolean | { showTitle?: boolean; tooltip?: [TooltipProps](https://ant-design.antgroup.com/components/tooltip-cn#api) }`
这样更易读，也更准确地反映了 ellipsis 的类型。
| | ellipsis | 是否自动缩略 | boolean \| showTitle?: boolean,tooltip: [TooltipProps](https://ant-design.antgroup.com/components/tooltip-cn#api) | - | | |
| | ellipsis | 是否自动缩略 | `boolean | { showTitle?: boolean; tooltip?: [TooltipProps](https://ant-design.antgroup.com/components/tooltip-cn#api) }` | - | |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 6
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (1)
src/descriptions/index.tsx (1)
50-50:⚠️ Potential issue | 🟡 MinorJSDoc 注释与新类型不一致
第 50 行的 JSDoc 仍然描述旧的类型
{boolean | { showTitle?: boolean }}，但ellipsis已更新为ProEllipsis类型（支持tooltip属性）。📝 建议更新 JSDoc
- * `@property` {boolean | { showTitle?: boolean }} [ellipsis] - 是否展示省略号，如果是一个对象，可以设置鼠标悬浮时是否展示完整的内容 + * `@property` {ProEllipsis} [ellipsis] - 是否展示省略号，如果是一个对象，可以设置 showTitle 和 tooltip 属性
🤖 Fix all issues with AI agents
In `@site/components/table/index.md`:
- Line 256: The table prop type for ellipsis is malformed; update the type
expression to a proper object form such as "{ showTitle?: boolean; tooltip?:
TooltipProps }" (referencing TooltipProps) so it conforms to TypeScript syntax
and mark the new tooltip sub-property with its available version (e.g., add an
"@since x.x.x" note next to tooltip in the description); ensure you include the
TooltipProps link text and keep showTitle optional as shown by "showTitle?:
boolean".
- Around line 252-282: Update the English table docs so the ellipsis prop's type
matches the Chinese version: locate the ellipsis row in the English markdown
(index.en-US.md) and change its Type column from "boolean" to "boolean | {
showTitle?: boolean; tooltip?: TooltipProps }" (and add a link/reference to
TooltipProps like the Chinese doc does), ensuring the default/description text
remains consistent with the Chinese entry; adjust formatting to match the
surrounding table syntax for the render of the ellipsis row.
In `@src/table/typing.ts`:
- Line 122: 修复类型嵌套：当前 ProEllipsis 定义为 `{ ellipsis?: ProEllipsisTooltip } |
boolean` 导致双重嵌套，与运行时和测试期望不符。将 ProEllipsis 改为直接的联合类型 `boolean | { showTitle?:
boolean; tooltip?: TooltipProps }`（去掉中间的 ProEllipsisTooltip 包装），并保持 `ellipsis?:
ProEllipsis` 的使用不变，确保能够接受像 `ellipsis: { showTitle: true }` 的写法并与 Ant Design 的
TooltipProps 对齐。
In `@src/utils/genCopyable/index.tsx`:
- Around line 23-28: The return type of getEllipsis is incorrect: it declares
ProEllipsisTooltip | boolean but returns item.ellipsis which is a ProEllipsis
(the wrapper type) — update the function signature to return ProEllipsis |
boolean (or the precise type that matches item.ellipsis) and adjust any
downstream usages if needed; ensure getEllipsis's parameter is typed (replace
any with the correct input type) so TypeScript will validate that getEllipsis
returns the declared ProEllipsis (or boolean) and stays consistent with the
fixed ProEllipsis and ProEllipsisTooltip types.
- Around line 6-11: The ProEllipsis type is incorrect and causes a double-nested
ellipsis shape; change the exported type from "export type ProEllipsis = {
ellipsis?: ProEllipsisTooltip } | boolean;" to "export type ProEllipsis =
ProEllipsisTooltip | boolean;" so that item.ellipsis matches the runtime shape
used in getEllipsis (which accesses item.ellipsis?.showTitle) and update any
references or imports expecting the old nested form accordingly.
- Around line 44-49: The early return in the needTranText branch returns a fixed
tooltip object and ignores user-specified ellipsis.tooltip options (e.g.
destroyTooltipOnHide); update the needTranText branch in genCopyable (the block
using needTranText, item?.tooltip and dom) to merge/forward
item.ellipsis?.tooltip (or item.tooltip per existing shape) into the returned
tooltip props so any custom tooltip attributes are preserved—i.e., build the
tooltip object by spreading the user tooltip options and then setting/overriding
the content wrapper (className/"pro-table-tooltip-text") so custom props like
destroyTooltipOnHide are passed through.
🧹 Nitpick comments (1)
src/utils/index.tsx (1)
58-58: 建议同时导出ProEllipsisTooltip类型
ProEllipsis引用了ProEllipsisTooltip，用户在做类型缩窄或单独使用 tooltip 配置时可能需要该类型。当前仅导出了ProEllipsis。♻️ 建议补充导出
-import type { ProEllipsis } from './genCopyable'; +import type { ProEllipsis, ProEllipsisTooltip } from './genCopyable';export type { ProEllipsis, + ProEllipsisTooltip, ProFormInstanceType,Based on learnings: "Applies to **/*index.{ts,tsx} : Export all public interface types for user convenience"
Also applies to: 137-138
- Refined the `ProEllipsis` type definition in the genCopyable utility to enhance type safety by allowing a direct use of `ProEllipsisTooltip` or a boolean value. - This change simplifies the type structure, ensuring better integration and understanding of the ellipsis functionality across components.
2 participants
透传 tooltip 的属性
close #9297
Summary by CodeRabbit
新功能
改进