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

Findify react UI components

/**
 * @module components/autocomplete/Content
 */
import cx from 'classnames';
import ContentCard from "../../Cards/Content";
import Grid from "../../common/Grid";
import MapArray from "../../common/MapArray";
import { useContent } from '@findify/react-connect';
import Title from "../BlockTitle";
import { jsx as _jsx } from "react/jsx-runtime";
import { jsxs as _jsxs } from "react/jsx-runtime";
var styles = {
  "root": "findify-components-autocomplete--content",
  "container": "findify-components-autocomplete--content__container",
  "horizontal": "findify-components-autocomplete--content__horizontal"
};
export default (function (_ref) {
  var _ref$theme = _ref.theme,
      theme = _ref$theme === void 0 ? styles : _ref$theme,
      config = _ref.config,
      type = _ref.type,
      registerItems = _ref.registerItems,
      highlightedItem = _ref.highlightedItem;
  var isBubble = config.getIn(['item', 'template']) === 'bubble';
  var Container = isBubble ? 'div' : Grid;

  var _useContent = useContent({
    field: "content:".concat(type)
  }),
      items = _useContent.items;

  registerItems(items, config.get('limit'));
  return items.size ? /*#__PURE__*/_jsxs("div", {
    className: theme.root,
    children: [/*#__PURE__*/_jsx(Title, {
      children: config.get('title')
    }), /*#__PURE__*/_jsx(Container, {
      gutter: !isBubble && 12,
      columns: !isBubble && config.getIn(['breakpoints', type], '12'),
      className: cx(theme.container, theme[config.get('template')]),
      children: MapArray({
        array: items,
        limit: config.get('limit'),
        isAutocomplete: true,
        factory: ContentCard,
        config: config.get('item'),
        mapProps: function mapProps(item) {
          return {
            highlighted: highlightedItem && item.hashCode() === highlightedItem.hashCode()
          };
        }
      })
    })]
  }) : null;
});