@wordpress/block-editor
Version:
79 lines (76 loc) • 2.78 kB
JavaScript
;
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
var _element = require("@wordpress/element");
var _compose = require("@wordpress/compose");
var _components = require("@wordpress/components");
var _checklist = _interopRequireDefault(require("./checklist"));
var _jsxRuntime = require("react/jsx-runtime");
/**
* WordPress dependencies
*/
/**
* Internal dependencies
*/
function BlockManagerCategory({
title,
blockTypes,
selectedBlockTypes,
onChange
}) {
const instanceId = (0, _compose.useInstanceId)(BlockManagerCategory);
const toggleVisible = (0, _element.useCallback)((blockType, nextIsChecked) => {
if (nextIsChecked) {
onChange([...selectedBlockTypes, blockType]);
} else {
onChange(selectedBlockTypes.filter(({
name
}) => name !== blockType.name));
}
}, [selectedBlockTypes, onChange]);
const toggleAllVisible = (0, _element.useCallback)(nextIsChecked => {
if (nextIsChecked) {
onChange([...selectedBlockTypes, ...blockTypes.filter(blockType => !selectedBlockTypes.find(({
name
}) => name === blockType.name))]);
} else {
onChange(selectedBlockTypes.filter(selectedBlockType => !blockTypes.find(({
name
}) => name === selectedBlockType.name)));
}
}, [blockTypes, selectedBlockTypes, onChange]);
if (!blockTypes.length) {
return null;
}
const checkedBlockNames = blockTypes.map(({
name
}) => name).filter(type => (selectedBlockTypes !== null && selectedBlockTypes !== void 0 ? selectedBlockTypes : []).some(selectedBlockType => selectedBlockType.name === type));
const titleId = 'block-editor-block-manager__category-title-' + instanceId;
const isAllChecked = checkedBlockNames.length === blockTypes.length;
const isIndeterminate = !isAllChecked && checkedBlockNames.length > 0;
return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
role: "group",
"aria-labelledby": titleId,
className: "block-editor-block-manager__category",
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_components.CheckboxControl, {
__nextHasNoMarginBottom: true,
checked: isAllChecked,
onChange: toggleAllVisible,
className: "block-editor-block-manager__category-title",
indeterminate: isIndeterminate,
label: /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
id: titleId,
children: title
})
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_checklist.default, {
blockTypes: blockTypes,
value: checkedBlockNames,
onItemChange: toggleVisible
})]
});
}
var _default = exports.default = BlockManagerCategory;
//# sourceMappingURL=category.js.map