feat: support VSCode API TreeItem.checkboxState #4197
Conversation
|
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
warning eslint@8.57.1: This version is no longer supported. Please see https://eslint.org/version-support for other options. Walkthrough该拉取请求引入了一系列更改，主要集中在树视图相关的功能增强上。新增的 Changes
Possibly related PRs
Suggested labels
Suggested reviewers
Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media? 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
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: 6
🧹 Outside diff range and nitpick comments (14)
packages/extension/src/common/vscode/treeview.ts (2)
81-85: 建议将 'checked' 属性声明为必需在
TreeViewItemCheckboxInfo接口中，checked属性目前的类型为boolean | undefined。考虑到复选框状态需要明确的布尔值，建议将其类型改为boolean，并将其设为必需属性。建议应用以下修改：
export interface TreeViewItemCheckboxInfo { - checked: boolean | undefined; + checked: boolean; tooltip?: string; accessibilityInformation?: IAccessibilityInformation; }
197-201: 建议改进属性名称以提高可读性属性
manageCheckboxStateManually的命名较为冗长，建议更改为manualCheckboxState或checkboxStateManual，以简化名称并保持与其他属性的一致性。packages/types/vscode/typings/vscode.d.ts (1)
1624-1661: 简化manageCheckboxStateManually属性的注释在
TreeViewOptions接口中添加的manageCheckboxStateManually?: boolean属性，其注释过于详细，可能影响可读性。建议简化注释，使其更加简洁明了。建议修改为：
/** * 当设置为 `true` 时，扩展将手动管理复选框的选中状态，包括子项和父项的同步。 * 默认为 `false`，使用默认的自动管理逻辑。 */ manageCheckboxStateManually?: boolean;packages/extension/src/browser/sumi/main.thread.layout.ts (1)
11-12: 更新 $setBadge 方法以支持 ViewBadge方法签名的更新符合接口变更，现在支持可选的 badge 参数，类型为
string | ViewBadge。建议添加相关的单元测试以验证新增的 ViewBadge 支持。是否需要我帮助生成相关的单元测试代码？
Also applies to: 57-59
packages/extension/src/hosted/api/sumi/ext.host.layout.ts (1)
6-6: TabbarHandler 中的 setBadge 实现符合接口规范更新了 setBadge 方法以支持 ViewBadge 类型，实现与接口定义保持一致。建议考虑添加以下改进：
- 为新的 ViewBadge 类型添加类型守卫
- 添加参数验证逻辑
建议添加类型守卫和参数验证：
setBadge(badge?: string | ViewBadge) { + if (badge && typeof badge === 'object') { + // 验证 ViewBadge 对象的必要属性 + if (!('value' in badge)) { + console.warn('Invalid ViewBadge object'); + return; + } + } this.proxy.$setBadge(this.id, badge); }Also applies to: 41-43
packages/markers/src/browser/markers-service.ts (1)
Line range hint
112-124: 建议利用 ViewBadge 类型的特性当前实现仍然只返回字符串类型的徽章。建议利用 ViewBadge 类型来提供更丰富的徽章展示，比如可以为错误使用不同的样式。
public getBadge(): string | ViewBadge | undefined { const stats = this.markerManager.getStats(); if (stats) { const total = stats.errors + stats.infos + stats.warnings; if (total > MAX_DIAGNOSTICS_BADGE) { - return '1K+'; + return { value: '1K+', tooltip: `${total} 个诊断项` }; } else if (total === MAX_DIAGNOSTICS_BADGE) { - return '1K'; + return { value: '1K', tooltip: '1000 个诊断项' }; } else if (total > 0) { - return String(total); + return { value: String(total), tooltip: `${total} 个诊断项` }; } } return undefined; }packages/extension/src/browser/vscode/api/tree-view/tree-view.node.defined.ts (2)
96-102: 建议重构重复的 checkboxInfo getter 实现
ExtensionCompositeTreeNode和ExtensionTreeNode类中的checkboxInfogetter 实现完全相同。建议提取到基类或共享的工具函数中。+ // 在共享的工具函数文件中 + export function createCheckboxInfo(info?: TreeViewItemCheckboxInfo) { + return { + checked: info?.checked, + tooltip: info?.tooltip, + accessibilityInformation: info?.accessibilityInformation, + }; + } // 在两个类中 get checkboxInfo() { - return { - checked: this._checkboxInfo?.checked, - tooltip: this._checkboxInfo?.tooltip, - accessibilityInformation: this._checkboxInfo?.accessibilityInformation, - }; + return createCheckboxInfo(this._checkboxInfo); }Also applies to: 193-199
61-62: 建议增强类型安全性建议为
_checkboxInfo和_accessibilityInformation参数添加默认值，以确保 getter 始终返回一致的类型。- private _checkboxInfo?: TreeViewItemCheckboxInfo, - private _accessibilityInformation?: IAccessibilityInformation, + private _checkboxInfo: TreeViewItemCheckboxInfo = { checked: false }, + private _accessibilityInformation: IAccessibilityInformation = { + role: 'treeitem', + label: '' + },packages/main-layout/__tests__/browser/layout.service.test.tsx (1)
252-252: 建议增加更多的徽章测试用例！当前测试用例仅覆盖了基本的徽章显示场景。建议添加以下测试场景：
- 不同格式的徽章值（数字、字符串）
- 徽章值超过 99 的情况
- 设置和清除徽章的场景
packages/extension/src/browser/vscode/api/main.thread.treeview.ts (1)
271-277: $setBadge 方法实现完整且健壮方法实现:
- 正确处理了 badge 为空的情况
- 同时更新了 handler 和 accordionService 的状态
- 包含了必要的空值检查
建议添加对 badge 类型的验证。
async $setBadge(treeViewId: string, badge?: ViewBadge) { const handler = this.mainLayoutService.getTabbarHandler(treeViewId); if (handler) { + if (badge && typeof badge !== 'string' && !('value' in badge)) { + return; + } handler.setBadge(badge ? badge : ''); handler.accordionService.updateViewBadge(treeViewId, badge ? badge : ''); } }packages/extension/src/browser/vscode/api/tree-view/tree-view.model.service.ts (1)
950-954: 建议优化复选框状态切换的实现当前实现直接修改了
checkboxInfo的状态。建议添加以下改进：
- 在切换状态前进行空值检查
- 考虑添加状态切换的防抖处理
- 添加状态切换失败的错误处理
建议按如下方式重构：
handleItemCheck = async (item: ExtensionCompositeTreeNode | ExtensionTreeNode, type: TreeNodeType) => { + if (!item.checkboxInfo) { + return; + } + + try { item.checkboxInfo.checked = !item.checkboxInfo.checked; this.onDidUpdateEmitter.fire([item]); + } catch (error) { + console.error('Failed to update checkbox state:', error); + } };packages/components/src/recycle-tree/tree/TreeNode.ts (1)
247-254: 建议增强复选框信息的实现当前实现提供了基础的复选框状态。建议添加以下增强：
- 添加复选框状态的缓存机制
- 支持三态复选框（checked、unchecked、indeterminate）
- 提供复选框状态变更的验证逻辑
建议按如下方式重构：
+ private _checkboxState: TreeViewItemCheckboxInfo | undefined; get checkboxInfo(): TreeViewItemCheckboxInfo { + if (this._checkboxState) { + return this._checkboxState; + } + + this._checkboxState = { checked: false, + indeterminate: false, tooltip: '', accessibilityInformation: this.accessibilityInformation, }; + + return this._checkboxState; } + set checkboxInfo(value: TreeViewItemCheckboxInfo) { + if (!this.validateCheckboxState(value)) { + throw new Error('Invalid checkbox state'); + } + this._checkboxState = value; + } + + private validateCheckboxState(state: TreeViewItemCheckboxInfo): boolean { + return typeof state.checked === 'boolean'; + }packages/extension/src/browser/vscode/api/main.thread.api.webview.ts (1)
783-793: 实现 $setBadge 方法以更新徽章状态实现逻辑完整，包括：
- 正确的空值检查
- 适当的状态更新
- UI 同步更新
建议添加错误处理以提高健壮性。
$setBadge(handle: string, badge?: ViewBadge): void { const webviewView = this._webviewViews.get(handle); if (webviewView) { webviewView.badge = badge; const handler = this.mainLayout.getTabbarHandler(webviewView.viewType); if (handler) { + try { handler.setBadge(badge ? badge : ''); handler.accordionService.updateViewBadge(webviewView.viewType, badge ? badge : ''); + } catch (error) { + console.error('Failed to update badge:', error); + } } } }packages/main-layout/src/browser/tabbar/tabbar.service.ts (1)
198-198: 更新 updateBadge 方法以支持 ViewBadge方法签名的更改合理且保持了向后兼容性。建议添加类型守卫以增强类型安全性。
- updateBadge(containerId: string, value?: ViewBadge | string) { + updateBadge(containerId: string, value?: ViewBadge | string) { + const isViewBadge = (val: any): val is ViewBadge => { + return val && typeof val === 'object' && 'value' in val; + }; const component = this.getContainer(containerId); if (component && component.options) { - component.options.badge = value; + component.options.badge = isViewBadge(value) ? value : value; } component?.fireChange(component); }
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
📒 Files selected for processing (27)
packages/components/src/recycle-tree/tree/TreeNode.ts(2 hunks)packages/components/src/recycle-tree/types/tree-node.ts(2 hunks)packages/core-browser/src/layout/layout.interface.ts(3 hunks)packages/extension/src/browser/components/extension-tree-view-node.tsx(6 hunks)packages/extension/src/browser/components/extension-tree-view.tsx(5 hunks)packages/extension/src/browser/sumi/main.thread.layout.ts(2 hunks)packages/extension/src/browser/vscode/api/main.thread.api.webview.ts(3 hunks)packages/extension/src/browser/vscode/api/main.thread.treeview.ts(4 hunks)packages/extension/src/browser/vscode/api/tree-view/tree-view.model.service.ts(3 hunks)packages/extension/src/browser/vscode/api/tree-view/tree-view.node.defined.ts(5 hunks)packages/extension/src/common/sumi/layout.ts(2 hunks)packages/extension/src/common/vscode/treeview.ts(7 hunks)packages/extension/src/common/vscode/webview.ts(2 hunks)packages/extension/src/hosted/api/sumi/ext.host.layout.ts(2 hunks)packages/extension/src/hosted/api/vscode/ext.host.api.webview.ts(3 hunks)packages/extension/src/hosted/api/vscode/ext.host.treeview.ts(11 hunks)packages/main-layout/__tests__/browser/layout.service.test.tsx(2 hunks)packages/main-layout/src/browser/accordion/accordion.service.ts(3 hunks)packages/main-layout/src/browser/accordion/section.view.tsx(4 hunks)packages/main-layout/src/browser/tabbar-handler.ts(2 hunks)packages/main-layout/src/browser/tabbar/bar.view.tsx(4 hunks)packages/main-layout/src/browser/tabbar/tabbar.service.ts(2 hunks)packages/markers/src/browser/markers-service.ts(2 hunks)packages/markers/src/common/types.ts(2 hunks)packages/types/sumi.d.ts(2 hunks)packages/types/vscode/typings/vscode.d.ts(6 hunks)packages/types/vscode/typings/vscode.window.d.ts(1 hunks)
🔇 Additional comments (50)
packages/extension/src/common/vscode/treeview.ts (6)
42-42: 方法定义正确
$checkStateChanged 方法的定义清晰且符合预期。
87-91: 枚举定义合理
TreeItemCheckboxState 枚举定义了 Unchecked 和 Checked 两个状态，符合预期。
113-114: 新增属性 'checkboxInfo'
在 TreeViewItem 类中新增了可选属性 checkboxInfo，用于支持复选框信息，符合功能扩展需求。
133-138: 新增事件 'onDidChangeCheckboxState'
在 TreeView 接口中添加了 onDidChangeCheckboxState 事件，用于监听复选框状态的变化，符合功能需求。
164-168: 新增属性 'badge'
在 TreeView 接口中添加了可选属性 badge，用于显示视图徽标，符合功能增强需求。
181-195: 新增接口 'ViewBadge'
定义了 ViewBadge 接口，包括 tooltip 和 value 属性，支持视图徽标的显示，符合功能需求。
packages/extension/src/hosted/api/vscode/ext.host.treeview.ts (7)
109-111: 添加事件监听器以支持复选框状态变化
新增加的 onDidChangeCheckboxState getter 方法正确地暴露了 treeView 的复选框状态变化事件。
130-135: 实现徽章属性的获取和设置
新增的 badge 属性的 getter 和 setter 方法正确地实现了对 treeView.badge 的访问和修改。
221-234: 添加处理复选框状态变化的方法
新增的 $checkStateChanged 方法正确地处理了复选框状态的更新，并调用了对应的 treeView.checkStateChanged 方法。
326-328: 添加复选框状态变化的事件发射器
onDidChangeCheckboxStateEmitter 事件发射器正确地创建，并暴露了 onDidChangeCheckboxState 事件。
525-531: 为徽章属性添加 getter 和 setter
badge 属性的 getter 和 setter 方法实现正确，同时在 setter 中调用了 proxy.$setBadge 来同步更新。
801-815: 构建 checkboxInfo 的逻辑清晰且正确
根据 treeItem.checkboxState 构建 checkboxInfo 对象的逻辑完善，能够正确处理不同类型的 checkboxState。
827-827: 将 checkboxInfo 属性添加到 treeViewItem
在创建 treeViewItem 对象时，正确地包含了 checkboxInfo 属性，确保复选框信息能够在前端显示。
packages/types/vscode/typings/vscode.d.ts (6)
1895-1899: 成功添加 onDidChangeCheckboxState 事件
在 TreeView<T> 接口中新增的 onDidChangeCheckboxState 事件正确地支持了复选框状态变化的监听。
1918-1923: TreeView 接口新增 badge 属性
在 TreeView 接口中添加了 badge 属性，有助于在视图中显示徽章信息，提升用户体验。
1975-1988: 新增 TreeItemCheckboxState 枚举
成功定义了 TreeItemCheckboxState 枚举，包含 Unchecked 和 Checked 状态，有助于明确表示复选框的状态。
1989-1998: 添加 TreeCheckboxChangeEvent<T> 接口
正确地添加了 TreeCheckboxChangeEvent<T> 接口，用于描述复选框状态变化事件的数据结构。
2155-2174: 在 TreeItem 中添加 checkboxState 属性
checkboxState 属性的添加允许开发者在树项中设置复选框状态，增强了树视图的交互能力。
1939-1955: 定义 ViewBadge 接口
添加了 ViewBadge 接口，包含 tooltip 和 value 属性，为视图提供了灵活的徽章显示功能。
packages/extension/src/common/sumi/layout.ts (3)
3-4: 引入 ViewBadge 类型
从 vscode 模块中正确地引入了 ViewBadge 类型，以支持新的 badge 属性。
12-12: 更新 setBadge 方法以支持 ViewBadge 类型
ITabbarHandler 接口中的 setBadge 方法参数类型更新为 string | ViewBadge，增强了方法的灵活性。
28-28: 更新 $setBadge 方法以支持 ViewBadge 类型
IMainThreadLayout 接口中的 $setBadge 方法参数类型更新为 string | ViewBadge，确保与前端的 badge 属性保持一致。
packages/components/src/recycle-tree/types/tree-node.ts (2)
6-11: 添加 TreeViewItemCheckboxInfo 接口
成功定义了 TreeViewItemCheckboxInfo 接口，包含 checked、tooltip 和 accessibilityInformation 属性，用于描述复选框的相关信息。
50-53: 在 ITreeNode 接口中添加 checkboxInfo 属性
在 ITreeNode 接口中新增了可选的 checkboxInfo 属性，便于在树节点中管理复选框信息，增强了节点的可操作性。
packages/markers/src/common/types.ts (2)
5-5: 引入 ViewBadge 类型
从 vscode 模块中正确地引入了 ViewBadge 类型，为徽章功能的扩展做好准备。
19-19: 更新 getBadge 方法的返回类型以支持 ViewBadge
IMarkerService 接口中的 getBadge 方法返回类型更新为 string | ViewBadge | undefined，增强了方法的灵活性，支持更多样化的徽章展示。
packages/core-browser/src/layout/layout.interface.ts (2)
8-8: 导入 ViewBadge 类型以支持 VSCode API
从 vscode 模块导入 ViewBadge 类型，为视图组件提供更丰富的徽章展示功能。
40-40: 类型扩展符合 VSCode API 规范
将 badge 属性的类型从 string 扩展为 string | ViewBadge，使其与 VSCode API 保持一致，同时保持了向后兼容性。
Also applies to: 64-64
✅ Verification successful
Let me verify the usage of ViewBadge type in the codebase to ensure consistency.
ViewBadge 类型扩展验证通过
通过代码库分析确认：
- ViewBadge 接口定义来自 VSCode API，包含 tooltip 和 value 属性
- 该类型已在多个相关组件中正确导入和使用
- badge 属性类型扩展为
string | ViewBadge的改动与 VSCode API 规范保持一致
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash
# 验证 ViewBadge 类型的使用是否一致
# 检查所有使用 badge 属性的地方
rg "badge.*:.*string"
Length of output: 1935
Script:
#!/bin/bash
# Check the definition and usage of ViewBadge type
ast-grep --pattern 'interface ViewBadge {
$$$
}'
# Check imports of ViewBadge
rg "import.*ViewBadge"
Length of output: 2680
packages/main-layout/src/browser/tabbar-handler.ts (1)
113-115: 代码变更合理
参数类型的更新符合 VSCode API 的规范，同时保持了向后兼容性。
packages/extension/src/browser/vscode/api/tree-view/tree-view.node.defined.ts (1)
159-160: 建议在 ExtensionTreeNode 中也应用相同的类型安全性增强
与 ExtensionCompositeTreeNode 保持一致，为参数添加默认值。
packages/main-layout/src/browser/accordion/section.view.tsx (1)
191-195: 徽章渲染逻辑实现正确
对 ViewBadge 类型的处理逻辑实现正确，能够正确显示字符串或 ViewBadge 类型的徽章值。
packages/extension/src/common/vscode/webview.ts (2)
79-79: 接口变更符合预期！
新增的 $setBadge 方法签名设计合理，与 VSCode API 保持一致。参数类型 vscode.ViewBadge 的使用也恰当。
317-322: 接口定义清晰完整！
WebviewView 接口中新增的 badge 属性定义完整，包含了适当的 JSDoc 注释说明。
packages/main-layout/__tests__/browser/layout.service.test.tsx (1)
309-309: 更新后的徽章设置方法使用正确！
setBadge 方法的调用已正确更新为使用新的对象格式。
packages/main-layout/src/browser/tabbar/bar.view.tsx (1)
243-243: 徽章渲染实现正确！
在 IconTabView 和 TextTabView 中使用 getBadgeValue 函数的方式正确，确保了徽章显示的一致性。
Also applies to: 262-262
packages/extension/src/hosted/api/vscode/ext.host.api.webview.ts (3)
434-434: 私有属性声明正确且符合规范
私有属性 #badge 的声明使用了 TypeScript 的私有字段语法,类型定义正确。
504-507: Getter 实现正确且包含必要的检查
badge 的 getter 实现:
- 包含了必要的 disposed 检查
- 返回类型符合 ViewBadge 接口定义
509-515: Setter 实现完整且具有防御性编程
badge 的 setter 实现:
- 包含了必要的 disposed 检查
- 包含了值变化检查,避免不必要的更新
- 正确调用代理方法同步状态
packages/extension/src/browser/vscode/api/main.thread.treeview.ts (1)
45-45: 导入声明正确且位置合适
ViewBadge 类型的导入位置正确,与相关类型导入放在一起。
packages/main-layout/src/browser/accordion/accordion.service.ts (3)
48-49: 类型导入声明正确
ViewBadge 类型的导入使用了 type 修饰符,这是正确的做法。
62-62: 接口更新正确且向后兼容
AccordionViewChangeEvent 接口中 badge 属性的类型更新:
- 保持了可选性
- 支持了新的 ViewBadge 类型
- 显式声明了 undefined 类型
221-221: 方法签名更新正确且实现完整
updateViewBadge 方法的更新:
- 参数类型正确更新为 string | ViewBadge
- 保持了参数的可选性
packages/types/vscode/typings/vscode.window.d.ts (1)
872-877: 代码变更正确且符合规范！
badge 属性的添加符合 VSCode API 的规范，类型定义准确。
packages/extension/src/browser/vscode/api/tree-view/tree-view.model.service.ts (1)
233-233: 事件发射器实现正确！
onDidUpdateEmitter 和 onDidUpdate getter 的实现符合事件处理模式，可以正确通知订阅者树节点的更新。
Also applies to: 269-271
packages/components/src/recycle-tree/tree/TreeNode.ts (1)
28-28: 导入声明正确！
TreeViewItemCheckboxInfo 类型的导入位置正确，符合代码组织规范。
packages/types/sumi.d.ts (2)
30-30: 导入 ViewBadge 类型以支持 VSCode API
从 vscode 模块导入 ViewBadge 类型是合理的，这确保了与 VSCode API 的类型兼容性。
476-481: 更新 setBadge 方法签名以支持 ViewBadge
方法签名的更改适当地支持了 VSCode API 的 badge 功能，同时保持了向后兼容性。
packages/extension/src/browser/vscode/api/main.thread.api.webview.ts (2)
48-48: 导入 ViewBadge 类型用于 Webview 视图
从 vscode 模块导入 ViewBadge 类型，确保了类型系统的一致性。
622-622: 为 WebviewView 类添加 badge 属性
badge 属性的添加符合 VSCode API 的规范，使用可选修饰符是合适的。
packages/main-layout/src/browser/tabbar/tabbar.service.ts (1)
49-50: 导入 ViewBadge 类型用于标签栏服务
从 vscode 模块导入 ViewBadge 类型，保持了类型系统的一致性。
| @@ -21,6 +21,7 @@ export interface IMainThreadTreeView { | |||
| $reveal(treeViewId: string, treeItemId?: string, options?: ITreeViewRevealOptions): Promise<any>; | |||
| $setTitle(treeViewId: string, message: string): Promise<void>; | |||
| $setDescription(treeViewId: string, message: string): Promise<void>; | |||
| $setBadge(treeViewId: string, badge?: ViewBadge): void; | |||
There was a problem hiding this comment.
🛠️ Refactor suggestion
建议保持返回类型的一致性
$setBadge 方法的返回类型为 void，而接口中的其他方法通常返回 Promise<void>。为了保持一致性，建议将其修改为返回 Promise<void>。
| async checkStateChanged(items: readonly { id: string; checked: boolean }[]): Promise<void> { | ||
| const transformed: [T, TreeItemCheckboxState][] = []; | ||
| items.forEach((item) => { | ||
| const node = this.getTreeItem(item.id); | ||
| if (node) { | ||
| transformed.push([node, item.checked ? TreeItemCheckboxState.Checked : TreeItemCheckboxState.Unchecked]); | ||
| const treeViewItem = this.element2TreeViewItem.get(node); | ||
| if (treeViewItem) { | ||
| treeViewItem.checkboxInfo!.checked = item.checked; | ||
| } | ||
| } | ||
| }); | ||
| this.onDidChangeCheckboxStateEmitter.fire({ | ||
| items: transformed, | ||
| }); | ||
| } |
There was a problem hiding this comment.
在访问 checkboxInfo 前添加空值检查以避免潜在的空引用错误
在第 664 行，代码使用了非空断言操作符 ! 来访问 treeViewItem.checkboxInfo。为防止可能的空引用错误，建议在访问 checkboxInfo 属性前，添加空值检查，确保其已被初始化。
建议修改如下：
if (treeViewItem) {
+ if (treeViewItem.checkboxInfo) {
treeViewItem.checkboxInfo.checked = item.checked;
+ }
}📝 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.
| async checkStateChanged(items: readonly { id: string; checked: boolean }[]): Promise<void> { | |
| const transformed: [T, TreeItemCheckboxState][] = []; | |
| items.forEach((item) => { | |
| const node = this.getTreeItem(item.id); | |
| if (node) { | |
| transformed.push([node, item.checked ? TreeItemCheckboxState.Checked : TreeItemCheckboxState.Unchecked]); | |
| const treeViewItem = this.element2TreeViewItem.get(node); | |
| if (treeViewItem) { | |
| treeViewItem.checkboxInfo!.checked = item.checked; | |
| } | |
| } | |
| }); | |
| this.onDidChangeCheckboxStateEmitter.fire({ | |
| items: transformed, | |
| }); | |
| } | |
| async checkStateChanged(items: readonly { id: string; checked: boolean }[]): Promise<void> { | |
| const transformed: [T, TreeItemCheckboxState][] = []; | |
| items.forEach((item) => { | |
| const node = this.getTreeItem(item.id); | |
| if (node) { | |
| transformed.push([node, item.checked ? TreeItemCheckboxState.Checked : TreeItemCheckboxState.Unchecked]); | |
| const treeViewItem = this.element2TreeViewItem.get(node); | |
| if (treeViewItem) { | |
| if (treeViewItem.checkboxInfo) { | |
| treeViewItem.checkboxInfo.checked = item.checked; | |
| } | |
| } | |
| } | |
| }); | |
| this.onDidChangeCheckboxStateEmitter.fire({ | |
| items: transformed, | |
| }); | |
| } |
| import { | ||
| CheckBox, | ||
| ClasslistComposite, | ||
| INodeRendererProps, | ||
| Loading, | ||
| PromptHandle, | ||
| TreeNodeType, | ||
| } from '@opensumi/ide-components'; |
There was a problem hiding this comment.
导入但未使用 CheckBox 组件
导入了 CheckBox 组件但在代码中并未使用，这可能是一个未完成的实现。
建议实现复选框渲染或移除未使用的导入。
| const renderCheckbox = (node: ExtensionCompositeTreeNode | ExtensionTreeNode) => <div></div>; | ||
|
|
There was a problem hiding this comment.
复选框渲染函数未实现
renderCheckbox 函数返回空的 div，没有实际渲染复选框组件。
建议实现如下：
-const renderCheckbox = (node: ExtensionCompositeTreeNode | ExtensionTreeNode) => <div></div>;
+const renderCheckbox = (node: ExtensionCompositeTreeNode | ExtensionTreeNode) => {
+ if (!node.checkboxInfo) {
+ return null;
+ }
+ return (
+ <CheckBox
+ checked={node.checkboxInfo.checked}
+ onChange={hadnleCheck}
+ className={styles.tree_view_node_checkbox}
+ />
+ );
+};Committable suggestion skipped: line range outside the PR's diff.
| const handleItemChecked = useCallback( | ||
| (ev: MouseEvent, item: ExtensionTreeNode | ExtensionCompositeTreeNode, type: TreeNodeType) => {}, | ||
| [canSelectMany, model], | ||
| ); |
There was a problem hiding this comment.
处理复选框事件的回调函数未实现
handleItemChecked 回调函数是空的实现，且依赖数组包含了未使用的变量。
建议实现如下：
-const handleItemChecked = useCallback(
- (ev: MouseEvent, item: ExtensionTreeNode | ExtensionCompositeTreeNode, type: TreeNodeType) => {},
- [canSelectMany, model],
-);
+const handleItemChecked = useCallback(
+ (ev: MouseEvent, item: ExtensionTreeNode | ExtensionCompositeTreeNode, type: TreeNodeType) => {
+ ev.stopPropagation();
+ model.handleItemCheck(item);
+ },
+ [model],
+);Committable suggestion skipped: line range outside the PR's diff.
| function getBadgeValue(badge: string | ViewBadge) { | ||
| if (typeof badge === 'string') { | ||
| return parseInt(badge, 10) > 99 ? '99+' : badge; | ||
| } | ||
| if (typeof badge === 'object' && badge.value) { | ||
| return badge.value > 99 ? '99+' : badge.value; | ||
| } | ||
| return ''; | ||
| } |
There was a problem hiding this comment.
🛠️ Refactor suggestion
建议优化徽章值处理函数的实现！
当前的 getBadgeValue 函数实现可以改进：
- 需要处理 badge.value 为非数字的情况
- 建议添加类型守卫
建议如下实现：
-function getBadgeValue(badge: string | ViewBadge) {
+function getBadgeValue(badge: string | ViewBadge): string {
+ if (!badge) {
+ return '';
+ }
if (typeof badge === 'string') {
- return parseInt(badge, 10) > 99 ? '99+' : badge;
+ const num = parseInt(badge, 10);
+ return isNaN(num) ? badge : num > 99 ? '99+' : badge;
}
- if (typeof badge === 'object' && badge.value) {
- return badge.value > 99 ? '99+' : badge.value;
+ if (typeof badge === 'object' && badge.value !== undefined) {
+ const value = badge.value;
+ if (typeof value === 'number') {
+ return value > 99 ? '99+' : value.toString();
+ }
+ return value.toString();
}
return '';
}📝 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.
| function getBadgeValue(badge: string | ViewBadge) { | |
| if (typeof badge === 'string') { | |
| return parseInt(badge, 10) > 99 ? '99+' : badge; | |
| } | |
| if (typeof badge === 'object' && badge.value) { | |
| return badge.value > 99 ? '99+' : badge.value; | |
| } | |
| return ''; | |
| } | |
| function getBadgeValue(badge: string | ViewBadge): string { | |
| if (!badge) { | |
| return ''; | |
| } | |
| if (typeof badge === 'string') { | |
| const num = parseInt(badge, 10); | |
| return isNaN(num) ? badge : num > 99 ? '99+' : badge; | |
| } | |
| if (typeof badge === 'object' && badge.value !== undefined) { | |
| const value = badge.value; | |
| if (typeof value === 'number') { | |
| return value > 99 ? '99+' : value.toString(); | |
| } | |
| return value.toString(); | |
| } | |
| return ''; | |
| } |
Codecov ReportAttention: Patch coverage is
Additional details and impacted files@@ Coverage Diff @@
## main #4197 +/- ##
==========================================
- Coverage 54.08% 54.01% -0.07%
==========================================
Files 1611 1616 +5
Lines 97846 98050 +204
Branches 20031 20070 +39
==========================================
+ Hits 52917 52966 +49
- Misses 37325 37458 +133
- Partials 7604 7626 +22
Flags with carried forward coverage won't be shown. Click here to find out more. ☔ View full report in Codecov by Sentry. |
Types
Background or solution
Support VSCode API TreeItem.checkboxState
Changelog
Summary by CodeRabbit
发布说明
新功能
checkboxInfo属性，提供树节点的复选框相关信息。ViewBadge类型，允许在树视图和 Webview 视图中显示徽章。$setBadge方法，支持为树视图和 Webview 视图设置徽章。文档