2021-08-29 15:25:38 +02:00
|
|
|
import analytics from '@components/analytics'
|
|
|
|
import Button from '@components/Button'
|
|
|
|
import { RootStackScreenProps } from '@utils/navigation/navigators'
|
|
|
|
import {
|
|
|
|
getInstanceAccount,
|
|
|
|
getInstanceUrl
|
|
|
|
} from '@utils/slices/instancesSlice'
|
|
|
|
import { StyleConstants } from '@utils/styles/constants'
|
|
|
|
import { useTheme } from '@utils/styles/ThemeManager'
|
|
|
|
import React, { useCallback, useEffect, useMemo } from 'react'
|
|
|
|
import { useTranslation } from 'react-i18next'
|
|
|
|
import { Dimensions, StyleSheet, View } from 'react-native'
|
|
|
|
import {
|
|
|
|
PanGestureHandler,
|
|
|
|
State,
|
|
|
|
TapGestureHandler
|
|
|
|
} from 'react-native-gesture-handler'
|
|
|
|
import Animated, {
|
|
|
|
Extrapolate,
|
|
|
|
interpolate,
|
|
|
|
runOnJS,
|
|
|
|
useAnimatedGestureHandler,
|
|
|
|
useAnimatedStyle,
|
|
|
|
useSharedValue,
|
|
|
|
withTiming
|
|
|
|
} from 'react-native-reanimated'
|
|
|
|
import {
|
|
|
|
SafeAreaProvider,
|
|
|
|
useSafeAreaInsets
|
|
|
|
} from 'react-native-safe-area-context'
|
|
|
|
import { useSelector } from 'react-redux'
|
|
|
|
import ActionsAccount from './Actions/Account'
|
|
|
|
import ActionsDomain from './Actions/Domain'
|
|
|
|
import ActionsNotificationsFilter from './Actions/NotificationsFilter'
|
|
|
|
import ActionsShare from './Actions/Share'
|
|
|
|
import ActionsStatus from './Actions/Status'
|
2021-01-30 01:29:15 +01:00
|
|
|
|
2022-04-30 21:29:08 +02:00
|
|
|
const ScreenActions = ({
|
|
|
|
route: { params },
|
|
|
|
navigation
|
|
|
|
}: RootStackScreenProps<'Screen-Actions'>) => {
|
|
|
|
const { t } = useTranslation()
|
2021-08-29 15:25:38 +02:00
|
|
|
|
2022-04-30 21:29:08 +02:00
|
|
|
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
|
|
|
|
}
|
2021-08-29 15:25:38 +02:00
|
|
|
|
2022-04-30 21:29:08 +02:00
|
|
|
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
|
|
|
|
}
|
2021-08-29 15:25:38 +02:00
|
|
|
|
2022-04-30 21:29:08 +02:00
|
|
|
const { colors } = useTheme()
|
|
|
|
const insets = useSafeAreaInsets()
|
2021-08-29 15:25:38 +02:00
|
|
|
|
2022-04-30 21:29:08 +02:00
|
|
|
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)
|
2021-08-29 15:25:38 +02:00
|
|
|
}
|
2022-04-30 21:29:08 +02:00
|
|
|
}
|
|
|
|
})
|
2021-08-29 15:25:38 +02:00
|
|
|
|
2022-04-30 21:29:08 +02:00
|
|
|
const actions = () => {
|
|
|
|
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}
|
2021-08-29 15:25:38 +02:00
|
|
|
/>
|
2022-04-30 21:29:08 +02:00
|
|
|
) : null}
|
|
|
|
{params.status.visibility !== 'direct' ? (
|
2021-08-29 15:25:38 +02:00
|
|
|
<ActionsShare
|
2022-04-30 21:29:08 +02:00
|
|
|
url={params.status.url || params.status.uri}
|
2021-08-29 15:25:38 +02:00
|
|
|
type={params.type}
|
|
|
|
dismiss={dismiss}
|
|
|
|
/>
|
2022-04-30 21:29:08 +02:00
|
|
|
) : 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 />
|
|
|
|
}
|
|
|
|
}
|
2021-08-29 15:25:38 +02:00
|
|
|
|
2022-04-30 21:29:08 +02:00
|
|
|
return (
|
|
|
|
<SafeAreaProvider>
|
|
|
|
<Animated.View style={{ flex: 1 }}>
|
|
|
|
<TapGestureHandler
|
|
|
|
onHandlerStateChange={({ nativeEvent }) => {
|
|
|
|
if (nativeEvent.state === State.ACTIVE) {
|
|
|
|
dismiss()
|
|
|
|
}
|
|
|
|
}}
|
|
|
|
>
|
|
|
|
<Animated.View
|
|
|
|
style={[
|
|
|
|
styles.overlay,
|
|
|
|
{ backgroundColor: colors.backgroundOverlayInvert }
|
|
|
|
]}
|
2021-08-29 15:25:38 +02:00
|
|
|
>
|
2022-04-30 21:29:08 +02:00
|
|
|
<PanGestureHandler onGestureEvent={onGestureEvent}>
|
|
|
|
<Animated.View
|
|
|
|
style={[
|
|
|
|
styles.container,
|
|
|
|
styleTop,
|
|
|
|
{
|
|
|
|
backgroundColor: colors.backgroundDefault,
|
|
|
|
paddingBottom: insets.bottom || StyleConstants.Spacing.L
|
|
|
|
}
|
|
|
|
]}
|
|
|
|
>
|
|
|
|
<View
|
2021-08-29 15:25:38 +02:00
|
|
|
style={[
|
2022-04-30 21:29:08 +02:00
|
|
|
styles.handle,
|
|
|
|
{ backgroundColor: colors.primaryOverlay }
|
2021-08-29 15:25:38 +02:00
|
|
|
]}
|
2022-04-30 21:29:08 +02:00
|
|
|
/>
|
|
|
|
{actions()}
|
|
|
|
</Animated.View>
|
|
|
|
</PanGestureHandler>
|
|
|
|
</Animated.View>
|
|
|
|
</TapGestureHandler>
|
|
|
|
</Animated.View>
|
|
|
|
</SafeAreaProvider>
|
|
|
|
)
|
|
|
|
}
|
2021-01-30 01:29:15 +01:00
|
|
|
|
2021-08-29 15:25:38 +02:00
|
|
|
const styles = StyleSheet.create({
|
|
|
|
overlay: {
|
|
|
|
flex: 1,
|
|
|
|
justifyContent: 'flex-end'
|
|
|
|
},
|
|
|
|
container: {
|
|
|
|
paddingTop: StyleConstants.Spacing.M
|
|
|
|
},
|
|
|
|
handle: {
|
|
|
|
alignSelf: 'center',
|
|
|
|
width: StyleConstants.Spacing.S * 8,
|
|
|
|
height: StyleConstants.Spacing.S / 2,
|
|
|
|
borderRadius: 100,
|
|
|
|
top: -StyleConstants.Spacing.M * 2
|
|
|
|
},
|
|
|
|
button: {
|
|
|
|
marginHorizontal: StyleConstants.Spacing.Global.PagePadding * 2
|
|
|
|
}
|
|
|
|
})
|
|
|
|
|
2021-01-30 01:29:15 +01:00
|
|
|
export default ScreenActions
|