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
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.
@@ -26,20 +26,13 @@ For other components to consume a context we need to provide it from a parent co
```ts
import { html, LitElement } from 'lit';
import { ContextProviderMixin } from './utils/context';
import { UMBNotificationService } from './shell/shared/notification';
class UMBAppElement extends ContextProviderMixin(LitElement) {
notificationService: UMBNotificationService = new UMBNotificationService();
import { UmbContextProviderMixin } from './context';
import { UmbNotificationService } from './notification';
class UmbAppElement extends UmbContextProviderMixin(LitElement) {
constructor () {
super();
this.provideContext('umbNotificationService', notificationService);
}
render() {
return html`<slot></slot>`;
this.provideContext('umbNotificationService', new UmbNotificationService());
}
}
```
@@ -52,12 +45,12 @@ Until a requested context is resolved you should make sure to disable or query a
```ts
import { html, LitElement } from 'lit';
import type { UMBNotificationService } from './shell/shared/notification';
import { UMBContextConsumerMixin } from './utils/context';
import { UmbContextConsumerMixin } from './context';
import type { UmbNotificationService } from './notification';
class MyElement extends UMBContextConsumerMixin(LitElement) {
class MyElement extends UmbContextConsumerMixin(LitElement) {
private _notificationService: UMBNotificationService;
private _notificationService: UmbNotificationService;
constructor () {
super();
@@ -67,7 +60,7 @@ class MyElement extends UMBContextConsumerMixin(LitElement) {
}
private _handleClick () {
const data: UMBNotificationDefaultData = { message: 'Notification message' };
const data: UmbNotificationDefaultData = { message: 'Notification message' };
this._notificationService?.peek('positive', { data });
}
@@ -87,13 +80,12 @@ This example shows how to use the ContextProvider class directly.
```ts
import { html, LitElement } from 'lit';
import { UMBContextProvider } from './utils/context';
import { UMBNotificationService } from './notification.service';
import { UmbContextProvider } from './context';
import { UmbNotificationService } from './notification';
class UMBAppElement extends LitElement {
class UmbAppElement extends LitElement {
notificationService: UMVNotificationService = new UMBNotificationService();
private _notificationProvider = new UMBContextProvider(this, 'umbNotificationService', this.notificationService);
private _notificationProvider = new UmbContextProvider(this, 'umbNotificationService', new UMBNotificationService());
connectedCallback(): void {
super.connectedCallback();
@@ -104,10 +96,6 @@ class UMBAppElement extends LitElement {
super.disconnectedCallback();
this._notificationProvider.detach();
}
render() {
return html`<slot></slot>`;
}
}
```
@@ -117,17 +105,17 @@ This example shows how to use the ContextRequester class directly.
```ts
import { html, LitElement } from 'lit';
import { UMBNotificationService } from './notification.service';
import { UMBContextConsumer } from './utils/context';
import { UmbNotificationService } from './notification';
import { UmbContextConsumer } from './context';
class MyElement extends LitElement {
private _notificationService: UMBNotificationService;
private _notificationService: UmbNotificationService;
connectedCallback(): void {
super.connectedCallback();
new UMBContextConsumer(this, 'umbNotificationService', (_instance: UMBNotificationService) => {
new UmbContextConsumer(this, 'umbNotificationService', (_instance: UmbNotificationService) => {
this._notificationService = _instance;
});
}