@wordpress/block-editor/build/components/list-view/block-select-button.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 _components = require("@wordpress/components");
var _element = require("@wordpress/element");
var _icons = require("@wordpress/icons");
var _keycodes = require("@wordpress/keycodes");
var _data = require("@wordpress/data");
var _blockIcon = _interopRequireDefault(require("../block-icon"));
var _useBlockDisplayInformation = _interopRequireDefault(require("../use-block-display-information"));
var _useBlockDisplayTitle = _interopRequireDefault(require("../block-title/use-block-display-title"));
var _expander = _interopRequireDefault(require("./expander"));
var _blockLock = require("../block-lock");
var _useListViewImages = _interopRequireDefault(require("./use-list-view-images"));
var _store = require("../../store");
var _lockUnlock = require("../../lock-unlock");
var _jsxRuntime = require("react/jsx-runtime");
/**
 * External dependencies
 */

/**
 * WordPress dependencies
 */

/**
 * Internal dependencies
 */

const {
  Badge
} = (0, _lockUnlock.unlock)(_components.privateApis);
function ListViewBlockSelectButton({
  className,
  block: {
    clientId
  },
  onClick,
  onContextMenu,
  onMouseDown,
  onToggleExpanded,
  tabIndex,
  onFocus,
  onDragStart,
  onDragEnd,
  draggable,
  isExpanded,
  ariaDescribedBy
}, ref) {
  const blockInformation = (0, _useBlockDisplayInformation.default)(clientId);
  const blockTitle = (0, _useBlockDisplayTitle.default)({
    clientId,
    context: 'list-view'
  });
  const {
    isLocked
  } = (0, _blockLock.useBlockLock)(clientId);
  const {
    isContentOnly
  } = (0, _data.useSelect)(select => ({
    isContentOnly: select(_store.store).getBlockEditingMode(clientId) === 'contentOnly'
  }), [clientId]);
  const shouldShowLockIcon = isLocked && !isContentOnly;
  const isSticky = blockInformation?.positionType === 'sticky';
  const images = (0, _useListViewImages.default)({
    clientId,
    isExpanded
  });

  // The `href` attribute triggers the browser's native HTML drag operations.
  // When the link is dragged, the element's outerHTML is set in DataTransfer object as text/html.
  // We need to clear any HTML drag data to prevent `pasteHandler` from firing
  // inside the `useOnBlockDrop` hook.
  const onDragStartHandler = event => {
    event.dataTransfer.clearData();
    onDragStart?.(event);
  };

  /**
   * @param {KeyboardEvent} event
   */
  function onKeyDown(event) {
    if (event.keyCode === _keycodes.ENTER || event.keyCode === _keycodes.SPACE) {
      onClick(event);
    }
  }
  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("a", {
    className: (0, _clsx.default)('block-editor-list-view-block-select-button', className),
    onClick: onClick,
    onContextMenu: onContextMenu,
    onKeyDown: onKeyDown,
    onMouseDown: onMouseDown,
    ref: ref,
    tabIndex: tabIndex,
    onFocus: onFocus,
    onDragStart: onDragStartHandler,
    onDragEnd: onDragEnd,
    draggable: draggable,
    href: `#block-${clientId}`,
    "aria-describedby": ariaDescribedBy,
    "aria-expanded": isExpanded,
    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_expander.default, {
      onClick: onToggleExpanded
    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_blockIcon.default, {
      icon: blockInformation?.icon,
      showColors: true,
      context: "list-view"
    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_components.__experimentalHStack, {
      alignment: "center",
      className: "block-editor-list-view-block-select-button__label-wrapper",
      justify: "flex-start",
      spacing: 1,
      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
        className: "block-editor-list-view-block-select-button__title",
        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.__experimentalTruncate, {
          ellipsizeMode: "auto",
          children: blockTitle
        })
      }), blockInformation?.anchor && /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
        className: "block-editor-list-view-block-select-button__anchor-wrapper",
        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(Badge, {
          className: "block-editor-list-view-block-select-button__anchor",
          children: blockInformation.anchor
        })
      }), isSticky && /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
        className: "block-editor-list-view-block-select-button__sticky",
        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.Icon, {
          icon: _icons.pinSmall
        })
      }), images.length ? /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
        className: "block-editor-list-view-block-select-button__images",
        "aria-hidden": true,
        children: images.map((image, index) => /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
          className: "block-editor-list-view-block-select-button__image",
          style: {
            backgroundImage: `url(${image.url})`,
            zIndex: images.length - index // Ensure the first image is on top, and subsequent images are behind.
          }
        }, image.clientId))
      }) : null, shouldShowLockIcon && /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
        className: "block-editor-list-view-block-select-button__lock",
        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.Icon, {
          icon: _icons.lockSmall
        })
      })]
    })]
  });
}
var _default = exports.default = (0, _element.forwardRef)(ListViewBlockSelectButton);
//# sourceMappingURL=block-select-button.js.map