@wordpress/block-editor/build/components/block-draggable/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 _blocks = require("@wordpress/blocks");

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

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

var _draggableChip = _interopRequireDefault(require("./draggable-chip"));

var _useScrollWhenDragging = _interopRequireDefault(require("./use-scroll-when-dragging"));

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

/**
 * WordPress dependencies
 */

/**
 * Internal dependencies
 */
const BlockDraggable = ({
  children,
  clientIds,
  cloneClassname,
  onDragStart,
  onDragEnd
}) => {
  const {
    srcRootClientId,
    isDraggable,
    icon
  } = (0, _data.useSelect)(select => {
    const {
      canMoveBlocks,
      getBlockRootClientId,
      getBlockName
    } = select(_store.store);
    const {
      getBlockType
    } = select(_blocks.store);
    const rootClientId = getBlockRootClientId(clientIds[0]);
    const blockName = getBlockName(clientIds[0]);
    return {
      srcRootClientId: rootClientId,
      isDraggable: canMoveBlocks(clientIds, rootClientId),
      icon: getBlockType(blockName)?.icon
    };
  }, [clientIds]);
  const isDragging = (0, _element.useRef)(false);
  const [startScrolling, scrollOnDragOver, stopScrolling] = (0, _useScrollWhenDragging.default)();
  const {
    startDraggingBlocks,
    stopDraggingBlocks
  } = (0, _data.useDispatch)(_store.store); // Stop dragging blocks if the block draggable is unmounted.

  (0, _element.useEffect)(() => {
    return () => {
      if (isDragging.current) {
        stopDraggingBlocks();
      }
    };
  }, []);

  if (!isDraggable) {
    return children({
      draggable: false
    });
  }

  const transferData = {
    type: 'block',
    srcClientIds: clientIds,
    srcRootClientId
  };
  return (0, _element.createElement)(_components.Draggable, {
    cloneClassname: cloneClassname,
    __experimentalTransferDataType: "wp-blocks",
    transferData: transferData,
    onDragStart: event => {
      // Defer hiding the dragged source element to the next
      // frame to enable dragging.
      window.requestAnimationFrame(() => {
        startDraggingBlocks(clientIds);
        isDragging.current = true;
        startScrolling(event);

        if (onDragStart) {
          onDragStart();
        }
      });
    },
    onDragOver: scrollOnDragOver,
    onDragEnd: () => {
      stopDraggingBlocks();
      isDragging.current = false;
      stopScrolling();

      if (onDragEnd) {
        onDragEnd();
      }
    },
    __experimentalDragComponent: (0, _element.createElement)(_draggableChip.default, {
      count: clientIds.length,
      icon: icon
    })
  }, ({
    onDraggableStart,
    onDraggableEnd
  }) => {
    return children({
      draggable: true,
      onDragStart: onDraggableStart,
      onDragEnd: onDraggableEnd
    });
  });
};

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