mirror of https://github.com/tooot-app/app
Editing can update media
This commit is contained in:
Zhiyuan Zheng
parent
d4f91a5756
commit
f93d6f7db8
|
|
@ -1,6 +1,6 @@
|
|||
import { useAccessibility } from '@utils/accessibility/AccessibilityManager'
|
||||
import { useTheme } from '@utils/styles/ThemeManager'
|
||||
import React, { useCallback, useMemo, useState } from 'react'
|
||||
import React, { useMemo, useState } from 'react'
|
||||
import {
|
||||
AccessibilityProps,
|
||||
Image,
|
||||
|
|
@ -39,125 +39,103 @@ export interface Props {
|
|||
>
|
||||
}
|
||||
|
||||
const GracefullyImage = React.memo(
|
||||
({
|
||||
accessibilityLabel,
|
||||
accessibilityHint,
|
||||
hidden = false,
|
||||
uri,
|
||||
blurhash,
|
||||
dimension,
|
||||
onPress,
|
||||
style,
|
||||
imageStyle,
|
||||
setImageDimensions
|
||||
}: Props) => {
|
||||
const { reduceMotionEnabled } = useAccessibility()
|
||||
const { colors } = useTheme()
|
||||
const [originalFailed, setOriginalFailed] = useState(false)
|
||||
const [imageLoaded, setImageLoaded] = useState(false)
|
||||
const GracefullyImage = ({
|
||||
accessibilityLabel,
|
||||
accessibilityHint,
|
||||
hidden = false,
|
||||
uri,
|
||||
blurhash,
|
||||
dimension,
|
||||
onPress,
|
||||
style,
|
||||
imageStyle,
|
||||
setImageDimensions
|
||||
}: Props) => {
|
||||
const { reduceMotionEnabled } = useAccessibility()
|
||||
const { colors } = useTheme()
|
||||
const [originalFailed, setOriginalFailed] = useState(false)
|
||||
const [imageLoaded, setImageLoaded] = useState(false)
|
||||
|
||||
const source = useMemo(() => {
|
||||
if (originalFailed) {
|
||||
return { uri: uri.remote || undefined }
|
||||
} else {
|
||||
return {
|
||||
uri: reduceMotionEnabled && uri.static ? uri.static : uri.original
|
||||
}
|
||||
const source = originalFailed
|
||||
? { uri: uri.remote || undefined }
|
||||
: {
|
||||
uri: reduceMotionEnabled && uri.static ? uri.static : uri.original
|
||||
}
|
||||
}, [originalFailed])
|
||||
|
||||
const onLoad = useCallback(() => {
|
||||
setImageLoaded(true)
|
||||
if (setImageDimensions && source.uri) {
|
||||
Image.getSize(source.uri, (width, height) =>
|
||||
setImageDimensions({ width, height })
|
||||
const onLoad = () => {
|
||||
setImageLoaded(true)
|
||||
if (setImageDimensions && source.uri) {
|
||||
Image.getSize(source.uri, (width, height) =>
|
||||
setImageDimensions({ width, height })
|
||||
)
|
||||
}
|
||||
}
|
||||
const onError = () => {
|
||||
if (!originalFailed) {
|
||||
setOriginalFailed(true)
|
||||
}
|
||||
}
|
||||
|
||||
const blurhashView = useMemo(() => {
|
||||
if (hidden || !imageLoaded) {
|
||||
if (blurhash) {
|
||||
return (
|
||||
<Blurhash
|
||||
decodeAsync
|
||||
blurhash={blurhash}
|
||||
style={styles.placeholder}
|
||||
/>
|
||||
)
|
||||
}
|
||||
}, [source.uri])
|
||||
const onError = useCallback(() => {
|
||||
if (!originalFailed) {
|
||||
setOriginalFailed(true)
|
||||
}
|
||||
}, [originalFailed])
|
||||
|
||||
const previewView = useMemo(
|
||||
() =>
|
||||
uri.preview && !imageLoaded ? (
|
||||
<Image
|
||||
fadeDuration={0}
|
||||
source={{ uri: uri.preview }}
|
||||
} else {
|
||||
return (
|
||||
<View
|
||||
style={[
|
||||
styles.placeholder,
|
||||
{ backgroundColor: colors.shimmerDefault }
|
||||
]}
|
||||
/>
|
||||
) : null,
|
||||
[]
|
||||
)
|
||||
const originalView = useMemo(
|
||||
() => (
|
||||
)
|
||||
}
|
||||
} else {
|
||||
return null
|
||||
}
|
||||
}, [hidden, imageLoaded])
|
||||
|
||||
return (
|
||||
<Pressable
|
||||
{...(onPress
|
||||
? { accessibilityRole: 'imagebutton' }
|
||||
: { accessibilityRole: 'image' })}
|
||||
accessibilityLabel={accessibilityLabel}
|
||||
accessibilityHint={accessibilityHint}
|
||||
style={[style, dimension, { backgroundColor: colors.shimmerDefault }]}
|
||||
{...(onPress
|
||||
? hidden
|
||||
? { disabled: true }
|
||||
: { onPress }
|
||||
: { disabled: true })}
|
||||
>
|
||||
{uri.preview && !imageLoaded ? (
|
||||
<Image
|
||||
fadeDuration={0}
|
||||
source={source}
|
||||
style={[{ flex: 1 }, imageStyle]}
|
||||
onLoad={onLoad}
|
||||
onError={onError}
|
||||
source={{ uri: uri.preview }}
|
||||
style={[
|
||||
styles.placeholder,
|
||||
{ backgroundColor: colors.shimmerDefault }
|
||||
]}
|
||||
/>
|
||||
),
|
||||
[source]
|
||||
)
|
||||
const blurhashView = useMemo(() => {
|
||||
if (hidden || !imageLoaded) {
|
||||
if (blurhash) {
|
||||
return (
|
||||
<Blurhash
|
||||
decodeAsync
|
||||
blurhash={blurhash}
|
||||
style={styles.placeholder}
|
||||
/>
|
||||
)
|
||||
} else {
|
||||
return (
|
||||
<View
|
||||
style={[
|
||||
styles.placeholder,
|
||||
{ backgroundColor: colors.shimmerDefault }
|
||||
]}
|
||||
/>
|
||||
)
|
||||
}
|
||||
} else {
|
||||
return null
|
||||
}
|
||||
}, [hidden, imageLoaded])
|
||||
|
||||
return (
|
||||
<Pressable
|
||||
{...(onPress
|
||||
? { accessibilityRole: 'imagebutton' }
|
||||
: { accessibilityRole: 'image' })}
|
||||
accessibilityLabel={accessibilityLabel}
|
||||
accessibilityHint={accessibilityHint}
|
||||
style={[style, dimension, { backgroundColor: colors.shimmerDefault }]}
|
||||
{...(onPress
|
||||
? hidden
|
||||
? { disabled: true }
|
||||
: { onPress }
|
||||
: { disabled: true })}
|
||||
>
|
||||
{previewView}
|
||||
{originalView}
|
||||
{blurhashView}
|
||||
</Pressable>
|
||||
)
|
||||
},
|
||||
(prev, next) =>
|
||||
prev.hidden === next.hidden &&
|
||||
prev.uri.preview === next.uri.preview &&
|
||||
prev.uri.original === next.uri.original &&
|
||||
prev.uri.remote === next.uri.remote
|
||||
)
|
||||
) : null}
|
||||
<Image
|
||||
fadeDuration={0}
|
||||
source={source}
|
||||
style={[{ flex: 1 }, imageStyle]}
|
||||
onLoad={onLoad}
|
||||
onError={onError}
|
||||
/>
|
||||
{blurhashView}
|
||||
</Pressable>
|
||||
)
|
||||
}
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
placeholder: {
|
||||
|
|
|
|||
|
|
@ -10,10 +10,9 @@ import { StackNavigationProp } from '@react-navigation/stack'
|
|||
import { RootStackParamList } from '@utils/navigation/navigators'
|
||||
import { StyleConstants } from '@utils/styles/constants'
|
||||
import layoutAnimation from '@utils/styles/layoutAnimation'
|
||||
import React, { useCallback, useMemo, useRef, useState } from 'react'
|
||||
import { useEffect } from 'react'
|
||||
import React, { useRef, useState } from 'react'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
import { Pressable, StyleSheet, View } from 'react-native'
|
||||
import { Pressable, View } from 'react-native'
|
||||
|
||||
export interface Props {
|
||||
status: Pick<Mastodon.Status, 'media_attachments' | 'sensitive'>
|
||||
|
|
@ -24,24 +23,13 @@ const TimelineAttachment = React.memo(
|
|||
const { t } = useTranslation('componentTimeline')
|
||||
|
||||
const [sensitiveShown, setSensitiveShown] = useState(status.sensitive)
|
||||
const onPressBlurView = useCallback(() => {
|
||||
analytics('timeline_shared_attachment_blurview_press_show')
|
||||
layoutAnimation()
|
||||
setSensitiveShown(false)
|
||||
haptics('Light')
|
||||
}, [])
|
||||
const onPressShow = useCallback(() => {
|
||||
analytics('timeline_shared_attachment_blurview_press_hide')
|
||||
setSensitiveShown(true)
|
||||
haptics('Light')
|
||||
}, [])
|
||||
|
||||
const imageUrls = useRef<
|
||||
RootStackParamList['Screen-ImagesViewer']['imageUrls']
|
||||
>([])
|
||||
const navigation = useNavigation<StackNavigationProp<RootStackParamList>>()
|
||||
useEffect(() => {
|
||||
status.media_attachments.forEach((attachment, index) => {
|
||||
const navigateToImagesViewer = (id: string) => {
|
||||
status.media_attachments.forEach(attachment => {
|
||||
switch (attachment.type) {
|
||||
case 'image':
|
||||
imageUrls.current.push({
|
||||
|
|
@ -55,117 +43,136 @@ const TimelineAttachment = React.memo(
|
|||
})
|
||||
}
|
||||
})
|
||||
}, [])
|
||||
const navigateToImagesViewer = (id: string) =>
|
||||
navigation.navigate('Screen-ImagesViewer', {
|
||||
imageUrls: imageUrls.current,
|
||||
id
|
||||
})
|
||||
const attachments = useMemo(
|
||||
() =>
|
||||
status.media_attachments.map((attachment, index) => {
|
||||
switch (attachment.type) {
|
||||
case 'image':
|
||||
return (
|
||||
<AttachmentImage
|
||||
key={index}
|
||||
total={status.media_attachments.length}
|
||||
index={index}
|
||||
sensitiveShown={sensitiveShown}
|
||||
image={attachment}
|
||||
navigateToImagesViewer={navigateToImagesViewer}
|
||||
/>
|
||||
)
|
||||
case 'video':
|
||||
return (
|
||||
<AttachmentVideo
|
||||
key={index}
|
||||
total={status.media_attachments.length}
|
||||
index={index}
|
||||
sensitiveShown={sensitiveShown}
|
||||
video={attachment}
|
||||
/>
|
||||
)
|
||||
case 'gifv':
|
||||
return (
|
||||
<AttachmentVideo
|
||||
key={index}
|
||||
total={status.media_attachments.length}
|
||||
index={index}
|
||||
sensitiveShown={sensitiveShown}
|
||||
video={attachment}
|
||||
gifv
|
||||
/>
|
||||
)
|
||||
case 'audio':
|
||||
return (
|
||||
<AttachmentAudio
|
||||
key={index}
|
||||
total={status.media_attachments.length}
|
||||
index={index}
|
||||
sensitiveShown={sensitiveShown}
|
||||
audio={attachment}
|
||||
/>
|
||||
)
|
||||
default:
|
||||
if (
|
||||
attachment.preview_url?.endsWith('.jpg') ||
|
||||
attachment.preview_url?.endsWith('.jpeg') ||
|
||||
attachment.preview_url?.endsWith('.png') ||
|
||||
attachment.preview_url?.endsWith('.gif') ||
|
||||
attachment.remote_url?.endsWith('.jpg') ||
|
||||
attachment.remote_url?.endsWith('.jpeg') ||
|
||||
attachment.remote_url?.endsWith('.png') ||
|
||||
attachment.remote_url?.endsWith('.gif')
|
||||
) {
|
||||
imageUrls.current.push({
|
||||
id: attachment.id,
|
||||
preview_url: attachment.preview_url,
|
||||
url: attachment.url,
|
||||
remote_url: attachment.remote_url,
|
||||
blurhash: attachment.blurhash,
|
||||
width: attachment.meta?.original?.width,
|
||||
height: attachment.meta?.original?.height
|
||||
})
|
||||
}
|
||||
|
||||
return (
|
||||
<View>
|
||||
<View
|
||||
style={{
|
||||
marginTop: StyleConstants.Spacing.S,
|
||||
flex: 1,
|
||||
flexDirection: 'row',
|
||||
flexWrap: 'wrap',
|
||||
justifyContent: 'center',
|
||||
alignContent: 'stretch'
|
||||
}}
|
||||
>
|
||||
{status.media_attachments.map((attachment, index) => {
|
||||
switch (attachment.type) {
|
||||
case 'image':
|
||||
return (
|
||||
<AttachmentImage
|
||||
key={index}
|
||||
total={status.media_attachments.length}
|
||||
index={index}
|
||||
sensitiveShown={sensitiveShown}
|
||||
// @ts-ignore
|
||||
image={attachment}
|
||||
navigateToImagesViewer={navigateToImagesViewer}
|
||||
/>
|
||||
)
|
||||
} else {
|
||||
case 'video':
|
||||
return (
|
||||
<AttachmentUnsupported
|
||||
<AttachmentVideo
|
||||
key={index}
|
||||
total={status.media_attachments.length}
|
||||
index={index}
|
||||
sensitiveShown={sensitiveShown}
|
||||
attachment={attachment}
|
||||
video={attachment}
|
||||
/>
|
||||
)
|
||||
}
|
||||
}
|
||||
}),
|
||||
[sensitiveShown]
|
||||
)
|
||||
|
||||
return (
|
||||
<View>
|
||||
<View style={styles.container} children={attachments} />
|
||||
case 'gifv':
|
||||
return (
|
||||
<AttachmentVideo
|
||||
key={index}
|
||||
total={status.media_attachments.length}
|
||||
index={index}
|
||||
sensitiveShown={sensitiveShown}
|
||||
video={attachment}
|
||||
gifv
|
||||
/>
|
||||
)
|
||||
case 'audio':
|
||||
return (
|
||||
<AttachmentAudio
|
||||
key={index}
|
||||
total={status.media_attachments.length}
|
||||
index={index}
|
||||
sensitiveShown={sensitiveShown}
|
||||
audio={attachment}
|
||||
/>
|
||||
)
|
||||
default:
|
||||
if (
|
||||
attachment.preview_url?.endsWith('.jpg') ||
|
||||
attachment.preview_url?.endsWith('.jpeg') ||
|
||||
attachment.preview_url?.endsWith('.png') ||
|
||||
attachment.preview_url?.endsWith('.gif') ||
|
||||
attachment.remote_url?.endsWith('.jpg') ||
|
||||
attachment.remote_url?.endsWith('.jpeg') ||
|
||||
attachment.remote_url?.endsWith('.png') ||
|
||||
attachment.remote_url?.endsWith('.gif')
|
||||
) {
|
||||
imageUrls.current.push({
|
||||
id: attachment.id,
|
||||
preview_url: attachment.preview_url,
|
||||
url: attachment.url,
|
||||
remote_url: attachment.remote_url,
|
||||
blurhash: attachment.blurhash,
|
||||
width: attachment.meta?.original?.width,
|
||||
height: attachment.meta?.original?.height
|
||||
})
|
||||
return (
|
||||
<AttachmentImage
|
||||
key={index}
|
||||
total={status.media_attachments.length}
|
||||
index={index}
|
||||
sensitiveShown={sensitiveShown}
|
||||
// @ts-ignore
|
||||
image={attachment}
|
||||
navigateToImagesViewer={navigateToImagesViewer}
|
||||
/>
|
||||
)
|
||||
} else {
|
||||
return (
|
||||
<AttachmentUnsupported
|
||||
key={index}
|
||||
total={status.media_attachments.length}
|
||||
index={index}
|
||||
sensitiveShown={sensitiveShown}
|
||||
attachment={attachment}
|
||||
/>
|
||||
)
|
||||
}
|
||||
}
|
||||
})}
|
||||
</View>
|
||||
|
||||
{status.sensitive &&
|
||||
(sensitiveShown ? (
|
||||
<Pressable style={styles.sensitiveBlur}>
|
||||
<Pressable
|
||||
style={{
|
||||
position: 'absolute',
|
||||
width: '100%',
|
||||
height: '100%',
|
||||
flex: 1,
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center'
|
||||
}}
|
||||
>
|
||||
<Button
|
||||
type='text'
|
||||
content={t('shared.attachment.sensitive.button')}
|
||||
overlay
|
||||
onPress={onPressBlurView}
|
||||
onPress={() => {
|
||||
analytics('timeline_shared_attachment_blurview_press_show')
|
||||
layoutAnimation()
|
||||
setSensitiveShown(false)
|
||||
haptics('Light')
|
||||
}}
|
||||
/>
|
||||
</Pressable>
|
||||
) : (
|
||||
|
|
@ -174,7 +181,11 @@ const TimelineAttachment = React.memo(
|
|||
content='EyeOff'
|
||||
round
|
||||
overlay
|
||||
onPress={onPressShow}
|
||||
onPress={() => {
|
||||
analytics('timeline_shared_attachment_blurview_press_hide')
|
||||
setSensitiveShown(true)
|
||||
haptics('Light')
|
||||
}}
|
||||
style={{
|
||||
position: 'absolute',
|
||||
top: StyleConstants.Spacing.S * 2,
|
||||
|
|
@ -185,33 +196,28 @@ const TimelineAttachment = React.memo(
|
|||
</View>
|
||||
)
|
||||
},
|
||||
() => true
|
||||
(prev, next) => {
|
||||
let isEqual = true
|
||||
|
||||
if (
|
||||
prev.status.media_attachments.length !==
|
||||
next.status.media_attachments.length
|
||||
) {
|
||||
isEqual = false
|
||||
return isEqual
|
||||
}
|
||||
|
||||
prev.status.media_attachments.forEach((attachment, index) => {
|
||||
if (
|
||||
attachment.preview_url !==
|
||||
next.status.media_attachments[index].preview_url
|
||||
) {
|
||||
isEqual = false
|
||||
}
|
||||
})
|
||||
|
||||
return isEqual
|
||||
}
|
||||
)
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
container: {
|
||||
marginTop: StyleConstants.Spacing.S,
|
||||
flex: 1,
|
||||
flexDirection: 'row',
|
||||
flexWrap: 'wrap',
|
||||
justifyContent: 'center',
|
||||
alignContent: 'stretch'
|
||||
},
|
||||
sensitiveBlur: {
|
||||
position: 'absolute',
|
||||
width: '100%',
|
||||
height: '100%',
|
||||
flex: 1,
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center'
|
||||
},
|
||||
sensitiveBlurButton: {
|
||||
padding: StyleConstants.Spacing.S,
|
||||
borderRadius: 6
|
||||
},
|
||||
sensitiveText: {
|
||||
...StyleConstants.FontStyle.M
|
||||
}
|
||||
})
|
||||
|
||||
export default TimelineAttachment
|
||||
|
|
|
|||
|
|
@ -1,8 +1,8 @@
|
|||
import analytics from '@components/analytics'
|
||||
import GracefullyImage from '@components/GracefullyImage'
|
||||
import { StyleConstants } from '@utils/styles/constants'
|
||||
import React, { useCallback } from 'react'
|
||||
import { StyleSheet, View } from 'react-native'
|
||||
import React from 'react'
|
||||
import { View } from 'react-native'
|
||||
import attachmentAspectRatio from './aspectRatio'
|
||||
|
||||
export interface Props {
|
||||
|
|
@ -13,44 +13,43 @@ export interface Props {
|
|||
navigateToImagesViewer: (imageIndex: string) => void
|
||||
}
|
||||
|
||||
const AttachmentImage = React.memo(
|
||||
({ total, index, sensitiveShown, image, navigateToImagesViewer }: Props) => {
|
||||
const onPress = useCallback(() => {
|
||||
analytics('timeline_shared_attachment_image_press', { id: image.id })
|
||||
navigateToImagesViewer(image.id)
|
||||
}, [])
|
||||
|
||||
return (
|
||||
<View style={styles.base}>
|
||||
<GracefullyImage
|
||||
accessibilityLabel={image.description}
|
||||
hidden={sensitiveShown}
|
||||
uri={{ original: image.preview_url, remote: image.remote_url }}
|
||||
blurhash={image.blurhash}
|
||||
onPress={onPress}
|
||||
style={{
|
||||
aspectRatio:
|
||||
total > 1 ||
|
||||
!image.meta?.original?.width ||
|
||||
!image.meta?.original?.height
|
||||
? attachmentAspectRatio({ total, index })
|
||||
: image.meta.original.height / image.meta.original.width > 1
|
||||
? 1
|
||||
: image.meta.original.width / image.meta.original.height
|
||||
}}
|
||||
/>
|
||||
</View>
|
||||
)
|
||||
},
|
||||
(prev, next) => prev.sensitiveShown === next.sensitiveShown
|
||||
)
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
base: {
|
||||
flex: 1,
|
||||
flexBasis: '50%',
|
||||
padding: StyleConstants.Spacing.XS / 2
|
||||
}
|
||||
})
|
||||
const AttachmentImage = ({
|
||||
total,
|
||||
index,
|
||||
sensitiveShown,
|
||||
image,
|
||||
navigateToImagesViewer
|
||||
}: Props) => {
|
||||
return (
|
||||
<View
|
||||
style={{
|
||||
flex: 1,
|
||||
flexBasis: '50%',
|
||||
padding: StyleConstants.Spacing.XS / 2
|
||||
}}
|
||||
>
|
||||
<GracefullyImage
|
||||
accessibilityLabel={image.description}
|
||||
hidden={sensitiveShown}
|
||||
uri={{ original: image.preview_url, remote: image.remote_url }}
|
||||
blurhash={image.blurhash}
|
||||
onPress={() => {
|
||||
analytics('timeline_shared_attachment_image_press', { id: image.id })
|
||||
navigateToImagesViewer(image.id)
|
||||
}}
|
||||
style={{
|
||||
aspectRatio:
|
||||
total > 1 ||
|
||||
!image.meta?.original?.width ||
|
||||
!image.meta?.original?.height
|
||||
? attachmentAspectRatio({ total, index })
|
||||
: image.meta.original.height / image.meta.original.width > 1
|
||||
? 1
|
||||
: image.meta.original.width / image.meta.original.height
|
||||
}}
|
||||
/>
|
||||
</View>
|
||||
)
|
||||
}
|
||||
|
||||
export default AttachmentImage
|
||||
|
|
|
|||
|
|
@ -10,142 +10,116 @@ import { StyleConstants } from '@utils/styles/constants'
|
|||
import { useTheme } from '@utils/styles/ThemeManager'
|
||||
import React, { useCallback, useMemo } from 'react'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
import { Pressable, StyleSheet, Text, View } from 'react-native'
|
||||
import { Pressable, Text, View } from 'react-native'
|
||||
import { useQueryClient } from 'react-query'
|
||||
import HeaderSharedCreated from './HeaderShared/Created'
|
||||
import HeaderSharedMuted from './HeaderShared/Muted'
|
||||
|
||||
const Names = React.memo(
|
||||
({ accounts }: { accounts: Mastodon.Account[] }) => {
|
||||
const { t } = useTranslation('componentTimeline')
|
||||
const { colors } = useTheme()
|
||||
const Names = ({ accounts }: { accounts: Mastodon.Account[] }) => {
|
||||
const { t } = useTranslation('componentTimeline')
|
||||
const { colors } = useTheme()
|
||||
|
||||
return (
|
||||
<Text
|
||||
numberOfLines={1}
|
||||
style={[styles.namesLeading, { color: colors.secondary }]}
|
||||
>
|
||||
<Text>{t('shared.header.conversation.withAccounts')}</Text>
|
||||
{accounts.map((account, index) => (
|
||||
<Text key={account.id} numberOfLines={1}>
|
||||
{index !== 0 ? t('common:separator') : undefined}
|
||||
<ParseEmojis
|
||||
content={account.display_name || account.username}
|
||||
emojis={account.emojis}
|
||||
fontBold
|
||||
/>
|
||||
</Text>
|
||||
))}
|
||||
</Text>
|
||||
)
|
||||
},
|
||||
() => true
|
||||
)
|
||||
return (
|
||||
<Text
|
||||
numberOfLines={1}
|
||||
style={{ ...StyleConstants.FontStyle.M, color: colors.secondary }}
|
||||
>
|
||||
<Text>{t('shared.header.conversation.withAccounts')}</Text>
|
||||
{accounts.map((account, index) => (
|
||||
<Text key={account.id} numberOfLines={1}>
|
||||
{index !== 0 ? t('common:separator') : undefined}
|
||||
<ParseEmojis
|
||||
content={account.display_name || account.username}
|
||||
emojis={account.emojis}
|
||||
fontBold
|
||||
/>
|
||||
</Text>
|
||||
))}
|
||||
</Text>
|
||||
)
|
||||
}
|
||||
|
||||
export interface Props {
|
||||
queryKey: QueryKeyTimeline
|
||||
conversation: Mastodon.Conversation
|
||||
}
|
||||
|
||||
const HeaderConversation = React.memo(
|
||||
({ queryKey, conversation }: Props) => {
|
||||
const { colors, theme } = useTheme()
|
||||
const { t } = useTranslation('componentTimeline')
|
||||
const HeaderConversation = ({ queryKey, conversation }: Props) => {
|
||||
const { colors, theme } = useTheme()
|
||||
const { t } = useTranslation('componentTimeline')
|
||||
|
||||
const queryClient = useQueryClient()
|
||||
const mutation = useTimelineMutation({
|
||||
onMutate: true,
|
||||
onError: (err: any, _, oldData) => {
|
||||
displayMessage({
|
||||
theme,
|
||||
type: 'error',
|
||||
message: t('common:message.error.message', {
|
||||
function: t(`shared.header.conversation.delete.function`)
|
||||
}),
|
||||
...(err.status &&
|
||||
typeof err.status === 'number' &&
|
||||
err.data &&
|
||||
err.data.error &&
|
||||
typeof err.data.error === 'string' && {
|
||||
description: err.data.error
|
||||
})
|
||||
})
|
||||
queryClient.setQueryData(queryKey, oldData)
|
||||
}
|
||||
})
|
||||
|
||||
const actionOnPress = useCallback(() => {
|
||||
analytics('timeline_conversation_delete_press')
|
||||
mutation.mutate({
|
||||
type: 'deleteItem',
|
||||
source: 'conversations',
|
||||
queryKey,
|
||||
id: conversation.id
|
||||
const queryClient = useQueryClient()
|
||||
const mutation = useTimelineMutation({
|
||||
onMutate: true,
|
||||
onError: (err: any, _, oldData) => {
|
||||
displayMessage({
|
||||
theme,
|
||||
type: 'error',
|
||||
message: t('common:message.error.message', {
|
||||
function: t(`shared.header.conversation.delete.function`)
|
||||
}),
|
||||
...(err.status &&
|
||||
typeof err.status === 'number' &&
|
||||
err.data &&
|
||||
err.data.error &&
|
||||
typeof err.data.error === 'string' && {
|
||||
description: err.data.error
|
||||
})
|
||||
})
|
||||
}, [])
|
||||
queryClient.setQueryData(queryKey, oldData)
|
||||
}
|
||||
})
|
||||
|
||||
const actionChildren = useMemo(
|
||||
() => (
|
||||
<Icon
|
||||
name='Trash'
|
||||
color={colors.secondary}
|
||||
size={StyleConstants.Font.Size.L}
|
||||
/>
|
||||
),
|
||||
[]
|
||||
)
|
||||
const actionOnPress = useCallback(() => {
|
||||
analytics('timeline_conversation_delete_press')
|
||||
mutation.mutate({
|
||||
type: 'deleteItem',
|
||||
source: 'conversations',
|
||||
queryKey,
|
||||
id: conversation.id
|
||||
})
|
||||
}, [])
|
||||
|
||||
return (
|
||||
<View style={styles.base}>
|
||||
<View style={styles.nameAndMeta}>
|
||||
<Names accounts={conversation.accounts} />
|
||||
<View style={styles.meta}>
|
||||
{conversation.last_status?.created_at ? (
|
||||
<HeaderSharedCreated
|
||||
created_at={conversation.last_status?.created_at}
|
||||
edited_at={conversation.last_status?.edited_at}
|
||||
/>
|
||||
) : null}
|
||||
<HeaderSharedMuted muted={conversation.last_status?.muted} />
|
||||
</View>
|
||||
const actionChildren = useMemo(
|
||||
() => (
|
||||
<Icon
|
||||
name='Trash'
|
||||
color={colors.secondary}
|
||||
size={StyleConstants.Font.Size.L}
|
||||
/>
|
||||
),
|
||||
[]
|
||||
)
|
||||
|
||||
return (
|
||||
<View style={{ flex: 1, flexDirection: 'row' }}>
|
||||
<View style={{ flex: 3 }}>
|
||||
<Names accounts={conversation.accounts} />
|
||||
<View
|
||||
style={{
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
marginTop: StyleConstants.Spacing.XS,
|
||||
marginBottom: StyleConstants.Spacing.S
|
||||
}}
|
||||
>
|
||||
{conversation.last_status?.created_at ? (
|
||||
<HeaderSharedCreated
|
||||
created_at={conversation.last_status?.created_at}
|
||||
edited_at={conversation.last_status?.edited_at}
|
||||
/>
|
||||
) : null}
|
||||
<HeaderSharedMuted muted={conversation.last_status?.muted} />
|
||||
</View>
|
||||
|
||||
<Pressable
|
||||
style={styles.action}
|
||||
onPress={actionOnPress}
|
||||
children={actionChildren}
|
||||
/>
|
||||
</View>
|
||||
)
|
||||
},
|
||||
() => true
|
||||
)
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
base: {
|
||||
flex: 1,
|
||||
flexDirection: 'row'
|
||||
},
|
||||
nameAndMeta: {
|
||||
flex: 3
|
||||
},
|
||||
meta: {
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
marginTop: StyleConstants.Spacing.XS,
|
||||
marginBottom: StyleConstants.Spacing.S
|
||||
},
|
||||
created_at: {
|
||||
...StyleConstants.FontStyle.S
|
||||
},
|
||||
action: {
|
||||
flex: 1,
|
||||
flexDirection: 'row',
|
||||
justifyContent: 'center'
|
||||
},
|
||||
namesLeading: {
|
||||
...StyleConstants.FontStyle.M
|
||||
}
|
||||
})
|
||||
<Pressable
|
||||
style={{ flex: 1, flexDirection: 'row', justifyContent: 'center' }}
|
||||
onPress={actionOnPress}
|
||||
children={actionChildren}
|
||||
/>
|
||||
</View>
|
||||
)
|
||||
}
|
||||
|
||||
export default HeaderConversation
|
||||
|
|
|
|||
|
|
@ -7,7 +7,7 @@ import { StyleConstants } from '@utils/styles/constants'
|
|||
import { useTheme } from '@utils/styles/ThemeManager'
|
||||
import React from 'react'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
import { Pressable, StyleSheet, View } from 'react-native'
|
||||
import { Pressable, View } from 'react-native'
|
||||
import HeaderSharedAccount from './HeaderShared/Account'
|
||||
import HeaderSharedApplication from './HeaderShared/Application'
|
||||
import HeaderSharedCreated from './HeaderShared/Created'
|
||||
|
|
@ -20,77 +20,61 @@ export interface Props {
|
|||
status: Mastodon.Status
|
||||
}
|
||||
|
||||
const TimelineHeaderDefault = React.memo(
|
||||
({ queryKey, rootQueryKey, status }: Props) => {
|
||||
const { t } = useTranslation('componentTimeline')
|
||||
const navigation = useNavigation<StackNavigationProp<RootStackParamList>>()
|
||||
const { colors } = useTheme()
|
||||
const TimelineHeaderDefault = ({ queryKey, rootQueryKey, status }: Props) => {
|
||||
const { t } = useTranslation('componentTimeline')
|
||||
const navigation = useNavigation<StackNavigationProp<RootStackParamList>>()
|
||||
const { colors } = useTheme()
|
||||
|
||||
return (
|
||||
<View style={styles.base}>
|
||||
<View style={styles.accountAndMeta}>
|
||||
<HeaderSharedAccount account={status.account} />
|
||||
<View style={styles.meta}>
|
||||
<HeaderSharedCreated
|
||||
created_at={status.created_at}
|
||||
edited_at={status.edited_at}
|
||||
/>
|
||||
<HeaderSharedVisibility visibility={status.visibility} />
|
||||
<HeaderSharedMuted muted={status.muted} />
|
||||
<HeaderSharedApplication application={status.application} />
|
||||
</View>
|
||||
</View>
|
||||
|
||||
{queryKey ? (
|
||||
<Pressable
|
||||
accessibilityHint={t('shared.header.actions.accessibilityHint')}
|
||||
style={styles.action}
|
||||
onPress={() =>
|
||||
navigation.navigate('Screen-Actions', {
|
||||
queryKey,
|
||||
rootQueryKey,
|
||||
status,
|
||||
type: 'status'
|
||||
})
|
||||
}
|
||||
children={
|
||||
<Icon
|
||||
name='MoreHorizontal'
|
||||
color={colors.secondary}
|
||||
size={StyleConstants.Font.Size.L}
|
||||
/>
|
||||
}
|
||||
return (
|
||||
<View style={{ flex: 1, flexDirection: 'row' }}>
|
||||
<View style={{ flex: 5 }}>
|
||||
<HeaderSharedAccount account={status.account} />
|
||||
<View
|
||||
style={{
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
marginTop: StyleConstants.Spacing.XS,
|
||||
marginBottom: StyleConstants.Spacing.S
|
||||
}}
|
||||
>
|
||||
<HeaderSharedCreated
|
||||
created_at={status.created_at}
|
||||
edited_at={status.edited_at}
|
||||
/>
|
||||
) : null}
|
||||
<HeaderSharedVisibility visibility={status.visibility} />
|
||||
<HeaderSharedMuted muted={status.muted} />
|
||||
<HeaderSharedApplication application={status.application} />
|
||||
</View>
|
||||
</View>
|
||||
)
|
||||
},
|
||||
() => true
|
||||
)
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
base: {
|
||||
flex: 1,
|
||||
flexDirection: 'row'
|
||||
},
|
||||
accountAndMeta: {
|
||||
flex: 5
|
||||
},
|
||||
meta: {
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
marginTop: StyleConstants.Spacing.XS,
|
||||
marginBottom: StyleConstants.Spacing.S
|
||||
},
|
||||
created_at: {
|
||||
...StyleConstants.FontStyle.S
|
||||
},
|
||||
action: {
|
||||
flex: 1,
|
||||
flexDirection: 'row',
|
||||
justifyContent: 'center',
|
||||
paddingBottom: StyleConstants.Spacing.S
|
||||
}
|
||||
})
|
||||
{queryKey ? (
|
||||
<Pressable
|
||||
accessibilityHint={t('shared.header.actions.accessibilityHint')}
|
||||
style={{
|
||||
flex: 1,
|
||||
flexDirection: 'row',
|
||||
justifyContent: 'center',
|
||||
paddingBottom: StyleConstants.Spacing.S
|
||||
}}
|
||||
onPress={() =>
|
||||
navigation.navigate('Screen-Actions', {
|
||||
queryKey,
|
||||
rootQueryKey,
|
||||
status,
|
||||
type: 'status'
|
||||
})
|
||||
}
|
||||
children={
|
||||
<Icon
|
||||
name='MoreHorizontal'
|
||||
color={colors.secondary}
|
||||
size={StyleConstants.Font.Size.L}
|
||||
/>
|
||||
}
|
||||
/>
|
||||
) : null}
|
||||
</View>
|
||||
)
|
||||
}
|
||||
|
||||
export default TimelineHeaderDefault
|
||||
|
|
|
|||
|
|
@ -10,7 +10,7 @@ import { QueryKeyTimeline } from '@utils/queryHooks/timeline'
|
|||
import { StyleConstants } from '@utils/styles/constants'
|
||||
import { useTheme } from '@utils/styles/ThemeManager'
|
||||
import React, { useMemo } from 'react'
|
||||
import { Pressable, StyleSheet, View } from 'react-native'
|
||||
import { Pressable, View } from 'react-native'
|
||||
import HeaderSharedAccount from './HeaderShared/Account'
|
||||
import HeaderSharedApplication from './HeaderShared/Application'
|
||||
import HeaderSharedCreated from './HeaderShared/Created'
|
||||
|
|
@ -22,115 +22,103 @@ export interface Props {
|
|||
notification: Mastodon.Notification
|
||||
}
|
||||
|
||||
const TimelineHeaderNotification = React.memo(
|
||||
({ queryKey, notification }: Props) => {
|
||||
const navigation = useNavigation<StackNavigationProp<RootStackParamList>>()
|
||||
const { colors } = useTheme()
|
||||
const TimelineHeaderNotification = ({ queryKey, notification }: Props) => {
|
||||
const navigation = useNavigation<StackNavigationProp<RootStackParamList>>()
|
||||
const { colors } = useTheme()
|
||||
|
||||
const actions = useMemo(() => {
|
||||
switch (notification.type) {
|
||||
case 'follow':
|
||||
return <RelationshipOutgoing id={notification.account.id} />
|
||||
case 'follow_request':
|
||||
return <RelationshipIncoming id={notification.account.id} />
|
||||
default:
|
||||
if (notification.status) {
|
||||
return (
|
||||
<Pressable
|
||||
style={{
|
||||
flex: 1,
|
||||
flexDirection: 'row',
|
||||
justifyContent: 'center',
|
||||
paddingBottom: StyleConstants.Spacing.S
|
||||
}}
|
||||
onPress={() =>
|
||||
navigation.navigate('Screen-Actions', {
|
||||
queryKey,
|
||||
status: notification.status!,
|
||||
type: 'status'
|
||||
})
|
||||
}
|
||||
children={
|
||||
<Icon
|
||||
name='MoreHorizontal'
|
||||
color={colors.secondary}
|
||||
size={StyleConstants.Font.Size.L}
|
||||
/>
|
||||
}
|
||||
/>
|
||||
)
|
||||
}
|
||||
}
|
||||
}, [notification.type])
|
||||
|
||||
return (
|
||||
<View style={styles.base}>
|
||||
<View
|
||||
style={{
|
||||
flex:
|
||||
notification.type === 'follow' ||
|
||||
notification.type === 'follow_request'
|
||||
? 1
|
||||
: 4
|
||||
}}
|
||||
>
|
||||
<HeaderSharedAccount
|
||||
account={
|
||||
notification.status
|
||||
? notification.status.account
|
||||
: notification.account
|
||||
}
|
||||
{...((notification.type === 'follow' ||
|
||||
notification.type === 'follow_request') && { withoutName: true })}
|
||||
/>
|
||||
<View style={styles.meta}>
|
||||
<HeaderSharedCreated
|
||||
created_at={notification.created_at}
|
||||
edited_at={notification.status?.edited_at}
|
||||
const actions = useMemo(() => {
|
||||
switch (notification.type) {
|
||||
case 'follow':
|
||||
return <RelationshipOutgoing id={notification.account.id} />
|
||||
case 'follow_request':
|
||||
return <RelationshipIncoming id={notification.account.id} />
|
||||
default:
|
||||
if (notification.status) {
|
||||
return (
|
||||
<Pressable
|
||||
style={{
|
||||
flex: 1,
|
||||
flexDirection: 'row',
|
||||
justifyContent: 'center',
|
||||
paddingBottom: StyleConstants.Spacing.S
|
||||
}}
|
||||
onPress={() =>
|
||||
navigation.navigate('Screen-Actions', {
|
||||
queryKey,
|
||||
status: notification.status!,
|
||||
type: 'status'
|
||||
})
|
||||
}
|
||||
children={
|
||||
<Icon
|
||||
name='MoreHorizontal'
|
||||
color={colors.secondary}
|
||||
size={StyleConstants.Font.Size.L}
|
||||
/>
|
||||
}
|
||||
/>
|
||||
{notification.status?.visibility ? (
|
||||
<HeaderSharedVisibility
|
||||
visibility={notification.status.visibility}
|
||||
/>
|
||||
) : null}
|
||||
<HeaderSharedMuted muted={notification.status?.muted} />
|
||||
<HeaderSharedApplication
|
||||
application={notification.status?.application}
|
||||
/>
|
||||
</View>
|
||||
</View>
|
||||
)
|
||||
}
|
||||
}
|
||||
}, [notification.type])
|
||||
|
||||
<View
|
||||
style={[
|
||||
styles.relationship,
|
||||
return (
|
||||
<View style={{ flex: 1, flexDirection: 'row' }}>
|
||||
<View
|
||||
style={{
|
||||
flex:
|
||||
notification.type === 'follow' ||
|
||||
notification.type === 'follow_request'
|
||||
? { flexShrink: 1 }
|
||||
: { flex: 1 }
|
||||
]}
|
||||
? 1
|
||||
: 4
|
||||
}}
|
||||
>
|
||||
<HeaderSharedAccount
|
||||
account={
|
||||
notification.status
|
||||
? notification.status.account
|
||||
: notification.account
|
||||
}
|
||||
{...((notification.type === 'follow' ||
|
||||
notification.type === 'follow_request') && { withoutName: true })}
|
||||
/>
|
||||
<View
|
||||
style={{
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
marginTop: StyleConstants.Spacing.XS,
|
||||
marginBottom: StyleConstants.Spacing.S
|
||||
}}
|
||||
>
|
||||
{actions}
|
||||
<HeaderSharedCreated
|
||||
created_at={notification.created_at}
|
||||
edited_at={notification.status?.edited_at}
|
||||
/>
|
||||
{notification.status?.visibility ? (
|
||||
<HeaderSharedVisibility
|
||||
visibility={notification.status.visibility}
|
||||
/>
|
||||
) : null}
|
||||
<HeaderSharedMuted muted={notification.status?.muted} />
|
||||
<HeaderSharedApplication
|
||||
application={notification.status?.application}
|
||||
/>
|
||||
</View>
|
||||
</View>
|
||||
)
|
||||
},
|
||||
() => true
|
||||
)
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
base: {
|
||||
flex: 1,
|
||||
flexDirection: 'row'
|
||||
},
|
||||
meta: {
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
marginTop: StyleConstants.Spacing.XS,
|
||||
marginBottom: StyleConstants.Spacing.S
|
||||
},
|
||||
relationship: {
|
||||
marginLeft: StyleConstants.Spacing.M
|
||||
}
|
||||
})
|
||||
<View
|
||||
style={[
|
||||
{ marginLeft: StyleConstants.Spacing.M },
|
||||
notification.type === 'follow' ||
|
||||
notification.type === 'follow_request'
|
||||
? { flexShrink: 1 }
|
||||
: { flex: 1 }
|
||||
]}
|
||||
>
|
||||
{actions}
|
||||
</View>
|
||||
</View>
|
||||
)
|
||||
}
|
||||
|
||||
export default TimelineHeaderNotification
|
||||
|
|
|
|||
|
|
@ -35,191 +35,189 @@ import ActionsNotificationsFilter from './Actions/NotificationsFilter'
|
|||
import ActionsShare from './Actions/Share'
|
||||
import ActionsStatus from './Actions/Status'
|
||||
|
||||
const ScreenActions = React.memo(
|
||||
({
|
||||
route: { params },
|
||||
navigation
|
||||
}: RootStackScreenProps<'Screen-Actions'>) => {
|
||||
const { t } = useTranslation()
|
||||
const ScreenActions = ({
|
||||
route: { params },
|
||||
navigation
|
||||
}: RootStackScreenProps<'Screen-Actions'>) => {
|
||||
const { t } = useTranslation()
|
||||
|
||||
const instanceAccount = useSelector(
|
||||
getInstanceAccount,
|
||||
(prev, next) => prev?.id === next?.id
|
||||
)
|
||||
let sameAccount = false
|
||||
const instanceAccount = useSelector(
|
||||
getInstanceAccount,
|
||||
(prev, next) => prev?.id === next?.id
|
||||
)
|
||||
let sameAccount = false
|
||||
switch (params.type) {
|
||||
case 'status':
|
||||
console.log('media length', params.status.media_attachments.length)
|
||||
sameAccount = instanceAccount?.id === params.status.account.id
|
||||
break
|
||||
case 'account':
|
||||
sameAccount = instanceAccount?.id === params.account.id
|
||||
break
|
||||
}
|
||||
|
||||
const instanceDomain = useSelector(getInstanceUrl)
|
||||
let sameDomain = true
|
||||
let statusDomain: string
|
||||
switch (params.type) {
|
||||
case 'status':
|
||||
statusDomain = params.status.uri
|
||||
? params.status.uri.split(new RegExp(/\/\/(.*?)\//))[1]
|
||||
: ''
|
||||
sameDomain = instanceDomain === statusDomain
|
||||
break
|
||||
}
|
||||
|
||||
const { colors } = useTheme()
|
||||
const insets = useSafeAreaInsets()
|
||||
|
||||
const DEFAULT_VALUE = 350
|
||||
const screenHeight = Dimensions.get('screen').height
|
||||
const panY = useSharedValue(DEFAULT_VALUE)
|
||||
useEffect(() => {
|
||||
panY.value = withTiming(0)
|
||||
}, [])
|
||||
const styleTop = useAnimatedStyle(() => {
|
||||
return {
|
||||
bottom: interpolate(
|
||||
panY.value,
|
||||
[0, screenHeight],
|
||||
[0, -screenHeight],
|
||||
Extrapolate.CLAMP
|
||||
)
|
||||
}
|
||||
})
|
||||
const dismiss = useCallback(() => {
|
||||
navigation.goBack()
|
||||
}, [])
|
||||
const onGestureEvent = useAnimatedGestureHandler({
|
||||
onActive: ({ translationY }) => {
|
||||
panY.value = translationY
|
||||
},
|
||||
onEnd: ({ velocityY }) => {
|
||||
if (velocityY > 500) {
|
||||
runOnJS(dismiss)()
|
||||
} else {
|
||||
panY.value = withTiming(0)
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
const actions = () => {
|
||||
switch (params.type) {
|
||||
case 'status':
|
||||
sameAccount = instanceAccount?.id === params.status.account.id
|
||||
break
|
||||
case 'account':
|
||||
sameAccount = instanceAccount?.id === params.account.id
|
||||
break
|
||||
}
|
||||
|
||||
const instanceDomain = useSelector(getInstanceUrl)
|
||||
let sameDomain = true
|
||||
let statusDomain: string
|
||||
switch (params.type) {
|
||||
case 'status':
|
||||
statusDomain = params.status.uri
|
||||
? params.status.uri.split(new RegExp(/\/\/(.*?)\//))[1]
|
||||
: ''
|
||||
sameDomain = instanceDomain === statusDomain
|
||||
break
|
||||
}
|
||||
|
||||
const { colors } = useTheme()
|
||||
const insets = useSafeAreaInsets()
|
||||
|
||||
const DEFAULT_VALUE = 350
|
||||
const screenHeight = Dimensions.get('screen').height
|
||||
const panY = useSharedValue(DEFAULT_VALUE)
|
||||
useEffect(() => {
|
||||
panY.value = withTiming(0)
|
||||
}, [])
|
||||
const styleTop = useAnimatedStyle(() => {
|
||||
return {
|
||||
bottom: interpolate(
|
||||
panY.value,
|
||||
[0, screenHeight],
|
||||
[0, -screenHeight],
|
||||
Extrapolate.CLAMP
|
||||
)
|
||||
}
|
||||
})
|
||||
const dismiss = useCallback(() => {
|
||||
navigation.goBack()
|
||||
}, [])
|
||||
const onGestureEvent = useAnimatedGestureHandler({
|
||||
onActive: ({ translationY }) => {
|
||||
panY.value = translationY
|
||||
},
|
||||
onEnd: ({ velocityY }) => {
|
||||
if (velocityY > 500) {
|
||||
runOnJS(dismiss)()
|
||||
} else {
|
||||
panY.value = withTiming(0)
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
const actions = useMemo(() => {
|
||||
switch (params.type) {
|
||||
case 'status':
|
||||
return (
|
||||
<>
|
||||
{!sameAccount ? (
|
||||
<ActionsAccount
|
||||
queryKey={params.queryKey}
|
||||
rootQueryKey={params.rootQueryKey}
|
||||
account={params.status.account}
|
||||
dismiss={dismiss}
|
||||
/>
|
||||
) : null}
|
||||
{sameAccount && params.status ? (
|
||||
<ActionsStatus
|
||||
navigation={navigation}
|
||||
queryKey={params.queryKey}
|
||||
rootQueryKey={params.rootQueryKey}
|
||||
status={params.status}
|
||||
dismiss={dismiss}
|
||||
/>
|
||||
) : null}
|
||||
{!sameDomain && statusDomain ? (
|
||||
<ActionsDomain
|
||||
queryKey={params.queryKey}
|
||||
rootQueryKey={params.rootQueryKey}
|
||||
domain={statusDomain}
|
||||
dismiss={dismiss}
|
||||
/>
|
||||
) : null}
|
||||
{params.status.visibility !== 'direct' ? (
|
||||
<ActionsShare
|
||||
url={params.status.url || params.status.uri}
|
||||
type={params.type}
|
||||
dismiss={dismiss}
|
||||
/>
|
||||
) : null}
|
||||
<Button
|
||||
type='text'
|
||||
content={t('common:buttons.cancel')}
|
||||
onPress={() => {
|
||||
analytics('bottomsheet_acknowledge')
|
||||
}}
|
||||
style={styles.button}
|
||||
return (
|
||||
<>
|
||||
{!sameAccount ? (
|
||||
<ActionsAccount
|
||||
queryKey={params.queryKey}
|
||||
rootQueryKey={params.rootQueryKey}
|
||||
account={params.status.account}
|
||||
dismiss={dismiss}
|
||||
/>
|
||||
</>
|
||||
)
|
||||
case 'account':
|
||||
return (
|
||||
<>
|
||||
{!sameAccount ? (
|
||||
<ActionsAccount account={params.account} dismiss={dismiss} />
|
||||
) : null}
|
||||
) : null}
|
||||
{sameAccount && params.status ? (
|
||||
<ActionsStatus
|
||||
navigation={navigation}
|
||||
queryKey={params.queryKey}
|
||||
rootQueryKey={params.rootQueryKey}
|
||||
status={params.status}
|
||||
dismiss={dismiss}
|
||||
/>
|
||||
) : null}
|
||||
{!sameDomain && statusDomain ? (
|
||||
<ActionsDomain
|
||||
queryKey={params.queryKey}
|
||||
rootQueryKey={params.rootQueryKey}
|
||||
domain={statusDomain}
|
||||
dismiss={dismiss}
|
||||
/>
|
||||
) : null}
|
||||
{params.status.visibility !== 'direct' ? (
|
||||
<ActionsShare
|
||||
url={params.account.url}
|
||||
url={params.status.url || params.status.uri}
|
||||
type={params.type}
|
||||
dismiss={dismiss}
|
||||
/>
|
||||
<Button
|
||||
type='text'
|
||||
content={t('common:buttons.cancel')}
|
||||
onPress={() => {
|
||||
analytics('bottomsheet_acknowledge')
|
||||
}}
|
||||
style={styles.button}
|
||||
/>
|
||||
</>
|
||||
)
|
||||
case 'notifications_filter':
|
||||
return <ActionsNotificationsFilter />
|
||||
}
|
||||
}, [])
|
||||
) : null}
|
||||
<Button
|
||||
type='text'
|
||||
content={t('common:buttons.cancel')}
|
||||
onPress={() => {
|
||||
analytics('bottomsheet_acknowledge')
|
||||
}}
|
||||
style={styles.button}
|
||||
/>
|
||||
</>
|
||||
)
|
||||
case 'account':
|
||||
return (
|
||||
<>
|
||||
{!sameAccount ? (
|
||||
<ActionsAccount account={params.account} dismiss={dismiss} />
|
||||
) : null}
|
||||
<ActionsShare
|
||||
url={params.account.url}
|
||||
type={params.type}
|
||||
dismiss={dismiss}
|
||||
/>
|
||||
<Button
|
||||
type='text'
|
||||
content={t('common:buttons.cancel')}
|
||||
onPress={() => {
|
||||
analytics('bottomsheet_acknowledge')
|
||||
}}
|
||||
style={styles.button}
|
||||
/>
|
||||
</>
|
||||
)
|
||||
case 'notifications_filter':
|
||||
return <ActionsNotificationsFilter />
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<SafeAreaProvider>
|
||||
<Animated.View style={{ flex: 1 }}>
|
||||
<TapGestureHandler
|
||||
onHandlerStateChange={({ nativeEvent }) => {
|
||||
if (nativeEvent.state === State.ACTIVE) {
|
||||
dismiss()
|
||||
}
|
||||
}}
|
||||
return (
|
||||
<SafeAreaProvider>
|
||||
<Animated.View style={{ flex: 1 }}>
|
||||
<TapGestureHandler
|
||||
onHandlerStateChange={({ nativeEvent }) => {
|
||||
if (nativeEvent.state === State.ACTIVE) {
|
||||
dismiss()
|
||||
}
|
||||
}}
|
||||
>
|
||||
<Animated.View
|
||||
style={[
|
||||
styles.overlay,
|
||||
{ backgroundColor: colors.backgroundOverlayInvert }
|
||||
]}
|
||||
>
|
||||
<Animated.View
|
||||
style={[
|
||||
styles.overlay,
|
||||
{ backgroundColor: colors.backgroundOverlayInvert }
|
||||
]}
|
||||
>
|
||||
<PanGestureHandler onGestureEvent={onGestureEvent}>
|
||||
<Animated.View
|
||||
<PanGestureHandler onGestureEvent={onGestureEvent}>
|
||||
<Animated.View
|
||||
style={[
|
||||
styles.container,
|
||||
styleTop,
|
||||
{
|
||||
backgroundColor: colors.backgroundDefault,
|
||||
paddingBottom: insets.bottom || StyleConstants.Spacing.L
|
||||
}
|
||||
]}
|
||||
>
|
||||
<View
|
||||
style={[
|
||||
styles.container,
|
||||
styleTop,
|
||||
{
|
||||
backgroundColor: colors.backgroundDefault,
|
||||
paddingBottom: insets.bottom || StyleConstants.Spacing.L
|
||||
}
|
||||
styles.handle,
|
||||
{ backgroundColor: colors.primaryOverlay }
|
||||
]}
|
||||
>
|
||||
<View
|
||||
style={[
|
||||
styles.handle,
|
||||
{ backgroundColor: colors.primaryOverlay }
|
||||
]}
|
||||
/>
|
||||
{actions}
|
||||
</Animated.View>
|
||||
</PanGestureHandler>
|
||||
</Animated.View>
|
||||
</TapGestureHandler>
|
||||
</Animated.View>
|
||||
</SafeAreaProvider>
|
||||
)
|
||||
},
|
||||
() => true
|
||||
)
|
||||
/>
|
||||
{actions()}
|
||||
</Animated.View>
|
||||
</PanGestureHandler>
|
||||
</Animated.View>
|
||||
</TapGestureHandler>
|
||||
</Animated.View>
|
||||
</SafeAreaProvider>
|
||||
)
|
||||
}
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
overlay: {
|
||||
|
|
|
|||
|
|
@ -305,7 +305,6 @@ const ScreenCompose: React.FC<RootStackScreenProps<'Screen-Compose'>> = ({
|
|||
|
||||
switch (params?.type) {
|
||||
case 'edit':
|
||||
console.log('firing mutation')
|
||||
mutateTimeline.mutate({
|
||||
type: 'editItem',
|
||||
queryKey: params.queryKey,
|
||||
|
|
|
|||
|
|
@ -7,15 +7,12 @@ const editItem = ({
|
|||
rootQueryKey,
|
||||
status
|
||||
}: MutationVarsTimelineEditItem) => {
|
||||
console.log('START')
|
||||
queryKey &&
|
||||
queryClient.setQueryData<InfiniteData<any> | undefined>(queryKey, old => {
|
||||
if (old) {
|
||||
old.pages = old.pages.map(page => {
|
||||
page.body = page.body.map((item: Mastodon.Status) => {
|
||||
if (item.id === status.id) {
|
||||
console.log('found queryKey', queryKey)
|
||||
console.log('new content', status.content)
|
||||
item = status
|
||||
}
|
||||
return item
|
||||
|
|
@ -34,8 +31,6 @@ const editItem = ({
|
|||
old.pages = old.pages.map(page => {
|
||||
page.body = page.body.map((item: Mastodon.Status) => {
|
||||
if (item.id === status.id) {
|
||||
console.log('found rootQueryKey', queryKey)
|
||||
console.log('new content', status.content)
|
||||
item = status
|
||||
}
|
||||
return item
|
||||
|
|
@ -46,7 +41,6 @@ const editItem = ({
|
|||
}
|
||||
}
|
||||
)
|
||||
console.log('EDN')
|
||||
}
|
||||
|
||||
export default editItem
|
||||
|
|
|
|||
Loading…
Reference in New Issue