@gechiui/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("@gechiui/element");

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

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

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

var _a11y = require("@gechiui/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");

/**
 * GeChiUI dependencies
 */

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

function PatternsListHeader(_ref) {
  let {
    filterValue,
    filteredBlockPatternsLength
  } = _ref;

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

function PatternList(_ref2) {
  let {
    filterValue,
    selectedCategory,
    patternCategories
  } = _ref2;
  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 => {
        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 (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 !== null && filteredBlockPatterns !== void 0 && 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