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

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

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

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

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

var _inserterDraggableBlocks = _interopRequireDefault(require("../inserter-draggable-blocks"));

/**
 * WordPress dependencies
 */

/**
 * Internal dependencies
 */
const WithToolTip = ({
  showTooltip,
  title,
  children
}) => {
  if (showTooltip) {
    return (0, _element.createElement)(_components.Tooltip, {
      text: title
    }, children);
  }

  return (0, _element.createElement)(_element.Fragment, null, children);
};

function BlockPattern({
  isDraggable,
  pattern,
  onClick,
  onHover,
  composite,
  showTooltip
}) {
  const [isDragging, setIsDragging] = (0, _element.useState)(false);
  const {
    blocks,
    viewportWidth
  } = pattern;
  const instanceId = (0, _compose.useInstanceId)(BlockPattern);
  const descriptionId = `block-editor-block-patterns-list__item-description-${instanceId}`;
  return (0, _element.createElement)(_inserterDraggableBlocks.default, {
    isEnabled: isDraggable,
    blocks: blocks,
    isPattern: !!pattern
  }, ({
    draggable,
    onDragStart,
    onDragEnd
  }) => (0, _element.createElement)("div", {
    className: "block-editor-block-patterns-list__list-item",
    draggable: draggable,
    onDragStart: event => {
      setIsDragging(true);

      if (onDragStart) {
        onHover?.(null);
        onDragStart(event);
      }
    },
    onDragEnd: event => {
      setIsDragging(false);

      if (onDragEnd) {
        onDragEnd(event);
      }
    }
  }, (0, _element.createElement)(WithToolTip, {
    showTooltip: showTooltip,
    title: pattern.title
  }, (0, _element.createElement)(_components.__unstableCompositeItem, (0, _extends2.default)({
    role: "option",
    as: "div"
  }, composite, {
    className: "block-editor-block-patterns-list__item",
    onClick: () => {
      onClick(pattern, blocks);
      onHover?.(null);
    },
    onMouseEnter: () => {
      if (isDragging) {
        return;
      }

      onHover?.(pattern);
    },
    onMouseLeave: () => onHover?.(null),
    "aria-label": pattern.title,
    "aria-describedby": pattern.description ? descriptionId : undefined
  }), (0, _element.createElement)(_blockPreview.default, {
    blocks: blocks,
    viewportWidth: viewportWidth
  }), !showTooltip && (0, _element.createElement)("div", {
    className: "block-editor-block-patterns-list__item-title"
  }, pattern.title), !!pattern.description && (0, _element.createElement)(_components.VisuallyHidden, {
    id: descriptionId
  }, pattern.description)))));
}

function BlockPatternPlaceholder() {
  return (0, _element.createElement)("div", {
    className: "block-editor-block-patterns-list__item is-placeholder"
  });
}

function BlockPatternList({
  isDraggable,
  blockPatterns,
  shownPatterns,
  onHover,
  onClickPattern,
  orientation,
  label = (0, _i18n.__)('Block Patterns'),
  showTitlesAsTooltip
}) {
  const composite = (0, _components.__unstableUseCompositeState)({
    orientation
  });
  return (0, _element.createElement)(_components.__unstableComposite, (0, _extends2.default)({}, composite, {
    role: "listbox",
    className: "block-editor-block-patterns-list",
    "aria-label": label
  }), blockPatterns.map(pattern => {
    const isShown = shownPatterns.includes(pattern);
    return isShown ? (0, _element.createElement)(BlockPattern, {
      key: pattern.name,
      pattern: pattern,
      onClick: onClickPattern,
      onHover: onHover,
      isDraggable: isDraggable,
      composite: composite,
      showTooltip: showTitlesAsTooltip
    }) : (0, _element.createElement)(BlockPatternPlaceholder, {
      key: pattern.name
    });
  }));
}

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