@wordpress/block-editor/build/components/inserter/block-patterns-explorer/pattern-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 _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");
var _blockPatternsPaging = _interopRequireDefault(require("../../block-patterns-paging"));
var _usePatternsPaging = _interopRequireDefault(require("../hooks/use-patterns-paging"));
var _utils = require("../block-patterns-tab/utils");
var _jsxRuntime = require("react/jsx-runtime");
/**
 * WordPress dependencies
 */

/**
 * Internal dependencies
 */

function PatternsListHeader({
  filterValue,
  filteredBlockPatternsLength
}) {
  if (!filterValue) {
    return null;
  }
  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.__experimentalHeading, {
    level: 2,
    lineHeight: "48px",
    className: "block-editor-block-patterns-explorer__search-results-count",
    children: (0, _i18n.sprintf)(/* translators: %d: number of patterns. */
    (0, _i18n._n)('%d pattern found', '%d patterns found', filteredBlockPatternsLength), filteredBlockPatternsLength)
  });
}
function PatternList({
  searchValue,
  selectedCategory,
  patternCategories,
  rootClientId,
  onModalClose
}) {
  const container = (0, _element.useRef)();
  const debouncedSpeak = (0, _compose.useDebounce)(_a11y.speak, 500);
  const [destinationRootClientId, onInsertBlocks] = (0, _useInsertionPoint.default)({
    rootClientId,
    shouldFocusBlock: true
  });
  const [patterns,, onClickPattern] = (0, _usePatternsState.default)(onInsertBlocks, destinationRootClientId, selectedCategory);
  const registeredPatternCategories = (0, _element.useMemo)(() => patternCategories.map(patternCategory => patternCategory.name), [patternCategories]);
  const filteredBlockPatterns = (0, _element.useMemo)(() => {
    const filteredPatterns = patterns.filter(pattern => {
      if (selectedCategory === _utils.allPatternsCategory.name) {
        return true;
      }
      if (selectedCategory === _utils.myPatternsCategory.name && pattern.type === _utils.INSERTER_PATTERN_TYPES.user) {
        return true;
      }
      if (selectedCategory === _utils.starterPatternsCategory.name && pattern.blockTypes?.includes('core/post-content')) {
        return true;
      }
      if (selectedCategory === 'uncategorized') {
        var _pattern$categories$s;
        const hasKnownCategory = (_pattern$categories$s = pattern.categories?.some(category => registeredPatternCategories.includes(category))) !== null && _pattern$categories$s !== void 0 ? _pattern$categories$s : false;
        return !pattern.categories?.length || !hasKnownCategory;
      }
      return pattern.categories?.includes(selectedCategory);
    });
    if (!searchValue) {
      return filteredPatterns;
    }
    return (0, _searchItems.searchItems)(filteredPatterns, searchValue);
  }, [searchValue, patterns, selectedCategory, registeredPatternCategories]);

  // Announce search results on change.
  (0, _element.useEffect)(() => {
    if (!searchValue) {
      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);
  }, [searchValue, debouncedSpeak, filteredBlockPatterns.length]);
  const pagingProps = (0, _usePatternsPaging.default)(filteredBlockPatterns, selectedCategory, container);

  // Reset page when search value changes.
  const [previousSearchValue, setPreviousSearchValue] = (0, _element.useState)(searchValue);
  if (searchValue !== previousSearchValue) {
    setPreviousSearchValue(searchValue);
    pagingProps.changePage(1);
  }
  const hasItems = !!filteredBlockPatterns?.length;
  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
    className: "block-editor-block-patterns-explorer__list",
    ref: container,
    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(PatternsListHeader, {
      filterValue: searchValue,
      filteredBlockPatternsLength: filteredBlockPatterns.length
    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_inserterListbox.default, {
      children: hasItems && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_blockPatternsList.default, {
          blockPatterns: pagingProps.categoryPatterns,
          onClickPattern: (pattern, blocks) => {
            onClickPattern(pattern, blocks);
            onModalClose();
          },
          isDraggable: false
        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_blockPatternsPaging.default, {
          ...pagingProps
        })]
      })
    })]
  });
}
var _default = exports.default = PatternList;
//# sourceMappingURL=pattern-list.js.map