feat: typescript parameter type definition in Tree component titleRender api #946
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/interface.tsxOops! Something went wrong! :( ESLint: 8.57.1 ESLint couldn't find the plugin "eslint-plugin-react". (The package "eslint-plugin-react" was not found when loaded as a Node module from the directory "".) It's likely that the plugin isn't installed correctly. Try reinstalling by running the following: The plugin "eslint-plugin-react" was referenced from the config file in ".eslintrc.js » /node_modules/.pnpm/@umijs+fabric@4.0.1_jest@29.7.0_@types+node@22.15.26__postcss@8.5.4/node_modules/@umijs/fabric/dist/eslint.js". If you still can't figure out the problem, please stop by https://eslint.org/chat/help to chat with the team. 📜 Recent review detailsConfiguration used: CodeRabbit UI 📒 Files selected for processing (1)
🚧 Files skipped from review as they are similar to previous changes (1)
✨ 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 (
|
src/interface.tsx
Outdated
| export type DataNode = FieldDataNode<{ | ||
| key: Key; | ||
| title?: React.ReactNode | ((data: DataNode) => React.ReactNode); | ||
| name?: React.ReactNode | ((data: DataNode) => React.ReactNode); |
There was a problem hiding this comment.
🛠️ Refactor suggestion
新增 name 属性需同步更新映射配置
在 DataNode 上新增了可选 name 属性，但在 FieldNames 接口中没有对应的映射字段，用户无法通过 fieldNames 覆盖该字段。建议在 FieldNames 中添加：
export interface FieldNames {
title?: string;
+ /** @description 节点数据中对应的名称字段，支持 titleRender API */
+ name?: string;
/** @private Internal usage for `rc-tree-select`, safe to remove if no need */
_title?: string[];
key?: string;
children?: string;
}并补充相应的 JSDoc 或文档说明，确保开发者能清晰了解 name 字段的用途与使用方式。
📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| name?: React.ReactNode | ((data: DataNode) => React.ReactNode); | |
| export interface FieldNames { | |
| title?: string; | |
| /** @description 节点数据中对应的名称字段，支持 titleRender API */ | |
| name?: string; | |
| /** @private Internal usage for `rc-tree-select`, safe to remove if no need */ | |
| _title?: string[]; | |
| key?: string; | |
| children?: string; | |
| } |
🤖 Prompt for AI Agents
In src/interface.tsx at line 80, the new optional 'name' property added to
DataNode lacks a corresponding mapping in the FieldNames interface, preventing
users from overriding it via fieldNames. To fix this, add a 'name' field to the
FieldNames interface with appropriate typing, and include clear JSDoc or
documentation comments explaining its purpose and usage so developers understand
how to use this new field.
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (1)
README.md (1)
77-77: 修正语法与标点
为提升可读性和语法准确性，建议在此行添加逗号并调整表达：-| treeData | treeNodes data Array, if set it then you need not to construct children TreeNode. (value should be unique across the whole array) | - | +| treeData | treeNodes data Array, if set it, then you do not need to construct child TreeNodes (value should be unique across the whole array) | - |🧰 Tools
🪛 LanguageTool
[typographical] ~77-~77: Consider adding a comma.
Context: ...eeData | treeNodes data Array, if set it then you need not to construct children Tree...(IF_THEN_COMMA)
[grammar] ~77-~77: Did you mean “construct”?
Context: ...data Array, if set it then you need not to construct children TreeNode. (value should be uni...(NEEDNT_TO_DO_AND_DONT_NEED_DO)
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (1)
README.md(5 hunks)
🧰 Additional context used
🪛 LanguageTool
README.md
[typographical] ~77-~77: Consider adding a comma.
Context: ...eeData | treeNodes data Array, if set it then you need not to construct children Tree...
(IF_THEN_COMMA)
[grammar] ~77-~77: Did you mean “construct”?
Context: ...data Array, if set it then you need not to construct children TreeNode. (value should be uni...
(NEEDNT_TO_DO_AND_DONT_NEED_DO)
🔇 Additional comments (4)
README.md (4)
5-5: 合并徽章行的优化通过
将多个 badge 行合并到一行使文档更紧凑，阅读体验良好。
43-43: 在 Usage 前添加空行
添加空行使> Note段落与标题分隔更清晰，提升可读性。
94-94: dropIndicatorRender 格式调整合理
对管道符后添加空格以保持表格对齐，没有问题。
112-112: 请确认name属性的默认值
当前默认值设为'---'，建议核实是否符合预期（如与title保持一致，或改为无默认值）。
There was a problem hiding this comment.
Actionable comments posted: 1
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (1)
README.md(5 hunks)
🧰 Additional context used
🪛 LanguageTool
README.md
[typographical] ~77-~77: Consider adding a comma.
Context: ...eeData | treeNodes data Array, if set it then you need not to construct children Tree...
(IF_THEN_COMMA)
[grammar] ~77-~77: Did you mean “construct”?
Context: ...data Array, if set it then you need not to construct children TreeNode. (value should be uni...
(NEEDNT_TO_DO_AND_DONT_NEED_DO)
🔇 Additional comments (4)
README.md (4)
5-5: 合并徽章行以提升文档紧凑度
将多行徽章整合为一行，显著减少文档长度并保持可读性，效果良好。
43-43: 空行分隔增强可读性
在 “## Usage” 标题和示例注释之间插入空行，更清晰地区分文档结构。
94-94: 批准dropIndicatorRender属性格式更新
新增管道符前后空格，与文档中其他属性类型表格保持一致，提升可读性。
112-112: 新增name属性文档
已在 TreeNode props 表格中添加name属性，类型与title保持一致，默认值为'---'，文档与代码变更保持同步。
README.md
Outdated
| | showIcon | whether show icon | bool | true | | ||
| | showLine | whether show line | bool | false | | ||
| | treeData | treeNodes data Array, if set it then you need not to construct children TreeNode. (value should be unique across the whole array) | array<{key,title,children, [disabled, selectable]}> | - | | ||
| | treeData | treeNodes data Array, if set it then you need not to construct children TreeNode. (value should be unique across the whole array) | array<{key,title,namechildren, [disabled, selectable]}> | - | |
There was a problem hiding this comment.
修复 treeData 表格的列对齐、类型与语法
目前该行将 - 错误地放在类型列，缺少类型定义，并且描述中缺少逗号且语法 “need not to construct” 建议简化。
建议使用以下 diff：
-| treeData | treeNodes data Array, if set it then you need not to construct children TreeNode. (value should be unique across the whole array) | - |
+| treeData | treeNodes data Array, if set it then you need not construct children TreeNode. (value should be unique across the whole array) | array<{ key, title, name, children, [disabled, selectable] }> | - |Committable suggestion skipped: line range outside the PR's diff.
🧰 Tools
🪛 LanguageTool
[typographical] ~77-~77: Consider adding a comma.
Context: ...eeData | treeNodes data Array, if set it then you need not to construct children Tree...
(IF_THEN_COMMA)
[grammar] ~77-~77: Did you mean “construct”?
Context: ...data Array, if set it then you need not to construct children TreeNode. (value should be uni...
(NEEDNT_TO_DO_AND_DONT_NEED_DO)
🤖 Prompt for AI Agents
In README.md at line 77, fix the table row for the treeData prop by moving the
'-' from the type column to the default column, properly defining the type as an
array of objects with keys like key, title, name, children, and optional
disabled and selectable. Also, correct the description by adding missing commas
and simplifying the phrase "if set it then you need not to construct children
TreeNode" to a clearer form without grammatical errors.
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Nitpick comments (1)
README.md (1)
77-77: 建议优化treeData描述的语法
描述中 “if set it then you need not to construct children TreeNode” 语句冗长且缺少逗号，建议改为更简洁的英文并修正标点。例如：-| treeData | treeNodes data Array, if set it then you need not to construct children TreeNode. (value should be unique across the whole array) | array<{key,title,name,children, [disabled, selectable]}> | - | +| treeData | Tree nodes data array. If provided, child TreeNode construction is not required. (value should be unique across the whole array) | Array<{ key: string; title: ReactNode; name?: ReactNode; children?: DataNode[]; disabled?: boolean; selectable?: boolean }> | - |🧰 Tools
🪛 LanguageTool
[typographical] ~77-~77: Consider adding a comma.
Context: ...eeData | treeNodes data Array, if set it then you need not to construct children Tree...(IF_THEN_COMMA)
[grammar] ~77-~77: Did you mean “construct”?
Context: ...data Array, if set it then you need not to construct children TreeNode. (value should be uni...(NEEDNT_TO_DO_AND_DONT_NEED_DO)
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (1)
README.md(5 hunks)
🧰 Additional context used
🪛 LanguageTool
README.md
[typographical] ~77-~77: Consider adding a comma.
Context: ...eeData | treeNodes data Array, if set it then you need not to construct children Tree...
(IF_THEN_COMMA)
[grammar] ~77-~77: Did you mean “construct”?
Context: ...data Array, if set it then you need not to construct children TreeNode. (value should be uni...
(NEEDNT_TO_DO_AND_DONT_NEED_DO)
🔇 Additional comments (3)
README.md (3)
5-5: 批准徽章行合并
该行将多个徽章合并到单行，提升了头部的紧凑性且不影响可读性。
43-43: 批准使用说明前的空行插入
在> Note:之前添加空行，增强了文档格式的可读性。
94-94: 批准dropIndicatorRender格式修复
在该行添加了缺失的空格，使表格格式与其他行一致。
README.md
Outdated
| | disabled | whether disabled the treeNode | bool | false | | ||
| | disableCheckbox | whether disable the treeNode' checkbox | bool | false | | ||
| | title | tree/subTree's title | String/element/((data: DataNode) => React.ReactNode) | '---' | | ||
| | name | tree/subTree's name | String/element/((data: DataNode) => React.ReactNode) | '---' | |
There was a problem hiding this comment.
💡 Verification agent
🧩 Analysis chain
验证 name 属性与实际类型定义一致
文档中为 TreeNode 增加了可选的 name 属性，请确认 src/interface.tsx 中的 DataNode 接口已同步声明该属性。可以运行以下脚本进行校验：
🏁 Script executed:
#!/bin/bash
# 验证 DataNode 接口是否包含可选的 name 属性
rg "interface DataNode" -A3 src/interface.tsx | grep "name\\?" || echo "未找到 name? 定义"Length of output: 98
请为 DataNode 接口添加可选的 name 属性
当前 src/interface.tsx 中 DataNode 接口缺少可选的 name 定义，需与 README 中的描述保持一致：
- 文件：
src/interface.tsx - 在
DataNode接口内新增如下字段：interface DataNode { // ... 其他字段 + /** 节点名称，可选，支持字符串、React 元素或返回 ReactNode 的函数 */ + name?: string | React.ReactNode | ((data: DataNode) => React.ReactNode); }
📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| | name | tree/subTree's name | String/element/((data: DataNode) => React.ReactNode) | '---' | | |
| // File: src/interface.tsx | |
| interface DataNode { | |
| // ... 其他字段 | |
| /** 节点名称，可选，支持字符串、React 元素或返回 ReactNode 的函数 */ | |
| name?: string | React.ReactNode | ((data: DataNode) => React.ReactNode); | |
| } |
🤖 Prompt for AI Agents
In src/interface.tsx around the DataNode interface definition, add an optional
'name' property to the interface to match the README documentation. This
property should be declared as 'name?: string | React.ReactNode | ((data:
DataNode) => React.ReactNode);' to ensure consistency between the interface and
the documented usage.
src/interface.tsx
Outdated
| export type DataNode = FieldDataNode<{ | ||
| key: Key; | ||
| title?: React.ReactNode | ((data: DataNode) => React.ReactNode); | ||
| name?: React.ReactNode | ((data: DataNode) => React.ReactNode); |
There was a problem hiding this comment.
name 不是 Tree 的属性，是用户通过 fieldNames 自定义的，你不能直接加到 Tree 里去。需要解构泛型把字段拿出来才对。
There was a problem hiding this comment.
Actionable comments posted: 1
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (2)
README.md(3 hunks)src/interface.tsx(2 hunks)
✅ Files skipped from review due to trivial changes (1)
- README.md
🧰 Additional context used
🧬 Code Graph Analysis (1)
src/interface.tsx (1)
src/index.ts (1)
FieldDataNode(8-8)
🪛 Biome (1.9.4)
src/interface.tsx
[error] 77-77: Don't use '{}' as a type.
Prefer explicitly define the object shape. '{}' means "any non-nullable value".
(lint/complexity/noBannedTypes)
🔇 Additional comments (1)
src/interface.tsx (1)
156-156: LGTM! 索引签名增强了字段名配置的灵活性在
FieldNames接口中添加索引签名是一个很好的改进，它允许用户定义自定义字段映射，同时保持了类型安全性。这个变更支持了更灵活的字段名配置，与改进 Tree 组件类型定义的目标完全一致。
| _title?: string[]; | ||
| key?: string; | ||
| children?: string; | ||
| [key: string]: string | string[] | undefined; |
There was a problem hiding this comment.
这个也是不知道是什么类型的，万一是 Date 是 number 呢？
ant-design/ant-design#53205
Summary by CodeRabbit
DataNode类型支持泛型扩展，增强节点属性的灵活性。FieldNames接口新增索引签名，支持更多字段命名方式。