@inboxsdk/core 0.2.27 → 0.2.28-alpha.1

package/src/platform-implementation-js/dom-driver/inbox/views/inbox-thread-row-view.js

@@ -0,0 +1,413 @@
+/* @flow */
+
+import { defn } from 'ud';
+import updateIcon from '../../../driver-common/update-icon';
+import autoHtml from 'auto-html';
+import Kefir from 'kefir';
+import kefirBus from 'kefir-bus';
+import type { Bus } from 'kefir-bus';
+import kefirStopper from 'kefir-stopper';
+import kefirCast from 'kefir-cast';
+import BigNumber from 'bignumber.js';
+import InboxLabelView from './InboxLabelView';
+import InboxToolbarButtonView from './InboxToolbarButtonView';
+
+import type InboxDriver from '../inbox-driver';
+import type { Parsed } from '../detection/thread-row/parser';
+
+class InboxThreadRowView {
+  _element: HTMLElement;
+  _driver: InboxDriver;
+  _p: Parsed;
+  _userView: ?Object;
+  _eventStream: Bus<any> = kefirBus();
+  _stopper: Kefir.Observable<null>;
+  _isDestroyed: boolean = false;
+
+  constructor(element: HTMLElement, driver: InboxDriver, parsed: Parsed) {
+    this._element = element;
+    this._driver = driver;
+    this._p = parsed;
+
+    this._stopper = this._eventStream
+      .ignoreValues()
+      .beforeEnd(() => null)
+      .toProperty();
+  }
+
+  getEventStream(): Kefir.Observable<any> {
+    return this._eventStream;
+  }
+
+  getStopper(): Kefir.Observable<null> {
+    return this._stopper;
+  }
+
+  // keeping this here for now since the rest of the system expects it.
+  // in Gmail it's used to pass a ThreadRowView interface to addButton()
+  // onClick callbacks, but not sure if it will be needed in the end.
+  setUserView(userView: Object) {
+    this._userView = userView;
+  }
+
+  isSelected(): boolean {
+    if (!this._p.elements.checkbox) {
+      throw new Error('Did not find checkbox element');
+    }
+    return this._p.elements.checkbox.getAttribute('aria-checked') === 'true';
+  }
+
+  addToolbarButton(options: Object) {
+    const { toolbar } = this._p.elements;
+    if (!toolbar) {
+      throw new Error('could not find toolbar element');
+    }
+    toolbar.classList.add('inboxsdk__list_toolbar');
+    const button = new InboxToolbarButtonView(
+      {
+        ...options,
+        onClick: (event) => {
+          if (event.dropdown) {
+            toolbar.classList.add('inboxsdk__thread_row_force_toolbar_visible');
+            event.dropdown.once('destroy', () => {
+              toolbar.classList.remove(
+                'inboxsdk__thread_row_force_toolbar_visible'
+              );
+            });
+          }
+          if (options.onClick) options.onClick(event);
+        },
+      },
+      this._driver.getAppId(),
+      toolbar
+    );
+    this._stopper.takeUntilBy(button.getStopper()).onValue(() => {
+      button.destroy();
+    });
+    return button;
+  }
+
+  addAttachmentIcon(options: Object) {
+    throw new Error('Not supported in Inbox');
+  }
+
+  addButton(options: Object) {
+    throw new Error('Not supported in Inbox');
+  }
+
+  addActionButton(options: Object) {
+    throw new Error('not yet implemented');
+  }
+
+  addImage(icon: Object) {
+    if (this._isDestroyed) {
+      console.warn('addImage called on destroyed thread row'); //eslint-disable-line no-console
+      return;
+    }
+
+    const { labelParent } = this._p.elements;
+    if (!labelParent) throw new Error('Could not find label parent element');
+
+    const prop = kefirCast((Kefir: any), icon)
+      .takeUntilBy(this._stopper)
+      .toProperty();
+
+    let imageMod = null;
+
+    prop.onValue((iconDescriptor) => {
+      if (!iconDescriptor) {
+        if (imageMod) {
+          imageMod.remove();
+          imageMod = null;
+        }
+      } else {
+        if (!imageMod) {
+          imageMod = {
+            iconSettings: {},
+            iconWrapper: document.createElement('div'),
+            remove() {
+              this.iconWrapper.remove();
+            },
+          };
+          imageMod.iconWrapper.className = 'inboxsdk__thread_row_icon_wrapper';
+        }
+        const { iconSettings, iconWrapper } = imageMod;
+
+        updateIcon(
+          iconSettings,
+          iconWrapper,
+          false,
+          iconDescriptor.imageClass,
+          iconDescriptor.imageUrl
+        );
+
+        if (iconDescriptor.tooltip) {
+          iconWrapper.setAttribute('title', iconDescriptor.tooltip);
+        }
+
+        if (labelParent !== iconWrapper.parentElement) {
+          const threadLabels = labelParent.querySelectorAll(
+            '.inboxsdk__inbox_thread_row_label'
+          );
+          const insertionPoint =
+            threadLabels.length > 0
+              ? threadLabels[threadLabels.length - 1].nextElementSibling
+              : labelParent.firstChild;
+
+          labelParent.insertBefore(iconWrapper, insertionPoint);
+        }
+      }
+    });
+
+    this._stopper.onEnd(() => {
+      if (imageMod) {
+        imageMod.remove();
+      }
+    });
+  }
+
+  addLabel(label: Object) {
+    if (this._isDestroyed) {
+      console.warn('addLabel called on destroyed thread row'); //eslint-disable-line no-console
+      return;
+    }
+
+    const labelParentDiv = this._p.elements.labelParent;
+    if (!labelParentDiv) throw new Error('Could not find label parent element');
+
+    const prop: Kefir.Observable<?Object> = kefirCast(Kefir, label)
+      .takeUntilBy(this._stopper)
+      .toProperty();
+    let labelMod = null;
+
+    prop.onValue((labelDescriptor) => {
+      if (!labelDescriptor) {
+        if (labelMod) {
+          labelMod.remove();
+          labelMod = null;
+        }
+      } else {
+        if (!labelMod) {
+          const inboxLabelView = new InboxLabelView();
+          const el = inboxLabelView.getElement();
+          labelMod = {
+            inboxLabelView,
+            remove: el.remove.bind(el),
+          };
+        }
+
+        labelMod.inboxLabelView.updateLabelDescriptor(labelDescriptor);
+
+        if (
+          labelParentDiv !== labelMod.inboxLabelView.getElement().parentElement
+        ) {
+          const threadLabels = labelParentDiv.querySelectorAll(
+            '.inboxsdk__inbox_thread_row_label'
+          );
+          const insertionPoint =
+            threadLabels.length > 0
+              ? threadLabels[threadLabels.length - 1].nextElementSibling
+              : labelParentDiv.firstChild;
+
+          labelParentDiv.insertBefore(
+            labelMod.inboxLabelView.getElement(),
+            insertionPoint
+          );
+        }
+      }
+    });
+
+    this._stopper.onEnd(() => {
+      if (labelMod) {
+        labelMod.remove();
+      }
+    });
+  }
+
+  getDateString() {
+    throw new Error('Not supported in Inbox');
+  }
+
+  getSubject(): string {
+    if (!this._p.elements.subject) {
+      throw new Error('Failed to find subject');
+    }
+    return this._p.elements.subject.textContent;
+  }
+
+  getThreadID() {
+    throw new Error(
+      'Not supported in Inbox. Please use getThreadIDAsync() instead'
+    );
+  }
+
+  async getThreadIDAsync(): Promise<string> {
+    const { inboxThreadId } = this._p.attributes;
+    if (!inboxThreadId) {
+      throw new Error('Failed to find thread id');
+    }
+    if (/^thread-a:/.test(inboxThreadId)) {
+      this._driver.trackThreadRowIdCall(false, inboxThreadId);
+      // Get the inbox message id of any message in the thread, convert it to
+      // a gmail message id, and then use that id in a request
+      // to a gmail endpoint to get the id of the thread that message is in.
+      const inboxMessageId =
+        await this._driver.getInboxMessageIdForInboxThreadId(inboxThreadId);
+      const gmailMessageId =
+        await this._driver.getGmailMessageIdForSyncMessageId(inboxMessageId);
+
+      return await this._driver.getThreadIdFromMessageId(gmailMessageId);
+    } else {
+      this._driver.trackThreadRowIdCall(true, inboxThreadId);
+      const m = /\d+$/.exec(inboxThreadId);
+      if (!m) throw new Error('Should not happen');
+      return new BigNumber(m[0]).toString(16);
+    }
+  }
+
+  async getDraftID(): Promise<?string> {
+    const { isOnlyDraft, inboxThreadId } = this._p.attributes;
+
+    if (isOnlyDraft && inboxThreadId) {
+      const m = /\d+$/.exec(inboxThreadId);
+      if (!m) throw new Error('Should not happen');
+      return m[0];
+    } else {
+      return null;
+    }
+  }
+
+  getVisibleDraftCount(): number {
+    const { visibleDraftCount } = this._p.attributes;
+    if (typeof visibleDraftCount !== 'number')
+      throw new Error('Failed to find visible draft count');
+    return visibleDraftCount;
+  }
+
+  getVisibleMessageCount(): number {
+    const { visibleMessageCount } = this._p.attributes;
+    if (typeof visibleMessageCount !== 'number')
+      throw new Error('Failed to find visible message count');
+    return visibleMessageCount;
+  }
+
+  getContacts(): Contact[] {
+    const { contacts } = this._p.attributes;
+    if (!Array.isArray(contacts)) throw new Error('Failed to find contacts');
+    return contacts;
+  }
+
+  replaceDate(options: Object) {
+    throw new Error('Not supported in Inbox');
+  }
+
+  replaceDraftLabel(label: Object) {
+    if (this._isDestroyed) {
+      console.warn('addLabel called on destroyed thread row'); //eslint-disable-line no-console
+      return;
+    }
+
+    // We don't want to replace draft labels on messages without drafts
+    if (this._p.attributes.visibleDraftCount === 0) return;
+
+    const { recipientParent, messageCountParent } = this._p.elements;
+    if (!recipientParent || !messageCountParent)
+      throw new Error('Could not find necessary parent elements');
+
+    const prop: Kefir.Observable<?Object> = kefirCast(Kefir, label)
+      .takeUntilBy(this._stopper)
+      .toProperty();
+    let labelMod = null;
+
+    prop.onValue((labelDescriptor) => {
+      if (!labelDescriptor) {
+        if (labelMod) {
+          labelMod.remove();
+          labelMod = null;
+        }
+      } else {
+        const { text, count } = labelDescriptor;
+        if (!labelMod) {
+          labelMod = {
+            countEl: document.createElement('span'),
+            draftEl: document.createElement('span'),
+            remove() {
+              this.countEl.remove();
+              this.draftEl.remove();
+
+              recipientParent.classList.remove(
+                'inboxsdk__thread_row_draft_label_replaced'
+              );
+              messageCountParent.classList.remove(
+                'inboxsdk__thread_row_draft_count_replaced'
+              );
+
+              if (
+                !messageCountParent.querySelector(
+                  'span:not(.inboxsdk__thread_row_custom_draft_count)'
+                )
+              ) {
+                ((messageCountParent: any): HTMLElement).style.display = 'none';
+              }
+            },
+          };
+
+          labelMod.draftEl.className =
+            'inboxsdk__thread_row_custom_draft_label';
+          labelMod.countEl.className =
+            'inboxsdk__thread_row_custom_draft_count';
+
+          recipientParent.classList.add(
+            'inboxsdk__thread_row_draft_label_replaced'
+          );
+        }
+
+        labelMod.draftEl.textContent = text;
+
+        if (recipientParent !== labelMod.draftEl.parentElement) {
+          recipientParent.appendChild(labelMod.draftEl);
+        }
+
+        const hasExistingCountEl = messageCountParent.querySelector(
+          'span:not(.inboxsdk__thread_row_custom_draft_count)'
+        );
+
+        if (count && count > 1) {
+          messageCountParent.classList.add(
+            'inboxsdk__thread_row_draft_count_replaced'
+          );
+          ((messageCountParent: any): HTMLElement).style.display = 'inline';
+
+          labelMod.countEl.innerHTML = hasExistingCountEl
+            ? autoHtml`(${count})`
+            : autoHtml`&nbsp;(${count})`;
+
+          if (messageCountParent !== labelMod.countEl.parentElement) {
+            messageCountParent.appendChild(labelMod.countEl);
+          }
+        } else {
+          messageCountParent.classList.remove(
+            'inboxsdk__thread_row_draft_count_replaced'
+          );
+          if (!hasExistingCountEl) {
+            ((messageCountParent: any): HTMLElement).style.display = 'none';
+          }
+          labelMod.countEl.remove();
+        }
+      }
+
+      this._stopper.onEnd(() => {
+        if (labelMod) {
+          labelMod.remove();
+        }
+      });
+    });
+  }
+
+  destroy() {
+    this._isDestroyed = true;
+    this._eventStream.end();
+  }
+}
+
+export default defn(module, InboxThreadRowView);

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

@@ -0,0 +1,308 @@
+/* @flow */
+
+import find from 'lodash/find';
+import { defn } from 'ud';
+import autoHtml from 'auto-html';
+import Kefir from 'kefir';
+import kefirBus from 'kefir-bus';
+import type { Bus } from 'kefir-bus';
+import kefirStopper from 'kefir-stopper';
+import BigNumber from 'bignumber.js';
+import delayAsap from '../../../lib/delay-asap';
+import idMap from '../../../lib/idMap';
+import querySelector from '../../../lib/dom/querySelectorOrFail';
+import makeMutationObserverChunkedStream from '../../../lib/dom/make-mutation-observer-chunked-stream';
+import type InboxDriver from '../inbox-driver';
+import type InboxMessageView from './inbox-message-view';
+import type ContentPanelViewDriver from '../../../driver-common/sidebar/ContentPanelViewDriver';
+import SimpleElementView from '../../../views/SimpleElementView';
+import CustomMessageView from '../../../views/conversations/custom-message-view';
+import parser from '../detection/thread/parser';
+import type { Parsed } from '../detection/thread/parser';
+import type { CustomMessageDescriptor } from '../../../views/conversations/custom-message-view';
+
+class InboxThreadView {
+  _element: HTMLElement;
+  _driver: InboxDriver;
+  _p: Parsed;
+  _eventStream: Bus<any> = kefirBus();
+  _messageViews: InboxMessageView[] = [];
+  _receivedMessageView = kefirStopper();
+  _stopper: Kefir.Observable<null>;
+  _ready: Kefir.Observable<void>;
+  _sidebarPanels: Set<ContentPanelViewDriver> = new Set();
+
+  constructor(element: HTMLElement, driver: InboxDriver, parsed: Parsed) {
+    this._element = element;
+    this._driver = driver;
+    this._p = parsed;
+
+    this._stopper = this._eventStream
+      .ignoreValues()
+      .beforeEnd(() => null)
+      .toProperty();
+
+    this._driver.getThreadViewElementsMap().set(this._element, this);
+
+    this._ready = this._receivedMessageView
+      .flatMap(() => delayAsap())
+      .onValue(() => {
+        this._p = parser(this._element);
+      })
+      .toProperty();
+
+    if (this.isLoadingStub()) {
+      makeMutationObserverChunkedStream(this._element, {
+        attributes: true,
+        attributeFilter: ['aria-busy'],
+      })
+        .takeUntilBy(this._stopper)
+        .onValue(() => {
+          if (!this.isLoadingStub()) {
+            this.destroy();
+          }
+        });
+    }
+  }
+
+  isLoadingStub(): boolean {
+    return this._element.getAttribute('aria-busy') === 'true';
+  }
+
+  getEventStream(): Kefir.Observable<any> {
+    return this._eventStream;
+  }
+
+  getStopper(): Kefir.Observable<null> {
+    return this._stopper;
+  }
+
+  addMessageViewDriver(messageView: InboxMessageView) {
+    this._messageViews.push(messageView);
+    this._eventStream.plug(
+      messageView
+        .getEventStream()
+        .filter((event) => event.eventName === 'contactHover')
+    );
+    messageView
+      .getStopper()
+      .takeUntilBy(this._stopper)
+      .onValue(() => {
+        this._messageViews = this._messageViews.filter(
+          (m) => m !== messageView
+        );
+      });
+    this._receivedMessageView.destroy();
+  }
+
+  getMessageViewDrivers() {
+    return this._messageViews;
+  }
+
+  getToolbarElement(): HTMLElement {
+    if (!this._p.elements.toolbar) {
+      throw new Error('Failed to find toolbar');
+    }
+    return this._p.elements.toolbar;
+  }
+
+  getSubject(): string {
+    if (!this._p.elements.heading) {
+      throw new Error('Failed to find subject');
+    }
+    return this._p.elements.heading.textContent;
+  }
+
+  getThreadID(): string {
+    const { inboxThreadId } = this._p.attributes;
+    if (!inboxThreadId) {
+      throw new Error('Failed to find thread id');
+    }
+    if (/^msg-a:/.test(inboxThreadId)) {
+      // eslint-disable-next-line no-console
+      console.warn(
+        'ThreadView.getThreadID() returned an incorrect thread ID. This method will be deprecated soon. Use getThreadIDAsync() instead which does not have this problem.'
+      );
+    }
+    const m = /\d+$/.exec(inboxThreadId);
+    if (!m) throw new Error('Should not happen');
+    return new BigNumber(m[0]).toString(16);
+  }
+
+  async getThreadIDAsync(): Promise<string> {
+    const { inboxThreadId } = this._p.attributes;
+    if (!inboxThreadId) {
+      throw new Error('Failed to find message id');
+    }
+    if (/^thread-a:/.test(inboxThreadId)) {
+      // Get the id of any message in the thread, and then use that id in a request
+      // to a gmail endpoint to get the id of the thread that message is in.
+      const firstMessage = this._messageViews[0];
+      if (!firstMessage) throw new Error('Should not happen');
+      const messageId = await firstMessage.getMessageIDAsync();
+
+      return await this._driver.getThreadIdFromMessageId(messageId);
+    } else {
+      const m = /\d+$/.exec(inboxThreadId);
+      if (!m) throw new Error('Should not happen');
+      return new BigNumber(m[0]).toString(16);
+    }
+  }
+
+  registerHiddenCustomMessageNoticeProvider(
+    provider: (
+      numberCustomMessagesHidden: number,
+      numberNativeMessagesHidden: ?number,
+      unmountPromise: Promise<void>
+    ) => HTMLElement
+  ) {
+    throw new Error('not supported');
+  }
+
+  addCustomMessage(
+    descriptorStream: Kefir.Observable<CustomMessageDescriptor>
+  ): CustomMessageView {
+    throw new Error('not supported');
+  }
+
+  addSidebarContentPanel(descriptor: Kefir.Observable<Object>) {
+    const panel = this._driver
+      .getAppSidebarView()
+      .addSidebarContentPanel(descriptor);
+    this._sidebarPanels.add(panel);
+    panel.getStopper().onValue(() => {
+      this._sidebarPanels.delete(panel);
+    });
+    this._stopper.takeUntilBy(panel.getStopper()).onValue(() => {
+      panel.remove();
+    });
+
+    descriptor
+      .takeUntilBy(this._stopper)
+      .takeUntilBy(panel.getStopper())
+      .take(1)
+      .onValue((descriptor) => {
+        const { stickyHeading } = this._p.elements;
+        if (!stickyHeading) return;
+
+        let iconArea = stickyHeading.querySelector(
+          '.' + idMap('sidebar_iconArea')
+        );
+        if (!iconArea) {
+          const _iconArea = (iconArea = document.createElement('div'));
+          iconArea.className = idMap('sidebar_iconArea');
+
+          this._driver
+            .getAppSidebarView()
+            .getOpenOrOpeningStream()
+            .takeUntilBy(this._stopper)
+            .onValue((open) => {
+              _iconArea.style.display = open ? 'none' : '';
+            });
+
+          stickyHeading.appendChild(iconArea);
+        }
+
+        const appName =
+          descriptor.appName ||
+          this._driver.getOpts().appName ||
+          descriptor.title;
+        const appIconUrl =
+          descriptor.appIconUrl ||
+          this._driver.getOpts().appIconUrl ||
+          descriptor.iconUrl;
+
+        // If there's an existing button for the app, then just increment its
+        // data-count attribute instead of adding a new button.
+        const existingButtonContainer = find(
+          iconArea.querySelectorAll('.' + idMap('sidebar_button_container')),
+          (el) => {
+            const button = el.querySelector('button');
+            if (!button || button.title !== appName) return false;
+            const img = button.querySelector('img');
+            if (!img || img.src !== appIconUrl) return false;
+            return true;
+          }
+        );
+
+        let container;
+        if (existingButtonContainer) {
+          const currentCount =
+            Number(existingButtonContainer.getAttribute('data-count')) || 1;
+          existingButtonContainer.setAttribute('data-count', currentCount + 1);
+          container = existingButtonContainer;
+        } else {
+          container = document.createElement('div');
+          container.className = idMap('sidebar_button_container');
+          container.innerHTML = autoHtml`
+            <button class="inboxsdk__button_icon" type="button" title="${appName}">
+              <img class="inboxsdk__button_iconImg" src="${appIconUrl}">
+            </button>
+          `;
+          querySelector(container, 'button').addEventListener(
+            'click',
+            (event: MouseEvent) => {
+              event.stopPropagation();
+              this._driver.getAppSidebarView().open();
+              panel.scrollIntoView();
+            },
+            true
+          );
+          iconArea.appendChild(container);
+        }
+
+        panel.getStopper().onValue(() => {
+          const currentCount = Number(container.getAttribute('data-count'));
+          if (currentCount <= 1) {
+            container.remove();
+          } else if (currentCount === 2) {
+            container.removeAttribute('data-count');
+          } else {
+            container.setAttribute('data-count', String(currentCount - 1));
+          }
+        });
+      });
+
+    return panel;
+  }
+
+  removePanels() {
+    this._sidebarPanels.forEach((panel) => {
+      panel.remove();
+    });
+  }
+
+  addNoticeBar(): SimpleElementView {
+    const el = document.createElement('div');
+    el.className = idMap('thread_noticeBar');
+
+    const { heading } = this._p.elements;
+    if (!heading) {
+      throw new Error('Failed to find subject');
+    }
+
+    heading.insertAdjacentElement('afterend', el);
+    const view = new SimpleElementView(el);
+
+    this._stopper
+      .takeUntilBy(Kefir.fromEvents(view, 'destroy'))
+      .onValue(() => view.destroy());
+
+    return view;
+  }
+
+  addLabel(): SimpleElementView {
+    throw new Error('not supported');
+  }
+
+  getReadyStream() {
+    return this._ready;
+  }
+
+  destroy() {
+    this._driver.getThreadViewElementsMap().delete(this._element);
+    this._eventStream.end();
+  }
+}
+
+export default defn(module, InboxThreadView);