@wordpress/block-editor/build/components/inserter-list-item/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 _classnames = _interopRequireDefault(require("classnames"));

var _blocks = require("@wordpress/blocks");

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

var _keycodes = require("@wordpress/keycodes");

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

var _inserterListbox = require("../inserter-listbox");

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

/**
 * External dependencies
 */

/**
 * WordPress dependencies
 */

/**
 * Internal dependencies
 */
function InserterListItem({
  className,
  isFirst,
  item,
  onSelect,
  onHover,
  isDraggable,
  ...props
}) {
  const isDragging = (0, _element.useRef)(false);
  const itemIconStyle = item.icon ? {
    backgroundColor: item.icon.background,
    color: item.icon.foreground
  } : {};
  const blocks = (0, _element.useMemo)(() => {
    return [(0, _blocks.createBlock)(item.name, item.initialAttributes, (0, _blocks.createBlocksFromInnerBlocksTemplate)(item.innerBlocks))];
  }, [item.name, item.initialAttributes, item.initialAttributes]);
  const isSynced = (0, _blocks.isReusableBlock)(item) || (0, _blocks.isTemplatePart)(item);
  return (0, _element.createElement)(_inserterDraggableBlocks.default, {
    isEnabled: isDraggable && !item.disabled,
    blocks: blocks,
    icon: item.icon
  }, ({
    draggable,
    onDragStart,
    onDragEnd
  }) => (0, _element.createElement)("div", {
    className: (0, _classnames.default)('block-editor-block-types-list__list-item', {
      'is-synced': isSynced
    }),
    draggable: draggable,
    onDragStart: event => {
      isDragging.current = true;

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

      if (onDragEnd) {
        onDragEnd(event);
      }
    }
  }, (0, _element.createElement)(_inserterListbox.InserterListboxItem, (0, _extends2.default)({
    isFirst: isFirst,
    className: (0, _classnames.default)('block-editor-block-types-list__item', className),
    disabled: item.isDisabled,
    onClick: event => {
      event.preventDefault();
      onSelect(item, (0, _keycodes.isAppleOS)() ? event.metaKey : event.ctrlKey);
      onHover(null);
    },
    onKeyDown: event => {
      const {
        keyCode
      } = event;

      if (keyCode === _keycodes.ENTER) {
        event.preventDefault();
        onSelect(item, (0, _keycodes.isAppleOS)() ? event.metaKey : event.ctrlKey);
        onHover(null);
      }
    },
    onMouseEnter: () => {
      if (isDragging.current) {
        return;
      }

      onHover(item);
    },
    onMouseLeave: () => onHover(null)
  }, props), (0, _element.createElement)("span", {
    className: "block-editor-block-types-list__item-icon",
    style: itemIconStyle
  }, (0, _element.createElement)(_blockIcon.default, {
    icon: item.icon,
    showColors: true
  })), (0, _element.createElement)("span", {
    className: "block-editor-block-types-list__item-title"
  }, (0, _element.createElement)(_components.__experimentalTruncate, {
    numberOfLines: 3
  }, item.title)))));
}

var _default = (0, _element.memo)(InserterListItem);

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