@wordpress/block-editor/build/components/inserter/block-patterns-tab.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 _lodash = require("lodash");

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

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

var _patternPanel = _interopRequireDefault(require("./pattern-panel"));

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

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

/**
 * External dependencies
 */

/**
 * WordPress dependencies
 */

/**
 * Internal dependencies
 */
function BlockPatternsCategory({
  rootClientId,
  onInsert,
  selectedCategory,
  onClickCategory
}) {
  const [allPatterns, allCategories, onClick] = (0, _usePatternsState.default)(onInsert, rootClientId); // Remove any empty categories

  const populatedCategories = (0, _element.useMemo)(() => allCategories.filter(category => allPatterns.some(pattern => {
    var _pattern$categories;

    return (_pattern$categories = pattern.categories) === null || _pattern$categories === void 0 ? void 0 : _pattern$categories.includes(category.name);
  })), [allPatterns, allCategories]);
  const patternCategory = selectedCategory ? selectedCategory : populatedCategories[0];
  (0, _element.useEffect)(() => {
    if (allPatterns.some(pattern => getPatternIndex(pattern) === Infinity) && !populatedCategories.find(category => category.name === 'uncategorized')) {
      populatedCategories.push({
        name: 'uncategorized',
        label: (0, _i18n._x)('Uncategorized')
      });
    }
  }, [populatedCategories, allPatterns]);
  const getPatternIndex = (0, _element.useCallback)(pattern => {
    if (!pattern.categories || !pattern.categories.length) {
      return Infinity;
    }

    const indexedCategories = (0, _lodash.fromPairs)(populatedCategories.map(({
      name
    }, index) => [name, index]));
    return Math.min(...pattern.categories.map(cat => indexedCategories[cat] !== undefined ? indexedCategories[cat] : Infinity));
  }, [populatedCategories]);
  const currentCategoryPatterns = (0, _element.useMemo)(() => allPatterns.filter(pattern => patternCategory.name === 'uncategorized' ? getPatternIndex(pattern) === Infinity : pattern.categories && pattern.categories.includes(patternCategory.name)), [allPatterns, patternCategory]); // Ordering the patterns is important for the async rendering.

  const orderedPatterns = (0, _element.useMemo)(() => {
    return currentCategoryPatterns.sort((a, b) => {
      return getPatternIndex(a) - getPatternIndex(b);
    });
  }, [currentCategoryPatterns, getPatternIndex]);
  const currentShownPatterns = (0, _compose.useAsyncList)(orderedPatterns);
  return (0, _element.createElement)(_element.Fragment, null, !!currentCategoryPatterns.length && (0, _element.createElement)(_patternPanel.default, {
    selectedCategory: patternCategory,
    patternCategories: populatedCategories,
    onClickCategory: onClickCategory
  }, (0, _element.createElement)(_blockPatternsList.default, {
    shownPatterns: currentShownPatterns,
    blockPatterns: currentCategoryPatterns,
    onClickPattern: onClick,
    label: patternCategory.label,
    orientation: "vertical",
    isDraggable: true
  })));
}

function BlockPatternsTabs({
  rootClientId,
  onInsert,
  onClickCategory,
  selectedCategory
}) {
  return (0, _element.createElement)(BlockPatternsCategory, {
    rootClientId: rootClientId,
    selectedCategory: selectedCategory,
    onInsert: onInsert,
    onClickCategory: onClickCategory
  });
}

var _default = BlockPatternsTabs;
exports.default = _default;
//# sourceMappingURL=block-patterns-tab.js.map