@inboxsdk/core 0.2.28-alpha.5 → 0.2.28

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

@@ -1,34 +1,36 @@
-"use strict";
+/* @flow */
+
+import findIndex from 'lodash/findIndex';
+import { defn } from 'ud';
+import autoHtml from 'auto-html';
+import Kefir from 'kefir';
+import kefirStopper from 'kefir-stopper';
+import React from 'react';
+import ReactDOM from 'react-dom';
+import fakeWindowResize from '../../../lib/fake-window-resize';
+import findParent from '../../../../common/find-parent';
+import getSidebarClassnames from '../getSidebarClassnames';
+import delayAsap from '../../../lib/delay-asap';
+import waitForAnimationClickBlockerGone from '../waitForAnimationClickBlockerGone';
+import makeMutationObserverChunkedStream from '../../../lib/dom/make-mutation-observer-chunked-stream';
+import fromEventTargetCapture from '../../../lib/from-event-target-capture';
+import OrderManager from 'order-manager';
+import idMap from '../../../lib/idMap';
+import querySelector from '../../../lib/dom/querySelectorOrFail';
+import incrementName from '../../../lib/incrementName';
+import type InboxDriver from '../inbox-driver';
+
+import AppSidebar from '../../../driver-common/sidebar/AppSidebar';
+import ContentPanelViewDriver from '../../../driver-common/sidebar/ContentPanelViewDriver';
 
-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 _findIndex = _interopRequireDefault(require("lodash/findIndex"));
-var _ud = require("ud");
-var _autoHtml = _interopRequireDefault(require("auto-html"));
-var _kefir = _interopRequireDefault(require("kefir"));
-var _kefirStopper = _interopRequireDefault(require("kefir-stopper"));
-var _react = _interopRequireDefault(require("react"));
-var _reactDom = _interopRequireDefault(require("react-dom"));
-var _fakeWindowResize = _interopRequireDefault(require("../../../lib/fake-window-resize"));
-var _findParent = _interopRequireDefault(require("../../../../common/find-parent"));
-var _getSidebarClassnames = _interopRequireDefault(require("../getSidebarClassnames"));
-var _delayAsap = _interopRequireDefault(require("../../../lib/delay-asap"));
-var _waitForAnimationClickBlockerGone = _interopRequireDefault(require("../waitForAnimationClickBlockerGone"));
-var _makeMutationObserverChunkedStream = _interopRequireDefault(require("../../../lib/dom/make-mutation-observer-chunked-stream"));
-var _fromEventTargetCapture = _interopRequireDefault(require("../../../lib/from-event-target-capture"));
-var _orderManager = _interopRequireDefault(require("order-manager"));
-var _idMap = _interopRequireDefault(require("../../../lib/idMap"));
-var _querySelectorOrFail = _interopRequireDefault(require("../../../lib/dom/querySelectorOrFail"));
-var _incrementName = _interopRequireDefault(require("../../../lib/incrementName"));
-var _AppSidebar = _interopRequireDefault(require("../../../driver-common/sidebar/AppSidebar"));
-var _ContentPanelViewDriver = _interopRequireDefault(require("../../../driver-common/sidebar/ContentPanelViewDriver"));
 class InboxAppSidebarView {
-  constructor(driver) {
-    (0, _defineProperty2.default)(this, "_stopper", (0, _kefirStopper.default)());
+  _stopper = kefirStopper();
+  _driver: InboxDriver;
+  _el: HTMLElement;
+  _mainParent: HTMLElement;
+  _openOrOpeningProp: Kefir.Observable<boolean>;
+
+  constructor(driver: InboxDriver) {
     this._driver = driver;
 
     // We need to be able to cooperate with other apps/extensions that are
@@ -37,46 +39,63 @@ class InboxAppSidebarView {
     // restricted to being used for references to DOM nodes. When
     // InboxAppSidebarView is instantiated, we check to see if the element
     // already exists and create it if it doesn't.
-    const el = document.querySelector('.' + (0, _idMap.default)('app_sidebar_container'));
+    const el = document.querySelector('.' + idMap('app_sidebar_container'));
     if (el) {
       this._el = el;
     } else {
       this._createElement();
     }
-    const mainParent = (0, _findParent.default)((0, _querySelectorOrFail.default)(document, '[role=application]'), el => el.parentElement === document.body);
+
+    const mainParent = findParent(
+      querySelector(document, '[role=application]'),
+      (el) => el.parentElement === document.body
+    );
     if (!mainParent) {
       const err = new Error('Failed to find main parent');
       this._driver.getLogger().errorSite(err);
       throw err;
     }
     this._mainParent = mainParent;
-    this._openOrOpeningProp = (0, _makeMutationObserverChunkedStream.default)(this._el, {
+
+    this._openOrOpeningProp = makeMutationObserverChunkedStream(this._el, {
       attributes: true,
-      attributeFilter: ['data-open', 'data-is-opening']
-    }).toProperty(() => null).map(() => this._el.getAttribute('data-open') === 'true' || this._el.getAttribute('data-is-opening') === 'true').skipDuplicates();
+      attributeFilter: ['data-open', 'data-is-opening'],
+    })
+      .toProperty(() => null)
+      .map(
+        () =>
+          this._el.getAttribute('data-open') === 'true' ||
+          this._el.getAttribute('data-is-opening') === 'true'
+      )
+      .skipDuplicates();
   }
+
   destroy() {
     this._stopper.destroy();
   }
+
   open() {
     this._setShouldAppSidebarOpen(true);
     this._setOpenedNow(true);
   }
+
   close() {
     this._setShouldAppSidebarOpen(false);
     this._setOpenedNow(false);
   }
-  getOpenOrOpeningStream() {
+
+  getOpenOrOpeningStream(): Kefir.Observable<boolean> {
     return this._openOrOpeningProp;
   }
 
   // This value controls whether the app sidebar should automatically open
   // itself when available when the chat sidebar isn't present. It's only set
   // if the user interacts with the app sidebar button.
-  _getShouldAppSidebarOpen() {
+  _getShouldAppSidebarOpen(): boolean {
     return localStorage.getItem('inboxsdk__app_sidebar_should_open') === 'true';
   }
-  _setShouldAppSidebarOpen(open) {
+
+  _setShouldAppSidebarOpen(open: boolean) {
     try {
       localStorage.setItem('inboxsdk__app_sidebar_should_open', String(open));
     } catch (err) {
@@ -85,191 +104,259 @@ class InboxAppSidebarView {
   }
 
   _createElement() {
-    const el = this._el = document.createElement('div');
-    el.className = (0, _idMap.default)('app_sidebar_container');
+    const el = (this._el = document.createElement('div'));
+    el.className = idMap('app_sidebar_container');
     // Store the open state in the DOM rather than a class property because
     // multiple instances of InboxAppSidebarView from different apps need to
     // share the value.
     el.setAttribute('data-open', 'false');
     el.setAttribute('data-is-opening', 'false');
-    document.body.appendChild(el);
-    if (!document.body.querySelector('.' + (0, _idMap.default)('app_sidebar_waiting_platform'))) {
+    ((document.body: any): HTMLElement).appendChild(el);
+
+    if (
+      !((document.body: any): HTMLElement).querySelector(
+        '.' + idMap('app_sidebar_waiting_platform')
+      )
+    ) {
       const waitingPlatform = document.createElement('div');
-      waitingPlatform.className = (0, _idMap.default)('app_sidebar_waiting_platform');
-      document.body.appendChild(waitingPlatform);
+      waitingPlatform.className = idMap('app_sidebar_waiting_platform');
+      ((document.body: any): HTMLElement).appendChild(waitingPlatform);
     }
 
     // If the user clicks the chat button while the chat sidebar and app
     // sidebar are both open, then we want the chat sidebar to become visible.
     // We block Inbox from closing the chat sidebar, and we close the app sidebar.
-    (0, _fromEventTargetCapture.default)(this._driver.getChatSidebarButton(), 'click').filter(() => el.getAttribute('data-open') === 'true' && this._driver.getCurrentChatSidebarView().getMode() === 'SIDEBAR').takeUntilBy(this._stopper).onValue(event => {
-      event.stopImmediatePropagation();
-      this._setShouldAppSidebarOpen(false);
-      this._setOpenedNow(false);
-    });
-    this._driver.getCurrentChatSidebarView().getModeStream().changes().takeUntilBy(this._stopper).onValue(mode => {
-      if (mode === 'SIDEBAR') {
-        // If the user clicks the chat button while the chat sidebar is
-        // closed and the app sidebar is open, and Inbox opens the chat
-        // sidebar, then we want the chat sidebar to become visible. We just
-        // hide the app sidebar after Inbox brings up the chat sidebar.
+    fromEventTargetCapture(this._driver.getChatSidebarButton(), 'click')
+      .filter(
+        () =>
+          el.getAttribute('data-open') === 'true' &&
+          this._driver.getCurrentChatSidebarView().getMode() === 'SIDEBAR'
+      )
+      .takeUntilBy(this._stopper)
+      .onValue((event) => {
+        event.stopImmediatePropagation();
         this._setShouldAppSidebarOpen(false);
         this._setOpenedNow(false);
-      } else {
-        // If the chat sidebar changes in any other way
-        // (ie. HIDDEN<->DROPDOWN) while the app sidebar is open, then we
-        // might need to fix up some class changes that Inbox might have
-        // made.
-        if (el.getAttribute('data-open') === 'true') {
-          this._setOpenedNow(true);
+      });
+
+    this._driver
+      .getCurrentChatSidebarView()
+      .getModeStream()
+      .changes()
+      .takeUntilBy(this._stopper)
+      .onValue((mode) => {
+        if (mode === 'SIDEBAR') {
+          // If the user clicks the chat button while the chat sidebar is
+          // closed and the app sidebar is open, and Inbox opens the chat
+          // sidebar, then we want the chat sidebar to become visible. We just
+          // hide the app sidebar after Inbox brings up the chat sidebar.
+          this._setShouldAppSidebarOpen(false);
+          this._setOpenedNow(false);
+        } else {
+          // If the chat sidebar changes in any other way
+          // (ie. HIDDEN<->DROPDOWN) while the app sidebar is open, then we
+          // might need to fix up some class changes that Inbox might have
+          // made.
+          if (el.getAttribute('data-open') === 'true') {
+            this._setOpenedNow(true);
+          }
         }
-      }
-    });
+      });
+
     const currentIds = new Set();
-    const orderManager = new _orderManager.default({
+    const orderManager = new OrderManager({
       get() {
         try {
-          return JSON.parse(localStorage.getItem('inboxsdk__sidebar_ordering') || 'null');
+          return JSON.parse(
+            localStorage.getItem('inboxsdk__sidebar_ordering') || 'null'
+          );
         } catch (err) {
           console.error('failed to read sidebar order data', err); //eslint-disable-line no-console
         }
       },
-
       set(data) {
         try {
-          localStorage.setItem('inboxsdk__sidebar_ordering', JSON.stringify(data));
+          localStorage.setItem(
+            'inboxsdk__sidebar_ordering',
+            JSON.stringify(data)
+          );
         } catch (err) {
           console.error('failed to set sidebar order data', err); //eslint-disable-line no-console
         }
-      }
+      },
     });
+    let component: AppSidebar;
 
-    let component;
-    const _appSidebarRefSetter = threadSidebarComponent => {
+    const _appSidebarRefSetter = (threadSidebarComponent) => {
       if (threadSidebarComponent) {
         component = threadSidebarComponent;
       }
     };
+
     const render = () => {
-      _reactDom.default.render( /*#__PURE__*/_react.default.createElement(_AppSidebar.default, {
-        ref: _appSidebarRefSetter,
-        panels: orderManager.getOrderedItems().map(x => x.value),
-        onClose: () => {
-          this._setShouldAppSidebarOpen(false);
-          this._setOpenedNow(false);
-        },
-        onOutsideClick: () => {
-          this._driver.closeOpenThread();
-        },
-        onMoveEnd: (newList, movedItem, oldIndex, newIndex) => {
-          orderManager.moveItem(oldIndex, newIndex);
-          render();
-        }
-      }), el);
+      ReactDOM.render(
+        <AppSidebar
+          ref={_appSidebarRefSetter}
+          panels={orderManager.getOrderedItems().map((x) => x.value)}
+          onClose={() => {
+            this._setShouldAppSidebarOpen(false);
+            this._setOpenedNow(false);
+          }}
+          onOutsideClick={() => {
+            this._driver.closeOpenThread();
+          }}
+          onMoveEnd={(newList, movedItem, oldIndex, newIndex) => {
+            orderManager.moveItem(oldIndex, newIndex);
+            render();
+          }}
+        />,
+        el
+      );
     };
     render();
-    _kefir.default.fromEvents(window, 'storage').filter(e => e.key === 'inboxsdk__sidebar_ordering').takeUntilBy(this._stopper).onValue(() => {
-      orderManager.reload();
-      render();
-    });
+
+    Kefir.fromEvents(window, 'storage')
+      .filter((e) => e.key === 'inboxsdk__sidebar_ordering')
+      .takeUntilBy(this._stopper)
+      .onValue(() => {
+        orderManager.reload();
+        render();
+      });
+
     this._stopper.onValue(() => {
-      _reactDom.default.unmountComponentAtNode(el);
+      ReactDOM.unmountComponentAtNode(el);
       el.remove();
     });
-    _kefir.default.fromEvents(document.body, 'inboxsdkNewSidebarPanel').takeUntilBy(this._stopper).onValue(event => {
-      let id = event.detail.id;
-      while (currentIds.has(id)) {
-        id = (0, _incrementName.default)(id);
-      }
-      currentIds.add(id);
-      orderManager.addItem({
-        groupId: event.detail.appId,
-        id,
-        orderHint: event.detail.orderHint,
-        value: {
+
+    Kefir.fromEvents((document.body: any), 'inboxsdkNewSidebarPanel')
+      .takeUntilBy(this._stopper)
+      .onValue((event) => {
+        let id = event.detail.id;
+        while (currentIds.has(id)) {
+          id = incrementName(id);
+        }
+        currentIds.add(id);
+        orderManager.addItem({
+          groupId: event.detail.appId,
           id,
+          orderHint: event.detail.orderHint,
+          value: {
+            id,
+            appId: event.detail.appId,
+            instanceId: event.detail.instanceId,
+            title: event.detail.title,
+            iconClass: event.detail.iconClass,
+            iconUrl: event.detail.iconUrl,
+            hideTitleBar: event.detail.hideTitleBar,
+            el: event.target,
+          },
+        });
+        render();
+      });
+    Kefir.fromEvents((document.body: any), 'inboxsdkUpdateSidebarPanel')
+      .takeUntilBy(this._stopper)
+      .onValue((event) => {
+        const orderedItems = orderManager.getOrderedItems();
+        const index = findIndex(
+          orderedItems,
+          (x) => x.value.instanceId === event.detail.instanceId
+        );
+        if (index === -1)
+          throw new Error('should not happen: failed to find orderItem');
+        orderManager.updateItemValueByIndex(index, {
+          id: orderedItems[index].value.id,
           appId: event.detail.appId,
           instanceId: event.detail.instanceId,
           title: event.detail.title,
           iconClass: event.detail.iconClass,
           iconUrl: event.detail.iconUrl,
           hideTitleBar: event.detail.hideTitleBar,
-          el: event.target
+          el: event.target,
+        });
+        render();
+      });
+    Kefir.fromEvents((document.body: any), 'inboxsdkRemoveSidebarPanel')
+      .takeUntilBy(this._stopper)
+      .onValue((event) => {
+        const orderedItems = orderManager.getOrderedItems();
+        const index = findIndex(
+          orderedItems,
+          (x) => x.value.instanceId === event.detail.instanceId
+        );
+        if (index === -1)
+          throw new Error('should not happen: failed to find orderItem');
+        currentIds.delete(orderedItems[index].id);
+        orderManager.removeItemByIndex(index);
+        if (orderManager.getOrderedItems().length === 0) {
+          this._setOpenedNow(false);
         }
+        render();
       });
-      render();
-    });
-    _kefir.default.fromEvents(document.body, 'inboxsdkUpdateSidebarPanel').takeUntilBy(this._stopper).onValue(event => {
-      const orderedItems = orderManager.getOrderedItems();
-      const index = (0, _findIndex.default)(orderedItems, x => x.value.instanceId === event.detail.instanceId);
-      if (index === -1) throw new Error('should not happen: failed to find orderItem');
-      orderManager.updateItemValueByIndex(index, {
-        id: orderedItems[index].value.id,
-        appId: event.detail.appId,
-        instanceId: event.detail.instanceId,
-        title: event.detail.title,
-        iconClass: event.detail.iconClass,
-        iconUrl: event.detail.iconUrl,
-        hideTitleBar: event.detail.hideTitleBar,
-        el: event.target
+    Kefir.fromEvents((document.body: any), 'inboxsdkSidebarPanelScrollIntoView')
+      .takeUntilBy(this._stopper)
+      .onValue((event) => {
+        component.scrollPanelIntoView(event.detail.instanceId);
       });
-      render();
-    });
-    _kefir.default.fromEvents(document.body, 'inboxsdkRemoveSidebarPanel').takeUntilBy(this._stopper).onValue(event => {
-      const orderedItems = orderManager.getOrderedItems();
-      const index = (0, _findIndex.default)(orderedItems, x => x.value.instanceId === event.detail.instanceId);
-      if (index === -1) throw new Error('should not happen: failed to find orderItem');
-      currentIds.delete(orderedItems[index].id);
-      orderManager.removeItemByIndex(index);
-      if (orderManager.getOrderedItems().length === 0) {
-        this._setOpenedNow(false);
-      }
-      render();
-    });
-    _kefir.default.fromEvents(document.body, 'inboxsdkSidebarPanelScrollIntoView').takeUntilBy(this._stopper).onValue(event => {
-      component.scrollPanelIntoView(event.detail.instanceId);
-    });
   }
-  _setOpenedNow(open) {
+
+  _setOpenedNow(open: boolean) {
     this._el.setAttribute('data-open', String(open));
-    const {
-      chat
-    } = (0, _getSidebarClassnames.default)();
+    const { chat } = getSidebarClassnames();
     if (!chat) return;
     if (!open) {
-      if (this._driver.getCurrentChatSidebarView().getMode() !== 'SIDEBAR' && this._mainParent.classList.contains(chat)) {
+      if (
+        this._driver.getCurrentChatSidebarView().getMode() !== 'SIDEBAR' &&
+        this._mainParent.classList.contains(chat)
+      ) {
         this._mainParent.classList.remove(chat);
         this._driver.getPageCommunicator().fakeWindowResize();
       }
     } else {
-      if (this._driver.getCurrentChatSidebarView().getMode() !== 'SIDEBAR' && !this._mainParent.classList.contains(chat)) {
+      if (
+        this._driver.getCurrentChatSidebarView().getMode() !== 'SIDEBAR' &&
+        !this._mainParent.classList.contains(chat)
+      ) {
         this._mainParent.classList.add(chat);
         this._driver.getPageCommunicator().fakeWindowResize();
       }
     }
   }
-  _setOpenedAfterAnimation(open) {
+
+  _setOpenedAfterAnimation(open: boolean) {
     this._el.setAttribute('data-is-opening', 'true');
-    (0, _waitForAnimationClickBlockerGone.default)().takeUntilBy(this._stopper).takeUntilBy((0, _makeMutationObserverChunkedStream.default)(this._el, {
-      attributes: true,
-      attributeFilter: ['data-open']
-    })).onValue(() => {
-      this._setOpenedNow(open);
-    }).onEnd(() => {
-      this._el.setAttribute('data-is-opening', 'false');
-    });
+    waitForAnimationClickBlockerGone()
+      .takeUntilBy(this._stopper)
+      .takeUntilBy(
+        makeMutationObserverChunkedStream(this._el, {
+          attributes: true,
+          attributeFilter: ['data-open'],
+        })
+      )
+      .onValue(() => {
+        this._setOpenedNow(open);
+      })
+      .onEnd(() => {
+        this._el.setAttribute('data-is-opening', 'false');
+      });
   }
-  addSidebarContentPanel(descriptor) {
+
+  addSidebarContentPanel(descriptor: Kefir.Observable<Object>) {
     // There's only up to one sidebar in Inbox, so the ID doesn't really matter.
-    const view = new _ContentPanelViewDriver.default(this._driver, descriptor, 'inbox');
-    if (this._driver.getCurrentChatSidebarView().getMode() === 'SIDEBAR' || this._getShouldAppSidebarOpen()) {
+    const view = new ContentPanelViewDriver(this._driver, descriptor, 'inbox');
+
+    if (
+      this._driver.getCurrentChatSidebarView().getMode() === 'SIDEBAR' ||
+      this._getShouldAppSidebarOpen()
+    ) {
       this._setOpenedAfterAnimation(true);
     }
+
     this._stopper.takeUntilBy(view.getStopper()).onValue(() => {
       view.remove();
     });
+
     return view;
   }
 }
-var _default = (0, _ud.defn)(module, InboxAppSidebarView);
-exports.default = _default;
+
+export default defn(module, InboxAppSidebarView);