feat: support treeview treeItem.checkboxstate

packages/components/src/recycle-tree/tree/TreeNode.ts

@@ -25,6 +25,7 @@ import {
   MetadataChangeType,
   TreeNodeEvent,
   TreeNodeType,
+  TreeViewItemCheckboxInfo,
   WatchEvent,
 } from '../types';
 
@@ -243,6 +244,14 @@ export class TreeNode implements ITreeNode {
     return this._path;
   }
 
+  get checkboxInfo(): TreeViewItemCheckboxInfo | undefined {
+    return {
+      checked: false,
+      tooltip: '',
+      accessibilityInformation: this.accessibilityInformation,
+    };
+  }
+
   get accessibilityInformation(): IAccessibilityInformation {
     return {
       label: this.name,

packages/components/src/recycle-tree/types/tree-node.ts

@@ -3,6 +3,12 @@ export interface IAccessibilityInformation {
   role?: string;
 }
 
+export interface TreeViewItemCheckboxInfo {
+  checked: boolean;
+  tooltip?: string;
+  accessibilityInformation?: IAccessibilityInformation;
+}
+
 export interface ITreeNode {
   /**
    * 唯一标识id
@@ -41,6 +47,10 @@ export interface ITreeNode {
    * 父节点，但为undefined时，表示该节点为根节点
    */
   readonly parent: ICompositeTreeNode | undefined;
+  /**
+   * 节点的选择信息
+   */
+  readonly checkboxInfo?: TreeViewItemCheckboxInfo;
   /**
    * 节点无障碍信息
    */

packages/extension/src/browser/components/extension-tree-view-node.tsx

@@ -1,7 +1,24 @@
 import cls from 'classnames';
-import React, { CSSProperties, DragEvent, FC, MouseEvent, ReactNode, useCallback, useEffect, useState } from 'react';
+import React, {
+  CSSProperties,
+  DragEvent,
+  FC,
+  FormEvent,
+  MouseEvent,
+  ReactNode,
+  useCallback,
+  useEffect,
+  useState,
+} from 'react';
 
-import { ClasslistComposite, INodeRendererProps, Loading, PromptHandle, TreeNodeType } from '@opensumi/ide-components';
+import {
+  CheckBox,
+  ClasslistComposite,
+  INodeRendererProps,
+  Loading,
+  PromptHandle,
+  TreeNodeType,
+} from '@opensumi/ide-components';
 import { getIcon, useDesignStyles } from '@opensumi/ide-core-browser';
 import { TitleActionList } from '@opensumi/ide-core-browser/lib/components/actions';
 import { MenuId } from '@opensumi/ide-core-browser/lib/menu/next';
@@ -21,6 +38,7 @@ export interface ITreeViewNodeProps {
   decorations?: ClasslistComposite;
   onTwistierClick?: (ev: MouseEvent, item: ExtensionTreeNode | ExtensionCompositeTreeNode, type: TreeNodeType) => void;
   onClick: (ev: MouseEvent, item: ExtensionTreeNode | ExtensionCompositeTreeNode, type: TreeNodeType) => void;
+  onChange: (item: ExtensionTreeNode | ExtensionCompositeTreeNode) => void;
   onContextMenu?: (ev: MouseEvent, item: ExtensionTreeNode | ExtensionCompositeTreeNode, type: TreeNodeType) => void;
   onDragStart?: (ev: MouseEvent, item: ExtensionTreeNode | ExtensionCompositeTreeNode) => void;
   onDragEnter?: (ev: MouseEvent, item: ExtensionTreeNode | ExtensionCompositeTreeNode) => void;
@@ -36,6 +54,7 @@ export type TreeViewNodeRenderedProps = ITreeViewNodeProps & INodeRendererProps;
 export const TreeViewNode: FC<TreeViewNodeRenderedProps> = ({
   item,
   onClick,
+  onChange,
   onContextMenu,
   itemType,
   leftPadding = 8,
@@ -138,6 +157,14 @@ export const TreeViewNode: FC<TreeViewNodeRenderedProps> = ({
     [item, onDrop],
   );
 
+  const handleCheckBoxChange = useCallback(
+    (event: FormEvent<HTMLInputElement>) => {
+      onChange(item);
+      event.stopPropagation();
+    },
+    [item, onChange],
+  );
+
   const isDirectory = itemType === TreeNodeType.CompositeTreeNode;
   const paddingLeft = isDirectory
     ? `${defaultLeftPadding + (item.depth || 0) * (leftPadding || 0)}px`
@@ -167,6 +194,24 @@ export const TreeViewNode: FC<TreeViewNodeRenderedProps> = ({
     <div className={cls(styles.file_icon, node.icon)} style={{ maxHeight: TREE_VIEW_NODE_HEIGHT }}></div>
   );
 
+  const renderCheckbox = (node: ExtensionCompositeTreeNode | ExtensionTreeNode) => {
+    if (node.checkboxInfo === undefined) {
+      return null;
+    }
+
+    return (
+      <CheckBox
+        data-node-id={node.treeItemId}
+        readOnly
+        onChange={(event) => handleCheckBoxChange(event)}
+        checked={!!node.checkboxInfo.checked}
+        id={node.treeItemId}
+        role={node.checkboxInfo.accessibilityInformation?.role}
+        title={node.checkboxInfo.tooltip}
+      />
+    );
+  };
+
   const renderDisplayName = (node: ExtensionCompositeTreeNode | ExtensionTreeNode) => {
     const displayName = () => {
       if (node.highlights) {
@@ -277,6 +322,7 @@ export const TreeViewNode: FC<TreeViewNodeRenderedProps> = ({
     >
       <div className={cls(styles.tree_view_node_content)}>
         {renderTwice(item)}
+        {renderCheckbox(item)}
         {renderIcon(item)}
         <div className={styles.tree_view_node_overflow_wrap}>
           {renderDisplayName(item)}

packages/extension/src/browser/components/extension-tree-view.tsx

@@ -117,6 +117,16 @@ export const ExtensionTabBarTreeView = ({
     [canSelectMany, model],
   );
 
+  const handleCheckBoxChange = useCallback(
+    (item: ExtensionTreeNode | ExtensionCompositeTreeNode) => {
+      const { handleCheckBoxChange } = model;
+      if (item) {
+        handleCheckBoxChange(item);
+      }
+    },
+    [model],
+  );
+
   const handleContextMenu = useCallback(
     (ev: MouseEvent, node: ExtensionTreeNode | ExtensionCompositeTreeNode) => {
       const { handleContextMenu } = model;
@@ -201,6 +211,7 @@ export const ExtensionTabBarTreeView = ({
         isVisible={isVisible}
         handleTreeReady={handleTreeReady}
         handleItemClicked={handleItemClicked}
+        handleCheckBoxChange={handleCheckBoxChange}
         handleTwistierClick={handleTwistierClick}
         handleContextMenu={handleContextMenu}
         handleDragStart={handleDragStart}
@@ -226,6 +237,7 @@ interface TreeViewProps {
   model: ExtensionTreeViewModel;
   handleTreeReady(handle: IRecycleTreeHandle): void;
   handleItemClicked(ev: MouseEvent, item: ExtensionTreeNode | ExtensionCompositeTreeNode, type: TreeNodeType): void;
+  handleCheckBoxChange(item: ExtensionTreeNode | ExtensionCompositeTreeNode): void;
   handleTwistierClick(ev: MouseEvent, item: ExtensionCompositeTreeNode): void;
   handleContextMenu(ev: MouseEvent, node: ExtensionTreeNode | ExtensionCompositeTreeNode): void;
   handleDragStart(ev: MouseEvent, node: ExtensionTreeNode | ExtensionCompositeTreeNode): void;
@@ -255,6 +267,7 @@ const TreeView = memo(
     dataProvider,
     handleTreeReady,
     handleItemClicked,
+    handleCheckBoxChange,
     handleTwistierClick,
     handleContextMenu,
     handleDragStart,
@@ -301,6 +314,7 @@ const TreeView = memo(
           itemType={props.itemType}
           decorations={model.decorations.getDecorations(props.item as any)}
           onClick={handleItemClicked}
+          onChange={handleCheckBoxChange}
           onTwistierClick={handleTwistierClick}
           onContextMenu={handleContextMenu}
           onDragStart={handleDragStart}

packages/extension/src/browser/vscode/api/main.thread.treeview.ts

@@ -1,5 +1,5 @@
 import { Autowired, INJECTOR_TOKEN, Injectable, Injector, Optional } from '@opensumi/di';
-import { ITreeNodeOrCompositeTreeNode, Tree } from '@opensumi/ide-components';
+import { CompositeTreeNode, ITreeNodeOrCompositeTreeNode, Tree } from '@opensumi/ide-components';
 import { IRPCProtocol } from '@opensumi/ide-connection';
 import {
   BinaryBuffer,
@@ -414,6 +414,7 @@ export class TreeViewDataProvider extends Tree {
       item.contextValue || '',
       item.id,
       actions,
+      item.checkboxInfo,
       item.accessibilityInformation,
       expanded,
       item.resourceUri,
@@ -437,6 +438,7 @@ export class TreeViewDataProvider extends Tree {
       item.contextValue || '',
       item.id,
       actions,
+      item.checkboxInfo,
       item.accessibilityInformation,
       item.resourceUri,
     );
@@ -586,6 +588,43 @@ export class TreeViewDataProvider extends Tree {
     super.dispose();
     this.treeItemId2TreeNode.clear();
   }
+
+  markAsChecked(
+    node: ExtensionTreeNode | ExtensionCompositeTreeNode,
+    checked: boolean,
+    manageCheckboxStateManually?: boolean,
+  ): void {
+    function findParentsToChange(child: ITreeNodeOrCompositeTreeNode, nodes: ITreeNodeOrCompositeTreeNode[]): void {
+      if (
+        child.parent?.checkboxInfo !== undefined &&
+        child.parent.checkboxInfo.checked !== checked &&
+        (!checked ||
+          !child.parent.children?.some((candidate) => candidate !== child && candidate.checkboxInfo?.checked === false))
+      ) {
+        nodes.push(child.parent);
+        findParentsToChange(child.parent, nodes);
+      }
+    }
+
+    function findChildrenToChange(parent: ITreeNodeOrCompositeTreeNode, nodes: ITreeNodeOrCompositeTreeNode[]): void {
+      if (CompositeTreeNode.is(parent)) {
+        parent.children?.forEach((child) => {
+          if (child.checkboxInfo !== undefined && child.checkboxInfo.checked !== checked) {
+            nodes.push(child);
+          }
+          findChildrenToChange(child, nodes);
+        });
+      }
+    }
+
+    const nodesToChange = [node];
+    if (!manageCheckboxStateManually) {
+      findParentsToChange(node, nodesToChange);
+      findChildrenToChange(node, nodesToChange);
+    }
+    nodesToChange.forEach((n) => (n.checkboxInfo!.checked = checked));
+    this.proxy?.$checkStateChanged(this.treeViewId, [{ treeItemId: node.treeItemId, checked }]);
+  }
 }
 
 export class TreeViewDragAndDropController extends Disposable implements ITreeViewDragAndDropController {

packages/extension/src/browser/vscode/api/tree-view/tree-view.model.service.ts

@@ -1083,4 +1083,14 @@ export class ExtensionTreeViewModel {
       }
     });
   }
+
+  handleCheckBoxChange = async (item: ExtensionCompositeTreeNode | ExtensionTreeNode) => {
+    if (item) {
+      this.treeViewDataProvider.markAsChecked(
+        item,
+        !item.checkboxInfo!.checked,
+        this.treeViewOptions.manageCheckboxStateManually,
+      );
+    }
+  };
 }

packages/extension/src/browser/vscode/api/tree-view/tree-view.node.defined.ts

@@ -2,7 +2,7 @@ import { CompositeTreeNode, ITree, TreeNode } from '@opensumi/ide-components';
 import { MenuNode } from '@opensumi/ide-core-browser/lib/menu/next';
 import { IAccessibilityInformation, Uri, UriComponents, isObject, isString } from '@opensumi/ide-core-common';
 
-import { ITreeItemLabel } from '../../../../common/vscode';
+import { ITreeItemLabel, TreeViewItemCheckboxInfo } from '../../../../common/vscode';
 import { ICommand } from '../../../../common/vscode/models';
 import { TreeViewDataProvider } from '../main.thread.treeview';
 
@@ -58,6 +58,7 @@ export class ExtensionCompositeTreeNode extends CompositeTreeNode {
     public contextValue: string = '',
     public treeItemId: string = '',
     public actions: MenuNode[],
+    private _checkboxInfo?: TreeViewItemCheckboxInfo,
     private _accessibilityInformation?: IAccessibilityInformation,
     expanded?: boolean,
     sourceUri?: UriComponents,
@@ -92,6 +93,10 @@ export class ExtensionCompositeTreeNode extends CompositeTreeNode {
     return this._displayName;
   }
 
+  get checkboxInfo() {
+    return this._checkboxInfo;
+  }
+
   get accessibilityInformation() {
     return {
       role: this._accessibilityInformation?.role || 'treeitem',
@@ -147,6 +152,7 @@ export class ExtensionTreeNode extends TreeNode {
     public contextValue: string = '',
     public treeItemId: string = '',
     public actions: MenuNode[],
+    private _checkboxInfo?: TreeViewItemCheckboxInfo,
     private _accessibilityInformation?: IAccessibilityInformation,
     private sourceUri?: UriComponents,
   ) {
@@ -180,6 +186,10 @@ export class ExtensionTreeNode extends TreeNode {
     return this._displayName;
   }
 
+  get checkboxInfo() {
+    return this._checkboxInfo;
+  }
+
   get accessibilityInformation() {
     return {
       role: this._accessibilityInformation?.role || 'treeitem',

packages/extension/src/common/vscode/treeview.ts

@@ -39,6 +39,7 @@ export interface IExtHostTreeView {
   $setExpanded(treeViewId: string, treeItemId: string, expanded: boolean): Promise<any>;
   $setSelection(treeViewId: string, treeItemHandles: string[]): void;
   $setVisible(treeViewId: string, visible: boolean): void;
+  $checkStateChanged(treeViewId: string, items: { treeItemId: string; checked: boolean }[]): Promise<void>;
   $resolveTreeItem(treeViewId: string, treeItemId: string, token: CancellationToken): Promise<TreeViewItem | undefined>;
   $handleDrop(
     destinationViewId: string,
@@ -77,6 +78,17 @@ export interface ITreeItemLabel {
   strikethrough?: boolean;
 }
 
+export interface TreeViewItemCheckboxInfo {
+  checked: boolean;
+  tooltip?: string;
+  accessibilityInformation?: IAccessibilityInformation;
+}
+
+export enum TreeItemCheckboxState {
+  Unchecked = 0,
+  Checked = 1,
+}
+
 export class TreeViewItem {
   id: string;
 
@@ -98,6 +110,8 @@ export class TreeViewItem {
 
   contextValue?: string;
 
+  checkboxInfo?: TreeViewItemCheckboxInfo;
+
   command?: ICommand;
 
   accessibilityInformation?: IAccessibilityInformation;
@@ -116,6 +130,12 @@ export interface TreeView<T> extends vscode.TreeView<T> {
    * 当节点可见性变化时触发的事件
    */
   readonly onDidChangeVisibility: Event<vscode.TreeViewVisibilityChangeEvent>;
+
+  /**
+   * 表示元素已被选中或未选中的事件。
+   */
+  readonly onDidChangeCheckboxState: Event<vscode.TreeCheckboxChangeEvent<T>>;
+
   /**
    * 当节点选中时触发的事件
    */
@@ -174,6 +194,11 @@ export interface ViewBadge {
 }
 
 export interface TreeViewBaseOptions {
+  /**
+   * 手动管理复选框状态
+   */
+  manageCheckboxStateManually?: boolean;
+
   /**
    * 是否展示折叠所有功能（panel上功能）
    */