@inboxsdk/core 0.2.28-alpha.5 → 0.2.28

package/src/platform-implementation-js/dom-driver/gmail/views/gmail-collapsible-section-view.js

@@ -1,43 +1,56 @@
-"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 _ud = require("ud");
-var _escape = _interopRequireDefault(require("lodash/escape"));
-var _kefir = _interopRequireDefault(require("kefir"));
-var _kefirBus = _interopRequireDefault(require("kefir-bus"));
-var _defer = _interopRequireDefault(require("../../../../common/defer"));
-var _autoHtml = _interopRequireDefault(require("auto-html"));
-var _querySelectorOrFail = _interopRequireDefault(require("../../../lib/dom/querySelectorOrFail"));
-var _inboxDropdownButtonView = _interopRequireDefault(require("../widgets/buttons/inbox-dropdown-button-view"));
-var _gmailDropdownView = _interopRequireDefault(require("../widgets/gmail-dropdown-view"));
-var _dropdownButtonViewController = _interopRequireDefault(require("../../../widgets/buttons/dropdown-button-view-controller"));
+/* @flow */
+
+import { defn } from 'ud';
+import escape from 'lodash/escape';
+import Kefir from 'kefir';
+import kefirBus from 'kefir-bus';
+import type { Bus } from 'kefir-bus';
+import defer from '../../../../common/defer';
+import autoHtml from 'auto-html';
+
+import querySelector from '../../../lib/dom/querySelectorOrFail';
+import InboxDropdownButtonView from '../widgets/buttons/inbox-dropdown-button-view';
+import GmailDropdownView from '../widgets/gmail-dropdown-view';
+import DropdownButtonViewController from '../../../widgets/buttons/dropdown-button-view-controller';
+
+import type GmailDriver from '../gmail-driver';
+
 class GmailCollapsibleSectionView {
-  constructor(driver, groupOrderHint, isSearch, isCollapsible) {
-    (0, _defineProperty2.default)(this, "_collapsibleSectionDescriptor", {});
-    (0, _defineProperty2.default)(this, "_element", null);
-    (0, _defineProperty2.default)(this, "_headerElement", null);
-    (0, _defineProperty2.default)(this, "_titleElement", null);
-    (0, _defineProperty2.default)(this, "_bodyElement", null);
-    (0, _defineProperty2.default)(this, "_contentElement", null);
-    (0, _defineProperty2.default)(this, "_tableBodyElement", null);
-    (0, _defineProperty2.default)(this, "_collapsedContainer", null);
-    (0, _defineProperty2.default)(this, "_messageElement", null);
-    (0, _defineProperty2.default)(this, "_footerElement", null);
-    (0, _defineProperty2.default)(this, "_isCollapsed", false);
-    (0, _defineProperty2.default)(this, "_inboxDropdownButtonView", null);
-    (0, _defineProperty2.default)(this, "_dropdownViewController", null);
+  _driver: GmailDriver;
+  _groupOrderHint: number;
+  _isReadyDeferred: Object;
+  _isCollapsible: boolean;
+  _collapsibleSectionDescriptor: Object = {};
+  _isSearch: boolean;
+  _element: ?HTMLElement = null;
+  _headerElement: ?HTMLElement = null;
+  _titleElement: ?HTMLElement = null;
+  _bodyElement: ?HTMLElement = null;
+  _contentElement: ?HTMLElement = null;
+  _tableBodyElement: ?HTMLElement = null;
+  _collapsedContainer: ?HTMLElement = null;
+  _messageElement: ?HTMLElement = null;
+  _footerElement: ?HTMLElement = null;
+  _eventStream: Bus<any>;
+  _isCollapsed: boolean = false;
+  _inboxDropdownButtonView: ?Object = null;
+  _dropdownViewController: ?Object = null;
+
+  constructor(
+    driver: GmailDriver,
+    groupOrderHint: number,
+    isSearch: boolean,
+    isCollapsible: boolean
+  ) {
     this._driver = driver;
     this._isSearch = isSearch;
     this._groupOrderHint = groupOrderHint;
     this._isCollapsible = isCollapsible;
-    this._eventStream = (0, _kefirBus.default)();
-    this._isReadyDeferred = new _defer.default();
+    this._eventStream = kefirBus();
+
+    this._isReadyDeferred = new defer();
   }
+
   destroy() {
     if (this._element) this._element.remove();
     if (this._eventStream) this._eventStream.end();
@@ -51,43 +64,59 @@ class GmailCollapsibleSectionView {
     if (this._inboxDropdownButtonView) this._inboxDropdownButtonView.destroy();
     if (this._dropdownViewController) this._dropdownViewController.destroy();
   }
-  getElement() {
+
+  getElement(): HTMLElement {
     const element = this._element;
-    if (!element) throw new Error('tried to access element that does not exist');
+    if (!element)
+      throw new Error('tried to access element that does not exist');
     return element;
   }
-  getEventStream() {
+
+  getEventStream(): Kefir.Observable<any> {
     return this._eventStream;
   }
-  setCollapsibleSectionDescriptorProperty(collapsibleSectionDescriptorProperty) {
-    const stoppedProperty = collapsibleSectionDescriptorProperty.takeUntilBy(this._eventStream.filter(() => false).beforeEnd(() => null));
-    stoppedProperty.onValue(x => this._updateValues(x));
-    stoppedProperty.take(1).onValue(x => this._isReadyDeferred.resolve(this));
+
+  setCollapsibleSectionDescriptorProperty(
+    collapsibleSectionDescriptorProperty: Kefir.Observable<?Object>
+  ) {
+    const stoppedProperty = collapsibleSectionDescriptorProperty.takeUntilBy(
+      this._eventStream.filter(() => false).beforeEnd(() => null)
+    );
+
+    stoppedProperty.onValue((x) => this._updateValues(x));
+    stoppedProperty.take(1).onValue((x) => this._isReadyDeferred.resolve(this));
   }
-  setCollapsed(value) {
+
+  setCollapsed(value: boolean) {
     if (!this._isCollapsible) {
       return;
     }
+
     this._isReadyDeferred.promise.then(() => {
-      if (value) this._collapse();else this._expand();
+      if (value) this._collapse();
+      else this._expand();
     });
   }
-  _updateValues(collapsibleSectionDescriptor) {
+
+  _updateValues(collapsibleSectionDescriptor: ?Object) {
     const element = this._element;
     if (!collapsibleSectionDescriptor) {
       if (element) {
         element.style.display = 'none';
       }
+
       return;
     } else if (element) {
       element.style.display = '';
     }
+
     if (!element) {
       this._setupElement(collapsibleSectionDescriptor);
       this._showLoadingMessage();
     } else {
       this._updateElement(collapsibleSectionDescriptor);
     }
+
     this._updateHeader(collapsibleSectionDescriptor);
     this._updateTitle(collapsibleSectionDescriptor);
     this._updateSubtitle(collapsibleSectionDescriptor);
@@ -97,163 +126,301 @@ class GmailCollapsibleSectionView {
     this._updateTableRows(collapsibleSectionDescriptor);
     this._updateMessageElement(collapsibleSectionDescriptor);
     this._updateFooter(collapsibleSectionDescriptor);
+
     this._collapsibleSectionDescriptor = collapsibleSectionDescriptor;
   }
-  _setupElement(collapsibleSectionDescriptor) {
-    const element = this._element = document.createElement('div');
+
+  _setupElement(collapsibleSectionDescriptor: Object) {
+    const element = (this._element = document.createElement('div'));
     element.setAttribute('class', 'inboxsdk__resultsSection');
     element.setAttribute('data-group-order-hint', String(this._groupOrderHint));
-    element.setAttribute('data-order-hint', String(typeof collapsibleSectionDescriptor.orderHint === 'number' ? collapsibleSectionDescriptor.orderHint : 0));
-    if (!this._isCollapsible) element.classList.add('inboxsdk__resultsSection_nonCollapsible');
+    element.setAttribute(
+      'data-order-hint',
+      String(
+        typeof collapsibleSectionDescriptor.orderHint === 'number'
+          ? collapsibleSectionDescriptor.orderHint
+          : 0
+      )
+    );
+    if (!this._isCollapsible)
+      element.classList.add('inboxsdk__resultsSection_nonCollapsible');
+
     this._setupHeader(collapsibleSectionDescriptor);
-    const bodyElement = this._bodyElement = document.createElement('div');
+
+    const bodyElement = (this._bodyElement = document.createElement('div'));
     const bodyContentsElement = document.createElement('div');
     bodyContentsElement.classList.add('zE');
     bodyElement.appendChild(bodyContentsElement);
+
     element.appendChild(bodyElement);
-    const contentElement = this._contentElement = document.createElement('div');
+
+    const contentElement = (this._contentElement =
+      document.createElement('div'));
     bodyContentsElement.appendChild(contentElement);
-    const messageElement = this._messageElement = document.createElement('div');
+
+    const messageElement = (this._messageElement =
+      document.createElement('div'));
     bodyContentsElement.appendChild(messageElement);
-    const tableBodyElement = this._tableBodyElement = document.createElement('div');
+
+    const tableBodyElement = (this._tableBodyElement =
+      document.createElement('div'));
     bodyContentsElement.appendChild(tableBodyElement);
+
     this._setupFooter(collapsibleSectionDescriptor);
+
     if (this._isCollapsible && this._titleElement) {
-      _kefir.default.fromEvents(this._titleElement, 'click').onValue(() => this._toggleCollapseState());
+      Kefir.fromEvents(this._titleElement, 'click').onValue(() =>
+        this._toggleCollapseState()
+      );
     }
-    _kefir.default.fromEvents(element, 'removeCollapsedContainer').onValue(() => this._destroyCollapsedContainer());
-    _kefir.default.fromEvents(element, 'readdToCollapsedContainer').onValue(() => this._addToCollapsedContainer());
+
+    Kefir.fromEvents(element, 'removeCollapsedContainer').onValue(() =>
+      this._destroyCollapsedContainer()
+    );
+    Kefir.fromEvents(element, 'readdToCollapsedContainer').onValue(() =>
+      this._addToCollapsedContainer()
+    );
+
     this._eventStream.emit({
       type: 'update',
       property: 'orderHint',
-      sectionDescriptor: collapsibleSectionDescriptor
+      sectionDescriptor: collapsibleSectionDescriptor,
     });
   }
-  _setupHeader(collapsibleSectionDescriptor) {
-    const headerElement = this._headerElement = document.createElement('div');
+
+  _setupHeader(collapsibleSectionDescriptor: Object) {
+    const headerElement = (this._headerElement = document.createElement('div'));
     headerElement.classList.add('inboxsdk__resultsSection_header', 'Wg');
+
     this._setupGmailv2Header(headerElement, collapsibleSectionDescriptor);
+
     if (this._element) this._element.appendChild(headerElement);
   }
-  _setupGmailv2Header(headerElement, collapsibleSectionDescriptor) {
-    const titleElement = this._titleElement = document.createElement('div');
+
+  _setupGmailv2Header(
+    headerElement: HTMLElement,
+    collapsibleSectionDescriptor: Object
+  ) {
+    const titleElement = (this._titleElement = document.createElement('div'));
     titleElement.setAttribute('class', 'inboxsdk__resultsSection_title');
-    titleElement.innerHTML = ['<h3 class="Wr iR">', '<img alt="" src="//ssl.gstatic.com/ui/v1/icons/mail/images/cleardot.gif" class="qi Wp Wq">', '<div class="Wn">', (0, _escape.default)(collapsibleSectionDescriptor.title), '</div>', '</h3>'].join('');
+
+    titleElement.innerHTML = [
+      '<h3 class="Wr iR">',
+      '<img alt="" src="//ssl.gstatic.com/ui/v1/icons/mail/images/cleardot.gif" class="qi Wp Wq">',
+      '<div class="Wn">',
+      escape(collapsibleSectionDescriptor.title),
+      '</div>',
+      '</h3>',
+    ].join('');
+
     const floatRightElement = document.createElement('div');
     floatRightElement.classList.add('Cr');
     if (this._isSearch) floatRightElement.classList.add('Wg');
+
     headerElement.appendChild(titleElement);
     headerElement.appendChild(floatRightElement);
   }
-  _setupFooter(collapsibleSectionDescriptor) {
-    const footerElement = this._footerElement = document.createElement('div');
+
+  _setupFooter(collapsibleSectionDescriptor: Object) {
+    const footerElement = (this._footerElement = document.createElement('div'));
     footerElement.classList.add('inboxsdk__resultsSection_footer');
+
     if (this._bodyElement) this._bodyElement.appendChild(footerElement);
   }
-  _updateElement(collapsibleSectionDescriptor) {
-    if (this._collapsibleSectionDescriptor.orderHint !== collapsibleSectionDescriptor.orderHint) {
+
+  _updateElement(collapsibleSectionDescriptor: Object) {
+    if (
+      this._collapsibleSectionDescriptor.orderHint !==
+      collapsibleSectionDescriptor.orderHint
+    ) {
       const element = this._element;
-      if (element) element.setAttribute('data-order-hint', '' + (typeof collapsibleSectionDescriptor.orderHint === 'number' ? collapsibleSectionDescriptor.orderHint : 0));
+      if (element)
+        element.setAttribute(
+          'data-order-hint',
+          '' +
+            (typeof collapsibleSectionDescriptor.orderHint === 'number'
+              ? collapsibleSectionDescriptor.orderHint
+              : 0)
+        );
+
       this._eventStream.emit({
         type: 'update',
-        property: 'orderHint'
+        property: 'orderHint',
       });
     }
   }
-  _updateHeader(collapsibleSectionDescriptor) {
-    if (this._isCollapsible || collapsibleSectionDescriptor.title || collapsibleSectionDescriptor.subtitle || collapsibleSectionDescriptor.titleLinkText || collapsibleSectionDescriptor.hasDropdown) {
+
+  _updateHeader(collapsibleSectionDescriptor: Object) {
+    if (
+      this._isCollapsible ||
+      collapsibleSectionDescriptor.title ||
+      collapsibleSectionDescriptor.subtitle ||
+      collapsibleSectionDescriptor.titleLinkText ||
+      collapsibleSectionDescriptor.hasDropdown
+    ) {
       if (this._headerElement) this._headerElement.style.display = '';
     } else {
       if (this._headerElement) this._headerElement.style.display = 'none';
     }
   }
-  _updateTitle(collapsibleSectionDescriptor) {
-    if (this._collapsibleSectionDescriptor.title !== collapsibleSectionDescriptor.title) {
+
+  _updateTitle(collapsibleSectionDescriptor: Object) {
+    if (
+      this._collapsibleSectionDescriptor.title !==
+      collapsibleSectionDescriptor.title
+    ) {
       const selector = 'h3 > .Wn';
+
       if (this._titleElement) {
-        (0, _querySelectorOrFail.default)(this._titleElement, selector).textContent = collapsibleSectionDescriptor.title;
+        querySelector(this._titleElement, selector).textContent =
+          collapsibleSectionDescriptor.title;
       }
     }
   }
-  _updateSubtitle(collapsibleSectionDescriptor) {
+
+  _updateSubtitle(collapsibleSectionDescriptor: Object) {
     const titleElement = this._titleElement;
     if (!titleElement) return;
-    let subtitleElement = titleElement.querySelector('.inboxsdk__resultsSection_title_subtitle');
+
+    let subtitleElement = titleElement.querySelector(
+      '.inboxsdk__resultsSection_title_subtitle'
+    );
     if (!collapsibleSectionDescriptor.subtitle) {
       if (subtitleElement) {
         subtitleElement.remove();
       }
-    } else if (this._collapsibleSectionDescriptor.subtitle !== collapsibleSectionDescriptor.subtitle) {
+    } else if (
+      this._collapsibleSectionDescriptor.subtitle !==
+      collapsibleSectionDescriptor.subtitle
+    ) {
       if (!subtitleElement) {
         subtitleElement = document.createElement('span');
         if (subtitleElement && titleElement) {
-          subtitleElement.classList.add('inboxsdk__resultsSection_title_subtitle');
+          subtitleElement.classList.add(
+            'inboxsdk__resultsSection_title_subtitle'
+          );
+
           const insertionPoint = titleElement.querySelector('.Wn');
+
           if (insertionPoint) {
             subtitleElement.classList.add('aw5');
-            insertionPoint.appendChild(subtitleElement);
+            (insertionPoint: any).appendChild(subtitleElement);
           }
         }
       }
-      subtitleElement.textContent = '(' + collapsibleSectionDescriptor.subtitle + ')';
+
+      subtitleElement.textContent =
+        '(' + collapsibleSectionDescriptor.subtitle + ')';
     }
   }
-  _updateSummaryText(collapsibleSectionDescriptor) {
+
+  _updateSummaryText(collapsibleSectionDescriptor: Object) {
     const headerElement = this._headerElement;
     if (!headerElement) return;
-    let summaryTextElement = headerElement.querySelector('.inboxsdk__resultsSection_header_summaryText');
+
+    let summaryTextElement = headerElement.querySelector(
+      '.inboxsdk__resultsSection_header_summaryText'
+    );
     if (!collapsibleSectionDescriptor.titleLinkText) {
       if (summaryTextElement) {
         summaryTextElement.remove();
       }
-    } else if (collapsibleSectionDescriptor.titleLinkText !== this._collapsibleSectionDescriptor.titleLinkText) {
+    } else if (
+      collapsibleSectionDescriptor.titleLinkText !==
+      this._collapsibleSectionDescriptor.titleLinkText
+    ) {
       if (!summaryTextElement) {
         summaryTextElement = document.createElement('div');
-        summaryTextElement.setAttribute('class', 'inboxsdk__resultsSection_header_summaryText Wm');
-        summaryTextElement.innerHTML = ['<span class="Di">&nbsp;', '<div class="J-J5-Ji amH">', '<span class="Dj">', '<span></span>', '</span>', '&nbsp;', '</div>', '</span>'].join('');
-        this._eventStream.plug(_kefir.default.fromEvents(summaryTextElement, 'click').map(() => ({
-          eventName: 'titleLinkClicked',
-          sectionDescriptor: this._collapsibleSectionDescriptor
-        })));
+        summaryTextElement.setAttribute(
+          'class',
+          'inboxsdk__resultsSection_header_summaryText Wm'
+        );
+
+        summaryTextElement.innerHTML = [
+          '<span class="Di">&nbsp;',
+          '<div class="J-J5-Ji amH">',
+          '<span class="Dj">',
+          '<span></span>',
+          '</span>',
+          '&nbsp;',
+          '</div>',
+          '</span>',
+        ].join('');
+
+        this._eventStream.plug(
+          Kefir.fromEvents(summaryTextElement, 'click').map(() => ({
+            eventName: 'titleLinkClicked',
+            sectionDescriptor: this._collapsibleSectionDescriptor,
+          }))
+        );
+
         const _summaryTextElement = summaryTextElement;
         summaryTextElement.addEventListener('mouseenter', function () {
           _summaryTextElement.classList.add('aqi');
         });
+
         summaryTextElement.addEventListener('mouseleave', function () {
           _summaryTextElement.classList.remove('aqi');
         });
+
         const insertionPoint = headerElement.querySelector('.Cr');
-        if (insertionPoint) insertionPoint.insertAdjacentElement('afterbegin', summaryTextElement);
+        if (insertionPoint)
+          (insertionPoint: any).insertAdjacentElement(
+            'afterbegin',
+            summaryTextElement
+          );
       }
-      (0, _querySelectorOrFail.default)(summaryTextElement, '.Dj > *').textContent = collapsibleSectionDescriptor.titleLinkText;
+
+      querySelector(summaryTextElement, '.Dj > *').textContent =
+        collapsibleSectionDescriptor.titleLinkText;
     }
   }
-  _updateDropdown(collapsibleSectionDescriptor) {
-    if (!collapsibleSectionDescriptor.hasDropdown || !collapsibleSectionDescriptor.onDropdownClick) {
-      if (this._inboxDropdownButtonView) this._inboxDropdownButtonView.destroy();
+
+  _updateDropdown(collapsibleSectionDescriptor: Object) {
+    if (
+      !collapsibleSectionDescriptor.hasDropdown ||
+      !collapsibleSectionDescriptor.onDropdownClick
+    ) {
+      if (this._inboxDropdownButtonView)
+        this._inboxDropdownButtonView.destroy();
       if (this._dropdownViewController) this._dropdownViewController.destroy();
-    } else if (collapsibleSectionDescriptor.hasDropdown && collapsibleSectionDescriptor.onDropdownClick) {
+    } else if (
+      collapsibleSectionDescriptor.hasDropdown &&
+      collapsibleSectionDescriptor.onDropdownClick
+    ) {
       if (!this._inboxDropdownButtonView || !this._dropdownViewController) {
-        const inboxDropdownButtonView = this._inboxDropdownButtonView = new _inboxDropdownButtonView.default();
-        this._dropdownViewController = new _dropdownButtonViewController.default({
+        const inboxDropdownButtonView = (this._inboxDropdownButtonView =
+          new InboxDropdownButtonView());
+        this._dropdownViewController = new DropdownButtonViewController({
           buttonView: inboxDropdownButtonView,
-          dropdownViewDriverClass: _gmailDropdownView.default,
-          dropdownShowFunction: collapsibleSectionDescriptor.onDropdownClick
+          dropdownViewDriverClass: GmailDropdownView,
+          dropdownShowFunction: collapsibleSectionDescriptor.onDropdownClick,
         });
+
         const headerElement = this._headerElement;
         if (headerElement) {
           const childElement = headerElement.querySelector('.Cr');
-          if (childElement) childElement.appendChild(inboxDropdownButtonView.getElement());
+          if (childElement)
+            childElement.appendChild(inboxDropdownButtonView.getElement());
         }
-      } else if (collapsibleSectionDescriptor.onDropdownClick !== this._collapsibleSectionDescriptor.onDropdownClick) {
-        if (this._dropdownViewController) this._dropdownViewController.setDropdownShowFunction(collapsibleSectionDescriptor.onDropdownClick);
+      } else if (
+        collapsibleSectionDescriptor.onDropdownClick !==
+        this._collapsibleSectionDescriptor.onDropdownClick
+      ) {
+        if (this._dropdownViewController)
+          this._dropdownViewController.setDropdownShowFunction(
+            collapsibleSectionDescriptor.onDropdownClick
+          );
       }
     }
   }
-  _updateContentElement(collapsibleSectionDescriptor) {
+
+  _updateContentElement(collapsibleSectionDescriptor: Object) {
     const contentElement = this._contentElement;
     if (!contentElement) return;
+
     contentElement.innerHTML = '';
+
     if (collapsibleSectionDescriptor.contentElement) {
       contentElement.style.display = '';
       contentElement.appendChild(collapsibleSectionDescriptor.contentElement);
@@ -261,13 +428,14 @@ class GmailCollapsibleSectionView {
       contentElement.style.display = 'none';
     }
   }
-  _updateTableRows(collapsibleSectionDescriptor) {
-    const {
-      tableRows
-    } = collapsibleSectionDescriptor;
+
+  _updateTableRows(collapsibleSectionDescriptor: Object) {
+    const { tableRows } = collapsibleSectionDescriptor;
     const tableBodyElement = this._tableBodyElement;
     if (!tableBodyElement) return;
+
     tableBodyElement.innerHTML = '';
+
     if (!tableRows || tableRows.length === 0) {
       tableBodyElement.style.display = 'none';
     } else {
@@ -275,44 +443,70 @@ class GmailCollapsibleSectionView {
       this._renderTable(tableRows);
     }
   }
-  _renderTable(tableRows) {
+
+  _renderTable(tableRows: Array<Object>) {
     const tableElement = document.createElement('table');
     tableElement.setAttribute('class', 'F cf zt');
     tableElement.innerHTML = _getTableHTML();
-    if (this._tableBodyElement) this._tableBodyElement.appendChild(tableElement);
+
+    if (this._tableBodyElement)
+      this._tableBodyElement.appendChild(tableElement);
+
     const tbody = tableElement.querySelector('tbody');
     const eventStream = this._eventStream;
-    tableRows.forEach(result => {
+
+    tableRows.forEach((result) => {
       const rowElement = document.createElement('tr');
-      rowElement.setAttribute('class', 'inboxsdk__resultsSection_tableRow zA ' + (result.isRead ? 'yO' : 'zE'));
+      rowElement.setAttribute(
+        'class',
+        'inboxsdk__resultsSection_tableRow zA ' + (result.isRead ? 'yO' : 'zE')
+      );
       rowElement.innerHTML = _getRowHTML(result);
+
       if (!tbody) throw new Error('should not happen');
       tbody.appendChild(rowElement);
-      eventStream.plug(_kefir.default.fromEvents(rowElement, 'click').map(() => ({
-        eventName: 'rowClicked',
-        rowDescriptor: result
-      })));
+
+      eventStream.plug(
+        Kefir.fromEvents(rowElement, 'click').map(() => ({
+          eventName: 'rowClicked',
+          rowDescriptor: result,
+        }))
+      );
     });
   }
-  _updateMessageElement(collapsibleSectionDescriptor) {
+
+  _updateMessageElement(collapsibleSectionDescriptor: Object) {
     const messageElement = this._messageElement;
-    if (collapsibleSectionDescriptor.tableRows && collapsibleSectionDescriptor.tableRows.length > 0 || collapsibleSectionDescriptor.contentElement) {
+    if (
+      (collapsibleSectionDescriptor.tableRows &&
+        collapsibleSectionDescriptor.tableRows.length > 0) ||
+      collapsibleSectionDescriptor.contentElement
+    ) {
       if (messageElement) {
         messageElement.innerHTML = '';
         messageElement.style.display = 'none';
       }
-    } else if (collapsibleSectionDescriptor.tableRows && collapsibleSectionDescriptor.tableRows.length === 0 && !collapsibleSectionDescriptor.contentElement) {
+    } else if (
+      collapsibleSectionDescriptor.tableRows &&
+      collapsibleSectionDescriptor.tableRows.length === 0 &&
+      !collapsibleSectionDescriptor.contentElement
+    ) {
       this._showEmptyMessage();
     }
   }
+
   _showLoadingMessage() {
     const messageElement = this._messageElement;
     if (messageElement) {
-      messageElement.setAttribute('class', 'TB TC inboxsdk__resultsSection_loading');
+      messageElement.setAttribute(
+        'class',
+        'TB TC inboxsdk__resultsSection_loading'
+      );
       messageElement.innerHTML = 'loading...'; //TODO: localize
       messageElement.style.display = '';
     }
   }
+
   _showEmptyMessage() {
     const messageElement = this._messageElement;
     if (messageElement) {
@@ -321,27 +515,41 @@ class GmailCollapsibleSectionView {
       messageElement.style.display = '';
     }
   }
-  _updateFooter(collapsibleSectionDescriptor) {
+
+  _updateFooter(collapsibleSectionDescriptor: Object) {
     const footerElement = this._footerElement;
     if (!footerElement) return;
+
     footerElement.innerHTML = '';
-    if (!collapsibleSectionDescriptor.footerLinkText && !collapsibleSectionDescriptor.footerLinkIconUrl && !collapsibleSectionDescriptor.footerLinkIconClass) {
+
+    if (
+      !collapsibleSectionDescriptor.footerLinkText &&
+      !collapsibleSectionDescriptor.footerLinkIconUrl &&
+      !collapsibleSectionDescriptor.footerLinkIconClass
+    ) {
       footerElement.style.display = 'none';
     } else {
       footerElement.style.display = '';
+
       const footerLinkElement = document.createElement('span');
       footerLinkElement.setAttribute('class', 'e Wb');
-      footerLinkElement.textContent = collapsibleSectionDescriptor.footerLinkText;
-      this._eventStream.plug(_kefir.default.fromEvents(footerLinkElement, 'click').map(() => {
-        return {
-          eventName: 'footerClicked',
-          sectionDescriptor: this._collapsibleSectionDescriptor
-        };
-      }));
+      footerLinkElement.textContent =
+        collapsibleSectionDescriptor.footerLinkText;
+
+      this._eventStream.plug(
+        Kefir.fromEvents(footerLinkElement, 'click').map(() => {
+          return {
+            eventName: 'footerClicked',
+            sectionDescriptor: this._collapsibleSectionDescriptor,
+          };
+        })
+      );
+
       footerElement.appendChild(footerLinkElement);
       footerElement.insertAdjacentHTML('beforeend', '<br style="clear:both;">');
     }
   }
+
   _toggleCollapseState() {
     if (this._isCollapsed) {
       this._expand();
@@ -349,103 +557,154 @@ class GmailCollapsibleSectionView {
       this._collapse();
     }
   }
+
   _collapse() {
     const element = this._element;
     if (!element) {
       return;
     }
+
     element.classList.add('inboxsdk__resultsSection_collapsed');
+
     if (!this._isSearch) {
       this._addToCollapsedContainer();
     }
+
     const selector = 'h3 > img.Wp';
     if (this._titleElement) {
-      const arrowSpan = (0, _querySelectorOrFail.default)(this._titleElement, selector);
+      const arrowSpan = querySelector(this._titleElement, selector);
       if (arrowSpan) {
         arrowSpan.classList.remove('Wq');
         arrowSpan.classList.add('Wo');
       }
     }
+
     if (this._bodyElement) this._bodyElement.style.display = 'none';
     this._isCollapsed = true;
+
     this._eventStream.emit({
-      eventName: 'collapsed'
+      eventName: 'collapsed',
     });
   }
+
   _expand() {
     const element = this._element;
     if (!element) {
       return;
     }
+
     element.classList.remove('inboxsdk__resultsSection_collapsed');
+
     if (!this._isSearch) {
       this._removeFromCollapsedContainer();
     }
+
     const selector = 'h3 > img.Wp';
     if (this._titleElement) {
-      const arrowSpan = (0, _querySelectorOrFail.default)(this._titleElement, selector);
+      const arrowSpan = querySelector(this._titleElement, selector);
       if (arrowSpan) {
         arrowSpan.classList.remove('Wo');
         arrowSpan.classList.add('Wq');
       }
     }
+
     if (this._bodyElement) this._bodyElement.style.display = '';
     this._isCollapsed = false;
+
     this._eventStream.emit({
-      eventName: 'expanded'
+      eventName: 'expanded',
     });
   }
+
   _addToCollapsedContainer() {
     const element = this._element;
     if (!element) return;
     if (this._headerElement) this._headerElement.classList.remove('Wg');
-    if (this._isCollapsedContainer(element.previousElementSibling) && this._isCollapsedContainer(element.nextElementSibling)) {
+
+    if (
+      this._isCollapsedContainer(element.previousElementSibling) &&
+      this._isCollapsedContainer(element.nextElementSibling)
+    ) {
       //we are surrounded by collapse containers, let's favor our previous sibling
       const otherCollapseContainer = element.nextElementSibling;
       const previousSibling = element.previousElementSibling;
       if (!previousSibling) throw new Error('previousSibling does not exist');
-      if (!otherCollapseContainer) throw new Error('otherCollapseContainer does not exist');
+      if (!otherCollapseContainer)
+        throw new Error('otherCollapseContainer does not exist');
+
       const anchor = previousSibling.children[0].appendChild(element);
 
       //now we need to "merge" the two collapse containers. This can be done by taking all the result sections out of the collapsed container
       //and calling our "recollapse" helper function on them
-      const elementsToRecollapse = Array.from(otherCollapseContainer.children[0].children).concat(Array.from(otherCollapseContainer.children[1].children));
-      if (otherCollapseContainer) this._pulloutSectionsFromCollapsedContainer(otherCollapseContainer);
+      const elementsToRecollapse = Array.from(
+        otherCollapseContainer.children[0].children
+      ).concat(Array.from(otherCollapseContainer.children[1].children));
+
+      if (otherCollapseContainer)
+        this._pulloutSectionsFromCollapsedContainer(
+          (otherCollapseContainer: any)
+        );
       this._recollapse(elementsToRecollapse);
     } else {
       this._readdToCollapsedContainer();
     }
   }
+
   _removeFromCollapsedContainer() {
     if (this._headerElement) this._headerElement.classList.add('Wg');
     const element = this._element;
     if (!element) return;
+
     const parentElement = element.parentElement;
     if (!parentElement) return;
+
     const container = parentElement.parentElement;
-    if (!container || !container.classList.contains('inboxsdk__results_collapsedContainer')) {
+
+    if (
+      !container ||
+      !container.classList.contains('inboxsdk__results_collapsedContainer')
+    ) {
       return;
     }
-    const elementsToRecollapse = Array.from(container.children[0].children).concat(Array.from(container.children[1].children));
-    this._pulloutSectionsFromCollapsedContainer(container);
+
+    const elementsToRecollapse = Array.from(
+      container.children[0].children
+    ).concat(Array.from(container.children[1].children));
+    this._pulloutSectionsFromCollapsedContainer((container: any));
     this._destroyCollapsedContainer();
-    this._recollapse(elementsToRecollapse.filter(child => child !== element));
+
+    this._recollapse(elementsToRecollapse.filter((child) => child !== element));
   }
-  _pulloutSectionsFromCollapsedContainer(container) {
+
+  _pulloutSectionsFromCollapsedContainer(container: HTMLElement) {
     const prependedChildren = Array.from(container.children[0].children);
-    prependedChildren.forEach(child => container.insertAdjacentElement('beforebegin', child));
-    const appendedChildren = Array.from(container.children[1].children).reverse();
-    appendedChildren.forEach(child => container.insertAdjacentElement('afterend', child));
+    prependedChildren.forEach((child) =>
+      (container: any).insertAdjacentElement('beforebegin', child)
+    );
+
+    const appendedChildren = Array.from(
+      container.children[1].children
+    ).reverse();
+    appendedChildren.forEach((child) =>
+      (container: any).insertAdjacentElement('afterend', child)
+    );
   }
+
   _readdToCollapsedContainer() {
     const element = this._element;
     if (!element) return;
+
     if (this._collapsedContainer) {
-      this._collapsedContainer.children[0].insertBefore(element, this._collapsedContainer.children[1].firstElementChild);
+      this._collapsedContainer.children[0].insertBefore(
+        element,
+        this._collapsedContainer.children[1].firstElementChild
+      );
       return;
     }
+
     let collapsedContainer;
     let isPrepend;
+
     if (this._isCollapsedContainer(element.previousElementSibling)) {
       isPrepend = false;
       collapsedContainer = element.previousElementSibling;
@@ -457,32 +716,61 @@ class GmailCollapsibleSectionView {
       this._createCollapsedContainer();
       collapsedContainer = this._collapsedContainer;
     }
+
     if (isPrepend && collapsedContainer) {
-      collapsedContainer.children[0].insertBefore(element, collapsedContainer.children[0].firstElementChild);
+      collapsedContainer.children[0].insertBefore(
+        element,
+        collapsedContainer.children[0].firstElementChild
+      );
     } else if (collapsedContainer) {
       collapsedContainer.children[0].appendChild(element);
     }
   }
-  _isCollapsedContainer(element) {
-    return element && element.classList.contains('inboxsdk__results_collapsedContainer');
+
+  _isCollapsedContainer(element: any) {
+    return (
+      element &&
+      element.classList.contains('inboxsdk__results_collapsedContainer')
+    );
   }
-  _recollapse(children) {
-    children.forEach(child => {
+
+  _recollapse(children: Array<Object>) {
+    children.forEach((child) => {
       const removeEvent = document.createEvent('CustomEvent');
-      removeEvent.initCustomEvent('removeCollapsedContainer', false, false, null);
+      (removeEvent: any).initCustomEvent(
+        'removeCollapsedContainer',
+        false,
+        false,
+        null
+      );
       child.dispatchEvent(removeEvent);
+
       const readdEvent = document.createEvent('CustomEvent');
-      readdEvent.initCustomEvent('readdToCollapsedContainer', false, false, null);
+      (readdEvent: any).initCustomEvent(
+        'readdToCollapsedContainer',
+        false,
+        false,
+        null
+      );
       child.dispatchEvent(readdEvent);
     });
   }
+
   _createCollapsedContainer() {
-    const collapsedContainer = this._collapsedContainer = document.createElement('div');
-    collapsedContainer.setAttribute('class', 'inboxsdk__results_collapsedContainer Wg');
-    collapsedContainer.innerHTML = '<div class="inboxsdk__results_collapsedContainer_prepend"></div><div class="inboxsdk__results_collapsedContainer_append"></div>';
+    const collapsedContainer = (this._collapsedContainer =
+      document.createElement('div'));
+    collapsedContainer.setAttribute(
+      'class',
+      'inboxsdk__results_collapsedContainer Wg'
+    );
+    collapsedContainer.innerHTML =
+      '<div class="inboxsdk__results_collapsedContainer_prepend"></div><div class="inboxsdk__results_collapsedContainer_append"></div>';
+
     const element = this._element;
-    if (element) element.insertAdjacentElement('afterend', collapsedContainer);
+    if (element)
+      (element: any).insertAdjacentElement('afterend', collapsedContainer);
   }
+
   _destroyCollapsedContainer() {
     if (this._collapsedContainer) {
       this._collapsedContainer.remove();
@@ -490,67 +778,132 @@ class GmailCollapsibleSectionView {
     }
   }
 }
+
 function _getTableHTML() {
-  return ['<colgroup>', '<col class="k0vOLb">', '<col class="Ci">', '<col class="y5">', '<col class="WA">', '<col class="yY">', '<col>', '<col class="xX">', '</colgroup>', '<tbody>', '</tbody>'].join('');
+  return [
+    '<colgroup>',
+    '<col class="k0vOLb">',
+    '<col class="Ci">',
+    '<col class="y5">',
+    '<col class="WA">',
+    '<col class="yY">',
+    '<col>',
+    '<col class="xX">',
+    '</colgroup>',
+    '<tbody>',
+    '</tbody>',
+  ].join('');
 }
+
 function _getRowHTML(result) {
   let iconHtml = '';
   if (result.iconHtml != null) {
-    iconHtml = (0, _autoHtml.default)`<div class="inboxsdk__resultsSection_result_icon inboxsdk__resultsSection_result_iconHtml">
-        ${{
-      __html: result.iconHtml
-    }}
+    iconHtml = autoHtml`<div class="inboxsdk__resultsSection_result_icon inboxsdk__resultsSection_result_iconHtml">
+        ${{ __html: result.iconHtml }}
       </div>`;
   } else if (result.iconUrl) {
-    iconHtml = (0, _autoHtml.default)`<img class="inboxsdk__resultsSection_result_icon ${result.iconClass || ''}" src="${result.iconUrl}">`;
-  } else if (result.iconClass) iconHtml = (0, _autoHtml.default)`<div class="${result.iconClass}"></div>`;
-  const labelsHtml = Array.isArray(result.labels) ? result.labels.map(_getLabelHTML).join('') : '';
-  const rowArr = ['<td class="xY PF"></td>', '<td class="xY oZ-x3"></td>', '<td class="xY WA">', iconHtml, '</td>', '<td class="xY WA"></td>', '<td class="xY yX inboxsdk__resultsSection_result_title">', '<div class="yW">', '<span ' + (result.isRead ? '' : 'class="zF"') + '>', (0, _escape.default)(result.title), '</span>', '</div>', '</td>', '<td class="xY a4W">', '<div class="xS">', '<div class="xT">', '<div class="yi">', labelsHtml, '</div>', '<div class="y6">', '<span class="bog">', result.isRead ? '' : '<b>', (0, _escape.default)(result.body || ''), result.isRead ? '' : '</b>', '</span>', '</div>', '</div>', '</div>', '</td>', '<td class="xY xW">', '<span' + (result.isRead ? '' : ' class="bq3"') + '>', (0, _escape.default)(result.shortDetailText || ''), '</span>', '</td>'];
+    iconHtml = autoHtml`<img class="inboxsdk__resultsSection_result_icon ${
+      result.iconClass || ''
+    }" src="${result.iconUrl}">`;
+  } else if (result.iconClass)
+    iconHtml = autoHtml`<div class="${result.iconClass}"></div>`;
+
+  const labelsHtml = Array.isArray(result.labels)
+    ? result.labels.map(_getLabelHTML).join('')
+    : '';
+
+  const rowArr = [
+    '<td class="xY PF"></td>',
+    '<td class="xY oZ-x3"></td>',
+    '<td class="xY WA">',
+    iconHtml,
+    '</td>',
+    '<td class="xY WA"></td>',
+    '<td class="xY yX inboxsdk__resultsSection_result_title">',
+    '<div class="yW">',
+    '<span ' + (result.isRead ? '' : 'class="zF"') + '>',
+    escape(result.title),
+    '</span>',
+    '</div>',
+    '</td>',
+    '<td class="xY a4W">',
+    '<div class="xS">',
+    '<div class="xT">',
+    '<div class="yi">',
+    labelsHtml,
+    '</div>',
+    '<div class="y6">',
+    '<span class="bog">',
+    result.isRead ? '' : '<b>',
+    escape(result.body || ''),
+    result.isRead ? '' : '</b>',
+    '</span>',
+    '</div>',
+    '</div>',
+    '</div>',
+    '</td>',
+    '<td class="xY xW">',
+    '<span' + (result.isRead ? '' : ' class="bq3"') + '>',
+    escape(result.shortDetailText || ''),
+    '</span>',
+    '</td>',
+  ];
+
   return rowArr.join('');
 }
+
 function _getLabelHTML(label) {
   const backgroundColor = label.backgroundColor || 'rgb(194, 194, 194)'; //grey
   const foregroundColor = label.foregroundColor || 'rgb(255, 255, 255)'; //white
   const maxWidth = label.maxWidth || '90px';
-  const retArray = [(0, _autoHtml.default)`<div class="ar as" data-tooltip="${label.title}">
+
+  const retArray = [
+    autoHtml`<div class="ar as" data-tooltip="${label.title}">
       <div class="at" style="background-color: ${backgroundColor}; border-color: ${backgroundColor};">
-        <div class="au" style="border-color: ${backgroundColor};">`];
-  const styleHtml = label.iconBackgroundColor ? (0, _autoHtml.default)`style="background-color: ${label.iconBackgroundColor}"` : '';
+        <div class="au" style="border-color: ${backgroundColor};">`,
+  ];
+
+  const styleHtml = label.iconBackgroundColor
+    ? autoHtml`style="background-color: ${label.iconBackgroundColor}"`
+    : '';
+
   if (label.iconHtml != null) {
-    retArray.push((0, _autoHtml.default)`<div class="inboxsdk__resultsSection_label_icon inboxsdk__resultsSection_label_iconHtml"
-        ${{
-      __html: styleHtml
-    }}
+    retArray.push(
+      autoHtml`<div class="inboxsdk__resultsSection_label_icon inboxsdk__resultsSection_label_iconHtml"
+        ${{ __html: styleHtml }}
       >
-        ${{
-      __html: label.iconHtml
-    }}
-      </div>`);
+        ${{ __html: label.iconHtml }}
+      </div>`
+    );
   } else if (label.iconClass) {
-    retArray.push((0, _autoHtml.default)`<div
+    retArray.push(
+      autoHtml`<div
         class="inboxsdk__resultsSection_label_icon ${label.iconClass || ''}"
-        ${{
-      __html: styleHtml
-    }}
+        ${{ __html: styleHtml }}
         >
-      </div>`);
+      </div>`
+    );
   } else if (label.iconUrl) {
-    retArray.push((0, _autoHtml.default)`<img
+    retArray.push(
+      autoHtml`<img
         class="inboxsdk__resultsSection_label_icon"
-        ${{
-      __html: styleHtml
-    }}
-        src="${label.iconUrl}" />`);
+        ${{ __html: styleHtml }}
+        src="${label.iconUrl}" />`
+    );
   }
-  retArray.push((0, _autoHtml.default)`
+
+  retArray.push(
+    autoHtml`
           <div class="av" style="color: ${foregroundColor}; max-width: ${maxWidth}">
             ${label.title}
           </div>
         </div>
       </div>
     </div>
-    `);
+    `
+  );
+
   return retArray.join('');
 }
-var _default = (0, _ud.defn)(module, GmailCollapsibleSectionView);
-exports.default = _default;
+
+export default defn(module, GmailCollapsibleSectionView);