UNPKG

jobiqo-cl

Version:

[![CircleCI](https://circleci.com/gh/jobiqo/jobiqo-cl.svg?style=svg&circle-token=5a24efa5b8bbc4879276123e77d0d3f35ca7144c)](https://circleci.com/gh/jobiqo/jobiqo-cl)

170 lines (164 loc) 7.76 kB
'use strict'; Object.defineProperty(exports, '__esModule', { value: true }); function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; } var React = require('react'); var React__default = _interopDefault(React); require('../../../react-remove-scroll-bar/dist/es2015/constants.js'); require('../../../react-style-singleton/dist/es2015/singleton.js'); require('../../../react-style-singleton/dist/es2015/hook.js'); var component = require('../../../react-style-singleton/dist/es2015/component.js'); require('../../../react-remove-scroll-bar/dist/es2015/utils.js'); var component$1 = require('../../../react-remove-scroll-bar/dist/es2015/component.js'); var handleScroll = require('./handleScroll.js'); var aggresiveCapture = require('./aggresiveCapture.js'); var getTouchXY = function (event) { return 'changedTouches' in event ? [event.changedTouches[0].clientX, event.changedTouches[0].clientY] : [0, 0]; }; var getDeltaXY = function (event) { return [event.deltaX, event.deltaY]; }; 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-" + id + " {pointer-events: none;}\n .allow-interactivity-" + 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(function () { return component.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-" + id); var allow_1 = [ props.lockRef.current ].concat((props.shards || []).map(extractRef)).filter(Boolean); allow_1.forEach(function (el) { return el.classList.add("allow-interactivity-" + id); }); return function () { document.body.classList.remove("block-interactivity-" + id); allow_1.forEach(function (el) { return el.classList.remove("allow-interactivity-" + id); }); }; } return; }, [props.inert, props.lockRef.current, props.shards]); var shouldCancelEvent = React.useCallback(function (event, parent) { if ('touches' in event && event.touches.length === 2) { return !lastProps.current.allowPinchZoom; } var touch = 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'; var canBeScrolledInMainDirection = handleScroll.locationCouldBeScrolled(moveDirection, target); if (!canBeScrolledInMainDirection) { return true; } if (canBeScrolledInMainDirection) { currentAxis = moveDirection; } else { currentAxis = moveDirection === 'v' ? 'h' : 'v'; canBeScrolledInMainDirection = handleScroll.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 handleScroll.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 ? getDeltaXY(event) : getTouchXY(event); var sourceEvent = shouldPreventQueue.current.filter(function (e) { return e.name === event.type && e.target === event.target && deltaCompare(e.delta, delta); })[0]; // self event, and should be canceled if (sourceEvent && sourceEvent.should) { 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) { event.preventDefault(); } } }, []); var shouldCancel = React.useCallback(function (name, delta, target, should) { var event = { name: name, delta: delta, target: target, should: should }; 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 = getTouchXY(event); activeAxis.current = undefined; }, []); var scrollWheel = React.useCallback(function (event) { shouldCancel(event.type, getDeltaXY(event), event.target, shouldCancelEvent(event, props.lockRef.current)); }, []); var scrollTouchMove = React.useCallback(function (event) { shouldCancel(event.type, 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.nonPassive); document.addEventListener('touchmove', shouldPrevent, aggresiveCapture.nonPassive); document.addEventListener('touchstart', scrollTouchStart, aggresiveCapture.nonPassive); return function () { lockStack = lockStack.filter(function (inst) { return inst !== Style; }); document.removeEventListener('wheel', shouldPrevent, aggresiveCapture.nonPassive); document.removeEventListener('touchmove', shouldPrevent, aggresiveCapture.nonPassive); document.removeEventListener('touchstart', scrollTouchStart, aggresiveCapture.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(component$1.RemoveScrollBar, { gapMode: "margin" }) : null)); } exports.RemoveScrollSideCar = RemoveScrollSideCar; exports.getDeltaXY = getDeltaXY; exports.getTouchXY = getTouchXY;