kopia lustrzana https://github.com/shoelace-style/shoelace
SlTree: separate expand/collapse and selection behaviour in 'single' mode (#1521)
* Never select tree items when clicking the chevron This changes the behaviour of sl-tree so that clicking on the expand/collapse icon will not select/deselect the item, only toggle it's expanded state. * Refactor: inline SlTree.syncTreeItems This was only called from 2 places, and they each had different behaviour anyways. * SlTree: separate expand/collapse from selection This makes 'multi' and 'single' mode consistent with each other, and with native file managers.pull/1526/head
rodzic
4ee5271a83
commit
fad76dd1a2
|
@ -168,20 +168,6 @@ export default class SlTree extends ShoelaceElement {
|
|||
}
|
||||
};
|
||||
|
||||
private syncTreeItems(selectedItem: SlTreeItem) {
|
||||
const items = this.getAllTreeItems();
|
||||
|
||||
if (this.selection === 'multiple') {
|
||||
syncCheckboxes(selectedItem);
|
||||
} else {
|
||||
for (const item of items) {
|
||||
if (item !== selectedItem) {
|
||||
item.selected = false;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
private selectItem(selectedItem: SlTreeItem) {
|
||||
const previousSelection = [...this.selectedItems];
|
||||
|
||||
|
@ -190,12 +176,12 @@ export default class SlTree extends ShoelaceElement {
|
|||
if (selectedItem.lazy) {
|
||||
selectedItem.expanded = true;
|
||||
}
|
||||
this.syncTreeItems(selectedItem);
|
||||
syncCheckboxes(selectedItem);
|
||||
} else if (this.selection === 'single' || selectedItem.isLeaf) {
|
||||
selectedItem.expanded = !selectedItem.expanded;
|
||||
selectedItem.selected = true;
|
||||
|
||||
this.syncTreeItems(selectedItem);
|
||||
const items = this.getAllTreeItems();
|
||||
for (const item of items) {
|
||||
item.selected = (item === selectedItem);
|
||||
}
|
||||
} else if (this.selection === 'leaf') {
|
||||
selectedItem.expanded = !selectedItem.expanded;
|
||||
}
|
||||
|
@ -311,7 +297,7 @@ export default class SlTree extends ShoelaceElement {
|
|||
return;
|
||||
}
|
||||
|
||||
if (this.selection === 'multiple' && isExpandButton) {
|
||||
if (isExpandButton) {
|
||||
treeItem.expanded = !treeItem.expanded;
|
||||
} else {
|
||||
this.selectItem(treeItem);
|
||||
|
|
Ładowanie…
Reference in New Issue