mirror of https://github.com/tooot-app/app
Fixed #311
This commit is contained in:
parent
316096cf57
commit
bc0ae827ad
|
@ -19,94 +19,6 @@ import {
|
||||||
import ImageViewer from './ImageViewer/Root'
|
import ImageViewer from './ImageViewer/Root'
|
||||||
import saveImage from './ImageViewer/save'
|
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 insets = useSafeAreaInsets()
|
|
||||||
const { mode, theme } = useTheme()
|
|
||||||
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,
|
|
||||||
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])
|
|
||||||
|
|
||||||
return (
|
|
||||||
<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>
|
|
||||||
)
|
|
||||||
},
|
|
||||||
(prev, next) => prev.currentIndex === next.currentIndex
|
|
||||||
)
|
|
||||||
|
|
||||||
const ScreenImagesViewer = ({
|
const ScreenImagesViewer = ({
|
||||||
route: {
|
route: {
|
||||||
params: { imageUrls, id }
|
params: { imageUrls, id }
|
||||||
|
@ -118,13 +30,51 @@ const ScreenImagesViewer = ({
|
||||||
return null
|
return null
|
||||||
}
|
}
|
||||||
|
|
||||||
const { theme } = useTheme()
|
const insets = useSafeAreaInsets()
|
||||||
|
|
||||||
|
const { mode, theme } = useTheme()
|
||||||
|
const { t } = useTranslation('screenImageViewer')
|
||||||
|
|
||||||
const initialIndex = imageUrls.findIndex(image => image.id === id)
|
const initialIndex = imageUrls.findIndex(image => image.id === id)
|
||||||
const [currentIndex, setCurrentIndex] = useState(initialIndex)
|
const [currentIndex, setCurrentIndex] = useState(initialIndex)
|
||||||
|
|
||||||
const messageRef = useRef<FlashMessage>(null)
|
const messageRef = useRef<FlashMessage>(null)
|
||||||
|
|
||||||
|
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])
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<SafeAreaProvider>
|
<SafeAreaProvider>
|
||||||
<StatusBar hidden />
|
<StatusBar hidden />
|
||||||
|
@ -133,14 +83,74 @@ const ScreenImagesViewer = ({
|
||||||
imageIndex={initialIndex}
|
imageIndex={initialIndex}
|
||||||
onImageIndexChange={index => setCurrentIndex(index)}
|
onImageIndexChange={index => setCurrentIndex(index)}
|
||||||
onRequestClose={() => navigation.goBack()}
|
onRequestClose={() => navigation.goBack()}
|
||||||
onLongPress={image => saveImage({ messageRef, theme, image })}
|
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={() => (
|
HeaderComponent={() => (
|
||||||
<HeaderComponent
|
<View
|
||||||
messageRef={messageRef}
|
style={{
|
||||||
navigation={navigation}
|
flex: 1,
|
||||||
currentIndex={currentIndex}
|
flexDirection: 'row',
|
||||||
imageUrls={imageUrls}
|
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>
|
||||||
)}
|
)}
|
||||||
/>
|
/>
|
||||||
<Message ref={messageRef} />
|
<Message ref={messageRef} />
|
||||||
|
|
Loading…
Reference in New Issue