@findify/react-components/lib/components/autocomplete/Products/index.js

Findify react UI components

/**
 * @module components/autocomplete/Products
 */
import { useCallback } from 'react';
var styles = {
  "root": "findify-components-autocomplete--products",
  "view-all": "findify-components-autocomplete--products__view-all",
  "list": "findify-components-autocomplete--products__list",
  "grid-column-class": "findify-components-autocomplete--products__grid-column-class",
  "view-more-button": "findify-components-autocomplete--products__view-more-button",
  "viewAll": "findify-components-autocomplete--products__view-all",
  "gridColumnClass": "findify-components-autocomplete--products__grid-column-class",
  "viewMoreButton": "findify-components-autocomplete--products__view-more-button"
};
import ProductCard from "../../Cards/Product";
import Grid from "../../common/Grid";
import MapArray from "../../common/MapArray";
import { useItems, useQuery } from '@findify/react-connect';
import useTranslations from "../../../helpers/useTranslations";
import Title from "../BlockTitle";
import { emit } from "../../../helpers/emmiter";
import { jsx as _jsx } from "react/jsx-runtime";
import { jsxs as _jsxs } from "react/jsx-runtime";

var makeSearchUrl = function makeSearchUrl(query, config) {
  var prefix = config.getIn(['location', 'prefix']);
  var searchUrl = config.getIn(['location', 'searchUrl']);
  var defaultPathName = config.getIn(['location', 'defaultPath'], '');
  return "".concat(defaultPathName).concat(searchUrl, "?").concat(prefix ? prefix + '_' : '', "q=").concat(query);
};

export default (function (_ref) {
  var _ref$theme = _ref.theme,
      theme = _ref$theme === void 0 ? styles : _ref$theme,
      config = _ref.config,
      isTrendingSearches = _ref.isTrendingSearches,
      registerItems = _ref.registerItems,
      highlightedItem = _ref.highlightedItem;

  var _useItems = useItems(),
      items = _useItems.items,
      baseConfig = _useItems.config;

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

  var translate = useTranslations();
  var onViewAll = useCallback(function (e) {
    e.preventDefault();
    emit('search', baseConfig.get('widgetKey'), query.get('q') ? query.get('q') : '');
  }, [query]);
  registerItems(items, config.get('limit'));
  return items.size ? /*#__PURE__*/_jsxs("div", {
    className: theme.root,
    children: [/*#__PURE__*/_jsxs(Title, {
      children: [isTrendingSearches ? translate('autocomplete.trendingProducts') : translate('autocomplete.productMatches'), /*#__PURE__*/_jsx("a", {
        className: theme.viewAll,
        onClick: onViewAll,
        href: makeSearchUrl(query.get('q'), baseConfig),
        children: translate('autocomplete.viewAllResults')
      })]
    }), /*#__PURE__*/_jsx(Grid, {
      columns: config.getIn(['breakpoints', 'products'], '12'),
      gutter: 12,
      className: theme.list,
      children: MapArray({
        array: items,
        limit: config.get('limit'),
        factory: ProductCard,
        isAutocomplete: true,
        config: config.get('item'),
        mapProps: function mapProps(item) {
          return {
            highlighted: highlightedItem && item.hashCode() === highlightedItem.hashCode()
          };
        }
      })
    })]
  }) : null;
});