@wordpress/block-editor
Version:
126 lines (121 loc) • 5.43 kB
JavaScript
;
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.PatternCategoryPreviews = PatternCategoryPreviews;
var _element = require("@wordpress/element");
var _i18n = require("@wordpress/i18n");
var _components = require("@wordpress/components");
var _usePatternsState = _interopRequireDefault(require("../hooks/use-patterns-state"));
var _blockPatternsList = _interopRequireDefault(require("../../block-patterns-list"));
var _usePatternsPaging = _interopRequireDefault(require("../hooks/use-patterns-paging"));
var _patternsFilter = require("./patterns-filter");
var _usePatternCategories = require("./use-pattern-categories");
var _utils = require("./utils");
var _jsxRuntime = require("react/jsx-runtime");
/**
* WordPress dependencies
*/
/**
* Internal dependencies
*/
const noop = () => {};
function PatternCategoryPreviews({
rootClientId,
onInsert,
onHover = noop,
category,
showTitlesAsTooltip
}) {
const [allPatterns,, onClickPattern] = (0, _usePatternsState.default)(onInsert, rootClientId, category?.name);
const [patternSyncFilter, setPatternSyncFilter] = (0, _element.useState)('all');
const [patternSourceFilter, setPatternSourceFilter] = (0, _element.useState)('all');
const availableCategories = (0, _usePatternCategories.usePatternCategories)(rootClientId, patternSourceFilter);
const scrollContainerRef = (0, _element.useRef)();
const currentCategoryPatterns = (0, _element.useMemo)(() => allPatterns.filter(pattern => {
if ((0, _utils.isPatternFiltered)(pattern, patternSourceFilter, patternSyncFilter)) {
return false;
}
if (category.name === _utils.allPatternsCategory.name) {
return true;
}
if (category.name === _utils.myPatternsCategory.name && pattern.type === _utils.INSERTER_PATTERN_TYPES.user) {
return true;
}
if (category.name === _utils.starterPatternsCategory.name && pattern.blockTypes?.includes('core/post-content')) {
return true;
}
if (category.name === 'uncategorized') {
// The uncategorized category should show all the patterns without any category...
if (!pattern.categories) {
return true;
}
// ...or with no available category.
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 = (0, _usePatternsPaging.default)(currentCategoryPatterns, category, scrollContainerRef);
const {
changePage
} = pagingProps;
// Hide block pattern preview on unmount.
(0, _element.useEffect)(() => () => onHover(null), []);
const onSetPatternSyncFilter = (0, _element.useCallback)(value => {
setPatternSyncFilter(value);
changePage(1);
}, [setPatternSyncFilter, changePage]);
const onSetPatternSourceFilter = (0, _element.useCallback)(value => {
setPatternSourceFilter(value);
changePage(1);
}, [setPatternSourceFilter, changePage]);
return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_components.__experimentalVStack, {
spacing: 2,
className: "block-editor-inserter__patterns-category-panel-header",
children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_components.__experimentalHStack, {
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_components.FlexBlock, {
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.__experimentalHeading, {
className: "block-editor-inserter__patterns-category-panel-title",
size: 13,
level: 4,
as: "div",
children: category.label
})
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_patternsFilter.PatternsFilter, {
patternSyncFilter: patternSyncFilter,
patternSourceFilter: patternSourceFilter,
setPatternSyncFilter: onSetPatternSyncFilter,
setPatternSourceFilter: onSetPatternSourceFilter,
scrollContainerRef: scrollContainerRef,
category: category
})]
}), !currentCategoryPatterns.length && /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.__experimentalText, {
variant: "muted",
className: "block-editor-inserter__patterns-category-no-results",
children: (0, _i18n.__)('No results found')
})]
}), currentCategoryPatterns.length > 0 && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_components.__experimentalText, {
size: "12",
as: "p",
className: "block-editor-inserter__help-text",
children: (0, _i18n.__)('Drag and drop patterns into the canvas.')
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_blockPatternsList.default, {
ref: scrollContainerRef,
blockPatterns: pagingProps.categoryPatterns,
onClickPattern: onClickPattern,
onHover: onHover,
label: category.label,
orientation: "vertical",
category: category.name,
isDraggable: true,
showTitlesAsTooltip: showTitlesAsTooltip,
patternFilter: patternSourceFilter,
pagingProps: pagingProps
})]
})]
});
}
//# sourceMappingURL=pattern-category-previews.js.map