@inboxsdk/core 0.2.28 → 0.2.29-alpha.0

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

@@ -1,66 +1,50 @@
-/* @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';
-
+"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"));
 const TAKE_OVER_EVENT = 'inboxSDKdrawerViewTakingOver';
 const zIndex = 500;
-
 class InboxDrawerView {
-  _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) {
+  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)());
     this._chrome = typeof options.chrome === 'boolean' ? options.chrome : true;
-
-    let insertionTarget = ((document.body: any): HTMLElement);
+    let insertionTarget = document.body;
     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.fromEvents(this._el, 'transitionend')
-      .take(1)
-      .takeUntilBy(this._closing)
-      .map(() => null);
-
+    this._slideAnimationDone = _kefir.default.fromEvents(this._el, 'transitionend').take(1).takeUntilBy(this._closing).map(() => null);
     if (composeView) {
       this._positionCompose(composeView, composeNeedToMoveLeft);
     }
@@ -68,41 +52,29 @@ 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.
-    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();
-      });
+    (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();
+    });
   }
-
-  _setupComposeInsertionTarget(
-    composeView: ComposeView,
-    closeWithCompose: ?boolean
-  ): { composeRect: ClientRect, insertionTarget: HTMLElement } {
+  _setupComposeInsertionTarget(composeView, closeWithCompose) {
     if (composeView.isMinimized()) {
       throw new Error("Can't attach DrawerView to minimized ComposeView");
     }
@@ -112,22 +84,11 @@ class InboxDrawerView {
     if (composeView.isFullscreen()) {
       composeView.setFullscreen(false);
     }
-    const closeEvents = [
-      Kefir.fromEvents(composeView, 'restored'),
-      Kefir.later(10).flatMap(() =>
-        Kefir.fromEvents(composeView, 'fullscreenChanged')
-      ),
-    ];
+    const closeEvents = [_kefir.default.fromEvents(composeView, 'restored'), _kefir.default.later(10).flatMap(() => _kefir.default.fromEvents(composeView, 'fullscreenChanged'))];
     if (closeWithCompose) {
-      closeEvents.push(
-        Kefir.fromEvents(composeView, 'destroy'),
-        Kefir.fromEvents(composeView, 'minimized')
-      );
+      closeEvents.push(_kefir.default.fromEvents(composeView, 'destroy'), _kefir.default.fromEvents(composeView, 'minimized'));
     }
-    Kefir.merge(closeEvents)
-      .takeUntilBy(this._closing.merge(this._composeChanges))
-      .onValue(() => this.close());
-
+    _kefir.default.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.
@@ -147,155 +108,103 @@ 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 =
-      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,
-      })
-    );
+    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
+    }));
 
     // 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.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: DrawerViewOptions, insertionTarget: HTMLElement) {
-    const backdrop = (this._backdrop = new InboxBackdrop(
-      zIndex,
+    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
-    ));
+    };
+  }
+  _setupElement(options, insertionTarget) {
+    const backdrop = this._backdrop = new _inboxBackdrop.default(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: MouseEvent) => {
+      closeButton.addEventListener('click', e => {
         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.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();
-        });
+      _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();
+      });
     });
   }
-
-  _setupComposeAnimation(
-    composeView: ComposeView,
-    composeRect: ClientRect,
-    forceLayout: boolean
-  ): number {
+  _setupComposeAnimation(composeView, composeRect, forceLayout) {
     const composeEl = composeView.getElement();
-    const parentEl: HTMLElement = (composeEl.parentElement: any);
+    const parentEl = composeEl.parentElement;
     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;
       }
@@ -303,84 +212,58 @@ 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: ComposeView, composeNeedToMoveLeft: number) {
+  _positionCompose(composeView, composeNeedToMoveLeft) {
     if (composeNeedToMoveLeft > 0) {
       const composeEl = composeView.getElement();
-      const parentEl: HTMLElement = (composeEl.parentElement: any);
+      const parentEl = composeEl.parentElement;
       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.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 = '';
-        });
+      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 = '';
+      });
     }
   }
-
-  associateComposeView(composeView: ComposeView, closeWithCompose: boolean) {
+  associateComposeView(composeView, closeWithCompose) {
     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();
   }
 }
-
-export default defn(module, InboxDrawerView);
+var _default = (0, _ud.defn)(module, InboxDrawerView);
+exports.default = _default;

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

@@ -1,26 +1,25 @@
-/* @flow */
+"use strict";
 
-export default class InboxDropdownView {
-  _containerEl: HTMLElement;
-  _contentEl: HTMLElement;
-
-  constructor(className?: string) {
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+class InboxDropdownView {
+  constructor(className) {
     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(): HTMLElement {
+  getContentElement() {
     return this._contentEl;
   }
-
-  getContainerElement(): HTMLElement {
+  getContainerElement() {
     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,82 +1,64 @@
-/* @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) {
+"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)());
     // Check we implement interface
-    (this: RouteViewDriver);
+    this;
     this._type = type;
   }
-
   getStopper() {
     return this._stopper;
   }
-
   destroy() {
     this._eventStream.end();
     this._stopper.destroy();
   }
-
-  getElement(): HTMLElement {
+  getElement() {
     throw new Error('Should not happen');
   }
-
-  getType(): string {
+  getType() {
     return this._type;
   }
-
-  getRouteType(): string {
+  getRouteType() {
     return 'UNKNOWN';
   }
-
-  getRouteID(): string {
+  getRouteID() {
     return 'UNKNOWN';
   }
-
-  getParams(): Object {
+  getParams() {
     return {};
   }
-
-  getEventStream(): Kefir.Observable<Object> {
+  getEventStream() {
     return this._eventStream;
   }
-
-  getCustomViewElement(): ?HTMLElement {
+  getCustomViewElement() {
     return null;
   }
-
   refresh() {
     // stub
   }
-
-  getHash(): string {
+  getHash() {
     throw new Error('should not happen');
   }
-
-  addCollapsibleSection(
-    sectionDescriptorProperty: Kefir.Observable<?Object>,
-    groupOrderHint: any
-  ) {
+  addCollapsibleSection(sectionDescriptorProperty, groupOrderHint) {
     throw new Error('should not happen');
   }
-
-  addSection(
-    sectionDescriptorProperty: Kefir.Observable<?Object>,
-    groupOrderHint: any
-  ) {
+  addSection(sectionDescriptorProperty, groupOrderHint) {
     throw new Error('should not happen');
   }
-
-  setFullWidth(fullWidth: boolean) {
+  setFullWidth(fullWidth) {
     throw new Error('should not happen');
   }
 }
+exports.default = InboxDummyRouteView;