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

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

@@ -1,47 +1,33 @@
-/* @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) {
+"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);
     this._level = level || 0;
     this._elements = {
       wrapper: document.createElement('div'),
@@ -50,114 +36,77 @@ export default 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: 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()
-    );
-
+  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());
     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: boolean) {
+  setActive(value) {
     this._elements.navItem.classList.toggle('inboxsdk__navItem_active', value);
   }
-
   toggleCollapse() {
     this._isCollapsed = !this._isCollapsed;
-
     this._isCollapsed ? this._collapse() : this._expand();
   }
-
-  setCollapsed(value: boolean) {
+  setCollapsed(value) {
     if (this._isCollapsed === value) return;
-
     this._isCollapsed = value;
-
     this._isCollapsed ? this._collapse() : this._expand();
   }
-
-  isCollapsed(): boolean {
+  isCollapsed() {
     return this._isCollapsed;
   }
-
-  getElement(): HTMLElement {
+  getElement() {
     return this._elements.wrapper;
   }
-
-  getEventStream(): Kefir.Observable<Object> {
+  getEventStream() {
     return this._eventStream;
   }
-
-  getStopper(): Kefir.Observable<null> {
+  getStopper() {
     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');
@@ -166,183 +115,122 @@ export default 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.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();
-      });
+    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();
+    });
   }
-
   _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.merge([Kefir.fromEvents(subNav, 'transitionend'), Kefir.later(750)])
-      .takeUntilBy(this._transitionResetter)
-      .take(1)
-      .onValue(() => {
-        subNav.style.display = 'none';
-      });
-
+    _kefir.default.merge([_kefir.default.fromEvents(subNav, 'transitionend'), _kefir.default.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.merge([Kefir.fromEvents(subNav, 'transitionend'), Kefir.later(750)])
-      .takeUntilBy(this._transitionResetter)
-      .take(1)
-      .onValue(() => {
-        subNav.style.height = '';
-      });
-
+    _kefir.default.merge([_kefir.default.fromEvents(subNav, 'transitionend'), _kefir.default.later(750)]).takeUntilBy(this._transitionResetter).take(1).onValue(() => {
+      subNav.style.height = '';
+    });
     this._eventStream.emit({
-      eventName: 'expanded',
+      eventName: 'expanded'
     });
   }
-
-  _update(descriptor: Object) {
+  _update(descriptor) {
     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: string) {
+  _updateName(name) {
     if (this._name === name) return;
-
     this._elements.name.textContent = name;
     this._elements.name.setAttribute('title', name);
-
     this._name = name;
   }
-
-  _updateType(type: string = NAV_ITEM_TYPES.NAVIGATION) {
+  _updateType() {
+    let type = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : _navItemTypes.default.NAVIGATION;
     if (this._type === type) return;
-
-    this._elements.navItem.classList.toggle(
-      'inboxsdk__navItem_link',
-      type === NAV_ITEM_TYPES.LINK
-    );
-
+    this._elements.navItem.classList.toggle('inboxsdk__navItem_link', type === _navItemTypes.default.LINK);
     this._type = type;
   }
-
-  _updateExpander({ backgroundColor, expanderForegroundColor }: Object) {
+  _updateExpander(_ref) {
+    let {
+      backgroundColor,
+      expanderForegroundColor
+    } = _ref;
     this._elements.expander.style.backgroundColor = backgroundColor || '';
-
-    const arrow = querySelector(this._elements.expander, 'polygon');
-    (arrow.style: any).fill = expanderForegroundColor || '';
-
-    this._elements.wrapper.classList.toggle(
-      'inboxsdk__navItem_hasColor',
-      typeof backgroundColor === 'string'
-    );
+    const arrow = (0, _querySelectorOrFail.default)(this._elements.expander, 'polygon');
+    arrow.style.fill = expanderForegroundColor || '';
+    this._elements.wrapper.classList.toggle('inboxsdk__navItem_hasColor', typeof backgroundColor === 'string');
   }
-
-  _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
-    );
+  _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);
   }
-
-  _updateAccessory(accessory: ?Object, forceUpdate: boolean = false) {
+  _updateAccessory(accessory) {
+    let forceUpdate = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 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: Object) {
-    this._disabled =
-      !(descriptor.routeID || descriptor.onClick) ||
-      (this._level === 0 && this._children > 0);
-    this._elements.wrapper.classList.toggle(
-      'inboxsdk__navItem_disabled',
-      this._disabled
-    );
+  _updateDisabledState(descriptor) {
+    this._disabled = !(descriptor.routeID || descriptor.onClick) || this._level === 0 && this._children > 0;
+    this._elements.wrapper.classList.toggle('inboxsdk__navItem_disabled', this._disabled);
   }
-
-  _updateOrder(orderHint: number) {
+  _updateOrder(orderHint) {
     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: Object): Destroyable {
+  _createAccessory(accessory) {
     switch (accessory.type) {
       case 'CREATE':
         return this._createCreateAccessory(accessory);
@@ -354,99 +242,72 @@ export default class InboxNavItemView {
         throw new Error('A type must be specified for NavItem accessories');
     }
   }
-
-  _createCreateAccessory(accessory: Object): Destroyable {
-    const { onClick } = accessory;
+  _createCreateAccessory(accessory) {
+    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: Object): Destroyable {
-    const { onClick } = accessory;
-    return this._createIconButtonAccessory(
-      {
-        onClick,
-        iconUrl:
-          '//www.gstatic.com/images/icons/material/system/2x/settings_black_18dp.png',
-      },
-      true
-    );
+  _createDropdownButtonAccessory(accessory) {
+    const {
+      onClick
+    } = accessory;
+    return this._createIconButtonAccessory({
+      onClick,
+      iconUrl: '//www.gstatic.com/images/icons/material/system/2x/settings_black_18dp.png'
+    }, true);
   }
-
-  _createIconButtonAccessory(
-    accessory: Object,
-    hasDropdown: boolean = false
-  ): Destroyable {
+  _createIconButtonAccessory(accessory) {
+    let hasDropdown = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
     if (!accessory.onClick) throw new Error('An onClick handler is required');
-
     this._elements.wrapper.classList.add('inboxsdk__navItem_hasAccessory');
-
-    updateIcon(
-      {},
-      this._elements.accessory,
-      false,
-      accessory.iconClass,
-      accessory.iconUrl
-    );
-
-    const iconEl = querySelector(
-      this._elements.accessory,
-      '.inboxsdk__button_icon'
-    );
+    (0, _updateIcon.default)({}, this._elements.accessory, false, accessory.iconClass, accessory.iconUrl);
+    const iconEl = (0, _querySelectorOrFail.default)(this._elements.accessory, '.inboxsdk__button_icon');
     iconEl.setAttribute('tabindex', '-1');
-
-    const destroyStopper = kefirStopper();
+    const destroyStopper = (0, _kefirStopper.default)();
     let dropdown = null;
-
-    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(() => {
+    _kefir.default.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.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,40 +1,26 @@
-/* @flow */
+"use strict";
 
-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> {
+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() {
   const el = getAnimationClickBlocker();
 
   // Wait for (the animationClickBlocker to appear OR 150 ms to pass), then
   // wait for the animationClickBlocker to disappear.
-  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);
-}
+  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);
+}