2021-01-30 01:29:15 +01:00
|
|
|
import analytics from '@components/analytics'
|
2021-02-10 00:40:44 +01:00
|
|
|
import { HeaderCenter, HeaderLeft, HeaderRight } from '@components/Header'
|
2021-05-09 22:27:12 +02:00
|
|
|
import { Message } from '@components/Message'
|
2021-01-31 03:09:35 +01:00
|
|
|
import { useActionSheet } from '@expo/react-native-action-sheet'
|
2021-08-29 15:25:38 +02:00
|
|
|
import { NativeStackNavigationProp } from '@react-navigation/native-stack'
|
|
|
|
import {
|
|
|
|
RootStackParamList,
|
|
|
|
RootStackScreenProps
|
|
|
|
} from '@utils/navigation/navigators'
|
2021-05-09 22:27:12 +02:00
|
|
|
import { useTheme } from '@utils/styles/ThemeManager'
|
|
|
|
import React, { RefObject, useCallback, useRef, useState } from 'react'
|
2021-01-31 03:09:35 +01:00
|
|
|
import { useTranslation } from 'react-i18next'
|
2021-04-10 20:03:28 +02:00
|
|
|
import { Platform, Share, StatusBar, View } from 'react-native'
|
2021-05-09 22:27:12 +02:00
|
|
|
import FlashMessage from 'react-native-flash-message'
|
2021-02-14 00:27:21 +01:00
|
|
|
import {
|
|
|
|
SafeAreaProvider,
|
|
|
|
useSafeAreaInsets
|
|
|
|
} from 'react-native-safe-area-context'
|
2021-03-21 12:32:49 +01:00
|
|
|
import ImageViewer from './ImageViewer/Root'
|
2021-05-09 22:27:12 +02:00
|
|
|
import saveImage from './ImageViewer/save'
|
2021-01-30 01:29:15 +01:00
|
|
|
|
2021-02-14 00:27:21 +01:00
|
|
|
const ScreenImagesViewer = ({
|
|
|
|
route: {
|
2021-03-06 23:42:29 +01:00
|
|
|
params: { imageUrls, id }
|
2021-02-14 00:27:21 +01:00
|
|
|
},
|
|
|
|
navigation
|
2021-08-29 15:25:38 +02:00
|
|
|
}: RootStackScreenProps<'Screen-ImagesViewer'>) => {
|
2021-02-14 00:27:21 +01:00
|
|
|
if (imageUrls.length === 0) {
|
2021-04-19 22:50:55 +02:00
|
|
|
navigation.goBack()
|
2021-02-14 00:27:21 +01:00
|
|
|
return null
|
|
|
|
}
|
|
|
|
|
2022-06-01 23:47:58 +02:00
|
|
|
const insets = useSafeAreaInsets()
|
|
|
|
|
|
|
|
const { mode, theme } = useTheme()
|
|
|
|
const { t } = useTranslation('screenImageViewer')
|
2021-05-09 22:27:12 +02:00
|
|
|
|
2022-01-30 22:51:03 +01:00
|
|
|
const initialIndex = imageUrls.findIndex(image => image.id === id)
|
2021-03-06 23:42:29 +01:00
|
|
|
const [currentIndex, setCurrentIndex] = useState(initialIndex)
|
2021-01-30 01:29:15 +01:00
|
|
|
|
2021-05-09 22:27:12 +02:00
|
|
|
const messageRef = useRef<FlashMessage>(null)
|
|
|
|
|
2022-06-01 23:47:58 +02:00
|
|
|
const { showActionSheetWithOptions } = useActionSheet()
|
|
|
|
const onPress = useCallback(() => {
|
|
|
|
analytics('imageviewer_more_press')
|
|
|
|
showActionSheetWithOptions(
|
|
|
|
{
|
|
|
|
options: [
|
|
|
|
t('content.options.save'),
|
|
|
|
t('content.options.share'),
|
|
|
|
t('content.options.cancel')
|
|
|
|
],
|
|
|
|
cancelButtonIndex: 2,
|
|
|
|
userInterfaceStyle: mode
|
|
|
|
},
|
|
|
|
async buttonIndex => {
|
|
|
|
switch (buttonIndex) {
|
|
|
|
case 0:
|
|
|
|
analytics('imageviewer_more_save_press')
|
|
|
|
saveImage({ messageRef, theme, image: imageUrls[currentIndex] })
|
|
|
|
break
|
|
|
|
case 1:
|
|
|
|
analytics('imageviewer_more_share_press')
|
|
|
|
switch (Platform.OS) {
|
|
|
|
case 'ios':
|
|
|
|
await Share.share({ url: imageUrls[currentIndex].url })
|
|
|
|
break
|
|
|
|
case 'android':
|
|
|
|
await Share.share({ message: imageUrls[currentIndex].url })
|
|
|
|
break
|
|
|
|
}
|
|
|
|
break
|
|
|
|
}
|
|
|
|
}
|
|
|
|
)
|
|
|
|
}, [currentIndex])
|
|
|
|
|
2021-02-09 00:24:02 +01:00
|
|
|
return (
|
2021-02-14 00:27:21 +01:00
|
|
|
<SafeAreaProvider>
|
2022-02-17 00:09:19 +01:00
|
|
|
<StatusBar hidden />
|
2021-03-21 12:32:49 +01:00
|
|
|
<ImageViewer
|
2021-02-14 00:27:21 +01:00
|
|
|
images={imageUrls}
|
2021-03-06 23:42:29 +01:00
|
|
|
imageIndex={initialIndex}
|
2021-02-10 00:40:44 +01:00
|
|
|
onImageIndexChange={index => setCurrentIndex(index)}
|
|
|
|
onRequestClose={() => navigation.goBack()}
|
2022-06-01 23:47:58 +02:00
|
|
|
onLongPress={() => {
|
|
|
|
analytics('imageviewer_more_press')
|
|
|
|
showActionSheetWithOptions(
|
|
|
|
{
|
|
|
|
options: [
|
|
|
|
t('content.options.save'),
|
|
|
|
t('content.options.share'),
|
|
|
|
t('content.options.cancel')
|
|
|
|
],
|
|
|
|
cancelButtonIndex: 2,
|
|
|
|
userInterfaceStyle: mode
|
|
|
|
},
|
|
|
|
async buttonIndex => {
|
|
|
|
switch (buttonIndex) {
|
|
|
|
case 0:
|
|
|
|
analytics('imageviewer_more_save_press')
|
|
|
|
saveImage({
|
|
|
|
messageRef,
|
|
|
|
theme,
|
|
|
|
image: imageUrls[currentIndex]
|
|
|
|
})
|
|
|
|
break
|
|
|
|
case 1:
|
|
|
|
analytics('imageviewer_more_share_press')
|
|
|
|
switch (Platform.OS) {
|
|
|
|
case 'ios':
|
|
|
|
await Share.share({ url: imageUrls[currentIndex].url })
|
|
|
|
break
|
|
|
|
case 'android':
|
|
|
|
await Share.share({
|
|
|
|
message: imageUrls[currentIndex].url
|
|
|
|
})
|
|
|
|
break
|
|
|
|
}
|
|
|
|
break
|
|
|
|
}
|
|
|
|
}
|
|
|
|
)
|
|
|
|
}}
|
2021-02-14 00:27:21 +01:00
|
|
|
HeaderComponent={() => (
|
2022-06-01 23:47:58 +02:00
|
|
|
<View
|
|
|
|
style={{
|
|
|
|
flex: 1,
|
|
|
|
flexDirection: 'row',
|
|
|
|
justifyContent: 'space-between',
|
|
|
|
alignItems: 'center',
|
|
|
|
marginTop: insets.top
|
|
|
|
}}
|
|
|
|
>
|
|
|
|
<HeaderLeft
|
|
|
|
content='X'
|
|
|
|
native={false}
|
|
|
|
background
|
|
|
|
onPress={() => navigation.goBack()}
|
|
|
|
/>
|
|
|
|
<HeaderCenter
|
|
|
|
inverted
|
|
|
|
content={`${currentIndex + 1} / ${imageUrls.length}`}
|
|
|
|
/>
|
|
|
|
<HeaderRight
|
|
|
|
accessibilityLabel={t('content.actions.accessibilityLabel')}
|
|
|
|
accessibilityHint={t('content.actions.accessibilityHint')}
|
|
|
|
content='MoreHorizontal'
|
|
|
|
native={false}
|
|
|
|
background
|
|
|
|
onPress={onPress}
|
|
|
|
/>
|
|
|
|
</View>
|
2021-02-14 00:27:21 +01:00
|
|
|
)}
|
2021-02-10 00:40:44 +01:00
|
|
|
/>
|
2021-05-09 22:27:12 +02:00
|
|
|
<Message ref={messageRef} />
|
2021-02-14 00:27:21 +01:00
|
|
|
</SafeAreaProvider>
|
2021-02-09 00:24:02 +01:00
|
|
|
)
|
|
|
|
}
|
2021-01-30 01:29:15 +01:00
|
|
|
|
|
|
|
export default ScreenImagesViewer
|