@gechiui/block-editor/build/components/block-switcher/index.js

Generic block editor.

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = exports.BlockSwitcherDropdownMenu = exports.BlockSwitcher = void 0;

var _element = require("@gechiui/element");

var _lodash = require("lodash");

var _i18n = require("@gechiui/i18n");

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

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

var _data = require("@gechiui/data");

var _icons = require("@gechiui/icons");

var _store = require("../../store");

var _useBlockDisplayInformation = _interopRequireDefault(require("../use-block-display-information"));

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

var _blockTitle = _interopRequireDefault(require("../block-title"));

var _blockTransformationsMenu = _interopRequireDefault(require("./block-transformations-menu"));

var _blockStylesMenu = _interopRequireDefault(require("./block-styles-menu"));

var _patternTransformationsMenu = _interopRequireDefault(require("./pattern-transformations-menu"));

/**
 * External dependencies
 */

/**
 * GeChiUI dependencies
 */

/**
 * Internal dependencies
 */
const BlockSwitcherDropdownMenu = _ref => {
  let {
    clientIds,
    blocks
  } = _ref;
  const {
    replaceBlocks
  } = (0, _data.useDispatch)(_store.store);
  const blockInformation = (0, _useBlockDisplayInformation.default)(blocks[0].clientId);
  const {
    possibleBlockTransformations,
    canRemove,
    hasBlockStyles,
    icon,
    blockTitle,
    patterns
  } = (0, _data.useSelect)(select => {
    var _getBlockType2;

    const {
      getBlockRootClientId,
      getBlockTransformItems,
      __experimentalGetPatternTransformItems
    } = select(_store.store);
    const {
      getBlockStyles,
      getBlockType
    } = select(_blocks.store);
    const {
      canRemoveBlocks
    } = select(_store.store);
    const rootClientId = getBlockRootClientId((0, _lodash.castArray)(clientIds)[0]);
    const [{
      name: firstBlockName
    }] = blocks;

    const _isSingleBlockSelected = blocks.length === 1;

    const styles = _isSingleBlockSelected && getBlockStyles(firstBlockName);

    let _icon;

    if (_isSingleBlockSelected) {
      _icon = blockInformation === null || blockInformation === void 0 ? void 0 : blockInformation.icon; // Take into account active block variations.
    } else {
      var _getBlockType;

      const isSelectionOfSameType = (0, _lodash.uniq)(blocks.map(_ref2 => {
        let {
          name
        } = _ref2;
        return name;
      })).length === 1; // When selection consists of blocks of multiple types, display an
      // appropriate icon to communicate the non-uniformity.

      _icon = isSelectionOfSameType ? (_getBlockType = getBlockType(firstBlockName)) === null || _getBlockType === void 0 ? void 0 : _getBlockType.icon : _icons.stack;
    }

    return {
      possibleBlockTransformations: getBlockTransformItems(blocks, rootClientId),
      canRemove: canRemoveBlocks(clientIds, rootClientId),
      hasBlockStyles: !!(styles !== null && styles !== void 0 && styles.length),
      icon: _icon,
      blockTitle: (_getBlockType2 = getBlockType(firstBlockName)) === null || _getBlockType2 === void 0 ? void 0 : _getBlockType2.title,
      patterns: __experimentalGetPatternTransformItems(blocks, rootClientId)
    };
  }, [clientIds, blocks, blockInformation === null || blockInformation === void 0 ? void 0 : blockInformation.icon]);
  const isReusable = blocks.length === 1 && (0, _blocks.isReusableBlock)(blocks[0]);
  const isTemplate = blocks.length === 1 && (0, _blocks.isTemplatePart)(blocks[0]); // Simple block tranformation based on the `Block Transforms` API.

  const onBlockTransform = name => replaceBlocks(clientIds, (0, _blocks.switchToBlockType)(blocks, name)); // Pattern transformation through the `Patterns` API.


  const onPatternTransform = transformedBlocks => replaceBlocks(clientIds, transformedBlocks);

  const hasPossibleBlockTransformations = !!possibleBlockTransformations.length && canRemove;
  const hasPatternTransformation = !!(patterns !== null && patterns !== void 0 && patterns.length) && canRemove;

  if (!hasBlockStyles && !hasPossibleBlockTransformations) {
    return (0, _element.createElement)(_components.ToolbarGroup, null, (0, _element.createElement)(_components.ToolbarButton, {
      disabled: true,
      className: "block-editor-block-switcher__no-switcher-icon",
      title: blockTitle,
      icon: (0, _element.createElement)(_blockIcon.default, {
        icon: icon,
        showColors: true
      })
    }));
  }

  const blockSwitcherLabel = blockTitle;
  const blockSwitcherDescription = 1 === blocks.length ? (0, _i18n.sprintf)(
  /* translators: %s: block title. */
  (0, _i18n.__)('%s：更改区块类型或样式'), blockTitle) : (0, _i18n.sprintf)(
  /* translators: %d: number of blocks. */
  (0, _i18n._n)('修改%d个区块的类型', 'Change type of %d blocks', blocks.length), blocks.length);
  const showDropDown = hasBlockStyles || hasPossibleBlockTransformations || hasPatternTransformation;
  return (0, _element.createElement)(_components.ToolbarGroup, null, (0, _element.createElement)(_components.ToolbarItem, null, toggleProps => (0, _element.createElement)(_components.DropdownMenu, {
    className: "block-editor-block-switcher",
    label: blockSwitcherLabel,
    popoverProps: {
      position: 'bottom right',
      isAlternate: true,
      className: 'block-editor-block-switcher__popover'
    },
    icon: (0, _element.createElement)(_element.Fragment, null, (0, _element.createElement)(_blockIcon.default, {
      icon: icon,
      className: "block-editor-block-switcher__toggle",
      showColors: true
    }), (isReusable || isTemplate) && (0, _element.createElement)("span", {
      className: "block-editor-block-switcher__toggle-text"
    }, (0, _element.createElement)(_blockTitle.default, {
      clientId: clientIds
    }))),
    toggleProps: {
      describedBy: blockSwitcherDescription,
      ...toggleProps
    },
    menuProps: {
      orientation: 'both'
    }
  }, _ref3 => {
    let {
      onClose
    } = _ref3;
    return showDropDown && (0, _element.createElement)("div", {
      className: "block-editor-block-switcher__container"
    }, hasPatternTransformation && (0, _element.createElement)(_patternTransformationsMenu.default, {
      blocks: blocks,
      patterns: patterns,
      onSelect: transformedBlocks => {
        onPatternTransform(transformedBlocks);
        onClose();
      }
    }), hasPossibleBlockTransformations && (0, _element.createElement)(_blockTransformationsMenu.default, {
      className: "block-editor-block-switcher__transforms__menugroup",
      possibleBlockTransformations: possibleBlockTransformations,
      blocks: blocks,
      onSelect: name => {
        onBlockTransform(name);
        onClose();
      }
    }), hasBlockStyles && (0, _element.createElement)(_blockStylesMenu.default, {
      hoveredBlock: blocks[0],
      onSwitch: onClose
    }));
  })));
};

exports.BlockSwitcherDropdownMenu = BlockSwitcherDropdownMenu;

const BlockSwitcher = _ref4 => {
  let {
    clientIds
  } = _ref4;
  const blocks = (0, _data.useSelect)(select => select(_store.store).getBlocksByClientId(clientIds), [clientIds]);

  if (!blocks.length || blocks.some(block => !block)) {
    return null;
  }

  return (0, _element.createElement)(BlockSwitcherDropdownMenu, {
    clientIds: clientIds,
    blocks: blocks
  });
};

exports.BlockSwitcher = BlockSwitcher;
var _default = BlockSwitcher;
exports.default = _default;
//# sourceMappingURL=index.js.map