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

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

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

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

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

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

var _explorer = _interopRequireDefault(require("./block-patterns-explorer/explorer"));

/**
 * GeChiUI dependencies
 */

/**
 * Internal dependencies
 */
function BlockPatternsCategory(_ref) {
  let {
    rootClientId,
    onInsert,
    selectedCategory,
    populatedCategories
  } = _ref;
  const [allPatterns,, onClick] = (0, _usePatternsState.default)(onInsert, rootClientId);
  const getPatternIndex = (0, _element.useCallback)(pattern => {
    var _pattern$categories;

    if (!((_pattern$categories = pattern.categories) !== null && _pattern$categories !== void 0 && _pattern$categories.length)) {
      return Infinity;
    }

    const indexedCategories = populatedCategories.reduce((accumulator, _ref2, index) => {
      let {
        name
      } = _ref2;
      accumulator[name] = index;
      return accumulator;
    }, {});
    return Math.min(...pattern.categories.map(cat => indexedCategories[cat] !== undefined ? indexedCategories[cat] : Infinity));
  }, [populatedCategories]);
  const currentCategoryPatterns = (0, _element.useMemo)(() => allPatterns.filter(pattern => {
    var _pattern$categories2;

    return selectedCategory.name === 'uncategorized' ? getPatternIndex(pattern) === Infinity : (_pattern$categories2 = pattern.categories) === null || _pattern$categories2 === void 0 ? void 0 : _pattern$categories2.includes(selectedCategory.name);
  }), [allPatterns, selectedCategory]); // 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);

  if (!currentCategoryPatterns.length) {
    return null;
  }

  return (0, _element.createElement)("div", {
    className: "block-editor-inserter__panel-content"
  }, (0, _element.createElement)(_blockPatternsList.default, {
    shownPatterns: currentShownPatterns,
    blockPatterns: currentCategoryPatterns,
    onClickPattern: onClick,
    label: selectedCategory.label,
    orientation: "vertical",
    isDraggable: true
  }));
}

function BlockPatternsTabs(_ref3) {
  let {
    rootClientId,
    onInsert,
    onClickCategory,
    selectedCategory
  } = _ref3;
  const [showPatternsExplorer, setShowPatternsExplorer] = (0, _element.useState)(false);
  const [allPatterns, allCategories] = (0, _usePatternsState.default)();
  const hasRegisteredCategory = (0, _element.useCallback)(pattern => {
    if (!pattern.categories || !pattern.categories.length) {
      return false;
    }

    return pattern.categories.some(cat => allCategories.some(category => category.name === cat));
  }, [allCategories]); // Remove any empty categories

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

      return (_pattern$categories3 = pattern.categories) === null || _pattern$categories3 === void 0 ? void 0 : _pattern$categories3.includes(category.name);
    })).sort((_ref4, _ref5) => {
      let {
        name: currentName
      } = _ref4;
      let {
        name: nextName
      } = _ref5;

      if (![currentName, nextName].includes('featured')) {
        return 0;
      }

      return currentName === 'featured' ? -1 : 1;
    });

    if (allPatterns.some(pattern => !hasRegisteredCategory(pattern)) && !categories.find(category => category.name === 'uncategorized')) {
      categories.push({
        name: 'uncategorized',
        label: (0, _i18n._x)('Uncategorized')
      });
    }

    return categories;
  }, [allPatterns, allCategories]);
  const patternCategory = selectedCategory ? selectedCategory : populatedCategories[0];
  return (0, _element.createElement)(_element.Fragment, null, !showPatternsExplorer && (0, _element.createElement)(_element.Fragment, null, (0, _element.createElement)(_patternPanel.default, {
    selectedCategory: patternCategory,
    patternCategories: populatedCategories,
    onClickCategory: onClickCategory,
    openPatternExplorer: () => setShowPatternsExplorer(true)
  }), (0, _element.createElement)(BlockPatternsCategory, {
    rootClientId: rootClientId,
    onInsert: onInsert,
    selectedCategory: patternCategory,
    populatedCategories: populatedCategories
  })), showPatternsExplorer && (0, _element.createElement)(_explorer.default, {
    initialCategory: patternCategory,
    patternCategories: populatedCategories,
    onModalClose: () => setShowPatternsExplorer(false)
  }));
}

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