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

Generic block editor.

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

/**
 * GeChiUI dependencies
 */
import { useMemo, useState, useCallback } from '@gechiui/element';
import { _x } from '@gechiui/i18n';
import { useAsyncList } from '@gechiui/compose';
/**
 * Internal dependencies
 */

import PatternInserterPanel from './pattern-panel';
import usePatternsState from './hooks/use-patterns-state';
import BlockPatternList from '../block-patterns-list';
import PatternsExplorerModal from './block-patterns-explorer/explorer';

function BlockPatternsCategory(_ref) {
  let {
    rootClientId,
    onInsert,
    selectedCategory,
    populatedCategories
  } = _ref;
  const [allPatterns,, onClick] = usePatternsState(onInsert, rootClientId);
  const getPatternIndex = 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 = 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 = useMemo(() => {
    return currentCategoryPatterns.sort((a, b) => {
      return getPatternIndex(a) - getPatternIndex(b);
    });
  }, [currentCategoryPatterns, getPatternIndex]);
  const currentShownPatterns = useAsyncList(orderedPatterns);

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

  return createElement("div", {
    className: "block-editor-inserter__panel-content"
  }, createElement(BlockPatternList, {
    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] = useState(false);
  const [allPatterns, allCategories] = usePatternsState();
  const hasRegisteredCategory = 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 = 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: _x('Uncategorized')
      });
    }

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

export default BlockPatternsTabs;
//# sourceMappingURL=block-patterns-tab.js.map