fix/preview-docs-file (#20)

Reviewed-on: #20
Co-authored-by: YaroslavBerkuta <yaroslavberkuta@gmail.com>
Co-committed-by: YaroslavBerkuta <yaroslavberkuta@gmail.com>

src/shared/components/modals/preview-file-modal.smart-component.tsx

@@ -6,6 +6,7 @@ import Modal from 'react-native-modal'
 import { fsService } from '@/services/system'
 import PDFView from 'react-native-view-pdf'
 import { FileType } from '@/shared/enums'
+import { WebviewPlugin } from '../plugins'
 
 export const PreviewFileModal = () => {
 	const [params, setParams] = useState(null)
@@ -30,12 +31,15 @@ export const PreviewFileModal = () => {
 					style={{ flex: 1 }}
 					resource={params?.fileUrl}
 					resourceType={'url'}
-					onLoad={() => console.log(`PDF rendered from url`)}
-					onError={error => console.log('Cannot render PDF', error)}
+				/>
+			)
+		} else {
+			return (
+				<WebviewPlugin
+					url={`https://docs.google.com/gview?embedded=true&url=${params?.fileUrl}`}
 				/>
 			)
 		}
-		return null
 	}, [params])
 
 	return (

src/shared/components/plugins/webview.component.tsx

@@ -1,4 +1,6 @@
-import React, { FC } from 'react'
+import { useTheme } from '@/shared/hooks'
+import React, { FC, useState } from 'react'
+import { ActivityIndicator, View, StyleSheet } from 'react-native'
 import { WebView } from 'react-native-webview'
 
 interface IProps {
@@ -6,12 +8,43 @@ interface IProps {
 }
 
 export const WebviewPlugin: FC<IProps> = ({ url }) => {
+	const [loading, setLoading] = useState(true)
+	const { styles, theme } = useTheme(createStyles)
 	return (
-		<WebView
-			source={{ uri: url }}
-			style={{ flex: 1 }}
-			originWhitelist={['file://*', '*']}
-			mixedContentMode="always"
-		/>
+		<View style={styles.container}>
+			{loading && (
+				<ActivityIndicator
+					style={styles.activityIndicator}
+					size="large"
+					color={theme.$loaderPrimary}
+				/>
+			)}
+			<WebView
+				source={{ uri: url }}
+				style={styles.webview}
+				mixedContentMode="always"
+				onLoadEnd={() => setLoading(false)}
+			/>
+		</View>
 	)
 }
+
+const createStyles = () =>
+	StyleSheet.create({
+		container: {
+			flex: 1,
+		},
+		activityIndicator: {
+			position: 'absolute',
+			top: 0,
+			left: 0,
+			right: 0,
+			bottom: 0,
+			justifyContent: 'center',
+			alignItems: 'center',
+			zIndex: 999,
+		},
+		webview: {
+			flex: 1,
+		},
+	})