octo/tooot
octo
/
tooot
mirror of https://github.com/tooot-app/app
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

Fixed #311

This commit is contained in:
Zhiyuan Zheng 2022-06-01 23:47:58 +02:00
parent 316096cf57
commit bc0ae827ad
1 changed files with 106 additions and 96 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

120
src/screens/ImagesViewer.tsx
View File

@ -19,26 +19,28 @@ import {
import ImageViewer from './ImageViewer/Root'
import saveImage from './ImageViewer/save'
const HeaderComponent = React.memo(
({
messageRef,
navigation,
currentIndex,
imageUrls
}: {
messageRef: RefObject<FlashMessage>
navigation: NativeStackNavigationProp<
RootStackParamList,
'Screen-ImagesViewer'
>
currentIndex: number
imageUrls: RootStackParamList['Screen-ImagesViewer']['imageUrls']
}) => {
const ScreenImagesViewer = ({
route: {
params: { imageUrls, id }
},
navigation
}: RootStackScreenProps<'Screen-ImagesViewer'>) => {
if (imageUrls.length === 0) {
navigation.goBack()
return null
}
const insets = useSafeAreaInsets()
const { mode, theme } = useTheme()
const { t } = useTranslation('screenImageViewer')
const { showActionSheetWithOptions } = useActionSheet()
const initialIndex = imageUrls.findIndex(image => image.id === id)
const [currentIndex, setCurrentIndex] = useState(initialIndex)
const messageRef = useRef<FlashMessage>(null)
const { showActionSheetWithOptions } = useActionSheet()
const onPress = useCallback(() => {
analytics('imageviewer_more_press')
showActionSheetWithOptions(
@ -74,6 +76,53 @@ const HeaderComponent = React.memo(
}, [currentIndex])
return (
<SafeAreaProvider>
<StatusBar hidden />
<ImageViewer
images={imageUrls}
imageIndex={initialIndex}
onImageIndexChange={index => setCurrentIndex(index)}
onRequestClose={() => navigation.goBack()}
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
}
}
)
}}
HeaderComponent={() => (
<View
style={{
flex: 1,
@ -102,45 +151,6 @@ const HeaderComponent = React.memo(
onPress={onPress}
/>
</View>
)
},
(prev, next) => prev.currentIndex === next.currentIndex
)
const ScreenImagesViewer = ({
route: {
params: { imageUrls, id }
},
navigation
}: RootStackScreenProps<'Screen-ImagesViewer'>) => {
if (imageUrls.length === 0) {
navigation.goBack()
return null
}
const { theme } = useTheme()
const initialIndex = imageUrls.findIndex(image => image.id === id)
const [currentIndex, setCurrentIndex] = useState(initialIndex)
const messageRef = useRef<FlashMessage>(null)
return (
<SafeAreaProvider>
<StatusBar hidden />
<ImageViewer
images={imageUrls}
imageIndex={initialIndex}
onImageIndexChange={index => setCurrentIndex(index)}
onRequestClose={() => navigation.goBack()}
onLongPress={image => saveImage({ messageRef, theme, image })}
HeaderComponent={() => (
<HeaderComponent
messageRef={messageRef}
navigation={navigation}
currentIndex={currentIndex}
imageUrls={imageUrls}
/>
)}
/>
<Message ref={messageRef} />