@inboxsdk/core 0.2.28-alpha.5 → 0.2.28

package/src/platform-implementation-js/dom-driver/inbox/views/inbox-attachment-card-view.js

@@ -1,55 +1,73 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-var _includes = _interopRequireDefault(require("lodash/includes"));
-var _ud = require("ud");
-var _autoHtml = _interopRequireDefault(require("auto-html"));
-var _kefir = _interopRequireDefault(require("kefir"));
-var _kefirBus = _interopRequireDefault(require("kefir-bus"));
-var _kefirStopper = _interopRequireDefault(require("kefir-stopper"));
-var _findParent = _interopRequireDefault(require("../../../../common/find-parent"));
-var _querySelectorOrFail = _interopRequireDefault(require("../../../lib/dom/querySelectorOrFail"));
+/* @flow */
+
+import includes from 'lodash/includes';
+import { defn } from 'ud';
+import autoHtml from 'auto-html';
+import Kefir from 'kefir';
+import kefirBus from 'kefir-bus';
+import kefirStopper from 'kefir-stopper';
+import findParent from '../../../../common/find-parent';
+import querySelector from '../../../lib/dom/querySelectorOrFail';
+import type InboxDriver from '../inbox-driver';
+import type InboxMessageView from './inbox-message-view';
+import type InboxAttachmentOverlayView from './inbox-attachment-overlay-view';
+
+import type { Parsed } from '../detection/attachmentCard/parser';
+
 class InboxAttachmentCardView {
-  constructor(options, driver) {
-    (0, _defineProperty2.default)(this, "_stopper", (0, _kefirStopper.default)());
-    (0, _defineProperty2.default)(this, "_previewClicks", _kefir.default.pool());
-    (0, _defineProperty2.default)(this, "_addedButtonDescriptors", []);
-    (0, _defineProperty2.default)(this, "_overlayView", null);
+  _stopper = kefirStopper();
+  _previewClicks = Kefir.pool();
+  _element: HTMLElement;
+  _driver: InboxDriver;
+  _type: string;
+  _p: ?Parsed; // This is only present for native cards
+  _messageViewDriver: ?InboxMessageView;
+  _addedButtonDescriptors: Object[] = [];
+  _overlayView: ?InboxAttachmentOverlayView = null;
+
+  constructor(options: Object, driver: InboxDriver) {
     this._driver = driver;
     if (options.element) {
       this._element = options.element;
       this._p = options.parsed;
       this._type = options.parsed.attributes.type;
-      _kefir.default.merge([_kefir.default.fromEvents(this._element, 'click'), _kefir.default.fromEvents(this._element, 'keydown')]).takeUntilBy(this._stopper).onValue(() => {
-        this._driver.setLastInteractedAttachmentCardView(this);
-      });
+
+      Kefir.merge([
+        Kefir.fromEvents(this._element, 'click'),
+        Kefir.fromEvents(this._element, 'keydown'),
+      ])
+        .takeUntilBy(this._stopper)
+        .onValue(() => {
+          this._driver.setLastInteractedAttachmentCardView(this);
+        });
     } else {
       this._type = 'CUSTOM';
       this._createNewElement(options);
     }
+
     this._messageViewDriver = this._findMessageView();
     if (this._messageViewDriver) {
       this._messageViewDriver.addAttachmentCardViewDriver(this);
     }
   }
+
   destroy() {
     if (!this._p) {
       this._element.remove();
     }
     this._stopper.destroy();
   }
-  _findMessageView() {
+
+  _findMessageView(): ?InboxMessageView {
     const map = this._driver.getMessageViewElementsMap();
-    const messageViewElement = (0, _findParent.default)(this._element, el => map.has(el));
+    const messageViewElement = findParent(this._element, (el) =>
+      map.has((el: any))
+    );
     if (!messageViewElement) return null;
     return map.get(messageViewElement);
   }
-  _createNewElement(options) {
+
+  _createNewElement(options: Object) {
     if (options.previewUrl) {
       this._element = document.createElement('a');
       this._element.href = options.previewUrl;
@@ -58,10 +76,12 @@ class InboxAttachmentCardView {
       this._element.tabIndex = 0;
     }
     this._element.title = options.title;
-    const setupInnerHtml = options => {
+
+    const setupInnerHtml = (options) => {
       if (options.previewThumbnailUrl) {
-        this._element.className = 'inboxsdk__attachment_card inboxsdk__attachment_card_with_preview';
-        this._element.innerHTML = (0, _autoHtml.default)`
+        this._element.className =
+          'inboxsdk__attachment_card inboxsdk__attachment_card_with_preview';
+        this._element.innerHTML = autoHtml`
           <img alt="" aria-hidden="true"
             style="width: 100%"
             src="${options.previewThumbnailUrl}"
@@ -72,17 +92,20 @@ class InboxAttachmentCardView {
           </div>
         `;
         if (options.failoverPreviewIconUrl) {
-          _kefir.default.fromEvents((0, _querySelectorOrFail.default)(this._element, 'img'), 'error').take(1).takeUntilBy(this._stopper).onValue(() => {
-            setupInnerHtml({
-              ...options,
-              previewThumbnailUrl: null,
-              iconThumbnailUrl: options.failoverPreviewIconUrl
+          Kefir.fromEvents(querySelector(this._element, 'img'), 'error')
+            .take(1)
+            .takeUntilBy(this._stopper)
+            .onValue(() => {
+              setupInnerHtml({
+                ...options,
+                previewThumbnailUrl: null,
+                iconThumbnailUrl: options.failoverPreviewIconUrl,
+              });
             });
-          });
         }
       } else {
         this._element.className = 'inboxsdk__attachment_card';
-        this._element.innerHTML = (0, _autoHtml.default)`
+        this._element.innerHTML = autoHtml`
           <div class="inboxsdk__attachment_card_nohover">
             <div class="inboxsdk__attachment_card_title">${options.title}</div>
             <div class="inboxsdk__attachment_card_description">
@@ -96,43 +119,62 @@ class InboxAttachmentCardView {
           </div>
         `;
       }
-      options.buttons.forEach(button => {
+
+      options.buttons.forEach((button) => {
         this.addButton(button);
       });
     };
     setupInnerHtml(options);
-    this._previewClicks.plug(_kefir.default.merge([_kefir.default.fromEvents(this._element, 'click'), _kefir.default.fromEvents(this._element, 'keypress').filter(e => (0, _includes.default)([32 /*space*/, 13 /*enter*/], e.which))]));
+    this._previewClicks.plug(
+      Kefir.merge([
+        Kefir.fromEvents(this._element, 'click'),
+        Kefir.fromEvents(this._element, 'keypress').filter((e) =>
+          includes([32 /*space*/, 13 /*enter*/], e.which)
+        ),
+      ])
+    );
+
     options.container.appendChild(this._element);
   }
+
   getElement() {
     return this._element;
   }
+
   getMessageViewDriver() {
     return this._messageViewDriver;
   }
-  getStopper() {
+
+  getStopper(): Kefir.Observable<null> {
     return this._stopper;
   }
-  getPreviewClicks() {
+
+  getPreviewClicks(): Kefir.Observable<Event> {
     return this._previewClicks.takeUntilBy(this._stopper);
   }
-  getAttachmentType() {
+
+  getAttachmentType(): string {
     return this._type;
   }
+
   getAddedButtonDescriptors() {
     return this._addedButtonDescriptors;
   }
-  addButton(button) {
+
+  addButton(button: Object): void {
     this._addedButtonDescriptors.push(button);
     if (!this._p) {
       // artificial SDK-added card. Native cards don't have their added buttons
       // processed here. They're added in InboxAttachmentOverlayView.
-      const buttonContainer = (0, _querySelectorOrFail.default)(this._element, '.inboxsdk__attachment_card_buttons');
+      const buttonContainer = querySelector(
+        this._element,
+        '.inboxsdk__attachment_card_buttons'
+      );
       const el = document.createElement('button');
       el.className = 'inboxsdk__attachment_card_button';
       if (button.downloadUrl) {
         el.setAttribute('data-inboxsdk-download-url', button.downloadUrl);
-        el.addEventListener('click', event => {
+        (el: any).addEventListener('click', (event: MouseEvent) => {
           event.stopPropagation();
           event.preventDefault();
           let prevented = false;
@@ -140,7 +182,7 @@ class InboxAttachmentCardView {
             button.onClick({
               preventDefault() {
                 prevented = true;
-              }
+              },
             });
           }
           if (prevented) return;
@@ -149,13 +191,17 @@ class InboxAttachmentCardView {
           if (button.downloadFilename) {
             downloadLink.download = button.downloadFilename;
           }
-          downloadLink.addEventListener('click', function (e) {
-            e.stopPropagation();
-          }, true);
+          downloadLink.addEventListener(
+            'click',
+            function (e: MouseEvent) {
+              e.stopPropagation();
+            },
+            true
+          );
           if (button.openInNewTab) {
             downloadLink.setAttribute('target', '_blank');
           }
-          document.body.appendChild(downloadLink);
+          ((document.body: any): HTMLElement).appendChild(downloadLink);
           downloadLink.click();
           downloadLink.remove();
         });
@@ -163,18 +209,20 @@ class InboxAttachmentCardView {
           <div style="background: no-repeat url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABUAAAAVCAYAAACpF6WWAAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAYElEQVQ4y+2UMQ6AQAgEwfhQnnJP4adjc4UxB0ehhXqbULE7BRAUkLu1yQP6OXQveEab1DXTD0O9b53kIui+QReicnJ5lM2gArQA2LLcDCqAXYA2y1SgZ7BV/Lr+6TugB0K2GxxDXjEZAAAAAElFTkSuQmCC)"></div>
         `;
       } else {
-        el.addEventListener('click', event => {
+        el.addEventListener('click', (event: MouseEvent) => {
           event.stopPropagation();
           event.preventDefault();
           if (button.onClick) {
             button.onClick({
               getDownloadURL() {
-                throw new Error('not implemented for artificial sdk-added cardViews!');
-              }
+                throw new Error(
+                  'not implemented for artificial sdk-added cardViews!'
+                );
+              },
             });
           }
         });
-        el.innerHTML = (0, _autoHtml.default)`
+        el.innerHTML = autoHtml`
           <img src="${button.iconUrl}">
         `;
         el.title = button.tooltip;
@@ -182,17 +230,23 @@ class InboxAttachmentCardView {
       buttonContainer.appendChild(el);
     }
   }
-  getTitle() {
+
+  getTitle(): string {
     return this._element.title;
   }
-  async getDownloadURL() {
+
+  async getDownloadURL(): Promise<?string> {
     const overlayView = this._overlayView;
-    if (!overlayView) throw new Error('This method only works during a button onClick callback in Inbox');
+    if (!overlayView)
+      throw new Error(
+        'This method only works during a button onClick callback in Inbox'
+      );
     return overlayView.getDownloadURL();
   }
-  setOverlay(overlayView) {
+
+  setOverlay(overlayView: ?InboxAttachmentOverlayView) {
     this._overlayView = overlayView;
   }
 }
-var _default = (0, _ud.defn)(module, InboxAttachmentCardView);
-exports.default = _default;
+
+export default defn(module, InboxAttachmentCardView);

package/src/platform-implementation-js/dom-driver/inbox/views/inbox-attachment-overlay-view.js

@@ -1,90 +1,108 @@
-"use strict";
+/* @flow */
+
+import { defn } from 'ud';
+import Kefir from 'kefir';
+import kefirStopper from 'kefir-stopper';
+import autoHtml from 'auto-html';
+
+import sharedStyle from '../../../lib/shared-style';
+import customStyle from '../../../dom-driver/inbox/custom-style';
+import { simulateClick } from '../../../lib/dom/simulate-mouse-event';
+import ajax from '../../../../common/ajax';
+
+import type InboxDriver from '../inbox-driver';
+import type { Parsed } from '../detection/attachmentOverlay/parser';
+import type InboxAttachmentCardView from './inbox-attachment-card-view';
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-var _ud = require("ud");
-var _kefir = _interopRequireDefault(require("kefir"));
-var _kefirStopper = _interopRequireDefault(require("kefir-stopper"));
-var _autoHtml = _interopRequireDefault(require("auto-html"));
-var _sharedStyle = _interopRequireDefault(require("../../../lib/shared-style"));
-var _customStyle = _interopRequireDefault(require("../../../dom-driver/inbox/custom-style"));
-var _simulateMouseEvent = require("../../../lib/dom/simulate-mouse-event");
-var _ajax = _interopRequireDefault(require("../../../../common/ajax"));
 class InboxAttachmentOverlayView {
-  constructor(driver, el, parsed, cardView) {
-    (0, _defineProperty2.default)(this, "_stopper", (0, _kefirStopper.default)());
+  _driver: InboxDriver;
+  _el: HTMLElement;
+  _p: Parsed;
+  _cardView: InboxAttachmentCardView;
+  _stopper: Kefir.Observable<null> & { destroy(): void } = kefirStopper();
+
+  constructor(
+    driver: InboxDriver,
+    el: HTMLElement,
+    parsed: Parsed,
+    cardView: InboxAttachmentCardView
+  ) {
     this._driver = driver;
     this._el = el;
     this._p = parsed;
     this._cardView = cardView;
 
     // The element is within a same-origin iframe
-    (0, _sharedStyle.default)(el.ownerDocument);
-    (0, _customStyle.default)(el.ownerDocument);
+    sharedStyle(el.ownerDocument);
+    customStyle(el.ownerDocument);
+
     this._cardView.setOverlay(this);
-    this._cardView.getAddedButtonDescriptors().forEach(button => {
+
+    this._cardView.getAddedButtonDescriptors().forEach((button) => {
       this.addButton(button);
     });
   }
+
   destroy() {
     this._cardView.setOverlay(null);
     this._stopper.destroy();
   }
-  getStopper() {
+
+  getStopper(): Kefir.Observable<null> {
     return this._stopper;
   }
-  addButton(button) {
-    const {
-      downloadButton,
-      buttonContainer
-    } = this._p.elements;
-    if (!buttonContainer) throw new Error('Missing buttonContainer, can not add button');
+
+  addButton(button: Object) {
+    const { downloadButton, buttonContainer } = this._p.elements;
+    if (!buttonContainer)
+      throw new Error('Missing buttonContainer, can not add button');
+
     const el = document.createElement('button');
     el.className = 'inboxsdk__attachment_overlay_button';
-    el.addEventListener('click', event => {
+    el.addEventListener('click', (event: MouseEvent) => {
       event.stopPropagation();
       event.preventDefault();
       if (button.onClick) {
         button.onClick({
-          getDownloadURL: () => this.getDownloadURL()
+          getDownloadURL: () => this.getDownloadURL(),
         });
       }
     });
-    el.innerHTML = (0, _autoHtml.default)`
+    el.innerHTML = autoHtml`
       <img src="${button.iconUrl}">
     `;
     el.setAttribute('data-tooltip-delay', '500');
     el.setAttribute('data-tooltip-unhoverable', 'true');
     if (downloadButton) {
-      el.setAttribute('data-tooltip-class', downloadButton.getAttribute('data-tooltip-class') || '');
-      el.setAttribute('data-tooltip-align', downloadButton.getAttribute('data-tooltip-align') || '');
+      el.setAttribute(
+        'data-tooltip-class',
+        downloadButton.getAttribute('data-tooltip-class') || ''
+      );
+      el.setAttribute(
+        'data-tooltip-align',
+        downloadButton.getAttribute('data-tooltip-align') || ''
+      );
     }
     el.setAttribute('aria-label', button.tooltip);
     el.setAttribute('data-tooltip', button.tooltip);
+
     buttonContainer.insertBefore(el, buttonContainer.lastElementChild);
     this._stopper.onValue(() => {
       el.remove();
     });
   }
-  async getDownloadURL() {
-    const {
-      downloadButton
-    } = this._p.elements;
-    if (!downloadButton) throw new Error('Could not find download button element');
-    const src = await this._driver.getPageCommunicator().clickAndGetNewIframeSrc(downloadButton);
-    const {
-      xhr
-    } = await (0, _ajax.default)({
-      url: src,
-      method: 'HEAD'
-    });
-    const url = xhr.responseURL;
+
+  async getDownloadURL(): Promise<?string> {
+    const { downloadButton } = this._p.elements;
+    if (!downloadButton)
+      throw new Error('Could not find download button element');
+    const src = await this._driver
+      .getPageCommunicator()
+      .clickAndGetNewIframeSrc(downloadButton);
+    const { xhr } = await ajax({ url: src, method: 'HEAD' });
+    const url = (xhr: any).responseURL;
     return url;
   }
 }
-var _default = (0, _ud.defn)(module, InboxAttachmentOverlayView);
-exports.default = _default;
+
+export default defn(module, InboxAttachmentOverlayView);

package/src/platform-implementation-js/dom-driver/inbox/views/inbox-backdrop.js

@@ -1,63 +1,74 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-var _ud = require("ud");
-var _kefir = _interopRequireDefault(require("kefir"));
-var _kefirBus = _interopRequireDefault(require("kefir-bus"));
-var _kefirStopper = _interopRequireDefault(require("kefir-stopper"));
+/* @flow */
+
+import { defn } from 'ud';
+import Kefir from 'kefir';
+import kefirBus from 'kefir-bus';
+import type { Bus } from 'kefir-bus';
+import kefirStopper from 'kefir-stopper';
+
 class InboxBackdrop {
-  constructor() {
-    let zIndex = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 500;
-    let target = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : document.body;
-    (0, _defineProperty2.default)(this, "_preAutoCloseStream", (0, _kefirBus.default)());
-    (0, _defineProperty2.default)(this, "_stopper", (0, _kefirStopper.default)());
-    const el = this._el = document.createElement('div');
+  _preAutoCloseStream: Bus<Object> = kefirBus();
+  _stopper: Kefir.Observable<null> & { destroy(): void } = kefirStopper();
+  _el: HTMLElement;
+
+  constructor(
+    zIndex: number = 500,
+    target: HTMLElement = (document.body: any)
+  ) {
+    const el = (this._el = document.createElement('div'));
     el.className = 'inboxsdk__inbox_backdrop';
     el.style.zIndex = String(zIndex);
-    _kefir.default.fromEvents(el, 'click').filter(event => {
-      let isCanceled = false;
-      const appEvent = {
-        type: 'outsideInteraction',
-        cause: event,
-        cancel: () => {
-          isCanceled = true;
-        }
-      };
-      this._preAutoCloseStream.emit(appEvent);
-      return !isCanceled;
-    }).onValue(e => {
-      this.destroy();
-    });
+
+    Kefir.fromEvents(el, 'click')
+      .filter((event) => {
+        let isCanceled = false;
+        const appEvent = {
+          type: 'outsideInteraction',
+          cause: event,
+          cancel: () => {
+            isCanceled = true;
+          },
+        };
+        this._preAutoCloseStream.emit(appEvent);
+        return !isCanceled;
+      })
+      .onValue((e: MouseEvent) => {
+        this.destroy();
+      });
+
     if (!target) throw new Error('no target');
     target.appendChild(el);
+
     this._stopper.onValue(() => {
       el.classList.remove('inboxsdk__active');
-      _kefir.default.fromEvents(el, 'transitionend').merge(_kefir.default.later(200)) // transition might not finish if element is hidden
-      .take(1).onValue(() => {
-        el.remove();
-      });
+      Kefir.fromEvents(el, 'transitionend')
+        .merge(Kefir.later(200)) // transition might not finish if element is hidden
+        .take(1)
+        .onValue(() => {
+          el.remove();
+        });
     });
+
     el.offsetHeight; // force layout so that adding this class does a transition.
     el.classList.add('inboxsdk__active');
   }
-  getElement() {
+
+  getElement(): HTMLElement {
     return this._el;
   }
-  getPreAutoCloseStream() {
+
+  getPreAutoCloseStream(): Kefir.Observable<Object> {
     return this._preAutoCloseStream;
   }
-  getStopper() {
+
+  getStopper(): Kefir.Observable<null> {
     return this._stopper;
   }
+
   destroy() {
     this._preAutoCloseStream.end();
     this._stopper.destroy();
   }
 }
-var _default = (0, _ud.defn)(module, InboxBackdrop);
-exports.default = _default;
+
+export default defn(module, InboxBackdrop);

package/src/platform-implementation-js/dom-driver/inbox/views/inbox-chat-sidebar-view.js

@@ -1,37 +1,34 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-var _ud = require("ud");
-var _once = _interopRequireDefault(require("lodash/once"));
-var _kefir = _interopRequireDefault(require("kefir"));
-var _kefirStopper = _interopRequireDefault(require("kefir-stopper"));
-var _makeMutationObserverChunkedStream = _interopRequireDefault(require("../../../lib/dom/make-mutation-observer-chunked-stream"));
+/* @flow */
+
+import { defn } from 'ud';
+import once from 'lodash/once';
+import Kefir from 'kefir';
+import kefirStopper from 'kefir-stopper';
+import type { Parsed } from '../detection/chatSidebar/parser';
+import makeMutationObserverChunkedStream from '../../../lib/dom/make-mutation-observer-chunked-stream';
+
+export type Mode = 'HIDDEN' | 'DROPDOWN' | 'SIDEBAR';
+
 class InboxChatSidebarView {
-  constructor(el, p) {
-    (0, _defineProperty2.default)(this, "_stopper", (0, _kefirStopper.default)());
-    (0, _defineProperty2.default)(this, "getModeStream", (0, _once.default)(() => {
-      const parent = this._el.parentElement;
-      return (0, _makeMutationObserverChunkedStream.default)(parent, {
-        attributes: true,
-        attributeFilter: ['class']
-      }).toProperty(() => null).map(() => this.getMode()).skipDuplicates().takeUntilBy(this._stopper);
-    }));
+  _el: HTMLElement;
+  _p: Parsed;
+  _stopper = kefirStopper();
+
+  constructor(el: HTMLElement, p: Parsed) {
     this._el = el;
     this._p = p;
   }
-  getStopper() {
+
+  getStopper(): Kefir.Observable<null> {
     return this._stopper;
   }
+
   destroy() {
     this._stopper.destroy();
   }
-  getMode() {
-    const parent = this._el.parentElement;
+
+  getMode(): Mode {
+    const parent: HTMLElement = (this._el.parentElement: any);
     const parentComputedStyle = window.getComputedStyle(parent);
     if (parseInt(parentComputedStyle.bottom) === 0) {
       return 'SIDEBAR';
@@ -41,6 +38,18 @@ class InboxChatSidebarView {
     }
     return 'HIDDEN';
   }
+
+  getModeStream: () => Kefir.Observable<Mode> = once(() => {
+    const parent: HTMLElement = (this._el.parentElement: any);
+    return makeMutationObserverChunkedStream(parent, {
+      attributes: true,
+      attributeFilter: ['class'],
+    })
+      .toProperty(() => null)
+      .map(() => this.getMode())
+      .skipDuplicates()
+      .takeUntilBy(this._stopper);
+  });
 }
-var _default = (0, _ud.defn)(module, InboxChatSidebarView);
-exports.default = _default;
+
+export default defn(module, InboxChatSidebarView);