yv01p/Umbraco-CMS
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

update examples to match new naming

Browse Source
This commit is contained in:
Mads Rasmussen
2022-05-25 13:07:02 +02:00
parent 53ea7cf592
commit fcba97811d
1 changed files with 18 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files

48
src/Umbraco.Web.UI.Client/src/core/context/context.stories.mdx
View File

@@ -1,7 +1,7 @@
# Context API # Context API
In order to provide contextual shared logic or data we have established asystem called Context API. In order to provide contextual shared logic or data we have established a system called Context API.
This system is based on the **Provider Pattern**, This is an event-based protocol that components can use to retrieve data from any location in the DOM. This system is based on the **Provider Pattern**, This is an event-based protocol that components can use to retrieve data from any location in the DOM.
@@ -26,20 +26,13 @@ For other components to consume a context we need to provide it from a parent co
```ts ```ts
import { html, LitElement } from 'lit'; import { html, LitElement } from 'lit';
import { ContextProviderMixin } from './utils/context'; import { UmbContextProviderMixin } from './context';
import { UMBNotificationService } from './shell/shared/notification'; import { UmbNotificationService } from './notification';
class UMBAppElement extends ContextProviderMixin(LitElement) {
notificationService: UMBNotificationService = new UMBNotificationService();
class UmbAppElement extends UmbContextProviderMixin(LitElement) {
constructor () { constructor () {
super(); super();
this.provideContext('umbNotificationService', notificationService); this.provideContext('umbNotificationService', new UmbNotificationService());
}
render() {
return html`<slot></slot>`;
} }
} }
``` ```
@@ -52,12 +45,12 @@ Until a requested context is resolved you should make sure to disable or query a
```ts ```ts
import { html, LitElement } from 'lit'; import { html, LitElement } from 'lit';
import type { UMBNotificationService } from './shell/shared/notification'; import { UmbContextConsumerMixin } from './context';
import { UMBContextConsumerMixin } from './utils/context'; import type { UmbNotificationService } from './notification';
class MyElement extends UMBContextConsumerMixin(LitElement) { class MyElement extends UmbContextConsumerMixin(LitElement) {
private _notificationService: UMBNotificationService; private _notificationService: UmbNotificationService;
constructor () { constructor () {
super(); super();
@@ -67,7 +60,7 @@ class MyElement extends UMBContextConsumerMixin(LitElement) {
} }
private _handleClick () { private _handleClick () {
const data: UMBNotificationDefaultData = { message: 'Notification message' }; const data: UmbNotificationDefaultData = { message: 'Notification message' };
this._notificationService?.peek('positive', { data }); this._notificationService?.peek('positive', { data });
} }
@@ -87,13 +80,12 @@ This example shows how to use the ContextProvider class directly.
```ts ```ts
import { html, LitElement } from 'lit'; import { html, LitElement } from 'lit';
import { UMBContextProvider } from './utils/context'; import { UmbContextProvider } from './context';
import { UMBNotificationService } from './notification.service'; import { UmbNotificationService } from './notification';
class UMBAppElement extends LitElement { class UmbAppElement extends LitElement {
notificationService: UMVNotificationService = new UMBNotificationService(); private _notificationProvider = new UmbContextProvider(this, 'umbNotificationService', new UMBNotificationService());
private _notificationProvider = new UMBContextProvider(this, 'umbNotificationService', this.notificationService);
connectedCallback(): void { connectedCallback(): void {
super.connectedCallback(); super.connectedCallback();
@@ -104,10 +96,6 @@ class UMBAppElement extends LitElement {
super.disconnectedCallback(); super.disconnectedCallback();
this._notificationProvider.detach(); this._notificationProvider.detach();
} }
render() {
return html`<slot></slot>`;
}
} }
``` ```
@@ -117,17 +105,17 @@ This example shows how to use the ContextRequester class directly.
```ts ```ts
import { html, LitElement } from 'lit'; import { html, LitElement } from 'lit';
import { UMBNotificationService } from './notification.service'; import { UmbNotificationService } from './notification';
import { UMBContextConsumer } from './utils/context'; import { UmbContextConsumer } from './context';
class MyElement extends LitElement { class MyElement extends LitElement {
private _notificationService: UMBNotificationService; private _notificationService: UmbNotificationService;
connectedCallback(): void { connectedCallback(): void {
super.connectedCallback(); super.connectedCallback();
new UMBContextConsumer(this, 'umbNotificationService', (_instance: UMBNotificationService) => { new UmbContextConsumer(this, 'umbNotificationService', (_instance: UmbNotificationService) => {
this._notificationService = _instance; this._notificationService = _instance;
}); });
} }