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

Findify react UI components

/**
 * @module components/autocomplete/Tip
 */
import { useCallback } from 'react';
var styles = {
  "tip": "findify-components-autocomplete--tip__tip",
  "highlight": "findify-components-autocomplete--tip__highlight"
};
import classnames from 'classnames';
import { useQuery } from '@findify/react-connect';
import { emit } from "../../../helpers/emmiter";
/** List of props that Tip accepts */

import { jsx as _jsx } from "react/jsx-runtime";
import { jsxs as _jsxs } from "react/jsx-runtime";
import { Fragment as _Fragment } from "react/jsx-runtime";
export default (function (_ref) {
  var className = _ref.className,
      title = _ref.title,
      zeroResultsTitle = _ref.zeroResultsTitle,
      _ref$theme = _ref.theme,
      theme = _ref$theme === void 0 ? styles : _ref$theme,
      widgetKey = _ref.widgetKey;

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

  var onClick = useCallback(function () {
    return emit('search', widgetKey, !query.get('q') ? '' : query.get('q'));
  }, [query]);
  return /*#__PURE__*/_jsxs(_Fragment, {
    children: [query.get('q') ? /*#__PURE__*/_jsxs("div", {
      className: classnames(theme.tip, className),
      onClick: onClick,
      children: [title, " ", /*#__PURE__*/_jsx("span", {
        className: theme.highlight,
        children: query.get('q')
      })]
    }) : null, !query.get('q') ? /*#__PURE__*/_jsx("div", {
      className: classnames(theme.tip, className),
      onClick: onClick,
      children: zeroResultsTitle
    }) : null]
  });
});