@gechiui/block-editor/build/components/block-mover/button.js

Generic block editor.

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.BlockMoverUpButton = exports.BlockMoverDownButton = void 0;

var _element = require("@gechiui/element");

var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));

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

var _lodash = require("lodash");

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

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

var _compose = require("@gechiui/compose");

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

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

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

var _moverDescription = require("./mover-description");

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

/**
 * External dependencies
 */

/**
 * GeChiUI dependencies
 */

/**
 * Internal dependencies
 */
const getArrowIcon = (direction, orientation) => {
  if (direction === 'up') {
    if (orientation === 'horizontal') {
      return (0, _i18n.isRTL)() ? _icons.chevronRight : _icons.chevronLeft;
    }

    return _icons.chevronUp;
  } else if (direction === 'down') {
    if (orientation === 'horizontal') {
      return (0, _i18n.isRTL)() ? _icons.chevronLeft : _icons.chevronRight;
    }

    return _icons.chevronDown;
  }

  return null;
};

const getMovementDirectionLabel = (moveDirection, orientation) => {
  if (moveDirection === 'up') {
    if (orientation === 'horizontal') {
      return (0, _i18n.isRTL)() ? (0, _i18n.__)('右移') : (0, _i18n.__)('左移');
    }

    return (0, _i18n.__)('上移');
  } else if (moveDirection === 'down') {
    if (orientation === 'horizontal') {
      return (0, _i18n.isRTL)() ? (0, _i18n.__)('左移') : (0, _i18n.__)('右移');
    }

    return (0, _i18n.__)('下移');
  }

  return null;
};

const BlockMoverButton = (0, _element.forwardRef)((_ref, ref) => {
  let {
    clientIds,
    direction,
    orientation: moverOrientation,
    ...props
  } = _ref;
  const instanceId = (0, _compose.useInstanceId)(BlockMoverButton);
  const blocksCount = (0, _lodash.castArray)(clientIds).length;
  const {
    blockType,
    isDisabled,
    rootClientId,
    isFirst,
    isLast,
    firstIndex,
    orientation = 'vertical'
  } = (0, _data.useSelect)(select => {
    const {
      getBlockIndex,
      getBlockRootClientId,
      getBlockOrder,
      getBlock,
      getBlockListSettings
    } = select(_store.store);
    const normalizedClientIds = (0, _lodash.castArray)(clientIds);
    const firstClientId = (0, _lodash.first)(normalizedClientIds);
    const blockRootClientId = getBlockRootClientId(firstClientId);
    const firstBlockIndex = getBlockIndex(firstClientId);
    const lastBlockIndex = getBlockIndex((0, _lodash.last)(normalizedClientIds));
    const blockOrder = getBlockOrder(blockRootClientId);
    const block = getBlock(firstClientId);
    const isFirstBlock = firstBlockIndex === 0;
    const isLastBlock = lastBlockIndex === blockOrder.length - 1;
    const {
      orientation: blockListOrientation
    } = getBlockListSettings(blockRootClientId) || {};
    return {
      blockType: block ? (0, _blocks.getBlockType)(block.name) : null,
      isDisabled: direction === 'up' ? isFirstBlock : isLastBlock,
      rootClientId: blockRootClientId,
      firstIndex: firstBlockIndex,
      isFirst: isFirstBlock,
      isLast: isLastBlock,
      orientation: moverOrientation || blockListOrientation
    };
  }, [clientIds, direction]);
  const {
    moveBlocksDown,
    moveBlocksUp
  } = (0, _data.useDispatch)(_store.store);
  const moverFunction = direction === 'up' ? moveBlocksUp : moveBlocksDown;

  const onClick = event => {
    moverFunction(clientIds, rootClientId);

    if (props.onClick) {
      props.onClick(event);
    }
  };

  const descriptionId = `block-editor-block-mover-button__description-${instanceId}`;
  return (0, _element.createElement)(_element.Fragment, null, (0, _element.createElement)(_components.Button, (0, _extends2.default)({
    ref: ref,
    className: (0, _classnames.default)('block-editor-block-mover-button', `is-${direction}-button`),
    icon: getArrowIcon(direction, orientation),
    label: getMovementDirectionLabel(direction, orientation),
    "aria-describedby": descriptionId
  }, props, {
    onClick: isDisabled ? null : onClick,
    "aria-disabled": isDisabled
  })), (0, _element.createElement)("span", {
    id: descriptionId,
    className: "block-editor-block-mover-button__description"
  }, (0, _moverDescription.getBlockMoverDescription)(blocksCount, blockType && blockType.title, firstIndex, isFirst, isLast, direction === 'up' ? -1 : 1, orientation)));
});
const BlockMoverUpButton = (0, _element.forwardRef)((props, ref) => {
  return (0, _element.createElement)(BlockMoverButton, (0, _extends2.default)({
    direction: "up",
    ref: ref
  }, props));
});
exports.BlockMoverUpButton = BlockMoverUpButton;
const BlockMoverDownButton = (0, _element.forwardRef)((props, ref) => {
  return (0, _element.createElement)(BlockMoverButton, (0, _extends2.default)({
    direction: "down",
    ref: ref
  }, props));
});
exports.BlockMoverDownButton = BlockMoverDownButton;
//# sourceMappingURL=button.js.map