@wordpress/block-editor
Version:
79 lines (71 loc) • 2.08 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
var _element = require("@wordpress/element");
var _components = require("@wordpress/components");
var _i18n = require("@wordpress/i18n");
/**
* WordPress dependencies
*/
function PatternCategoriesList({
selectedCategory,
patternCategories,
onClickCategory
}) {
const baseClassName = 'block-editor-block-patterns-explorer__sidebar';
return (0, _element.createElement)("div", {
className: `${baseClassName}__categories-list`
}, patternCategories.map(({
name,
label
}) => {
return (0, _element.createElement)(_components.Button, {
key: name,
label: label,
className: `${baseClassName}__categories-list__item`,
isPressed: selectedCategory === name,
onClick: () => {
onClickCategory(name);
}
}, label);
}));
}
function PatternsExplorerSearch({
filterValue,
setFilterValue
}) {
const baseClassName = 'block-editor-block-patterns-explorer__search';
return (0, _element.createElement)("div", {
className: baseClassName
}, (0, _element.createElement)(_components.SearchControl, {
__nextHasNoMarginBottom: true,
onChange: setFilterValue,
value: filterValue,
label: (0, _i18n.__)('Search for patterns'),
placeholder: (0, _i18n.__)('Search')
}));
}
function PatternExplorerSidebar({
selectedCategory,
patternCategories,
onClickCategory,
filterValue,
setFilterValue
}) {
const baseClassName = 'block-editor-block-patterns-explorer__sidebar';
return (0, _element.createElement)("div", {
className: baseClassName
}, (0, _element.createElement)(PatternsExplorerSearch, {
filterValue: filterValue,
setFilterValue: setFilterValue
}), !filterValue && (0, _element.createElement)(PatternCategoriesList, {
selectedCategory: selectedCategory,
patternCategories: patternCategories,
onClickCategory: onClickCategory
}));
}
var _default = PatternExplorerSidebar;
exports.default = _default;
//# sourceMappingURL=sidebar.js.map