@inboxsdk/core 0.2.28-alpha.4 → 0.2.28-alpha.5

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

@@ -1,317 +1,301 @@
-/* @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';
-
+"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"));
 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 = ({ driver, searchInput, result, event }) => {
+const handleResultChosen = _ref => {
+  let {
+    driver,
+    searchInput,
+    result,
+    event
+  } = _ref;
   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 = ({
-  driver,
-  searchInput,
-  removalStream,
-  results,
-  providerOrder,
-}) => {
+const renderResultsList = _ref2 => {
+  let {
+    driver,
+    searchInput,
+    removalStream,
+    results,
+    providerOrder
+  } = _ref2;
   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
-        ? autoHtml`
+    const description = result.description || result.descriptionHTML ? (0, _autoHtml.default)`
       <span class="inboxsdk__search_suggestion_desc">
-        ${result.description || { __html: (result.descriptionHTML: any) }}
+        ${result.description || {
+      __html: result.descriptionHTML
+    }}
       </span>
-    `
-        : '';
-
+    ` : '';
     listItem.classList.add('inboxsdk__search_suggestion');
-    listItem.innerHTML = autoHtml`
+    listItem.innerHTML = (0, _autoHtml.default)`
       <img src="${result.iconUrl || DEFAULT_RESULT_ICON}">
       <span>
         <span class="inboxsdk__search_suggestion_name" role="option">
-          ${result.name || { __html: (result.nameHTML: any) }}
+          ${result.name || {
+      __html: result.nameHTML
+    }}
         </span>
-        ${{ __html: description }}
+        ${{
+      __html: description
+    }}
       </span>
     `;
-
-    Kefir.fromEvents(listItem, 'click')
-      .takeUntilBy(removalStream)
-      .onValue((event: MouseEvent) =>
-        handleResultChosen({ driver, searchInput, result, event })
-      );
-
+    _kefir.default.fromEvents(listItem, 'click').takeUntilBy(removalStream).onValue(event => handleResultChosen({
+      driver,
+      searchInput,
+      result,
+      event
+    }));
     container.appendChild(listItem);
   });
-
   return container;
 };
-
-export default function registerSearchSuggestionsProvider(
-  driver: InboxDriver,
-  handler: (string) => Promise<Array<AutocompleteSearchResult>>
-) {
-  const stopper = kefirStopper();
+function registerSearchSuggestionsProvider(driver, handler) {
+  const stopper = (0, _kefirStopper.default)();
   const providerOrder = getProviderOrder();
-
-  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(
-      ({
+  (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,
-        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,
+        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 {
         searchInput,
-        resultsElRemovalStream,
-        removalStream,
-        enterAndTabPresses,
-        results,
-      }) => {
-        try {
-          const validatedResults = copyAndValidateAutocompleteResults(
-            driver,
-            results
-          );
-
-          return Kefir.constant({
-            resultsEl,
-            searchInput,
-            resultsElRemovalStream,
-            removalStream,
-            enterAndTabPresses,
-            results: validatedResults,
-          });
-        } catch (error) {
-          return Kefir.constantError(error);
+        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
         }
-      }
-    )
-    .filter(({ results }) => results.length > 0)
-    .onError((error) => driver.getLogger().error(error))
-    .onValue(
-      ({
+      } = _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,
         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);
-            }
-          });
+        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';
       }
-    );
-
+    });
+
+    // 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);
+      }
+    });
+  });
   return () => stopper.destroy();
-}
+}