@findify/react-components/lib/layouts/Autocomplete/Sidebar/index.js

Findify react UI components

var styles = {
  "root": "findify-layouts--autocomplete--sidebar",
  "backdrop": "findify-layouts--autocomplete--sidebar__backdrop",
  "input": "findify-layouts--autocomplete--sidebar__input",
  "icons": "findify-layouts--autocomplete--sidebar__icons",
  "search-icon": "findify-layouts--autocomplete--sidebar__search-icon",
  "x-icon": "findify-layouts--autocomplete--sidebar__x-icon",
  "icon-divider": "findify-layouts--autocomplete--sidebar__icon-divider",
  "header": "findify-layouts--autocomplete--sidebar__header",
  "content": "findify-layouts--autocomplete--sidebar__content",
  "products": "findify-layouts--autocomplete--sidebar__products",
  "body-noscroll": "findify-layouts--autocomplete--sidebar__body-noscroll",
  "searchIcon": "findify-layouts--autocomplete--sidebar__search-icon",
  "xIcon": "findify-layouts--autocomplete--sidebar__x-icon",
  "iconDivider": "findify-layouts--autocomplete--sidebar__icon-divider",
  "bodyNoscroll": "findify-layouts--autocomplete--sidebar__body-noscroll"
};
import { useQuery, useSuggestions } from '@findify/react-connect';
import { useCallback, useEffect, useRef } from 'react';
import Drawer from "../../../components/common/Drawer";
import Icon from "../../../components/Icon";
import useTranslations from "../../../helpers/useTranslations";
import Layout from "../../../components/autocomplete/Layout";
import { jsx as _jsx } from "react/jsx-runtime";
import { jsxs as _jsxs } from "react/jsx-runtime";
export default (function (_ref) {
  var _ref$theme = _ref.theme,
      theme = _ref$theme === void 0 ? styles : _ref$theme,
      config = _ref.config;

  var _useSuggestions = useSuggestions(),
      suggestions = _useSuggestions.suggestions,
      update = _useSuggestions.update;

  var _useQuery = useQuery(),
      query = _useQuery.query;

  var translate = useTranslations();
  var input = useRef(null);
  var isTrendingSearches = !query.get('q');
  var onExit = useCallback(function () {
    window.findify.emit('autocompleteFocusLost', config.get('widgetKey'));
  }, []);
  var onSubmit = useCallback(function () {
    var _input$current;

    window.findify.emit('search', config.get('widgetKey'), (_input$current = input.current) === null || _input$current === void 0 ? void 0 : _input$current.value);
    onExit();
  }, []);
  var onInputChange = useCallback(function (e) {
    var value = e.target.value;
    update('q', value);
  }, []);
  var onFocusOut = useCallback(function (e) {
    e.stopImmediatePropagation();
    if (e.relatedTarget !== input.current) return;
  }, []);
  useEffect(function () {
    if (input.current) {
      setTimeout(function () {
        var _input$current2;

        return (_input$current2 = input.current) === null || _input$current2 === void 0 ? void 0 : _input$current2.focus();
      }, 500);
    }

    document.addEventListener('focusout', onFocusOut, true);
    return function () {
      document.removeEventListener('focusout', onFocusOut);
    };
  }, []);
  return /*#__PURE__*/_jsx(Drawer, {
    hideModal: onExit,
    children: /*#__PURE__*/_jsxs("div", {
      className: theme.root,
      "data-findify-autocomplete": true,
      tabIndex: 0,
      children: [config.get('overlay') ? /*#__PURE__*/_jsx("div", {
        className: theme.backdrop
      }) : null, /*#__PURE__*/_jsxs("div", {
        className: theme.header,
        children: [/*#__PURE__*/_jsx("form", {
          onSubmit: onSubmit,
          children: /*#__PURE__*/_jsx("input", {
            defaultValue: query.get('q'),
            className: theme.input,
            ref: input,
            onChange: onInputChange,
            placeholder: translate('autocomplete.placeholder')
          })
        }), /*#__PURE__*/_jsxs("div", {
          className: theme.icons,
          children: [/*#__PURE__*/_jsx(Icon, {
            onClick: onSubmit,
            className: theme.searchIcon,
            name: 'Search',
            width: 18,
            height: 18
          }), /*#__PURE__*/_jsx("div", {
            className: theme.iconDivider
          }), /*#__PURE__*/_jsx(Icon, {
            onClick: onExit,
            className: theme.xIcon,
            name: 'XMobile',
            width: 13,
            height: 13
          })]
        })]
      }), /*#__PURE__*/_jsx(Layout, {
        className: theme.content,
        config: config,
        isTrendingSearches: isTrendingSearches
      })]
    })
  });
});