iOS prevent swipe down hack (#15)

kubk · Nov 23, 2023 · 63f9e38 · 63f9e38
1 parent 45ce13d
commit 63f9e38
Show file tree

Hide file tree

Showing 4 changed files with 48 additions and 44 deletions.
diff --git a/src/lib/telegram/prevent-telegram-swipe-down-closing.tsx b/src/lib/telegram/prevent-telegram-swipe-down-closing.tsx
@@ -1,40 +1,29 @@
-// @ts-nocheck
 import React, { ReactNode, useEffect, useRef } from "react";
 import WebApp from "@twa-dev/sdk";
 import { css } from "@emotion/css";
-
-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);
-    }
-  };
-}
+import { throttle } from "../throttle/throttle.ts";
 
 type Props = {
   condition: boolean;
   children: ReactNode;
-  withScroll: boolean;
 };
 
 export const PreventTelegramSwipeDownClosing = (props: Props) => {
-  const { condition, children, withScroll } = props;
+  const { condition, children } = props;
   const ref = useRef<HTMLDivElement | null>(null);
 
   useEffect(() => {
     if (!condition) {
       return;
     }
     const scrollableElement = ref.current;
+    if (!scrollableElement) {
+      return;
+    }
+
+    const onTouchMove = throttle((e: MouseEvent) => {
+      const withScroll = (ref.current?.scrollHeight || 0) > window.innerHeight;
 
-    const onTouchMove = throttle((e) => {
       if (withScroll) {
         requestAnimationFrame(() => {
           e.preventDefault();
@@ -85,13 +74,9 @@ export const PreventTelegramSwipeDownClosing = (props: Props) => {
 
 export const PreventTelegramSwipeDownClosingIos = (props: {
   children: ReactNode;
-  withScroll: boolean;
 }) => {
   return (
-    <PreventTelegramSwipeDownClosing
-      condition={WebApp.platform === "ios"}
-      withScroll={props.withScroll}
-    >
+    <PreventTelegramSwipeDownClosing condition={WebApp.platform === "ios"}>
       {props.children}
     </PreventTelegramSwipeDownClosing>
   );

diff --git a/src/lib/throttle/throttle.ts b/src/lib/throttle/throttle.ts
@@ -0,0 +1,16 @@
+// @ts-nocheck
+
+export 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);
+    }
+  };
+}
diff --git a/src/screens/app.tsx b/src/screens/app.tsx
@@ -22,20 +22,32 @@ export const App = observer(() => {
   return (
     <div>
       <VersionWarning />
-      {screenStore.screen.type === "main" && <MainScreen />}
+      {screenStore.screen.type === "main" && (
+        <PreventTelegramSwipeDownClosingIos>
+          <MainScreen />
+        </PreventTelegramSwipeDownClosingIos>
+      )}
       {screenStore.isDeckPreviewScreen && (
-        <ReviewStoreProvider>
-          <DeckScreen />
-        </ReviewStoreProvider>
+        <PreventTelegramSwipeDownClosingIos>
+          <ReviewStoreProvider>
+            <DeckScreen />
+          </ReviewStoreProvider>
+        </PreventTelegramSwipeDownClosingIos>
       )}
       {screenStore.screen.type === "deckForm" && (
-        <DeckFormStoreProvider>
-          <DeckFormScreen />
-        </DeckFormStoreProvider>
+        <PreventTelegramSwipeDownClosingIos>
+          <DeckFormStoreProvider>
+            <DeckFormScreen />
+          </DeckFormStoreProvider>
+        </PreventTelegramSwipeDownClosingIos>
+      )}
+      {screenStore.screen.type === "cardQuickAddForm" && (
+        <PreventTelegramSwipeDownClosingIos>
+          <QuickAddCardForm />
+        </PreventTelegramSwipeDownClosingIos>
       )}
-      {screenStore.screen.type === "cardQuickAddForm" && <QuickAddCardForm />}
       {screenStore.screen.type === "userSettings" && (
-        <PreventTelegramSwipeDownClosingIos withScroll={false}>
+        <PreventTelegramSwipeDownClosingIos>
           <UserSettingsStoreProvider>
             <UserSettingsMain />
           </UserSettingsStoreProvider>

diff --git a/src/screens/deck-review/deck-screen.tsx b/src/screens/deck-review/deck-screen.tsx
@@ -4,23 +4,14 @@ 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/prevent-telegram-swipe-down-closing.tsx";
 
 export const DeckScreen = observer(() => {
   const reviewStore = useReviewStore();
 
   if (reviewStore.isFinished) {
-    return (
-      <PreventTelegramSwipeDownClosingIos withScroll={false}>
-        <DeckFinished />
-      </PreventTelegramSwipeDownClosingIos>
-    );
+    return <DeckFinished />;
   } else if (reviewStore.currentCardId) {
-    return (
-      <PreventTelegramSwipeDownClosingIos withScroll={false}>
-        <Review />
-      </PreventTelegramSwipeDownClosingIos>
-    );
+    return <Review />;
   }
   return <DeckPreview />;
 });