@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 _clsx = _interopRequireDefault(require("clsx"));
var _element = require("@wordpress/element");
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"));
var _jsxRuntime = require("react/jsx-runtime");
/**
 * External dependencies
 */

/**
 * WordPress dependencies
 */

/**
 * Internal dependencies
 */

function InserterListItem({
  className,
  isFirst,
  item,
  onSelect,
  onHover,
  isDraggable,
  ...props
}) {
  const isDraggingRef = (0, _element.useRef)(false);
  const itemIconStyle = item.icon ? {
    backgroundColor: item.icon.background,
    color: item.icon.foreground
  } : {};
  const blocks = (0, _element.useMemo)(() => [(0, _blocks.createBlock)(item.name, item.initialAttributes, (0, _blocks.createBlocksFromInnerBlocksTemplate)(item.innerBlocks))], [item.name, item.initialAttributes, item.innerBlocks]);
  const isSynced = (0, _blocks.isReusableBlock)(item) && item.syncStatus !== 'unsynced' || (0, _blocks.isTemplatePart)(item);
  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_inserterDraggableBlocks.default, {
    isEnabled: isDraggable && !item.isDisabled,
    blocks: blocks,
    icon: item.icon,
    children: ({
      draggable,
      onDragStart,
      onDragEnd
    }) => /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
      className: (0, _clsx.default)('block-editor-block-types-list__list-item', {
        'is-synced': isSynced
      }),
      draggable: draggable,
      onDragStart: event => {
        isDraggingRef.current = true;
        if (onDragStart) {
          onHover(null);
          onDragStart(event);
        }
      },
      onDragEnd: event => {
        isDraggingRef.current = false;
        if (onDragEnd) {
          onDragEnd(event);
        }
      },
      children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_inserterListbox.InserterListboxItem, {
        isFirst: isFirst,
        className: (0, _clsx.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 (isDraggingRef.current) {
            return;
          }
          onHover(item);
        },
        onMouseLeave: () => onHover(null),
        ...props,
        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
          className: "block-editor-block-types-list__item-icon",
          style: itemIconStyle,
          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_blockIcon.default, {
            icon: item.icon,
            showColors: true
          })
        }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
          className: "block-editor-block-types-list__item-title",
          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.__experimentalTruncate, {
            numberOfLines: 3,
            children: item.title
          })
        })]
      })
    })
  });
}
var _default = exports.default = (0, _element.memo)(InserterListItem);
//# sourceMappingURL=index.js.map