implement and use create method to provide a context that needs a host reference

This commit is contained in:
Niels Lyngsø
2023-01-25 10:56:53 +01:00
parent 59bb0b66b3
commit 90a3bf957c
2 changed files with 14 additions and 3 deletions

View File

@@ -55,11 +55,11 @@ customElements.define('umb-storybook', UmbStoryBookElement);
const storybookProvider = (story) => html` <umb-storybook>${story()}</umb-storybook> `;
const dataTypeStoreProvider = (story) => html`
<umb-context-provider key=${UMB_DATA_TYPE_DETAIL_STORE_CONTEXT_TOKEN.toString()} .value=${new UmbDataTypeDetailStore()}>${story()}</umb-context-provider>
<umb-context-provider key=${UMB_DATA_TYPE_DETAIL_STORE_CONTEXT_TOKEN.toString()} .create=${host => new UmbDataTypeDetailStore(host)}>${story()}</umb-context-provider>
`;
const documentTypeStoreProvider = (story) => html`
<umb-context-provider key=${UMB_DOCUMENT_TYPE_DETAIL_STORE_CONTEXT_TOKEN.toString()} .value=${new UmbDocumentTypeDetailStore()}
<umb-context-provider key=${UMB_DOCUMENT_TYPE_DETAIL_STORE_CONTEXT_TOKEN.toString()} .create=${host => new UmbDocumentTypeDetailStore(host)}
>${story()}</umb-context-provider
>
`;

View File

@@ -1,9 +1,18 @@
import { html } from 'lit';
import { customElement, property } from 'lit/decorators.js';
import { UmbLitElement } from './lit-element.element';
import type { UmbControllerHostInterface } from '@umbraco-cms/controller';
@customElement('umb-context-provider')
export class UmbContextProviderElement extends UmbLitElement {
/**
* The value to provide to the context.
* @required
*/
@property({ type: Object, attribute: false })
create?: (host:UmbControllerHostInterface) => unknown;
/**
* The value to provide to the context.
* @required
@@ -23,7 +32,9 @@ export class UmbContextProviderElement extends UmbLitElement {
if (!this.key) {
throw new Error('The key property is required.');
}
if (!this.value) {
if (this.create) {
this.value = this.create(this);
} else if (!this.value) {
throw new Error('The value property is required.');
}
this.provideContext(this.key, this.value);