add protected methods to react on api or element changes

This commit is contained in:
Mads Rasmussen
2024-05-29 11:28:01 +02:00
parent fe90de0051
commit 63f1245dfd
2 changed files with 38 additions and 23 deletions

View File

@@ -1,8 +1,8 @@
import type { UmbCollectionConfiguration, UmbCollectionContext } from './types.js';
import type { UmbCollectionConfiguration } from './types.js';
import { customElement, property } from '@umbraco-cms/backoffice/external/lit';
import { UmbExtensionElementAndApiSlotElementBase } from '@umbraco-cms/backoffice/extension-registry';
import type { ManifestCollection } from '@umbraco-cms/backoffice/extension-registry';
import type { UmbExtensionElementAndApiInitializer } from '@umbraco-cms/backoffice/extension-api';
import type { UmbApi } from '@umbraco-cms/backoffice/extension-api';
@customElement('umb-collection')
export class UmbCollectionElement extends UmbExtensionElementAndApiSlotElementBase<ManifestCollection> {
@@ -24,25 +24,17 @@ export class UmbCollectionElement extends UmbExtensionElementAndApiSlotElementBa
}
#config?: UmbCollectionConfiguration;
protected apiChanged(api: UmbApi | undefined): void {
super.apiChanged(api);
this.#setConfig();
}
#setConfig() {
if (!this.#config || !this._api) return;
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore
this._api.setConfig(this.#config);
}
protected extensionChanged = (
isPermitted: boolean,
controller: UmbExtensionElementAndApiInitializer<ManifestCollection>,
) => {
// TODO: [v15] Once `UmbCollectionContext` extends `UmbApi`, then we can remove this type casting. [LK]
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore
this._api = isPermitted ? (controller.api as unknown as UmbCollectionContext) : undefined;
this._element = isPermitted ? controller.component : undefined;
this.requestUpdate('_element');
this.#setConfig();
};
}
declare global {

View File

@@ -52,21 +52,44 @@ export abstract class UmbExtensionElementAndApiSlotElementBase<
umbExtensionsRegistry,
this._alias,
[this],
this.extensionChanged,
this.#extensionChanged,
this.getDefaultElementName(),
);
this.#extensionController.elementProps = this.#props;
}
protected extensionChanged = (
isPermitted: boolean,
controller: UmbExtensionElementAndApiInitializer<ManifestType>,
) => {
this._api = isPermitted ? controller.api : undefined;
this._element = isPermitted ? controller.component : undefined;
this.requestUpdate('_element');
#extensionChanged = (isPermitted: boolean, controller: UmbExtensionElementAndApiInitializer<ManifestType>) => {
this.apiChanged(isPermitted ? controller.api : undefined);
this.elementChanged(isPermitted ? controller.component : undefined);
};
/**
* Called when the API is changed.
* @protected
* @param {(ManifestType['API_TYPE'] | undefined)} api
* @memberof UmbExtensionElementAndApiSlotElementBase
*/
protected apiChanged(api: ManifestType['API_TYPE'] | undefined) {
this._api = api;
}
/**
* Called when the element is changed.
* @protected
* @param {(ManifestType['ELEMENT_TYPE'] | undefined)} element
* @memberof UmbExtensionElementAndApiSlotElementBase
*/
protected elementChanged(element: ManifestType['ELEMENT_TYPE'] | undefined) {
this._element = element;
this.requestUpdate('_element');
}
/**
* Render the element.
* @protected
* @return {*}
* @memberof UmbExtensionElementAndApiSlotElementBase
*/
protected render() {
return this._element;
}