@wordpress/block-editor/build/components/grid/grid-item-movers.js

Generic block editor.

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.GridItemMovers = GridItemMovers;
var _clsx = _interopRequireDefault(require("clsx"));
var _i18n = require("@wordpress/i18n");
var _components = require("@wordpress/components");
var _icons = require("@wordpress/icons");
var _data = require("@wordpress/data");
var _compose = require("@wordpress/compose");
var _blockControls = _interopRequireDefault(require("../block-controls"));
var _useGetNumberOfBlocksBeforeCell = require("./use-get-number-of-blocks-before-cell");
var _store = require("../../store");
var _jsxRuntime = require("react/jsx-runtime");
/**
 * External dependencies
 */

/**
 * WordPress dependencies
 */

/**
 * Internal dependencies
 */

function GridItemMovers({
  layout,
  parentLayout,
  onChange,
  gridClientId,
  blockClientId
}) {
  var _layout$columnStart, _layout$rowStart, _layout$columnSpan, _layout$rowSpan;
  const {
    moveBlocksToPosition,
    __unstableMarkNextChangeAsNotPersistent
  } = (0, _data.useDispatch)(_store.store);
  const columnStart = (_layout$columnStart = layout?.columnStart) !== null && _layout$columnStart !== void 0 ? _layout$columnStart : 1;
  const rowStart = (_layout$rowStart = layout?.rowStart) !== null && _layout$rowStart !== void 0 ? _layout$rowStart : 1;
  const columnSpan = (_layout$columnSpan = layout?.columnSpan) !== null && _layout$columnSpan !== void 0 ? _layout$columnSpan : 1;
  const rowSpan = (_layout$rowSpan = layout?.rowSpan) !== null && _layout$rowSpan !== void 0 ? _layout$rowSpan : 1;
  const columnEnd = columnStart + columnSpan - 1;
  const rowEnd = rowStart + rowSpan - 1;
  const columnCount = parentLayout?.columnCount;
  const rowCount = parentLayout?.rowCount;
  const getNumberOfBlocksBeforeCell = (0, _useGetNumberOfBlocksBeforeCell.useGetNumberOfBlocksBeforeCell)(gridClientId, columnCount);
  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_blockControls.default, {
    group: "parent",
    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_components.ToolbarGroup, {
      className: "block-editor-grid-item-mover__move-button-container",
      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
        className: "block-editor-grid-item-mover__move-horizontal-button-container is-left",
        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(GridItemMover, {
          icon: (0, _i18n.isRTL)() ? _icons.chevronRight : _icons.chevronLeft,
          label: (0, _i18n.__)('Move left'),
          description: (0, _i18n.__)('Move left'),
          isDisabled: columnStart <= 1,
          onClick: () => {
            onChange({
              columnStart: columnStart - 1
            });
            __unstableMarkNextChangeAsNotPersistent();
            moveBlocksToPosition([blockClientId], gridClientId, gridClientId, getNumberOfBlocksBeforeCell(columnStart - 1, rowStart));
          }
        })
      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
        className: "block-editor-grid-item-mover__move-vertical-button-container",
        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(GridItemMover, {
          className: "is-up-button",
          icon: _icons.chevronUp,
          label: (0, _i18n.__)('Move up'),
          description: (0, _i18n.__)('Move up'),
          isDisabled: rowStart <= 1,
          onClick: () => {
            onChange({
              rowStart: rowStart - 1
            });
            __unstableMarkNextChangeAsNotPersistent();
            moveBlocksToPosition([blockClientId], gridClientId, gridClientId, getNumberOfBlocksBeforeCell(columnStart, rowStart - 1));
          }
        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(GridItemMover, {
          className: "is-down-button",
          icon: _icons.chevronDown,
          label: (0, _i18n.__)('Move down'),
          description: (0, _i18n.__)('Move down'),
          isDisabled: rowCount && rowEnd >= rowCount,
          onClick: () => {
            onChange({
              rowStart: rowStart + 1
            });
            __unstableMarkNextChangeAsNotPersistent();
            moveBlocksToPosition([blockClientId], gridClientId, gridClientId, getNumberOfBlocksBeforeCell(columnStart, rowStart + 1));
          }
        })]
      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
        className: "block-editor-grid-item-mover__move-horizontal-button-container is-right",
        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(GridItemMover, {
          icon: (0, _i18n.isRTL)() ? _icons.chevronLeft : _icons.chevronRight,
          label: (0, _i18n.__)('Move right'),
          description: (0, _i18n.__)('Move right'),
          isDisabled: columnCount && columnEnd >= columnCount,
          onClick: () => {
            onChange({
              columnStart: columnStart + 1
            });
            __unstableMarkNextChangeAsNotPersistent();
            moveBlocksToPosition([blockClientId], gridClientId, gridClientId, getNumberOfBlocksBeforeCell(columnStart + 1, rowStart));
          }
        })
      })]
    })
  });
}
function GridItemMover({
  className,
  icon,
  label,
  isDisabled,
  onClick,
  description
}) {
  const instanceId = (0, _compose.useInstanceId)(GridItemMover);
  const descriptionId = `block-editor-grid-item-mover-button__description-${instanceId}`;
  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_components.ToolbarButton, {
      className: (0, _clsx.default)('block-editor-grid-item-mover-button', className),
      icon: icon,
      label: label,
      "aria-describedby": descriptionId,
      onClick: isDisabled ? null : onClick,
      disabled: isDisabled,
      accessibleWhenDisabled: true
    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.VisuallyHidden, {
      id: descriptionId,
      children: description
    })]
  });
}
//# sourceMappingURL=grid-item-movers.js.map