@wordpress/block-editor/build/components/block-variation-transforms/index.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 _blocks = require("@wordpress/blocks");

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

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

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

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

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

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

/**
 * WordPress dependencies
 */

/**
 * Internal dependencies
 */
function VariationsButtons({
  className,
  onSelectVariation,
  selectedValue,
  variations
}) {
  return (0, _element.createElement)("fieldset", {
    className: className
  }, (0, _element.createElement)(_components.VisuallyHidden, {
    as: "legend"
  }, (0, _i18n.__)('Transform to variation')), variations.map(variation => (0, _element.createElement)(_components.Button, {
    key: variation.name,
    icon: (0, _element.createElement)(_blockIcon.default, {
      icon: variation.icon,
      showColors: true
    }),
    isPressed: selectedValue === variation.name,
    label: selectedValue === variation.name ? variation.title : (0, _i18n.sprintf)(
    /* translators: %s: Name of the block variation */
    (0, _i18n.__)('Transform to %s'), variation.title),
    onClick: () => onSelectVariation(variation.name),
    "aria-label": variation.title,
    showTooltip: true
  })));
}

function VariationsDropdown({
  className,
  onSelectVariation,
  selectedValue,
  variations
}) {
  const selectOptions = variations.map(({
    name,
    title,
    description
  }) => ({
    value: name,
    label: title,
    info: description
  }));
  return (0, _element.createElement)(_components.DropdownMenu, {
    className: className,
    label: (0, _i18n.__)('Transform to variation'),
    text: (0, _i18n.__)('Transform to variation'),
    popoverProps: {
      position: 'bottom center',
      className: `${className}__popover`
    },
    icon: _icons.chevronDown,
    toggleProps: {
      iconPosition: 'right'
    }
  }, () => (0, _element.createElement)("div", {
    className: `${className}__container`
  }, (0, _element.createElement)(_components.MenuGroup, null, (0, _element.createElement)(_components.MenuItemsChoice, {
    choices: selectOptions,
    value: selectedValue,
    onSelect: onSelectVariation
  }))));
}

function __experimentalBlockVariationTransforms({
  blockClientId
}) {
  const {
    updateBlockAttributes
  } = (0, _data.useDispatch)(_store.store);
  const {
    activeBlockVariation,
    variations
  } = (0, _data.useSelect)(select => {
    const {
      getActiveBlockVariation,
      getBlockVariations
    } = select(_blocks.store);
    const {
      getBlockName,
      getBlockAttributes
    } = select(_store.store);
    const name = blockClientId && getBlockName(blockClientId);
    return {
      activeBlockVariation: getActiveBlockVariation(name, getBlockAttributes(blockClientId)),
      variations: name && getBlockVariations(name, 'transform')
    };
  }, [blockClientId]);
  const selectedValue = activeBlockVariation?.name; // Check if each variation has a unique icon.

  const hasUniqueIcons = (0, _element.useMemo)(() => {
    const variationIcons = new Set();

    if (!variations) {
      return false;
    }

    variations.forEach(variation => {
      if (variation.icon) {
        variationIcons.add(variation.icon?.src || variation.icon);
      }
    });
    return variationIcons.size === variations.length;
  }, [variations]);

  const onSelectVariation = variationName => {
    updateBlockAttributes(blockClientId, { ...variations.find(({
        name
      }) => name === variationName).attributes
    });
  };

  const baseClass = 'block-editor-block-variation-transforms'; // Skip rendering if there are no variations

  if (!variations?.length) return null;
  const Component = hasUniqueIcons ? VariationsButtons : VariationsDropdown;
  return (0, _element.createElement)(Component, {
    className: baseClass,
    onSelectVariation: onSelectVariation,
    selectedValue: selectedValue,
    variations: variations
  });
}

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