@inboxsdk/core 0.2.28-alpha.5 → 0.2.28

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

@@ -1,33 +1,47 @@
-"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 _kefirBus = _interopRequireDefault(require("kefir-bus"));
-var _kefirStopper = _interopRequireDefault(require("kefir-stopper"));
-var _insertElementInOrder = _interopRequireDefault(require("../../../lib/dom/insert-element-in-order"));
-var _querySelectorOrFail = _interopRequireDefault(require("../../../lib/dom/querySelectorOrFail"));
-var _dropdownView = _interopRequireDefault(require("../../../widgets/buttons/dropdown-view"));
-var _inboxDropdownView = _interopRequireDefault(require("./inbox-dropdown-view"));
-var _navItemTypes = _interopRequireDefault(require("../../../constants/nav-item-types"));
-var _updateIcon = _interopRequireDefault(require("../../../driver-common/update-icon"));
-class InboxNavItemView {
-  constructor(navItemDescriptor, level) {
-    (0, _defineProperty2.default)(this, "_eventStream", (0, _kefirBus.default)());
-    (0, _defineProperty2.default)(this, "_transitionResetter", (0, _kefirBus.default)());
-    (0, _defineProperty2.default)(this, "_children", 0);
-    (0, _defineProperty2.default)(this, "_name", '');
-    (0, _defineProperty2.default)(this, "_type", null);
-    (0, _defineProperty2.default)(this, "_orderHint", Number.MAX_SAFE_INTEGER);
-    (0, _defineProperty2.default)(this, "_disabled", false);
-    (0, _defineProperty2.default)(this, "_isCollapsed", false);
-    (0, _defineProperty2.default)(this, "_iconSettings", {});
-    (0, _defineProperty2.default)(this, "_accessory", null);
-    (0, _defineProperty2.default)(this, "_accessoryView", null);
+/* @flow */
+
+import Kefir from 'kefir';
+import kefirBus from 'kefir-bus';
+import kefirStopper from 'kefir-stopper';
+import insertElementInOrder from '../../../lib/dom/insert-element-in-order';
+import querySelector from '../../../lib/dom/querySelectorOrFail';
+import DropdownView from '../../../widgets/buttons/dropdown-view';
+import InboxDropdownView from './inbox-dropdown-view';
+
+import NAV_ITEM_TYPES from '../../../constants/nav-item-types';
+
+import updateIcon from '../../../driver-common/update-icon';
+
+import type { Bus } from 'kefir-bus';
+
+type Destroyable = { destroy: () => void };
+
+export default class InboxNavItemView {
+  _eventStream: Bus<any> = kefirBus();
+  _level: number;
+  _stopper: Kefir.Observable<null>;
+  _transitionResetter: Bus<null> = kefirBus();
+  _navItemDescriptor: ?Object;
+  _children: number = 0;
+  _name: string = '';
+  _type: ?string = null;
+  _orderHint: number = Number.MAX_SAFE_INTEGER;
+  _disabled: boolean = false;
+  _isCollapsed: boolean = false;
+  _iconSettings: Object = {};
+  _accessory: ?Object = null;
+  _accessoryView: ?Destroyable = null;
+  _elements: {
+    wrapper: HTMLElement,
+    expander: HTMLElement,
+    navItem: HTMLElement,
+    name: HTMLElement,
+    subNav: HTMLElement,
+    subNavInner: HTMLElement,
+    accessory: HTMLElement,
+  };
+
+  constructor(navItemDescriptor: Kefir.Observable<Object>, level: number) {
     this._level = level || 0;
     this._elements = {
       wrapper: document.createElement('div'),
@@ -36,77 +50,114 @@ class InboxNavItemView {
       name: document.createElement('span'),
       subNav: document.createElement('div'),
       subNavInner: document.createElement('div'),
-      accessory: document.createElement('div')
+      accessory: document.createElement('div'),
     };
+
     if (this._level > 2) {
       console.warn('Adding NavItems more than 3 levels deep is not supported'); //eslint-disable-line no-console
     }
 
-    this._stopper = this._eventStream.ignoreValues().beforeEnd(() => null).toProperty();
+    this._stopper = this._eventStream
+      .ignoreValues()
+      .beforeEnd(() => null)
+      .toProperty();
+
     this._setupElements();
-    navItemDescriptor.takeUntilBy(this._stopper).onValue(descriptor => {
+
+    navItemDescriptor.takeUntilBy(this._stopper).onValue((descriptor) => {
       this._update(descriptor);
       this._navItemDescriptor = descriptor;
     });
   }
-  addNavItem(orderGroup, navItemDescriptor) {
-    const childNavItemView = new InboxNavItemView(navItemDescriptor, this._level + 1);
-    childNavItemView.getEventStream().filter(event => event.eventName === 'orderChanged').onValue(() => (0, _insertElementInOrder.default)(this._elements.subNavInner, childNavItemView.getElement()));
-    (0, _insertElementInOrder.default)(this._elements.subNavInner, childNavItemView.getElement());
+
+  addNavItem(
+    orderGroup: number | string,
+    navItemDescriptor: Kefir.Observable<Object>
+  ): InboxNavItemView {
+    const childNavItemView = new InboxNavItemView(
+      navItemDescriptor,
+      this._level + 1
+    );
+
+    childNavItemView
+      .getEventStream()
+      .filter((event) => event.eventName === 'orderChanged')
+      .onValue(() =>
+        insertElementInOrder(
+          this._elements.subNavInner,
+          childNavItemView.getElement()
+        )
+      );
+
+    insertElementInOrder(
+      this._elements.subNavInner,
+      childNavItemView.getElement()
+    );
+
     this._children += 1;
+
     childNavItemView.getStopper().onValue(() => {
       this._children -= 1;
       this._updateChildrenClass();
       this._updateDisabledState(this._navItemDescriptor || {});
       this._updateAccessory(this._accessory, true);
     });
+
     this._updateChildrenClass();
     this._updateDisabledState(this._navItemDescriptor || {});
     this._updateAccessory(this._accessory, true);
+
     return childNavItemView;
   }
-  setActive(value) {
+
+  setActive(value: boolean) {
     this._elements.navItem.classList.toggle('inboxsdk__navItem_active', value);
   }
+
   toggleCollapse() {
     this._isCollapsed = !this._isCollapsed;
+
     this._isCollapsed ? this._collapse() : this._expand();
   }
-  setCollapsed(value) {
+
+  setCollapsed(value: boolean) {
     if (this._isCollapsed === value) return;
+
     this._isCollapsed = value;
+
     this._isCollapsed ? this._collapse() : this._expand();
   }
-  isCollapsed() {
+
+  isCollapsed(): boolean {
     return this._isCollapsed;
   }
-  getElement() {
+
+  getElement(): HTMLElement {
     return this._elements.wrapper;
   }
-  getEventStream() {
+
+  getEventStream(): Kefir.Observable<Object> {
     return this._eventStream;
   }
-  getStopper() {
+
+  getStopper(): Kefir.Observable<null> {
     return this._stopper;
   }
+
   destroy() {
     this._eventStream.end();
     this._elements.wrapper.remove();
   }
+
   _setupElements() {
-    const {
-      wrapper,
-      expander,
-      navItem,
-      name,
-      subNav,
-      subNavInner,
-      accessory
-    } = this._elements;
+    const { wrapper, expander, navItem, name, subNav, subNavInner, accessory } =
+      this._elements;
+
     wrapper.className = `inboxsdk__navItem_wrapper inboxsdk__navItem_level${this._level}`;
     wrapper.setAttribute('tabindex', '-1');
     wrapper.setAttribute('data-order-hint', String(this._orderHint));
     navItem.setAttribute('role', 'menuitem');
+
     expander.classList.add('inboxsdk__navItem_expander');
     navItem.classList.add('inboxsdk__navItem');
     name.classList.add('inboxsdk__navItem_name');
@@ -115,122 +166,183 @@ class InboxNavItemView {
     subNavInner.classList.add('inboxsdk__navItem_subNavInner');
 
     // Arrow SVG
-    expander.innerHTML = '<svg><polygon points="16.59 8.59 12 13.17 7.41 8.59 6 10 12 16 18 10"></polygon></svg>';
+    expander.innerHTML =
+      '<svg><polygon points="16.59 8.59 12 13.17 7.41 8.59 6 10 12 16 18 10"></polygon></svg>';
+
     navItem.appendChild(expander);
     navItem.appendChild(name);
     navItem.appendChild(accessory);
     wrapper.appendChild(navItem);
+
     subNav.appendChild(subNavInner);
     wrapper.appendChild(subNav);
-    this._eventStream.plug(_kefir.default.fromEvents(navItem, 'click').filter(() => !this._disabled).map(domEvent => {
-      domEvent.stopPropagation();
-      domEvent.preventDefault();
-      return {
-        eventName: 'click',
-        domEvent
-      };
-    }));
-    _kefir.default.fromEvents(expander, 'click').takeUntilBy(this._stopper).filter(() => this._children > 0).onValue(domEvent => {
-      this.toggleCollapse();
-      domEvent.stopPropagation();
-    });
+
+    this._eventStream.plug(
+      Kefir.fromEvents(navItem, 'click')
+        .filter(() => !this._disabled)
+        .map((domEvent: MouseEvent) => {
+          domEvent.stopPropagation();
+          domEvent.preventDefault();
+          return { eventName: 'click', domEvent };
+        })
+    );
+
+    Kefir.fromEvents(expander, 'click')
+      .takeUntilBy(this._stopper)
+      .filter(() => this._children > 0)
+      .onValue((domEvent: MouseEvent) => {
+        this.toggleCollapse();
+        domEvent.stopPropagation();
+      });
   }
+
   _collapse() {
-    const {
-      subNav,
-      subNavInner
-    } = this._elements;
+    const { subNav, subNavInner } = this._elements;
+
     this._transitionResetter.emit(null);
     this._elements.wrapper.classList.add('inboxsdk__navItem_collapsed');
+
     subNav.style.height = `${subNavInner.clientHeight}px`;
     subNav.clientHeight; // Force layout
     subNav.style.height = '0';
-    _kefir.default.merge([_kefir.default.fromEvents(subNav, 'transitionend'), _kefir.default.later(750)]).takeUntilBy(this._transitionResetter).take(1).onValue(() => {
-      subNav.style.display = 'none';
-    });
+
+    Kefir.merge([Kefir.fromEvents(subNav, 'transitionend'), Kefir.later(750)])
+      .takeUntilBy(this._transitionResetter)
+      .take(1)
+      .onValue(() => {
+        subNav.style.display = 'none';
+      });
+
     this._eventStream.emit({
-      eventName: 'collapsed'
+      eventName: 'collapsed',
     });
   }
+
   _expand() {
-    const {
-      subNav,
-      subNavInner
-    } = this._elements;
+    const { subNav, subNavInner } = this._elements;
+
     this._transitionResetter.emit(null);
     this._elements.wrapper.classList.remove('inboxsdk__navItem_collapsed');
+
     subNav.style.display = '';
     subNav.style.height = `${subNavInner.clientHeight}px`;
-    _kefir.default.merge([_kefir.default.fromEvents(subNav, 'transitionend'), _kefir.default.later(750)]).takeUntilBy(this._transitionResetter).take(1).onValue(() => {
-      subNav.style.height = '';
-    });
+
+    Kefir.merge([Kefir.fromEvents(subNav, 'transitionend'), Kefir.later(750)])
+      .takeUntilBy(this._transitionResetter)
+      .take(1)
+      .onValue(() => {
+        subNav.style.height = '';
+      });
+
     this._eventStream.emit({
-      eventName: 'expanded'
+      eventName: 'expanded',
     });
   }
-  _update(descriptor) {
+
+  _update(descriptor: Object) {
     this._updateName(descriptor.name);
     this._updateType(descriptor.type);
     this._updateExpander(descriptor);
     this._updateDisabledState(descriptor);
     this._updateIcon(descriptor);
     this._updateAccessory(descriptor.accessory);
-    this._updateOrder(descriptor.orderHint || descriptor.orderHint === 0 ? descriptor.orderHint : Number.MAX_SAFE_INTEGER);
+    this._updateOrder(
+      descriptor.orderHint || descriptor.orderHint === 0
+        ? descriptor.orderHint
+        : Number.MAX_SAFE_INTEGER
+    );
   }
-  _updateName(name) {
+
+  _updateName(name: string) {
     if (this._name === name) return;
+
     this._elements.name.textContent = name;
     this._elements.name.setAttribute('title', name);
+
     this._name = name;
   }
-  _updateType() {
-    let type = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : _navItemTypes.default.NAVIGATION;
+
+  _updateType(type: string = NAV_ITEM_TYPES.NAVIGATION) {
     if (this._type === type) return;
-    this._elements.navItem.classList.toggle('inboxsdk__navItem_link', type === _navItemTypes.default.LINK);
+
+    this._elements.navItem.classList.toggle(
+      'inboxsdk__navItem_link',
+      type === NAV_ITEM_TYPES.LINK
+    );
+
     this._type = type;
   }
-  _updateExpander(_ref) {
-    let {
-      backgroundColor,
-      expanderForegroundColor
-    } = _ref;
+
+  _updateExpander({ backgroundColor, expanderForegroundColor }: Object) {
     this._elements.expander.style.backgroundColor = backgroundColor || '';
-    const arrow = (0, _querySelectorOrFail.default)(this._elements.expander, 'polygon');
-    arrow.style.fill = expanderForegroundColor || '';
-    this._elements.wrapper.classList.toggle('inboxsdk__navItem_hasColor', typeof backgroundColor === 'string');
+
+    const arrow = querySelector(this._elements.expander, 'polygon');
+    (arrow.style: any).fill = expanderForegroundColor || '';
+
+    this._elements.wrapper.classList.toggle(
+      'inboxsdk__navItem_hasColor',
+      typeof backgroundColor === 'string'
+    );
   }
-  _updateIcon(descriptor) {
-    this._elements.navItem.classList.toggle('inboxsdk__navItem_hasIcon', (!this._disabled || this._level > 0) && Boolean(descriptor.iconUrl || descriptor.iconClass));
-    (0, _updateIcon.default)(this._iconSettings, this._elements.navItem, false, descriptor.iconClass, descriptor.iconUrl, this._elements.name);
+
+  _updateIcon(descriptor: Object) {
+    this._elements.navItem.classList.toggle(
+      'inboxsdk__navItem_hasIcon',
+      (!this._disabled || this._level > 0) &&
+        Boolean(descriptor.iconUrl || descriptor.iconClass)
+    );
+
+    updateIcon(
+      this._iconSettings,
+      this._elements.navItem,
+      false,
+      descriptor.iconClass,
+      descriptor.iconUrl,
+      this._elements.name
+    );
   }
-  _updateAccessory(accessory) {
-    let forceUpdate = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
+
+  _updateAccessory(accessory: ?Object, forceUpdate: boolean = false) {
     if (!forceUpdate && this._accessory === accessory) return;
+
     if (this._accessoryView) {
       this._accessoryView.destroy();
       this._accessoryView = null;
     }
+
     if (accessory && !this._disabled) {
       this._accessoryView = this._createAccessory(accessory);
     }
+
     this._accessory = accessory;
   }
-  _updateDisabledState(descriptor) {
-    this._disabled = !(descriptor.routeID || descriptor.onClick) || this._level === 0 && this._children > 0;
-    this._elements.wrapper.classList.toggle('inboxsdk__navItem_disabled', this._disabled);
+
+  _updateDisabledState(descriptor: Object) {
+    this._disabled =
+      !(descriptor.routeID || descriptor.onClick) ||
+      (this._level === 0 && this._children > 0);
+    this._elements.wrapper.classList.toggle(
+      'inboxsdk__navItem_disabled',
+      this._disabled
+    );
   }
-  _updateOrder(orderHint) {
+
+  _updateOrder(orderHint: number) {
     if (this._orderHint === orderHint) return;
+
     this._elements.wrapper.setAttribute('data-order-hint', String(orderHint));
     this._orderHint = orderHint;
-    this._eventStream.emit({
-      eventName: 'orderChanged'
-    });
+    this._eventStream.emit({ eventName: 'orderChanged' });
   }
+
   _updateChildrenClass() {
-    this._elements.wrapper.classList.toggle('inboxsdk__navItem_hasChildren', this._children > 0);
+    this._elements.wrapper.classList.toggle(
+      'inboxsdk__navItem_hasChildren',
+      this._children > 0
+    );
   }
-  _createAccessory(accessory) {
+
+  _createAccessory(accessory: Object): Destroyable {
     switch (accessory.type) {
       case 'CREATE':
         return this._createCreateAccessory(accessory);
@@ -242,72 +354,99 @@ class InboxNavItemView {
         throw new Error('A type must be specified for NavItem accessories');
     }
   }
-  _createCreateAccessory(accessory) {
-    const {
-      onClick
-    } = accessory;
+
+  _createCreateAccessory(accessory: Object): Destroyable {
+    const { onClick } = accessory;
     return this._createIconButtonAccessory({
       onClick,
-      iconUrl: '//ssl.gstatic.com/bt/C3341AA7A1A076756462EE2E5CD71C11/2x/ic_add-cluster_24px_g60_r3_2x.png'
+      iconUrl:
+        '//ssl.gstatic.com/bt/C3341AA7A1A076756462EE2E5CD71C11/2x/ic_add-cluster_24px_g60_r3_2x.png',
     });
   }
-  _createDropdownButtonAccessory(accessory) {
-    const {
-      onClick
-    } = accessory;
-    return this._createIconButtonAccessory({
-      onClick,
-      iconUrl: '//www.gstatic.com/images/icons/material/system/2x/settings_black_18dp.png'
-    }, true);
+
+  _createDropdownButtonAccessory(accessory: Object): Destroyable {
+    const { onClick } = accessory;
+    return this._createIconButtonAccessory(
+      {
+        onClick,
+        iconUrl:
+          '//www.gstatic.com/images/icons/material/system/2x/settings_black_18dp.png',
+      },
+      true
+    );
   }
-  _createIconButtonAccessory(accessory) {
-    let hasDropdown = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
+
+  _createIconButtonAccessory(
+    accessory: Object,
+    hasDropdown: boolean = false
+  ): Destroyable {
     if (!accessory.onClick) throw new Error('An onClick handler is required');
+
     this._elements.wrapper.classList.add('inboxsdk__navItem_hasAccessory');
-    (0, _updateIcon.default)({}, this._elements.accessory, false, accessory.iconClass, accessory.iconUrl);
-    const iconEl = (0, _querySelectorOrFail.default)(this._elements.accessory, '.inboxsdk__button_icon');
+
+    updateIcon(
+      {},
+      this._elements.accessory,
+      false,
+      accessory.iconClass,
+      accessory.iconUrl
+    );
+
+    const iconEl = querySelector(
+      this._elements.accessory,
+      '.inboxsdk__button_icon'
+    );
     iconEl.setAttribute('tabindex', '-1');
-    const destroyStopper = (0, _kefirStopper.default)();
+
+    const destroyStopper = kefirStopper();
     let dropdown = null;
-    _kefir.default.fromEvents(this._elements.accessory, 'click').takeUntilBy(this._stopper).takeUntilBy(destroyStopper).onValue(event => {
-      event.preventDefault();
-      event.stopPropagation();
-      if (hasDropdown) {
+
+    Kefir.fromEvents(this._elements.accessory, 'click')
+      .takeUntilBy(this._stopper)
+      .takeUntilBy(destroyStopper)
+      .onValue((event) => {
+        event.preventDefault();
+        event.stopPropagation();
+        if (hasDropdown) {
+          if (dropdown) {
+            dropdown.close();
+            return;
+          } else {
+            iconEl.classList.add('inboxsdk__active');
+
+            dropdown = new DropdownView(
+              new InboxDropdownView(),
+              this._elements.accessory
+            );
+            dropdown.setPlacementOptions({
+              position: 'right',
+              hAlign: 'left',
+              vAlign: 'top',
+              buffer: 10,
+            });
+            dropdown.on('destroy', () => {
+              iconEl.classList.remove('inboxsdk__active');
+              dropdown = null;
+            });
+          }
+        }
+        accessory.onClick({ dropdown });
+      });
+
+    Kefir.merge([this._stopper, destroyStopper])
+      .take(1)
+      .onValue(() => {
         if (dropdown) {
           dropdown.close();
-          return;
-        } else {
-          iconEl.classList.add('inboxsdk__active');
-          dropdown = new _dropdownView.default(new _inboxDropdownView.default(), this._elements.accessory);
-          dropdown.setPlacementOptions({
-            position: 'right',
-            hAlign: 'left',
-            vAlign: 'top',
-            buffer: 10
-          });
-          dropdown.on('destroy', () => {
-            iconEl.classList.remove('inboxsdk__active');
-            dropdown = null;
-          });
         }
-      }
-      accessory.onClick({
-        dropdown
       });
-    });
-    _kefir.default.merge([this._stopper, destroyStopper]).take(1).onValue(() => {
-      if (dropdown) {
-        dropdown.close();
-      }
-    });
+
     const destroy = () => {
       this._elements.wrapper.classList.remove('inboxsdk__navItem_hasAccessory');
       this._elements.accessory.innerHTML = '';
       destroyStopper.destroy();
     };
-    return {
-      destroy
-    };
+
+    return { destroy };
   }
 }
-exports.default = InboxNavItemView;

package/src/platform-implementation-js/dom-driver/inbox/waitForAnimationClickBlockerGone.js

@@ -1,26 +1,40 @@
-"use strict";
+/* @flow */
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = waitForAnimationClickBlockerGone;
-var _once = _interopRequireDefault(require("lodash/once"));
-var _find = _interopRequireDefault(require("lodash/find"));
-var _kefir = _interopRequireDefault(require("kefir"));
-var _makeMutationObserverChunkedStream = _interopRequireDefault(require("../../lib/dom/make-mutation-observer-chunked-stream"));
-const getAnimationClickBlocker = (0, _once.default)(() => (0, _find.default)(document.body.children, el => {
-  const c = window.getComputedStyle(el);
-  return c.position === 'fixed' && parseFloat(c.top) === 0 && parseFloat(c.bottom) === 0 && parseFloat(c.left) === 0 && parseFloat(c.right) === 0;
-}));
-function waitForAnimationClickBlockerGone() {
+import once from 'lodash/once';
+import find from 'lodash/find';
+import Kefir from 'kefir';
+
+import makeMutationObserverChunkedStream from '../../lib/dom/make-mutation-observer-chunked-stream';
+
+const getAnimationClickBlocker: () => HTMLElement = once(() =>
+  find(((document.body: any): HTMLElement).children, (el) => {
+    const c = window.getComputedStyle(el);
+    return (
+      c.position === 'fixed' &&
+      parseFloat(c.top) === 0 &&
+      parseFloat(c.bottom) === 0 &&
+      parseFloat(c.left) === 0 &&
+      parseFloat(c.right) === 0
+    );
+  })
+);
+
+export default function waitForAnimationClickBlockerGone(): Kefir.Observable<void> {
   const el = getAnimationClickBlocker();
 
   // Wait for (the animationClickBlocker to appear OR 150 ms to pass), then
   // wait for the animationClickBlocker to disappear.
-  return (0, _makeMutationObserverChunkedStream.default)(el, {
-    attributes: true
-  }).toProperty(() => undefined).filter(() => window.getComputedStyle(el).display !== 'none').merge(_kefir.default.later(150)).take(1).flatMap(() => (0, _makeMutationObserverChunkedStream.default)(el, {
-    attributes: true
-  }).toProperty(() => undefined)).filter(() => window.getComputedStyle(el).display === 'none').map(() => undefined).take(1);
-}
+  return makeMutationObserverChunkedStream(el, { attributes: true })
+    .toProperty(() => undefined)
+    .filter(() => window.getComputedStyle(el).display !== 'none')
+    .merge(Kefir.later(150))
+    .take(1)
+    .flatMap(() =>
+      makeMutationObserverChunkedStream(el, { attributes: true }).toProperty(
+        () => undefined
+      )
+    )
+    .filter(() => window.getComputedStyle(el).display === 'none')
+    .map(() => undefined)
+    .take(1);
+}