Browse Source

FEATURE | display loader while file in message opening & update sticker-pack (#38)

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
Yevhen Romanenko 7 months ago committed by Vitalik Yatsenko
parent
commit
5788e7a379
  1. BIN
      src/assets/stickers/s-briefcase.png
  2. BIN
      src/assets/stickers/s-calculator.png
  3. BIN
      src/assets/stickers/s-light-bulb.png
  4. BIN
      src/assets/stickers/s-pie-chart.png
  5. BIN
      src/assets/stickers/s-pos.png
  6. BIN
      src/assets/stickers/s-shopping-cart.png
  7. BIN
      src/assets/stickers/s-statistics.png
  8. BIN
      src/assets/stickers/s-target.png
  9. 9
      src/modules/media/config/sticker-list.config.ts
  10. 3
      src/modules/root/index.tsx
  11. 11
      src/services/system/fs.service.ts
  12. 15
      src/shared/components/action-sheet/action-sheet.component.tsx
  13. 3
      src/shared/components/modals/confirm-code-modal.component.tsx
  14. 2
      src/shared/components/modals/index.ts
  15. 92
      src/shared/components/modals/loader-modal.smart-component.tsx
  16. 8
      src/shared/components/modals/preview-file-modal.smart-component.tsx
  17. 14
      src/shared/components/plugins/webview.component.tsx
  18. 4
      src/shared/events/index.ts

BIN
src/assets/stickers/s-briefcase.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 51 KiB

BIN
src/assets/stickers/s-calculator.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 64 KiB

BIN
src/assets/stickers/s-light-bulb.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 53 KiB

BIN
src/assets/stickers/s-pie-chart.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 46 KiB

BIN
src/assets/stickers/s-pos.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 77 KiB

BIN
src/assets/stickers/s-shopping-cart.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 52 KiB

BIN
src/assets/stickers/s-statistics.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 45 KiB

BIN
src/assets/stickers/s-target.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 59 KiB

9
src/modules/media/config/sticker-list.config.ts

@ -1,4 +1,13 @@ @@ -1,4 +1,13 @@
export const stickersList = {
'new-briefcase': require('@/assets/stickers/s-briefcase.png'),
'new-calculator': require('@/assets/stickers/s-calculator.png'),
'new-light-bulb': require('@/assets/stickers/s-light-bulb.png'),
'new-pie-chart': require('@/assets/stickers/s-pie-chart.png'),
'new-pos': require('@/assets/stickers/s-pos.png'),
'new-shopping-cart': require('@/assets/stickers/s-shopping-cart.png'),
'new-statistics': require('@/assets/stickers/s-statistics.png'),
'new-target': require('@/assets/stickers/s-target.png'),
'1s': require('@/assets/stickers/s1.png'),
'2s': require('@/assets/stickers/s2.png'),
'3s': require('@/assets/stickers/s3.png'),

3
src/modules/root/index.tsx

@ -38,7 +38,7 @@ import { SafeAreaView } from 'react-native-safe-area-context' @@ -38,7 +38,7 @@ import { SafeAreaView } from 'react-native-safe-area-context'
import { StyleSheet } from 'react-native'
import { PartialTheme } from '@/shared/themes/interfaces'
import { useAppBadge, useAppSocketListener, useNetConnect } from './hooks'
import { PreviewFileModal } from '@/shared/components/modals/preview-file-modal.smart-component'
import { PreviewFileModal, LoaderModal } from '@/shared/components/modals'
export const Navigation: FC = () => {
const activeModule = useSelector(selectActiveNavigationModule)
@ -120,6 +120,7 @@ export const Navigation: FC = () => { @@ -120,6 +120,7 @@ export const Navigation: FC = () => {
<FancyboxSmart />
<FullscreenVideoSmart />
<PreviewFileModal />
<LoaderModal />
{GlobalComponents}
</>
)

11
src/services/system/fs.service.ts

@ -355,9 +355,14 @@ const previewFile = (url: string) => { @@ -355,9 +355,14 @@ const previewFile = (url: string) => {
fromUrl: url,
toFile: localFile,
}
RNFS.downloadFile(options).promise.then(() =>
FileViewer.open(localFile, { showOpenWithDialog: false }),
)
RNFS.downloadFile(options).promise.then(() => {
appEvents.emit('closeLoaderModal', {})
setTimeout(() => {
FileViewer.open(localFile, { showOpenWithDialog: false })
}, 500)
})
} catch (error) {
appEvents.emit('openInfoModal', {
title: 'Сталась помилка!',

15
src/shared/components/action-sheet/action-sheet.component.tsx

@ -1,16 +1,8 @@ @@ -1,16 +1,8 @@
import React, { useEffect, useState } from 'react'
import {
Dimensions,
Platform,
StyleSheet,
TouchableOpacity,
View,
} from 'react-native'
import _ from 'lodash'
import React, { useState } from 'react'
import { Dimensions, StyleSheet, View } from 'react-native'
import { ActionSheetItem } from './action-sheet-item.component'
import Modal from 'react-native-modal'
import { useEventsListener, useTheme } from '@/shared/hooks'
import { PartialTheme } from '@/shared/themes/interfaces'
export const ActionSheet = () => {
const [items, setItems] = useState([])
@ -78,7 +70,7 @@ export const ActionSheet = () => { @@ -78,7 +70,7 @@ export const ActionSheet = () => {
)
}
const createStyles = (theme: PartialTheme) =>
const createStyles = () =>
StyleSheet.create({
container: {
position: 'absolute',
@ -86,7 +78,6 @@ const createStyles = (theme: PartialTheme) => @@ -86,7 +78,6 @@ const createStyles = (theme: PartialTheme) =>
left: 0,
width: '100%',
zIndex: 9999,
// backgroundColor: theme?.actionsMenu?.$primaryBtnBg,
borderRadius: 14,
},
cancelBtn: {

3
src/shared/components/modals/confirm-code-modal.component.tsx

@ -2,7 +2,6 @@ import { BottomModal, Button, RoundButton } from '@/shared/components' @@ -2,7 +2,6 @@ import { BottomModal, Button, RoundButton } from '@/shared/components'
import React, { useEffect, useRef, useState } from 'react'
import {
ActivityIndicator,
Dimensions,
StyleSheet,
Text,
TextInput,
@ -16,8 +15,6 @@ import { useTheme } from '@/shared/hooks/use-theme.hook' @@ -16,8 +15,6 @@ import { useTheme } from '@/shared/hooks/use-theme.hook'
import { useCountdown } from '@/shared/hooks'
import { Txt } from '../elements'
const screen = Dimensions.get('screen')
interface IProps {
onSubmit(code: string): void
resend(): Promise<void>

2
src/shared/components/modals/index.ts

@ -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'

92
src/shared/components/modals/loader-modal.smart-component.tsx

@ -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),
},
})

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

@ -7,18 +7,24 @@ import { fsService } from '@/services/system' @@ -7,18 +7,24 @@ import { fsService } from '@/services/system'
import PDFView from 'react-native-view-pdf'
import { FileType } from '@/shared/enums'
import { WebviewPlugin } from '../plugins'
import { appEvents } from '@/shared/events'
export const PreviewFileModal = () => {
const [params, setParams] = useState(null)
const { styles } = useTheme(createStyles)
useEventsListener('previewFile', data => {
appEvents.emit('openLoaderModal', {
message: 'Зачекайте, документ завантажується',
})
if (Platform.OS === 'ios') {
fsService.previewFile(data.fileUrl)
} else {
setParams(data)
}
})
const close = () => {
setParams(null)
}
@ -32,11 +38,13 @@ export const PreviewFileModal = () => { @@ -32,11 +38,13 @@ export const PreviewFileModal = () => {
style={{ flex: 1 }}
resource={params?.fileUrl}
resourceType={'url'}
onLoad={() => appEvents.emit('closeLoaderModal', {})}
/>
)
case FileType.TXT:
return <WebviewPlugin url={params?.fileUrl} renderHtml />
default:
appEvents.emit('closeLoaderModal', {})
return (
<WebviewPlugin
url={`https://docs.google.com/gview?embedded=true&url=${encodeURIComponent(

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

@ -1,7 +1,8 @@ @@ -1,7 +1,8 @@
import { appEvents } from '@/shared'
import { htmlContent } from '@/shared/helpers'
import { useFileContent, useTheme } from '@/shared/hooks'
import React, { FC, useState } from 'react'
import { ActivityIndicator, View, StyleSheet } from 'react-native'
import { View, StyleSheet } from 'react-native'
import { WebView } from 'react-native-webview'
interface IProps {
@ -11,18 +12,13 @@ interface IProps { @@ -11,18 +12,13 @@ interface IProps {
export const WebviewPlugin: FC<IProps> = ({ url, renderHtml = false }) => {
const [loading, setLoading] = useState(true)
const { styles, theme } = useTheme(createStyles)
const { styles } = useTheme(createStyles)
const { fileContent } = useFileContent(url)
if (!loading) appEvents.emit('closeLoaderModal', {})
return (
<View style={styles.container}>
{loading && (
<ActivityIndicator
style={styles.activityIndicator}
size="large"
color={theme.$loaderPrimary}
/>
)}
{renderHtml ? (
<WebView
source={{ html: htmlContent(fileContent) }}

4
src/shared/events/index.ts

@ -78,6 +78,10 @@ export type AppEvents = { @@ -78,6 +78,10 @@ export type AppEvents = {
}>
onCancel?: () => void
}
openLoaderModal: {
message: string
}
closeLoaderModal: {}
onTaskCreated: { executorsId: number[] }
onTaskChanged: { ids: (number | string)[] }
onTaskDocumentRead: { taskId: number | string }

Loading…
Cancel
Save