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

package/src/platform-implementation-js/dom-driver/inbox/views/inbox-app-toolbar-button-view.js

@@ -1,147 +1,93 @@
-/* @flow */
-
-import find from 'lodash/find';
-import includes from 'lodash/includes';
-import { defn } from 'ud';
-import Kefir from 'kefir';
-import kefirStopper from 'kefir-stopper';
-import type LiveSet from 'live-set';
-import type { TagTreeNode } from 'tag-tree';
-import DropdownView from '../../../widgets/buttons/dropdown-view';
-import InboxAppToolbarTooltipView from './inbox-app-toolbar-tooltip-view';
-import type { ElementWithLifetime } from '../../../lib/dom/make-element-child-stream';
-import toItemWithLifetimeStream from '../../../lib/toItemWithLifetimeStream';
-import setCss from '../../../lib/dom/set-css';
-
+"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 _find = _interopRequireDefault(require("lodash/find"));
+var _includes = _interopRequireDefault(require("lodash/includes"));
+var _ud = require("ud");
+var _kefir = _interopRequireDefault(require("kefir"));
+var _kefirStopper = _interopRequireDefault(require("kefir-stopper"));
+var _dropdownView = _interopRequireDefault(require("../../../widgets/buttons/dropdown-view"));
+var _inboxAppToolbarTooltipView = _interopRequireDefault(require("./inbox-app-toolbar-tooltip-view"));
+var _toItemWithLifetimeStream = _interopRequireDefault(require("../../../lib/toItemWithLifetimeStream"));
+var _setCss = _interopRequireDefault(require("../../../lib/dom/set-css"));
 class InboxAppToolbarButtonView {
-  _buttonDescriptor: ?Object = null;
-  _buttonDescriptorStream: Kefir.Observable<Object>;
-  _buttonEl: ?HTMLElement = null;
-  _activeDropdown: ?DropdownView = null;
-  _stopper: Kefir.Observable<null> & { destroy(): void } = kefirStopper();
-  _ready: Kefir.Observable<null> & { destroy(): void } = kefirStopper();
-
-  constructor(
-    buttonDescriptor: Kefir.Observable<Object>,
-    appToolbarLocationLiveSet: LiveSet<TagTreeNode<HTMLElement>>,
-    searchBarLiveSet: LiveSet<TagTreeNode<HTMLElement>>
-  ) {
-    this._buttonDescriptorStream = buttonDescriptor
-      .toProperty()
-      .takeUntilBy(this._stopper);
-
-    Kefir.combine(
-      [
-        toItemWithLifetimeStream(searchBarLiveSet).take(1),
-        toItemWithLifetimeStream(appToolbarLocationLiveSet).take(1),
-      ],
-      [],
-      (searchBar) => searchBar
-    )
-      .map(({ el: node }) => node.getValue())
-      .takeUntilBy(this._stopper)
-      .onValue((el) => this._adjustSearchBarMargin(el));
-
-    toItemWithLifetimeStream(appToolbarLocationLiveSet)
-      .take(1)
-      .map(({ el: node }) => node.getValue())
-      .takeUntilBy(this._stopper)
-      .onValue((el) => this._setupButton(el));
+  constructor(buttonDescriptor, appToolbarLocationLiveSet, searchBarLiveSet) {
+    (0, _defineProperty2.default)(this, "_buttonDescriptor", null);
+    (0, _defineProperty2.default)(this, "_buttonEl", null);
+    (0, _defineProperty2.default)(this, "_activeDropdown", null);
+    (0, _defineProperty2.default)(this, "_stopper", (0, _kefirStopper.default)());
+    (0, _defineProperty2.default)(this, "_ready", (0, _kefirStopper.default)());
+    this._buttonDescriptorStream = buttonDescriptor.toProperty().takeUntilBy(this._stopper);
+    _kefir.default.combine([(0, _toItemWithLifetimeStream.default)(searchBarLiveSet).take(1), (0, _toItemWithLifetimeStream.default)(appToolbarLocationLiveSet).take(1)], [], searchBar => searchBar).map(_ref => {
+      let {
+        el: node
+      } = _ref;
+      return node.getValue();
+    }).takeUntilBy(this._stopper).onValue(el => this._adjustSearchBarMargin(el));
+    (0, _toItemWithLifetimeStream.default)(appToolbarLocationLiveSet).take(1).map(_ref2 => {
+      let {
+        el: node
+      } = _ref2;
+      return node.getValue();
+    }).takeUntilBy(this._stopper).onValue(el => this._setupButton(el));
   }
-
-  _setupButton(appToolbarLocation: HTMLElement) {
-    let appToolbarButtonContainer = find(appToolbarLocation.children, (el) =>
-      el.classList.contains('inboxsdk__appButton_container')
-    );
+  _setupButton(appToolbarLocation) {
+    let appToolbarButtonContainer = (0, _find.default)(appToolbarLocation.children, el => el.classList.contains('inboxsdk__appButton_container'));
     if (!appToolbarButtonContainer) {
       appToolbarButtonContainer = document.createElement('div');
       appToolbarButtonContainer.className = 'inboxsdk__appButton_container';
-      appToolbarLocation.insertBefore(
-        appToolbarButtonContainer,
-        appToolbarLocation.firstChild
-      );
+      appToolbarLocation.insertBefore(appToolbarButtonContainer, appToolbarLocation.firstChild);
     }
-
     const button = document.createElement('div');
     button.tabIndex = 0;
     button.setAttribute('role', 'button');
     button.className = 'inboxsdk__appButton inboxsdk__button_icon';
-
     const buttonImg = document.createElement('img');
     buttonImg.className = 'inboxsdk__button_iconImg';
     button.appendChild(buttonImg);
-
-    this._buttonDescriptorStream.onValue((buttonDescriptor) => {
+    this._buttonDescriptorStream.onValue(buttonDescriptor => {
       button.title = buttonDescriptor.title;
       buttonImg.src = buttonDescriptor.iconUrl;
-      buttonImg.className = `inboxsdk__button_iconImg ${
-        buttonDescriptor.iconClass || ''
-      }`;
+      buttonImg.className = `inboxsdk__button_iconImg ${buttonDescriptor.iconClass || ''}`;
       this._buttonDescriptor = buttonDescriptor;
     });
-
-    Kefir.merge([
-      Kefir.fromEvents(button, 'click'),
-      Kefir.fromEvents(button, 'keypress').filter((e) =>
-        includes([32 /*space*/, 13 /*enter*/], e.which)
-      ),
-    ])
-      .takeUntilBy(this._stopper)
-      .onValue((event) => {
-        event.preventDefault();
-        event.stopPropagation();
-        if (this._activeDropdown) {
-          this.close();
+    _kefir.default.merge([_kefir.default.fromEvents(button, 'click'), _kefir.default.fromEvents(button, 'keypress').filter(e => (0, _includes.default)([32 /*space*/, 13 /*enter*/], e.which))]).takeUntilBy(this._stopper).onValue(event => {
+      event.preventDefault();
+      event.stopPropagation();
+      if (this._activeDropdown) {
+        this.close();
+      } else {
+        if (!this._buttonDescriptor || this._buttonDescriptor.hasDropdown !== false) {
+          this.open();
         } else {
-          if (
-            !this._buttonDescriptor ||
-            this._buttonDescriptor.hasDropdown !== false
-          ) {
-            this.open();
-          } else {
-            if (this._buttonDescriptor && this._buttonDescriptor.onClick) {
-              this._buttonDescriptor.onClick();
-            }
+          if (this._buttonDescriptor && this._buttonDescriptor.onClick) {
+            this._buttonDescriptor.onClick();
           }
         }
-      });
-
-    appToolbarButtonContainer.insertBefore(
-      button,
-      appToolbarButtonContainer.firstChild
-    );
+      }
+    });
+    appToolbarButtonContainer.insertBefore(button, appToolbarButtonContainer.firstChild);
     this._buttonEl = button;
-
     this._ready.destroy();
-
     this._stopper.onValue(() => {
       button.remove();
     });
   }
-
-  _adjustSearchBarMargin(searchBar: HTMLElement) {
+  _adjustSearchBarMargin(searchBar) {
     const buttonWidth = 40;
     const defaultMarginRight = 70;
-
     const ATTR_NAME = 'data-inboxsdk-searchbar-min-margin-right';
-
-    const newMarginRight =
-      buttonWidth +
-      parseInt(
-        ((document.documentElement: any): HTMLElement).getAttribute(
-          ATTR_NAME
-        ) || '0'
-      );
-
+    const newMarginRight = buttonWidth + parseInt(document.documentElement.getAttribute(ATTR_NAME) || '0');
     const ruleClassName = 'inboxsdk__dynamic_resize_searchbar';
-
-    function setSheetRules(minMarginRight: number) {
-      ((document.documentElement: any): HTMLElement).setAttribute(
-        ATTR_NAME,
-        String(minMarginRight)
-      );
+    function setSheetRules(minMarginRight) {
+      document.documentElement.setAttribute(ATTR_NAME, String(minMarginRight));
       if (minMarginRight <= 0) {
-        setCss('dynamic_resize_searchbar', '');
+        (0, _setCss.default)('dynamic_resize_searchbar', '');
         return;
       }
       const important = minMarginRight > defaultMarginRight ? '!important' : '';
@@ -162,75 +108,54 @@ class InboxAppToolbarButtonView {
   margin-right: ${minMarginRight}px${important};
 }
 `;
-      setCss('dynamic_resize_searchbar', rule);
+      (0, _setCss.default)('dynamic_resize_searchbar', rule);
     }
-
     setSheetRules(newMarginRight);
-
     searchBar.classList.add(ruleClassName);
-    const { nextElementSibling } = searchBar;
+    const {
+      nextElementSibling
+    } = searchBar;
     if (nextElementSibling) {
       nextElementSibling.classList.add(ruleClassName);
     }
-
     this._stopper.onValue(() => {
-      const newMarginRight =
-        parseInt(
-          ((document.documentElement: any): HTMLElement).getAttribute(
-            ATTR_NAME
-          ) || '0'
-        ) - buttonWidth;
+      const newMarginRight = parseInt(document.documentElement.getAttribute(ATTR_NAME) || '0') - buttonWidth;
       setSheetRules(newMarginRight);
     });
   }
-
   open() {
     if (this._activeDropdown) return;
     const button = this._buttonEl;
     if (!button) throw new Error('should not happen');
     button.classList.add('inboxsdk__active');
-    const { arrowColor } = this._buttonDescriptor || {};
-    const dropdown = (this._activeDropdown = new DropdownView(
-      new InboxAppToolbarTooltipView(button, arrowColor),
-      button
-    ));
+    const {
+      arrowColor
+    } = this._buttonDescriptor || {};
+    const dropdown = this._activeDropdown = new _dropdownView.default(new _inboxAppToolbarTooltipView.default(button, arrowColor), button);
     dropdown.once('destroy', () => {
       this._activeDropdown = null;
       button.classList.remove('inboxsdk__active');
     });
-    const appEvent = { dropdown };
+    const appEvent = {
+      dropdown
+    };
     if (this._buttonDescriptor && this._buttonDescriptor.onClick) {
       this._buttonDescriptor.onClick.call(null, appEvent);
     }
   }
-
   close() {
     if (!this._activeDropdown) return;
     this._activeDropdown.close();
   }
-
-  waitForReady(): Promise<this> {
-    return this._ready
-      .map(() => this)
-      .merge(
-        this._stopper.flatMap(() =>
-          Kefir.constantError(
-            new Error('InboxAppToolbarButtonView was destroyed early')
-          )
-        )
-      )
-      .take(1)
-      .takeErrors(1)
-      .toPromise(Promise);
+  waitForReady() {
+    return this._ready.map(() => this).merge(this._stopper.flatMap(() => _kefir.default.constantError(new Error('InboxAppToolbarButtonView was destroyed early')))).take(1).takeErrors(1).toPromise(Promise);
   }
-
   getStopper() {
     return this._stopper;
   }
-
   destroy() {
     this._stopper.destroy();
   }
 }
-
-export default defn(module, InboxAppToolbarButtonView);
+var _default = (0, _ud.defn)(module, InboxAppToolbarButtonView);
+exports.default = _default;

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

@@ -1,61 +1,45 @@
-/* @flow */
-
-import { defn } from 'ud';
-import Kefir from 'kefir';
-import kefirStopper from 'kefir-stopper';
-
+"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"));
 class InboxAppToolbarTooltipView {
-  _stopper: Kefir.Observable<null> & { destroy(): void } = kefirStopper();
-  _anchorElement: HTMLElement;
-  _el: HTMLElement;
-  _containerEl: HTMLElement;
-  _arrowEl: HTMLElement;
-
-  constructor(anchorElement: HTMLElement, arrowColor: ?string) {
+  constructor(anchorElement, arrowColor) {
+    (0, _defineProperty2.default)(this, "_stopper", (0, _kefirStopper.default)());
     this._anchorElement = anchorElement;
-
     this._arrowEl = document.createElement('div');
     this._arrowEl.className = 'inboxsdk__tooltip_arrow inboxsdk__bottom';
-    ((document.body: any): HTMLElement).appendChild(this._arrowEl);
+    document.body.appendChild(this._arrowEl);
     if (arrowColor) {
       this._arrowEl.style.borderColor = arrowColor;
     }
-
     this._containerEl = document.createElement('div');
     this._containerEl.className = 'inboxsdk__appButton_tooltip_container';
-
     this._el = document.createElement('div');
     this._el.className = 'inboxsdk__appButton_tooltip';
     this._el.setAttribute('role', 'region');
-
     this._containerEl.appendChild(this._el);
-    ((document.body: any): HTMLElement).appendChild(this._containerEl);
-
+    document.body.appendChild(this._containerEl);
     this._reposition();
   }
-
   _reposition() {
     const buttonPos = this._anchorElement.getBoundingClientRect();
     const buttonCenter = buttonPos.left + buttonPos.width / 2;
     this._arrowEl.style.top = `${buttonPos.bottom + 18}px`;
-    this._arrowEl.style.right = `${
-      window.innerWidth -
-      buttonPos.right +
-      buttonPos.width / 2 -
-      this._arrowEl.offsetWidth / 2 -
-      1
-    }px`;
-
+    this._arrowEl.style.right = `${window.innerWidth - buttonPos.right + buttonPos.width / 2 - this._arrowEl.offsetWidth / 2 - 1}px`;
     this._containerEl.style.top = `${buttonPos.bottom + 17}px`;
-    this._containerEl.style.minWidth = `${
-      (window.innerWidth - buttonCenter - 30) * 2
-    }px`;
+    this._containerEl.style.minWidth = `${(window.innerWidth - buttonCenter - 30) * 2}px`;
   }
-
   getDropdownOptions() {
     return {
       manualPosition: true,
-      extraElementsToIgnore: [this._arrowEl],
+      extraElementsToIgnore: [this._arrowEl]
     };
   }
   getContentElement() {
@@ -64,12 +48,11 @@ class InboxAppToolbarTooltipView {
   getContainerElement() {
     return this._containerEl;
   }
-
   destroy() {
     this._containerEl.remove();
     this._arrowEl.remove();
     this._stopper.destroy();
   }
 }
-
-export default defn(module, InboxAppToolbarTooltipView);
+var _default = (0, _ud.defn)(module, InboxAppToolbarTooltipView);
+exports.default = _default;