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

Generic block editor.

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

/**
 * GeChiUI dependencies
 */
import { useMemo, useEffect } from '@gechiui/element';
import { _n, sprintf } from '@gechiui/i18n';
import { useDebounce, useAsyncList } from '@gechiui/compose';
import { __experimentalHeading as Heading } from '@gechiui/components';
import { speak } from '@gechiui/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(_ref) {
  let {
    filterValue,
    filteredBlockPatternsLength
  } = _ref;

  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('为“%2$s”找到了 %1$d 个模式', '%1$d patterns found for "%2$s"', filteredBlockPatternsLength), filteredBlockPatternsLength, filterValue));
}

function PatternList(_ref2) {
  let {
    filterValue,
    selectedCategory,
    patternCategories
  } = _ref2;
  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 => {
        var _pattern$categories, _pattern$categories2;

        return selectedCategory === 'uncategorized' ? !((_pattern$categories = pattern.categories) !== null && _pattern$categories !== void 0 && _pattern$categories.length) || pattern.categories.every(category => !registeredPatternCategories.includes(category)) : (_pattern$categories2 = pattern.categories) === null || _pattern$categories2 === void 0 ? void 0 : _pattern$categories2.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 !== null && filteredBlockPatterns !== void 0 && 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