UNPKG

@wordpress/block-editor

Version:
181 lines (179 loc) 7.15 kB
"use strict"; var __create = Object.create; var __defProp = Object.defineProperty; var __getOwnPropDesc = Object.getOwnPropertyDescriptor; var __getOwnPropNames = Object.getOwnPropertyNames; var __getProtoOf = Object.getPrototypeOf; var __hasOwnProp = Object.prototype.hasOwnProperty; var __export = (target, all) => { for (var name in all) __defProp(target, name, { get: all[name], enumerable: true }); }; var __copyProps = (to, from, except, desc) => { if (from && typeof from === "object" || typeof from === "function") { for (let key of __getOwnPropNames(from)) if (!__hasOwnProp.call(to, key) && key !== except) __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable }); } return to; }; var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps( // If the importer is in node compatibility mode or this is not an ESM // file that has been converted to a CommonJS file using a Babel- // compatible transform (i.e. "__esModule" has not been set), then set // "default" to the CommonJS "module.exports" for node compatibility. isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target, mod )); var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod); // packages/block-editor/src/components/inserter/block-patterns-explorer/pattern-list.js var pattern_list_exports = {}; __export(pattern_list_exports, { default: () => pattern_list_default }); module.exports = __toCommonJS(pattern_list_exports); var import_element = require("@wordpress/element"); var import_i18n = require("@wordpress/i18n"); var import_compose = require("@wordpress/compose"); var import_components = require("@wordpress/components"); var import_a11y = require("@wordpress/a11y"); var import_block_patterns_list = __toESM(require("../../block-patterns-list/index.cjs")); var import_use_insertion_point = __toESM(require("../hooks/use-insertion-point.cjs")); var import_use_patterns_state = __toESM(require("../hooks/use-patterns-state.cjs")); var import_inserter_listbox = __toESM(require("../../inserter-listbox/index.cjs")); var import_search_items = require("../search-items.cjs"); var import_block_patterns_paging = __toESM(require("../../block-patterns-paging/index.cjs")); var import_use_patterns_paging = __toESM(require("../hooks/use-patterns-paging.cjs")); var import_utils = require("../block-patterns-tab/utils.cjs"); var import_jsx_runtime = require("react/jsx-runtime"); function PatternsListHeader({ filterValue, filteredBlockPatternsLength }) { if (!filterValue) { return null; } return /* @__PURE__ */ (0, import_jsx_runtime.jsx)( import_components.__experimentalHeading, { level: 2, lineHeight: "48px", className: "block-editor-block-patterns-explorer__search-results-count", children: (0, import_i18n.sprintf)( /* translators: %d: number of patterns. */ (0, import_i18n._n)( "%d pattern found", "%d patterns found", filteredBlockPatternsLength ), filteredBlockPatternsLength ) } ); } function PatternList({ searchValue, selectedCategory, patternCategories, rootClientId, onModalClose }) { const container = (0, import_element.useRef)(); const debouncedSpeak = (0, import_compose.useDebounce)(import_a11y.speak, 500); const [destinationRootClientId, onInsertBlocks] = (0, import_use_insertion_point.default)({ rootClientId, shouldFocusBlock: true }); const [patterns, , onClickPattern] = (0, import_use_patterns_state.default)( onInsertBlocks, destinationRootClientId, selectedCategory ); const registeredPatternCategories = (0, import_element.useMemo)( () => patternCategories.map( (patternCategory) => patternCategory.name ), [patternCategories] ); const filteredBlockPatterns = (0, import_element.useMemo)(() => { const filteredPatterns = patterns.filter((pattern) => { if (selectedCategory === import_utils.allPatternsCategory.name) { return true; } if (selectedCategory === import_utils.myPatternsCategory.name && pattern.type === import_utils.INSERTER_PATTERN_TYPES.user) { return true; } if (selectedCategory === import_utils.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 (0, import_search_items.searchItems)(filteredPatterns, searchValue); }, [ searchValue, patterns, selectedCategory, registeredPatternCategories ]); (0, import_element.useEffect)(() => { if (!searchValue) { return; } const count = filteredBlockPatterns.length; const resultsFoundMessage = (0, import_i18n.sprintf)( /* translators: %d: number of results. */ (0, import_i18n._n)("%d result found.", "%d results found.", count), count ); debouncedSpeak(resultsFoundMessage); }, [searchValue, debouncedSpeak, filteredBlockPatterns.length]); const pagingProps = (0, import_use_patterns_paging.default)( filteredBlockPatterns, selectedCategory, container ); const [previousSearchValue, setPreviousSearchValue] = (0, import_element.useState)(searchValue); if (searchValue !== previousSearchValue) { setPreviousSearchValue(searchValue); pagingProps.changePage(1); } const hasItems = !!filteredBlockPatterns?.length; return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)( "div", { className: "block-editor-block-patterns-explorer__list", ref: container, children: [ /* @__PURE__ */ (0, import_jsx_runtime.jsx)( PatternsListHeader, { filterValue: searchValue, filteredBlockPatternsLength: filteredBlockPatterns.length } ), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_inserter_listbox.default, { children: hasItems && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [ /* @__PURE__ */ (0, import_jsx_runtime.jsx)( import_block_patterns_list.default, { blockPatterns: pagingProps.categoryPatterns, onClickPattern: (pattern, blocks) => { onClickPattern(pattern, blocks); onModalClose(); }, isDraggable: false } ), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_block_patterns_paging.default, { ...pagingProps }) ] }) }) ] } ); } var pattern_list_default = PatternList; //# sourceMappingURL=pattern-list.cjs.map