164 lines
8.0 KiB
JavaScript
164 lines
8.0 KiB
JavaScript
"use strict";
|
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
exports.RemoveScrollSideCar = exports.getDeltaXY = exports.getTouchXY = void 0;
|
|
var tslib_1 = require("tslib");
|
|
var React = tslib_1.__importStar(require("react"));
|
|
var react_remove_scroll_bar_1 = require("react-remove-scroll-bar");
|
|
var react_style_singleton_1 = require("react-style-singleton");
|
|
var aggresiveCapture_1 = require("./aggresiveCapture");
|
|
var handleScroll_1 = require("./handleScroll");
|
|
var getTouchXY = function (event) {
|
|
return 'changedTouches' in event ? [event.changedTouches[0].clientX, event.changedTouches[0].clientY] : [0, 0];
|
|
};
|
|
exports.getTouchXY = getTouchXY;
|
|
var getDeltaXY = function (event) { return [event.deltaX, event.deltaY]; };
|
|
exports.getDeltaXY = getDeltaXY;
|
|
var extractRef = function (ref) {
|
|
return ref && 'current' in ref ? ref.current : ref;
|
|
};
|
|
var deltaCompare = function (x, y) { return x[0] === y[0] && x[1] === y[1]; };
|
|
var generateStyle = function (id) { return "\n .block-interactivity-".concat(id, " {pointer-events: none;}\n .allow-interactivity-").concat(id, " {pointer-events: all;}\n"); };
|
|
var idCounter = 0;
|
|
var lockStack = [];
|
|
function RemoveScrollSideCar(props) {
|
|
var shouldPreventQueue = React.useRef([]);
|
|
var touchStartRef = React.useRef([0, 0]);
|
|
var activeAxis = React.useRef();
|
|
var id = React.useState(idCounter++)[0];
|
|
var Style = React.useState(react_style_singleton_1.styleSingleton)[0];
|
|
var lastProps = React.useRef(props);
|
|
React.useEffect(function () {
|
|
lastProps.current = props;
|
|
}, [props]);
|
|
React.useEffect(function () {
|
|
if (props.inert) {
|
|
document.body.classList.add("block-interactivity-".concat(id));
|
|
var allow_1 = tslib_1.__spreadArray([props.lockRef.current], (props.shards || []).map(extractRef), true).filter(Boolean);
|
|
allow_1.forEach(function (el) { return el.classList.add("allow-interactivity-".concat(id)); });
|
|
return function () {
|
|
document.body.classList.remove("block-interactivity-".concat(id));
|
|
allow_1.forEach(function (el) { return el.classList.remove("allow-interactivity-".concat(id)); });
|
|
};
|
|
}
|
|
return;
|
|
}, [props.inert, props.lockRef.current, props.shards]);
|
|
var shouldCancelEvent = React.useCallback(function (event, parent) {
|
|
if (('touches' in event && event.touches.length === 2) || (event.type === 'wheel' && event.ctrlKey)) {
|
|
return !lastProps.current.allowPinchZoom;
|
|
}
|
|
var touch = (0, exports.getTouchXY)(event);
|
|
var touchStart = touchStartRef.current;
|
|
var deltaX = 'deltaX' in event ? event.deltaX : touchStart[0] - touch[0];
|
|
var deltaY = 'deltaY' in event ? event.deltaY : touchStart[1] - touch[1];
|
|
var currentAxis;
|
|
var target = event.target;
|
|
var moveDirection = Math.abs(deltaX) > Math.abs(deltaY) ? 'h' : 'v';
|
|
// allow horizontal touch move on Range inputs. They will not cause any scroll
|
|
if ('touches' in event && moveDirection === 'h' && target.type === 'range') {
|
|
return false;
|
|
}
|
|
var canBeScrolledInMainDirection = (0, handleScroll_1.locationCouldBeScrolled)(moveDirection, target);
|
|
if (!canBeScrolledInMainDirection) {
|
|
return true;
|
|
}
|
|
if (canBeScrolledInMainDirection) {
|
|
currentAxis = moveDirection;
|
|
}
|
|
else {
|
|
currentAxis = moveDirection === 'v' ? 'h' : 'v';
|
|
canBeScrolledInMainDirection = (0, handleScroll_1.locationCouldBeScrolled)(moveDirection, target);
|
|
// other axis might be not scrollable
|
|
}
|
|
if (!canBeScrolledInMainDirection) {
|
|
return false;
|
|
}
|
|
if (!activeAxis.current && 'changedTouches' in event && (deltaX || deltaY)) {
|
|
activeAxis.current = currentAxis;
|
|
}
|
|
if (!currentAxis) {
|
|
return true;
|
|
}
|
|
var cancelingAxis = activeAxis.current || currentAxis;
|
|
return (0, handleScroll_1.handleScroll)(cancelingAxis, parent, event, cancelingAxis === 'h' ? deltaX : deltaY, true);
|
|
}, []);
|
|
var shouldPrevent = React.useCallback(function (_event) {
|
|
var event = _event;
|
|
if (!lockStack.length || lockStack[lockStack.length - 1] !== Style) {
|
|
// not the last active
|
|
return;
|
|
}
|
|
var delta = 'deltaY' in event ? (0, exports.getDeltaXY)(event) : (0, exports.getTouchXY)(event);
|
|
var sourceEvent = shouldPreventQueue.current.filter(function (e) { return e.name === event.type && (e.target === event.target || event.target === e.shadowParent) && deltaCompare(e.delta, delta); })[0];
|
|
// self event, and should be canceled
|
|
if (sourceEvent && sourceEvent.should) {
|
|
if (event.cancelable) {
|
|
event.preventDefault();
|
|
}
|
|
return;
|
|
}
|
|
// outside or shard event
|
|
if (!sourceEvent) {
|
|
var shardNodes = (lastProps.current.shards || [])
|
|
.map(extractRef)
|
|
.filter(Boolean)
|
|
.filter(function (node) { return node.contains(event.target); });
|
|
var shouldStop = shardNodes.length > 0 ? shouldCancelEvent(event, shardNodes[0]) : !lastProps.current.noIsolation;
|
|
if (shouldStop) {
|
|
if (event.cancelable) {
|
|
event.preventDefault();
|
|
}
|
|
}
|
|
}
|
|
}, []);
|
|
var shouldCancel = React.useCallback(function (name, delta, target, should) {
|
|
var event = { name: name, delta: delta, target: target, should: should, shadowParent: getOutermostShadowParent(target) };
|
|
shouldPreventQueue.current.push(event);
|
|
setTimeout(function () {
|
|
shouldPreventQueue.current = shouldPreventQueue.current.filter(function (e) { return e !== event; });
|
|
}, 1);
|
|
}, []);
|
|
var scrollTouchStart = React.useCallback(function (event) {
|
|
touchStartRef.current = (0, exports.getTouchXY)(event);
|
|
activeAxis.current = undefined;
|
|
}, []);
|
|
var scrollWheel = React.useCallback(function (event) {
|
|
shouldCancel(event.type, (0, exports.getDeltaXY)(event), event.target, shouldCancelEvent(event, props.lockRef.current));
|
|
}, []);
|
|
var scrollTouchMove = React.useCallback(function (event) {
|
|
shouldCancel(event.type, (0, exports.getTouchXY)(event), event.target, shouldCancelEvent(event, props.lockRef.current));
|
|
}, []);
|
|
React.useEffect(function () {
|
|
lockStack.push(Style);
|
|
props.setCallbacks({
|
|
onScrollCapture: scrollWheel,
|
|
onWheelCapture: scrollWheel,
|
|
onTouchMoveCapture: scrollTouchMove,
|
|
});
|
|
document.addEventListener('wheel', shouldPrevent, aggresiveCapture_1.nonPassive);
|
|
document.addEventListener('touchmove', shouldPrevent, aggresiveCapture_1.nonPassive);
|
|
document.addEventListener('touchstart', scrollTouchStart, aggresiveCapture_1.nonPassive);
|
|
return function () {
|
|
lockStack = lockStack.filter(function (inst) { return inst !== Style; });
|
|
document.removeEventListener('wheel', shouldPrevent, aggresiveCapture_1.nonPassive);
|
|
document.removeEventListener('touchmove', shouldPrevent, aggresiveCapture_1.nonPassive);
|
|
document.removeEventListener('touchstart', scrollTouchStart, aggresiveCapture_1.nonPassive);
|
|
};
|
|
}, []);
|
|
var removeScrollBar = props.removeScrollBar, inert = props.inert;
|
|
return (React.createElement(React.Fragment, null,
|
|
inert ? React.createElement(Style, { styles: generateStyle(id) }) : null,
|
|
removeScrollBar ? React.createElement(react_remove_scroll_bar_1.RemoveScrollBar, { gapMode: props.gapMode }) : null));
|
|
}
|
|
exports.RemoveScrollSideCar = RemoveScrollSideCar;
|
|
function getOutermostShadowParent(node) {
|
|
var shadowParent = null;
|
|
while (node !== null) {
|
|
if (node instanceof ShadowRoot) {
|
|
shadowParent = node.host;
|
|
node = node.host;
|
|
}
|
|
node = node.parentNode;
|
|
}
|
|
return shadowParent;
|
|
}
|