Skip to content

Commit

Permalink
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
test
Browse files Browse the repository at this point in the history
Rider21 committed Mar 6, 2024
1 parent 67bdddc commit 287ce94
Showing 6 changed files with 120 additions and 104 deletions.
2 changes: 1 addition & 1 deletion android/gradle.properties
Original file line number Diff line number Diff line change
@@ -36,7 +36,7 @@ reactNativeArchitectures=armeabi-v7a,arm64-v8a,x86,x86_64
# your application. You should enable this flag either if you want
# to write custom TurboModules/Fabric components OR use libraries that
# are providing them.
newArchEnabled=true
newArchEnabled=false

# Use this property to enable or disable the Hermes JS engine.
# If set to false, you will be using JSC instead.
35 changes: 6 additions & 29 deletions package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion package.json
Original file line number Diff line number Diff line change
@@ -48,7 +48,6 @@
"react-native-fs": "^2.20.0",
"react-native-gesture-handler": "~2.12.0",
"react-native-lottie-splash-screen": "^1.0.1",
"react-native-marquee": "^0.5.0",
"react-native-mmkv": "^2.12.1",
"react-native-pager-view": "6.2.0",
"react-native-paper": "^5.12.3",
@@ -57,6 +56,7 @@
"react-native-screens": "~3.22.0",
"react-native-shimmer-placeholder": "^2.0.9",
"react-native-tab-view": "^3.5.2",
"react-native-text-ticker": "^1.14.0",
"react-native-vector-icons": "^9.0.0",
"react-native-webview": "^13.2.2",
"sanitize-html": "^2.12.1",
5 changes: 4 additions & 1 deletion src/screens/WebviewScreen/WebviewScreen.tsx
Original file line number Diff line number Diff line change
@@ -72,7 +72,10 @@ const WebviewScreen = ({ route, navigation }: WebviewScreenProps) => {
canGoBack={canGoBack}
canGoForward={canGoForward}
webView={webViewRef}
navigation={navigation}
goBack={() => {
saveData();
navigation.goBack();
}}
/>
<ProgressBar
color={theme.primary}
102 changes: 30 additions & 72 deletions src/screens/WebviewScreen/components/Appbar.tsx
Original file line number Diff line number Diff line change
@@ -1,14 +1,11 @@
import React, { useState } from 'react';
import { Modal, Share, Pressable, View, Text, TouchableOpacity } from 'react-native';
import { Modal, Pressable, View, Text } from 'react-native';
import { IconButton } from 'react-native-paper';
import TextTicker from 'react-native-text-ticker';
import { useSafeAreaInsets } from 'react-native-safe-area-context';
import { WebView } from 'react-native-webview';
import * as Linking from 'expo-linking';
import Menu from './Menu';

import { WebviewScreenProps } from '@navigators/types';
import { getString } from '@strings/translations';
import { ThemeColors } from '@theme/types';
import { showToast } from '@utils/showToast';

interface AppbarProps {
title: string;
@@ -17,74 +14,21 @@ interface AppbarProps {
canGoBack: boolean;
canGoForward: boolean;
webView: RefObject<WebView>;
navigation: WebviewScreenProps['navigation'];
goBack: () => void;
}

const CustomMenu = ({ options, onSelect }) => {
return (
<View style={{ position: 'absolute', right: 16, top: 16 }}>
{options.map((option, index) => (
<TouchableOpacity
key={index}
style={{ padding: 8, backgroundColor: option.backgroundColor }}
onPress={() => onSelect(index)}
>
<Text style={{ color: option.color }}>{option.title}</Text>
</TouchableOpacity>
))}
</View>
);
};

const Appbar: React.FC<AppbarProps> = ({
title,
theme,
currentUrl,
canGoBack,
canGoForward,
webView,
navigation,
goBack,
}) => {
const { top } = useSafeAreaInsets();
const [menuVisible, setMenuVisible] = useState(false);

const menuOptions = [
{
title: getString('webview.refresh'),
backgroundColor: theme.surface2,
color: theme.onSurface,
onPress: () => {
webView.current?.reload();
},
},
{
title: getString('webview.share'),
backgroundColor: theme.surface2,
color: theme.onSurface,
onPress: () => {
Share.share({ message: currentUrl });
},
},
{
title: getString('webview.openInBrowser'),
backgroundColor: theme.surface2,
color: theme.onSurface,
onPress: () => {
Linking.openURL(currentUrl);
},
},
{
title: getString('webview.clearData'),
backgroundColor: theme.surface2,
color: theme.onSurface,
onPress: () => {
webView.current?.clearCache?.(true);
webView.current?.reload();
showToast(getString('webview.dataDeleted'));
},
},
];

return (
<View
style={{
@@ -96,23 +40,37 @@ const Appbar: React.FC<AppbarProps> = ({
<IconButton
icon="close"
iconColor={theme.onSurface}
onPress={() => navigation.goBack()}
onPress={goBack}
theme={{ colors: { ...theme } }}
/>

<View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
<View style={{ flex: 1, justifyContent: 'center' }}>
<Text
style={{
color: theme.onSurface,
textAlign: 'center',
}}
numberOfLines={1}
ellipsizeMode="tail"
>
{title}
</Text>
<TextTicker
style={{ color: theme.outline }}
loop
bounce
marqueeDelay={2000}
isInteraction={false}
>
{currentUrl}
</TextTicker>
</View>
<View style={{ flexDirection: 'row', alignItems: 'flex-end' }}>

<View
style={{
flexDirection: 'row',
justifyContent: 'flex-end',
alignItems: 'flex-end',
}}
>
<IconButton
icon="arrow-left"
iconColor={theme.onSurface}
@@ -138,9 +96,7 @@ const Appbar: React.FC<AppbarProps> = ({
animationType="fade"
transparent={true}
visible={menuVisible}
onRequestClose={() => {
setModalVisible(false);
}}
onRequestClose={() => setMenuVisible(false)}
>
<Pressable
onPress={() => setMenuVisible(false)}
@@ -154,9 +110,11 @@ const Appbar: React.FC<AppbarProps> = ({
backgroundColor: 'rgba(0,0,0,0.62)',
}}
>
<CustomMenu
options={menuOptions}
onSelect={index => menuOptions[index].onPress()}
<Menu
theme={theme}
currentUrl={currentUrl}
webView={webView}
setMenuVisible={setMenuVisible}
/>
</Pressable>
</Modal>
78 changes: 78 additions & 0 deletions src/screens/WebviewScreen/components/Menu.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,78 @@
import React from 'react';
import { Pressable, Share, View, Text } from 'react-native';
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 MenuProps {
theme: ThemeColors;
currentUrl: string;
webView: RefObject<WebView>;
setMenuVisible: () => void;
}

const Menu: React.FC<MenuProps> = ({
theme,
currentUrl,
webView,
setMenuVisible,
}) => {
return (
<View style={{ position: 'absolute' }}>
<Pressable
style={{ backgroundColor: theme.surface2 }}
onPress={() => {
setMenuVisible(false);
webView.current?.reload();
}}
>
<Text style={{ color: theme.onSurface }}>
{getString('webview.refresh')}
</Text>
</Pressable>

<Pressable
style={{ backgroundColor: theme.surface2 }}
onPress={() => {
setMenuVisible(false);
Share.share({ message: currentUrl });
}}
>
<Text style={{ color: theme.onSurface }}>
{getString('webview.share')}
</Text>
</Pressable>

<Pressable
style={{ backgroundColor: theme.surface2 }}
onPress={() => {
setMenuVisible(false);
Linking.openURL(currentUrl);
}}
>
<Text style={{ color: theme.onSurface }}>
{getString('webview.openInBrowser')}
</Text>
</Pressable>

<Pressable
style={{ backgroundColor: theme.surface2 }}
onPress={() => {
setMenuVisible(false);
webView.current?.clearCache?.(true);
webView.current?.reload();
showToast(getString('webview.dataDeleted'));
}}
>
<Text style={{ color: theme.onSurface }}>
{getString('webview.clearData')}
</Text>
</Pressable>
</View>
);
};

export default Menu;

0 comments on commit 287ce94

Please sign in to comment.