@wordpress/block-editor/build/components/block-draggable/dropping-insertion-point.native.js

Generic block editor.

"use strict";

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

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = DroppingInsertionPoint;

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

var _reactNativeReanimated = _interopRequireWildcard(require("react-native-reanimated"));

var _reactNativeSafeAreaContext = require("react-native-safe-area-context");

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

var _reactNativeBridge = require("@wordpress/react-native-bridge");

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

var _blockListContext = require("../block-list/block-list-context");

var _droppingInsertionPoint = _interopRequireDefault(require("./dropping-insertion-point.scss"));

function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }

function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }

/**
 * External dependencies
 */

/**
 * WordPress dependencies
 */

/**
 * Internal dependencies
 */

/**
 * Dropping zone indicator component.
 *
 * This component shows where a block can be dropped when it's being dragged.
 *
 * @param {Object}                                        props                  Component props.
 * @param {Object}                                        props.scroll           Scroll offset object.
 * @param {Object}                                        props.currentYPosition Current Y coordinate position when dragging.
 * @param {import('react-native-reanimated').SharedValue} props.isDragging       Whether or not dragging has started.
 * @param {import('react-native-reanimated').SharedValue} props.targetBlockIndex Current block target index.
 *
 * @return {JSX.Element} The component to be rendered.
 */
function DroppingInsertionPoint({
  scroll,
  currentYPosition,
  isDragging,
  targetBlockIndex
}) {
  const {
    getBlockOrder,
    isBlockBeingDragged,
    isDraggingBlocks,
    getPreviousBlockClientId,
    getNextBlockClientId
  } = (0, _data.useSelect)(_store.store);
  const {
    blocksLayouts,
    findBlockLayoutByClientId
  } = (0, _blockListContext.useBlockListContext)();
  const {
    top,
    bottom
  } = (0, _reactNativeSafeAreaContext.useSafeAreaInsets)();
  const {
    height
  } = (0, _reactNativeSafeAreaContext.useSafeAreaFrame)();
  const safeAreaOffset = top + bottom;
  const maxHeight = height - (safeAreaOffset + _droppingInsertionPoint.default['dropping-insertion-point'].height);
  const blockYPosition = (0, _reactNativeReanimated.useSharedValue)(0);
  const opacity = (0, _reactNativeReanimated.useSharedValue)(0);
  (0, _reactNativeReanimated.useAnimatedReaction)(() => isDragging.value, value => {
    if (!value) {
      opacity.value = 0;
      blockYPosition.value = 0;
    }
  });

  function getSelectedBlockIndicatorPosition(positions) {
    const currentYPositionWithScroll = currentYPosition.value + scroll.offsetY.value;
    const midpoint = (positions.top + positions.bottom) / 2;
    return midpoint < currentYPositionWithScroll ? positions.bottom : positions.top;
  }

  function setIndicatorPosition(index) {
    const insertionPointIndex = index;
    const order = getBlockOrder();
    const isDraggingAnyBlocks = isDraggingBlocks();

    if (!isDraggingAnyBlocks || insertionPointIndex === null || !order.length) {
      return;
    }

    let previousClientId = order[insertionPointIndex - 1];
    let nextClientId = order[insertionPointIndex];

    while (isBlockBeingDragged(previousClientId)) {
      previousClientId = getPreviousBlockClientId(previousClientId);
    }

    while (isBlockBeingDragged(nextClientId)) {
      nextClientId = getNextBlockClientId(nextClientId);
    }

    const previousElement = previousClientId ? findBlockLayoutByClientId(blocksLayouts.current, previousClientId) : null;
    const nextElement = nextClientId ? findBlockLayoutByClientId(blocksLayouts.current, nextClientId) : null;
    const previousElementPosition = previousElement ? previousElement.y + previousElement.height : 0;
    const nextElementPosition = nextElement ? nextElement.y : 0;
    const elementsPositions = {
      top: Math.floor(previousElement ? previousElementPosition : nextElementPosition),
      bottom: Math.floor(nextElement ? nextElementPosition : previousElementPosition)
    };
    const nextPosition = elementsPositions.top !== elementsPositions.bottom ? getSelectedBlockIndicatorPosition(elementsPositions) : elementsPositions.top;

    if (nextPosition && blockYPosition.value !== nextPosition) {
      opacity.value = 0;
      blockYPosition.value = nextPosition;
      opacity.value = (0, _reactNativeReanimated.withTiming)(1);
      (0, _reactNativeBridge.generateHapticFeedback)();
    }
  }

  (0, _reactNativeReanimated.useAnimatedReaction)(() => targetBlockIndex.value, (value, previous) => {
    if (value !== previous) {
      (0, _reactNativeReanimated.runOnJS)(setIndicatorPosition)(value);
    }
  });
  const animatedStyles = (0, _reactNativeReanimated.useAnimatedStyle)(() => {
    const translationY = blockYPosition.value - scroll.offsetY.value; // Prevents overflowing behind the header/footer

    const shouldHideIndicator = translationY < 0 || translationY > maxHeight;
    return {
      opacity: shouldHideIndicator ? 0 : opacity.value,
      transform: [{
        translateY: translationY
      }]
    };
  });
  const insertionPointStyles = [_droppingInsertionPoint.default['dropping-insertion-point'], animatedStyles];
  return (0, _element.createElement)(_reactNativeReanimated.default.View, {
    pointerEvents: "none",
    style: insertionPointStyles
  });
}
//# sourceMappingURL=dropping-insertion-point.native.js.map