@atlaskit/editor-plugin-quick-insert/dist/es2019/ui/RegistryElementBrowser/RegistryElementBrowserSearchResults.js

Quick insert plugin for @atlaskit/editor-core

/* RegistryElementBrowserSearchResults.tsx generated by @compiled/babel-plugin v3.0.2 */
import "./RegistryElementBrowserSearchResults.compiled.css";
import { ax, ix } from "@compiled/react/runtime";
import React, { useMemo } from 'react';
import { useIntl } from 'react-intl';
import LinkButton from '@atlaskit/button/link';
import { QuickInsertProvider } from '@atlaskit/editor-common/quick-insert/provider';
import { Text } from '@atlaskit/primitives/compiled';
import NotFoundIllustration from './NotFoundIllustration';
const resultsGridStyles = null;
const emptyStateGridItemStyles = null;
const styles = {
  fallbackMarketplace: "_1i531l7x _15a5nqa1 _uwhke4h9 _19pkpxbi _ca0qpxbi"
};
const emptyStateWrapperStyles = null;
const emptyStateHeadingStyles = null;
const emptyStateSubheadingStyles = null;
const emptyStateLinkStyles = null;
const RegistryElementBrowserItem = ({
  editorView,
  isOffline,
  isSelected,
  item,
  onSelect
}) => {
  const {
    component: Component,
    key
  } = item.registration;
  const contextValue = useMemo(() => ({
    editorView,
    isOffline,
    item: {
      description: item.description,
      id: key,
      isSelected
    },
    select: handler => onSelect(key, handler),
    surface: 'element-browser'
  }), [editorView, isOffline, isSelected, item.description, key, onSelect]);
  if (!Component) {
    return null;
  }
  return /*#__PURE__*/React.createElement(QuickInsertProvider, {
    value: contextValue
  }, /*#__PURE__*/React.createElement(Component, undefined, null));
};
export const RegistryElementBrowserSearchResults = ({
  editorView,
  emptyStateHandler,
  fallbackItems,
  isLoading = false,
  isOffline,
  items,
  query,
  resultsId,
  section,
  selectedKey,
  onKeyDown,
  onSelect
}) => {
  var _emptyStateHandler;
  const {
    formatMessage
  } = useIntl();
  const hasFallbackItems = Boolean(!isLoading && items.length === 0 && query.trim().length > 0 && (fallbackItems === null || fallbackItems === void 0 ? void 0 : fallbackItems.length));
  const resultsLabel = formatMessage({
    defaultMessage: 'Element results',
    id: 'editor.quick-insert.results-label'
  });
  const displayedItems = hasFallbackItems ? fallbackItems !== null && fallbackItems !== void 0 ? fallbackItems : [] : items;
  const shouldRenderEmptyState = items.length === 0 && !isLoading;
  const emptyState = shouldRenderEmptyState ? (_emptyStateHandler = emptyStateHandler === null || emptyStateHandler === void 0 ? void 0 : emptyStateHandler({
    mode: 'full',
    searchTerm: query,
    selectedCategory: section,
    ...(hasFallbackItems ? {
      showNoResultsMessage: false
    } : {})
  })) !== null && _emptyStateHandler !== void 0 ? _emptyStateHandler : /*#__PURE__*/React.createElement("div", {
    className: ax(["_4cvr1h6o _1e0c1txw _2lx21bp4 _1bah1h6o _1bsb1osq"])
  }, /*#__PURE__*/React.createElement(NotFoundIllustration, null), /*#__PURE__*/React.createElement("div", {
    className: ax(["_11c81af2 _syazi7uo _19pk1ejb"])
  }, formatMessage({
    defaultMessage: 'Nothing matches your search',
    id: 'editor.quick-insert.empty'
  })), /*#__PURE__*/React.createElement("div", {
    className: ax(["_19pkpxbi _p12f1kdj _y3gn1h6o"])
  }, /*#__PURE__*/React.createElement(Text, null, formatMessage({
    defaultMessage: 'Try searching with a different term or discover new apps for Atlassian products.',
    id: 'editor.quick-insert.empty-description'
  })), /*#__PURE__*/React.createElement("div", {
    className: ax(["_19pkutpp"])
  }, /*#__PURE__*/React.createElement(LinkButton, {
    appearance: "primary",
    href: "https://marketplace.atlassian.com/search?category=Macros&hosting=cloud&product=confluence",
    target: "_blank"
  }, formatMessage({
    defaultMessage: 'Explore Atlassian Marketplace',
    id: 'editor.quick-insert.explore-marketplace'
  }))))) : null;
  return /*#__PURE__*/React.createElement("div", {
    "data-testid": "registry-element-browser-results",
    id: resultsId,
    tabIndex: -1
  }, displayedItems.length > 0 && /*#__PURE__*/React.createElement("div", {
    "aria-label": resultsLabel,
    onKeyDown: onKeyDown,
    role: "listbox",
    tabIndex: -1,
    className: ax(["_zulpu2gc _ae4vv2br _4cvrv2br _1e0c11p5 _yv0ei47z _16409sye _g98o1koq"])
  }, displayedItems.map(item => /*#__PURE__*/React.createElement(RegistryElementBrowserItem, {
    editorView: editorView,
    isOffline: isOffline,
    isSelected: selectedKey === item.registration.key,
    item: item,
    key: item.registration.key,
    onSelect: onSelect
  }))), emptyState && /*#__PURE__*/React.createElement("div", {
    className: ax(["_yyhyjvu9 _1ul9idpf _1bsb1osq", hasFallbackItems && styles.fallbackMarketplace])
  }, emptyState));
};