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'
|
|
|
|
import { toast } from '@components/toast'
|
2021-01-31 03:09:35 +01:00
|
|
|
import { useActionSheet } from '@expo/react-native-action-sheet'
|
|
|
|
import CameraRoll from '@react-native-community/cameraroll'
|
2021-02-10 00:40:44 +01:00
|
|
|
import { StackScreenProps } from '@react-navigation/stack'
|
|
|
|
import ImageView from '@root/modules/react-native-image-viewing/src/index'
|
2021-01-30 01:29:15 +01:00
|
|
|
import { findIndex } from 'lodash'
|
2021-02-10 00:40:44 +01:00
|
|
|
import React, { useCallback, useState } from 'react'
|
2021-01-31 03:09:35 +01:00
|
|
|
import { useTranslation } from 'react-i18next'
|
2021-02-10 00:40:44 +01:00
|
|
|
import {
|
|
|
|
PermissionsAndroid,
|
|
|
|
Platform,
|
|
|
|
Share,
|
|
|
|
StyleSheet,
|
|
|
|
View
|
|
|
|
} from 'react-native'
|
|
|
|
import { SafeAreaView } from 'react-native-safe-area-context'
|
2021-01-30 01:29:15 +01:00
|
|
|
|
|
|
|
export type ScreenImagesViewerProp = StackScreenProps<
|
|
|
|
Nav.RootStackParamList,
|
|
|
|
'Screen-ImagesViewer'
|
|
|
|
>
|
|
|
|
|
2021-02-09 00:24:02 +01:00
|
|
|
const ScreenImagesViewer = ({
|
|
|
|
route: {
|
|
|
|
params: { imageUrls, imageIndex }
|
|
|
|
},
|
|
|
|
navigation
|
|
|
|
}: ScreenImagesViewerProp) => {
|
|
|
|
const [currentIndex, setCurrentIndex] = useState(
|
|
|
|
findIndex(imageUrls, ['imageIndex', imageIndex])
|
|
|
|
)
|
2021-01-30 01:29:15 +01:00
|
|
|
|
2021-02-09 00:24:02 +01:00
|
|
|
const hasAndroidPermission = async () => {
|
|
|
|
const permission = PermissionsAndroid.PERMISSIONS.WRITE_EXTERNAL_STORAGE
|
2021-01-31 03:09:35 +01:00
|
|
|
|
2021-02-09 00:24:02 +01:00
|
|
|
const hasPermission = await PermissionsAndroid.check(permission)
|
|
|
|
if (hasPermission) {
|
|
|
|
return true
|
|
|
|
}
|
2021-01-31 03:09:35 +01:00
|
|
|
|
2021-02-09 00:24:02 +01:00
|
|
|
const status = await PermissionsAndroid.request(permission)
|
|
|
|
return status === 'granted'
|
|
|
|
}
|
|
|
|
const saveImage = async () => {
|
|
|
|
if (Platform.OS === 'android' && !(await hasAndroidPermission())) {
|
|
|
|
return
|
2021-01-31 03:09:35 +01:00
|
|
|
}
|
2021-02-09 00:24:02 +01:00
|
|
|
CameraRoll.save(
|
|
|
|
imageUrls[imageIndex].originUrl ||
|
|
|
|
imageUrls[imageIndex].remote_url ||
|
|
|
|
imageUrls[imageIndex].preview_url
|
|
|
|
)
|
|
|
|
.then(() =>
|
|
|
|
toast({ type: 'success', message: t('content.save.success') })
|
2021-01-31 03:09:35 +01:00
|
|
|
)
|
2021-02-09 00:24:02 +01:00
|
|
|
.catch(() =>
|
|
|
|
toast({
|
|
|
|
type: 'error',
|
|
|
|
message: t('common:toastMessage.error.message', {
|
|
|
|
function: t('content.save.function')
|
2021-01-31 03:09:35 +01:00
|
|
|
})
|
2021-02-09 00:24:02 +01:00
|
|
|
})
|
2021-01-31 03:09:35 +01:00
|
|
|
)
|
2021-02-09 00:24:02 +01:00
|
|
|
}
|
2021-01-30 01:29:15 +01:00
|
|
|
|
2021-02-09 00:24:02 +01:00
|
|
|
const { t } = useTranslation('screenImageViewer')
|
|
|
|
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
|
|
|
|
},
|
|
|
|
async buttonIndex => {
|
|
|
|
switch (buttonIndex) {
|
|
|
|
case 0:
|
|
|
|
analytics('imageviewer_more_save_press')
|
|
|
|
saveImage()
|
|
|
|
break
|
|
|
|
case 1:
|
|
|
|
analytics('imageviewer_more_share_press')
|
|
|
|
switch (Platform.OS) {
|
|
|
|
case 'ios':
|
|
|
|
return Share.share({ url: imageUrls[currentIndex].url })
|
|
|
|
case 'android':
|
|
|
|
return Share.share({ message: imageUrls[currentIndex].url })
|
|
|
|
}
|
|
|
|
break
|
|
|
|
}
|
|
|
|
}
|
2021-01-30 01:29:15 +01:00
|
|
|
)
|
2021-02-09 00:24:02 +01:00
|
|
|
}, [currentIndex])
|
2021-01-30 01:29:15 +01:00
|
|
|
|
2021-02-10 00:40:44 +01:00
|
|
|
const HeaderComponent = useCallback(
|
|
|
|
() => (
|
|
|
|
<View
|
|
|
|
style={{
|
|
|
|
flex: 1,
|
|
|
|
flexDirection: 'row',
|
|
|
|
justifyContent: 'space-between',
|
|
|
|
alignItems: 'center'
|
|
|
|
}}
|
|
|
|
>
|
|
|
|
<HeaderLeft
|
|
|
|
content='X'
|
|
|
|
native={false}
|
|
|
|
onPress={() => navigation.goBack()}
|
|
|
|
/>
|
|
|
|
<HeaderCenter
|
|
|
|
inverted
|
|
|
|
content={`${currentIndex + 1} / ${imageUrls.length}`}
|
|
|
|
/>
|
|
|
|
<HeaderRight
|
|
|
|
content='MoreHorizontal'
|
|
|
|
native={false}
|
|
|
|
onPress={onPress}
|
|
|
|
/>
|
|
|
|
</View>
|
2021-02-09 00:24:02 +01:00
|
|
|
),
|
2021-02-10 00:40:44 +01:00
|
|
|
[currentIndex]
|
2021-02-09 00:24:02 +01:00
|
|
|
)
|
2021-01-30 01:29:15 +01:00
|
|
|
|
2021-02-09 00:24:02 +01:00
|
|
|
return (
|
2021-02-10 00:40:44 +01:00
|
|
|
<SafeAreaView style={styles.base} edges={['top']}>
|
|
|
|
<ImageView
|
|
|
|
images={imageUrls.map(urls => ({ uri: urls.url }))}
|
|
|
|
imageIndex={imageIndex}
|
|
|
|
onImageIndexChange={index => setCurrentIndex(index)}
|
|
|
|
onRequestClose={() => navigation.goBack()}
|
|
|
|
HeaderComponent={HeaderComponent}
|
|
|
|
/>
|
|
|
|
</SafeAreaView>
|
2021-02-09 00:24:02 +01:00
|
|
|
)
|
|
|
|
}
|
2021-01-30 01:29:15 +01:00
|
|
|
|
2021-02-10 00:40:44 +01:00
|
|
|
const styles = StyleSheet.create({
|
|
|
|
base: {
|
|
|
|
flex: 1,
|
|
|
|
backgroundColor: 'black'
|
|
|
|
}
|
|
|
|
})
|
|
|
|
|
2021-01-30 01:29:15 +01:00
|
|
|
export default ScreenImagesViewer
|