@wordpress/block-editor
Version:
71 lines (70 loc) • 2.47 kB
JavaScript
/**
* WordPress dependencies
*/
import { useCallback } from '@wordpress/element';
import { useInstanceId } from '@wordpress/compose';
import { CheckboxControl } from '@wordpress/components';
/**
* Internal dependencies
*/
import BlockTypesChecklist from './checklist';
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
function BlockManagerCategory({
title,
blockTypes,
selectedBlockTypes,
onChange
}) {
const instanceId = useInstanceId(BlockManagerCategory);
const toggleVisible = useCallback((blockType, nextIsChecked) => {
if (nextIsChecked) {
onChange([...selectedBlockTypes, blockType]);
} else {
onChange(selectedBlockTypes.filter(({
name
}) => name !== blockType.name));
}
}, [selectedBlockTypes, onChange]);
const toggleAllVisible = 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__*/_jsxs("div", {
role: "group",
"aria-labelledby": titleId,
className: "block-editor-block-manager__category",
children: [/*#__PURE__*/_jsx(CheckboxControl, {
__nextHasNoMarginBottom: true,
checked: isAllChecked,
onChange: toggleAllVisible,
className: "block-editor-block-manager__category-title",
indeterminate: isIndeterminate,
label: /*#__PURE__*/_jsx("span", {
id: titleId,
children: title
})
}), /*#__PURE__*/_jsx(BlockTypesChecklist, {
blockTypes: blockTypes,
value: checkedBlockNames,
onItemChange: toggleVisible
})]
});
}
export default BlockManagerCategory;
//# sourceMappingURL=category.js.map