@wordpress/block-editor/build-module/components/inserter/block-patterns-explorer/patterns-list.js

Generic block editor.

import { createElement } from "@wordpress/element";

/**
 * WordPress dependencies
 */
import { useMemo, useEffect } from '@wordpress/element';
import { _n, sprintf } from '@wordpress/i18n';
import { useDebounce, useAsyncList } from '@wordpress/compose';
import { __experimentalHeading as Heading } from '@wordpress/components';
import { speak } from '@wordpress/a11y';
/**
 * Internal dependencies
 */

import BlockPatternsList from '../../block-patterns-list';
import InserterNoResults from '../no-results';
import useInsertionPoint from '../hooks/use-insertion-point';
import usePatternsState from '../hooks/use-patterns-state';
import InserterListbox from '../../inserter-listbox';
import { searchItems } from '../search-items';
const INITIAL_INSERTER_RESULTS = 2;

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

  return createElement(Heading, {
    level: 2,
    lineHeight: '48px',
    className: "block-editor-block-patterns-explorer__search-results-count"
  }, sprintf(
  /* translators: %d: number of patterns. %s: block pattern search query */
  _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 = useDebounce(speak, 500);
  const [destinationRootClientId, onInsertBlocks] = useInsertionPoint({
    shouldFocusBlock: true
  });
  const [allPatterns,, onSelectBlockPattern] = usePatternsState(onInsertBlocks, destinationRootClientId);
  const registeredPatternCategories = useMemo(() => patternCategories.map(patternCategory => patternCategory.name), [patternCategories]);
  const filteredBlockPatterns = useMemo(() => {
    if (!filterValue) {
      return allPatterns.filter(pattern => selectedCategory === 'uncategorized' ? !pattern.categories?.length || pattern.categories.every(category => !registeredPatternCategories.includes(category)) : pattern.categories?.includes(selectedCategory));
    }

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

  useEffect(() => {
    if (!filterValue) {
      return;
    }

    const count = filteredBlockPatterns.length;
    const resultsFoundMessage = sprintf(
    /* translators: %d: number of results. */
    _n('%d result found.', '%d results found.', count), count);
    debouncedSpeak(resultsFoundMessage);
  }, [filterValue, debouncedSpeak]);
  const currentShownPatterns = useAsyncList(filteredBlockPatterns, {
    step: INITIAL_INSERTER_RESULTS
  });
  const hasItems = !!filteredBlockPatterns?.length;
  return createElement("div", {
    className: "block-editor-block-patterns-explorer__list"
  }, hasItems && createElement(PatternsListHeader, {
    filterValue: filterValue,
    filteredBlockPatternsLength: filteredBlockPatterns.length
  }), createElement(InserterListbox, null, !hasItems && createElement(InserterNoResults, null), hasItems && createElement(BlockPatternsList, {
    shownPatterns: currentShownPatterns,
    blockPatterns: filteredBlockPatterns,
    onClickPattern: onSelectBlockPattern,
    isDraggable: false
  })));
}

export default PatternList;
//# sourceMappingURL=patterns-list.js.map