@inboxsdk/core 1.1.0 → 1.1.1

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

@@ -1,78 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _ud = require("ud");
-var _isEqual = _interopRequireDefault(require("lodash/isEqual"));
-var _updateIcon = _interopRequireDefault(require("../../../driver-common/update-icon"));
-var _querySelectorOrFail = _interopRequireDefault(require("../../../lib/dom/querySelectorOrFail"));
-class InboxLabelView {
-  constructor() {
-    let opts = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-    this._element = document.createElement('div');
-    this._element.className = 'inboxsdk__inbox_thread_row_label ' + (opts.classes || []).join(' ');
-    this._element.innerHTML = '<span></span>';
-    this._labelDescriptor = {};
-    this._iconSettings = {};
-  }
-  getElement() {
-    return this._element;
-  }
-  updateLabelDescriptor(labelDescriptor) {
-    this._handleNewLabelDescriptor(labelDescriptor);
-  }
-  _handleNewLabelDescriptor(labelDescriptor) {
-    if (!labelDescriptor) {
-      this._labelDescriptor = {};
-      return;
-    }
-    labelDescriptor = Object.assign({
-      foregroundColor: 'rgb(102, 102, 102)',
-      //dark grey
-      backgroundColor: 'rgb(221, 221, 221)' //light grey
-    }, labelDescriptor);
-    if ((0, _isEqual.default)(this._labelDescriptor, labelDescriptor)) {
-      return;
-    }
-    (0, _updateIcon.default)(this._iconSettings, this._element, false, labelDescriptor.iconClass, labelDescriptor.iconUrl);
-    if (labelDescriptor.iconClass || labelDescriptor.iconUrl) {
-      this._element.classList.add('inboxsdk__label_has_icon');
-    } else {
-      this._element.classList.remove('inboxsdk__label_has_icon');
-    }
-    this._updateBackgroundColor(labelDescriptor.backgroundColor);
-    this._updateForegroundColor(labelDescriptor.foregroundColor);
-    this._updateIconBackgroundColor(labelDescriptor.iconBackgroundColor);
-    this._updateTitle(labelDescriptor.title);
-    this._labelDescriptor = labelDescriptor;
-  }
-  _updateBackgroundColor(backgroundColor) {
-    if (this._labelDescriptor.backgroundColor === backgroundColor) {
-      return;
-    }
-    this._element.style.backgroundColor = backgroundColor;
-  }
-  _updateForegroundColor(foregroundColor) {
-    if (this._labelDescriptor.foregroundColor === foregroundColor) {
-      return;
-    }
-    this._element.style.color = foregroundColor;
-  }
-  _updateIconBackgroundColor(iconBackgroundColor) {
-    const icon = this.getElement().querySelector('.inboxsdk__button_icon');
-    if (icon) {
-      icon.style.backgroundColor = iconBackgroundColor || '';
-    }
-  }
-  _updateTitle(title) {
-    if (this._labelDescriptor.title === title) {
-      return;
-    }
-    (0, _querySelectorOrFail.default)(this._element, 'span').textContent = title;
-  }
-}
-var _default = (0, _ud.defn)(module, InboxLabelView);
-exports.default = _default;

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

@@ -1,296 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-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 {
-  _stopper = (0, _kefirStopper.default)();
-  _eventStream = (0, _kefirBus.default)();
-  constructor(options, driver) {
-    this;
-    this._options = options;
-    this._driver = driver;
-    this._element = document.createElement('div');
-    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.style.zIndex = '1';
-    _kefir.default.fromEvents(this._element, 'click').takeUntilBy(this._stopper).onValue(event => {
-      (0, _reemitClickEventForReact.default)(event);
-    });
-  }
-  _render() {
-    _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) {
-      throw new Error('show was called twice');
-    }
-    const container = document.getElementById('OPOhoe');
-    if (!container) {
-      const err = new Error('could find element to insert moleview into');
-      this._driver.getLogger().error(err);
-      throw err;
-    }
-    container.insertBefore(this._element, container.firstElementChild);
-
-    // The extension might not populate the element until after creating the
-    // mole, so calculate the width after that.
-    (0, _asap.default)(() => {
-      this._setupWidth();
-    });
-
-    // Keep the mole as the first item in the list
-    (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.default.fromEvents(this._element, 'click').merge((0, _fromEventTargetCapture.default)(this._element, 'focus')).takeUntilBy(this._stopper).onValue(() => {
-      this._bringToFront();
-    });
-  }
-  _setupWidth() {
-    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.
-    (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) {
-        this._element.style.paddingLeft = naturalWidth + 'px';
-      } else {
-        this._element.style.paddingLeft = '';
-      }
-    });
-  }
-  _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 (selfIndex < 0) throw new Error('should not happen');
-    const count = container.children.length;
-    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'));
-    }
-
-    // Put all the moles into the proper order.
-    Array.prototype.forEach.call(container.children, (child, i) => {
-      if (!child.classList.contains('inboxsdk__mole_view')) return;
-      if (child !== this._element) {
-        child.classList.remove('inboxsdk__mole_at_front');
-      }
-      const zIndexedChild = (0, _find.default)(child.children, child => child.style.zIndex);
-      if (!zIndexedChild) return;
-      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
-    // mole is brought to the front. If a compose was brought to the front, then
-    // 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.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) {
-    this._title = String(title);
-    this._render();
-  }
-  setMinimized(minimized) {
-    if (minimized) {
-      this._element.classList.add('inboxsdk__minimized');
-      this._render();
-      this._eventStream.emit({
-        eventName: 'minimize'
-      });
-    } else {
-      this._element.classList.remove('inboxsdk__minimized');
-      this._render();
-      this._eventStream.emit({
-        eventName: 'restore'
-      });
-    }
-  }
-  getMinimized() {
-    return this._element.classList.contains('inboxsdk__minimized');
-  }
-  getEventStream() {
-    return this._eventStream;
-  }
-  destroy() {
-    _reactDom.default.unmountComponentAtNode(this._element);
-    this._stopper.destroy();
-    this._eventStream.end();
-    this._element.remove();
-  }
-}
-function isComposeParentElement(el) {
-  return !el.classList.contains('inboxsdk__mole_view') && el.hasAttribute('jsaction');
-}
-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 = /*#__PURE__*/_react.default.createElement(_ElementContainer.default, {
-          className: "inboxsdk__mole_view_title",
-          el: this.props.minimizedTitleEl
-        });
-      } else if (this.props.titleEl) {
-        title = /*#__PURE__*/_react.default.createElement(_ElementContainer.default, {
-          className: "inboxsdk__mole_view_title",
-          el: this.props.titleEl
-        });
-      } else {
-        title = /*#__PURE__*/_react.default.createElement("div", {
-          className: "inboxsdk__mole_view_title"
-        }, this.props.title);
-      }
-      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);
-          }
-        }
-      }, 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 /*#__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
-    })));
-  }
-}

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

@@ -1,91 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _ud = require("ud");
-var _includes = _interopRequireDefault(require("lodash/includes"));
-var _kefir = _interopRequireDefault(require("kefir"));
-var _kefirStopper = _interopRequireDefault(require("kefir-stopper"));
-var _fromEventTargetCapture = _interopRequireDefault(require("../../../lib/from-event-target-capture"));
-var _dropdownView = _interopRequireDefault(require("../../../widgets/buttons/dropdown-view"));
-var _inboxDropdownView = _interopRequireDefault(require("./inbox-dropdown-view"));
-var _insertElementInOrder = _interopRequireDefault(require("../../../lib/dom/insert-element-in-order"));
-let insertionOrderHint = 0;
-class InboxToolbarButtonView {
-  _stopper = (0, _kefirStopper.default)();
-  constructor(buttonDescriptor, groupOrderHint, container) {
-    const buttonEl = this._buttonEl = document.createElement('li');
-    buttonEl.setAttribute('role', 'button');
-    buttonEl.setAttribute('data-insertion-order-hint', String(insertionOrderHint++));
-    buttonEl.setAttribute('data-group-order-hint', groupOrderHint);
-    buttonEl.tabIndex = 0;
-    buttonEl.className = 'inboxsdk__button_icon';
-    const img = document.createElement('img');
-    img.className = 'inboxsdk__button_iconImg';
-    let onClick = ignored => {};
-    let hasDropdown = false;
-    let dropdown = null;
-    _kefir.default.merge([_kefir.default.fromEvents(buttonEl, 'click'), (0, _fromEventTargetCapture.default)(buttonEl, 'keyup').filter(e => (0, _includes.default)([32 /*space*/, 13 /*enter*/], e.which))]).onValue(event => {
-      event.preventDefault();
-      event.stopPropagation();
-      if (hasDropdown) {
-        if (dropdown) {
-          dropdown.close();
-          return;
-        } else {
-          this._buttonEl.classList.add('inboxsdk__active');
-          dropdown = new _dropdownView.default(new _inboxDropdownView.default(), buttonEl);
-          dropdown.setPlacementOptions({
-            position: 'bottom',
-            hAlign: 'right',
-            vAlign: 'top',
-            buffer: 10
-          });
-          dropdown.on('destroy', () => {
-            this._buttonEl.classList.remove('inboxsdk__active');
-            dropdown = null;
-          });
-        }
-      }
-      onClick({
-        dropdown
-      });
-    });
-    let lastOrderHint = null;
-    {
-      hasDropdown = buttonDescriptor.hasDropdown;
-      buttonEl.title = buttonDescriptor.title;
-      buttonEl.className = 'inboxsdk__button_icon ' + (buttonDescriptor.iconClass || '');
-      onClick = buttonDescriptor.onClick;
-      if (buttonDescriptor.iconUrl) {
-        img.src = buttonDescriptor.iconUrl;
-        buttonEl.appendChild(img);
-      } else {
-        img.remove();
-      }
-      const orderHint = buttonDescriptor.orderHint || 0;
-      if (lastOrderHint !== orderHint) {
-        lastOrderHint = orderHint;
-        buttonEl.setAttribute('data-order-hint', String(orderHint));
-        (0, _insertElementInOrder.default)(container, buttonEl, undefined, true);
-      }
-    }
-    this._stopper.onValue(() => {
-      buttonEl.remove();
-      if (dropdown) {
-        dropdown.close();
-      }
-    });
-  }
-  destroy() {
-    this._stopper.destroy();
-  }
-  getStopper() {
-    return this._stopper;
-  }
-}
-var _default = (0, _ud.defn)(module, InboxToolbarButtonView);
-exports.default = _default;

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

@@ -1,53 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _ud = require("ud");
-var _kefir = _interopRequireDefault(require("kefir"));
-var _kefirStopper = _interopRequireDefault(require("kefir-stopper"));
-var _InboxToolbarButtonView = _interopRequireDefault(require("./InboxToolbarButtonView"));
-class InboxToolbarView {
-  _stopper = (0, _kefirStopper.default)();
-  constructor(el, driver, inboxThreadView) {
-    this._el = el;
-    this._driver = driver;
-    this._inboxThreadView = inboxThreadView;
-    this._el.classList.add('inboxsdk__list_toolbar');
-  }
-  getStopper() {
-    return this._stopper;
-  }
-  destroy() {
-    this._stopper.destroy();
-  }
-  getThreadRowViewDrivers() {
-    return this._driver.getThreadRowViewDriverLiveSet().values();
-  }
-  getRouteViewDriver() {
-    return this._driver.getCurrentRouteViewDriver();
-  }
-  isForRowList() {
-    return this._inboxThreadView == null;
-  }
-  isForThread() {
-    return this._inboxThreadView != null;
-  }
-  getThreadViewDriver() {
-    if (!this._inboxThreadView) {
-      throw new Error('this toolbarview is not for a thread');
-    }
-    return this._inboxThreadView;
-  }
-  addButton(buttonDescriptor, id) {
-    const button = new _InboxToolbarButtonView.default(buttonDescriptor, this._driver.getAppId(), this._el);
-    this._stopper.takeUntilBy(button.getStopper()).onValue(() => {
-      button.destroy();
-    });
-    return button;
-  }
-}
-var _default = (0, _ud.defn)(module, InboxToolbarView);
-exports.default = _default;