@findify/react-components/lib/components/search/LazyResults/index.js

Findify react UI components

/**
 * @module components/search/LazyResults
 */
import { useConfig, usePagination } from '@findify/react-connect';
import MapArray from "../../common/MapArray";
import Grid from "../../common/Grid";
import ProductCard from "../../Cards/Product";
import Button from "../../Button";
import Text from "../../Text";
import useTranslations from "../../../helpers/useTranslations";
import PromoCard from "../../Cards/Promo";
var styles = {
  "root": "findify-components-search--lazy-results",
  "button-container": "findify-components-search--lazy-results__button-container",
  "next-button": "findify-components-search--lazy-results__next-button",
  "prev-button": "findify-components-search--lazy-results__prev-button",
  "buttonContainer": "findify-components-search--lazy-results__button-container",
  "nextButton": "findify-components-search--lazy-results__next-button",
  "prevButton": "findify-components-search--lazy-results__prev-button"
};
import useLazy from "../../../helpers/useLazy";
import useLazyPromos from "../../../helpers/useLazyPromos";
import { jsx as _jsx } from "react/jsx-runtime";
import { jsxs as _jsxs } from "react/jsx-runtime";

var LazyResults = function LazyResults(_ref) {
  var _getPageProps, _getPageProps2;

  var _ref$theme = _ref.theme,
      theme = _ref$theme === void 0 ? styles : _ref$theme,
      _ref$card = _ref.card,
      card = _ref$card === void 0 ? ProductCard : _ref$card,
      itemConfig = _ref.itemConfig;

  var _useLazy = useLazy(),
      container = _useLazy.container,
      onLoadNext = _useLazy.onLoadNext,
      onLoadPrev = _useLazy.onLoadPrev,
      displayPrevButton = _useLazy.displayPrevButton,
      displayNextButton = _useLazy.displayNextButton,
      items = _useLazy.items;

  var promos = useLazyPromos();

  var _useConfig = useConfig(),
      config = _useConfig.config;

  var _usePagination = usePagination(),
      getPageProps = _usePagination.getPageProps,
      current = _usePagination.current;

  var translate = useTranslations();
  return /*#__PURE__*/_jsxs("div", {
    ref: container,
    className: theme.root,
    role: "main",
    "aria-label": translate('search.title'),
    "aria-live": "polite",
    tabIndex: 0,
    children: [displayPrevButton ? /*#__PURE__*/_jsx("div", {
      className: theme.buttonContainer,
      children: /*#__PURE__*/_jsx(Button, {
        className: theme.prevButton,
        onClick: onLoadPrev,
        href: (_getPageProps = getPageProps(current - 1)) === null || _getPageProps === void 0 ? void 0 : _getPageProps.href,
        children: /*#__PURE__*/_jsx(Text, {
          primary: true,
          lowercase: true,
          children: translate('search.loadPrev')
        })
      })
    }) : null, /*#__PURE__*/_jsxs(Grid, {
      role: "list",
      wrapperComponent: "ul",
      columnComponent: "li",
      "aria-label": translate('search.title'),
      columns: config.getIn(['breakpoints', 'grid']),
      gutter: 12,
      children: [MapArray({
        config: itemConfig || config.get('product'),
        array: items,
        factory: card,
        isSearch: true
      }), MapArray({
        array: promos,
        factory: PromoCard,
        config: config.get('promo'),
        order: function order(item) {
          return item.get('position');
        }
      })]
    }), displayNextButton ? /*#__PURE__*/_jsx("div", {
      className: theme.buttonContainer,
      children: /*#__PURE__*/_jsx(Button, {
        className: theme.nextButton,
        onClick: onLoadNext,
        href: (_getPageProps2 = getPageProps(current + 1)) === null || _getPageProps2 === void 0 ? void 0 : _getPageProps2.href,
        children: /*#__PURE__*/_jsx(Text, {
          primary: true,
          lowercase: true,
          children: translate('search.loadMore')
        })
      })
    }) : null]
  });
};

export default LazyResults;