replace temp event hack with context and skipHost (#18242)

This commit is contained in:
Mads Rasmussen
2025-02-07 12:45:49 +01:00
committed by GitHub
parent 62f46667d2
commit 6df7ff4322
3 changed files with 13 additions and 49 deletions

View File

@@ -78,23 +78,6 @@ export class UmbDefaultTreeContext<
// listen for page changes on the pagination manager
this.pagination.addEventListener(UmbChangeEvent.TYPE, this.#onPageChange);
/* TODO: revisit. This is a temp solution to notify the parent it needs to reload its children
there might be a better way to do this through a tree item parent context.
It does not look like there is a way to have a "dynamic" parent context that will stop when a
specific parent is reached (a tree item unique that matches the parentUnique of this item) */
const hostElement = this.getHostElement();
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore
hostElement.addEventListener('temp-reload-tree-item-parent', (event: CustomEvent) => {
const treeRoot = this.#treeRoot.getValue();
const unique = treeRoot?.unique;
if (event.detail.unique === unique) {
event.stopPropagation();
this.loadTree();
}
});
// always load the tree root because we need the root entity to reload the entire tree
this.#loadTreeRoot();
}

View File

@@ -68,7 +68,9 @@ export abstract class UmbTreeItemContextBase<
#foldersOnly = new UmbBooleanState(false);
readonly foldersOnly = this.#foldersOnly.asObservable();
treeContext?: UmbDefaultTreeContext<TreeItemType, TreeRootType>;
public treeContext?: UmbDefaultTreeContext<TreeItemType, TreeRootType>;
public parentTreeItemContext?: UmbTreeItemContext<TreeItemType>;
#sectionContext?: typeof UMB_SECTION_CONTEXT.TYPE;
#sectionSidebarContext?: typeof UMB_SECTION_SIDEBAR_CONTEXT.TYPE;
#actionEventContext?: typeof UMB_ACTION_EVENT_CONTEXT.TYPE;
@@ -87,24 +89,6 @@ export abstract class UmbTreeItemContextBase<
// listen for page changes on the pagination manager
this.pagination.addEventListener(UmbChangeEvent.TYPE, this.#onPageChange);
/* TODO: revisit. This is a temp solution to notify the parent it needs to reload its children
there might be a better way to do this through a tree item parent context.
It does not look like there is a way to have a "dynamic" parent context that will stop when a
specific parent is reached (a tree item unique that matches the parentUnique of this item) */
const hostElement = this.getHostElement();
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore
hostElement.addEventListener('temp-reload-tree-item-parent', (event: CustomEvent) => {
const treeItem = this.getTreeItem();
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore
const unique = treeItem?.unique;
if (event.detail.unique === unique) {
event.stopPropagation();
this.loadChildren();
}
});
window.addEventListener('navigationend', this.#debouncedCheckIsActive);
}
@@ -248,6 +232,10 @@ export abstract class UmbTreeItemContextBase<
this.#observeFoldersOnly();
});
this.consumeContext(UMB_TREE_ITEM_CONTEXT, (instance) => {
this.parentTreeItemContext = instance;
}).skipHost();
this.consumeContext(UMB_ACTION_EVENT_CONTEXT, (instance) => {
this.#removeEventListeners();
this.#actionEventContext = instance;
@@ -353,19 +341,11 @@ export abstract class UmbTreeItemContextBase<
if (event.getUnique() !== this.unique) return;
if (event.getEntityType() !== this.entityType) return;
/* TODO: revisit. This is a temp solution to notify the parent it needs to reload its children
there might be a better way to do this through a tree item parent context.
It does not look like there is a way to have a "dynamic" parent context that will stop when a
specific parent is reached (a tree item unique that matches the parentUnique of this item) */
const treeItem = this.getTreeItem();
const parentUnique = treeItem?.parent.unique;
const customEvent = new CustomEvent('temp-reload-tree-item-parent', {
detail: { unique: parentUnique },
bubbles: true,
composed: true,
});
this.getHostElement().dispatchEvent(customEvent);
if (this.parentTreeItemContext) {
this.parentTreeItemContext.loadChildren();
} else {
this.treeContext?.loadTree();
}
};
#onPageChange = (event: UmbChangeEvent) => {

View File

@@ -17,6 +17,7 @@ export interface UmbTreeItemContext<TreeItemType extends UmbTreeItemModel> exten
hasActions: Observable<boolean>;
path: Observable<string>;
pagination: UmbPaginationManager;
getTreeItem(): TreeItemType | undefined;
setTreeItem(treeItem: TreeItemType | undefined): void;
loadChildren(): void;
toggleContextMenu(): void;