Experimental prevent telegram swipe down closing (#14)

* Prevent telegram swipe down closing

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;

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 (
+    <div className="fixed-container">
+      <div className="scrollable-content">{children}</div>
+    </div>
+  );
+};
+
+const isMobileIos = /iPad|iPhone|iPod/.test(navigator.userAgent);
+
+export const PreventTelegramSwipeDownClosingIos = (props: {
+  children: ReactNode;
+  withScroll: boolean;
+}) => {
+  return (
+    <PreventTelegramSwipeDownClosing
+      condition={isMobileIos}
+      withScroll={props.withScroll}
+    >
+      {props.children}
+    </PreventTelegramSwipeDownClosing>
+  );
+};

src/screens/app.tsx

@@ -12,6 +12,7 @@ import { UserSettingsStoreProvider } from "../store/user-settings-store-context.
 import { UserSettingsMain } from "./user-settings/user-settings-main.tsx";
 import { deckListStore } from "../store/deck-list-store.ts";
 import { FullScreenLoader } from "./deck-list/full-screen-loader.tsx";
+import { PreventTelegramSwipeDownClosingIos } from "../lib/telegram/preventTelegramSwipeDownClosing.tsx";
 
 export const App = observer(() => {
   if (deckListStore.isSharedDeckLoading || deckListStore.isDeckRemoving) {
@@ -34,9 +35,11 @@ export const App = observer(() => {
       )}
       {screenStore.screen.type === "cardQuickAddForm" && <QuickAddCardForm />}
       {screenStore.screen.type === "userSettings" && (
-        <UserSettingsStoreProvider>
-          <UserSettingsMain />
-        </UserSettingsStoreProvider>
+        <PreventTelegramSwipeDownClosingIos withScroll={false}>
+          <UserSettingsStoreProvider>
+            <UserSettingsMain />
+          </UserSettingsStoreProvider>
+        </PreventTelegramSwipeDownClosingIos>
       )}
     </div>
   );

src/screens/deck-review/deck-screen.tsx

@@ -4,14 +4,23 @@ import { Review } from "./review.tsx";
 import { DeckPreview } from "./deck-preview.tsx";
 import { useReviewStore } from "../../store/review-store-context.tsx";
 import { DeckFinished } from "./deck-finished.tsx";
+import { PreventTelegramSwipeDownClosingIos } from "../../lib/telegram/preventTelegramSwipeDownClosing.tsx";
 
 export const DeckScreen = observer(() => {
   const reviewStore = useReviewStore();
 
   if (reviewStore.isFinished) {
-    return <DeckFinished />;
+    return (
+      <PreventTelegramSwipeDownClosingIos withScroll={false}>
+        <DeckFinished />
+      </PreventTelegramSwipeDownClosingIos>
+    );
   } else if (reviewStore.currentCardId) {
-    return <Review />;
+    return (
+      <PreventTelegramSwipeDownClosingIos withScroll={false}>
+        <Review />
+      </PreventTelegramSwipeDownClosingIos>
+    );
   }
   return <DeckPreview />;
 });