implement and use create method to provide a context that needs a host reference
This commit is contained in:
@@ -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
|
||||
>
|
||||
`;
|
||||
|
||||
@@ -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);
|
||||
|
||||
Reference in New Issue
Block a user