@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 _element = require("@wordpress/element");

var _classnames = _interopRequireDefault(require("classnames"));

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

var _icons = require("@wordpress/icons");

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

var _data = require("@wordpress/data");

var _keyboardShortcuts = require("@wordpress/keyboard-shortcuts");

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 _store = require("../../store");

/**
 * External dependencies
 */

/**
 * WordPress dependencies
 */

/**
 * Internal dependencies
 */
function ListViewBlockSelectButton({
  className,
  block: {
    clientId
  },
  onClick,
  onToggleExpanded,
  tabIndex,
  onFocus,
  onDragStart,
  onDragEnd,
  draggable,
  isExpanded,
  ariaLabel,
  ariaDescribedBy,
  updateFocusAndSelection
}, ref) {
  const blockInformation = (0, _useBlockDisplayInformation.default)(clientId);
  const blockTitle = (0, _useBlockDisplayTitle.default)({
    clientId,
    context: 'list-view'
  });
  const {
    isLocked
  } = (0, _blockLock.useBlockLock)(clientId);
  const {
    getSelectedBlockClientIds,
    getPreviousBlockClientId,
    getBlockRootClientId,
    getBlockOrder,
    canRemoveBlocks
  } = (0, _data.useSelect)(_store.store);
  const {
    removeBlocks
  } = (0, _data.useDispatch)(_store.store);
  const isMatch = (0, _keyboardShortcuts.__unstableUseShortcutEventMatch)(); // 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 onKeyDownHandler(event) {
    if (event.keyCode === _keycodes.ENTER || event.keyCode === _keycodes.SPACE) {
      onClick(event);
    } else if (event.keyCode === _keycodes.BACKSPACE || event.keyCode === _keycodes.DELETE || isMatch('core/block-editor/remove', event)) {
      var _getPreviousBlockClie;

      const selectedBlockClientIds = getSelectedBlockClientIds();
      const isDeletingSelectedBlocks = selectedBlockClientIds.includes(clientId);
      const firstBlockClientId = isDeletingSelectedBlocks ? selectedBlockClientIds[0] : clientId;
      const firstBlockRootClientId = getBlockRootClientId(firstBlockClientId);
      const blocksToDelete = isDeletingSelectedBlocks ? selectedBlockClientIds : [clientId]; // Don't update the selection if the blocks cannot be deleted.

      if (!canRemoveBlocks(blocksToDelete, firstBlockRootClientId)) {
        return;
      }

      let blockToFocus = (_getPreviousBlockClie = getPreviousBlockClientId(firstBlockClientId)) !== null && _getPreviousBlockClie !== void 0 ? _getPreviousBlockClie : // If the previous block is not found (when the first block is deleted),
      // fallback to focus the parent block.
      firstBlockRootClientId;
      removeBlocks(blocksToDelete, false); // Update the selection if the original selection has been removed.

      const shouldUpdateSelection = selectedBlockClientIds.length > 0 && getSelectedBlockClientIds().length === 0; // If there's no previous block nor parent block, focus the first block.

      if (!blockToFocus) {
        blockToFocus = getBlockOrder()[0];
      }

      updateFocusAndSelection(blockToFocus, shouldUpdateSelection);
    }
  }

  return (0, _element.createElement)(_element.Fragment, null, (0, _element.createElement)(_components.Button, {
    className: (0, _classnames.default)('block-editor-list-view-block-select-button', className),
    onClick: onClick,
    onKeyDown: onKeyDownHandler,
    ref: ref,
    tabIndex: tabIndex,
    onFocus: onFocus,
    onDragStart: onDragStartHandler,
    onDragEnd: onDragEnd,
    draggable: draggable,
    href: `#block-${clientId}`,
    "aria-label": ariaLabel,
    "aria-describedby": ariaDescribedBy,
    "aria-expanded": isExpanded
  }, (0, _element.createElement)(_expander.default, {
    onClick: onToggleExpanded
  }), (0, _element.createElement)(_blockIcon.default, {
    icon: blockInformation?.icon,
    showColors: true,
    context: "list-view"
  }), (0, _element.createElement)(_components.__experimentalHStack, {
    alignment: "center",
    className: "block-editor-list-view-block-select-button__label-wrapper",
    justify: "flex-start",
    spacing: 1
  }, (0, _element.createElement)("span", {
    className: "block-editor-list-view-block-select-button__title"
  }, (0, _element.createElement)(_components.__experimentalTruncate, {
    ellipsizeMode: "auto"
  }, blockTitle)), blockInformation?.anchor && (0, _element.createElement)("span", {
    className: "block-editor-list-view-block-select-button__anchor-wrapper"
  }, (0, _element.createElement)(_components.__experimentalTruncate, {
    className: "block-editor-list-view-block-select-button__anchor",
    ellipsizeMode: "auto"
  }, blockInformation.anchor)), isLocked && (0, _element.createElement)("span", {
    className: "block-editor-list-view-block-select-button__lock"
  }, (0, _element.createElement)(_icons.Icon, {
    icon: _icons.lockSmall
  })))));
}

var _default = (0, _element.forwardRef)(ListViewBlockSelectButton);

exports.default = _default;
//# sourceMappingURL=block-select-button.js.map