@nyaruka/temba-components 0.86.1 → 0.88.0

package/src/toast/Toast.ts

@@ -0,0 +1,224 @@
+import { TemplateResult, css, html } from 'lit';
+import { RapidElement } from '../RapidElement';
+import { property } from 'lit/decorators.js';
+import { repeat } from 'lit/directives/repeat.js';
+
+interface ToastMessage {
+  id: number;
+  text: string;
+  level: 'info' | 'warning' | 'error';
+  visible?: boolean;
+  time: Date;
+  removeTime?: Date;
+}
+
+export class Toast extends RapidElement {
+  @property({ type: Array })
+  messages: ToastMessage[] = [];
+
+  @property({ type: Number, attribute: 'duration' })
+  staleDuration = 5000;
+
+  @property({ type: Number, attribute: 'animation' })
+  animationDuration = 200;
+
+  @property({ type: Boolean, attribute: 'error-sticky' })
+  errorSticky = false;
+
+  @property({ type: Boolean, attribute: 'warning-sticky' })
+  warningSticky = false;
+
+  @property({ type: Boolean, attribute: 'info-sticky' })
+  infoSticky = false;
+
+  static styles = css`
+    :host {
+      position: fixed;
+      width: 400px;
+      z-index: 10000;
+      right: 0;
+    }
+
+    .message {
+      background-color: rgba(50, 50, 50, 0.85);
+      background-color: rgba(255, 255, 255, 0.97);
+      color: rgba(0, 0, 0, 0.85);
+      padding: 0.5em 1em;
+      margin: 0.75em;
+      border-radius: 0.5em;
+      display: flex;
+      transition-property: transform, opacity;
+      transition-timing-function: ease-in-out;
+      transform: translateY(-100%);
+      opacity: 0;
+      box-shadow: rgba(0, 0, 0, 0.2) 0px 0px 3em 2px;
+      border: 2px solid rgba(0, 0, 0, 0.3);
+    }
+
+    .message.visible {
+      transform: translateY(0);
+      opacity: 1;
+    }
+
+    .message.info {
+    }
+
+    .message.warning {
+      color: rgba(255, 167, 0, 0.9);
+    }
+
+    .message.error {
+      border-color: var(--color-error);
+      color: var(--color-error);
+    }
+
+    .message.removing {
+      opacity: 0;
+      transform: translateY(-100%);
+    }
+
+    temba-icon {
+      cursor: pointer;
+      padding-left: 1em;
+      opacity: 0;
+      transition: all 200ms ease-in-out;
+    }
+
+    .message:hover temba-icon {
+      opacity: 1;
+    }
+
+    temba-icon:hover {
+      transform: scale(1.3) translateX(-0.1em);
+    }
+
+    .message .text {
+      flex-grow: 1;
+    }
+
+    .info {
+    }
+  `;
+
+  public checkForStaleMessages() {
+    const now = new Date();
+
+    // ignore sticky messages
+    const staleMessages = this.messages.filter((message) => {
+      if (message.level === 'error' && this.errorSticky) {
+        return false;
+      }
+      if (message.level === 'warning' && this.warningSticky) {
+        return false;
+      }
+      if (message.level === 'info' && this.infoSticky) {
+        return false;
+      }
+      return true;
+    });
+
+    staleMessages.forEach((message) => {
+      // error messages do not remove themselves
+      if (now.getTime() - message.time.getTime() > this.staleDuration) {
+        this.removeMessage(message);
+      }
+    });
+
+    if (this.messages.length === 0 && this.checker) {
+      window.clearInterval(this.checker);
+      this.checker = 0;
+    }
+  }
+
+  private checker: number;
+  private messageId: number = 0;
+
+  public addMessages(messages: ToastMessage[]) {
+    messages.forEach((message) => {
+      this.addMessage(message.text, message.level);
+    });
+  }
+
+  public addMessage(text: string, level: 'info' | 'warning' | 'error') {
+    const message: ToastMessage = {
+      id: ++this.messageId,
+      text,
+      level,
+      time: new Date()
+    };
+    this.messages.push(message);
+
+    window.setTimeout(() => {
+      message.visible = true;
+      this.requestUpdate('messages');
+    }, 100);
+
+    this.requestUpdate('messages');
+
+    if (this.checker) {
+      window.clearInterval(this.checker);
+      this.checker = 0;
+    }
+
+    this.checker = window.setInterval(
+      this.checkForStaleMessages.bind(this),
+      1000
+    );
+  }
+
+  public info(message: string) {
+    this.addMessage(message, 'info');
+  }
+
+  public warning(message: string) {
+    this.addMessage(message, 'warning');
+  }
+
+  public error(message: string) {
+    this.addMessage(message, 'error');
+  }
+
+  public removeMessage(message: ToastMessage) {
+    message.removeTime = new Date();
+    window.setTimeout(() => {
+      this.messages = this.messages.filter((m) => m !== message);
+      this.requestUpdate('messages');
+    }, this.animationDuration);
+
+    this.requestUpdate('messages');
+  }
+
+  private handleMessageClicked(e: MouseEvent) {
+    const ele = e.target as HTMLElement;
+    const id = parseInt(ele.getAttribute('message_id'));
+    const message = this.messages.find((m) => m.id === id);
+    if (message) {
+      this.removeMessage(message);
+    }
+  }
+
+  public render(): TemplateResult {
+    return html`
+      ${repeat(
+        this.messages,
+        (message) => message.id,
+        (message) => html`
+          <div
+            style="transition-duration: ${this.animationDuration}ms"
+            class="message ${message.level} ${message.visible
+              ? 'visible'
+              : ''} ${message.removeTime ? 'removing' : ''}"
+          >
+            <div class="text">${message.text}</div>
+            <temba-icon
+              name="close"
+              size="1.3"
+              message_id="${message.id}"
+              @click=${this.handleMessageClicked}
+            ></temba-icon>
+          </div>
+        `
+      )}
+    `;
+  }
+}

package/src/utils/index.ts

@@ -4,6 +4,7 @@ import { Button } from '../button/Button';
 import { Dialog } from '../dialog/Dialog';
 import { Attachment, ContactField, Ticket, User } from '../interfaces';
 import ColorHash from 'color-hash';
+import { Toast } from '../toast/Toast';
 
 export const DEFAULT_MEDIA_ENDPOINT = '/api/v2/media.json';
 
@@ -32,7 +33,7 @@ export enum Color {
   BLUE = 'color:#5078b5;',
   GREEN = 'color:#62bd6a;',
   RED = 'color:#e36049;',
-  PURPLE = 'color:#a626a4;',
+  PURPLE = 'color:#a626a4;'
 }
 
 export const log = (message: string | object, styling = '', details = []) => {
@@ -73,7 +74,7 @@ export const getHeaders = (headers: any = {}) => {
   // mark us as ajax
   fetchHeaders['X-Requested-With'] = 'XMLHttpRequest';
 
-  Object.keys(headers).forEach(key => {
+  Object.keys(headers).forEach((key) => {
     fetchHeaders[key] = headers[key];
   });
   return fetchHeaders;
@@ -87,7 +88,7 @@ export const getUrl = (
   return new Promise<WebResponse>((resolve, reject) => {
     const options = {
       method: 'GET',
-      headers: getHeaders(headers),
+      headers: getHeaders(headers)
     };
 
     if (controller) {
@@ -95,7 +96,7 @@ export const getUrl = (
     }
 
     fetch(url, options)
-      .then(response => {
+      .then((response) => {
         response.text().then((body: string) => {
           let json = {};
           try {
@@ -108,11 +109,11 @@ export const getUrl = (
             json,
             url: response.url,
             headers: response.headers,
-            status: response.status,
+            status: response.status
           });
         });
       })
-      .catch(error => {
+      .catch((error) => {
         reject(error);
       });
   });
@@ -146,16 +147,16 @@ export const fetchResultsPage = (
       .then((response: WebResponse) => {
         resolve({
           results: response.json.results,
-          next: response.json.next,
+          next: response.json.next
         });
       })
-      .catch(error => reject(error));
+      .catch((error) => reject(error));
   });
 };
 
 export const fetchResults = async (url: string): Promise<any[]> => {
   if (!url) {
-    return new Promise<any[]>(resolve => resolve([]));
+    return new Promise<any[]>((resolve) => resolve([]));
   }
 
   let results: any[] = [];
@@ -177,19 +178,19 @@ export const getAssetPage = (url: string): Promise<AssetPage> => {
         if (response.status >= 200 && response.status < 300) {
           resolve({
             assets: response.json.results,
-            next: response.json.next,
+            next: response.json.next
           });
         } else {
           reject(response);
         }
       })
-      .catch(error => reject(error));
+      .catch((error) => reject(error));
   });
 };
 
 export const getAssets = async (url: string): Promise<Asset[]> => {
   if (!url) {
-    return new Promise<Asset[]>(resolve => resolve([]));
+    return new Promise<Asset[]>((resolve) => resolve([]));
   }
 
   let assets: Asset[] = [];
@@ -231,17 +232,25 @@ export const postUrl = (
   const options = {
     method: 'POST',
     headers: fetchHeaders,
-    body: payload,
+    body: payload
   };
 
   return new Promise<WebResponse>((resolve, reject) => {
     fetch(url, options)
-      .then(async response => {
+      .then(async (response) => {
         if (response.status >= 500) {
           reject(response);
           return;
         }
 
+        const toasts = response.headers.get('x-temba-toasts');
+        if (toasts) {
+          const toastEle = document.querySelector('temba-toast') as Toast;
+          if (toastEle) {
+            toastEle.addMessages(JSON.parse(toasts));
+          }
+        }
+
         response.text().then((body: string) => {
           let json = {};
           try {
@@ -254,11 +263,11 @@ export const postUrl = (
             headers: response.headers,
             status: response.status,
             redirected: response.redirected,
-            url: response.url,
+            url: response.url
           });
         });
       })
-      .catch(error => {
+      .catch((error) => {
         reject(error);
       });
   });
@@ -275,7 +284,7 @@ export const postFormData = (
 ): Promise<WebResponse> => {
   return new Promise<WebResponse>((resolve, reject) => {
     postUrl(url, formData, headers)
-      .then(response => {
+      .then((response) => {
         if (response.status >= 200 && response.status < 400) {
           resolve(response);
         } else {
@@ -286,7 +295,7 @@ export const postFormData = (
           }
         }
       })
-      .catch(err => {
+      .catch((err) => {
         console.error(err);
         reject(err);
       });
@@ -319,7 +328,7 @@ export const hexToRgb = (hex: string): { r: number; g: number; b: number } => {
     ? {
         r: parseInt(result[1], 16),
         g: parseInt(result[2], 16),
-        b: parseInt(result[3], 16),
+        b: parseInt(result[3], 16)
       }
     : null;
 };
@@ -343,7 +352,7 @@ export const getElementOffset = (
     bottom: rect.top + rect.height,
     right: rect.left + rect.width,
     width: rect.width,
-    height: rect.height,
+    height: rect.height
   };
 };
 
@@ -474,7 +483,7 @@ export const stubbable = new Stubbable();
 export const timeSince = (
   date: Date,
   options: { compareDate?: Date; hideRecentText?: boolean; suffix?: string } = {
-    suffix: '',
+    suffix: ''
   }
 ) => {
   const { compareDate, hideRecentText, suffix } = options;
@@ -653,7 +662,7 @@ export const getCookieBoolean = (name: string) => {
 export enum COOKIE_KEYS {
   SETTINGS = 'settings',
   MENU_COLLAPSED = 'menu-collapsed',
-  TICKET_SHOW_DETAILS = 'tickets.show-details',
+  TICKET_SHOW_DETAILS = 'tickets.show-details'
 }
 
 export const capitalize = ([first, ...rest], locale = navigator.language) =>
@@ -717,7 +726,7 @@ export const extractInitials = (text: string) => {
   }
 
   // use initial letters of words with preference to first word and capital letters
-  const firstLetters = words.map(w => w.substring(0, 1));
+  const firstLetters = words.map((w) => w.substring(0, 1));
   const firstCapitals = firstLetters.filter(
     (l, index) => l == l.toUpperCase() || index == 0
   );
@@ -731,7 +740,7 @@ export const extractInitials = (text: string) => {
 export const hslToHex = (h, s, l) => {
   l /= 100;
   const a = (s * Math.min(l, 1 - l)) / 100;
-  const f = n => {
+  const f = (n) => {
     const k = (n + h / 30) % 12;
     const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);
     return Math.round(255 * color)

package/src/vectoricon/VectorIcon.ts

@@ -228,7 +228,7 @@ export class VectorIcon extends LitElement {
           clickable: this.clickable,
           circled: this.circled,
           animate: !!this.animateChange || !!this.animateClick,
-          'spin-forever': this.spin,
+          'spin-forever': this.spin
         })}"
       >
         <svg
@@ -243,7 +243,7 @@ export class VectorIcon extends LitElement {
               this.animationStep > 0,
             [this.animateClick]: !!this.animateClick,
             [this.animateClick + '-' + this.animationStep]:
-              this.animationStep > 0,
+              this.animationStep > 0
           })}"
         >
           <use

package/src/vectoricon/index.ts

@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/no-duplicate-enum-values */
 // for cache busting we dynamically generate a fingerprint, use yarn svg to update
 export const SVG_FINGERPRINT = 'e5bcaf1a10896e9b870da4b40474d67b';
 
@@ -249,5 +250,5 @@ export enum Icon {
   datepicker = 'calendar',
   slider = 'sliders-02',
   select = 'browser',
-  input = 'edit-05',
+  input = 'edit-05'
 }