@inboxsdk/core 0.2.28-alpha.4 → 0.2.28-alpha.5

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

@@ -1,104 +1,100 @@
-/* @flow */
+"use strict";
 
-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();
+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)();
   const _addedPanels = [];
-  const driver: Object = {
+  const driver = {
     getAppId: () => 'foo',
-    getOpts: _.constant({
+    getOpts: _lodash.default.constant({
       appName: 'driver appName',
-      appIconUrl: 'http://localhost/driver/appIconUrl.png',
+      appIconUrl: 'http://localhost/driver/appIconUrl.png'
     }),
-    getThreadViewElementsMap: _.constant(new Map()),
-    getAppSidebarView: _.constant({
+    getThreadViewElementsMap: _lodash.default.constant(new Map()),
+    getAppSidebarView: _lodash.default.constant({
       _openOrOpeningStreamBus,
       _addedPanels,
       addSidebarContentPanel(descriptor) {
-        if (
-          !document.querySelector('.' + idMap('app_sidebar_waiting_platform'))
-        ) {
+        if (!document.querySelector('.' + (0, _idMap.default)('app_sidebar_waiting_platform'))) {
           const waitingPlatform = document.createElement('div');
-          waitingPlatform.className = idMap('app_sidebar_waiting_platform');
-          ((document.body: any): HTMLElement).appendChild(waitingPlatform);
+          waitingPlatform.className = (0, _idMap.default)('app_sidebar_waiting_platform');
+          document.body.appendChild(waitingPlatform);
         }
-        const panel = new ContentPanelViewDriver(driver, descriptor, 'foobar');
+        const panel = new _ContentPanelViewDriver.default(driver, descriptor, 'foobar');
         _addedPanels.push(panel);
         return panel;
       },
-      getOpenOrOpeningStream: _.constant(
-        _openOrOpeningStreamBus.toProperty(() => false).onValue(() => {})
-      ),
-      open: jest.fn(),
-    }),
+      getOpenOrOpeningStream: _lodash.default.constant(_openOrOpeningStreamBus.toProperty(() => false).onValue(() => {})),
+      open: jest.fn()
+    })
   };
   return driver;
 }
-
-function makeElement(): { el: HTMLElement, parsed: Object } {
+function makeElement() {
   const el = document.createElement('div');
-  const parsed: Object = {
+  const parsed = {
     elements: {
-      stickyHeading: document.createElement('div'),
-    },
+      stickyHeading: document.createElement('div')
+    }
+  };
+  return {
+    el,
+    parsed
   };
-  return { el, parsed };
 }
-
 test('construction works', () => {
-  const { el, parsed } = makeElement();
-  const threadView = new InboxThreadView(el, makeDriver(), parsed);
+  const {
+    el,
+    parsed
+  } = makeElement();
+  const threadView = new _inboxThreadView.default(el, makeDriver(), parsed);
 });
-
 describe('addSidebarContentPanel', () => {
   test('button is added to thread', () => {
     const driver = makeDriver();
-    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;
+    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;
     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(el, driver, parsed);
-    threadView.addSidebarContentPanel(
-      Kefir.constant({
-        title: 'foo',
-        iconUrl: 'http://localhost/driver/bar.png',
-        el: document.createElement('div'),
-      })
-    );
+    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 appSidebarView = driver.getAppSidebarView();
     expect(appSidebarView._addedPanels.length).toBe(1);
     const panel = appSidebarView._addedPanels[0];
@@ -108,86 +104,68 @@ 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(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;
+    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;
     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(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(
+    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
-        .querySelector('button')
-        .parentElement.getAttribute('data-count')
-    ).toBe('2');
+    } = parsed.elements;
+    expect(stickyHeading.querySelectorAll('button').length).toBe(1);
+    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,19 +1,18 @@
-/* @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';
+"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 _containByScreen = _interopRequireDefault(require("contain-by-screen"));
 class InboxTooltipView {
-  _target: HTMLElement;
-  _el: HTMLElement;
-  _contentEl: HTMLElement;
-  _arrowEl: HTMLElement;
-  _stopper = kefirStopper();
-
-  constructor(target: HTMLElement, options: TooltipDescriptor) {
+  constructor(target, options) {
+    (0, _defineProperty2.default)(this, "_stopper", (0, _kefirStopper.default)());
     this._target = target;
     this._arrowEl = document.createElement('div');
     this._arrowEl.className = 'inboxsdk__tooltip_arrow';
@@ -32,7 +31,7 @@ class InboxTooltipView {
         closeButton.type = 'button';
         closeButton.title = 'Close';
         closeButton.className = 'inboxsdk__close_button';
-        closeButton.addEventListener('click', (e: MouseEvent) => {
+        closeButton.addEventListener('click', e => {
           this.destroy();
         });
         this._el.appendChild(closeButton);
@@ -62,7 +61,7 @@ class InboxTooltipView {
         const buttonEl = document.createElement('input');
         buttonEl.type = 'button';
         buttonEl.value = button.title;
-        buttonEl.addEventListener('click', (event: MouseEvent) => {
+        buttonEl.addEventListener('click', event => {
           event.preventDefault();
           event.stopPropagation();
           if (button.onClick) button.onClick.call(null);
@@ -70,64 +69,49 @@ class InboxTooltipView {
         this._contentEl.appendChild(buttonEl);
       }
     }
-
-    ((document.body: any): HTMLElement).appendChild(this._el);
-    ((document.body: any): HTMLElement).appendChild(this._arrowEl);
+    document.body.appendChild(this._el);
+    document.body.appendChild(this._arrowEl);
     this._updatePosition(true);
-    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();
-      });
+    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();
+    });
   }
-
   destroy() {
     this._el.remove();
     this._arrowEl.remove();
     this._stopper.destroy();
   }
-
-  getStopper(): Kefir.Observable<null> {
+  getStopper() {
     return this._stopper;
   }
-
-  _updatePosition(noTransition: boolean = false) {
+  _updatePosition() {
+    let noTransition = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
     if (noTransition) {
       this._el.classList.add('inboxsdk__notransition');
       this._arrowEl.classList.add('inboxsdk__notransition');
     }
-    const { position } = containByScreen(this._el, this._target, {
+    const {
+      position
+    } = (0, _containByScreen.default)(this._el, this._target, {
       position: 'top',
       hAlign: 'center',
       vAlign: 'center',
-      buffer: 10,
+      buffer: 10
     });
-    containByScreen(this._arrowEl, this._target, {
+    (0, _containByScreen.default)(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);
@@ -140,4 +124,5 @@ class InboxTooltipView {
     }
   }
 }
-export default defn(module, InboxTooltipView);
+var _default = (0, _ud.defn)(module, InboxTooltipView);
+exports.default = _default;