APP. Відкриття об"ємних файлів в додатку, стікери Reviewed-on: #38 Co-authored-by: Yevhen Romanenko <yevhen.romanenko.jetup@gmail.com> Co-committed-by: Yevhen Romanenko <yevhen.romanenko.jetup@gmail.com>pull/41/head
After Width: | Height: | Size: 51 KiB |
After Width: | Height: | Size: 64 KiB |
After Width: | Height: | Size: 53 KiB |
After Width: | Height: | Size: 46 KiB |
After Width: | Height: | Size: 77 KiB |
After Width: | Height: | Size: 52 KiB |
After Width: | Height: | Size: 45 KiB |
After Width: | Height: | Size: 59 KiB |
@ -1,2 +1,4 @@
@@ -1,2 +1,4 @@
|
||||
export * from './bottom-modal.smart-component' |
||||
export * from './confirm-code-modal.component' |
||||
export * from './loader-modal.smart-component' |
||||
export * from './preview-file-modal.smart-component' |
||||
|
@ -0,0 +1,92 @@
@@ -0,0 +1,92 @@
|
||||
import React, { useState } from 'react' |
||||
import { ActivityIndicator, StyleSheet, View } from 'react-native' |
||||
|
||||
import Modal from 'react-native-modal' |
||||
import { useEventsListener, useTheme } from '@/shared/hooks' |
||||
import { PartialTheme } from '@/shared/themes/interfaces' |
||||
import { $size } from '@/shared/helpers' |
||||
import { Txt } from '../elements' |
||||
|
||||
export const LoaderModal = () => { |
||||
const [isOpen, setIsOpen] = useState(false) |
||||
const [message, setMessage] = useState<string>('') |
||||
|
||||
const { theme, styles } = useTheme(createStyles) |
||||
|
||||
useEventsListener( |
||||
'openLoaderModal', |
||||
data => { |
||||
setIsOpen(true) |
||||
setMessage(data.message) |
||||
}, |
||||
[setIsOpen], |
||||
) |
||||
|
||||
useEventsListener( |
||||
'closeLoaderModal', |
||||
() => { |
||||
setIsOpen(false) |
||||
}, |
||||
[setIsOpen], |
||||
) |
||||
|
||||
const renderContent = () => { |
||||
return ( |
||||
<View> |
||||
<Txt style={styles.text}>{message}</Txt> |
||||
|
||||
<View style={styles.loader}> |
||||
<ActivityIndicator |
||||
size={'large'} |
||||
color={theme.$loaderPrimary} |
||||
/> |
||||
</View> |
||||
</View> |
||||
) |
||||
} |
||||
|
||||
const close = () => { |
||||
setIsOpen(false) |
||||
} |
||||
|
||||
return ( |
||||
<Modal |
||||
isVisible={isOpen} |
||||
onBackdropPress={close} |
||||
animationIn="fadeIn" |
||||
animationOut="fadeOut" |
||||
coverScreen={true} |
||||
backdropOpacity={0.45} |
||||
animationOutTiming={1} |
||||
backdropTransitionOutTiming={1}> |
||||
<> |
||||
<View style={styles.container}>{renderContent()}</View> |
||||
</> |
||||
</Modal> |
||||
) |
||||
} |
||||
|
||||
const createStyles = (theme: PartialTheme) => |
||||
StyleSheet.create({ |
||||
container: { |
||||
height: $size(172, 170), |
||||
paddingVertical: $size(30), |
||||
paddingHorizontal: $size(20), |
||||
borderRadius: $size(20), |
||||
backgroundColor: theme.$layoutBg, |
||||
justifyContent: 'center', |
||||
alignContent: 'center', |
||||
}, |
||||
|
||||
text: { |
||||
textAlign: 'center', |
||||
fontSize: $size(20), |
||||
lineHeight: $size(26), |
||||
fontWeight: '500', |
||||
color: theme.$textPrimary, |
||||
}, |
||||
|
||||
loader: { |
||||
paddingTop: $size(20), |
||||
}, |
||||
}) |