jiti-meet/react/features/chat/components/web/TouchmoveHack.js

68 lines
1.8 KiB
JavaScript

// @flow
import React, { useEffect, useRef } from 'react';
import { isMobileBrowser } from '../../../base/environment/utils';
type Props = {
/**
* The component(s) that need to be scrollable on mobile.
*/
children: React$Node,
/**
* Whether the component is rendered within a modal.
*/
isModal: boolean
};
/**
* Component that disables {@code touchmove} propagation below it.
*
* @returns {ReactElement}
*/
function TouchmoveHack({ children, isModal }: Props) {
if (!isModal || !isMobileBrowser()) {
return children;
}
const touchMoveElementRef = useRef(null);
/**
* Atlaskit's {@code Modal} uses a third party library to disable touchmove events
* which makes scrolling inside dialogs impossible. We therefore employ this hack
* to intercept and stop the propagation of touchmove events from this wrapper that
* is placed around the chat conversation from the {@code ChatDialog}.
*
* @param {Event} event - The touchmove event fired within the component.
* @returns {void}
*/
function handleTouchMove(event: TouchEvent) {
event.stopImmediatePropagation();
}
useEffect(() => {
if (touchMoveElementRef && touchMoveElementRef.current) {
touchMoveElementRef.current.addEventListener('touchmove', handleTouchMove, true);
}
return () => {
if (touchMoveElementRef && touchMoveElementRef.current) {
touchMoveElementRef.current.removeEventListener('touchmove', handleTouchMove, true);
}
};
}, []);
return (
<div
className = 'touchmove-hack'
ref = { touchMoveElementRef }>
{children}
</div>
);
}
export default TouchmoveHack;