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

Findify react UI components

function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }

/**
 * @module components/autocomplete/SuggestionItem
 */
import cx from 'classnames';
import Icon from "../../Icon";
import escapeRegExp from 'lodash/escapeRegExp';
import { jsx as _jsx } from "react/jsx-runtime";
import { jsxs as _jsxs } from "react/jsx-runtime";
var styles = {
  "suggestion": "findify-components-autocomplete--suggestion-item__suggestion",
  "horizontal": "findify-components-autocomplete--suggestion-item__horizontal",
  "highlightedText": "findify-components-autocomplete--suggestion-item__highlightedText",
  "highlighted": "findify-components-autocomplete--suggestion-item__highlighted",
  "icon": "findify-components-autocomplete--suggestion-item__icon",
  "withIcon": "findify-components-autocomplete--suggestion-item__withIcon",
  "trending": "findify-components-autocomplete--suggestion-item__trending"
};
/**
 * Function used to return HTML markup for highlighting matching query in SearchSuggestion
 * @param value suggestion value
 * @param highlighted query that is entered in the Autocomplete
 * @param theme theme used by SuggestionItem
 */

function highlightSuggestion(value, highlighted, theme) {
  var regexp = new RegExp("(".concat(escapeRegExp(highlighted), ")"), 'i');
  return value.replace(regexp, "<span class=\"".concat(theme.highlightedText, "\">$1</span>"));
}
/**
 * Props that SuggestionItem accepts
 */


export default (function (_ref) {
  var _cx;

  var item = _ref.item,
      query = _ref.query,
      _ref$theme = _ref.theme,
      theme = _ref$theme === void 0 ? styles : _ref$theme,
      highlighted = _ref.highlighted,
      icon = _ref.icon,
      isTrendingSearches = _ref.isTrendingSearches,
      template = _ref.template;
  var value = item === null || item === void 0 ? void 0 : item.get('value');
  return value ? /*#__PURE__*/_jsxs("li", {
    onClick: item.onClick,
    role: "option",
    id: "suggestion-".concat(Math.abs(item.hashCode())),
    "aria-selected": highlighted,
    className: cx(theme.suggestion, theme[template], (_cx = {}, _defineProperty(_cx, theme.highlighted, highlighted), _defineProperty(_cx, theme.withIcon, !!icon), _defineProperty(_cx, theme.trending, isTrendingSearches), _cx)),
    children: [icon ? /*#__PURE__*/_jsx(Icon, {
      name: icon,
      className: theme.icon,
      width: 14,
      height: 14
    }) : null, /*#__PURE__*/_jsx("span", {
      dangerouslySetInnerHTML: {
        __html: highlightSuggestion(value, query.get('q'), theme)
      }
    })]
  }) : null;
});