@wordpress/block-editor/build/components/block-variation-transforms/index.js

Generic block editor.

"use strict";

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 _utils = require("../../utils");

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

/**
 * WordPress dependencies
 */

/**
 * Internal dependencies
 */
function __experimentalBlockVariationTransforms({
  blockClientId
}) {
  const [selectedValue, setSelectedValue] = (0, _element.useState)();
  const {
    updateBlockAttributes
  } = (0, _data.useDispatch)(_store.store);
  const {
    variations,
    blockAttributes
  } = (0, _data.useSelect)(select => {
    const {
      getBlockVariations
    } = select(_blocks.store);
    const {
      getBlockName,
      getBlockAttributes
    } = select(_store.store);
    const blockName = blockClientId && getBlockName(blockClientId);
    return {
      variations: blockName && getBlockVariations(blockName, 'transform'),
      blockAttributes: getBlockAttributes(blockClientId)
    };
  }, [blockClientId]);
  (0, _element.useEffect)(() => {
    var _getMatchingVariation;

    setSelectedValue((_getMatchingVariation = (0, _utils.__experimentalGetMatchingVariation)(blockAttributes, variations)) === null || _getMatchingVariation === void 0 ? void 0 : _getMatchingVariation.name);
  }, [blockAttributes, variations]);
  if (!(variations !== null && variations !== void 0 && variations.length)) return null;
  const selectOptions = variations.map(({
    name,
    title,
    description
  }) => ({
    value: name,
    label: title,
    info: description
  }));

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

  const baseClass = 'block-editor-block-variation-transforms';
  return (0, _element.createElement)(_components.DropdownMenu, {
    className: baseClass,
    label: (0, _i18n.__)('Transform to variation'),
    text: (0, _i18n.__)('Transform to variation'),
    popoverProps: {
      position: 'bottom center',
      className: `${baseClass}__popover`
    },
    icon: _icons.chevronDown,
    toggleProps: {
      iconPosition: 'right'
    }
  }, () => (0, _element.createElement)("div", {
    className: `${baseClass}__container`
  }, (0, _element.createElement)(_components.MenuGroup, null, (0, _element.createElement)(_components.MenuItemsChoice, {
    choices: selectOptions,
    value: selectedValue,
    onSelect: onSelectVariation
  }))));
}

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