mirror of
https://github.com/tooot-app/app
synced 2025-06-05 22:19:13 +02:00
New context menu largely working
This commit is contained in:
Zhiyuan Zheng
@ -18,6 +18,7 @@ import { uniqBy } from 'lodash'
|
||||
import React, { useCallback } from 'react'
|
||||
import { Pressable, View } from 'react-native'
|
||||
import { useSelector } from 'react-redux'
|
||||
import TimelineContextMenu from './Shared/ContextMenu'
|
||||
import TimelineFeedback from './Shared/Feedback'
|
||||
import TimelineFiltered, { shouldFilter } from './Shared/Filtered'
|
||||
import TimelineFullConversation from './Shared/FullConversation'
|
||||
@ -73,96 +74,108 @@ const TimelineDefault: React.FC<Props> = ({
|
||||
}, [])
|
||||
|
||||
return (
|
||||
<Pressable
|
||||
accessible={highlighted ? false : true}
|
||||
style={{
|
||||
padding: StyleConstants.Spacing.Global.PagePadding,
|
||||
backgroundColor: colors.backgroundDefault,
|
||||
paddingBottom:
|
||||
disableDetails && disableOnPress
|
||||
? StyleConstants.Spacing.Global.PagePadding
|
||||
: 0
|
||||
}}
|
||||
onPress={onPress}
|
||||
<TimelineContextMenu
|
||||
status={actualStatus}
|
||||
queryKey={queryKey}
|
||||
rootQueryKey={rootQueryKey}
|
||||
>
|
||||
{item.reblog ? (
|
||||
<TimelineActioned action='reblog' account={item.account} />
|
||||
) : item._pinned ? (
|
||||
<TimelineActioned action='pinned' account={item.account} />
|
||||
) : null}
|
||||
|
||||
<View style={{ flex: 1, width: '100%', flexDirection: 'row' }}>
|
||||
<TimelineAvatar
|
||||
queryKey={disableOnPress ? undefined : queryKey}
|
||||
account={actualStatus.account}
|
||||
highlighted={highlighted}
|
||||
/>
|
||||
<TimelineHeaderDefault
|
||||
queryKey={disableOnPress ? undefined : queryKey}
|
||||
rootQueryKey={disableOnPress ? undefined : rootQueryKey}
|
||||
status={actualStatus}
|
||||
highlighted={highlighted}
|
||||
/>
|
||||
</View>
|
||||
|
||||
<View
|
||||
<Pressable
|
||||
accessible={highlighted ? false : true}
|
||||
style={{
|
||||
paddingTop: highlighted ? StyleConstants.Spacing.S : 0,
|
||||
paddingLeft: highlighted
|
||||
? 0
|
||||
: StyleConstants.Avatar.M + StyleConstants.Spacing.S
|
||||
padding: StyleConstants.Spacing.Global.PagePadding,
|
||||
backgroundColor: colors.backgroundDefault,
|
||||
paddingBottom:
|
||||
disableDetails && disableOnPress
|
||||
? StyleConstants.Spacing.Global.PagePadding
|
||||
: 0
|
||||
}}
|
||||
onPress={onPress}
|
||||
onLongPress={() => {}}
|
||||
>
|
||||
{typeof actualStatus.content === 'string' &&
|
||||
actualStatus.content.length > 0 ? (
|
||||
<TimelineContent
|
||||
{item.reblog ? (
|
||||
<TimelineActioned action='reblog' account={item.account} />
|
||||
) : item._pinned ? (
|
||||
<TimelineActioned action='pinned' account={item.account} />
|
||||
) : null}
|
||||
|
||||
<View style={{ flex: 1, width: '100%', flexDirection: 'row' }}>
|
||||
<TimelineAvatar
|
||||
queryKey={disableOnPress ? undefined : queryKey}
|
||||
account={actualStatus.account}
|
||||
highlighted={highlighted}
|
||||
/>
|
||||
<TimelineHeaderDefault
|
||||
queryKey={disableOnPress ? undefined : queryKey}
|
||||
status={actualStatus}
|
||||
highlighted={highlighted}
|
||||
disableDetails={disableDetails}
|
||||
/>
|
||||
) : null}
|
||||
{queryKey && actualStatus.poll ? (
|
||||
<TimelinePoll
|
||||
</View>
|
||||
|
||||
<View
|
||||
style={{
|
||||
paddingTop: highlighted ? StyleConstants.Spacing.S : 0,
|
||||
paddingLeft: highlighted
|
||||
? 0
|
||||
: StyleConstants.Avatar.M + StyleConstants.Spacing.S
|
||||
}}
|
||||
>
|
||||
{typeof actualStatus.content === 'string' &&
|
||||
actualStatus.content.length > 0 ? (
|
||||
<TimelineContent
|
||||
status={actualStatus}
|
||||
highlighted={highlighted}
|
||||
disableDetails={disableDetails}
|
||||
/>
|
||||
) : null}
|
||||
{queryKey && actualStatus.poll ? (
|
||||
<TimelinePoll
|
||||
queryKey={queryKey}
|
||||
rootQueryKey={rootQueryKey}
|
||||
statusId={actualStatus.id}
|
||||
poll={actualStatus.poll}
|
||||
reblog={item.reblog ? true : false}
|
||||
sameAccount={ownAccount}
|
||||
/>
|
||||
) : null}
|
||||
{!disableDetails &&
|
||||
Array.isArray(actualStatus.media_attachments) &&
|
||||
actualStatus.media_attachments.length ? (
|
||||
<TimelineAttachment status={actualStatus} />
|
||||
) : null}
|
||||
{!disableDetails && actualStatus.card ? (
|
||||
<TimelineCard card={actualStatus.card} />
|
||||
) : null}
|
||||
{!disableDetails ? (
|
||||
<TimelineFullConversation
|
||||
queryKey={queryKey}
|
||||
status={actualStatus}
|
||||
/>
|
||||
) : null}
|
||||
<TimelineTranslate status={actualStatus} highlighted={highlighted} />
|
||||
<TimelineFeedback status={actualStatus} highlighted={highlighted} />
|
||||
</View>
|
||||
|
||||
{queryKey && !disableDetails ? (
|
||||
<TimelineActions
|
||||
queryKey={queryKey}
|
||||
rootQueryKey={rootQueryKey}
|
||||
statusId={actualStatus.id}
|
||||
poll={actualStatus.poll}
|
||||
highlighted={highlighted}
|
||||
status={actualStatus}
|
||||
ownAccount={ownAccount}
|
||||
accts={uniqBy(
|
||||
(
|
||||
[actualStatus.account] as Mastodon.Account[] &
|
||||
Mastodon.Mention[]
|
||||
)
|
||||
.concat(actualStatus.mentions)
|
||||
.filter(d => d?.id !== instanceAccount?.id),
|
||||
d => d?.id
|
||||
).map(d => d?.acct)}
|
||||
reblog={item.reblog ? true : false}
|
||||
sameAccount={ownAccount}
|
||||
/>
|
||||
) : null}
|
||||
{!disableDetails &&
|
||||
Array.isArray(actualStatus.media_attachments) &&
|
||||
actualStatus.media_attachments.length ? (
|
||||
<TimelineAttachment status={actualStatus} />
|
||||
) : null}
|
||||
{!disableDetails && actualStatus.card ? (
|
||||
<TimelineCard card={actualStatus.card} />
|
||||
) : null}
|
||||
{!disableDetails ? (
|
||||
<TimelineFullConversation queryKey={queryKey} status={actualStatus} />
|
||||
) : null}
|
||||
<TimelineTranslate status={actualStatus} highlighted={highlighted} />
|
||||
<TimelineFeedback status={actualStatus} highlighted={highlighted} />
|
||||
</View>
|
||||
|
||||
{queryKey && !disableDetails ? (
|
||||
<TimelineActions
|
||||
queryKey={queryKey}
|
||||
rootQueryKey={rootQueryKey}
|
||||
highlighted={highlighted}
|
||||
status={actualStatus}
|
||||
ownAccount={ownAccount}
|
||||
accts={uniqBy(
|
||||
([actualStatus.account] as Mastodon.Account[] & Mastodon.Mention[])
|
||||
.concat(actualStatus.mentions)
|
||||
.filter(d => d?.id !== instanceAccount?.id),
|
||||
d => d?.id
|
||||
).map(d => d?.acct)}
|
||||
reblog={item.reblog ? true : false}
|
||||
/>
|
||||
) : null}
|
||||
</Pressable>
|
||||
</Pressable>
|
||||
</TimelineContextMenu>
|
||||
)
|
||||
}
|
||||
|
||||
|
||||
65
src/components/Timeline/Shared/ContextMenu.tsx
Normal file
65
src/components/Timeline/Shared/ContextMenu.tsx
Normal file
@ -0,0 +1,65 @@
|
||||
import { QueryKeyTimeline } from '@utils/queryHooks/timeline'
|
||||
import { createContext } from 'react'
|
||||
import ContextMenu, { ContextMenuAction } from 'react-native-context-menu-view'
|
||||
import contextMenuAccount from './ContextMenu/account'
|
||||
import contextMenuInstance from './ContextMenu/instance'
|
||||
import contextMenuShare from './ContextMenu/share'
|
||||
import contextMenuStatus from './ContextMenu/status'
|
||||
|
||||
export interface Props {
|
||||
status: Mastodon.Status
|
||||
queryKey?: QueryKeyTimeline
|
||||
rootQueryKey?: QueryKeyTimeline
|
||||
}
|
||||
|
||||
export const ContextMenuContext = createContext<ContextMenuAction[]>([])
|
||||
|
||||
const TimelineContextMenu: React.FC<Props> = ({
|
||||
children,
|
||||
status,
|
||||
queryKey,
|
||||
rootQueryKey
|
||||
}) => {
|
||||
if (!queryKey) {
|
||||
return <>{children}</>
|
||||
}
|
||||
|
||||
const menuItems: ContextMenuAction[] = []
|
||||
|
||||
const shareOnPress = contextMenuShare({ menuItems, status })
|
||||
const statusOnPress = contextMenuStatus({
|
||||
menuItems,
|
||||
status,
|
||||
queryKey,
|
||||
rootQueryKey
|
||||
})
|
||||
const accountOnPress = contextMenuAccount({
|
||||
menuItems,
|
||||
status,
|
||||
queryKey,
|
||||
rootQueryKey
|
||||
})
|
||||
const instanceOnPress = contextMenuInstance({
|
||||
menuItems,
|
||||
status,
|
||||
queryKey,
|
||||
rootQueryKey
|
||||
})
|
||||
|
||||
return (
|
||||
<ContextMenuContext.Provider value={menuItems}>
|
||||
<ContextMenu
|
||||
actions={menuItems}
|
||||
onPress={({ nativeEvent: { id } }) => {
|
||||
shareOnPress(id)
|
||||
statusOnPress(id)
|
||||
accountOnPress(id)
|
||||
instanceOnPress(id)
|
||||
}}
|
||||
children={children}
|
||||
/>
|
||||
</ContextMenuContext.Provider>
|
||||
)
|
||||
}
|
||||
|
||||
export default TimelineContextMenu
|
||||
165
src/components/Timeline/Shared/ContextMenu/account.ts
Normal file
165
src/components/Timeline/Shared/ContextMenu/account.ts
Normal file
@ -0,0 +1,165 @@
|
||||
import analytics from '@components/analytics'
|
||||
import { displayMessage } from '@components/Message'
|
||||
import {
|
||||
MutationVarsTimelineUpdateAccountProperty,
|
||||
QueryKeyTimeline,
|
||||
useTimelineMutation
|
||||
} from '@utils/queryHooks/timeline'
|
||||
import { getInstanceAccount } from '@utils/slices/instancesSlice'
|
||||
import { useTheme } from '@utils/styles/ThemeManager'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
import { Platform } from 'react-native'
|
||||
import { ContextMenuAction } from 'react-native-context-menu-view'
|
||||
import { useQueryClient } from 'react-query'
|
||||
import { useSelector } from 'react-redux'
|
||||
|
||||
export interface Props {
|
||||
menuItems: ContextMenuAction[]
|
||||
status: Mastodon.Status
|
||||
queryKey: QueryKeyTimeline
|
||||
rootQueryKey?: QueryKeyTimeline
|
||||
}
|
||||
|
||||
const contextMenuAccount = ({
|
||||
menuItems,
|
||||
status,
|
||||
queryKey,
|
||||
rootQueryKey
|
||||
}: Props) => {
|
||||
const { theme } = useTheme()
|
||||
const { t } = useTranslation('componentContextMenu')
|
||||
|
||||
const queryClient = useQueryClient()
|
||||
const mutateion = useTimelineMutation({
|
||||
onSuccess: (_, params) => {
|
||||
const theParams = params as MutationVarsTimelineUpdateAccountProperty
|
||||
displayMessage({
|
||||
theme,
|
||||
type: 'success',
|
||||
message: t('common:message.success.message', {
|
||||
function: t(`account.${theParams.payload.property}.action`)
|
||||
})
|
||||
})
|
||||
},
|
||||
onError: (err: any, params) => {
|
||||
const theParams = params as MutationVarsTimelineUpdateAccountProperty
|
||||
displayMessage({
|
||||
theme,
|
||||
type: 'error',
|
||||
message: t('common:message.error.message', {
|
||||
function: t(`account.${theParams.payload.property}.action`)
|
||||
}),
|
||||
...(err.status &&
|
||||
typeof err.status === 'number' &&
|
||||
err.data &&
|
||||
err.data.error &&
|
||||
typeof err.data.error === 'string' && {
|
||||
description: err.data.error
|
||||
})
|
||||
})
|
||||
},
|
||||
onSettled: () => {
|
||||
queryKey && queryClient.invalidateQueries(queryKey)
|
||||
rootQueryKey && queryClient.invalidateQueries(rootQueryKey)
|
||||
}
|
||||
})
|
||||
|
||||
const instanceAccount = useSelector(
|
||||
getInstanceAccount,
|
||||
(prev, next) => prev.id === next.id
|
||||
)
|
||||
const ownAccount = instanceAccount?.id === status.account.id
|
||||
|
||||
if (!ownAccount) {
|
||||
switch (Platform.OS) {
|
||||
case 'ios':
|
||||
menuItems.push({
|
||||
id: 'account',
|
||||
title: t('account.title'),
|
||||
inlineChildren: true,
|
||||
actions: [
|
||||
{
|
||||
id: 'account-mute',
|
||||
title: t('account.mute.action'),
|
||||
systemIcon: 'eye.slash'
|
||||
},
|
||||
{
|
||||
id: 'account-block',
|
||||
title: t('account.block.action'),
|
||||
systemIcon: 'xmark.circle',
|
||||
destructive: true
|
||||
},
|
||||
{
|
||||
id: 'account-reports',
|
||||
title: t('account.reports.action'),
|
||||
systemIcon: 'flag',
|
||||
destructive: true
|
||||
}
|
||||
]
|
||||
})
|
||||
break
|
||||
default:
|
||||
menuItems.push(
|
||||
{
|
||||
id: 'account-mute',
|
||||
title: t('account.mute.action'),
|
||||
systemIcon: 'eye.slash'
|
||||
},
|
||||
{
|
||||
id: 'account-block',
|
||||
title: t('account.block.action'),
|
||||
systemIcon: 'xmark.circle',
|
||||
destructive: true
|
||||
},
|
||||
{
|
||||
id: 'account-reports',
|
||||
title: t('account.reports.action'),
|
||||
systemIcon: 'flag',
|
||||
destructive: true
|
||||
}
|
||||
)
|
||||
break
|
||||
}
|
||||
}
|
||||
|
||||
return (id: string) => {
|
||||
const url = status.url || status.uri
|
||||
switch (id) {
|
||||
case 'account-mute':
|
||||
analytics('timeline_shared_headeractions_account_mute_press', {
|
||||
page: queryKey && queryKey[1].page
|
||||
})
|
||||
mutateion.mutate({
|
||||
type: 'updateAccountProperty',
|
||||
queryKey,
|
||||
id: status.account.id,
|
||||
payload: { property: 'mute' }
|
||||
})
|
||||
break
|
||||
case 'account-block':
|
||||
analytics('timeline_shared_headeractions_account_block_press', {
|
||||
page: queryKey && queryKey[1].page
|
||||
})
|
||||
mutateion.mutate({
|
||||
type: 'updateAccountProperty',
|
||||
queryKey,
|
||||
id: status.account.id,
|
||||
payload: { property: 'block' }
|
||||
})
|
||||
break
|
||||
case 'account-report':
|
||||
analytics('timeline_shared_headeractions_account_reports_press', {
|
||||
page: queryKey && queryKey[1].page
|
||||
})
|
||||
mutateion.mutate({
|
||||
type: 'updateAccountProperty',
|
||||
queryKey,
|
||||
id: status.account.id,
|
||||
payload: { property: 'reports' }
|
||||
})
|
||||
break
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
export default contextMenuAccount
|
||||
108
src/components/Timeline/Shared/ContextMenu/instance.ts
Normal file
108
src/components/Timeline/Shared/ContextMenu/instance.ts
Normal file
@ -0,0 +1,108 @@
|
||||
import analytics from '@components/analytics'
|
||||
import { displayMessage } from '@components/Message'
|
||||
import {
|
||||
QueryKeyTimeline,
|
||||
useTimelineMutation
|
||||
} from '@utils/queryHooks/timeline'
|
||||
import { getInstanceUrl } from '@utils/slices/instancesSlice'
|
||||
import { useTheme } from '@utils/styles/ThemeManager'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
import { Alert, Platform } from 'react-native'
|
||||
import { ContextMenuAction } from 'react-native-context-menu-view'
|
||||
import { useQueryClient } from 'react-query'
|
||||
import { useSelector } from 'react-redux'
|
||||
|
||||
export interface Props {
|
||||
menuItems: ContextMenuAction[]
|
||||
status: Mastodon.Status
|
||||
queryKey: QueryKeyTimeline
|
||||
rootQueryKey?: QueryKeyTimeline
|
||||
}
|
||||
|
||||
const contextMenuInstance = ({
|
||||
menuItems,
|
||||
status,
|
||||
queryKey,
|
||||
rootQueryKey
|
||||
}: Props) => {
|
||||
const { t } = useTranslation('componentContextMenu')
|
||||
const { theme } = useTheme()
|
||||
|
||||
const currentInstance = useSelector(getInstanceUrl)
|
||||
const instance = status.uri && status.uri.split(new RegExp(/\/\/(.*?)\//))[1]
|
||||
|
||||
const queryClient = useQueryClient()
|
||||
const mutation = useTimelineMutation({
|
||||
onSettled: () => {
|
||||
displayMessage({
|
||||
theme,
|
||||
type: 'success',
|
||||
message: t('common:message.success.message', {
|
||||
function: t(`instance.block.action`, { instance })
|
||||
})
|
||||
})
|
||||
queryClient.invalidateQueries(queryKey)
|
||||
rootQueryKey && queryClient.invalidateQueries(rootQueryKey)
|
||||
}
|
||||
})
|
||||
|
||||
if (currentInstance !== instance && instance) {
|
||||
switch (Platform.OS) {
|
||||
case 'ios':
|
||||
menuItems.push({
|
||||
id: 'instance',
|
||||
title: t('instance.title'),
|
||||
actions: [
|
||||
{
|
||||
id: 'instance-block',
|
||||
title: t('instance.block.action', { instance }),
|
||||
destructive: true
|
||||
}
|
||||
]
|
||||
})
|
||||
break
|
||||
default:
|
||||
menuItems.push({
|
||||
id: 'instance-block',
|
||||
title: t('instance.block.action', { instance }),
|
||||
destructive: true
|
||||
})
|
||||
break
|
||||
}
|
||||
}
|
||||
|
||||
return (id: string) => {
|
||||
switch (id) {
|
||||
case 'instance-block':
|
||||
analytics('timeline_shared_headeractions_domain_block_press', {
|
||||
page: queryKey[1].page
|
||||
})
|
||||
Alert.alert(
|
||||
t('instance.block.alert.title', { instance }),
|
||||
t('instance.block.alert.message'),
|
||||
[
|
||||
{
|
||||
text: t('instance.block.alert.buttons.confirm'),
|
||||
style: 'destructive',
|
||||
onPress: () => {
|
||||
analytics(
|
||||
'timeline_shared_headeractions_domain_block_confirm',
|
||||
{ page: queryKey && queryKey[1].page }
|
||||
)
|
||||
mutation.mutate({
|
||||
type: 'domainBlock',
|
||||
queryKey,
|
||||
domain: instance
|
||||
})
|
||||
}
|
||||
},
|
||||
{
|
||||
text: t('common:buttons.cancel')
|
||||
}
|
||||
]
|
||||
)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
export default contextMenuInstance
|
||||
40
src/components/Timeline/Shared/ContextMenu/share.ts
Normal file
40
src/components/Timeline/Shared/ContextMenu/share.ts
Normal file
@ -0,0 +1,40 @@
|
||||
import analytics from '@components/analytics'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
import { Platform, Share } from 'react-native'
|
||||
import { ContextMenuAction } from 'react-native-context-menu-view'
|
||||
|
||||
export interface Props {
|
||||
menuItems: ContextMenuAction[]
|
||||
status: Mastodon.Status
|
||||
}
|
||||
|
||||
const contextMenuShare = ({ menuItems, status }: Props) => {
|
||||
const { t } = useTranslation('componentContextMenu')
|
||||
|
||||
if (status.visibility !== 'direct') {
|
||||
menuItems.push({
|
||||
id: 'share',
|
||||
title: t(`share.status.action`),
|
||||
systemIcon: 'square.and.arrow.up'
|
||||
})
|
||||
}
|
||||
|
||||
return (id: string) => {
|
||||
const url = status.url || status.uri
|
||||
switch (id) {
|
||||
case 'share':
|
||||
analytics('timeline_shared_headeractions_share_press')
|
||||
switch (Platform.OS) {
|
||||
case 'ios':
|
||||
Share.share({ url })
|
||||
break
|
||||
case 'android':
|
||||
Share.share({ message: url })
|
||||
break
|
||||
}
|
||||
break
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
export default contextMenuShare
|
||||
286
src/components/Timeline/Shared/ContextMenu/status.ts
Normal file
286
src/components/Timeline/Shared/ContextMenu/status.ts
Normal file
@ -0,0 +1,286 @@
|
||||
import apiInstance from '@api/instance'
|
||||
import analytics from '@components/analytics'
|
||||
import { displayMessage } from '@components/Message'
|
||||
import { useNavigation } from '@react-navigation/native'
|
||||
import { NativeStackNavigationProp } from '@react-navigation/native-stack'
|
||||
import { RootStackParamList } from '@utils/navigation/navigators'
|
||||
import {
|
||||
MutationVarsTimelineUpdateStatusProperty,
|
||||
QueryKeyTimeline,
|
||||
useTimelineMutation
|
||||
} from '@utils/queryHooks/timeline'
|
||||
import {
|
||||
checkInstanceFeature,
|
||||
getInstanceAccount
|
||||
} from '@utils/slices/instancesSlice'
|
||||
import { useTheme } from '@utils/styles/ThemeManager'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
import { Alert, Platform } from 'react-native'
|
||||
import { ContextMenuAction } from 'react-native-context-menu-view'
|
||||
import { useQueryClient } from 'react-query'
|
||||
import { useSelector } from 'react-redux'
|
||||
|
||||
export interface Props {
|
||||
menuItems: ContextMenuAction[]
|
||||
status: Mastodon.Status
|
||||
queryKey: QueryKeyTimeline
|
||||
rootQueryKey?: QueryKeyTimeline
|
||||
}
|
||||
|
||||
const contextMenuStatus = ({
|
||||
menuItems,
|
||||
status,
|
||||
queryKey,
|
||||
rootQueryKey
|
||||
}: Props) => {
|
||||
const navigation =
|
||||
useNavigation<
|
||||
NativeStackNavigationProp<RootStackParamList, 'Screen-Tabs'>
|
||||
>()
|
||||
const { theme } = useTheme()
|
||||
const { t } = useTranslation('componentContextMenu')
|
||||
|
||||
const queryClient = useQueryClient()
|
||||
const mutation = useTimelineMutation({
|
||||
onMutate: true,
|
||||
onError: (err: any, params, oldData) => {
|
||||
const theFunction = (params as MutationVarsTimelineUpdateStatusProperty)
|
||||
.payload
|
||||
? (params as MutationVarsTimelineUpdateStatusProperty).payload.property
|
||||
: 'delete'
|
||||
displayMessage({
|
||||
theme,
|
||||
type: 'error',
|
||||
message: t('common:message.error.message', {
|
||||
function: t(`status.${theFunction}.action`)
|
||||
}),
|
||||
...(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 instanceAccount = useSelector(
|
||||
getInstanceAccount,
|
||||
(prev, next) => prev.id === next.id
|
||||
)
|
||||
const ownAccount = instanceAccount?.id === status.account.id
|
||||
|
||||
if (ownAccount) {
|
||||
const accountMenuItems: ContextMenuAction[] = [
|
||||
{
|
||||
id: 'status-delete',
|
||||
title: t('status.delete.action'),
|
||||
systemIcon: 'trash',
|
||||
destructive: true
|
||||
},
|
||||
{
|
||||
id: 'status-delete-edit',
|
||||
title: t('status.deleteEdit.action'),
|
||||
systemIcon: 'pencil.and.outline',
|
||||
destructive: true
|
||||
},
|
||||
{
|
||||
id: 'status-mute',
|
||||
title: t('status.mute.action-muted', {
|
||||
context: status.muted.toString()
|
||||
}),
|
||||
systemIcon: status.muted ? 'speaker' : 'speaker.slash'
|
||||
}
|
||||
]
|
||||
|
||||
const canEditPost = useSelector(checkInstanceFeature('edit_post'))
|
||||
if (canEditPost) {
|
||||
accountMenuItems.unshift({
|
||||
id: 'status-edit',
|
||||
title: t('status.edit.action'),
|
||||
systemIcon: 'square.and.pencil'
|
||||
})
|
||||
}
|
||||
|
||||
if (status.visibility === 'public' || status.visibility === 'unlisted') {
|
||||
accountMenuItems.push({
|
||||
id: 'status-pin',
|
||||
title: t('status.pin.action-pinned', {
|
||||
context: status.pinned.toString()
|
||||
}),
|
||||
systemIcon: status.pinned ? 'pin.slash' : 'pin'
|
||||
})
|
||||
}
|
||||
|
||||
switch (Platform.OS) {
|
||||
case 'ios':
|
||||
menuItems.push({
|
||||
id: 'status',
|
||||
title: t('status.title'),
|
||||
inlineChildren: true,
|
||||
actions: accountMenuItems
|
||||
})
|
||||
break
|
||||
default:
|
||||
menuItems.push(...accountMenuItems)
|
||||
break
|
||||
}
|
||||
}
|
||||
|
||||
return async (id: string) => {
|
||||
switch (id) {
|
||||
case 'status-delete':
|
||||
analytics('timeline_shared_headeractions_status_delete_press', {
|
||||
page: queryKey && queryKey[1].page
|
||||
})
|
||||
Alert.alert(
|
||||
t('status.delete.alert.title'),
|
||||
t('status.delete.alert.message'),
|
||||
[
|
||||
{
|
||||
text: t('status.delete.alert.buttons.confirm'),
|
||||
style: 'destructive',
|
||||
onPress: async () => {
|
||||
analytics(
|
||||
'timeline_shared_headeractions_status_delete_confirm',
|
||||
{
|
||||
page: queryKey && queryKey[1].page
|
||||
}
|
||||
)
|
||||
mutation.mutate({
|
||||
type: 'deleteItem',
|
||||
source: 'statuses',
|
||||
queryKey,
|
||||
rootQueryKey,
|
||||
id: status.id
|
||||
})
|
||||
}
|
||||
},
|
||||
{
|
||||
text: t('common:buttons.cancel')
|
||||
}
|
||||
]
|
||||
)
|
||||
break
|
||||
case 'status-delete-edit':
|
||||
analytics('timeline_shared_headeractions_status_deleteedit_press', {
|
||||
page: queryKey && queryKey[1].page
|
||||
})
|
||||
Alert.alert(
|
||||
t('status.deleteEdit.alert.title'),
|
||||
t('status.deleteEdit.alert.message'),
|
||||
[
|
||||
{
|
||||
text: t('status.deleteEdit.alert.buttons.confirm'),
|
||||
style: 'destructive',
|
||||
onPress: async () => {
|
||||
analytics(
|
||||
'timeline_shared_headeractions_status_deleteedit_confirm',
|
||||
{
|
||||
page: queryKey && queryKey[1].page
|
||||
}
|
||||
)
|
||||
let replyToStatus: Mastodon.Status | undefined = undefined
|
||||
if (status.in_reply_to_id) {
|
||||
replyToStatus = await apiInstance<Mastodon.Status>({
|
||||
method: 'get',
|
||||
url: `statuses/${status.in_reply_to_id}`
|
||||
}).then(res => res.body)
|
||||
}
|
||||
mutation
|
||||
.mutateAsync({
|
||||
type: 'deleteItem',
|
||||
source: 'statuses',
|
||||
queryKey,
|
||||
id: status.id
|
||||
})
|
||||
.then(res => {
|
||||
navigation.navigate('Screen-Compose', {
|
||||
type: 'deleteEdit',
|
||||
incomingStatus: res.body as Mastodon.Status,
|
||||
...(replyToStatus && { replyToStatus }),
|
||||
queryKey
|
||||
})
|
||||
})
|
||||
}
|
||||
},
|
||||
{
|
||||
text: t('common:buttons.cancel')
|
||||
}
|
||||
]
|
||||
)
|
||||
break
|
||||
case 'status-mute':
|
||||
analytics('timeline_shared_headeractions_status_mute_press', {
|
||||
page: queryKey && queryKey[1].page
|
||||
})
|
||||
mutation.mutate({
|
||||
type: 'updateStatusProperty',
|
||||
queryKey,
|
||||
rootQueryKey,
|
||||
id: status.id,
|
||||
payload: {
|
||||
property: 'muted',
|
||||
currentValue: status.muted,
|
||||
propertyCount: undefined,
|
||||
countValue: undefined
|
||||
}
|
||||
})
|
||||
break
|
||||
case 'status-edit':
|
||||
analytics('timeline_shared_headeractions_status_edit_press', {
|
||||
page: queryKey && queryKey[1].page
|
||||
})
|
||||
let replyToStatus: Mastodon.Status | undefined = undefined
|
||||
if (status.in_reply_to_id) {
|
||||
replyToStatus = await apiInstance<Mastodon.Status>({
|
||||
method: 'get',
|
||||
url: `statuses/${status.in_reply_to_id}`
|
||||
}).then(res => res.body)
|
||||
}
|
||||
apiInstance<{
|
||||
id: Mastodon.Status['id']
|
||||
text: NonNullable<Mastodon.Status['text']>
|
||||
spoiler_text: Mastodon.Status['spoiler_text']
|
||||
}>({
|
||||
method: 'get',
|
||||
url: `statuses/${status.id}/source`
|
||||
}).then(res => {
|
||||
navigation.navigate('Screen-Compose', {
|
||||
type: 'edit',
|
||||
incomingStatus: {
|
||||
...status,
|
||||
text: res.body.text,
|
||||
spoiler_text: res.body.spoiler_text
|
||||
},
|
||||
...(replyToStatus && { replyToStatus }),
|
||||
queryKey,
|
||||
rootQueryKey
|
||||
})
|
||||
})
|
||||
break
|
||||
case 'status-pin':
|
||||
// Also note that reblogs cannot be pinned.
|
||||
analytics('timeline_shared_headeractions_status_pin_press', {
|
||||
page: queryKey && queryKey[1].page
|
||||
})
|
||||
mutation.mutate({
|
||||
type: 'updateStatusProperty',
|
||||
queryKey,
|
||||
rootQueryKey,
|
||||
id: status.id,
|
||||
payload: {
|
||||
property: 'pinned',
|
||||
currentValue: status.pinned,
|
||||
propertyCount: undefined,
|
||||
countValue: undefined
|
||||
}
|
||||
})
|
||||
break
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
export default contextMenuStatus
|
||||
@ -1,13 +1,13 @@
|
||||
import Icon from '@components/Icon'
|
||||
import { useNavigation } from '@react-navigation/native'
|
||||
import { StackNavigationProp } from '@react-navigation/stack'
|
||||
import { RootStackParamList } from '@utils/navigation/navigators'
|
||||
import { QueryKeyTimeline } from '@utils/queryHooks/timeline'
|
||||
import { StyleConstants } from '@utils/styles/constants'
|
||||
import { useTheme } from '@utils/styles/ThemeManager'
|
||||
import React from 'react'
|
||||
import React, { useContext, useRef } from 'react'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
import { Pressable, View } from 'react-native'
|
||||
import ContextMenu from 'react-native-context-menu-view'
|
||||
import { TouchableWithoutFeedback } from 'react-native-gesture-handler'
|
||||
import { ContextMenuContext } from './ContextMenu'
|
||||
import HeaderSharedAccount from './HeaderShared/Account'
|
||||
import HeaderSharedApplication from './HeaderShared/Application'
|
||||
import HeaderSharedCreated from './HeaderShared/Created'
|
||||
@ -16,24 +16,19 @@ import HeaderSharedVisibility from './HeaderShared/Visibility'
|
||||
|
||||
export interface Props {
|
||||
queryKey?: QueryKeyTimeline
|
||||
rootQueryKey?: QueryKeyTimeline
|
||||
status: Mastodon.Status
|
||||
highlighted: boolean
|
||||
}
|
||||
|
||||
const TimelineHeaderDefault = ({
|
||||
queryKey,
|
||||
rootQueryKey,
|
||||
status,
|
||||
highlighted
|
||||
}: Props) => {
|
||||
const { t } = useTranslation('componentTimeline')
|
||||
const navigation = useNavigation<StackNavigationProp<RootStackParamList>>()
|
||||
const TimelineHeaderDefault = ({ queryKey, status, highlighted }: Props) => {
|
||||
const { t } = useTranslation('componentContextMenu')
|
||||
const { colors } = useTheme()
|
||||
|
||||
const contextMenuItems = useContext(ContextMenuContext)
|
||||
|
||||
return (
|
||||
<View style={{ flex: 1, flexDirection: 'row' }}>
|
||||
<View style={{ flex: 5 }}>
|
||||
<View style={{ flex: 7 }}>
|
||||
<HeaderSharedAccount account={status.account} />
|
||||
<View
|
||||
style={{
|
||||
@ -56,29 +51,34 @@ const TimelineHeaderDefault = ({
|
||||
|
||||
{queryKey ? (
|
||||
<Pressable
|
||||
accessibilityHint={t('shared.header.actions.accessibilityHint')}
|
||||
accessibilityHint={t('accessibilityHint')}
|
||||
style={{
|
||||
flex: 1,
|
||||
flexDirection: 'row',
|
||||
justifyContent: 'center',
|
||||
paddingBottom: StyleConstants.Spacing.S
|
||||
marginBottom: StyleConstants.Spacing.L
|
||||
}}
|
||||
onPress={() =>
|
||||
navigation.navigate('Screen-Actions', {
|
||||
queryKey,
|
||||
rootQueryKey,
|
||||
status,
|
||||
type: 'status'
|
||||
})
|
||||
}
|
||||
children={
|
||||
<Icon
|
||||
name='MoreHorizontal'
|
||||
color={colors.secondary}
|
||||
size={StyleConstants.Font.Size.L}
|
||||
/>
|
||||
}
|
||||
/>
|
||||
>
|
||||
<ContextMenu
|
||||
dropdownMenuMode={true}
|
||||
actions={contextMenuItems}
|
||||
// onPress={({ nativeEvent: { index, name } }) => {
|
||||
// console.log('index', index)
|
||||
// console.log('name', name)
|
||||
// // shareOnPress(name)
|
||||
// // statusOnPress(name)
|
||||
// accountOnPress(name)
|
||||
// // instanceOnPress(name)
|
||||
// }}
|
||||
children={
|
||||
<Icon
|
||||
name='MoreHorizontal'
|
||||
color={colors.secondary}
|
||||
size={StyleConstants.Font.Size.L}
|
||||
/>
|
||||
}
|
||||
/>
|
||||
</Pressable>
|
||||
) : null}
|
||||
</View>
|
||||
)
|
||||
|
||||
Reference in New Issue
Block a user