@wordpress/block-editor/build-module/components/inserter-list-item/index.js

Generic block editor.

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

/**
 * External dependencies
 */
import classnames from 'classnames';
/**
 * WordPress dependencies
 */

import { useMemo, useRef, memo } from '@wordpress/element';
import { createBlock, createBlocksFromInnerBlocksTemplate } from '@wordpress/blocks';
import { ENTER } from '@wordpress/keycodes';
/**
 * Internal dependencies
 */

import BlockIcon from '../block-icon';
import { InserterListboxItem } from '../inserter-listbox';
import InserterDraggableBlocks from '../inserter-draggable-blocks';
/**
 * Return true if platform is MacOS.
 *
 * @param {Object} _window   window object by default; used for DI testing.
 *
 * @return {boolean} True if MacOS; false otherwise.
 */

function isAppleOS(_window = window) {
  const {
    platform
  } = _window.navigator;
  return platform.indexOf('Mac') !== -1 || ['iPad', 'iPhone'].includes(platform);
}

function InserterListItem({
  className,
  isFirst,
  item,
  onSelect,
  onHover,
  isDraggable,
  ...props
}) {
  const isDragging = useRef(false);
  const itemIconStyle = item.icon ? {
    backgroundColor: item.icon.background,
    color: item.icon.foreground
  } : {};
  const blocks = useMemo(() => {
    return [createBlock(item.name, item.initialAttributes, createBlocksFromInnerBlocksTemplate(item.innerBlocks))];
  }, [item.name, item.initialAttributes, item.initialAttributes]);
  return createElement(InserterDraggableBlocks, {
    isEnabled: isDraggable && !item.disabled,
    blocks: blocks,
    icon: item.icon
  }, ({
    draggable,
    onDragStart,
    onDragEnd
  }) => createElement("div", {
    className: "block-editor-block-types-list__list-item",
    draggable: draggable,
    onDragStart: event => {
      isDragging.current = true;

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

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

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

      onHover(item);
    },
    onMouseEnter: () => {
      if (isDragging.current) {
        return;
      }

      onHover(item);
    },
    onMouseLeave: () => onHover(null),
    onBlur: () => onHover(null)
  }, props), createElement("span", {
    className: "block-editor-block-types-list__item-icon",
    style: itemIconStyle
  }, createElement(BlockIcon, {
    icon: item.icon,
    showColors: true
  })), createElement("span", {
    className: "block-editor-block-types-list__item-title"
  }, item.title))));
}

export default memo(InserterListItem);
//# sourceMappingURL=index.js.map