Browse Source
Reviewed-on: #19 Co-authored-by: YaroslavBerkuta <yaroslavberkuta@gmail.com> Co-committed-by: YaroslavBerkuta <yaroslavberkuta@gmail.com>pull/21/head
17 changed files with 212 additions and 17 deletions
@ -1,3 +1,3 @@
@@ -1,3 +1,3 @@
|
||||
export * from './screen-layout-content.component' |
||||
export * from './screen-layout.component' |
||||
export * from './auth-layout.component' |
||||
export * from './auth-layout.component' |
||||
|
||||
@ -0,0 +1,83 @@
@@ -0,0 +1,83 @@
|
||||
import { useEventsListener, useTheme } from '@/shared/hooks' |
||||
import React, { useMemo, useState } from 'react' |
||||
import { TouchableOpacity, StyleSheet, Platform } from 'react-native' |
||||
import { IconComponent } from '../elements' |
||||
import Modal from 'react-native-modal' |
||||
import { fsService } from '@/services/system' |
||||
import PDFView from 'react-native-view-pdf' |
||||
import { FileType } from '@/shared/enums' |
||||
|
||||
export const PreviewFileModal = () => { |
||||
const [params, setParams] = useState(null) |
||||
const { styles } = useTheme(createStyles) |
||||
|
||||
useEventsListener('previewFile', data => { |
||||
if (Platform.OS === 'ios') { |
||||
fsService.previewFile(data.fileUrl) |
||||
} else { |
||||
setParams(data) |
||||
} |
||||
}) |
||||
const close = () => { |
||||
setParams(null) |
||||
} |
||||
|
||||
const renderItem = useMemo(() => { |
||||
if (params?.mimeType === FileType.PDF) { |
||||
return ( |
||||
<PDFView |
||||
fadeInDuration={250.0} |
||||
style={{ flex: 1 }} |
||||
resource={params?.fileUrl} |
||||
resourceType={'url'} |
||||
onLoad={() => console.log(`PDF rendered from url`)} |
||||
onError={error => console.log('Cannot render PDF', error)} |
||||
/> |
||||
) |
||||
} |
||||
return null |
||||
}, [params]) |
||||
|
||||
return ( |
||||
<Modal |
||||
isVisible={Boolean(params)} |
||||
onBackdropPress={close} |
||||
coverScreen={true} |
||||
onModalHide={close} |
||||
backdropOpacity={1} |
||||
animationOutTiming={1} |
||||
style={styles.modal} |
||||
backdropTransitionOutTiming={1} |
||||
swipeDirection="down" |
||||
onSwipeComplete={close}> |
||||
<TouchableOpacity onPress={close} style={styles.closeBtn}> |
||||
<IconComponent |
||||
name="xcircle-1" |
||||
size={32} |
||||
color="#000" |
||||
onPress={close} |
||||
/> |
||||
</TouchableOpacity> |
||||
{renderItem} |
||||
</Modal> |
||||
) |
||||
} |
||||
|
||||
const createStyles = () => |
||||
StyleSheet.create({ |
||||
modal: { |
||||
margin: 0, |
||||
width: '100%', |
||||
height: '100%', |
||||
}, |
||||
image: { |
||||
width: '100%', |
||||
height: '90%', |
||||
}, |
||||
closeBtn: { |
||||
position: 'absolute', |
||||
top: 50, |
||||
right: 5, |
||||
zIndex: 99999, |
||||
}, |
||||
}) |
||||
@ -1,4 +1,5 @@
@@ -1,4 +1,5 @@
|
||||
export * from './masked-input.component' |
||||
export * from './image-crop-picker.component' |
||||
export * from './calendar.component' |
||||
export * from './accordion.component' |
||||
export * from './accordion.component' |
||||
export * from './webview.component' |
||||
|
||||
@ -0,0 +1,17 @@
@@ -0,0 +1,17 @@
|
||||
import React, { FC } from 'react' |
||||
import { WebView } from 'react-native-webview' |
||||
|
||||
interface IProps { |
||||
url: string |
||||
} |
||||
|
||||
export const WebviewPlugin: FC<IProps> = ({ url }) => { |
||||
return ( |
||||
<WebView |
||||
source={{ uri: url }} |
||||
style={{ flex: 1 }} |
||||
originWhitelist={['file://*', '*']} |
||||
mixedContentMode="always" |
||||
/> |
||||
) |
||||
} |
||||
Loading…
Reference in new issue