@wordpress/block-editor/build/components/block-mover/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 _lodash = require("lodash");

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

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

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

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

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

var _i18n = require("@wordpress/i18n");

var _blockDraggable = _interopRequireDefault(require("../block-draggable"));

var _button = require("./button");

var _store = require("../../store");

/**
 * External dependencies
 */

/**
 * WordPress dependencies
 */

/**
 * Internal dependencies
 */
function BlockMover({
  isFirst,
  isLast,
  clientIds,
  isLocked,
  isHidden,
  rootClientId,
  orientation,
  hideDragHandle
}) {
  const [isFocused, setIsFocused] = (0, _element.useState)(false);

  const onFocus = () => setIsFocused(true);

  const onBlur = () => setIsFocused(false);

  if (isLocked || isFirst && isLast && !rootClientId) {
    return null;
  }

  const dragHandleLabel = (0, _i18n.__)('Drag'); // We emulate a disabled state because forcefully applying the `disabled`
  // attribute on the buttons while it has focus causes the screen to change
  // to an unfocused state (body as active element) without firing blur on,
  // the rendering parent, leaving it unable to react to focus out.

  return (0, _element.createElement)("div", {
    className: (0, _classnames.default)('block-editor-block-mover', {
      'is-visible': isFocused || !isHidden,
      'is-horizontal': orientation === 'horizontal'
    })
  }, !hideDragHandle && (0, _element.createElement)(_blockDraggable.default, {
    clientIds: clientIds,
    cloneClassname: "block-editor-block-mover__drag-clone"
  }, draggableProps => (0, _element.createElement)(_components.Button, (0, _extends2.default)({
    icon: _icons.dragHandle,
    className: "block-editor-block-mover__drag-handle",
    "aria-hidden": "true",
    label: dragHandleLabel // Should not be able to tab to drag handle as this
    // button can only be used with a pointer device.
    ,
    tabIndex: "-1"
  }, draggableProps))), (0, _element.createElement)(_components.ToolbarGroup, {
    className: "block-editor-block-mover__move-button-container"
  }, (0, _element.createElement)(_components.ToolbarItem, {
    onFocus: onFocus,
    onBlur: onBlur
  }, itemProps => (0, _element.createElement)(_button.BlockMoverUpButton, (0, _extends2.default)({
    clientIds: clientIds
  }, itemProps))), (0, _element.createElement)(_components.ToolbarItem, {
    onFocus: onFocus,
    onBlur: onBlur
  }, itemProps => (0, _element.createElement)(_button.BlockMoverDownButton, (0, _extends2.default)({
    clientIds: clientIds
  }, itemProps)))));
}

var _default = (0, _data.withSelect)((select, {
  clientIds
}) => {
  var _getBlockListSettings;

  const {
    getBlock,
    getBlockIndex,
    getBlockListSettings,
    getTemplateLock,
    getBlockOrder,
    getBlockRootClientId
  } = select(_store.store);
  const normalizedClientIds = (0, _lodash.castArray)(clientIds);
  const firstClientId = (0, _lodash.first)(normalizedClientIds);
  const block = getBlock(firstClientId);
  const rootClientId = getBlockRootClientId((0, _lodash.first)(normalizedClientIds));
  const firstIndex = getBlockIndex(firstClientId, rootClientId);
  const lastIndex = getBlockIndex((0, _lodash.last)(normalizedClientIds), rootClientId);
  const blockOrder = getBlockOrder(rootClientId);
  const isFirst = firstIndex === 0;
  const isLast = lastIndex === blockOrder.length - 1;
  return {
    blockType: block ? (0, _blocks.getBlockType)(block.name) : null,
    isLocked: getTemplateLock(rootClientId) === 'all',
    rootClientId,
    firstIndex,
    isFirst,
    isLast,
    orientation: (_getBlockListSettings = getBlockListSettings(rootClientId)) === null || _getBlockListSettings === void 0 ? void 0 : _getBlockListSettings.orientation
  };
})(BlockMover);

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