@wordpress/editor/build/components/block-manager/category.js

Enhanced block editor for WordPress posts.

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;
var _element = require("@wordpress/element");
var _data = require("@wordpress/data");
var _compose = require("@wordpress/compose");
var _components = require("@wordpress/components");
var _preferences = require("@wordpress/preferences");
var _checklist = _interopRequireDefault(require("./checklist"));
var _store = require("../../store");
var _lockUnlock = require("../../lock-unlock");
var _jsxRuntime = require("react/jsx-runtime");
/**
 * WordPress dependencies
 */

/**
 * Internal dependencies
 */

function BlockManagerCategory({
  title,
  blockTypes
}) {
  const instanceId = (0, _compose.useInstanceId)(BlockManagerCategory);
  const {
    allowedBlockTypes,
    hiddenBlockTypes
  } = (0, _data.useSelect)(select => {
    const {
      getEditorSettings
    } = select(_store.store);
    const {
      get
    } = select(_preferences.store);
    return {
      allowedBlockTypes: getEditorSettings().allowedBlockTypes,
      hiddenBlockTypes: get('core', 'hiddenBlockTypes')
    };
  }, []);
  const filteredBlockTypes = (0, _element.useMemo)(() => {
    if (allowedBlockTypes === true) {
      return blockTypes;
    }
    return blockTypes.filter(({
      name
    }) => {
      return allowedBlockTypes?.includes(name);
    });
  }, [allowedBlockTypes, blockTypes]);
  const {
    showBlockTypes,
    hideBlockTypes
  } = (0, _lockUnlock.unlock)((0, _data.useDispatch)(_store.store));
  const toggleVisible = (0, _element.useCallback)((blockName, nextIsChecked) => {
    if (nextIsChecked) {
      showBlockTypes(blockName);
    } else {
      hideBlockTypes(blockName);
    }
  }, [showBlockTypes, hideBlockTypes]);
  const toggleAllVisible = (0, _element.useCallback)(nextIsChecked => {
    const blockNames = blockTypes.map(({
      name
    }) => name);
    if (nextIsChecked) {
      showBlockTypes(blockNames);
    } else {
      hideBlockTypes(blockNames);
    }
  }, [blockTypes, showBlockTypes, hideBlockTypes]);
  if (!filteredBlockTypes.length) {
    return null;
  }
  const checkedBlockNames = filteredBlockTypes.map(({
    name
  }) => name).filter(type => !(hiddenBlockTypes !== null && hiddenBlockTypes !== void 0 ? hiddenBlockTypes : []).includes(type));
  const titleId = 'editor-block-manager__category-title-' + instanceId;
  const isAllChecked = checkedBlockNames.length === filteredBlockTypes.length;
  const isIndeterminate = !isAllChecked && checkedBlockNames.length > 0;
  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
    role: "group",
    "aria-labelledby": titleId,
    className: "editor-block-manager__category",
    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_components.CheckboxControl, {
      __nextHasNoMarginBottom: true,
      checked: isAllChecked,
      onChange: toggleAllVisible,
      className: "editor-block-manager__category-title",
      indeterminate: isIndeterminate,
      label: /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
        id: titleId,
        children: title
      })
    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_checklist.default, {
      blockTypes: filteredBlockTypes,
      value: checkedBlockNames,
      onItemChange: toggleVisible
    })]
  });
}
var _default = exports.default = BlockManagerCategory;
//# sourceMappingURL=category.js.map