@wordpress/block-editor/build/components/block-switcher/pattern-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 _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));

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

var _compose = require("@wordpress/compose");

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

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

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

var _useTransformedPatterns = _interopRequireDefault(require("./use-transformed-patterns"));

/**
 * WordPress dependencies
 */

/**
 * Internal dependencies
 */
function PatternTransformationsMenu({
  blocks,
  patterns: statePatterns,
  onSelect
}) {
  const [showTransforms, setShowTransforms] = (0, _element.useState)(false);
  const patterns = (0, _useTransformedPatterns.default)(statePatterns, blocks);
  if (!patterns.length) return null;
  return (0, _element.createElement)(_components.MenuGroup, {
    className: "block-editor-block-switcher__pattern__transforms__menugroup"
  }, showTransforms && (0, _element.createElement)(PreviewPatternsPopover, {
    patterns: patterns,
    onSelect: onSelect
  }), (0, _element.createElement)(_components.MenuItem, {
    onClick: event => {
      event.preventDefault();
      setShowTransforms(!showTransforms);
    },
    icon: _icons.chevronRight
  }, (0, _i18n.__)('Patterns')));
}

function PreviewPatternsPopover({
  patterns,
  onSelect
}) {
  return (0, _element.createElement)("div", {
    className: "block-editor-block-switcher__popover__preview__parent"
  }, (0, _element.createElement)("div", {
    className: "block-editor-block-switcher__popover__preview__container"
  }, (0, _element.createElement)(_components.Popover, {
    className: "block-editor-block-switcher__preview__popover",
    position: "bottom right"
  }, (0, _element.createElement)("div", {
    className: "block-editor-block-switcher__preview"
  }, (0, _element.createElement)("div", {
    className: "block-editor-block-switcher__preview-title"
  }, (0, _i18n.__)('Preview')), (0, _element.createElement)(BlockPatternsList, {
    patterns: patterns,
    onSelect: onSelect
  })))));
}

function BlockPatternsList({
  patterns,
  onSelect
}) {
  const composite = (0, _components.__unstableUseCompositeState)();
  return (0, _element.createElement)(_components.__unstableComposite, (0, _extends2.default)({}, composite, {
    role: "listbox",
    className: "block-editor-block-switcher__preview-patterns-container",
    "aria-label": (0, _i18n.__)('Patterns list')
  }), patterns.map(pattern => (0, _element.createElement)(BlockPattern, {
    key: pattern.name,
    pattern: pattern,
    onSelect: onSelect,
    composite: composite
  })));
}

function BlockPattern({
  pattern,
  onSelect,
  composite
}) {
  // TODO check pattern/preview width...
  const baseClassName = 'block-editor-block-switcher__preview-patterns-container';
  const descriptionId = (0, _compose.useInstanceId)(BlockPattern, `${baseClassName}-list__item-description`);
  return (0, _element.createElement)("div", {
    className: `${baseClassName}-list__list-item`,
    "aria-label": pattern.title,
    "aria-describedby": pattern.description ? descriptionId : undefined
  }, (0, _element.createElement)(_components.__unstableCompositeItem, (0, _extends2.default)({
    role: "option",
    as: "div"
  }, composite, {
    className: `${baseClassName}-list__item`,
    onClick: () => onSelect(pattern.transformedBlocks)
  }), (0, _element.createElement)(_blockPreview.default, {
    blocks: pattern.transformedBlocks,
    viewportWidth: pattern.viewportWidth || 500
  }), (0, _element.createElement)("div", {
    className: `${baseClassName}-list__item-title`
  }, pattern.title)), !!pattern.description && (0, _element.createElement)(_components.VisuallyHidden, {
    id: descriptionId
  }, pattern.description));
}

var _default = PatternTransformationsMenu;
exports.default = _default;
//# sourceMappingURL=pattern-transformations-menu.js.map