1
0
mirror of https://github.com/tooot-app/app synced 2025-06-05 22:19:13 +02:00

Update image viewer index seraching

This commit is contained in:
Zhiyuan Zheng
2021-03-06 23:42:29 +01:00
parent 4cf7b79f83
commit 960634ec0b
5 changed files with 13 additions and 15 deletions

View File

@ -50,14 +50,14 @@ declare namespace Nav {
| undefined | undefined
'Screen-ImagesViewer': { 'Screen-ImagesViewer': {
imageUrls: { imageUrls: {
id: Mastodon.Attachment['id']
url: Mastodon.AttachmentImage['url'] url: Mastodon.AttachmentImage['url']
width?: number width?: number
height?: number height?: number
preview_url: Mastodon.AttachmentImage['preview_url'] preview_url: Mastodon.AttachmentImage['preview_url']
remote_url?: Mastodon.AttachmentImage['remote_url'] remote_url?: Mastodon.AttachmentImage['remote_url']
imageIndex: number
}[] }[]
imageIndex: number id: Mastodon.Attachment['id']
} }
} }

View File

@ -35,10 +35,10 @@ const TimelineAttachment = React.memo(
let imageUrls: Nav.RootStackParamList['Screen-ImagesViewer']['imageUrls'] = [] let imageUrls: Nav.RootStackParamList['Screen-ImagesViewer']['imageUrls'] = []
const navigation = useNavigation() const navigation = useNavigation()
const navigateToImagesViewer = (imageIndex: number) => const navigateToImagesViewer = (id: string) =>
navigation.navigate('Screen-ImagesViewer', { navigation.navigate('Screen-ImagesViewer', {
imageUrls, imageUrls,
imageIndex id
}) })
const attachments = useMemo( const attachments = useMemo(
() => () =>
@ -46,12 +46,12 @@ const TimelineAttachment = React.memo(
switch (attachment.type) { switch (attachment.type) {
case 'image': case 'image':
imageUrls.push({ imageUrls.push({
id: attachment.id,
url: attachment.url, url: attachment.url,
preview_url: attachment.preview_url, preview_url: attachment.preview_url,
remote_url: attachment.remote_url, remote_url: attachment.remote_url,
width: attachment.meta?.original?.width, width: attachment.meta?.original?.width,
height: attachment.meta?.original?.height, height: attachment.meta?.original?.height
imageIndex: index
}) })
return ( return (
<AttachmentImage <AttachmentImage

View File

@ -10,14 +10,14 @@ export interface Props {
index: number index: number
sensitiveShown: boolean sensitiveShown: boolean
image: Mastodon.AttachmentImage image: Mastodon.AttachmentImage
navigateToImagesViewer: (imageIndex: number) => void navigateToImagesViewer: (imageIndex: string) => void
} }
const AttachmentImage = React.memo( const AttachmentImage = React.memo(
({ total, index, sensitiveShown, image, navigateToImagesViewer }: Props) => { ({ total, index, sensitiveShown, image, navigateToImagesViewer }: Props) => {
const onPress = useCallback(() => { const onPress = useCallback(() => {
analytics('timeline_shared_attachment_image_press', { id: image.id }) analytics('timeline_shared_attachment_image_press', { id: image.id })
navigateToImagesViewer(index) navigateToImagesViewer(image.id)
}, []) }, [])
return ( return (

View File

@ -34,7 +34,6 @@ const HeaderComponent = React.memo(
height?: number | undefined height?: number | undefined
preview_url: string preview_url: string
remote_url?: string | undefined remote_url?: string | undefined
imageIndex: number
}[] }[]
}) => { }) => {
const insets = useSafeAreaInsets() const insets = useSafeAreaInsets()
@ -134,7 +133,7 @@ export type ScreenImagesViewerProp = StackScreenProps<
const ScreenImagesViewer = ({ const ScreenImagesViewer = ({
route: { route: {
params: { imageUrls, imageIndex } params: { imageUrls, id }
}, },
navigation navigation
}: ScreenImagesViewerProp) => { }: ScreenImagesViewerProp) => {
@ -142,16 +141,15 @@ const ScreenImagesViewer = ({
return null return null
} }
const [currentIndex, setCurrentIndex] = useState( const initialIndex = findIndex(imageUrls, ['id', id])
findIndex(imageUrls, ['imageIndex', imageIndex]) const [currentIndex, setCurrentIndex] = useState(initialIndex)
)
return ( return (
<SafeAreaProvider> <SafeAreaProvider>
<StatusBar backgroundColor='rgb(0,0,0)' /> <StatusBar backgroundColor='rgb(0,0,0)' />
<ImageView <ImageView
images={imageUrls} images={imageUrls}
imageIndex={imageIndex} imageIndex={initialIndex}
onImageIndexChange={index => setCurrentIndex(index)} onImageIndexChange={index => setCurrentIndex(index)}
onRequestClose={() => navigation.goBack()} onRequestClose={() => navigation.goBack()}
HeaderComponent={() => ( HeaderComponent={() => (