Skip to content

Commit

Permalink
Add extra options to the tree search input
Browse files Browse the repository at this point in the history
- added extra `showButtons` options to the tree search input.
- allows users to navigate their matches more easily using `next` and `previous` buttons.
- allows users to `close` the search input.
- fixed incorrect implementation of the `searchBox.onPrevious` callback.

Signed-off-by: Vincent Fugnitto <vincent.fugnitto@ericsson.com>
  • Loading branch information
vince-fugnitto committed Jun 28, 2019
1 parent 6cf540f commit 672b697
Showing 1 changed file with 13 additions and 3 deletions.
16 changes: 13 additions & 3 deletions packages/core/src/browser/tree/tree-widget.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -154,7 +154,7 @@ export class TreeWidget extends ReactWidget implements StatefulWidget {
@postConstruct()
protected init(): void {
if (this.props.search) {
this.searchBox = this.searchBoxFactory(SearchBoxProps.DEFAULT);
this.searchBox = this.searchBoxFactory({ ...SearchBoxProps.DEFAULT, showButtons: true });
this.toDispose.pushAll([
this.searchBox,
this.searchBox.onTextChange(async data => {
Expand All @@ -163,8 +163,18 @@ export class TreeWidget extends ReactWidget implements StatefulWidget {
this.update();
}),
this.searchBox.onClose(data => this.treeSearch.filter(undefined)),
this.searchBox.onNext(() => this.model.selectNextNode()),
this.searchBox.onPrevious(() => this.model.selectPrevNode()),
this.searchBox.onNext(() => {
// Enable next selection if there are currently highlights.
if (this.searchHighlights.size > 1) {
this.model.selectNextNode();
}
}),
this.searchBox.onPrevious(() => {
// Enable previous selection if there are currently highlights.
if (this.searchHighlights.size > 1) {
this.model.selectPrevNode();
}
}),
this.treeSearch,
this.treeSearch.onFilteredNodesChanged(nodes => {
const node = nodes.find(SelectableTreeNode.is);
Expand Down

0 comments on commit 672b697

Please sign in to comment.