@inboxsdk/core 0.2.28-alpha.0 → 0.2.28-alpha.1

package/src/platform-implementation-js/dom-driver/inbox/setupRouteViewDriverStream.test.js

@@ -0,0 +1,94 @@
+/* @flow */
+
+jest.mock('./getSidebarClassnames');
+
+import _ from 'lodash';
+import delay from 'pdelay';
+import Kefir from 'kefir';
+import kefirBus from 'kefir-bus';
+import InboxRouteView from './views/inbox-route-view';
+import InboxCustomRouteView from './views/inbox-custom-route-view';
+import InboxDummyRouteView from './views/inbox-dummy-route-view';
+
+import setupRouteViewDriverStream from './setupRouteViewDriverStream';
+
+const stopper = kefirBus();
+afterEach(() => {
+  stopper.emit(null);
+});
+
+function makeMockDriver(): Object {
+  return {
+    getStopper: _.constant(stopper),
+    getCustomRouteIDs: _.constant(new Set()),
+    showNativeRouteView: jest.fn(),
+  };
+}
+
+test('test', async () => {
+  const items = [];
+  const driver = makeMockDriver();
+  driver.getCustomRouteIDs().add('foo/:id');
+  driver.getCustomRouteIDs().add('bar/:id/blah');
+  setupRouteViewDriverStream(driver)
+    .takeUntilBy(stopper)
+    .onValue((item) => {
+      items.push(item);
+    });
+
+  expect(items.length).toBe(1);
+  expect(items[0]).toBeInstanceOf(InboxDummyRouteView);
+
+  const firstStopper = jest.fn();
+  items[0].getStopper().onValue(firstStopper);
+  expect(firstStopper).toHaveBeenCalledTimes(0);
+
+  document.dispatchEvent(
+    new CustomEvent('inboxSDKpushState', {
+      bubbles: false,
+      cancelable: false,
+      detail: {
+        __test_url: 'https://inbox.google.com/u/0/snoozed',
+        args: [
+          '%5B1%2C%5B%5B11%2C0%2Cfalse%2Cnull%2Cnull%2C0%5D%5D%5D',
+          '',
+          '/u/0/snoozed',
+        ],
+      },
+    })
+  );
+
+  expect(items.length).toBe(2);
+  expect(items[1]).toBeInstanceOf(InboxDummyRouteView);
+  expect(firstStopper).toHaveBeenCalledTimes(1);
+  expect(driver.showNativeRouteView).toHaveBeenCalledTimes(2);
+
+  // TODO test breaks here because jest+jsdom now emits popstate event along with HashChangeEvent.
+  // Might be real bug here.
+  if (true) return; // eslint-disable-line
+  document.location.hash = '#bar/123/blah';
+  await delay(1);
+  expect(items.length).toBe(3);
+  expect(items[2]).toBeInstanceOf(InboxCustomRouteView);
+  expect(items[2].getRouteID()).toBe('bar/:id/blah');
+  expect(items[2].getParams()).toEqual({ id: '123' });
+  expect(driver.showNativeRouteView).toHaveBeenCalledTimes(2);
+
+  document.dispatchEvent(
+    new CustomEvent('inboxSDKpushState', {
+      bubbles: false,
+      cancelable: false,
+      detail: {
+        __test_url: 'https://inbox.google.com/u/0/done',
+        args: [
+          '%5B1%2C%5B%5B2%2C0%2Cfalse%2Cnull%2Cnull%2C0%5D%5D%5D',
+          '',
+          '/u/0/done',
+        ],
+      },
+    })
+  );
+
+  expect(items.length).toBe(4);
+  expect(items[3]).toBeInstanceOf(InboxDummyRouteView);
+});

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

@@ -0,0 +1,103 @@
+/* @flow */
+
+import { defn } from 'ud';
+import isEqual from 'lodash/isEqual';
+import updateIcon from '../../../driver-common/update-icon';
+import querySelector from '../../../lib/dom/querySelectorOrFail';
+
+class InboxLabelView {
+  _element: HTMLElement;
+  _labelDescriptor: Object;
+  _iconSettings: Object;
+
+  constructor(opts: { classes?: ?(string[]) } = {}) {
+    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(): HTMLElement {
+    return this._element;
+  }
+
+  updateLabelDescriptor(labelDescriptor: ?Object) {
+    this._handleNewLabelDescriptor(labelDescriptor);
+  }
+
+  _handleNewLabelDescriptor(labelDescriptor: ?Object) {
+    if (!labelDescriptor) {
+      this._labelDescriptor = {};
+      return;
+    }
+
+    labelDescriptor = Object.assign(
+      {
+        foregroundColor: 'rgb(102, 102, 102)', //dark grey
+        backgroundColor: 'rgb(221, 221, 221)', //light grey
+      },
+      labelDescriptor
+    );
+
+    if (isEqual(this._labelDescriptor, labelDescriptor)) {
+      return;
+    }
+
+    updateIcon(
+      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: string) {
+    if (this._labelDescriptor.backgroundColor === backgroundColor) {
+      return;
+    }
+
+    this._element.style.backgroundColor = backgroundColor;
+  }
+
+  _updateForegroundColor(foregroundColor: string) {
+    if (this._labelDescriptor.foregroundColor === foregroundColor) {
+      return;
+    }
+
+    this._element.style.color = foregroundColor;
+  }
+
+  _updateIconBackgroundColor(iconBackgroundColor: ?string) {
+    const icon = this.getElement().querySelector('.inboxsdk__button_icon');
+    if (icon) {
+      icon.style.backgroundColor = iconBackgroundColor || '';
+    }
+  }
+
+  _updateTitle(title: string) {
+    if (this._labelDescriptor.title === title) {
+      return;
+    }
+
+    querySelector(this._element, 'span').textContent = title;
+  }
+}
+
+export default defn(module, InboxLabelView);

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

@@ -0,0 +1,400 @@
+/* @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';
+
+class InboxMoleViewDriver {
+  _driver: InboxDriver;
+  _options: MoleOptions;
+  _stopper = kefirStopper();
+  _eventStream = kefirBus();
+  _element: HTMLElement;
+  _title: string;
+
+  constructor(options: MoleOptions, driver: InboxDriver) {
+    (this: MoleViewDriver);
+    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: any).style.zIndex = '1';
+
+    Kefir.fromEvents(this._element, 'click')
+      .takeUntilBy(this._stopper)
+      .onValue((event) => {
+        reemitClickEvent(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
+    );
+  }
+  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.
+    asap(() => {
+      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, {
+      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();
+      });
+  }
+  _setupWidth() {
+    const naturalWidth = querySelector(
+      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(() => {
+      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 = find(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 = find(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.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';
+          });
+        }
+      });
+  }
+  setTitle(title: string) {
+    this._title = String(title);
+    this._render();
+  }
+  setMinimized(minimized: boolean) {
+    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(): Kefir.Observable<Object> {
+    return this._eventStream;
+  }
+  destroy() {
+    ReactDOM.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')
+  );
+}
+
+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> {
+  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}
+          />
+        );
+      } else if (this.props.titleEl) {
+        title = (
+          <ElementContainer
+            className="inboxsdk__mole_view_title"
+            el={this.props.titleEl}
+          />
+        );
+      } else {
+        title = (
+          <div className="inboxsdk__mole_view_title">{this.props.title}</div>
+        );
+      }
+
+      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>
+          );
+        }
+      );
+
+      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>
+      );
+    }
+
+    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>
+    );
+  }
+}

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

@@ -0,0 +1,105 @@
+/* @flow */
+
+import { defn } from 'ud';
+import includes from 'lodash/includes';
+import Kefir from 'kefir';
+import kefirStopper from 'kefir-stopper';
+import fromEventTargetCapture from '../../../lib/from-event-target-capture';
+import DropdownView from '../../../widgets/buttons/dropdown-view';
+import InboxDropdownView from './inbox-dropdown-view';
+import insertElementInOrder from '../../../lib/dom/insert-element-in-order';
+
+let insertionOrderHint: number = 0;
+
+class InboxToolbarButtonView {
+  _stopper = kefirStopper();
+  _buttonEl: HTMLElement;
+
+  constructor(
+    buttonDescriptor: Object,
+    groupOrderHint: string,
+    container: HTMLElement
+  ) {
+    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.merge([
+      Kefir.fromEvents(buttonEl, 'click'),
+      fromEventTargetCapture(buttonEl, 'keyup').filter((e) =>
+        includes([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(new InboxDropdownView(), 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));
+        insertElementInOrder(container, buttonEl, undefined, true);
+      }
+    }
+
+    this._stopper.onValue(() => {
+      buttonEl.remove();
+      if (dropdown) {
+        dropdown.close();
+      }
+    });
+  }
+
+  destroy() {
+    this._stopper.destroy();
+  }
+
+  getStopper(): Kefir.Observable<null> {
+    return this._stopper;
+  }
+}
+
+export default defn(module, InboxToolbarButtonView);