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

Generic block editor.

import _extends from "@babel/runtime/helpers/esm/extends";
import { createElement } from "@wordpress/element";

/**
 * WordPress dependencies
 */
import { __ } from '@wordpress/i18n';
import { useState } from '@wordpress/element';
import { useInstanceId } from '@wordpress/compose';
import { chevronRight } from '@wordpress/icons';
import { MenuGroup, MenuItem, Popover, VisuallyHidden, __unstableComposite as Composite, __unstableUseCompositeState as useCompositeState, __unstableCompositeItem as CompositeItem } from '@wordpress/components';
/**
 * Internal dependencies
 */

import BlockPreview from '../block-preview';
import useTransformedPatterns from './use-transformed-patterns';

function PatternTransformationsMenu({
  blocks,
  patterns: statePatterns,
  onSelect
}) {
  const [showTransforms, setShowTransforms] = useState(false);
  const patterns = useTransformedPatterns(statePatterns, blocks);
  if (!patterns.length) return null;
  return createElement(MenuGroup, {
    className: "block-editor-block-switcher__pattern__transforms__menugroup"
  }, showTransforms && createElement(PreviewPatternsPopover, {
    patterns: patterns,
    onSelect: onSelect
  }), createElement(MenuItem, {
    onClick: event => {
      event.preventDefault();
      setShowTransforms(!showTransforms);
    },
    icon: chevronRight
  }, __('Patterns')));
}

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

function BlockPatternsList({
  patterns,
  onSelect
}) {
  const composite = useCompositeState();
  return createElement(Composite, _extends({}, composite, {
    role: "listbox",
    className: "block-editor-block-switcher__preview-patterns-container",
    "aria-label": __('Patterns list')
  }), patterns.map(pattern => 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 = useInstanceId(BlockPattern, `${baseClassName}-list__item-description`);
  return createElement("div", {
    className: `${baseClassName}-list__list-item`,
    "aria-label": pattern.title,
    "aria-describedby": pattern.description ? descriptionId : undefined
  }, createElement(CompositeItem, _extends({
    role: "option",
    as: "div"
  }, composite, {
    className: `${baseClassName}-list__item`,
    onClick: () => onSelect(pattern.transformedBlocks)
  }), createElement(BlockPreview, {
    blocks: pattern.transformedBlocks,
    viewportWidth: pattern.viewportWidth || 500
  }), createElement("div", {
    className: `${baseClassName}-list__item-title`
  }, pattern.title)), !!pattern.description && createElement(VisuallyHidden, {
    id: descriptionId
  }, pattern.description));
}

export default PatternTransformationsMenu;
//# sourceMappingURL=pattern-transformations-menu.js.map