Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Support multi-selection of tree items in tree views #12088

Merged

Conversation

tsmaeder
Copy link
Contributor

What it does

Adds multi-selection support to tree views contributed via VS Code API

Fixes #9074

Contributed on behalf of STMicroelectronics

How to test

The attached extension contributes a tree view that has multi-select enabled. There is a command "Print Selection" which prints out the selected items on the extension side. Make sure the behavior is consistent with VS Code.

Review checklist

Reminder for reviewers

@tsmaeder
Copy link
Contributor Author

Here's the extension:

custom-view-samples-0.0.1.zip

And here's the source:

tree-view-sample.zip

@tsmaeder tsmaeder requested a review from alvsan09 January 19, 2023 16:15
Fixes eclipse-theia#9074

Contributed on behalf of STMicroelectronics

Signed-off-by: Thomas Mäder <[email protected]>
@tsmaeder tsmaeder force-pushed the 9074_tree_view_multiselect branch from 37cabef to b96bb28 Compare January 23, 2023 08:42
Copy link
Member

@paul-marechal paul-marechal left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The changes work as described when using the provided extension, although I made some modifications to make sure that inline actions also work properly:

I added the following menu entry in the extension's package.json:

        {
          "command": "treeViewDnD.printSelection",
          "when": "view == testViewDragAndDrop && viewItem == aaaaaa",
          "group": "inline"
        }

Along with editing the following code:

// file: out/testViewDragAndDrop.js
// class: TestViewDragAndDrop

    _getTreeItem(key) {
        const treeElement = this._getTreeElement(key);
        // An example of how to use codicons in a MarkdownString in a tree item tooltip.
        const tooltip = new vscode.MarkdownString(`$(zap) Tooltip for ${key}`, true);
        return {
            // required for `viewItem == X` to work:
            contextValue: key,
            label: /**vscode.TreeItemLabel**/ { label: key, highlights: key.length > 1 ? [[key.length - 2, key.length - 1]] : void 0 },
            tooltip,
            collapsibleState: treeElement && Object.keys(treeElement).length ? vscode.TreeItemCollapsibleState.Collapsed : vscode.TreeItemCollapsibleState.None,
            resourceUri: vscode.Uri.parse(`/tmp/${key}`),
        };
    }

@tsmaeder
Copy link
Contributor Author

@paul-marechal since you changed some code and I assume you tested it, I'll let you merge the changes.

Use an option object instead of several optional positional arguments.

This makes some lines shorter, enough to make ESLint happy.
@paul-marechal
Copy link
Member

@tsmaeder most of my changes were trivial, though there was one potential bug fixed by b610af8.

I confirm that I manually tested the changes and it still works as expected.

@paul-marechal paul-marechal merged commit d850c16 into eclipse-theia:master Jan 25, 2023
@paul-marechal paul-marechal added this to the 1.34.0 milestone Jan 26, 2023
@vince-fugnitto vince-fugnitto added tree issues related to the tree (ex: tree widget) vscode issues related to VSCode compatibility labels Jan 26, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
tree issues related to the tree (ex: tree widget) vscode issues related to VSCode compatibility
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Support multi-selection in Tree View
3 participants