@wordpress/block-editor/build/components/inserter/search-results.js

Generic block editor.

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;

var _element = require("@wordpress/element");

var _i18n = require("@wordpress/i18n");

var _components = require("@wordpress/components");

var _compose = require("@wordpress/compose");

var _a11y = require("@wordpress/a11y");

var _data = require("@wordpress/data");

var _blockTypesList = _interopRequireDefault(require("../block-types-list"));

var _blockPatternsList = _interopRequireDefault(require("../block-patterns-list"));

var _inserterMenuExtension = _interopRequireDefault(require("../inserter-menu-extension"));

var _panel = _interopRequireDefault(require("./panel"));

var _noResults = _interopRequireDefault(require("./no-results"));

var _useInsertionPoint = _interopRequireDefault(require("./hooks/use-insertion-point"));

var _usePatternsState = _interopRequireDefault(require("./hooks/use-patterns-state"));

var _useBlockTypesState = _interopRequireDefault(require("./hooks/use-block-types-state"));

var _searchItems = require("./search-items");

var _inserterListbox = _interopRequireDefault(require("../inserter-listbox"));

var _sorting = require("../../utils/sorting");

var _orderInserterBlockItems = require("../../utils/order-inserter-block-items");

var _store = require("../../store");

/**
 * WordPress dependencies
 */

/**
 * Internal dependencies
 */
const INITIAL_INSERTER_RESULTS = 9;
/**
 * Shared reference to an empty array for cases where it is important to avoid
 * returning a new array reference on every invocation and rerendering the component.
 *
 * @type {Array}
 */

const EMPTY_ARRAY = [];

function InserterSearchResults({
  filterValue,
  onSelect,
  onHover,
  rootClientId,
  clientId,
  isAppender,
  __experimentalInsertionIndex,
  maxBlockPatterns,
  maxBlockTypes,
  showBlockDirectory = false,
  isDraggable = true,
  shouldFocusBlock = true,
  prioritizePatterns,
  selectBlockOnInsert
}) {
  const debouncedSpeak = (0, _compose.useDebounce)(_a11y.speak, 500);
  const {
    prioritizedBlocks
  } = (0, _data.useSelect)(select => {
    const blockListSettings = select(_store.store).getBlockListSettings(rootClientId);
    return {
      prioritizedBlocks: blockListSettings?.prioritizedInserterBlocks || EMPTY_ARRAY
    };
  }, [rootClientId]);
  const [destinationRootClientId, onInsertBlocks] = (0, _useInsertionPoint.default)({
    onSelect,
    rootClientId,
    clientId,
    isAppender,
    insertionIndex: __experimentalInsertionIndex,
    shouldFocusBlock,
    selectBlockOnInsert
  });
  const [blockTypes, blockTypeCategories, blockTypeCollections, onSelectBlockType] = (0, _useBlockTypesState.default)(destinationRootClientId, onInsertBlocks);
  const [patterns,, onSelectBlockPattern] = (0, _usePatternsState.default)(onInsertBlocks, destinationRootClientId);
  const filteredBlockPatterns = (0, _element.useMemo)(() => {
    if (maxBlockPatterns === 0) {
      return [];
    }

    const results = (0, _searchItems.searchItems)(patterns, filterValue);
    return maxBlockPatterns !== undefined ? results.slice(0, maxBlockPatterns) : results;
  }, [filterValue, patterns, maxBlockPatterns]);
  let maxBlockTypesToShow = maxBlockTypes;

  if (prioritizePatterns && filteredBlockPatterns.length > 2) {
    maxBlockTypesToShow = 0;
  }

  const filteredBlockTypes = (0, _element.useMemo)(() => {
    if (maxBlockTypesToShow === 0) {
      return [];
    }

    let orderedItems = (0, _sorting.orderBy)(blockTypes, 'frecency', 'desc');

    if (!filterValue && prioritizedBlocks.length) {
      orderedItems = (0, _orderInserterBlockItems.orderInserterBlockItems)(orderedItems, prioritizedBlocks);
    }

    const results = (0, _searchItems.searchBlockItems)(orderedItems, blockTypeCategories, blockTypeCollections, filterValue);
    return maxBlockTypesToShow !== undefined ? results.slice(0, maxBlockTypesToShow) : results;
  }, [filterValue, blockTypes, blockTypeCategories, blockTypeCollections, maxBlockTypesToShow, prioritizedBlocks]); // Announce search results on change.

  (0, _element.useEffect)(() => {
    if (!filterValue) {
      return;
    }

    const count = filteredBlockTypes.length + filteredBlockPatterns.length;
    const resultsFoundMessage = (0, _i18n.sprintf)(
    /* translators: %d: number of results. */
    (0, _i18n._n)('%d result found.', '%d results found.', count), count);
    debouncedSpeak(resultsFoundMessage);
  }, [filterValue, debouncedSpeak, filteredBlockTypes, filteredBlockPatterns]);
  const currentShownBlockTypes = (0, _compose.useAsyncList)(filteredBlockTypes, {
    step: INITIAL_INSERTER_RESULTS
  });
  const currentShownPatterns = (0, _compose.useAsyncList)(currentShownBlockTypes.length === filteredBlockTypes.length ? filteredBlockPatterns : EMPTY_ARRAY);
  const hasItems = filteredBlockTypes.length > 0 || filteredBlockPatterns.length > 0;
  const blocksUI = !!filteredBlockTypes.length && (0, _element.createElement)(_panel.default, {
    title: (0, _element.createElement)(_components.VisuallyHidden, null, (0, _i18n.__)('Blocks'))
  }, (0, _element.createElement)(_blockTypesList.default, {
    items: currentShownBlockTypes,
    onSelect: onSelectBlockType,
    onHover: onHover,
    label: (0, _i18n.__)('Blocks'),
    isDraggable: isDraggable
  }));
  const patternsUI = !!filteredBlockPatterns.length && (0, _element.createElement)(_panel.default, {
    title: (0, _element.createElement)(_components.VisuallyHidden, null, (0, _i18n.__)('Block Patterns'))
  }, (0, _element.createElement)("div", {
    className: "block-editor-inserter__quick-inserter-patterns"
  }, (0, _element.createElement)(_blockPatternsList.default, {
    shownPatterns: currentShownPatterns,
    blockPatterns: filteredBlockPatterns,
    onClickPattern: onSelectBlockPattern,
    onHover: onHover,
    isDraggable: isDraggable
  })));
  return (0, _element.createElement)(_inserterListbox.default, null, !showBlockDirectory && !hasItems && (0, _element.createElement)(_noResults.default, null), prioritizePatterns ? patternsUI : blocksUI, !!filteredBlockTypes.length && !!filteredBlockPatterns.length && (0, _element.createElement)("div", {
    className: "block-editor-inserter__quick-inserter-separator"
  }), prioritizePatterns ? blocksUI : patternsUI, showBlockDirectory && (0, _element.createElement)(_inserterMenuExtension.default.Slot, {
    fillProps: {
      onSelect: onSelectBlockType,
      onHover,
      filterValue,
      hasItems,
      rootClientId: destinationRootClientId
    }
  }, fills => {
    if (fills.length) {
      return fills;
    }

    if (!hasItems) {
      return (0, _element.createElement)(_noResults.default, null);
    }

    return null;
  }));
}

var _default = InserterSearchResults;
exports.default = _default;
//# sourceMappingURL=search-results.js.map