@wordpress/block-editor/build/components/block-switcher/block-transformations-menu.js

Generic block editor.

"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 _i18n = require("@wordpress/i18n");

var _components = require("@wordpress/components");

var _blocks = require("@wordpress/blocks");

var _blockIcon = _interopRequireDefault(require("../block-icon"));

var _previewBlockPopover = _interopRequireDefault(require("./preview-block-popover"));

var _blockVariationTransformations = _interopRequireDefault(require("./block-variation-transformations"));

/**
 * WordPress dependencies
 */

/**
 * Internal dependencies
 */

/**
 * Helper hook to group transformations to display them in a specific order in the UI.
 * For now we group only priority content driven transformations(ex. paragraph -> heading).
 *
 * Later on we could also group 'layout' transformations(ex. paragraph -> group) and
 * display them in different sections.
 *
 * @param {Object[]} possibleBlockTransformations The available block transformations.
 * @return {Record<string, Object[]>} The grouped block transformations.
 */
function useGroupedTransforms(possibleBlockTransformations) {
  const priorityContentTranformationBlocks = {
    'core/paragraph': 1,
    'core/heading': 2,
    'core/list': 3,
    'core/quote': 4
  };
  const transformations = (0, _element.useMemo)(() => {
    const priorityTextTranformsNames = Object.keys(priorityContentTranformationBlocks);
    return possibleBlockTransformations.reduce((accumulator, item) => {
      const {
        name
      } = item;

      if (priorityTextTranformsNames.includes(name)) {
        accumulator.priorityTextTransformations.push(item);
      } else {
        accumulator.restTransformations.push(item);
      }

      return accumulator;
    }, {
      priorityTextTransformations: [],
      restTransformations: []
    });
  }, [possibleBlockTransformations]); // Order the priority text transformations.

  transformations.priorityTextTransformations.sort(({
    name: currentName
  }, {
    name: nextName
  }) => {
    return priorityContentTranformationBlocks[currentName] < priorityContentTranformationBlocks[nextName] ? -1 : 1;
  });
  return transformations;
}

const BlockTransformationsMenu = ({
  className,
  possibleBlockTransformations,
  possibleBlockVariationTransformations,
  onSelect,
  onSelectVariation,
  blocks
}) => {
  const [hoveredTransformItemName, setHoveredTransformItemName] = (0, _element.useState)();
  const {
    priorityTextTransformations,
    restTransformations
  } = useGroupedTransforms(possibleBlockTransformations); // We have to check if both content transformations(priority and rest) are set
  // in order to create a separate MenuGroup for them.

  const hasBothContentTransformations = priorityTextTransformations.length && restTransformations.length;
  const restTransformItems = !!restTransformations.length && (0, _element.createElement)(RestTransformationItems, {
    restTransformations: restTransformations,
    onSelect: onSelect,
    setHoveredTransformItemName: setHoveredTransformItemName
  });
  return (0, _element.createElement)(_element.Fragment, null, (0, _element.createElement)(_components.MenuGroup, {
    label: (0, _i18n.__)('Transform to'),
    className: className
  }, hoveredTransformItemName && (0, _element.createElement)(_previewBlockPopover.default, {
    blocks: (0, _blocks.switchToBlockType)(blocks, hoveredTransformItemName)
  }), !!possibleBlockVariationTransformations?.length && (0, _element.createElement)(_blockVariationTransformations.default, {
    transformations: possibleBlockVariationTransformations,
    blocks: blocks,
    onSelect: onSelectVariation
  }), priorityTextTransformations.map(item => (0, _element.createElement)(BlockTranformationItem, {
    key: item.name,
    item: item,
    onSelect: onSelect,
    setHoveredTransformItemName: setHoveredTransformItemName
  })), !hasBothContentTransformations && restTransformItems), !!hasBothContentTransformations && (0, _element.createElement)(_components.MenuGroup, {
    className: className
  }, restTransformItems));
};

function RestTransformationItems({
  restTransformations,
  onSelect,
  setHoveredTransformItemName
}) {
  return restTransformations.map(item => (0, _element.createElement)(BlockTranformationItem, {
    key: item.name,
    item: item,
    onSelect: onSelect,
    setHoveredTransformItemName: setHoveredTransformItemName
  }));
}

function BlockTranformationItem({
  item,
  onSelect,
  setHoveredTransformItemName
}) {
  const {
    name,
    icon,
    title,
    isDisabled
  } = item;
  return (0, _element.createElement)(_components.MenuItem, {
    className: (0, _blocks.getBlockMenuDefaultClassName)(name),
    onClick: event => {
      event.preventDefault();
      onSelect(name);
    },
    disabled: isDisabled,
    onMouseLeave: () => setHoveredTransformItemName(null),
    onMouseEnter: () => setHoveredTransformItemName(name)
  }, (0, _element.createElement)(_blockIcon.default, {
    icon: icon,
    showColors: true
  }), title);
}

var _default = BlockTransformationsMenu;
exports.default = _default;
//# sourceMappingURL=block-transformations-menu.js.map