@inboxsdk/core 0.2.28-alpha.5 → 0.2.28

package/src/platform-implementation-js/dom-driver/inbox/registerSearchSuggestionsProvider.js

@@ -1,301 +1,317 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = registerSearchSuggestionsProvider;
-var _kefir = _interopRequireDefault(require("kefir"));
-var _kefirBus = _interopRequireDefault(require("kefir-bus"));
-var _kefirStopper = _interopRequireDefault(require("kefir-stopper"));
-var _toItemWithLifetimeStream = _interopRequireDefault(require("../../lib/toItemWithLifetimeStream"));
-var _makeMutationObserverChunkedStream = _interopRequireDefault(require("../../lib/dom/make-mutation-observer-chunked-stream"));
-var _fromEventTargetCapture = _interopRequireDefault(require("../../lib/from-event-target-capture"));
-var _insertElementInOrder = _interopRequireDefault(require("../../lib/dom/insert-element-in-order"));
-var _parser = _interopRequireDefault(require("./detection/searchBar/parser"));
-var _copyAndValidateAutocompleteResults = _interopRequireDefault(require("../../lib/copyAndValidateAutocompleteResults"));
-var _setupCustomAutocompleteSelectionHandling = _interopRequireDefault(require("./setupCustomAutocompleteSelectionHandling"));
-var _autoHtml = _interopRequireDefault(require("auto-html"));
+/* @flow */
+
+import type InboxDriver from './inbox-driver';
+import type { AutocompleteSearchResult } from '../../../injected-js/gmail/modify-suggestions';
+
+import Kefir from 'kefir';
+import kefirBus from 'kefir-bus';
+import kefirStopper from 'kefir-stopper';
+import toItemWithLifetimeStream from '../../lib/toItemWithLifetimeStream';
+import makeMutationObserverChunkedStream from '../../lib/dom/make-mutation-observer-chunked-stream';
+import fromEventTargetCapture from '../../lib/from-event-target-capture';
+import insertElementInOrder from '../../lib/dom/insert-element-in-order';
+import searchBarParser from './detection/searchBar/parser';
+import copyAndValidateAutocompleteResults from '../../lib/copyAndValidateAutocompleteResults';
+import setupCustomAutocompleteSelectionHandling from './setupCustomAutocompleteSelectionHandling';
+import autoHtml from 'auto-html';
+
 const ORDERING_ATTR = 'data-inboxsdk-search-provider-count';
-const DEFAULT_RESULT_ICON = '//www.gstatic.com/images/icons/material/system/2x/search_black_24dp.png';
+const DEFAULT_RESULT_ICON =
+  '//www.gstatic.com/images/icons/material/system/2x/search_black_24dp.png';
+
 const getProviderOrder = () => {
-  const {
-    documentElement
-  } = document;
+  const { documentElement } = document;
   if (!documentElement) {
     throw new Error();
   }
   const orderAttr = documentElement.getAttribute(ORDERING_ATTR);
   const providerOrder = (orderAttr ? parseInt(orderAttr) + 1 : 0).toString();
+
   documentElement.setAttribute(ORDERING_ATTR, providerOrder);
+
   return providerOrder;
 };
-const handleResultChosen = _ref => {
-  let {
-    driver,
-    searchInput,
-    result,
-    event
-  } = _ref;
+
+const handleResultChosen = ({ driver, searchInput, result, event }) => {
   if (typeof result.onClick === 'function') {
     result.onClick();
   }
+
   if (typeof result.externalURL === 'string') {
     window.open(result.externalURL);
   }
+
   if (result.routeName && result.routeParams) {
     driver.goto(result.routeName, result.routeParams);
   }
+
   if (typeof result.searchTerm === 'string') {
     searchInput.value = result.searchTerm;
     searchInput.dispatchEvent(new Event('input'));
   }
 };
-const renderResultsList = _ref2 => {
-  let {
-    driver,
-    searchInput,
-    removalStream,
-    results,
-    providerOrder
-  } = _ref2;
+
+const renderResultsList = ({
+  driver,
+  searchInput,
+  removalStream,
+  results,
+  providerOrder,
+}) => {
   const container = document.createElement('div');
+
   container.setAttribute('data-order-hint', providerOrder);
   container.classList.add('inboxsdk__search_suggestion_group');
-  results.forEach(result => {
+
+  results.forEach((result) => {
     const listItem = document.createElement('li');
-    const description = result.description || result.descriptionHTML ? (0, _autoHtml.default)`
+
+    const description =
+      result.description || result.descriptionHTML
+        ? autoHtml`
       <span class="inboxsdk__search_suggestion_desc">
-        ${result.description || {
-      __html: result.descriptionHTML
-    }}
+        ${result.description || { __html: (result.descriptionHTML: any) }}
       </span>
-    ` : '';
+    `
+        : '';
+
     listItem.classList.add('inboxsdk__search_suggestion');
-    listItem.innerHTML = (0, _autoHtml.default)`
+    listItem.innerHTML = autoHtml`
       <img src="${result.iconUrl || DEFAULT_RESULT_ICON}">
       <span>
         <span class="inboxsdk__search_suggestion_name" role="option">
-          ${result.name || {
-      __html: result.nameHTML
-    }}
+          ${result.name || { __html: (result.nameHTML: any) }}
         </span>
-        ${{
-      __html: description
-    }}
+        ${{ __html: description }}
       </span>
     `;
-    _kefir.default.fromEvents(listItem, 'click').takeUntilBy(removalStream).onValue(event => handleResultChosen({
-      driver,
-      searchInput,
-      result,
-      event
-    }));
+
+    Kefir.fromEvents(listItem, 'click')
+      .takeUntilBy(removalStream)
+      .onValue((event: MouseEvent) =>
+        handleResultChosen({ driver, searchInput, result, event })
+      );
+
     container.appendChild(listItem);
   });
+
   return container;
 };
-function registerSearchSuggestionsProvider(driver, handler) {
-  const stopper = (0, _kefirStopper.default)();
+
+export default function registerSearchSuggestionsProvider(
+  driver: InboxDriver,
+  handler: (string) => Promise<Array<AutocompleteSearchResult>>
+) {
+  const stopper = kefirStopper();
   const providerOrder = getProviderOrder();
-  (0, _toItemWithLifetimeStream.default)(driver.getTagTree().getAllByTag('searchBar')).flatMap(_ref3 => {
-    let {
-      el,
-      removalStream
-    } = _ref3;
-    const {
-      searchInput
-    } = (0, _parser.default)(el.getValue()).elements;
-    if (searchInput instanceof HTMLInputElement) {
-      return _kefir.default.constant({
-        searchInput,
-        searchInputRemovalStream: removalStream
-      });
-    } else {
-      return _kefir.default.never();
-    }
-  }).flatMap(_ref4 => {
-    let {
-      searchInput,
-      searchInputRemovalStream
-    } = _ref4;
-    return (0, _toItemWithLifetimeStream.default)(driver.getTagTree().getAllByTag('searchAutocompleteResults')).takeUntilBy(searchInputRemovalStream).map(_ref5 => {
-      let {
-        el,
-        removalStream
-      } = _ref5;
-      return {
+
+  toItemWithLifetimeStream(driver.getTagTree().getAllByTag('searchBar'))
+    .flatMap(({ el, removalStream }) => {
+      const { searchInput } = searchBarParser(el.getValue()).elements;
+      if (searchInput instanceof HTMLInputElement) {
+        return Kefir.constant({
+          searchInput,
+          searchInputRemovalStream: removalStream,
+        });
+      } else {
+        return Kefir.never();
+      }
+    })
+    .flatMap(({ searchInput, searchInputRemovalStream }) =>
+      toItemWithLifetimeStream(
+        driver.getTagTree().getAllByTag('searchAutocompleteResults')
+      )
+        .takeUntilBy(searchInputRemovalStream)
+        .map(({ el, removalStream }) => ({
+          searchInput,
+          searchInputRemovalStream,
+          resultsEl: el.getValue(),
+          resultsElRemovalStream: removalStream,
+        }))
+    )
+    .flatMap(
+      ({
         searchInput,
         searchInputRemovalStream,
-        resultsEl: el.getValue(),
-        resultsElRemovalStream: removalStream
-      };
-    });
-  }).flatMap(_ref6 => {
-    let {
-      searchInput,
-      searchInputRemovalStream,
-      resultsEl,
-      resultsElRemovalStream
-    } = _ref6;
-    const inputs = _kefir.default.fromEvents(searchInput, 'input').takeUntilBy(searchInputRemovalStream).takeUntilBy(resultsElRemovalStream);
-    const enterAndTabPresses = _kefir.default.fromEvents(searchInput, 'keydown').filter(_ref7 => {
-      let {
-        keyCode
-      } = _ref7;
-      return keyCode === 13 || keyCode === 9;
-    }).takeUntilBy(searchInputRemovalStream).takeUntilBy(resultsElRemovalStream);
-    return inputs.map(event => ({
-      event,
-      searchInput,
-      resultsEl,
-      inputStream: inputs,
-      enterAndTabPresses,
-      resultsElRemovalStream
-    }));
-  }).flatMapLatest(item => {
-    const suggestionsResponse = driver.getPageCommunicator().ajaxInterceptStream.filter(_ref8 => {
-      let {
-        type
-      } = _ref8;
-      return type === 'searchSuggestionsReceieved';
-    });
-    const removalStream = _kefir.default.merge([
-    // Handle cleanup when a new search query is entered. We want to wait
-    // to remove our old results until *after* Inbox's results from the new
-    // query have come back, since that will allow our modifications to
-    // switch from old -> new in sync with Inbox's native suggestions.
-    // If we didn't wait on `suggestionsResponse` to trigger cleanup,
-    // Our modifications would disappear the moment the user started typing,
-    // which ends up looking jarring and inconsistent with Inbox's results
-    // which stick around until the new results are ready.
-    item.inputStream.take(1).flatMap(() => suggestionsResponse),
-    // Handle cleanup when the user deletes their entire search query.
-    item.inputStream.filter(_ref9 => {
-      let {
-        target: {
-          value
-        }
-      } = _ref9;
-      return value === '';
-    }), item.resultsElRemovalStream]).take(1);
-    return _kefir.default.combine([_kefir.default.fromPromise(Promise.resolve(handler(item.event.target.value))),
-    // Wait to send results to the UI until Inbox's results have come back
-    // to avoid rendering too soon.
-    suggestionsResponse.take(1)]).takeUntilBy(removalStream).map(_ref10 => {
-      let [results, _ignored] = _ref10;
-      return {
-        ...item,
-        removalStream,
-        results
-      };
-    });
-  }).takeUntilBy(stopper).flatMap(_ref11 => {
-    let {
-      resultsEl,
-      searchInput,
-      resultsElRemovalStream,
-      removalStream,
-      enterAndTabPresses,
-      results
-    } = _ref11;
-    try {
-      const validatedResults = (0, _copyAndValidateAutocompleteResults.default)(driver, results);
-      return _kefir.default.constant({
+        resultsEl,
+        resultsElRemovalStream,
+      }) => {
+        const inputs: Kefir.Observable<{ target: HTMLInputElement } & Event> =
+          Kefir.fromEvents(searchInput, 'input')
+            .takeUntilBy(searchInputRemovalStream)
+            .takeUntilBy(resultsElRemovalStream);
+
+        const enterAndTabPresses: Kefir.Observable<KeyboardEvent> =
+          Kefir.fromEvents(searchInput, 'keydown')
+            .filter(({ keyCode }) => keyCode === 13 || keyCode === 9)
+            .takeUntilBy(searchInputRemovalStream)
+            .takeUntilBy(resultsElRemovalStream);
+
+        return inputs.map((event) => ({
+          event,
+          searchInput,
+          resultsEl,
+          inputStream: inputs,
+          enterAndTabPresses,
+          resultsElRemovalStream,
+        }));
+      }
+    )
+    .flatMapLatest((item) => {
+      const suggestionsResponse = driver
+        .getPageCommunicator()
+        .ajaxInterceptStream.filter(
+          ({ type }) => type === 'searchSuggestionsReceieved'
+        );
+
+      const removalStream = Kefir.merge([
+        // Handle cleanup when a new search query is entered. We want to wait
+        // to remove our old results until *after* Inbox's results from the new
+        // query have come back, since that will allow our modifications to
+        // switch from old -> new in sync with Inbox's native suggestions.
+        // If we didn't wait on `suggestionsResponse` to trigger cleanup,
+        // Our modifications would disappear the moment the user started typing,
+        // which ends up looking jarring and inconsistent with Inbox's results
+        // which stick around until the new results are ready.
+        item.inputStream.take(1).flatMap(() => suggestionsResponse),
+
+        // Handle cleanup when the user deletes their entire search query.
+        item.inputStream.filter(({ target: { value } }) => value === ''),
+        item.resultsElRemovalStream,
+      ]).take(1);
+
+      return Kefir.combine([
+        Kefir.fromPromise(Promise.resolve(handler(item.event.target.value))),
+        // Wait to send results to the UI until Inbox's results have come back
+        // to avoid rendering too soon.
+        suggestionsResponse.take(1),
+      ])
+        .takeUntilBy(removalStream)
+        .map(([results, _ignored]: [Array<AutocompleteSearchResult>, any]) => ({
+          ...item,
+          removalStream,
+          results,
+        }));
+    })
+    .takeUntilBy(stopper)
+    .flatMap(
+      ({
         resultsEl,
         searchInput,
         resultsElRemovalStream,
         removalStream,
         enterAndTabPresses,
-        results: validatedResults
-      });
-    } catch (error) {
-      return _kefir.default.constantError(error);
-    }
-  }).filter(_ref12 => {
-    let {
-      results
-    } = _ref12;
-    return results.length > 0;
-  }).onError(error => driver.getLogger().error(error)).onValue(_ref13 => {
-    let {
-      resultsEl,
-      searchInput,
-      resultsElRemovalStream,
-      removalStream,
-      enterAndTabPresses,
-      results
-    } = _ref13;
-    (0, _setupCustomAutocompleteSelectionHandling.default)({
-      resultsEl,
-      resultsElRemovalStream,
-      searchInput
-    });
-    const suggestionsElement = renderResultsList({
-      driver,
-      searchInput,
-      removalStream,
-      results,
-      providerOrder
-    });
-    (0, _insertElementInOrder.default)(resultsEl, suggestionsElement);
-
-    // NOTE: Because we're manually overriding the 'display' property, we've
-    // basically taken responsibility for showing/hiding `resultsEl`
-    // since Inbox no longer knows when the element is truly visible.
-    // When we want to show results for a search term but Inbox doesn't have
-    // any results, we need to force the results element to be displayed.
-    // When Inbox hides the element it also removes a class that applies
-    // some padding adjustments, so we have to force that as well.
-    resultsEl.style.display = 'block';
-    resultsEl.style.padding = '6px 0';
-    removalStream.onValue(() => {
-      suggestionsElement.remove();
-
-      // Because we've mostly overridden Inbox's native show/hide logic we're
-      // responsible for hiding `resultsEl` in a couple removal cases:
-      // 1) when we go directly from only custom results to having
-      // no text in the search box.
-      // 2) when there are only custom results and the user subsequently
-      // enters a search that returns no results of any type.
-      if (searchInput.value === '' || resultsEl.matches(':empty')) {
-        resultsEl.style.display = 'none';
+        results,
+      }) => {
+        try {
+          const validatedResults = copyAndValidateAutocompleteResults(
+            driver,
+            results
+          );
+
+          return Kefir.constant({
+            resultsEl,
+            searchInput,
+            resultsElRemovalStream,
+            removalStream,
+            enterAndTabPresses,
+            results: validatedResults,
+          });
+        } catch (error) {
+          return Kefir.constantError(error);
+        }
       }
-    });
-
-    // We have to take over responsibility for hiding `resultsEl` when
-    // the user presses enter or tab because our other overrides prevent Inbox
-    // from handling this sensibly.
-    enterAndTabPresses.takeUntilBy(removalStream).take(1).onValue(() => {
-      resultsEl.style.display = 'none';
-    });
-
-    // When Inbox gets the *first* set of suggestions after opening search,
-    // it clears away the current children of the `resultsEl` element.
-    // When this happens, our modifications will get cleared away if
-    // we've already added them — this can happen if Inbox skips a turn of
-    // the event loop between getting the AJAX response back and rendering to
-    // the DOM. To handle this case, we watch `resultsEl` for mutations
-    // and re-add our modifications if they've been cleared.
-    // We also force `resultsEl` to show because the first time
-    // we display modifications that aren't accompanied by native results
-    // Inbox hides `resultsEl` after we force it to show. Because Inbox
-    // removes the previous search's results in the same event loop tick as
-    // hiding `resultsEl`, we can hook into the child element removal and
-    // re-show it before the hidden state gets painted to the screen.
-    // We need to stop this entire process when tab or enter is pressed,
-    // because if a custom result was selected when the key was pressed
-    // then Inbox will remove the native results that no longer match the
-    // search term — causing this observer to fire and subsequently
-    // re-show `resultsEl` just as we're trying to manually hide it.
-    (0, _makeMutationObserverChunkedStream.default)(resultsEl, {
-      childList: true
-    }).takeUntilBy(enterAndTabPresses).takeUntilBy(removalStream).onValue(() => {
-      resultsEl.style.display = 'block';
-      if (suggestionsElement.parentElement !== resultsEl) {
-        (0, _insertElementInOrder.default)(resultsEl, suggestionsElement);
+    )
+    .filter(({ results }) => results.length > 0)
+    .onError((error) => driver.getLogger().error(error))
+    .onValue(
+      ({
+        resultsEl,
+        searchInput,
+        resultsElRemovalStream,
+        removalStream,
+        enterAndTabPresses,
+        results,
+      }) => {
+        setupCustomAutocompleteSelectionHandling({
+          resultsEl,
+          resultsElRemovalStream,
+          searchInput,
+        });
+
+        const suggestionsElement = renderResultsList({
+          driver,
+          searchInput,
+          removalStream,
+          results,
+          providerOrder,
+        });
+
+        insertElementInOrder(resultsEl, suggestionsElement);
+
+        // NOTE: Because we're manually overriding the 'display' property, we've
+        // basically taken responsibility for showing/hiding `resultsEl`
+        // since Inbox no longer knows when the element is truly visible.
+        // When we want to show results for a search term but Inbox doesn't have
+        // any results, we need to force the results element to be displayed.
+        // When Inbox hides the element it also removes a class that applies
+        // some padding adjustments, so we have to force that as well.
+        resultsEl.style.display = 'block';
+        resultsEl.style.padding = '6px 0';
+
+        removalStream.onValue(() => {
+          suggestionsElement.remove();
+
+          // Because we've mostly overridden Inbox's native show/hide logic we're
+          // responsible for hiding `resultsEl` in a couple removal cases:
+          // 1) when we go directly from only custom results to having
+          // no text in the search box.
+          // 2) when there are only custom results and the user subsequently
+          // enters a search that returns no results of any type.
+          if (searchInput.value === '' || resultsEl.matches(':empty')) {
+            resultsEl.style.display = 'none';
+          }
+        });
+
+        // We have to take over responsibility for hiding `resultsEl` when
+        // the user presses enter or tab because our other overrides prevent Inbox
+        // from handling this sensibly.
+        enterAndTabPresses
+          .takeUntilBy(removalStream)
+          .take(1)
+          .onValue(() => {
+            resultsEl.style.display = 'none';
+          });
+
+        // When Inbox gets the *first* set of suggestions after opening search,
+        // it clears away the current children of the `resultsEl` element.
+        // When this happens, our modifications will get cleared away if
+        // we've already added them — this can happen if Inbox skips a turn of
+        // the event loop between getting the AJAX response back and rendering to
+        // the DOM. To handle this case, we watch `resultsEl` for mutations
+        // and re-add our modifications if they've been cleared.
+        // We also force `resultsEl` to show because the first time
+        // we display modifications that aren't accompanied by native results
+        // Inbox hides `resultsEl` after we force it to show. Because Inbox
+        // removes the previous search's results in the same event loop tick as
+        // hiding `resultsEl`, we can hook into the child element removal and
+        // re-show it before the hidden state gets painted to the screen.
+        // We need to stop this entire process when tab or enter is pressed,
+        // because if a custom result was selected when the key was pressed
+        // then Inbox will remove the native results that no longer match the
+        // search term — causing this observer to fire and subsequently
+        // re-show `resultsEl` just as we're trying to manually hide it.
+        makeMutationObserverChunkedStream(resultsEl, { childList: true })
+          .takeUntilBy(enterAndTabPresses)
+          .takeUntilBy(removalStream)
+          .onValue(() => {
+            resultsEl.style.display = 'block';
+            if (suggestionsElement.parentElement !== resultsEl) {
+              insertElementInOrder(resultsEl, suggestionsElement);
+            }
+          });
       }
-    });
-  });
+    );
+
   return () => stopper.destroy();
-}
+}