From 00ecb149df9e2a2f497bfc7e0111bce45bfcf08b Mon Sep 17 00:00:00 2001 From: Ammar Ahmed Date: Wed, 13 Mar 2024 08:59:57 +0500 Subject: [PATCH] mobile: minor cleanup --- apps/mobile/app/components/tabs/index.tsx | 16 +++---- apps/mobile/app/navigation/tabs-holder.js | 47 +++++++++---------- apps/mobile/app/screens/editor/index.tsx | 2 +- .../editor/{loading.js => loading.tsx} | 26 ++++++---- .../mobile/app/screens/editor/tiptap/types.ts | 9 ++-- .../editor/{wrapper.js => wrapper.tsx} | 15 +++--- 6 files changed, 63 insertions(+), 52 deletions(-) rename apps/mobile/app/screens/editor/{loading.js => loading.tsx} (96%) rename apps/mobile/app/screens/editor/{wrapper.js => wrapper.tsx} (88%) diff --git a/apps/mobile/app/components/tabs/index.tsx b/apps/mobile/app/components/tabs/index.tsx index b3a58e6fe..e565d7e2a 100644 --- a/apps/mobile/app/components/tabs/index.tsx +++ b/apps/mobile/app/components/tabs/index.tsx @@ -45,7 +45,7 @@ import { useSideBarDraggingStore } from "../side-menu/dragging-store"; interface TabProps extends ViewProps { dimensions: { width: number; height: number }; - widths: { a: number; b: number; c: number }; + widths: { sidebar: number; list: number; editor: number }; onChangeTab: (data: { i: number; from: number }) => void; onScroll: (offset: number) => void; enabled: boolean; @@ -86,8 +86,8 @@ export const FluidTabs = forwardRef(function FluidTabs( const translateX = useSharedValue( widths ? appState && !appState?.movedAway - ? widths.a + widths.b - : widths.a + ? widths.sidebar + widths.list + : widths.sidebar : 0 ); const startX = useSharedValue(0); @@ -103,12 +103,12 @@ export const FluidTabs = forwardRef(function FluidTabs( const [disabled, setDisabled] = useState(false); const node = useRef(null); const containerWidth = widths - ? widths.a + widths.b + widths.c + ? widths.sidebar + widths.list + widths.editor : dimensions.width; const drawerPosition = 0; - const homePosition = widths.a; - const editorPosition = widths.a + widths.b; + const homePosition = widths.sidebar; + const editorPosition = widths.sidebar + widths.list; const isSmallTab = deviceMode === "smallTablet"; const isLoaded = useRef(false); const prevWidths = useRef(widths); @@ -119,9 +119,9 @@ export const FluidTabs = forwardRef(function FluidTabs( if (deviceMode === "tablet" || fullscreen) { translateX.value = 0; } else { - if (prevWidths.current?.a !== widths.a) { + if (prevWidths.current?.sidebar !== widths.sidebar) { translateX.value = - !appState || appState?.movedAway ? widths.a : editorPosition; + !appState || appState?.movedAway ? widths.sidebar : editorPosition; } } isLoaded.current = true; diff --git a/apps/mobile/app/navigation/tabs-holder.js b/apps/mobile/app/navigation/tabs-holder.js index dff5cbc30..87c28afcc 100644 --- a/apps/mobile/app/navigation/tabs-holder.js +++ b/apps/mobile/app/navigation/tabs-holder.js @@ -23,7 +23,7 @@ import { deactivateKeepAwake } from "@sayem314/react-native-keep-awake"; import React, { useCallback, useEffect, useRef, useState } from "react"; -import { Dimensions, Keyboard, Platform, StatusBar, View } from "react-native"; +import { Dimensions, Platform, StatusBar, View } from "react-native"; import changeNavigationBarColor from "react-native-navigation-bar-color"; import { addOrientationListener, @@ -64,12 +64,11 @@ import { useSettingStore } from "../stores/use-setting-store"; import { eClearEditor, eCloseFullscreenEditor, - eOnChangeFluidTab, eOnLoadNote, eOpenFullscreenEditor, eUnlockNote } from "../utils/events"; -import { editorRef, inputRef, tabBarRef } from "../utils/global-refs"; +import { editorRef, tabBarRef } from "../utils/global-refs"; import { sleep } from "../utils/time"; import { NavigationStack } from "./navigation-stack"; @@ -300,7 +299,7 @@ const _TabsHolder = () => { const onScroll = (scrollOffset) => { hideAllTooltips(); - if (scrollOffset > offsets[deviceMode].a - 10) { + if (scrollOffset > offsets[deviceMode].sidebar - 10) { animatedOpacity.value = 0; toggleView(false); } else { @@ -337,43 +336,43 @@ const _TabsHolder = () => { const offsets = { mobile: { - a: dimensions.width * 0.75, - b: dimensions.width + dimensions.width * 0.75, - c: dimensions.width * 2 + dimensions.width * 0.75 + sidebar: dimensions.width * 0.75, + list: dimensions.width + dimensions.width * 0.75, + editor: dimensions.width * 2 + dimensions.width * 0.75 }, smallTablet: { - a: fullscreen ? 0 : valueLimiter(dimensions.width * 0.3, 300, 350), - b: fullscreen + sidebar: fullscreen ? 0 : valueLimiter(dimensions.width * 0.3, 300, 350), + list: fullscreen ? 0 : dimensions.width + valueLimiter(dimensions.width * 0.3, 300, 350), - c: fullscreen + editor: fullscreen ? 0 : dimensions.width + valueLimiter(dimensions.width * 0.3, 300, 350) }, tablet: { - a: 0, - b: 0, - c: 0 + sidebar: 0, + list: 0, + editor: 0 } }; const widths = { mobile: { - a: dimensions.width * 0.75, - b: dimensions.width, - c: dimensions.width + sidebar: dimensions.width * 0.75, + list: dimensions.width, + editor: dimensions.width }, smallTablet: { - a: valueLimiter(dimensions.width * 0.3, 300, 350), - b: valueLimiter(dimensions.width * 0.4, 300, 450), - c: dimensions.width - valueLimiter(dimensions.width * 0.4, 300, 450) + sidebar: valueLimiter(dimensions.width * 0.3, 300, 350), + list: valueLimiter(dimensions.width * 0.4, 300, 450), + editor: dimensions.width - valueLimiter(dimensions.width * 0.4, 300, 450) }, tablet: { - a: + sidebar: dimensions.width > 1100 ? dimensions.width * 0.15 : dimensions.width * 0.2, - b: dimensions.width * 0.3, - c: + list: dimensions.width * 0.3, + editor: dimensions.width > 1100 ? dimensions.width * 0.55 : dimensions.width * 0.5 @@ -449,7 +448,7 @@ const _TabsHolder = () => { key="1" style={{ height: "100%", - width: fullscreen ? 0 : widths[deviceMode]?.a + width: fullscreen ? 0 : widths[deviceMode]?.sidebar }} > @@ -461,7 +460,7 @@ const _TabsHolder = () => { key="2" style={{ height: "100%", - width: fullscreen ? 0 : widths[deviceMode]?.b + width: fullscreen ? 0 : widths[deviceMode]?.list }} > diff --git a/apps/mobile/app/screens/editor/index.tsx b/apps/mobile/app/screens/editor/index.tsx index a29c20a78..5e77638cc 100755 --- a/apps/mobile/app/screens/editor/index.tsx +++ b/apps/mobile/app/screens/editor/index.tsx @@ -28,7 +28,7 @@ import React, { useLayoutEffect, useRef } from "react"; -import { Platform, TextInput, ViewStyle } from "react-native"; +import { Platform, ViewStyle } from "react-native"; import WebView from "react-native-webview"; import { ShouldStartLoadRequest } from "react-native-webview/lib/WebViewTypes"; import { notesnook } from "../../../e2e/test.ids"; diff --git a/apps/mobile/app/screens/editor/loading.js b/apps/mobile/app/screens/editor/loading.tsx similarity index 96% rename from apps/mobile/app/screens/editor/loading.js rename to apps/mobile/app/screens/editor/loading.tsx index bd89c920d..9f4a2dba9 100644 --- a/apps/mobile/app/screens/editor/loading.js +++ b/apps/mobile/app/screens/editor/loading.tsx @@ -17,6 +17,7 @@ You should have received a copy of the GNU General Public License along with this program. If not, see . */ +import { useThemeColors } from "@notesnook/theme"; import React, { useCallback, useEffect, useRef, useState } from "react"; import { View } from "react-native"; import Animated, { @@ -34,11 +35,18 @@ import { eUnSubscribeEvent } from "../../services/event-manager"; import { useSettingStore } from "../../stores/use-setting-store"; -import { useThemeColors } from "@notesnook/theme"; import { eClearEditor } from "../../utils/events"; import { SIZE } from "../../utils/size"; +import { useEditor } from "./tiptap/use-editor"; import { editorState } from "./tiptap/utils"; -const EditorOverlay = ({ editorId = "", editor }) => { + +const EditorOverlay = ({ + editorId = "", + editor +}: { + editorId: string; + editor: ReturnType; +}) => { const { colors } = useThemeColors(); const [error, setError] = useState(false); const opacity = useSharedValue(1); @@ -47,11 +55,11 @@ const EditorOverlay = ({ editorId = "", editor }) => { const isTablet = deviceMode !== "mobile"; const insets = useGlobalSafeAreaInsets(); const isDefaultEditor = editorId === ""; - const timers = useRef({ - loading: 0, - error: 0, - closing: 0 - }); + const timers = useRef<{ + loading?: NodeJS.Timeout; + error?: NodeJS.Timeout; + closing?: NodeJS.Timeout; + }>({}); const loadingState = useRef({ startTime: 0 }); @@ -63,10 +71,10 @@ const EditorOverlay = ({ editorId = "", editor }) => { }; const load = useCallback( - async (_loading) => { + async (isLoading: boolean) => { editorState().overlay = true; clearTimers(); - if (_loading) { + if (isLoading) { loadingState.current.startTime = Date.now(); opacity.value = 1; translateValue.value = 0; diff --git a/apps/mobile/app/screens/editor/tiptap/types.ts b/apps/mobile/app/screens/editor/tiptap/types.ts index 1fbbe60ba..32de40cfc 100644 --- a/apps/mobile/app/screens/editor/tiptap/types.ts +++ b/apps/mobile/app/screens/editor/tiptap/types.ts @@ -36,6 +36,7 @@ export type EditorState = { saveCount: 0; isAwaitingResult: boolean; scrollPosition: number; + overlay?: boolean; }; export type Settings = { @@ -58,10 +59,10 @@ export type Settings = { }; export type EditorProps = { - readonly: boolean; - noToolbar: boolean; - noHeader: boolean; - withController: boolean; + readonly?: boolean; + noToolbar?: boolean; + noHeader?: boolean; + withController?: boolean; editorId?: string; onLoad?: () => void; onChange?: (html: string) => void; diff --git a/apps/mobile/app/screens/editor/wrapper.js b/apps/mobile/app/screens/editor/wrapper.tsx similarity index 88% rename from apps/mobile/app/screens/editor/wrapper.js rename to apps/mobile/app/screens/editor/wrapper.tsx index 38f89e825..733f67811 100644 --- a/apps/mobile/app/screens/editor/wrapper.js +++ b/apps/mobile/app/screens/editor/wrapper.tsx @@ -21,6 +21,7 @@ import { useThemeColors } from "@notesnook/theme"; import React, { useEffect, useRef } from "react"; import { AppState, + AppStateStatus, KeyboardAvoidingView, Platform, TextInput, @@ -35,8 +36,9 @@ import { DDS } from "../../services/device-detection"; import { useSettingStore } from "../../stores/use-setting-store"; import { editorRef } from "../../utils/global-refs"; import { editorController, textInput } from "./tiptap/utils"; +import deviceInfo from "react-native-device-info"; -export const EditorWrapper = ({ width }) => { +export const EditorWrapper = ({ widths }: { widths: any }) => { const { colors } = useThemeColors(); const { colors: toolBarColors } = useThemeColors("editorToolbar"); const deviceMode = useSettingStore((state) => state.deviceMode); @@ -47,9 +49,9 @@ export const EditorWrapper = ({ width }) => { (state) => state.settings.introCompleted ); const keyboard = useKeyboard(); - const prevState = useRef(); + const prevState = useRef(); - const onAppStateChanged = async (state) => { + const onAppStateChanged = async (state: AppStateStatus) => { if (!prevState.current) { prevState.current = state; return; @@ -65,7 +67,7 @@ export const EditorWrapper = ({ width }) => { useEffect(() => { if (loading) return; - let sub = AppState.addEventListener("change", onAppStateChanged); + const sub = AppState.addEventListener("change", onAppStateChanged); return () => { sub?.remove(); }; @@ -75,7 +77,8 @@ export const EditorWrapper = ({ width }) => { const bottomInsets = Platform.OS === "android" ? 12 : insets.bottom + 16 || 14; if (!keyboard.keyboardShown) return bottomInsets / 1.5; - if (Platform.isPad && !floating) return bottomInsets; + if (deviceInfo.isTablet() && Platform.OS === "ios" && !floating) + return bottomInsets; if (Platform.OS === "ios") return bottomInsets / 1.5; return 0; }; @@ -88,7 +91,7 @@ export const EditorWrapper = ({ width }) => { testID="editor-wrapper" ref={editorRef} style={{ - width: width[!introCompleted ? "mobile" : deviceMode]?.c, + width: widths[!introCompleted ? "mobile" : (deviceMode as any)]?.editor, height: "100%", minHeight: "100%", backgroundColor: toolBarColors.primary.background,