@inboxsdk/core 0.2.28-alpha.6 → 0.2.28

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

@@ -1,50 +1,66 @@
-"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 _kefirStopper = _interopRequireDefault(require("kefir-stopper"));
-var _kefirBus = _interopRequireDefault(require("kefir-bus"));
-var _inboxBackdrop = _interopRequireDefault(require("./inbox-backdrop"));
-var _fromEventTargetCapture = _interopRequireDefault(require("../../../lib/from-event-target-capture"));
-var _findParent = _interopRequireDefault(require("../../../../common/find-parent"));
+/* @flow */
+
+import { defn } from 'ud';
+import Kefir from 'kefir';
+import kefirStopper from 'kefir-stopper';
+import kefirBus from 'kefir-bus';
+import InboxBackdrop from './inbox-backdrop';
+import fromEventTargetCapture from '../../../lib/from-event-target-capture';
+import type { DrawerViewOptions } from '../../../driver-interfaces/driver';
+import type ComposeView from '../../../views/compose-view';
+import findParent from '../../../../common/find-parent';
+
 const TAKE_OVER_EVENT = 'inboxSDKdrawerViewTakingOver';
 const zIndex = 500;
+
 class InboxDrawerView {
-  constructor(options) {
-    (0, _defineProperty2.default)(this, "_backdrop", null);
-    (0, _defineProperty2.default)(this, "_closing", (0, _kefirStopper.default)());
-    (0, _defineProperty2.default)(this, "_closed", (0, _kefirStopper.default)());
-    (0, _defineProperty2.default)(this, "_composeChanges", (0, _kefirBus.default)());
-    (0, _defineProperty2.default)(this, "_preAutoCloseStream", (0, _kefirBus.default)());
+  _chrome: boolean;
+  _exitEl: HTMLElement;
+  _containerEl: HTMLElement;
+  _el: HTMLElement;
+  _backdrop: ?InboxBackdrop = null;
+  _slideAnimationDone: Kefir.Observable<null>;
+  _closing = kefirStopper();
+  _closed = kefirStopper();
+  _composeChanges = kefirBus();
+  _preAutoCloseStream = kefirBus();
+
+  constructor(options: DrawerViewOptions) {
     this._chrome = typeof options.chrome === 'boolean' ? options.chrome : true;
-    let insertionTarget = document.body;
+
+    let insertionTarget = ((document.body: any): HTMLElement);
     let composeRect = null;
-    const {
-      composeView,
-      closeWithCompose
-    } = options;
+
+    const { composeView, closeWithCompose } = options;
     if (composeView) {
-      const ret = this._setupComposeInsertionTarget(composeView, closeWithCompose);
+      const ret = this._setupComposeInsertionTarget(
+        composeView,
+        closeWithCompose
+      );
       insertionTarget = ret.insertionTarget;
       composeRect = ret.composeRect;
     }
+
     this._setupElement(options, insertionTarget);
 
     // Move or resize the ComposeView so that it's not clipped by the DrawerView.
     let composeNeedToMoveLeft = 0;
     if (composeView) {
       if (!composeRect) throw new Error('should not happen');
-      composeNeedToMoveLeft = this._setupComposeAnimation(composeView, composeRect, true);
+      composeNeedToMoveLeft = this._setupComposeAnimation(
+        composeView,
+        composeRect,
+        true
+      );
     }
+
     this._el.offsetHeight; // force layout so that adding a class does a transition.
     this._el.classList.add('inboxsdk__active');
-    this._slideAnimationDone = _kefir.default.fromEvents(this._el, 'transitionend').take(1).takeUntilBy(this._closing).map(() => null);
+    this._slideAnimationDone = Kefir.fromEvents(this._el, 'transitionend')
+      .take(1)
+      .takeUntilBy(this._closing)
+      .map(() => null);
+
     if (composeView) {
       this._positionCompose(composeView, composeNeedToMoveLeft);
     }
@@ -52,29 +68,41 @@ class InboxDrawerView {
     // Gmail calls preventDefault on escape keypresses. We want to close the
     // drawer for any escape keypresses which weren't preventDefaulted by the
     // current extension.
-    (0, _fromEventTargetCapture.default)(document, 'keydown').filter(e => e.key ? e.key === 'Escape' : e.which === 27).takeUntilBy(this._closing).onValue(e => {
-      const origPreventDefault = e.preventDefault;
-      e.preventDefault = function () {
-        this._defaultPreventedInContext = true;
-        return origPreventDefault.call(this);
-      };
-    });
-    _kefir.default.fromEvents(document, 'keydown').filter(e => e.key ? e.key === 'Escape' : e.which === 27).filter(e => !e._defaultPreventedInContext).filter(event => {
-      let isCanceled = false;
-      const appEvent = {
-        type: 'escape',
-        cause: event,
-        cancel: () => {
-          isCanceled = true;
-        }
-      };
-      this._preAutoCloseStream.emit(appEvent);
-      return !isCanceled;
-    }).takeUntilBy(this._closing).onValue(() => {
-      this.close();
-    });
+    fromEventTargetCapture(document, 'keydown')
+      .filter((e) => (e.key ? e.key === 'Escape' : e.which === 27))
+      .takeUntilBy(this._closing)
+      .onValue((e) => {
+        const origPreventDefault = e.preventDefault;
+        e.preventDefault = function () {
+          this._defaultPreventedInContext = true;
+          return origPreventDefault.call(this);
+        };
+      });
+    Kefir.fromEvents(document, 'keydown')
+      .filter((e) => (e.key ? e.key === 'Escape' : e.which === 27))
+      .filter((e) => !e._defaultPreventedInContext)
+      .filter((event) => {
+        let isCanceled = false;
+        const appEvent = {
+          type: 'escape',
+          cause: event,
+          cancel: () => {
+            isCanceled = true;
+          },
+        };
+        this._preAutoCloseStream.emit(appEvent);
+        return !isCanceled;
+      })
+      .takeUntilBy(this._closing)
+      .onValue(() => {
+        this.close();
+      });
   }
-  _setupComposeInsertionTarget(composeView, closeWithCompose) {
+
+  _setupComposeInsertionTarget(
+    composeView: ComposeView,
+    closeWithCompose: ?boolean
+  ): { composeRect: ClientRect, insertionTarget: HTMLElement } {
     if (composeView.isMinimized()) {
       throw new Error("Can't attach DrawerView to minimized ComposeView");
     }
@@ -84,11 +112,22 @@ class InboxDrawerView {
     if (composeView.isFullscreen()) {
       composeView.setFullscreen(false);
     }
-    const closeEvents = [_kefir.default.fromEvents(composeView, 'restored'), _kefir.default.later(10).flatMap(() => _kefir.default.fromEvents(composeView, 'fullscreenChanged'))];
+    const closeEvents = [
+      Kefir.fromEvents(composeView, 'restored'),
+      Kefir.later(10).flatMap(() =>
+        Kefir.fromEvents(composeView, 'fullscreenChanged')
+      ),
+    ];
     if (closeWithCompose) {
-      closeEvents.push(_kefir.default.fromEvents(composeView, 'destroy'), _kefir.default.fromEvents(composeView, 'minimized'));
+      closeEvents.push(
+        Kefir.fromEvents(composeView, 'destroy'),
+        Kefir.fromEvents(composeView, 'minimized')
+      );
     }
-    _kefir.default.merge(closeEvents).takeUntilBy(this._closing.merge(this._composeChanges)).onValue(() => this.close());
+    Kefir.merge(closeEvents)
+      .takeUntilBy(this._closing.merge(this._composeChanges))
+      .onValue(() => this.close());
+
     const composeEl = composeView.getElement();
 
     // Read the compose size before any DOM modifications besides un-fullscreening it.
@@ -108,103 +147,155 @@ class InboxDrawerView {
     // set up the z-indexes of the ComposeView's offsetParent and the
     // insertionTarget point so everything will look right.
     const composeOffsetParent = composeEl.offsetParent;
-    if (!(composeOffsetParent instanceof HTMLElement)) throw new Error('should not happen');
-    const insertionTarget = (0, _findParent.default)(composeOffsetParent, el => window.getComputedStyle(el).getPropertyValue('z-index') !== 'auto' && el.getBoundingClientRect().left === 0) || document.body;
-    composeEl.dispatchEvent(new CustomEvent(TAKE_OVER_EVENT, {
-      bubbles: false,
-      cancelable: false,
-      detail: null
-    }));
-    composeOffsetParent.dispatchEvent(new CustomEvent(TAKE_OVER_EVENT, {
-      bubbles: false,
-      cancelable: false,
-      detail: null
-    }));
-    insertionTarget.dispatchEvent(new CustomEvent(TAKE_OVER_EVENT, {
-      bubbles: false,
-      cancelable: false,
-      detail: null
-    }));
+    if (!(composeOffsetParent instanceof HTMLElement))
+      throw new Error('should not happen');
+    const insertionTarget =
+      findParent(
+        composeOffsetParent,
+        (el) =>
+          window.getComputedStyle(el).getPropertyValue('z-index') !== 'auto' &&
+          el.getBoundingClientRect().left === 0
+      ) || ((document.body: any): HTMLElement);
+
+    composeEl.dispatchEvent(
+      new CustomEvent(TAKE_OVER_EVENT, {
+        bubbles: false,
+        cancelable: false,
+        detail: null,
+      })
+    );
+    composeOffsetParent.dispatchEvent(
+      new CustomEvent(TAKE_OVER_EVENT, {
+        bubbles: false,
+        cancelable: false,
+        detail: null,
+      })
+    );
+    insertionTarget.dispatchEvent(
+      new CustomEvent(TAKE_OVER_EVENT, {
+        bubbles: false,
+        cancelable: false,
+        detail: null,
+      })
+    );
 
     // Needed to stop composeviews from coming apart visually in Gmail.
     insertionTarget.classList.add('inboxsdk__drawers_in_use');
     // Needed to make DrawerView show over search bar in Inbox.
     insertionTarget.style.zIndex = String(zIndex);
+
     if (!composeOffsetParent.hasAttribute('data-drawer-old-zindex')) {
-      composeOffsetParent.setAttribute('data-drawer-old-zindex', composeOffsetParent.style.zIndex);
+      composeOffsetParent.setAttribute(
+        'data-drawer-old-zindex',
+        composeOffsetParent.style.zIndex
+      );
     }
     composeOffsetParent.style.zIndex = String(zIndex + 2); // 1 more than compose
 
-    this._closed.takeUntilBy(_kefir.default.fromEvents(insertionTarget, TAKE_OVER_EVENT)).onValue(() => {
-      insertionTarget.style.zIndex = '';
-    });
-    this._closed.merge(this._composeChanges).takeUntilBy(_kefir.default.fromEvents(composeOffsetParent, TAKE_OVER_EVENT)).onValue(() => {
-      composeOffsetParent.style.zIndex = composeOffsetParent.getAttribute('data-drawer-old-zindex') || '';
-      composeOffsetParent.removeAttribute('data-drawer-old-zindex');
-    });
-    return {
-      composeRect,
-      insertionTarget
-    };
+    this._closed
+      .takeUntilBy(Kefir.fromEvents(insertionTarget, TAKE_OVER_EVENT))
+      .onValue(() => {
+        insertionTarget.style.zIndex = '';
+      });
+    this._closed
+      .merge(this._composeChanges)
+      .takeUntilBy(Kefir.fromEvents(composeOffsetParent, TAKE_OVER_EVENT))
+      .onValue(() => {
+        composeOffsetParent.style.zIndex =
+          composeOffsetParent.getAttribute('data-drawer-old-zindex') || '';
+        composeOffsetParent.removeAttribute('data-drawer-old-zindex');
+      });
+
+    return { composeRect, insertionTarget };
   }
-  _setupElement(options, insertionTarget) {
-    const backdrop = this._backdrop = new _inboxBackdrop.default(zIndex, insertionTarget);
+
+  _setupElement(options: DrawerViewOptions, insertionTarget: HTMLElement) {
+    const backdrop = (this._backdrop = new InboxBackdrop(
+      zIndex,
+      insertionTarget
+    ));
     this._preAutoCloseStream.plug(backdrop.getPreAutoCloseStream());
-    backdrop.getStopper().takeUntilBy(this._closing).onValue(() => {
-      this.close();
-    });
+    backdrop
+      .getStopper()
+      .takeUntilBy(this._closing)
+      .onValue(() => {
+        this.close();
+      });
+
     this._containerEl = document.createElement('div');
     this._containerEl.className = 'inboxsdk__drawer_view_container';
     this._containerEl.style.zIndex = String(zIndex + 1);
+
     this._el = document.createElement('div');
     this._el.setAttribute('role', 'dialog');
     this._el.tabIndex = 0;
     this._el.className = 'inboxsdk__drawer_view';
+
     if (options.matchSidebarContentPanelWidth) {
       this._el.classList.add('inboxsdk__match_sidebar_content_panel_width');
     }
+
     this._containerEl.appendChild(this._el);
+
     if (this._chrome) {
       const titleBar = document.createElement('div');
       titleBar.className = 'inboxsdk__drawer_title_bar';
+
       const closeButton = document.createElement('button');
       closeButton.type = 'button';
       closeButton.title = 'Close';
       closeButton.className = 'inboxsdk__close_button';
-      closeButton.addEventListener('click', e => {
+      closeButton.addEventListener('click', (e: MouseEvent) => {
         this.close();
       });
       titleBar.appendChild(closeButton);
+
       const title = document.createElement('div');
       title.className = 'inboxsdk__drawer_title';
       title.setAttribute('role', 'heading');
       title.textContent = options.title || '';
       titleBar.appendChild(title);
+
       this._el.appendChild(titleBar);
     }
+
     this._el.appendChild(options.el);
+
     insertionTarget.appendChild(this._containerEl);
+
     this._closing.onValue(() => {
       if (this._backdrop) this._backdrop.destroy();
       this._el.classList.remove('inboxsdk__active');
-      _kefir.default.fromEvents(this._el, 'transitionend').merge(_kefir.default.later(200)) // transition might not finish if element is hidden
-      .take(1).onValue(() => {
-        this._closed.destroy();
-        this._containerEl.remove();
-      });
+      Kefir.fromEvents(this._el, 'transitionend')
+        .merge(Kefir.later(200)) // transition might not finish if element is hidden
+        .take(1)
+        .onValue(() => {
+          this._closed.destroy();
+          this._containerEl.remove();
+        });
     });
   }
-  _setupComposeAnimation(composeView, composeRect, forceLayout) {
+
+  _setupComposeAnimation(
+    composeView: ComposeView,
+    composeRect: ClientRect,
+    forceLayout: boolean
+  ): number {
     const composeEl = composeView.getElement();
-    const parentEl = composeEl.parentElement;
+    const parentEl: HTMLElement = (composeEl.parentElement: any);
     const drawerRect = this._el.getBoundingClientRect();
+
     const margin = 24;
     const preexistingLeftAdjustment = parseInt(parentEl.style.left) || 0;
-    const composeNeedToMoveLeft = composeRect.right - preexistingLeftAdjustment - (window.innerWidth - drawerRect.width - margin);
+    const composeNeedToMoveLeft =
+      composeRect.right -
+      preexistingLeftAdjustment -
+      (window.innerWidth - drawerRect.width - margin);
     if (composeNeedToMoveLeft > 0) {
       parentEl.style.position = 'relative';
       parentEl.style.transition = 'left 150ms cubic-bezier(.4,0,.2,1)';
       parentEl.style.left = '0';
+
       if (forceLayout) {
         parentEl.offsetHeight;
       }
@@ -212,58 +303,84 @@ class InboxDrawerView {
       // animation here. We let the caller do that after they've forced layout
       // of the DrawerView _el too if they want.
     }
-
     return composeNeedToMoveLeft;
   }
-  _positionCompose(composeView, composeNeedToMoveLeft) {
+
+  _positionCompose(composeView: ComposeView, composeNeedToMoveLeft: number) {
     if (composeNeedToMoveLeft > 0) {
       const composeEl = composeView.getElement();
-      const parentEl = composeEl.parentElement;
+      const parentEl: HTMLElement = (composeEl.parentElement: any);
       parentEl.style.left = `${-composeNeedToMoveLeft}px`;
 
       // When the drawer closes, animate the compose back to its original
       // location, and then unset our extra CSS.
       // If the drawer has a different compose associated with it, then just
       // immediately remove this compose view's extra CSS.
-      this._closing.takeUntilBy(this._composeChanges).takeUntilBy(_kefir.default.fromEvents(composeEl, TAKE_OVER_EVENT)).onValue(() => {
-        parentEl.style.left = '0';
-      }).flatMap(() => _kefir.default.fromEvents(parentEl, 'transitionend').merge(_kefir.default.later(200)) // transition might not finish if element is hidden
-      ).merge(this._composeChanges).take(1).takeUntilBy(_kefir.default.fromEvents(composeEl, TAKE_OVER_EVENT)).onValue(() => {
-        parentEl.style.position = '';
-        parentEl.style.left = '';
-        parentEl.style.transition = '';
-      });
+      this._closing
+        .takeUntilBy(this._composeChanges)
+        .takeUntilBy(Kefir.fromEvents(composeEl, TAKE_OVER_EVENT))
+        .onValue(() => {
+          parentEl.style.left = '0';
+        })
+        .flatMap(
+          () =>
+            Kefir.fromEvents(parentEl, 'transitionend').merge(Kefir.later(200)) // transition might not finish if element is hidden
+        )
+        .merge(this._composeChanges)
+        .take(1)
+        .takeUntilBy(Kefir.fromEvents(composeEl, TAKE_OVER_EVENT))
+        .onValue(() => {
+          parentEl.style.position = '';
+          parentEl.style.left = '';
+          parentEl.style.transition = '';
+        });
     }
   }
-  associateComposeView(composeView, closeWithCompose) {
+
+  associateComposeView(composeView: ComposeView, closeWithCompose: boolean) {
     this._composeChanges.emit(null);
-    const {
-      insertionTarget,
-      composeRect
-    } = this._setupComposeInsertionTarget(composeView, closeWithCompose);
-    if (this._backdrop) insertionTarget.appendChild(this._backdrop.getElement());
-    if (this._containerEl.parentElement !== insertionTarget) insertionTarget.appendChild(this._containerEl);
-    const composeNeedToMoveLeft = this._setupComposeAnimation(composeView, composeRect, false);
+
+    const { insertionTarget, composeRect } = this._setupComposeInsertionTarget(
+      composeView,
+      closeWithCompose
+    );
+
+    if (this._backdrop)
+      insertionTarget.appendChild(this._backdrop.getElement());
+    if (this._containerEl.parentElement !== insertionTarget)
+      insertionTarget.appendChild(this._containerEl);
+
+    const composeNeedToMoveLeft = this._setupComposeAnimation(
+      composeView,
+      composeRect,
+      false
+    );
     this._positionCompose(composeView, composeNeedToMoveLeft);
   }
+
   disassociateComposeView() {
     this._composeChanges.emit(null);
   }
+
   getSlideAnimationDone() {
     return this._slideAnimationDone;
   }
+
   getClosingStream() {
     return this._closing;
   }
+
   getClosedStream() {
     return this._closed;
   }
+
   getPreAutoCloseStream() {
     return this._preAutoCloseStream;
   }
+
   close() {
     this._closing.destroy();
   }
 }
-var _default = (0, _ud.defn)(module, InboxDrawerView);
-exports.default = _default;
+
+export default defn(module, InboxDrawerView);

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

@@ -1,25 +1,26 @@
-"use strict";
+/* @flow */
 
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-class InboxDropdownView {
-  constructor(className) {
+export default class InboxDropdownView {
+  _containerEl: HTMLElement;
+  _contentEl: HTMLElement;
+
+  constructor(className?: string) {
     this._containerEl = document.createElement('div');
     this._containerEl.className = 'inboxsdk__dropdown ' + (className || '');
     this._contentEl = document.createElement('div');
     this._contentEl.className = 'inboxsdk__dropdown_content';
     this._containerEl.appendChild(this._contentEl);
   }
-  getContentElement() {
+
+  getContentElement(): HTMLElement {
     return this._contentEl;
   }
-  getContainerElement() {
+
+  getContainerElement(): HTMLElement {
     return this._containerEl;
   }
+
   destroy() {
     this._containerEl.remove();
   }
 }
-exports.default = InboxDropdownView;

package/src/platform-implementation-js/dom-driver/inbox/views/inbox-dummy-route-view.js

@@ -1,64 +1,82 @@
-"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 _kefir = _interopRequireDefault(require("kefir"));
-var _kefirStopper = _interopRequireDefault(require("kefir-stopper"));
-var _kefirBus = _interopRequireDefault(require("kefir-bus"));
-class InboxDummyRouteView {
-  constructor(type) {
-    (0, _defineProperty2.default)(this, "_eventStream", (0, _kefirBus.default)());
-    (0, _defineProperty2.default)(this, "_stopper", (0, _kefirStopper.default)());
+/* @flow */
+
+import Kefir from 'kefir';
+import kefirStopper from 'kefir-stopper';
+import kefirBus from 'kefir-bus';
+
+import type { RouteViewDriver } from '../../../driver-interfaces/route-view-driver';
+
+export default class InboxDummyRouteView {
+  _type: string;
+  _eventStream = kefirBus();
+  _stopper = kefirStopper();
+
+  constructor(type: string) {
     // Check we implement interface
-    this;
+    (this: RouteViewDriver);
     this._type = type;
   }
+
   getStopper() {
     return this._stopper;
   }
+
   destroy() {
     this._eventStream.end();
     this._stopper.destroy();
   }
-  getElement() {
+
+  getElement(): HTMLElement {
     throw new Error('Should not happen');
   }
-  getType() {
+
+  getType(): string {
     return this._type;
   }
-  getRouteType() {
+
+  getRouteType(): string {
     return 'UNKNOWN';
   }
-  getRouteID() {
+
+  getRouteID(): string {
     return 'UNKNOWN';
   }
-  getParams() {
+
+  getParams(): Object {
     return {};
   }
-  getEventStream() {
+
+  getEventStream(): Kefir.Observable<Object> {
     return this._eventStream;
   }
-  getCustomViewElement() {
+
+  getCustomViewElement(): ?HTMLElement {
     return null;
   }
+
   refresh() {
     // stub
   }
-  getHash() {
+
+  getHash(): string {
     throw new Error('should not happen');
   }
-  addCollapsibleSection(sectionDescriptorProperty, groupOrderHint) {
+
+  addCollapsibleSection(
+    sectionDescriptorProperty: Kefir.Observable<?Object>,
+    groupOrderHint: any
+  ) {
     throw new Error('should not happen');
   }
-  addSection(sectionDescriptorProperty, groupOrderHint) {
+
+  addSection(
+    sectionDescriptorProperty: Kefir.Observable<?Object>,
+    groupOrderHint: any
+  ) {
     throw new Error('should not happen');
   }
-  setFullWidth(fullWidth) {
+
+  setFullWidth(fullWidth: boolean) {
     throw new Error('should not happen');
   }
 }
-exports.default = InboxDummyRouteView;