@gechiui/block-editor/build-module/components/block-mover/index.js

Generic block editor.

import _extends from "@babel/runtime/helpers/esm/extends";
import { createElement } from "@gechiui/element";

/**
 * External dependencies
 */
import { first, last, castArray } from 'lodash';
import classnames from 'classnames';
/**
 * GeChiUI dependencies
 */

import { dragHandle } from '@gechiui/icons';
import { ToolbarGroup, ToolbarItem, Button } from '@gechiui/components';
import { getBlockType } from '@gechiui/blocks';
import { useState } from '@gechiui/element';
import { withSelect } from '@gechiui/data';
import { __ } from '@gechiui/i18n';
/**
 * Internal dependencies
 */

import BlockDraggable from '../block-draggable';
import { BlockMoverUpButton, BlockMoverDownButton } from './button';
import { store as blockEditorStore } from '../../store';

function BlockMover(_ref) {
  let {
    isFirst,
    isLast,
    clientIds,
    canMove,
    isHidden,
    rootClientId,
    orientation,
    hideDragHandle
  } = _ref;
  const [isFocused, setIsFocused] = useState(false);

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

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

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

  const dragHandleLabel = __('拖动'); // 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 createElement("div", {
    className: classnames('block-editor-block-mover', {
      'is-visible': isFocused || !isHidden,
      'is-horizontal': orientation === 'horizontal'
    })
  }, !hideDragHandle && createElement(BlockDraggable, {
    clientIds: clientIds,
    cloneClassname: "block-editor-block-mover__drag-clone"
  }, draggableProps => createElement(Button, _extends({
    icon: 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))), createElement(ToolbarGroup, {
    className: "block-editor-block-mover__move-button-container"
  }, createElement(ToolbarItem, {
    onFocus: onFocus,
    onBlur: onBlur
  }, itemProps => createElement(BlockMoverUpButton, _extends({
    clientIds: clientIds
  }, itemProps))), createElement(ToolbarItem, {
    onFocus: onFocus,
    onBlur: onBlur
  }, itemProps => createElement(BlockMoverDownButton, _extends({
    clientIds: clientIds
  }, itemProps)))));
}

export default withSelect((select, _ref2) => {
  var _getBlockListSettings;

  let {
    clientIds
  } = _ref2;
  const {
    getBlock,
    getBlockIndex,
    getBlockListSettings,
    canMoveBlocks,
    getBlockOrder,
    getBlockRootClientId
  } = select(blockEditorStore);
  const normalizedClientIds = castArray(clientIds);
  const firstClientId = first(normalizedClientIds);
  const block = getBlock(firstClientId);
  const rootClientId = getBlockRootClientId(first(normalizedClientIds));
  const firstIndex = getBlockIndex(firstClientId);
  const lastIndex = getBlockIndex(last(normalizedClientIds));
  const blockOrder = getBlockOrder(rootClientId);
  const isFirst = firstIndex === 0;
  const isLast = lastIndex === blockOrder.length - 1;
  return {
    blockType: block ? getBlockType(block.name) : null,
    canMove: canMoveBlocks(clientIds, rootClientId),
    rootClientId,
    firstIndex,
    isFirst,
    isLast,
    orientation: (_getBlockListSettings = getBlockListSettings(rootClientId)) === null || _getBlockListSettings === void 0 ? void 0 : _getBlockListSettings.orientation
  };
})(BlockMover);
//# sourceMappingURL=index.js.map