@wordpress/block-editor/build-module/components/inserter/block-patterns-tab/pattern-category-previews.js

Generic block editor.

// packages/block-editor/src/components/inserter/block-patterns-tab/pattern-category-previews.js
import {
  useMemo,
  useState,
  useCallback,
  useRef,
  useEffect
} from "@wordpress/element";
import { __ } from "@wordpress/i18n";
import {
  __experimentalHStack as HStack,
  __experimentalVStack as VStack,
  __experimentalHeading as Heading,
  __experimentalText as Text,
  FlexBlock
} from "@wordpress/components";
import usePatternsState from "../hooks/use-patterns-state";
import BlockPatternsList from "../../block-patterns-list";
import usePatternsPaging from "../hooks/use-patterns-paging";
import { PatternsFilter } from "./patterns-filter";
import { usePatternCategories } from "./use-pattern-categories";
import {
  isPatternFiltered,
  allPatternsCategory,
  myPatternsCategory,
  starterPatternsCategory,
  INSERTER_PATTERN_TYPES
} from "./utils";
import { Fragment, jsx, jsxs } from "react/jsx-runtime";
var noop = () => {
};
function PatternCategoryPreviews({
  rootClientId,
  onInsert,
  onHover = noop,
  category,
  showTitlesAsTooltip
}) {
  const [allPatterns, , onClickPattern] = usePatternsState(
    onInsert,
    rootClientId,
    category?.name
  );
  const [patternSyncFilter, setPatternSyncFilter] = useState("all");
  const [patternSourceFilter, setPatternSourceFilter] = useState("all");
  const availableCategories = usePatternCategories(
    rootClientId,
    patternSourceFilter
  );
  const scrollContainerRef = useRef();
  const currentCategoryPatterns = useMemo(
    () => allPatterns.filter((pattern) => {
      if (isPatternFiltered(
        pattern,
        patternSourceFilter,
        patternSyncFilter
      )) {
        return false;
      }
      if (category.name === allPatternsCategory.name) {
        return true;
      }
      if (category.name === myPatternsCategory.name && pattern.type === INSERTER_PATTERN_TYPES.user) {
        return true;
      }
      if (category.name === starterPatternsCategory.name && pattern.blockTypes?.includes("core/post-content")) {
        return true;
      }
      if (category.name === "uncategorized") {
        if (!pattern.categories) {
          return true;
        }
        return !pattern.categories.some(
          (catName) => availableCategories.some((c) => c.name === catName)
        );
      }
      return pattern.categories?.includes(category.name);
    }),
    [
      allPatterns,
      availableCategories,
      category.name,
      patternSourceFilter,
      patternSyncFilter
    ]
  );
  const pagingProps = usePatternsPaging(
    currentCategoryPatterns,
    category,
    scrollContainerRef
  );
  const { changePage } = pagingProps;
  useEffect(() => () => onHover(null), []);
  const onSetPatternSyncFilter = useCallback(
    (value) => {
      setPatternSyncFilter(value);
      changePage(1);
    },
    [setPatternSyncFilter, changePage]
  );
  const onSetPatternSourceFilter = useCallback(
    (value) => {
      setPatternSourceFilter(value);
      changePage(1);
    },
    [setPatternSourceFilter, changePage]
  );
  return /* @__PURE__ */ jsxs(Fragment, { children: [
    /* @__PURE__ */ jsxs(
      VStack,
      {
        spacing: 2,
        className: "block-editor-inserter__patterns-category-panel-header",
        children: [
          /* @__PURE__ */ jsxs(HStack, { children: [
            /* @__PURE__ */ jsx(FlexBlock, { children: /* @__PURE__ */ jsx(
              Heading,
              {
                className: "block-editor-inserter__patterns-category-panel-title",
                size: 13,
                level: 4,
                as: "div",
                children: category.label
              }
            ) }),
            /* @__PURE__ */ jsx(
              PatternsFilter,
              {
                patternSyncFilter,
                patternSourceFilter,
                setPatternSyncFilter: onSetPatternSyncFilter,
                setPatternSourceFilter: onSetPatternSourceFilter,
                scrollContainerRef,
                category
              }
            )
          ] }),
          !currentCategoryPatterns.length && /* @__PURE__ */ jsx(
            Text,
            {
              variant: "muted",
              className: "block-editor-inserter__patterns-category-no-results",
              children: __("No results found")
            }
          )
        ]
      }
    ),
    currentCategoryPatterns.length > 0 && /* @__PURE__ */ jsxs(Fragment, { children: [
      /* @__PURE__ */ jsx(
        Text,
        {
          size: "12",
          as: "p",
          className: "block-editor-inserter__help-text",
          children: __("Drag and drop patterns into the canvas.")
        }
      ),
      /* @__PURE__ */ jsx(
        BlockPatternsList,
        {
          ref: scrollContainerRef,
          blockPatterns: pagingProps.categoryPatterns,
          onClickPattern,
          onHover,
          label: category.label,
          orientation: "vertical",
          category: category.name,
          isDraggable: true,
          showTitlesAsTooltip,
          patternFilter: patternSourceFilter,
          pagingProps
        }
      )
    ] })
  ] });
}
export {
  PatternCategoryPreviews
};
//# sourceMappingURL=pattern-category-previews.js.map