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

Quick insert plugin for @atlaskit/editor-core

/* RegistryElementBrowserSearchResults.tsx generated by @compiled/babel-plugin v3.0.2 */
"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
var _typeof = require("@babel/runtime/helpers/typeof");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.RegistryElementBrowserSearchResults = void 0;
require("./RegistryElementBrowserSearchResults.compiled.css");
var _runtime = require("@compiled/react/runtime");
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
var _react = _interopRequireWildcard(require("react"));
var _reactIntl = require("react-intl");
var _link = _interopRequireDefault(require("@atlaskit/button/link"));
var _provider = require("@atlaskit/editor-common/quick-insert/provider");
var _compiled = require("@atlaskit/primitives/compiled");
var _NotFoundIllustration = _interopRequireDefault(require("./NotFoundIllustration"));
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
var resultsGridStyles = null;
var emptyStateGridItemStyles = null;
var styles = {
  fallbackMarketplace: "_1i531l7x _15a5nqa1 _uwhke4h9 _19pkpxbi _ca0qpxbi"
};
var emptyStateWrapperStyles = null;
var emptyStateHeadingStyles = null;
var emptyStateSubheadingStyles = null;
var emptyStateLinkStyles = null;
var RegistryElementBrowserItem = function RegistryElementBrowserItem(_ref) {
  var editorView = _ref.editorView,
    isOffline = _ref.isOffline,
    isSelected = _ref.isSelected,
    item = _ref.item,
    onSelect = _ref.onSelect;
  var _item$registration = item.registration,
    Component = _item$registration.component,
    key = _item$registration.key;
  var contextValue = (0, _react.useMemo)(function () {
    return {
      editorView: editorView,
      isOffline: isOffline,
      item: {
        description: item.description,
        id: key,
        isSelected: isSelected
      },
      select: function select(handler) {
        return onSelect(key, handler);
      },
      surface: 'element-browser'
    };
  }, [editorView, isOffline, isSelected, item.description, key, onSelect]);
  if (!Component) {
    return null;
  }
  return /*#__PURE__*/_react.default.createElement(_provider.QuickInsertProvider, {
    value: contextValue
  }, /*#__PURE__*/_react.default.createElement(Component, undefined, null));
};
var RegistryElementBrowserSearchResults = exports.RegistryElementBrowserSearchResults = function RegistryElementBrowserSearchResults(_ref2) {
  var _emptyStateHandler;
  var editorView = _ref2.editorView,
    emptyStateHandler = _ref2.emptyStateHandler,
    fallbackItems = _ref2.fallbackItems,
    _ref2$isLoading = _ref2.isLoading,
    isLoading = _ref2$isLoading === void 0 ? false : _ref2$isLoading,
    isOffline = _ref2.isOffline,
    items = _ref2.items,
    query = _ref2.query,
    resultsId = _ref2.resultsId,
    section = _ref2.section,
    selectedKey = _ref2.selectedKey,
    onKeyDown = _ref2.onKeyDown,
    onSelect = _ref2.onSelect;
  var _useIntl = (0, _reactIntl.useIntl)(),
    formatMessage = _useIntl.formatMessage;
  var hasFallbackItems = Boolean(!isLoading && items.length === 0 && query.trim().length > 0 && (fallbackItems === null || fallbackItems === void 0 ? void 0 : fallbackItems.length));
  var resultsLabel = formatMessage({
    defaultMessage: 'Element results',
    id: 'editor.quick-insert.results-label'
  });
  var displayedItems = hasFallbackItems ? fallbackItems !== null && fallbackItems !== void 0 ? fallbackItems : [] : items;
  var shouldRenderEmptyState = items.length === 0 && !isLoading;
  var emptyState = shouldRenderEmptyState ? (_emptyStateHandler = emptyStateHandler === null || emptyStateHandler === void 0 ? void 0 : emptyStateHandler(_objectSpread({
    mode: 'full',
    searchTerm: query,
    selectedCategory: section
  }, hasFallbackItems ? {
    showNoResultsMessage: false
  } : {}))) !== null && _emptyStateHandler !== void 0 ? _emptyStateHandler : /*#__PURE__*/_react.default.createElement("div", {
    className: (0, _runtime.ax)(["_4cvr1h6o _1e0c1txw _2lx21bp4 _1bah1h6o _1bsb1osq"])
  }, /*#__PURE__*/_react.default.createElement(_NotFoundIllustration.default, null), /*#__PURE__*/_react.default.createElement("div", {
    className: (0, _runtime.ax)(["_11c81af2 _syazi7uo _19pk1ejb"])
  }, formatMessage({
    defaultMessage: 'Nothing matches your search',
    id: 'editor.quick-insert.empty'
  })), /*#__PURE__*/_react.default.createElement("div", {
    className: (0, _runtime.ax)(["_19pkpxbi _p12f1kdj _y3gn1h6o"])
  }, /*#__PURE__*/_react.default.createElement(_compiled.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.default.createElement("div", {
    className: (0, _runtime.ax)(["_19pkutpp"])
  }, /*#__PURE__*/_react.default.createElement(_link.default, {
    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.default.createElement("div", {
    "data-testid": "registry-element-browser-results",
    id: resultsId,
    tabIndex: -1
  }, displayedItems.length > 0 && /*#__PURE__*/_react.default.createElement("div", {
    "aria-label": resultsLabel,
    onKeyDown: onKeyDown,
    role: "listbox",
    tabIndex: -1,
    className: (0, _runtime.ax)(["_zulpu2gc _ae4vv2br _4cvrv2br _1e0c11p5 _yv0ei47z _16409sye _g98o1koq"])
  }, displayedItems.map(function (item) {
    return /*#__PURE__*/_react.default.createElement(RegistryElementBrowserItem, {
      editorView: editorView,
      isOffline: isOffline,
      isSelected: selectedKey === item.registration.key,
      item: item,
      key: item.registration.key,
      onSelect: onSelect
    });
  })), emptyState && /*#__PURE__*/_react.default.createElement("div", {
    className: (0, _runtime.ax)(["_yyhyjvu9 _1ul9idpf _1bsb1osq", hasFallbackItems && styles.fallbackMarketplace])
  }, emptyState));
};