@wordpress/block-editor
Version:
76 lines (74 loc) • 2.25 kB
JavaScript
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
var _components = require("@wordpress/components");
var _i18n = require("@wordpress/i18n");
var _jsxRuntime = require("react/jsx-runtime");
/**
* WordPress dependencies
*/
function PatternCategoriesList({
selectedCategory,
patternCategories,
onClickCategory
}) {
const baseClassName = 'block-editor-block-patterns-explorer__sidebar';
return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
className: `${baseClassName}__categories-list`,
children: patternCategories.map(({
name,
label
}) => {
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Button, {
__next40pxDefaultSize: true,
label: label,
className: `${baseClassName}__categories-list__item`,
isPressed: selectedCategory === name,
onClick: () => {
onClickCategory(name);
},
children: label
}, name);
})
});
}
function PatternsExplorerSearch({
searchValue,
setSearchValue
}) {
const baseClassName = 'block-editor-block-patterns-explorer__search';
return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
className: baseClassName,
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.SearchControl, {
__nextHasNoMarginBottom: true,
onChange: setSearchValue,
value: searchValue,
label: (0, _i18n.__)('Search'),
placeholder: (0, _i18n.__)('Search')
})
});
}
function PatternExplorerSidebar({
selectedCategory,
patternCategories,
onClickCategory,
searchValue,
setSearchValue
}) {
const baseClassName = 'block-editor-block-patterns-explorer__sidebar';
return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
className: baseClassName,
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(PatternsExplorerSearch, {
searchValue: searchValue,
setSearchValue: setSearchValue
}), !searchValue && /*#__PURE__*/(0, _jsxRuntime.jsx)(PatternCategoriesList, {
selectedCategory: selectedCategory,
patternCategories: patternCategories,
onClickCategory: onClickCategory
})]
});
}
var _default = exports.default = PatternExplorerSidebar;
//# sourceMappingURL=pattern-explorer-sidebar.js.map
;