From 46b63b33d647bc3af7ad70dee40d906f0ebc5947 Mon Sep 17 00:00:00 2001 From: Zhiyuan Zheng Date: Sun, 9 May 2021 22:27:12 +0200 Subject: [PATCH] Fixed #116 --- package.json | 2 +- src/i18n/en/screens/imageViewer.json | 4 +- src/screens/ImageViewer/save.ts | 82 ++++++++++++++++++++++++---- src/screens/ImagesViewer.tsx | 33 ++++++----- 4 files changed, 91 insertions(+), 30 deletions(-) diff --git a/package.json b/package.json index 2de1612d..4c79abfa 100644 --- a/package.json +++ b/package.json @@ -3,7 +3,7 @@ "versions": { "native": "210317", "major": 1, - "minor": 0, + "minor": 1, "patch": 0, "expo": "40.0.0" }, diff --git a/src/i18n/en/screens/imageViewer.json b/src/i18n/en/screens/imageViewer.json index 06c0014f..7b41e857 100644 --- a/src/i18n/en/screens/imageViewer.json +++ b/src/i18n/en/screens/imageViewer.json @@ -10,8 +10,8 @@ "cancel": "$t(common:buttons.cancel)" }, "save": { - "function": "Saving image", - "success": "Image saved" + "succeed": "Image saved", + "failed": "Saving image failed" } } } \ No newline at end of file diff --git a/src/screens/ImageViewer/save.ts b/src/screens/ImageViewer/save.ts index ff2689b5..97aaac20 100644 --- a/src/screens/ImageViewer/save.ts +++ b/src/screens/ImageViewer/save.ts @@ -1,28 +1,63 @@ import haptics from '@components/haptics' +import { displayMessage } from '@components/Message' import CameraRoll from '@react-native-community/cameraroll' +import i18next from 'i18next' +import { RefObject } from 'react' +import { Platform } from 'react-native' +import FlashMessage from 'react-native-flash-message' import { FileSystem, Permissions } from 'react-native-unimodules' -const saveIos = async ( +type CommonProps = { + messageRef: RefObject + mode: 'light' | 'dark' image: Nav.RootStackParamList['Screen-ImagesViewer']['imageUrls'][0] -) => { +} + +const saveIos = async ({ messageRef, mode, image }: CommonProps) => { CameraRoll.save(image.url) .then(() => { haptics('Success') + displayMessage({ + ref: messageRef, + mode, + type: 'success', + message: i18next.t('screenImageViewer:content.save.succeed') + }) }) .catch(() => { if (image.remote_url) { CameraRoll.save(image.remote_url) - .then(() => haptics('Success')) - .catch(() => haptics('Error')) + .then(() => { + haptics('Success') + displayMessage({ + ref: messageRef, + mode, + type: 'success', + message: i18next.t('screenImageViewer:content.save.succeed') + }) + }) + .catch(() => { + haptics('Error') + displayMessage({ + ref: messageRef, + mode, + type: 'error', + message: i18next.t('screenImageViewer:content.save.failed') + }) + }) } else { haptics('Error') + displayMessage({ + ref: messageRef, + mode, + type: 'error', + message: i18next.t('screenImageViewer:content.save.failed') + }) } }) } -const saveAndroid = async ( - image: Nav.RootStackParamList['Screen-ImagesViewer']['imageUrls'][0] -) => { +const saveAndroid = async ({ messageRef, mode, image }: CommonProps) => { const fileUri: string = `${FileSystem.documentDirectory}test.jpg` const downloadedFile: FileSystem.FileSystemDownloadResult = await FileSystem.downloadAsync( image.url, @@ -39,8 +74,35 @@ const saveAndroid = async ( } CameraRoll.save(downloadedFile.uri) - .then(() => haptics('Success')) - .catch(() => haptics('Error')) + .then(() => { + haptics('Success') + displayMessage({ + ref: messageRef, + mode, + type: 'success', + message: 'test' + }) + }) + .catch(() => { + haptics('Error') + displayMessage({ + ref: messageRef, + mode, + type: 'error', + message: i18next.t('screenImageViewer:content.save.failed') + }) + }) } -export { saveIos, saveAndroid } +const saveImage = async (props: CommonProps) => { + switch (Platform.OS) { + case 'ios': + saveIos(props) + break + case 'android': + saveAndroid(props) + break + } +} + +export default saveImage diff --git a/src/screens/ImagesViewer.tsx b/src/screens/ImagesViewer.tsx index 1d4e63de..35dcca2a 100644 --- a/src/screens/ImagesViewer.tsx +++ b/src/screens/ImagesViewer.tsx @@ -1,42 +1,35 @@ import analytics from '@components/analytics' import { HeaderCenter, HeaderLeft, HeaderRight } from '@components/Header' +import { Message } from '@components/Message' import { useActionSheet } from '@expo/react-native-action-sheet' import { StackScreenProps } from '@react-navigation/stack' +import { useTheme } from '@utils/styles/ThemeManager' import { findIndex } from 'lodash' -import React, { useCallback, useState } from 'react' +import React, { RefObject, useCallback, useRef, useState } from 'react' import { useTranslation } from 'react-i18next' import { Platform, Share, StatusBar, View } from 'react-native' +import FlashMessage from 'react-native-flash-message' import { SafeAreaProvider, useSafeAreaInsets } from 'react-native-safe-area-context' import ImageViewer from './ImageViewer/Root' -import { saveAndroid, saveIos } from './ImageViewer/save' - -const saveImage = async ( - image: Nav.RootStackParamList['Screen-ImagesViewer']['imageUrls'][0] -) => { - switch (Platform.OS) { - case 'ios': - saveIos(image) - break - case 'android': - saveAndroid(image) - break - } -} +import saveImage from './ImageViewer/save' const HeaderComponent = React.memo( ({ + messageRef, navigation, currentIndex, imageUrls }: { + messageRef: RefObject navigation: ScreenImagesViewerProp['navigation'] currentIndex: number imageUrls: Nav.RootStackParamList['Screen-ImagesViewer']['imageUrls'] }) => { const insets = useSafeAreaInsets() + const { mode } = useTheme() const { t } = useTranslation('screenImageViewer') const { showActionSheetWithOptions } = useActionSheet() @@ -55,7 +48,7 @@ const HeaderComponent = React.memo( switch (buttonIndex) { case 0: analytics('imageviewer_more_save_press') - saveImage(imageUrls[currentIndex]) + saveImage({ messageRef, mode, image: imageUrls[currentIndex] }) break case 1: analytics('imageviewer_more_share_press') @@ -121,9 +114,13 @@ const ScreenImagesViewer = ({ return null } + const { mode } = useTheme() + const initialIndex = findIndex(imageUrls, ['id', id]) const [currentIndex, setCurrentIndex] = useState(initialIndex) + const messageRef = useRef(null) + return ( @@ -132,15 +129,17 @@ const ScreenImagesViewer = ({ imageIndex={initialIndex} onImageIndexChange={index => setCurrentIndex(index)} onRequestClose={() => navigation.goBack()} - onLongPress={saveImage} + onLongPress={image => saveImage({ messageRef, mode, image })} HeaderComponent={() => ( )} /> + ) }