From ba4cadec3f87d565fe045e3c977f604444a06571 Mon Sep 17 00:00:00 2001 From: Rider21 <58046032+Rider21@users.noreply.github.com> Date: Tue, 5 Mar 2024 16:50:38 +0300 Subject: [PATCH] 1 --- package.json | 2 +- src/screens/WebviewScreen/WebviewScreen.tsx | 19 +--- .../WebviewScreen/components/Appbar.tsx | 100 ++++++++++++++---- src/screens/WebviewScreen/components/Menu.tsx | 80 -------------- 4 files changed, 80 insertions(+), 121 deletions(-) delete mode 100644 src/screens/WebviewScreen/components/Menu.tsx diff --git a/package.json b/package.json index 2d11cb493c..618634acc2 100644 --- a/package.json +++ b/package.json @@ -6,7 +6,7 @@ "android": "react-native run-android --active-arch-only", "ios": "react-native run-ios", "start": "react-native start", - "lint": "eslint . --ext .js,.jsx,.ts,.tsx", + "lint": "eslint \"./src/**/*.{js,jsx,ts,tsx}\" --ext .js,.jsx,.ts,.tsx", "prettier": "prettier --write \"./src/**/*.{js,jsx,ts,tsx}\"", "buildRelease": "cd android && ./gradlew clean && ./gradlew assembleRelease", "open": "open ./android/app/build/outputs/apk/release/", diff --git a/src/screens/WebviewScreen/WebviewScreen.tsx b/src/screens/WebviewScreen/WebviewScreen.tsx index 10f894611e..ff89a045d4 100644 --- a/src/screens/WebviewScreen/WebviewScreen.tsx +++ b/src/screens/WebviewScreen/WebviewScreen.tsx @@ -9,7 +9,6 @@ import { getUserAgent } from '@hooks/persisted/useUserAgent'; import { resolveUrl } from '@services/plugin/fetch'; import { storage } from '@plugins/helpers/storage'; import Appbar from './components/Appbar'; -import Menu from './components/Menu'; type StorageData = { localStorage?: Record; @@ -29,7 +28,6 @@ const WebviewScreen = ({ route, navigation }: WebviewScreenProps) => { const [canGoBack, setCanGoBack] = useState(false); const [canGoForward, setCanGoForward] = useState(false); const [tempData, setTempData] = useState(); - const [menuVisible, setMenuVisible] = useState(false); const handleNavigation = (e: WebViewNavigation) => { if (!e.loading) { @@ -67,13 +65,6 @@ const WebviewScreen = ({ route, navigation }: WebviewScreenProps) => { return ( <> - { canGoBack={canGoBack} canGoForward={canGoForward} webView={webViewRef} - setMenuVisible={setMenuVisible} - goBack={() => { - saveData(); - navigation.goBack(); - }} + navigation={navigation} /> { injectedJavaScript={injectJavaScriptCode} setDisplayZoomControls={true} setSupportMultipleWindows={false} - onShouldStartLoadWithRequest={request => { - console.log(request); - return true; - }} onMessage={({ nativeEvent }) => setTempData(JSON.parse(nativeEvent.data)) } diff --git a/src/screens/WebviewScreen/components/Appbar.tsx b/src/screens/WebviewScreen/components/Appbar.tsx index 7c92b41070..aa2c26a3ef 100644 --- a/src/screens/WebviewScreen/components/Appbar.tsx +++ b/src/screens/WebviewScreen/components/Appbar.tsx @@ -1,11 +1,14 @@ -import React from 'react'; -import { View, Text } from 'react-native'; -import { useSafeAreaInsets } from 'react-native-safe-area-context'; -import MarqueeText from 'react-native-marquee'; +import React, { useState } from 'react'; +import { Share, View, Text, TouchableOpacity } from 'react-native'; import { IconButton } from 'react-native-paper'; -import WebView from 'react-native-webview'; +import { useSafeAreaInsets } from 'react-native-safe-area-context'; +import { WebView } from 'react-native-webview'; +import * as Linking from 'expo-linking'; +import { WebviewScreenProps } from '@navigators/types'; +import { getString } from '@strings/translations'; import { ThemeColors } from '@theme/types'; +import { showToast } from '@utils/showToast'; interface AppbarProps { title: string; @@ -14,10 +17,25 @@ interface AppbarProps { canGoBack: boolean; canGoForward: boolean; webView: RefObject; - goBack: () => void; - setMenuVisible: () => void; + navigation: WebviewScreenProps['navigation']; } +const CustomMenu = ({ options, onSelect }) => { + return ( + + {options.map((option, index) => ( + onSelect(index)} + > + {option.title} + + ))} + + ); +}; + const Appbar: React.FC = ({ title, theme, @@ -25,10 +43,51 @@ const Appbar: React.FC = ({ canGoBack, canGoForward, webView, - goBack, - setMenuVisible, + navigation, }) => { const { top } = useSafeAreaInsets(); + const [menuVisible, setMenuVisible] = useState(false); + + const menuOptions = [ + { + title: getString('webview.refresh'), + backgroundColor: theme.surface2, + color: theme.onSurface, + onPress: () => { + setMenuVisible(false); + webView.current?.reload(); + }, + }, + { + title: getString('webview.share'), + backgroundColor: theme.surface2, + color: theme.onSurface, + onPress: () => { + setMenuVisible(false); + Share.share({ message: currentUrl }); + }, + }, + { + title: getString('webview.openInBrowser'), + backgroundColor: theme.surface2, + color: theme.onSurface, + onPress: () => { + setMenuVisible(false); + Linking.openURL(currentUrl); + }, + }, + { + title: getString('webview.clearData'), + backgroundColor: theme.surface2, + color: theme.onSurface, + onPress: () => { + setMenuVisible(false); + webView.current?.clearCache?.(true); + webView.current?.reload(); + showToast(getString('webview.dataDeleted')); + }, + }, + ]; return ( = ({ navigation.goBack()} theme={{ colors: { ...theme } }} /> - + {title} - - {currentUrl} - = ({ onPress={() => setMenuVisible(true)} theme={{ colors: { ...theme } }} /> + {menuVisible && ( + menuOptions[index].onPress()} + /> + )} ); diff --git a/src/screens/WebviewScreen/components/Menu.tsx b/src/screens/WebviewScreen/components/Menu.tsx deleted file mode 100644 index d2855a2977..0000000000 --- a/src/screens/WebviewScreen/components/Menu.tsx +++ /dev/null @@ -1,80 +0,0 @@ -import React from 'react'; -import { Share, Dimensions } from 'react-native'; -import { useSafeAreaInsets } from 'react-native-safe-area-context'; -import { Menu } from 'react-native-paper'; -import WebView from 'react-native-webview'; -import * as Linking from 'expo-linking'; - -import { getString } from '@strings/translations'; -import { ThemeColors } from '@theme/types'; -import { showToast } from '@utils/showToast'; - -interface CustomMenuProps { - theme: ThemeColors; - currentUrl: string; - webView: RefObject; - visible: boolean; - setMenuVisible: () => void; -} - -const CustomMenu: React.FC = ({ - theme, - currentUrl, - webView, - visible, - setMenuVisible, -}) => { - const windowWidth = Dimensions.get('window').width; - const { top } = useSafeAreaInsets(); - - return ( - setMenuVisible(false)} - anchor={{ x: windowWidth, y: top }} - style={{ backgroundColor: theme.surface2 }} - contentStyle={{ backgroundColor: theme.surface2 }} - > - { - setMenuVisible(false); - webView.current?.reload(); - }} - /> - { - setMenuVisible(false); - Share.share({ message: currentUrl }); - }} - /> - { - setMenuVisible(false); - Linking.openURL(currentUrl); - }} - /> - { - setMenuVisible(false); - webView.current?.clearCache?.(true); - webView.current?.reload(); - showToast(getString('webview.dataDeleted')); - }} - /> - - ); -}; - -export default CustomMenu;