diff --git a/src/index.css b/src/index.css index 9d7ee5eb..c688ebfc 100644 --- a/src/index.css +++ b/src/index.css @@ -10,6 +10,24 @@ -webkit-text-size-adjust: 100%; } +.fixed-container { + position: fixed; + top: 0; + left: 0; + right: 0; + bottom: 0; + overflow: hidden; +} + +.scrollable-content { + height: 100%; + overflow-y: scroll; + transform: translate3d(0, 0, 0); + -webkit-overflow-scrolling: touch; + + padding: 0 16px 0 16px; +} + body { margin: 0; display: flex; diff --git a/src/lib/telegram/preventTelegramSwipeDownClosing.tsx b/src/lib/telegram/preventTelegramSwipeDownClosing.tsx new file mode 100644 index 00000000..0c2ac1a0 --- /dev/null +++ b/src/lib/telegram/preventTelegramSwipeDownClosing.tsx @@ -0,0 +1,77 @@ +// @ts-nocheck +import React, { ReactNode, useEffect } from "react"; + +function throttle(func, limit) { + let inThrottle; + return function () { + // eslint-disable-next-line + const args = arguments; + // eslint-disable-next-line + const context = this; + if (!inThrottle) { + func.apply(context, args); + inThrottle = true; + setTimeout(() => (inThrottle = false), limit); + } + }; +} + +type Props = { + condition: boolean; + children: ReactNode; + withScroll: boolean; +}; + +export const PreventTelegramSwipeDownClosing = (props: Props) => { + const { condition, children, withScroll } = props; + + useEffect(() => { + if (!condition) { + return; + } + const scrollableElement = document.querySelector(".scrollable-content"); + + const onTouchMove = throttle((e) => { + if (withScroll) { + requestAnimationFrame(() => { + e.preventDefault(); + }); + } else { + e.preventDefault(); + } + }, 100); + + scrollableElement.addEventListener("touchmove", onTouchMove, false); + + return () => { + scrollableElement.removeEventListener("touchMove", onTouchMove, false); + }; + // eslint-disable-next-line + }, []); + + if (!condition) { + return children; + } + + return ( +