@inboxsdk/core 0.2.28 → 0.2.29-alpha.0

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

@@ -1,74 +1,58 @@
-/* @flow */
-
-import asap from 'asap';
-import { defn } from 'ud';
-import find from 'lodash/find';
-import React from 'react';
-import ReactDOM from 'react-dom';
-import Kefir from 'kefir';
-import kefirStopper from 'kefir-stopper';
-import makeMutationObserverChunkedStream from '../../../lib/dom/make-mutation-observer-chunked-stream';
-import querySelector from '../../../lib/dom/querySelectorOrFail';
-import fromEventTargetCapture from '../../../lib/from-event-target-capture';
-import ElementContainer from '../../../lib/react/ElementContainer';
-import type {
-  MoleViewDriver,
-  MoleOptions,
-  MoleButtonDescriptor,
-} from '../../../driver-interfaces/mole-view-driver';
-import reemitClickEvent from '../../../lib/dom/reemitClickEventForReact';
-import type InboxDriver from '../inbox-driver';
-import kefirBus from 'kefir-bus';
+"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 _asap = _interopRequireDefault(require("asap"));
+var _ud = require("ud");
+var _find = _interopRequireDefault(require("lodash/find"));
+var _react = _interopRequireDefault(require("react"));
+var _reactDom = _interopRequireDefault(require("react-dom"));
+var _kefir = _interopRequireDefault(require("kefir"));
+var _kefirStopper = _interopRequireDefault(require("kefir-stopper"));
+var _makeMutationObserverChunkedStream = _interopRequireDefault(require("../../../lib/dom/make-mutation-observer-chunked-stream"));
+var _querySelectorOrFail = _interopRequireDefault(require("../../../lib/dom/querySelectorOrFail"));
+var _fromEventTargetCapture = _interopRequireDefault(require("../../../lib/from-event-target-capture"));
+var _ElementContainer = _interopRequireDefault(require("../../../lib/react/ElementContainer"));
+var _reemitClickEventForReact = _interopRequireDefault(require("../../../lib/dom/reemitClickEventForReact"));
+var _kefirBus = _interopRequireDefault(require("kefir-bus"));
 class InboxMoleViewDriver {
-  _driver: InboxDriver;
-  _options: MoleOptions;
-  _stopper = kefirStopper();
-  _eventStream = kefirBus();
-  _element: HTMLElement;
-  _title: string;
-
-  constructor(options: MoleOptions, driver: InboxDriver) {
-    (this: MoleViewDriver);
+  constructor(options, driver) {
+    (0, _defineProperty2.default)(this, "_stopper", (0, _kefirStopper.default)());
+    (0, _defineProperty2.default)(this, "_eventStream", (0, _kefirBus.default)());
+    this;
     this._options = options;
     this._driver = driver;
     this._element = document.createElement('div');
-    this._element.className =
-      'inboxsdk__mole_view ' + (options.className || '');
+    this._element.className = 'inboxsdk__mole_view ' + (options.className || '');
     this._element.setAttribute('jsaction', 'global.none');
-
     this._title = String(this._options.title || '');
-
     this._render();
-    (this._element.firstElementChild: any).style.zIndex = '1';
-
-    Kefir.fromEvents(this._element, 'click')
-      .takeUntilBy(this._stopper)
-      .onValue((event) => {
-        reemitClickEvent(event);
-      });
+    this._element.firstElementChild.style.zIndex = '1';
+    _kefir.default.fromEvents(this._element, 'click').takeUntilBy(this._stopper).onValue(event => {
+      (0, _reemitClickEventForReact.default)(event);
+    });
   }
-
   _render() {
-    ReactDOM.render(
-      <MoleViewContents
-        title={this._title}
-        titleEl={this._options.titleEl}
-        el={this._options.el}
-        chrome={this._options.chrome}
-        titleButtons={this._options.titleButtons}
-        minimized={this.getMinimized()}
-        onClose={() => {
-          // React doesn't like it when you unmount a component within a React
-          // event handler, so we do it async.
-          asap(() => {
-            this.destroy();
-          });
-        }}
-        onSetMinimize={(minimized) => this.setMinimized(minimized)}
-      />,
-      this._element
-    );
+    _reactDom.default.render( /*#__PURE__*/_react.default.createElement(MoleViewContents, {
+      title: this._title,
+      titleEl: this._options.titleEl,
+      el: this._options.el,
+      chrome: this._options.chrome,
+      titleButtons: this._options.titleButtons,
+      minimized: this.getMinimized(),
+      onClose: () => {
+        // React doesn't like it when you unmount a component within a React
+        // event handler, so we do it async.
+        (0, _asap.default)(() => {
+          this.destroy();
+        });
+      },
+      onSetMinimize: minimized => this.setMinimized(minimized)
+    }), this._element);
   }
   show() {
     if (this._element.parentElement) {
@@ -84,62 +68,42 @@ class InboxMoleViewDriver {
 
     // The extension might not populate the element until after creating the
     // mole, so calculate the width after that.
-    asap(() => {
+    (0, _asap.default)(() => {
       this._setupWidth();
     });
 
     // Keep the mole as the first item in the list
-    makeMutationObserverChunkedStream(container, { childList: true })
-      .takeUntilBy(this._stopper)
-      .onValue((muts) => {
-        const composeWasAdded = muts.some((mutation) =>
-          Array.prototype.some.call(
-            mutation.addedNodes,
-            (node) =>
-              node.nodeType === 1 &&
-              !node.classList.contains('inboxsdk__mole_view')
-          )
-        );
-
-        if (composeWasAdded) {
-          container.insertBefore(this._element, container.firstElementChild);
-        }
-        this._setupWidth();
-      });
-    makeMutationObserverChunkedStream(this._options.el, {
+    (0, _makeMutationObserverChunkedStream.default)(container, {
+      childList: true
+    }).takeUntilBy(this._stopper).onValue(muts => {
+      const composeWasAdded = muts.some(mutation => Array.prototype.some.call(mutation.addedNodes, node => node.nodeType === 1 && !node.classList.contains('inboxsdk__mole_view')));
+      if (composeWasAdded) {
+        container.insertBefore(this._element, container.firstElementChild);
+      }
+      this._setupWidth();
+    });
+    (0, _makeMutationObserverChunkedStream.default)(this._options.el, {
       attributes: true,
-      attributeFilter: ['class', 'style'],
-    })
-      .takeUntilBy(this._stopper)
-      .onValue(() => {
-        this._setupWidth();
-      });
-    Kefir.fromEvents(this._element, 'click')
-      .merge(fromEventTargetCapture(this._element, 'focus'))
-      .takeUntilBy(this._stopper)
-      .onValue(() => {
-        this._bringToFront();
-      });
+      attributeFilter: ['class', 'style']
+    }).takeUntilBy(this._stopper).onValue(() => {
+      this._setupWidth();
+    });
+    _kefir.default.fromEvents(this._element, 'click').merge((0, _fromEventTargetCapture.default)(this._element, 'focus')).takeUntilBy(this._stopper).onValue(() => {
+      this._bringToFront();
+    });
   }
   _setupWidth() {
-    const naturalWidth = querySelector(
-      this._element,
-      '.inboxsdk__mole_view_inner'
-    ).getBoundingClientRect().width;
+    const naturalWidth = (0, _querySelectorOrFail.default)(this._element, '.inboxsdk__mole_view_inner').getBoundingClientRect().width;
 
     // Actually set the width asynchronously in order to reduce thrashing when multiple moles are present
     // and having _setupWidth called on all together.
-    asap(() => {
+    (0, _asap.default)(() => {
       this._element.style.width = naturalWidth + 'px';
 
       // If this mole is the leftmost mole/compose element in the mole-container, give it some padding-left
       // so it can't go off the screen's edge. Inbox does the same for its composeviews.
       const parent = this._element.parentElement;
-      if (
-        parent &&
-        Array.prototype.indexOf.call(parent.children, this._element) ===
-          parent.children.length - 2
-      ) {
+      if (parent && Array.prototype.indexOf.call(parent.children, this._element) === parent.children.length - 2) {
         this._element.style.paddingLeft = naturalWidth + 'px';
       } else {
         this._element.style.paddingLeft = '';
@@ -149,18 +113,12 @@ class InboxMoleViewDriver {
   _bringToFront() {
     if (this._element.classList.contains('inboxsdk__mole_at_front')) return;
     this._element.classList.add('inboxsdk__mole_at_front');
-
     const container = this._element.parentElement;
-    if (!(container instanceof HTMLElement))
-      throw new Error('mole not in document');
-    const selfIndex = Array.prototype.indexOf.call(
-      container.children,
-      this._element
-    );
+    if (!(container instanceof HTMLElement)) throw new Error('mole not in document');
+    const selfIndex = Array.prototype.indexOf.call(container.children, this._element);
     if (selfIndex < 0) throw new Error('should not happen');
     const count = container.children.length;
-
-    const firstComposeParent = find(container.children, isComposeParentElement);
+    const firstComposeParent = (0, _find.default)(container.children, isComposeParentElement);
     if (firstComposeParent) {
       // emit a fake focus event so Inbox puts this (the right-most) composeview on top
       firstComposeParent.dispatchEvent(new FocusEvent('focus'));
@@ -172,11 +130,9 @@ class InboxMoleViewDriver {
       if (child !== this._element) {
         child.classList.remove('inboxsdk__mole_at_front');
       }
-      const zIndexedChild = find(child.children, (child) => child.style.zIndex);
+      const zIndexedChild = (0, _find.default)(child.children, child => child.style.zIndex);
       if (!zIndexedChild) return;
-      zIndexedChild.style.zIndex = String(
-        i > selfIndex ? count - (i - selfIndex) : count
-      );
+      zIndexedChild.style.zIndex = String(i > selfIndex ? count - (i - selfIndex) : count);
     });
 
     // Wait until the next time either a compose is brought to the front or a
@@ -184,217 +140,158 @@ class InboxMoleViewDriver {
     // we need to put all the moles to the back. If a mole was brought to the
     // front, then do nothing because that mole's _bringToFront function will
     // handle the composes and the moles.
-    Kefir.merge(
-      [
-        // The user tried to focus the compose that Inbox still thinks is at the
-        // front.
-        !firstComposeParent
-          ? null
-          : fromEventTargetCapture(firstComposeParent, 'focus'),
-
-        // A new compose was added.
-        makeMutationObserverChunkedStream(container, {
-          childList: true,
-        }).filter((mutations) =>
-          mutations.some((mutation) => mutation.addedNodes.length > 0)
-        ),
-      ]
-        .concat(
-          Array.prototype.map.call(container.children, (el) => {
-            const zIndexedChild = find(
-              el.children,
-              (child) => child.style.zIndex
-            );
-            if (!zIndexedChild) return null;
-            const currentZindex = zIndexedChild.style.zIndex;
-            return makeMutationObserverChunkedStream(zIndexedChild, {
-              attributes: true,
-              attributeFilter: ['style'],
-            }).filter(() => zIndexedChild.style.zIndex !== currentZindex);
-          })
-        )
-        .filter(Boolean)
-    )
-      .takeUntilBy(this._stopper)
-      .take(1)
-      .onValue(() => {
-        if (this._element.classList.contains('inboxsdk__mole_at_front')) {
-          this._element.classList.remove('inboxsdk__mole_at_front');
-          Array.prototype.forEach.call(container.children, (child) => {
-            if (isComposeParentElement(child)) return;
-            const zIndexedChild = find(
-              child.children,
-              (child) => child.style.zIndex
-            );
-            if (!zIndexedChild) return;
-            zIndexedChild.style.zIndex = '1';
-          });
-        }
-      });
+    _kefir.default.merge([
+    // The user tried to focus the compose that Inbox still thinks is at the
+    // front.
+    !firstComposeParent ? null : (0, _fromEventTargetCapture.default)(firstComposeParent, 'focus'),
+    // A new compose was added.
+    (0, _makeMutationObserverChunkedStream.default)(container, {
+      childList: true
+    }).filter(mutations => mutations.some(mutation => mutation.addedNodes.length > 0))].concat(Array.prototype.map.call(container.children, el => {
+      const zIndexedChild = (0, _find.default)(el.children, child => child.style.zIndex);
+      if (!zIndexedChild) return null;
+      const currentZindex = zIndexedChild.style.zIndex;
+      return (0, _makeMutationObserverChunkedStream.default)(zIndexedChild, {
+        attributes: true,
+        attributeFilter: ['style']
+      }).filter(() => zIndexedChild.style.zIndex !== currentZindex);
+    })).filter(Boolean)).takeUntilBy(this._stopper).take(1).onValue(() => {
+      if (this._element.classList.contains('inboxsdk__mole_at_front')) {
+        this._element.classList.remove('inboxsdk__mole_at_front');
+        Array.prototype.forEach.call(container.children, child => {
+          if (isComposeParentElement(child)) return;
+          const zIndexedChild = (0, _find.default)(child.children, child => child.style.zIndex);
+          if (!zIndexedChild) return;
+          zIndexedChild.style.zIndex = '1';
+        });
+      }
+    });
   }
-  setTitle(title: string) {
+  setTitle(title) {
     this._title = String(title);
     this._render();
   }
-  setMinimized(minimized: boolean) {
+  setMinimized(minimized) {
     if (minimized) {
       this._element.classList.add('inboxsdk__minimized');
       this._render();
-      this._eventStream.emit({ eventName: 'minimize' });
+      this._eventStream.emit({
+        eventName: 'minimize'
+      });
     } else {
       this._element.classList.remove('inboxsdk__minimized');
       this._render();
-      this._eventStream.emit({ eventName: 'restore' });
+      this._eventStream.emit({
+        eventName: 'restore'
+      });
     }
   }
   getMinimized() {
     return this._element.classList.contains('inboxsdk__minimized');
   }
-  getEventStream(): Kefir.Observable<Object> {
+  getEventStream() {
     return this._eventStream;
   }
   destroy() {
-    ReactDOM.unmountComponentAtNode(this._element);
+    _reactDom.default.unmountComponentAtNode(this._element);
     this._stopper.destroy();
     this._eventStream.end();
     this._element.remove();
   }
 }
-
-function isComposeParentElement(el: Element): boolean {
-  return (
-    !el.classList.contains('inboxsdk__mole_view') && el.hasAttribute('jsaction')
-  );
+function isComposeParentElement(el) {
+  return !el.classList.contains('inboxsdk__mole_view') && el.hasAttribute('jsaction');
 }
-
-export default defn(module, InboxMoleViewDriver);
-
-type MoleViewContentsProps = {
-  title: string,
-  titleEl?: ?HTMLElement,
-  minimizedTitleEl?: ?HTMLElement,
-  el: HTMLElement,
-  chrome?: ?boolean,
-  titleButtons?: ?Array<MoleButtonDescriptor>,
-  minimized: boolean,
-  onClose: () => void,
-  onSetMinimize: (minimized: boolean) => void,
-};
-
-class MoleViewContents extends React.Component<MoleViewContentsProps> {
+var _default = (0, _ud.defn)(module, InboxMoleViewDriver);
+exports.default = _default;
+class MoleViewContents extends _react.default.Component {
   render() {
     let titlebar = null;
     if (this.props.chrome !== false) {
       let title;
       if (this.props.minimized && this.props.minimizedTitleEl) {
-        title = (
-          <ElementContainer
-            className="inboxsdk__mole_view_title"
-            el={this.props.minimizedTitleEl}
-          />
-        );
+        title = /*#__PURE__*/_react.default.createElement(_ElementContainer.default, {
+          className: "inboxsdk__mole_view_title",
+          el: this.props.minimizedTitleEl
+        });
       } else if (this.props.titleEl) {
-        title = (
-          <ElementContainer
-            className="inboxsdk__mole_view_title"
-            el={this.props.titleEl}
-          />
-        );
+        title = /*#__PURE__*/_react.default.createElement(_ElementContainer.default, {
+          className: "inboxsdk__mole_view_title",
+          el: this.props.titleEl
+        });
       } else {
-        title = (
-          <div className="inboxsdk__mole_view_title">{this.props.title}</div>
-        );
+        title = /*#__PURE__*/_react.default.createElement("div", {
+          className: "inboxsdk__mole_view_title"
+        }, this.props.title);
       }
-
-      const titleButtons = (this.props.titleButtons || []).map(
-        (descriptor, i) => {
-          return (
-            <button
-              type="button"
-              key={i}
-              title={descriptor.title}
-              className="inboxsdk__mole_custom_title_button"
-              onClick={(event) => {
-                event.stopPropagation();
-                descriptor.onClick();
-              }}
-            >
-              <img
-                className={descriptor.iconClass}
-                src={descriptor.iconUrl}
-                alt=""
-                aria-hidden="true"
-              />
-            </button>
-          );
+      const titleButtons = (this.props.titleButtons || []).map((descriptor, i) => {
+        return /*#__PURE__*/_react.default.createElement("button", {
+          type: "button",
+          key: i,
+          title: descriptor.title,
+          className: "inboxsdk__mole_custom_title_button",
+          onClick: event => {
+            event.stopPropagation();
+            descriptor.onClick();
+          }
+        }, /*#__PURE__*/_react.default.createElement("img", {
+          className: descriptor.iconClass,
+          src: descriptor.iconUrl,
+          alt: "",
+          "aria-hidden": "true"
+        }));
+      });
+      titlebar = /*#__PURE__*/_react.default.createElement("div", {
+        className: "inboxsdk__mole_view_titlebar",
+        onClick: () => {
+          if (this.props.minimized) {
+            this.props.onSetMinimize(false);
+          }
         }
-      );
-
-      titlebar = (
-        <div
-          className="inboxsdk__mole_view_titlebar"
-          onClick={() => {
-            if (this.props.minimized) {
-              this.props.onSetMinimize(false);
-            }
-          }}
-        >
-          {title}
-          <div className="inboxsdk__mole_title_buttons">
-            <button
-              type="button"
-              style={{ display: this.props.minimized ? 'none' : '' }}
-              title="Minimize"
-              onClick={() => this.props.onSetMinimize(true)}
-            >
-              <img
-                srcSet="//ssl.gstatic.com/bt/C3341AA7A1A076756462EE2E5CD71C11/2x/btw_ic_minimize_white_18dp_2x.png 2x"
-                alt=""
-                aria-hidden="true"
-                src="//ssl.gstatic.com/bt/C3341AA7A1A076756462EE2E5CD71C11/1x/btw_ic_minimize_white_18dp.png"
-              />
-            </button>
-            <button
-              type="button"
-              style={{ display: this.props.minimized ? '' : 'none' }}
-              title="Expand"
-              onClick={() => this.props.onSetMinimize(false)}
-            >
-              <img
-                srcSet="//ssl.gstatic.com/bt/C3341AA7A1A076756462EE2E5CD71C11/2x/btw_ic_maximize_white_18dp_2x.png 2x"
-                alt=""
-                aria-hidden="true"
-                src="//ssl.gstatic.com/bt/C3341AA7A1A076756462EE2E5CD71C11/1x/btw_ic_maximize_white_18dp.png"
-              />
-            </button>
-            {titleButtons}
-            <button
-              type="button"
-              title="Close"
-              onClick={() => this.props.onClose()}
-            >
-              <img
-                srcSet="//ssl.gstatic.com/bt/C3341AA7A1A076756462EE2E5CD71C11/2x/btw_ic_close_white_12dp_2x.png 2x"
-                alt=""
-                aria-hidden="true"
-                src="//ssl.gstatic.com/bt/C3341AA7A1A076756462EE2E5CD71C11/1x/btw_ic_close_white_12dp.png"
-              />
-            </button>
-          </div>
-        </div>
-      );
+      }, title, /*#__PURE__*/_react.default.createElement("div", {
+        className: "inboxsdk__mole_title_buttons"
+      }, /*#__PURE__*/_react.default.createElement("button", {
+        type: "button",
+        style: {
+          display: this.props.minimized ? 'none' : ''
+        },
+        title: "Minimize",
+        onClick: () => this.props.onSetMinimize(true)
+      }, /*#__PURE__*/_react.default.createElement("img", {
+        srcSet: "//ssl.gstatic.com/bt/C3341AA7A1A076756462EE2E5CD71C11/2x/btw_ic_minimize_white_18dp_2x.png 2x",
+        alt: "",
+        "aria-hidden": "true",
+        src: "//ssl.gstatic.com/bt/C3341AA7A1A076756462EE2E5CD71C11/1x/btw_ic_minimize_white_18dp.png"
+      })), /*#__PURE__*/_react.default.createElement("button", {
+        type: "button",
+        style: {
+          display: this.props.minimized ? '' : 'none'
+        },
+        title: "Expand",
+        onClick: () => this.props.onSetMinimize(false)
+      }, /*#__PURE__*/_react.default.createElement("img", {
+        srcSet: "//ssl.gstatic.com/bt/C3341AA7A1A076756462EE2E5CD71C11/2x/btw_ic_maximize_white_18dp_2x.png 2x",
+        alt: "",
+        "aria-hidden": "true",
+        src: "//ssl.gstatic.com/bt/C3341AA7A1A076756462EE2E5CD71C11/1x/btw_ic_maximize_white_18dp.png"
+      })), titleButtons, /*#__PURE__*/_react.default.createElement("button", {
+        type: "button",
+        title: "Close",
+        onClick: () => this.props.onClose()
+      }, /*#__PURE__*/_react.default.createElement("img", {
+        srcSet: "//ssl.gstatic.com/bt/C3341AA7A1A076756462EE2E5CD71C11/2x/btw_ic_close_white_12dp_2x.png 2x",
+        alt: "",
+        "aria-hidden": "true",
+        src: "//ssl.gstatic.com/bt/C3341AA7A1A076756462EE2E5CD71C11/1x/btw_ic_close_white_12dp.png"
+      }))));
     }
-
-    return (
-      <div className="inboxsdk__mole_view_mid">
-        <div className="inboxsdk__mole_view_inner">
-          {titlebar}
-          <ElementContainer
-            className="inboxsdk__mole_view_content"
-            el={this.props.el}
-          />
-        </div>
-      </div>
-    );
+    return /*#__PURE__*/_react.default.createElement("div", {
+      className: "inboxsdk__mole_view_mid"
+    }, /*#__PURE__*/_react.default.createElement("div", {
+      className: "inboxsdk__mole_view_inner"
+    }, titlebar, /*#__PURE__*/_react.default.createElement(_ElementContainer.default, {
+      className: "inboxsdk__mole_view_content",
+      el: this.props.el
+    })));
   }
-}
+}