51 lines
1.5 KiB
TypeScript
51 lines
1.5 KiB
TypeScript
import React, { useState } from 'react';
|
|
import { View } from 'react-native';
|
|
import { WebView } from 'react-native-webview';
|
|
import { trpc } from '@/src/trpc-client';
|
|
import { useGetEssentialConsts } from '@/src/hooks/prominent-api-hooks';
|
|
import { MyTouchableOpacity } from 'common-ui';
|
|
import MaterialIcons from '@expo/vector-icons/MaterialIcons';
|
|
|
|
interface WebViewWrapperProps {
|
|
children: React.ReactNode;
|
|
}
|
|
|
|
export default function WebViewWrapper({ children }: WebViewWrapperProps) {
|
|
const { data: constsData } = useGetEssentialConsts();
|
|
const [isClosed, setIsClosed] = useState(false);
|
|
|
|
const webviewHtml = constsData?.webviewHtml;
|
|
const isWebviewClosable = constsData?.isWebviewClosable;
|
|
|
|
|
|
if (webviewHtml && !isClosed) {
|
|
return (
|
|
<View style={{ flex: 1 }}>
|
|
<WebView
|
|
source={{ html: webviewHtml }}
|
|
style={{ flex: 1 }}
|
|
javaScriptEnabled={true}
|
|
domStorageEnabled={true}
|
|
startInLoadingState={true}
|
|
scalesPageToFit={true}
|
|
/>
|
|
{isWebviewClosable && (
|
|
<View style={{ position: 'absolute', top: 40, right: 20 }}>
|
|
<MyTouchableOpacity
|
|
onPress={() => setIsClosed(true)}
|
|
style={{
|
|
backgroundColor: 'rgba(0,0,0,0.5)',
|
|
borderRadius: 20,
|
|
padding: 8,
|
|
}}
|
|
>
|
|
<MaterialIcons name="close" size={24} color="white" />
|
|
</MyTouchableOpacity>
|
|
</View>
|
|
)}
|
|
</View>
|
|
);
|
|
}
|
|
|
|
return <>{children}</>;
|
|
}
|