@wordpress/block-editor
Version:
134 lines (130 loc) • 6.28 kB
JavaScript
;
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = DroppingInsertionPoint;
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"));
var _jsxRuntime = require("react/jsx-runtime");
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
/**
* 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 /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeReanimated.default.View, {
pointerEvents: "none",
style: insertionPointStyles
});
}
//# sourceMappingURL=dropping-insertion-point.native.js.map