@inboxsdk/core 0.2.28-alpha.6 → 0.2.28

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

@@ -1,100 +1,104 @@
-"use strict";
+/* @flow */
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-var _lodash = _interopRequireDefault(require("lodash"));
-var _kefir = _interopRequireDefault(require("kefir"));
-var _kefirBus = _interopRequireDefault(require("kefir-bus"));
-var _kefirStopper = _interopRequireDefault(require("kefir-stopper"));
-var _pdelay = _interopRequireDefault(require("pdelay"));
-var _idMap = _interopRequireDefault(require("../../../lib/idMap"));
-var _inboxThreadView = _interopRequireDefault(require("./inbox-thread-view"));
-var _ContentPanelViewDriver = _interopRequireDefault(require("../../../driver-common/sidebar/ContentPanelViewDriver"));
-function makeDriver() {
-  const _openOrOpeningStreamBus = (0, _kefirBus.default)();
+import _ from 'lodash';
+import Kefir from 'kefir';
+import kefirBus from 'kefir-bus';
+import kefirStopper from 'kefir-stopper';
+import delay from 'pdelay';
+import idMap from '../../../lib/idMap';
+import InboxThreadView from './inbox-thread-view';
+import ContentPanelViewDriver from '../../../driver-common/sidebar/ContentPanelViewDriver';
+
+function makeDriver(): Object {
+  const _openOrOpeningStreamBus = kefirBus();
   const _addedPanels = [];
-  const driver = {
+  const driver: Object = {
     getAppId: () => 'foo',
-    getOpts: _lodash.default.constant({
+    getOpts: _.constant({
       appName: 'driver appName',
-      appIconUrl: 'http://localhost/driver/appIconUrl.png'
+      appIconUrl: 'http://localhost/driver/appIconUrl.png',
     }),
-    getThreadViewElementsMap: _lodash.default.constant(new Map()),
-    getAppSidebarView: _lodash.default.constant({
+    getThreadViewElementsMap: _.constant(new Map()),
+    getAppSidebarView: _.constant({
       _openOrOpeningStreamBus,
       _addedPanels,
       addSidebarContentPanel(descriptor) {
-        if (!document.querySelector('.' + (0, _idMap.default)('app_sidebar_waiting_platform'))) {
+        if (
+          !document.querySelector('.' + idMap('app_sidebar_waiting_platform'))
+        ) {
           const waitingPlatform = document.createElement('div');
-          waitingPlatform.className = (0, _idMap.default)('app_sidebar_waiting_platform');
-          document.body.appendChild(waitingPlatform);
+          waitingPlatform.className = idMap('app_sidebar_waiting_platform');
+          ((document.body: any): HTMLElement).appendChild(waitingPlatform);
         }
-        const panel = new _ContentPanelViewDriver.default(driver, descriptor, 'foobar');
+        const panel = new ContentPanelViewDriver(driver, descriptor, 'foobar');
         _addedPanels.push(panel);
         return panel;
       },
-      getOpenOrOpeningStream: _lodash.default.constant(_openOrOpeningStreamBus.toProperty(() => false).onValue(() => {})),
-      open: jest.fn()
-    })
+      getOpenOrOpeningStream: _.constant(
+        _openOrOpeningStreamBus.toProperty(() => false).onValue(() => {})
+      ),
+      open: jest.fn(),
+    }),
   };
   return driver;
 }
-function makeElement() {
+
+function makeElement(): { el: HTMLElement, parsed: Object } {
   const el = document.createElement('div');
-  const parsed = {
+  const parsed: Object = {
     elements: {
-      stickyHeading: document.createElement('div')
-    }
-  };
-  return {
-    el,
-    parsed
+      stickyHeading: document.createElement('div'),
+    },
   };
+  return { el, parsed };
 }
+
 test('construction works', () => {
-  const {
-    el,
-    parsed
-  } = makeElement();
-  const threadView = new _inboxThreadView.default(el, makeDriver(), parsed);
+  const { el, parsed } = makeElement();
+  const threadView = new InboxThreadView(el, makeDriver(), parsed);
 });
+
 describe('addSidebarContentPanel', () => {
   test('button is added to thread', () => {
     const driver = makeDriver();
-    const {
-      el,
-      parsed
-    } = makeElement();
-    const threadView = new _inboxThreadView.default(el, driver, parsed);
-    threadView.addSidebarContentPanel(_kefir.default.constant({
-      title: 'foo',
-      iconUrl: 'http://localhost/driver/bar.png',
-      el: document.createElement('div')
-    }));
-    const {
-      stickyHeading
-    } = parsed.elements;
+    const { el, parsed } = makeElement();
+    const threadView = new InboxThreadView(el, driver, parsed);
+    threadView.addSidebarContentPanel(
+      Kefir.constant({
+        title: 'foo',
+        iconUrl: 'http://localhost/driver/bar.png',
+        el: document.createElement('div'),
+      })
+    );
+    const { stickyHeading } = parsed.elements;
     expect(stickyHeading.querySelectorAll('button').length).toBe(1);
     expect(stickyHeading.querySelector('button').title).toBe('driver appName');
-    expect(stickyHeading.querySelector('button img').src).toBe('http://localhost/driver/appIconUrl.png');
-    expect(stickyHeading.querySelector('button').parentElement.getAttribute('data-count')).toBe(null);
+    expect(stickyHeading.querySelector('button img').src).toBe(
+      'http://localhost/driver/appIconUrl.png'
+    );
+    expect(
+      stickyHeading
+        .querySelector('button')
+        .parentElement.getAttribute('data-count')
+    ).toBe(null);
     const appSidebarView = driver.getAppSidebarView();
     expect(appSidebarView._addedPanels.length).toBe(1);
     const panel = appSidebarView._addedPanels[0];
     panel.remove();
     expect(stickyHeading.querySelectorAll('button').length).toBe(0);
   });
+
   test('exiting thread removes panel', () => {
     const driver = makeDriver();
-    const {
-      el,
-      parsed
-    } = makeElement();
-    const threadView = new _inboxThreadView.default(el, driver, parsed);
-    threadView.addSidebarContentPanel(_kefir.default.constant({
-      title: 'foo',
-      iconUrl: 'http://localhost/driver/bar.png',
-      el: document.createElement('div')
-    }));
+    const { el, parsed } = makeElement();
+    const threadView = new InboxThreadView(el, driver, parsed);
+    threadView.addSidebarContentPanel(
+      Kefir.constant({
+        title: 'foo',
+        iconUrl: 'http://localhost/driver/bar.png',
+        el: document.createElement('div'),
+      })
+    );
     const appSidebarView = driver.getAppSidebarView();
     expect(appSidebarView._addedPanels.length).toBe(1);
     const panel = appSidebarView._addedPanels[0];
@@ -104,68 +108,86 @@ describe('addSidebarContentPanel', () => {
     threadView.destroy();
     expect(onPanelRemove).toHaveBeenCalledTimes(1);
   });
+
   test('multiple app sidebars can be added and removed in reverse order', () => {
     const driver = makeDriver();
-    const {
-      el,
-      parsed
-    } = makeElement();
-    const threadView = new _inboxThreadView.default(el, driver, parsed);
-    threadView.addSidebarContentPanel(_kefir.default.constant({
-      title: 'foo',
-      iconUrl: 'http://localhost/driver/bar.png',
-      el: document.createElement('div')
-    }));
-    threadView.addSidebarContentPanel(_kefir.default.constant({
-      title: 'foo2',
-      iconUrl: '/bar2.png',
-      el: document.createElement('div')
-    }));
-    const {
-      stickyHeading
-    } = parsed.elements;
+    const { el, parsed } = makeElement();
+    const threadView = new InboxThreadView(el, driver, parsed);
+    threadView.addSidebarContentPanel(
+      Kefir.constant({
+        title: 'foo',
+        iconUrl: 'http://localhost/driver/bar.png',
+        el: document.createElement('div'),
+      })
+    );
+    threadView.addSidebarContentPanel(
+      Kefir.constant({
+        title: 'foo2',
+        iconUrl: '/bar2.png',
+        el: document.createElement('div'),
+      })
+    );
+    const { stickyHeading } = parsed.elements;
     expect(stickyHeading.querySelectorAll('button').length).toBe(1);
     expect(stickyHeading.querySelector('button').title).toBe('driver appName');
-    expect(stickyHeading.querySelector('button img').src).toBe('http://localhost/driver/appIconUrl.png');
-    expect(stickyHeading.querySelector('button').parentElement.getAttribute('data-count')).toBe('2');
+    expect(stickyHeading.querySelector('button img').src).toBe(
+      'http://localhost/driver/appIconUrl.png'
+    );
+    expect(
+      stickyHeading
+        .querySelector('button')
+        .parentElement.getAttribute('data-count')
+    ).toBe('2');
     const appSidebarView = driver.getAppSidebarView();
     expect(appSidebarView._addedPanels.length).toBe(2);
     const [panel1, panel2] = appSidebarView._addedPanels;
     panel2.remove();
     expect(stickyHeading.querySelectorAll('button').length).toBe(1);
-    expect(stickyHeading.querySelector('button').parentElement.getAttribute('data-count')).toBe(null);
+    expect(
+      stickyHeading
+        .querySelector('button')
+        .parentElement.getAttribute('data-count')
+    ).toBe(null);
     panel1.remove();
     expect(stickyHeading.querySelectorAll('button').length).toBe(0);
   });
+
   test('multiple app sidebars can be removed in order', () => {
     const driver = makeDriver();
-    const {
-      el,
-      parsed
-    } = makeElement();
-    const threadView = new _inboxThreadView.default(el, driver, parsed);
-    threadView.addSidebarContentPanel(_kefir.default.constant({
-      title: 'foo',
-      iconUrl: 'http://localhost/driver/bar.png',
-      el: document.createElement('div')
-    }));
-    threadView.addSidebarContentPanel(_kefir.default.constant({
-      title: 'foo2',
-      iconUrl: '/bar2.png',
-      el: document.createElement('div')
-    }));
-    const {
-      stickyHeading
-    } = parsed.elements;
+    const { el, parsed } = makeElement();
+    const threadView = new InboxThreadView(el, driver, parsed);
+    threadView.addSidebarContentPanel(
+      Kefir.constant({
+        title: 'foo',
+        iconUrl: 'http://localhost/driver/bar.png',
+        el: document.createElement('div'),
+      })
+    );
+    threadView.addSidebarContentPanel(
+      Kefir.constant({
+        title: 'foo2',
+        iconUrl: '/bar2.png',
+        el: document.createElement('div'),
+      })
+    );
+    const { stickyHeading } = parsed.elements;
     expect(stickyHeading.querySelectorAll('button').length).toBe(1);
-    expect(stickyHeading.querySelector('button').parentElement.getAttribute('data-count')).toBe('2');
+    expect(
+      stickyHeading
+        .querySelector('button')
+        .parentElement.getAttribute('data-count')
+    ).toBe('2');
     const appSidebarView = driver.getAppSidebarView();
     expect(appSidebarView._addedPanels.length).toBe(2);
     const [panel1, panel2] = appSidebarView._addedPanels;
     panel1.remove();
     expect(stickyHeading.querySelectorAll('button').length).toBe(1);
-    expect(stickyHeading.querySelector('button').parentElement.getAttribute('data-count')).toBe(null);
+    expect(
+      stickyHeading
+        .querySelector('button')
+        .parentElement.getAttribute('data-count')
+    ).toBe(null);
     panel2.remove();
     expect(stickyHeading.querySelectorAll('button').length).toBe(0);
   });
-});
+});

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

@@ -1,18 +1,19 @@
-"use strict";
+/* @flow */
+
+import { defn } from 'ud';
+import Kefir from 'kefir';
+import kefirStopper from 'kefir-stopper';
+import type { TooltipDescriptor } from '../../../views/compose-button-view';
+import containByScreen from 'contain-by-screen';
 
-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 _containByScreen = _interopRequireDefault(require("contain-by-screen"));
 class InboxTooltipView {
-  constructor(target, options) {
-    (0, _defineProperty2.default)(this, "_stopper", (0, _kefirStopper.default)());
+  _target: HTMLElement;
+  _el: HTMLElement;
+  _contentEl: HTMLElement;
+  _arrowEl: HTMLElement;
+  _stopper = kefirStopper();
+
+  constructor(target: HTMLElement, options: TooltipDescriptor) {
     this._target = target;
     this._arrowEl = document.createElement('div');
     this._arrowEl.className = 'inboxsdk__tooltip_arrow';
@@ -31,7 +32,7 @@ class InboxTooltipView {
         closeButton.type = 'button';
         closeButton.title = 'Close';
         closeButton.className = 'inboxsdk__close_button';
-        closeButton.addEventListener('click', e => {
+        closeButton.addEventListener('click', (e: MouseEvent) => {
           this.destroy();
         });
         this._el.appendChild(closeButton);
@@ -61,7 +62,7 @@ class InboxTooltipView {
         const buttonEl = document.createElement('input');
         buttonEl.type = 'button';
         buttonEl.value = button.title;
-        buttonEl.addEventListener('click', event => {
+        buttonEl.addEventListener('click', (event: MouseEvent) => {
           event.preventDefault();
           event.stopPropagation();
           if (button.onClick) button.onClick.call(null);
@@ -69,49 +70,64 @@ class InboxTooltipView {
         this._contentEl.appendChild(buttonEl);
       }
     }
-    document.body.appendChild(this._el);
-    document.body.appendChild(this._arrowEl);
+
+    ((document.body: any): HTMLElement).appendChild(this._el);
+    ((document.body: any): HTMLElement).appendChild(this._arrowEl);
     this._updatePosition(true);
-    this._el.addEventListener('load', event => {
-      this._updatePosition(true);
-    }, true);
-    _kefir.default.interval(200).takeUntilBy(this._stopper).map(() => target.getBoundingClientRect()).skipDuplicates((a, b) => a.top === b.top && a.left === b.left && a.right === b.right && a.bottom === b.bottom).onValue(() => {
-      this._updatePosition();
-    });
+    this._el.addEventListener(
+      'load',
+      (event: any) => {
+        this._updatePosition(true);
+      },
+      true
+    );
+
+    Kefir.interval(200)
+      .takeUntilBy(this._stopper)
+      .map(() => target.getBoundingClientRect())
+      .skipDuplicates(
+        (a: ClientRect, b: ClientRect) =>
+          a.top === b.top &&
+          a.left === b.left &&
+          a.right === b.right &&
+          a.bottom === b.bottom
+      )
+      .onValue(() => {
+        this._updatePosition();
+      });
   }
+
   destroy() {
     this._el.remove();
     this._arrowEl.remove();
     this._stopper.destroy();
   }
-  getStopper() {
+
+  getStopper(): Kefir.Observable<null> {
     return this._stopper;
   }
-  _updatePosition() {
-    let noTransition = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
+
+  _updatePosition(noTransition: boolean = false) {
     if (noTransition) {
       this._el.classList.add('inboxsdk__notransition');
       this._arrowEl.classList.add('inboxsdk__notransition');
     }
-    const {
-      position
-    } = (0, _containByScreen.default)(this._el, this._target, {
+    const { position } = containByScreen(this._el, this._target, {
       position: 'top',
       hAlign: 'center',
       vAlign: 'center',
-      buffer: 10
+      buffer: 10,
     });
-    (0, _containByScreen.default)(this._arrowEl, this._target, {
+    containByScreen(this._arrowEl, this._target, {
       position: position,
       forcePosition: true,
       hAlign: 'center',
       forceHAlign: true,
       vAlign: 'center',
       forceVAlign: true,
-      buffer: 11 // needs to overlap 1px of border
+      buffer: 11, // needs to overlap 1px of border
     });
-
-    ['top', 'bottom', 'left', 'right'].forEach(x => {
+    ['top', 'bottom', 'left', 'right'].forEach((x) => {
       this._arrowEl.classList.remove('inboxsdk__' + x);
     });
     this._arrowEl.classList.add('inboxsdk__' + position);
@@ -124,5 +140,4 @@ class InboxTooltipView {
     }
   }
 }
-var _default = (0, _ud.defn)(module, InboxTooltipView);
-exports.default = _default;
+export default defn(module, InboxTooltipView);