@wordpress/block-editor
Version:
155 lines (154 loc) • 4.97 kB
JavaScript
// packages/block-editor/src/components/inserter/block-patterns-explorer/pattern-list.js
import { useMemo, useEffect, useRef, useState } from "@wordpress/element";
import { _n, sprintf } from "@wordpress/i18n";
import { useDebounce } from "@wordpress/compose";
import { __experimentalHeading as Heading } from "@wordpress/components";
import { speak } from "@wordpress/a11y";
import BlockPatternsList from "../../block-patterns-list";
import useInsertionPoint from "../hooks/use-insertion-point";
import usePatternsState from "../hooks/use-patterns-state";
import InserterListbox from "../../inserter-listbox";
import { searchItems } from "../search-items";
import BlockPatternsPaging from "../../block-patterns-paging";
import usePatternsPaging from "../hooks/use-patterns-paging";
import {
INSERTER_PATTERN_TYPES,
allPatternsCategory,
myPatternsCategory,
starterPatternsCategory
} from "../block-patterns-tab/utils";
import { Fragment, jsx, jsxs } from "react/jsx-runtime";
function PatternsListHeader({ filterValue, filteredBlockPatternsLength }) {
if (!filterValue) {
return null;
}
return /* @__PURE__ */ jsx(
Heading,
{
level: 2,
lineHeight: "48px",
className: "block-editor-block-patterns-explorer__search-results-count",
children: sprintf(
/* translators: %d: number of patterns. */
_n(
"%d pattern found",
"%d patterns found",
filteredBlockPatternsLength
),
filteredBlockPatternsLength
)
}
);
}
function PatternList({
searchValue,
selectedCategory,
patternCategories,
rootClientId,
onModalClose
}) {
const container = useRef();
const debouncedSpeak = useDebounce(speak, 500);
const [destinationRootClientId, onInsertBlocks] = useInsertionPoint({
rootClientId,
shouldFocusBlock: true
});
const [patterns, , onClickPattern] = usePatternsState(
onInsertBlocks,
destinationRootClientId,
selectedCategory
);
const registeredPatternCategories = useMemo(
() => patternCategories.map(
(patternCategory) => patternCategory.name
),
[patternCategories]
);
const filteredBlockPatterns = useMemo(() => {
const filteredPatterns = patterns.filter((pattern) => {
if (selectedCategory === allPatternsCategory.name) {
return true;
}
if (selectedCategory === myPatternsCategory.name && pattern.type === INSERTER_PATTERN_TYPES.user) {
return true;
}
if (selectedCategory === starterPatternsCategory.name && pattern.blockTypes?.includes("core/post-content")) {
return true;
}
if (selectedCategory === "uncategorized") {
const hasKnownCategory = pattern.categories?.some(
(category) => registeredPatternCategories.includes(category)
) ?? false;
return !pattern.categories?.length || !hasKnownCategory;
}
return pattern.categories?.includes(selectedCategory);
});
if (!searchValue) {
return filteredPatterns;
}
return searchItems(filteredPatterns, searchValue);
}, [
searchValue,
patterns,
selectedCategory,
registeredPatternCategories
]);
useEffect(() => {
if (!searchValue) {
return;
}
const count = filteredBlockPatterns.length;
const resultsFoundMessage = sprintf(
/* translators: %d: number of results. */
_n("%d result found.", "%d results found.", count),
count
);
debouncedSpeak(resultsFoundMessage);
}, [searchValue, debouncedSpeak, filteredBlockPatterns.length]);
const pagingProps = usePatternsPaging(
filteredBlockPatterns,
selectedCategory,
container
);
const [previousSearchValue, setPreviousSearchValue] = useState(searchValue);
if (searchValue !== previousSearchValue) {
setPreviousSearchValue(searchValue);
pagingProps.changePage(1);
}
const hasItems = !!filteredBlockPatterns?.length;
return /* @__PURE__ */ jsxs(
"div",
{
className: "block-editor-block-patterns-explorer__list",
ref: container,
children: [
/* @__PURE__ */ jsx(
PatternsListHeader,
{
filterValue: searchValue,
filteredBlockPatternsLength: filteredBlockPatterns.length
}
),
/* @__PURE__ */ jsx(InserterListbox, { children: hasItems && /* @__PURE__ */ jsxs(Fragment, { children: [
/* @__PURE__ */ jsx(
BlockPatternsList,
{
blockPatterns: pagingProps.categoryPatterns,
onClickPattern: (pattern, blocks) => {
onClickPattern(pattern, blocks);
onModalClose();
},
isDraggable: false
}
),
/* @__PURE__ */ jsx(BlockPatternsPaging, { ...pagingProps })
] }) })
]
}
);
}
var pattern_list_default = PatternList;
export {
pattern_list_default as default
};
//# sourceMappingURL=pattern-list.js.map