@wordpress/block-editor/build/components/inserter/block-patterns-explorer/patterns-list.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 _compose = require("@wordpress/compose");

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

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

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

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

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

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

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

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

/**
 * WordPress dependencies
 */

/**
 * Internal dependencies
 */
const INITIAL_INSERTER_RESULTS = 2;

function PatternsListHeader({
  filterValue,
  filteredBlockPatternsLength
}) {
  if (!filterValue) {
    return null;
  }

  return (0, _element.createElement)(_components.__experimentalHeading, {
    level: 2,
    lineHeight: '48px',
    className: "block-editor-block-patterns-explorer__search-results-count"
  }, (0, _i18n.sprintf)(
  /* translators: %d: number of patterns. %s: block pattern search query */
  (0, _i18n._n)('%1$d pattern found for "%2$s"', '%1$d patterns found for "%2$s"', filteredBlockPatternsLength), filteredBlockPatternsLength, filterValue));
}

function PatternList({
  filterValue,
  selectedCategory,
  patternCategories
}) {
  const debouncedSpeak = (0, _compose.useDebounce)(_a11y.speak, 500);
  const [destinationRootClientId, onInsertBlocks] = (0, _useInsertionPoint.default)({
    shouldFocusBlock: true
  });
  const [allPatterns,, onSelectBlockPattern] = (0, _usePatternsState.default)(onInsertBlocks, destinationRootClientId);
  const registeredPatternCategories = (0, _element.useMemo)(() => patternCategories.map(patternCategory => patternCategory.name), [patternCategories]);
  const filteredBlockPatterns = (0, _element.useMemo)(() => {
    if (!filterValue) {
      return allPatterns.filter(pattern => selectedCategory === 'uncategorized' ? !pattern.categories?.length || pattern.categories.every(category => !registeredPatternCategories.includes(category)) : pattern.categories?.includes(selectedCategory));
    }

    return (0, _searchItems.searchItems)(allPatterns, filterValue);
  }, [filterValue, selectedCategory, allPatterns]); // Announce search results on change.

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

    const count = 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]);
  const currentShownPatterns = (0, _compose.useAsyncList)(filteredBlockPatterns, {
    step: INITIAL_INSERTER_RESULTS
  });
  const hasItems = !!filteredBlockPatterns?.length;
  return (0, _element.createElement)("div", {
    className: "block-editor-block-patterns-explorer__list"
  }, hasItems && (0, _element.createElement)(PatternsListHeader, {
    filterValue: filterValue,
    filteredBlockPatternsLength: filteredBlockPatterns.length
  }), (0, _element.createElement)(_inserterListbox.default, null, !hasItems && (0, _element.createElement)(_noResults.default, null), hasItems && (0, _element.createElement)(_blockPatternsList.default, {
    shownPatterns: currentShownPatterns,
    blockPatterns: filteredBlockPatterns,
    onClickPattern: onSelectBlockPattern,
    isDraggable: false
  })));
}

var _default = PatternList;
exports.default = _default;
//# sourceMappingURL=patterns-list.js.map