Start rewriting toasts for PgOverlay system.

Author: Templarian

src/pg/toast/README.md

@@ -1,13 +1,42 @@
-# `<pg-toast>`
+# `PgToast`
 
-The `pg-toast` lives inside of the `pg-toasts` element.
+The `PgToast` utility will open a toast in the top right of the page.
 
 ```typescript
-import '@pictogrammers/components/pgToast.js';
+import PgToast from '@pictogrammers/components/pgToast';
 ```
 
-```html
-<pg-toast></pg-toast>
+```typescript
+PgToast.open({
+  type: 'info',
+  message: 'Loading...',
+  loading: true
+});
+
+// On Success
+this.handleToast.resolve({
+  type: 'success',
+  message: 'Saved',
+  timeout: 5
+});
+// On Error
+this.handleToast.reject({
+  type: 'error',
+  message: 'Saved',
+  timeout: 5
+});
+// Close open toast with no config
+disconnectedCallback() {
+  this.handleToast?.resolve();
+}
 ```
 
-This is entirely a presentational component.
+| Prop | default | Description |
+| ---- | ------- | ----------- |
+| `type` | `info` | `info`, `warning`, `success`, `error` |
+| `message` | `''` | Message string. |
+| `timeout` | `undefined` | Timeout in seconds |
+
+Toasts can be updated in place without adding to the queue by using the `handleToast` config.
+
+Toasts with a `timeout` will automatically hide and any future `handleToast` executions will add to the queue as a new toast.

src/pg/toast/__examples__/basic/basic.html

@@ -0,0 +1,7 @@
+<div>
+  <button part="toastInfo">Info</button>
+  <button part="toastWarning">Warning</button>
+  <button part="toastError">Error</button>
+  <button part="toastLoading">Loading (mock 3 seconds)</button>
+  <button part="toggleToast">Toggle Toast</button>
+</div>

src/pg/toast/__examples__/basic/basic.ts

@@ -0,0 +1,76 @@
+import { Component, Part } from '@pictogrammers/element';
+import PgToast from '../../toast';
+
+import template from './basic.html';
+
+@Component({
+  selector: 'x-pg-toasts-basic',
+  template
+})
+export default class XPgToastsBasic extends HTMLElement {
+
+  @Part() $toastInfo: HTMLButtonElement;
+  @Part() $toastWarning: HTMLButtonElement;
+  @Part() $toastError: HTMLButtonElement;
+  @Part() $toastLoading: HTMLButtonElement;
+  @Part() $toastToggle: HTMLButtonElement;
+
+  connectedCallback() {
+    this.$toastInfo.addEventListener('click', this.handleInfo.bind(this));
+    this.$toastWarning.addEventListener('click', this.handleWarning.bind(this));
+    this.$toastError.addEventListener('click', this.handleError.bind(this));
+    this.$toastLoading.addEventListener('click', this.handleLoading.bind(this));
+    this.$toastToggle.addEventListener('click', this.handleToggle.bind(this));
+  }
+
+  handleInfo() {
+    PgToast.open({
+      type: 'info',
+      message: 'Hello World! With really long content that wraps rows.',
+    });
+  }
+
+  handleWarning() {
+    PgToast.open({
+      type: 'warning',
+      message: 'Hello World! Warning',
+    });
+  }
+
+  handleError() {
+    PgToast.open({
+      type: 'error',
+      message: 'Hello World! Error',
+    });
+  }
+
+  async handleLoading() {
+    const toast = await PgToast.open({
+      type: 'info',
+      message: 'Loading...',
+      loading: true
+    });
+    setTimeout(() => {
+      toast({
+        type: 'success',
+        message: 'Saved record.',
+        timeout: 5
+      });
+    }, 3000);
+  }
+
+  cacheToast: any;
+  async handleToggle() {
+    if (!this.cacheToast) {
+      this.cacheToast = await PgToast.open({
+        type: 'info',
+        message: 'Loading...',
+        loading: true
+      });
+    } else {
+      this.cacheToast();
+      this.cacheToast = null;
+    }
+  }
+
+}

src/pg/toast/toast.ts

@@ -1,16 +1,18 @@
 import { Component, Prop, Part } from '@pictogrammers/element';
 import { uuid } from '../shared/uuid';
-import { removeToast } from '../shared/toast';
 
 import template from './toast.html';
 import style from './toast.css';
+import PgOverlay from '../overlay/overlay';
+
+const toasts = [];
 
 @Component({
   selector: 'pg-toast',
   style,
   template
 })
-export default class PgToast extends HTMLElement {
+export default class PgToast extends PgOverlay {
   @Prop() loading: boolean = false;
   @Prop() message: string = '';
   @Prop() type: string = 'default';
@@ -22,11 +24,23 @@ export default class PgToast extends HTMLElement {
   @Part() $message: HTMLSpanElement;
   @Part() $loading: HTMLSpanElement;
 
+  static open(props: any = {}): Promise<any> {
+    // ToDo: validate props
+    super.open(props);
+    const key = uuid();
+    return Promise.resolve(function (config?: any) {
+      const scopedKey = key;
+      if (config === undefined) {
+        this.toasts.find(t => t.key === scopedKey).remove();
+      }
+    });
+  }
+
   toasts: any[] = [];
 
   connectedCallback() {
     this.$button.addEventListener('click', () => {
-      removeToast(this.key);
+
     });
   }