@inboxsdk/core 0.2.28-alpha.6 → 0.2.28

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

@@ -1,93 +1,147 @@
-"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"));
+/* @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';
+
 class InboxAppToolbarButtonView {
-  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));
+  _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));
   }
-  _setupButton(appToolbarLocation) {
-    let appToolbarButtonContainer = (0, _find.default)(appToolbarLocation.children, el => el.classList.contains('inboxsdk__appButton_container'));
+
+  _setupButton(appToolbarLocation: HTMLElement) {
+    let appToolbarButtonContainer = find(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.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();
+
+    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();
         } else {
-          if (this._buttonDescriptor && this._buttonDescriptor.onClick) {
-            this._buttonDescriptor.onClick();
+          if (
+            !this._buttonDescriptor ||
+            this._buttonDescriptor.hasDropdown !== false
+          ) {
+            this.open();
+          } else {
+            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) {
+
+  _adjustSearchBarMargin(searchBar: HTMLElement) {
     const buttonWidth = 40;
     const defaultMarginRight = 70;
+
     const ATTR_NAME = 'data-inboxsdk-searchbar-min-margin-right';
-    const newMarginRight = buttonWidth + parseInt(document.documentElement.getAttribute(ATTR_NAME) || '0');
+
+    const newMarginRight =
+      buttonWidth +
+      parseInt(
+        ((document.documentElement: any): HTMLElement).getAttribute(
+          ATTR_NAME
+        ) || '0'
+      );
+
     const ruleClassName = 'inboxsdk__dynamic_resize_searchbar';
-    function setSheetRules(minMarginRight) {
-      document.documentElement.setAttribute(ATTR_NAME, String(minMarginRight));
+
+    function setSheetRules(minMarginRight: number) {
+      ((document.documentElement: any): HTMLElement).setAttribute(
+        ATTR_NAME,
+        String(minMarginRight)
+      );
       if (minMarginRight <= 0) {
-        (0, _setCss.default)('dynamic_resize_searchbar', '');
+        setCss('dynamic_resize_searchbar', '');
         return;
       }
       const important = minMarginRight > defaultMarginRight ? '!important' : '';
@@ -108,54 +162,75 @@ class InboxAppToolbarButtonView {
   margin-right: ${minMarginRight}px${important};
 }
 `;
-      (0, _setCss.default)('dynamic_resize_searchbar', rule);
+      setCss('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.getAttribute(ATTR_NAME) || '0') - buttonWidth;
+      const newMarginRight =
+        parseInt(
+          ((document.documentElement: any): HTMLElement).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.default(new _inboxAppToolbarTooltipView.default(button, arrowColor), button);
+    const { arrowColor } = this._buttonDescriptor || {};
+    const dropdown = (this._activeDropdown = new DropdownView(
+      new InboxAppToolbarTooltipView(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() {
-    return this._ready.map(() => this).merge(this._stopper.flatMap(() => _kefir.default.constantError(new Error('InboxAppToolbarButtonView was destroyed early')))).take(1).takeErrors(1).toPromise(Promise);
+
+  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);
   }
+
   getStopper() {
     return this._stopper;
   }
+
   destroy() {
     this._stopper.destroy();
   }
 }
-var _default = (0, _ud.defn)(module, InboxAppToolbarButtonView);
-exports.default = _default;
+
+export default defn(module, InboxAppToolbarButtonView);

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

@@ -1,45 +1,61 @@
-"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"));
+/* @flow */
+
+import { defn } from 'ud';
+import Kefir from 'kefir';
+import kefirStopper from 'kefir-stopper';
+
 class InboxAppToolbarTooltipView {
-  constructor(anchorElement, arrowColor) {
-    (0, _defineProperty2.default)(this, "_stopper", (0, _kefirStopper.default)());
+  _stopper: Kefir.Observable<null> & { destroy(): void } = kefirStopper();
+  _anchorElement: HTMLElement;
+  _el: HTMLElement;
+  _containerEl: HTMLElement;
+  _arrowEl: HTMLElement;
+
+  constructor(anchorElement: HTMLElement, arrowColor: ?string) {
     this._anchorElement = anchorElement;
+
     this._arrowEl = document.createElement('div');
     this._arrowEl.className = 'inboxsdk__tooltip_arrow inboxsdk__bottom';
-    document.body.appendChild(this._arrowEl);
+    ((document.body: any): HTMLElement).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.appendChild(this._containerEl);
+    ((document.body: any): HTMLElement).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() {
@@ -48,11 +64,12 @@ class InboxAppToolbarTooltipView {
   getContainerElement() {
     return this._containerEl;
   }
+
   destroy() {
     this._containerEl.remove();
     this._arrowEl.remove();
     this._stopper.destroy();
   }
 }
-var _default = (0, _ud.defn)(module, InboxAppToolbarTooltipView);
-exports.default = _default;
+
+export default defn(module, InboxAppToolbarTooltipView);