octo/tooot
1
0
Fork 0
mirror of https://github.com/tooot-app/app synced 2025-06-05 22:19:13 +02:00
Code Issues Projects Releases Wiki Activity

iOS almost working

Browse Source
This commit is contained in:
Zhiyuan Zheng
2021-01-30 01:29:15 +01:00
parent 9c36052c2a
commit 247f7a7982
126 changed files with 1829 additions and 1341 deletions
Download Patch File Download Diff File Expand all files Collapse all files

116
src/@types/react-navigation.d.ts vendored
View File

@ -1,19 +1,22 @@
interface IImageInfo {
url: string
width?: number
height?: number
originUrl?: string
props?: any
}
declare namespace Nav {
type RootStackParamList = {
'Screen-Local': undefined
'Screen-Public': undefined
'Screen-Post': undefined
'Screen-Notifications': undefined
'Screen-Me': undefined
}
type SharedStackParamList = {
'Screen-Shared-Account': {
account: Mastodon.Account | Mastodon.Mention
'Screen-Tabs': undefined
'Screen-Actions': {
queryKey: QueryKeyTimeline
status: Mastodon.Status
url?: string
type?: 'status' | 'account'
}
'Screen-Shared-Announcements': { showAll?: boolean }
'Screen-Shared-Attachments': { account: Mastodon.Account }
'Screen-Shared-Compose':
'Screen-Announcements': { showAll: boolean }
'Screen-Compose':
| {
type: 'edit'
incomingStatus: Mastodon.Status
@ -48,54 +51,71 @@ declare namespace Nav {
accts: Mastodon.Account['acct'][]
}
| undefined
'Screen-Shared-Hashtag': {
hashtag: Mastodon.Tag['name']
}
'Screen-Shared-ImagesViewer': {
imageUrls: ({
url: string
width?: number
height?: number
originUrl?: string
props?: any
} & {
'Screen-ImagesViewer': {
imageUrls: (IImageInfo & {
preview_url: Mastodon.AttachmentImage['preview_url']
remote_url: Mastodon.AttachmentImage['remote_url']
remote_url?: Mastodon.AttachmentImage['remote_url']
imageIndex: number
})[]
imageIndex: number
}
'Screen-Shared-Relationships': {
}
type ScreenTabsStackParamList = {
'Tab-Local': undefined
'Tab-Public': undefined
'Tab-Compose': undefined
'Tab-Notifications': undefined
'Tab-Me': undefined
}
type TabSharedStackParamList = {
'Tab-Shared-Account': {
account: Mastodon.Account | Mastodon.Mention
}
'Tab-Shared-Attachments': { account: Mastodon.Account }
'Tab-Shared-Hashtag': {
hashtag: Mastodon.Tag['name']
}
'Tab-Shared-Relationships': {
account: Mastodon.Account
initialType: 'following' | 'followers'
}
'Screen-Shared-Search': undefined
'Screen-Shared-Toot': {
'Tab-Shared-Search': undefined
'Tab-Shared-Toot': {
toot: Mastodon.Status
}
}
type LocalStackParamList = {
'Screen-Local-Root': undefined
} & SharedStackParamList
type TabLocalStackParamList = {
'Tab-Local-Root': undefined
} & TabSharedStackParamList
type RemoteStackParamList = {
'Screen-Remote-Root': undefined
} & SharedStackParamList
type TabPublicStackParamList = {
'Tab-Public-Root': undefined
} & TabSharedStackParamList
type NotificationsStackParamList = {
'Screen-Notifications-Root': undefined
} & SharedStackParamList
type TabComposeStackParamList = {
'Tab-Compose-Root': undefined
'Tab-Compose-EditAttachment': unknown
}
type MeStackParamList = {
'Screen-Me-Root': { navigateAway?: 'Screen-Me-Settings-UpdateRemote' }
'Screen-Me-Bookmarks': undefined
'Screen-Me-Conversations': undefined
'Screen-Me-Favourites': undefined
'Screen-Me-Lists': undefined
'Screen-Me-Lists-List': undefined
'Screen-Me-Settings': undefined
'Screen-Me-Settings-UpdateRemote': undefined
'Screen-Me-Switch': undefined
} & SharedStackParamList
type TabNotificationsStackParamList = {
'Tab-Notifications-Root': undefined
} & TabSharedStackParamList
type TabMeStackParamList = {
'Tab-Me-Root': undefined
'Tab-Me-Bookmarks': undefined
'Tab-Me-Conversations': undefined
'Tab-Me-Favourites': undefined
'Tab-Me-Lists': undefined
'Tab-Me-Lists-List': {
list: Mastodon.List['id']
title: Mastodon.List['title']
}
'Tab-Me-Settings': undefined
'Tab-Me-Settings-UpdateRemote': undefined
'Tab-Me-Switch': undefined
} & TabSharedStackParamList
}

105
src/App.tsx Normal file
View File

@ -0,0 +1,105 @@
import { ActionSheetProvider } from '@expo/react-native-action-sheet'
import i18n from '@root/i18n/i18n'
import Index from '@root/Screens'
import audio from '@root/startup/audio'
import dev from '@root/startup/dev'
import log from '@root/startup/log'
import netInfo from '@root/startup/netInfo'
import onlineStatus from '@root/startup/onlineStatus'
import sentry from '@root/startup/sentry'
import { persistor, store } from '@root/store'
import { getSettingsLanguage } from '@utils/slices/settingsSlice'
import ThemeManager from '@utils/styles/ThemeManager'
import * as SplashScreen from 'expo-splash-screen'
import React, { useCallback, useEffect, useState } from 'react'
import { LogBox, Platform } from 'react-native'
import { enableScreens } from 'react-native-screens'
import { QueryClient, QueryClientProvider } from 'react-query'
import { Provider } from 'react-redux'
import { PersistGate } from 'redux-persist/integration/react'
if (Platform.OS === 'android') {
LogBox.ignoreLogs(['Setting a timer for a long period of time'])
}
dev()
sentry()
audio()
onlineStatus()
log('log', 'react-query', 'initializing')
const queryClient = new QueryClient()
log('log', 'react-native-screens', 'initializing')
enableScreens()
const App: React.FC = () => {
log('log', 'App', 'rendering App')
const [localCorrupt, setLocalCorrupt] = useState<string>()
useEffect(() => {
const delaySplash = async () => {
log('log', 'App', 'delay splash')
try {
await SplashScreen.preventAutoHideAsync()
} catch (e) {
console.warn(e)
}
}
delaySplash()
}, [])
const onBeforeLift = useCallback(async () => {
let netInfoRes = undefined
try {
netInfoRes = await netInfo()
} catch {}
if (netInfoRes && netInfoRes.corrupted && netInfoRes.corrupted.length) {
setLocalCorrupt(netInfoRes.corrupted)
}
log('log', 'App', 'hide splash')
try {
await SplashScreen.hideAsync()
return Promise.resolve()
} catch (e) {
console.warn(e)
return Promise.reject()
}
}, [])
const children = useCallback(
bootstrapped => {
log('log', 'App', 'bootstrapped')
if (bootstrapped) {
log('log', 'App', 'loading actual app :)')
i18n.changeLanguage(getSettingsLanguage(store.getState()))
return (
<ActionSheetProvider>
<ThemeManager>
<Index localCorrupt={localCorrupt} />
</ThemeManager>
</ActionSheetProvider>
)
} else {
return null
}
},
[localCorrupt]
)
return (
<QueryClientProvider client={queryClient}>
<Provider store={store}>
<PersistGate
persistor={persistor}
onBeforeLift={onBeforeLift}
children={children}
/>
</Provider>
</QueryClientProvider>
)
}
export default React.memo(App, () => true)

324
src/Index.tsx
View File

@ -1,324 +0,0 @@
import client from '@api/client'
import haptics from '@components/haptics'
import Icon from '@components/Icon'
import { toast, toastConfig } from '@components/toast'
import {
BottomTabNavigationOptions,
createBottomTabNavigator
} from '@react-navigation/bottom-tabs'
import {
getFocusedRouteNameFromRoute,
NavigationContainer,
NavigationContainerRef
} from '@react-navigation/native'
import ScreenLocal from '@screens/Local'
import ScreenMe from '@screens/Me'
import ScreenNotifications from '@screens/Notifications'
import ScreenPublic from '@screens/Public'
import { useTimelineQuery } from '@utils/queryHooks/timeline'
import {
getLocalAccount,
getLocalActiveIndex,
getLocalNotification,
localUpdateAccountPreferences,
localUpdateNotification
} from '@utils/slices/instancesSlice'
import { useTheme } from '@utils/styles/ThemeManager'
import { themes } from '@utils/styles/themes'
import * as Analytics from 'expo-firebase-analytics'
import React, {
createRef,
useCallback,
useEffect,
useMemo,
useRef
} from 'react'
import { useTranslation } from 'react-i18next'
import { Image, Platform, StatusBar } from 'react-native'
import Toast from 'react-native-toast-message'
import { useDispatch, useSelector } from 'react-redux'
const Tab = createBottomTabNavigator<Nav.RootStackParamList>()
export interface Props {
localCorrupt?: string
}
export const navigationRef = createRef<NavigationContainerRef>()
const Index: React.FC<Props> = ({ localCorrupt }) => {
const dispatch = useDispatch()
const localActiveIndex = useSelector(getLocalActiveIndex)
const { mode, theme } = useTheme()
enum barStyle {
light = 'dark-content',
dark = 'light-content'
}
const routeNameRef = useRef<string | undefined>()
// const isConnected = useNetInfo().isConnected
// const [firstRender, setFirstRender] = useState(false)
// useEffect(() => {
// if (firstRender) {
// // bug in netInfo on first render as false
// if (isConnected !== false) {
// toast({ type: 'error', content: '手机🈚️网络', autoHide: false })
// }
// } else {
// setFirstRender(true)
// }
// }, [isConnected, firstRender])
// On launch display login credentials corrupt information
const { t } = useTranslation('common')
useEffect(() => {
const showLocalCorrect = localCorrupt
? toast({
type: 'error',
message: t('index.localCorrupt'),
description: localCorrupt.length ? localCorrupt : undefined,
autoHide: false
})
: undefined
return showLocalCorrect
}, [localCorrupt])
// On launch check if there is any unread announcements
useEffect(() => {
console.log('Checking announcements')
localActiveIndex !== null &&
client<Mastodon.Announcement[]>({
method: 'get',
instance: 'local',
url: `announcements`
})
.then(res => {
if (res?.filter(announcement => !announcement.read).length) {
navigationRef.current?.navigate('Screen-Shared-Announcements', {
showAll: false
})
}
})
.catch(() => {})
}, [])
// On launch check if there is any unread noficiations
const queryNotification = useTimelineQuery({
page: 'Notifications',
options: {
enabled: localActiveIndex !== null ? true : false,
refetchInterval: 1000 * 60,
refetchIntervalInBackground: true
}
})
const prevNotification = useSelector(getLocalNotification)
useEffect(() => {
if (queryNotification.data?.pages) {
const flattenData = queryNotification.data.pages.flatMap(d => [...d])
const latestNotificationTime = flattenData.length
? (flattenData[0] as Mastodon.Notification).created_at
: undefined
if (!prevNotification || !prevNotification.latestTime) {
dispatch(
localUpdateNotification({
unread: false
})
)
} else if (
latestNotificationTime &&
new Date(prevNotification.latestTime) < new Date(latestNotificationTime)
) {
dispatch(
localUpdateNotification({
unread: true,
latestTime: latestNotificationTime
})
)
}
}
}, [queryNotification.data?.pages])
// Lazily update users's preferences, for e.g. composing default visibility
useEffect(() => {
if (localActiveIndex !== null) {
dispatch(localUpdateAccountPreferences())
}
}, [])
// Callbacks
const navigationContainerOnReady = useCallback(
() =>
(routeNameRef.current = navigationRef.current?.getCurrentRoute()?.name),
[]
)
const navigationContainerOnStateChange = useCallback(() => {
const previousRouteName = routeNameRef.current
const currentRouteName = navigationRef.current?.getCurrentRoute()?.name
if (previousRouteName !== currentRouteName) {
Analytics.setCurrentScreen(currentRouteName)
}
routeNameRef.current = currentRouteName
}, [])
const localAccount = useSelector(getLocalAccount)
const tabNavigatorScreenOptions = useCallback(
({ route }): BottomTabNavigationOptions => ({
tabBarIcon: ({
focused,
color,
size
}: {
focused: boolean
color: string
size: number
}) => {
switch (route.name) {
case 'Screen-Local':
return <Icon name='Home' size={size} color={color} />
case 'Screen-Public':
return <Icon name='Globe' size={size} color={color} />
case 'Screen-Post':
return <Icon name='Plus' size={size} color={color} />
case 'Screen-Notifications':
return <Icon name='Bell' size={size} color={color} />
case 'Screen-Me':
return localActiveIndex !== null ? (
<Image
source={{ uri: localAccount?.avatarStatic }}
style={{
width: size,
height: size,
borderRadius: size,
borderWidth: focused ? 2 : 0,
borderColor: focused ? theme.secondary : color
}}
/>
) : (
<Icon
name={focused ? 'Meh' : 'Smile'}
size={size}
color={!focused ? theme.secondary : color}
/>
)
default:
return <Icon name='AlertOctagon' size={size} color={color} />
}
},
...(Platform.OS === 'android' && {
tabBarVisible:
getFocusedRouteNameFromRoute(route) !== 'Screen-Shared-Compose' &&
getFocusedRouteNameFromRoute(route) !==
'Screen-Shared-Announcements' &&
getFocusedRouteNameFromRoute(route) !==
'Screen-Shared-ImagesViewer' &&
getFocusedRouteNameFromRoute(route) !== 'Screen-Me-Switch'
})
}),
[localActiveIndex, localAccount]
)
const tabNavigatorTabBarOptions = useMemo(
() => ({
activeTintColor: theme.primary,
inactiveTintColor:
localActiveIndex !== null ? theme.secondary : theme.disabled,
showLabel: false,
...(Platform.OS === 'android' && { keyboardHidesTabBar: true })
}),
[theme, localActiveIndex]
)
const tabScreenLocalListeners = useCallback(
() => ({
tabPress: (e: any) => {
if (!(localActiveIndex !== null)) {
e.preventDefault()
}
}
}),
[localActiveIndex]
)
const tabScreenComposeListeners = useMemo(
() => ({
tabPress: (e: any) => {
e.preventDefault()
if (localActiveIndex !== null) {
haptics('Medium')
navigationRef.current?.navigate('Screen-Shared-Compose')
}
}
}),
[localActiveIndex]
)
const tabScreenComposeComponent = useCallback(() => null, [])
const tabScreenNotificationsListeners = useCallback(
() => ({
tabPress: (e: any) => {
if (!(localActiveIndex !== null)) {
e.preventDefault()
}
}
}),
[localActiveIndex]
)
return (
<>
<StatusBar barStyle={barStyle[mode]} backgroundColor={theme.background} />
<NavigationContainer
ref={navigationRef}
theme={themes[mode]}
onReady={navigationContainerOnReady}
onStateChange={navigationContainerOnStateChange}
>
<Tab.Navigator
initialRouteName={
localActiveIndex !== null ? 'Screen-Local' : 'Screen-Me'
}
screenOptions={tabNavigatorScreenOptions}
tabBarOptions={tabNavigatorTabBarOptions}
>
<Tab.Screen
name='Screen-Local'
component={ScreenLocal}
listeners={tabScreenLocalListeners}
/>
<Tab.Screen name='Screen-Public' component={ScreenPublic} />
<Tab.Screen
name='Screen-Post'
component={tabScreenComposeComponent}
listeners={tabScreenComposeListeners}
/>
<Tab.Screen
name='Screen-Notifications'
component={ScreenNotifications}
listeners={tabScreenNotificationsListeners}
options={
prevNotification && prevNotification.unread
? {
tabBarBadge: '',
tabBarBadgeStyle: {
transform: [{ scale: 0.5 }],
backgroundColor: theme.red
}
}
: {
tabBarBadgeStyle: {
transform: [{ scale: 0.5 }],
backgroundColor: theme.red
}
}
}
/>
<Tab.Screen name='Screen-Me' component={ScreenMe} />
</Tab.Navigator>
{Platform.OS === 'ios' ? (
<Toast ref={Toast.setRef} config={toastConfig} />
) : null}
</NavigationContainer>
</>
)
}
export default React.memo(Index, () => true)

216
src/Screens.tsx Normal file
View File

@ -0,0 +1,216 @@
import client from '@api/client'
import { HeaderLeft } from '@components/Header'
import { toast, toastConfig } from '@components/toast'
import {
NavigationContainer,
NavigationContainerRef
} from '@react-navigation/native'
import ScreenActions from '@screens/Actions'
import ScreenAnnouncements from '@screens/Announcements'
import ScreenCompose from '@screens/Compose'
import ScreenImagesViewer from '@screens/ImagesViewer'
import ScreenTabs from '@screens/Tabs'
import {
getLocalActiveIndex,
localUpdateAccountPreferences
} from '@utils/slices/instancesSlice'
import { useTheme } from '@utils/styles/ThemeManager'
import { themes } from '@utils/styles/themes'
import * as Analytics from 'expo-firebase-analytics'
import React, { createRef, useCallback, useEffect, useRef } from 'react'
import { useTranslation } from 'react-i18next'
import { Platform, StatusBar } from 'react-native'
import Toast from 'react-native-toast-message'
import { createSharedElementStackNavigator } from 'react-navigation-shared-element'
import { useDispatch, useSelector } from 'react-redux'
const Stack = createSharedElementStackNavigator<Nav.RootStackParamList>()
export interface Props {
localCorrupt?: string
}
export const navigationRef = createRef<NavigationContainerRef>()
const Index: React.FC<Props> = ({ localCorrupt }) => {
const dispatch = useDispatch()
const localActiveIndex = useSelector(getLocalActiveIndex)
const { mode, theme } = useTheme()
enum barStyle {
light = 'dark-content',
dark = 'light-content'
}
const routeNameRef = useRef<string | undefined>()
// const isConnected = useNetInfo().isConnected
// const [firstRender, setFirstRender] = useState(false)
// useEffect(() => {
// if (firstRender) {
// // bug in netInfo on first render as false
// if (isConnected !== false) {
// toast({ type: 'error', content: '手机🈚️网络', autoHide: false })
// }
// } else {
// setFirstRender(true)
// }
// }, [isConnected, firstRender])
// On launch display login credentials corrupt information
const { t } = useTranslation('common')
useEffect(() => {
const showLocalCorrect = localCorrupt
? toast({
type: 'error',
message: t('index.localCorrupt'),
description: localCorrupt.length ? localCorrupt : undefined,
autoHide: false
})
: undefined
return showLocalCorrect
}, [localCorrupt])
// On launch check if there is any unread announcements
useEffect(() => {
localActiveIndex !== null &&
client<Mastodon.Announcement[]>({
method: 'get',
instance: 'local',
url: `announcements`
})
.then(res => {
if (res?.filter(announcement => !announcement.read).length) {
navigationRef.current?.navigate('Screen-Announcements', {
showAll: false
})
}
})
.catch(() => {})
}, [])
// Lazily update users's preferences, for e.g. composing default visibility
useEffect(() => {
if (localActiveIndex !== null) {
dispatch(localUpdateAccountPreferences())
}
}, [])
// Callbacks
const navigationContainerOnReady = useCallback(
() =>
(routeNameRef.current = navigationRef.current?.getCurrentRoute()?.name),
[]
)
const navigationContainerOnStateChange = useCallback(() => {
const previousRouteName = routeNameRef.current
const currentRouteName = navigationRef.current?.getCurrentRoute()?.name
if (previousRouteName !== currentRouteName) {
Analytics.setCurrentScreen(currentRouteName)
}
routeNameRef.current = currentRouteName
}, [])
return (
<>
<StatusBar barStyle={barStyle[mode]} backgroundColor={theme.background} />
<NavigationContainer
ref={navigationRef}
theme={themes[mode]}
onReady={navigationContainerOnReady}
onStateChange={navigationContainerOnStateChange}
>
<Stack.Navigator mode='modal' initialRouteName='Screen-Tabs'>
<Stack.Screen
name='Screen-Tabs'
component={ScreenTabs}
options={{ headerShown: false }}
/>
<Stack.Screen
name='Screen-Actions'
component={ScreenActions}
options={{
headerShown: false,
cardStyle: { backgroundColor: 'transparent' },
cardStyleInterpolator: ({ current: { progress } }) => ({
cardStyle: {
opacity: progress.interpolate({
inputRange: [0, 1],
outputRange: [0, 1]
})
}
})
}}
/>
<Stack.Screen
name='Screen-Announcements'
component={ScreenAnnouncements}
options={{
gestureEnabled: false,
title: t('sharedAnnouncements:heading'),
headerTransparent: true,
headerLeft: () => (
<HeaderLeft
content='X'
native={false}
onPress={() => navigationRef.current?.goBack()}
/>
),
animationTypeForReplace: 'pop',
cardStyle: { backgroundColor: 'transparent' },
cardStyleInterpolator: ({ current: { progress } }) => ({
cardStyle: {
opacity: progress.interpolate({
inputRange: [0, 1],
outputRange: [0, 1]
})
}
})
}}
/>
<Stack.Screen
name='Screen-Compose'
component={ScreenCompose}
options={{ gestureEnabled: false, headerShown: false }}
/>
<Stack.Screen
name='Screen-ImagesViewer'
component={ScreenImagesViewer}
options={{
gestureEnabled: false,
headerTransparent: true,
headerLeft: () => (
<HeaderLeft
content='X'
native={false}
onPress={() => navigationRef.current?.goBack()}
/>
),
cardStyle: { backgroundColor: 'transparent' },
cardStyleInterpolator: ({ current: { progress } }) => ({
cardStyle: {
opacity: progress.interpolate({
inputRange: [0, 1],
outputRange: [0, 1]
})
}
})
}}
sharedElements={route => {
const { imageIndex, imageUrls } = route.params
return [{ id: `image.${imageUrls[imageIndex].url}`, debug: true }]
}}
/>
</Stack.Navigator>
{Platform.OS === 'ios' ? (
<Toast ref={Toast.setRef} config={toastConfig} />
) : null}
</NavigationContainer>
</>
)
}
export default React.memo(Index, () => true)

4
src/components/Account.tsx
View File

@ -21,12 +21,12 @@ const ComponentAccount: React.FC<Props> = ({
}) => {
const { theme } = useTheme()
const navigation = useNavigation<
StackNavigationProp<Nav.LocalStackParamList>
StackNavigationProp<Nav.TabLocalStackParamList>
>()
const onPress = useCallback(() => {
analytics('search_account_press', { page: origin })
navigation.push('Screen-Shared-Account', { account })
navigation.push('Tab-Shared-Account', { account })
}, [])
return (

129
src/components/BottomSheet.tsx
View File

@ -1,129 +0,0 @@
import React from 'react'
import { Dimensions, Modal, StyleSheet, View } from 'react-native'
import { useSafeAreaInsets } from 'react-native-safe-area-context'
import { useTheme } from '@utils/styles/ThemeManager'
import { StyleConstants } from '@utils/styles/constants'
import Button from '@components/Button'
import {
PanGestureHandler,
State,
TapGestureHandler
} from 'react-native-gesture-handler'
import Animated, {
Extrapolate,
interpolate,
runOnJS,
useAnimatedGestureHandler,
useAnimatedStyle,
useSharedValue,
withTiming
} from 'react-native-reanimated'
import analytics from './analytics'
export interface Props {
children: React.ReactNode
visible: boolean
handleDismiss: () => void
}
const BottomSheet: React.FC<Props> = ({ children, visible, handleDismiss }) => {
const { theme } = useTheme()
const insets = useSafeAreaInsets()
const screenHeight = Dimensions.get('screen').height
const panY = useSharedValue(0)
const styleTop = useAnimatedStyle(() => {
return {
top: interpolate(
panY.value,
[0, screenHeight],
[0, screenHeight],
Extrapolate.CLAMP
)
}
})
const callDismiss = () => {
analytics('bottomsheet_swipe_close')
handleDismiss()
}
const onGestureEvent = useAnimatedGestureHandler({
onActive: ({ translationY }) => {
panY.value = translationY
},
onEnd: ({ velocityY }) => {
if (velocityY > 500) {
runOnJS(callDismiss)()
} else {
panY.value = withTiming(0)
}
}
})
return (
<Modal animated animationType='fade' visible={visible} transparent>
<TapGestureHandler
onHandlerStateChange={({ nativeEvent }) => {
if (nativeEvent.state === State.ACTIVE) {
callDismiss()
}
}}
>
<Animated.View
style={[styles.overlay, { backgroundColor: theme.backgroundOverlay }]}
>
<PanGestureHandler onGestureEvent={onGestureEvent}>
<Animated.View
style={[
styles.container,
styleTop,
{
backgroundColor: theme.background,
paddingBottom: insets.bottom || StyleConstants.Spacing.L
}
]}
>
<View
style={[
styles.handle,
{ backgroundColor: theme.primaryOverlay }
]}
/>
{children}
<Button
type='text'
content='取消'
onPress={() => {
analytics('bottomsheet_cancel')
handleDismiss()
}}
style={styles.button}
/>
</Animated.View>
</PanGestureHandler>
</Animated.View>
</TapGestureHandler>
</Modal>
)
}
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
}
})
export default BottomSheet

23
src/components/GracefullyImage.tsx
View File

@ -9,9 +9,11 @@ import {
} from 'react-native'
import { Blurhash } from 'react-native-blurhash'
import FastImage from 'react-native-fast-image'
import { SharedElement } from 'react-navigation-shared-element'
import { useTheme } from '@utils/styles/ThemeManager'
export interface Props {
sharedElement?: string
hidden?: boolean
uri: { preview?: string; original: string; remote?: string }
blurhash?: string
@ -22,6 +24,7 @@ export interface Props {
}
const GracefullyImage: React.FC<Props> = ({
sharedElement,
hidden = false,
uri,
blurhash,
@ -36,11 +39,21 @@ const GracefullyImage: React.FC<Props> = ({
const children = useCallback(() => {
return (
<>
<FastImage
source={{ uri: uri.preview || uri.original || uri.remote }}
style={[styles.image, imageStyle]}
onLoad={() => setImageLoaded(true)}
/>
{sharedElement ? (
<SharedElement id={`image.${sharedElement}`} style={[styles.image]}>
<FastImage
source={{ uri: uri.preview || uri.original || uri.remote }}
style={[styles.image, imageStyle]}
onLoad={() => setImageLoaded(true)}
/>
</SharedElement>
) : (
<FastImage
source={{ uri: uri.preview || uri.original || uri.remote }}
style={[styles.image, imageStyle]}
onLoad={() => setImageLoaded(true)}
/>
)}
{blurhash && (hidden || !imageLoaded) ? (
<Blurhash
decodeAsync

4
src/components/Hashtag.tsx
View File

@ -19,12 +19,12 @@ const ComponentHashtag: React.FC<Props> = ({
}) => {
const { theme } = useTheme()
const navigation = useNavigation<
StackNavigationProp<Nav.LocalStackParamList>
StackNavigationProp<Nav.TabLocalStackParamList>
>()
const onPress = useCallback(() => {
analytics('search_account_press', { page: origin })
navigation.push('Screen-Shared-Hashtag', { hashtag: hashtag.name })
navigation.push('Tab-Shared-Hashtag', { hashtag: hashtag.name })
}, [])
return (

14
src/components/Header/Left.tsx
View File

@ -7,11 +7,17 @@ import { Pressable, StyleSheet, Text } from 'react-native'
export interface Props {
type?: 'icon' | 'text'
content?: string
native?: boolean
onPress: () => void
}
const HeaderLeft: React.FC<Props> = ({ type = 'icon', content, onPress }) => {
const HeaderLeft: React.FC<Props> = ({
type = 'icon',
content,
native = true,
onPress
}) => {
const { theme } = useTheme()
const children = useMemo(() => {
@ -42,7 +48,11 @@ const HeaderLeft: React.FC<Props> = ({ type = 'icon', content, onPress }) => {
styles.base,
{
backgroundColor: theme.backgroundGradientStart,
...(type === 'icon' && { height: 44, width: 44, marginLeft: -9 })
...(type === 'icon' && {
height: 44,
width: 44,
marginLeft: native ? -9 : 9
})
}
]}
/>

8
src/components/Header/Right.tsx
View File

@ -9,6 +9,7 @@ import { Chase } from 'react-native-animated-spinkit'
export interface Props {
type?: 'icon' | 'text'
content: string
native?: boolean
loading?: boolean
disabled?: boolean
@ -19,6 +20,7 @@ export interface Props {
const HeaderRight: React.FC<Props> = ({
type = 'icon',
content,
native = true,
loading,
disabled,
onPress
@ -88,7 +90,11 @@ const HeaderRight: React.FC<Props> = ({
styles.base,
{
backgroundColor: theme.backgroundGradientStart,
...(type === 'icon' && { height: 44, width: 44, marginRight: -9 })
...(type === 'icon' && {
height: 44,
width: 44,
marginRight: native ? -9 : 9
})
}
]}
/>

6
src/components/Instance.tsx
View File

@ -230,12 +230,6 @@ const ComponentInstance: React.FC<Props> = ({
content={instanceQuery.data?.title || undefined}
potentialWidth={2}
/>
<InstanceInfo
visible={instanceQuery.data?.short_description !== undefined}
header={t('server.information.description.heading')}
content={instanceQuery.data?.short_description || undefined}
potentialLines={5}
/>
<View style={styles.instanceStats}>
<InstanceInfo
style={styles.stat1}

6
src/components/Parse/HTML.tsx
View File

@ -58,7 +58,7 @@ const renderNode = ({
analytics('status_hashtag_press')
!disableDetails &&
differentTag &&
navigation.push('Screen-Shared-Hashtag', {
navigation.push('Tab-Shared-Hashtag', {
hashtag: tag[1] || tag[2]
})
}}
@ -86,7 +86,7 @@ const renderNode = ({
accountIndex !== -1 &&
!disableDetails &&
differentAccount &&
navigation.push('Screen-Shared-Account', {
navigation.push('Tab-Shared-Account', {
account: mentions[accountIndex]
})
}}
@ -115,7 +115,7 @@ const renderNode = ({
analytics('status_link_press')
!disableDetails && !shouldBeTag
? await openLink(href)
: navigation.push('Screen-Shared-Hashtag', {
: navigation.push('Tab-Shared-Hashtag', {
hashtag: content.substring(1)
})
}}

6
src/components/Timelines.tsx
View File

@ -2,7 +2,7 @@ import { HeaderRight } from '@components/Header'
import Timeline from '@components/Timelines/Timeline'
import SegmentedControl from '@react-native-community/segmented-control'
import { useNavigation } from '@react-navigation/native'
import sharedScreens from '@screens/Shared/sharedScreens'
import sharedScreens from '@screens/Tabs/Shared/sharedScreens'
import { getLocalActiveIndex } from '@utils/slices/instancesSlice'
import { useTheme } from '@utils/styles/ThemeManager'
import React, { useCallback, useMemo, useState } from 'react'
@ -14,7 +14,7 @@ import ViewPagerAdapter from 'react-native-tab-view-viewpager-adapter'
import { useSelector } from 'react-redux'
import analytics from './analytics'
const Stack = createNativeStackNavigator<Nav.RemoteStackParamList>()
const Stack = createNativeStackNavigator<Nav.TabPublicStackParamList>()
const Timelines: React.FC = () => {
const { t, i18n } = useTranslation()
@ -28,7 +28,7 @@ const Timelines: React.FC = () => {
const onPressSearch = useCallback(() => {
analytics('search_tap', { page: pages[segment].page })
navigation.navigate('Screen-Public', { screen: 'Screen-Shared-Search' })
navigation.navigate('Tab-Public', { screen: 'Tab-Shared-Search' })
}, [])
const routes = pages.map(p => ({ key: p.page }))

2
src/components/Timelines/Timeline.tsx
View File

@ -18,7 +18,6 @@ import TimelineConversation from './Timeline/Conversation'
import TimelineDefault from './Timeline/Default'
import TimelineEmpty from './Timeline/Empty'
import TimelineEnd from './Timeline/End'
import TimelineHeader from './Timeline/Header'
import TimelineNotifications from './Timeline/Notifications'
export interface Props {
@ -155,7 +154,6 @@ const Timeline: React.FC<Props> = ({
() => !disableInfinity && !isFetchingNextPage && fetchNextPage(),
[isFetchingNextPage]
)
const ListHeaderComponent = useCallback(() => <TimelineHeader />, [])
const ListFooterComponent = useCallback(
() => <TimelineEnd hasNextPage={!disableInfinity ? hasNextPage : false} />,
[hasNextPage]

4
src/components/Timelines/Timeline/Conversation.tsx
View File

@ -76,13 +76,13 @@ const TimelineConversation: React.FC<Props> = ({
})
const navigation = useNavigation<
StackNavigationProp<Nav.LocalStackParamList>
StackNavigationProp<Nav.TabLocalStackParamList>
>()
const onPress = useCallback(() => {
analytics('timeline_conversation_press')
if (conversation.last_status) {
conversation.unread && mutate()
navigation.push('Screen-Shared-Toot', {
navigation.push('Tab-Shared-Toot', {
toot: conversation.last_status
})
}

4
src/components/Timelines/Timeline/Default.tsx
View File

@ -36,7 +36,7 @@ const TimelineDefault: React.FC<Props> = ({
}) => {
const localAccount = useSelector(getLocalAccount)
const navigation = useNavigation<
StackNavigationProp<Nav.LocalStackParamList>
StackNavigationProp<Nav.TabLocalStackParamList>
>()
let actualStatus = item.reblog ? item.reblog : item
@ -47,7 +47,7 @@ const TimelineDefault: React.FC<Props> = ({
})
!disableOnPress &&
!highlighted &&
navigation.push('Screen-Shared-Toot', {
navigation.push('Tab-Shared-Toot', {
toot: actualStatus
})
}, [])

61
src/components/Timelines/Timeline/Header.tsx
View File

@ -1,61 +0,0 @@
import analytics from '@components/analytics'
import { useNavigation } from '@react-navigation/native'
import Icon from '@root/components/Icon'
import { StyleConstants } from '@root/utils/styles/constants'
import { useTheme } from '@root/utils/styles/ThemeManager'
import { updatePublicRemoteNotice } from '@utils/slices/contextsSlice'
import React from 'react'
import { useTranslation } from 'react-i18next'
import { StyleSheet, Text, View } from 'react-native'
import { useDispatch } from 'react-redux'
const TimelineHeader = React.memo(
() => {
const { t } = useTranslation('componentTimeline')
const dispatch = useDispatch()
const navigation = useNavigation()
const { theme } = useTheme()
return (
<View style={[styles.base, { borderColor: theme.border }]}>
<Text style={[styles.text, { color: theme.primary }]}>
{t('header.explanation')}
<Text
style={{ color: theme.blue }}
onPress={() => {
analytics('timeline_remote_header_press')
dispatch(updatePublicRemoteNotice(1))
navigation.navigate('Screen-Me', {
screen: 'Screen-Me-Root',
params: { navigateAway: 'Screen-Me-Settings-UpdateRemote' }
})
}}
>
{t('header.button')}
<Icon
name='ArrowRight'
size={StyleConstants.Font.Size.S}
color={theme.blue}
/>
</Text>
</Text>
</View>
)
},
() => true
)
const styles = StyleSheet.create({
base: {
margin: StyleConstants.Spacing.Global.PagePadding,
paddingHorizontal: StyleConstants.Spacing.M,
paddingVertical: StyleConstants.Spacing.S,
borderWidth: 1,
borderRadius: 6
},
text: {
...StyleConstants.FontStyle.S
}
})
export default TimelineHeader

4
src/components/Timelines/Timeline/Notifications.tsx
View File

@ -29,7 +29,7 @@ const TimelineNotifications: React.FC<Props> = ({
}) => {
const localAccount = useSelector(getLocalAccount)
const navigation = useNavigation<
StackNavigationProp<Nav.LocalStackParamList>
StackNavigationProp<Nav.TabLocalStackParamList>
>()
const actualAccount = notification.status
? notification.status.account
@ -38,7 +38,7 @@ const TimelineNotifications: React.FC<Props> = ({
const onPress = useCallback(() => {
analytics('timeline_notification_press')
notification.status &&
navigation.push('Screen-Shared-Toot', {
navigation.push('Tab-Shared-Toot', {
toot: notification.status
})
}, [])

4
src/components/Timelines/Timeline/Shared/Actioned.tsx
View File

@ -23,7 +23,7 @@ const TimelineActioned: React.FC<Props> = ({
const { t } = useTranslation('componentTimeline')
const { theme } = useTheme()
const navigation = useNavigation<
StackNavigationProp<Nav.LocalStackParamList>
StackNavigationProp<Nav.TabLocalStackParamList>
>()
const name = account.display_name || account.username
const iconColor = theme.primary
@ -34,7 +34,7 @@ const TimelineActioned: React.FC<Props> = ({
const onPress = useCallback(() => {
analytics('timeline_shared_actioned_press', { action })
navigation.push('Screen-Shared-Account', { account })
navigation.push('Tab-Shared-Account', { account })
}, [])
const children = useMemo(() => {

2
src/components/Timelines/Timeline/Shared/Actions.tsx
View File

@ -104,7 +104,7 @@ const TimelineActions: React.FC<Props> = ({
page: queryKey[1].page,
count: status.replies_count
})
navigation.navigate('Screen-Shared-Compose', {
navigation.navigate('Screen-Compose', {
type: 'reply',
incomingStatus: status,
accts,

2
src/components/Timelines/Timeline/Shared/Attachment.tsx
View File

@ -40,7 +40,7 @@ const TimelineAttachment: React.FC<Props> = ({ status }) => {
})[] = []
const navigation = useNavigation()
const navigateToImagesViewer = (imageIndex: number) =>
navigation.navigate('Screen-Shared-ImagesViewer', {
navigation.navigate('Screen-ImagesViewer', {
imageUrls,
imageIndex
})

1
src/components/Timelines/Timeline/Shared/Attachment/Image.tsx
View File

@ -33,6 +33,7 @@ const AttachmentImage: React.FC<Props> = ({
original: image.url,
remote: image.remote_url
}}
sharedElement={image.url}
blurhash={image.blurhash}
onPress={onPress}
style={[

8
src/components/Timelines/Timeline/Shared/Avatar.tsx
View File

@ -13,12 +13,14 @@ export interface Props {
const TimelineAvatar: React.FC<Props> = ({ queryKey, account }) => {
const navigation = useNavigation<
StackNavigationProp<Nav.LocalStackParamList>
StackNavigationProp<Nav.TabLocalStackParamList>
>()
// Need to fix go back root
const onPress = useCallback(() => {
analytics('timeline_shared_avatar_press', { page: queryKey[1].page })
queryKey && navigation.push('Screen-Shared-Account', { account })
analytics('timeline_shared_avatar_press', {
page: queryKey && queryKey[1].page
})
queryKey && navigation.push('Tab-Shared-Account', { account })
}, [])
return (

2
src/components/Timelines/Timeline/Shared/HeaderActions/Root.tsx
View File

@ -1,5 +1,5 @@
import analytics from '@components/analytics'
import BottomSheet from '@components/BottomSheet'
import BottomSheet from '@screens/Tabs/Shared/node_modules/@screens/Actions/BottomSheet'
import Icon from '@components/Icon'
import { QueryKeyTimeline } from '@utils/queryHooks/timeline'
import { getLocalAccount, getLocalUrl } from '@utils/slices/instancesSlice'

2
src/components/Timelines/Timeline/Shared/HeaderActions/Status.tsx
View File

@ -106,7 +106,7 @@ const HeaderActionsStatus: React.FC<Props> = ({
id: status.id
})
if (res.id) {
navigation.navigate('Screen-Shared-Compose', {
navigation.navigate('Screen-Compose', {
type: 'edit',
incomingStatus: res,
queryKey

36
src/components/Timelines/Timeline/Shared/HeaderDefault.tsx
View File

@ -1,13 +1,15 @@
import { StyleConstants } from '@utils/styles/constants'
import React from 'react'
import { StyleSheet, View } from 'react-native'
import { Pressable, StyleSheet, View } from 'react-native'
import HeaderSharedAccount from './HeaderShared/Account'
import HeaderSharedApplication from './HeaderShared/Application'
import HeaderSharedCreated from './HeaderShared/Created'
import HeaderSharedVisibility from './HeaderShared/Visibility'
import { QueryKeyTimeline } from '@utils/queryHooks/timeline'
import HeaderSharedMuted from './HeaderShared/Muted'
import HeaderActions from './HeaderActions/Root'
import { useNavigation } from '@react-navigation/native'
import Icon from '@components/Icon'
import { useTheme } from '@utils/styles/ThemeManager'
export interface Props {
queryKey?: QueryKeyTimeline
@ -15,6 +17,9 @@ export interface Props {
}
const TimelineHeaderDefault: React.FC<Props> = ({ queryKey, status }) => {
const navigation = useNavigation()
const { theme } = useTheme()
return (
<View style={styles.base}>
<View style={styles.accountAndMeta}>
@ -28,11 +33,28 @@ const TimelineHeaderDefault: React.FC<Props> = ({ queryKey, status }) => {
</View>
{queryKey ? (
<HeaderActions
queryKey={queryKey}
status={status}
url={status.url || status.uri}
type='status'
<Pressable
style={{
flex: 1,
flexDirection: 'row',
justifyContent: 'center',
paddingBottom: StyleConstants.Spacing.S
}}
onPress={() =>
navigation.navigate('Screen-Actions', {
queryKey,
status,
url: status.url || status.uri,
type: 'status'
})
}
children={
<Icon
name='MoreHorizontal'
color={theme.secondary}
size={StyleConstants.Font.Size.L}
/>
}
/>
) : null}
</View>

4
src/components/Timelines/Timeline/Shared/HeaderNotification.tsx
View File

@ -8,8 +8,8 @@ import HeaderSharedCreated from './HeaderShared/Created'
import HeaderSharedVisibility from './HeaderShared/Visibility'
import RelationshipIncoming from '@root/components/Relationship/Incoming'
import HeaderSharedMuted from './HeaderShared/Muted'
import HeaderActions from './HeaderActions/Root'
import { QueryKeyTimeline } from '@utils/queryHooks/timeline'
import ScreenActions from '@screens/Actions'
export interface Props {
queryKey: QueryKeyTimeline
@ -28,7 +28,7 @@ const TimelineHeaderNotification: React.FC<Props> = ({
return <RelationshipIncoming id={notification.account.id} />
default:
return notification.status ? (
<HeaderActions queryKey={queryKey} status={notification.status} />
<ScreenActions queryKey={queryKey} status={notification.status} />
) : null
}
}, [notification.type])

1
src/i18n/en/_all.ts
View File

@ -18,6 +18,7 @@ export default {
sharedAccount: require('./screens/sharedAccount').default,
sharedAnnouncements: require('./screens/sharedAnnouncements').default,
sharedAttachments: require('./screens/sharedAttachments').default,
sharedCompose: require('./screens/sharedCompose').default,
sharedRelationships: require('./screens/sharedRelationships').default,
sharedSearch: require('./screens/sharedSearch').default,

3
src/i18n/en/screens/sharedAttachments.ts Normal file
View File

@ -0,0 +1,3 @@
export default {
heading: '<0 />\'s <1>media</1>'
}

1
src/i18n/zh-Hans/_all.ts
View File

@ -18,6 +18,7 @@ export default {
sharedAccount: require('./screens/sharedAccount').default,
sharedAnnouncements: require('./screens/sharedAnnouncements').default,
sharedAttachments: require('./screens/sharedAttachments').default,
sharedCompose: require('./screens/sharedCompose').default,
sharedRelationships: require('./screens/sharedRelationships').default,
sharedSearch: require('./screens/sharedSearch').default,

3
src/i18n/zh-Hans/screens/sharedAttachments.ts Normal file
View File

@ -0,0 +1,3 @@
export default {
heading: '<0 /> <1>的媒体</1>'
}

175
src/screens/Actions.tsx Normal file
View File

@ -0,0 +1,175 @@
import { StackScreenProps } from '@react-navigation/stack'
import { getLocalAccount, getLocalUrl } from '@utils/slices/instancesSlice'
import { StyleConstants } from '@utils/styles/constants'
import { useTheme } from '@utils/styles/ThemeManager'
import React, { useCallback, useEffect } from 'react'
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 { useSafeAreaInsets } from 'react-native-safe-area-context'
import { useSelector } from 'react-redux'
import ActionsAccount from './Actions/Account'
import ActionsDomain from './Actions/Domain'
import ActionsShare from './Actions/Share'
import ActionsStatus from './Actions/Status'
export type ScreenAccountProp = StackScreenProps<
Nav.RootStackParamList,
'Screen-Actions'
>
const ScreenActions = React.memo(
({
route: {
params: { queryKey, status, url, type }
},
navigation
}: ScreenAccountProp) => {
const localAccount = useSelector(getLocalAccount)
const sameAccount = localAccount?.id === status.account.id
const localDomain = useSelector(getLocalUrl)
const statusDomain = status.uri
? status.uri.split(new RegExp(/\/\/(.*?)\//))[1]
: ''
const sameDomain = localDomain === statusDomain
const { theme } = 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(() => {
panY.value = withTiming(DEFAULT_VALUE)
navigation.goBack()
}, [])
const onGestureEvent = useAnimatedGestureHandler({
onActive: ({ translationY }) => {
panY.value = translationY
},
onEnd: ({ velocityY }) => {
if (velocityY > 500) {
runOnJS(dismiss)()
} else {
panY.value = withTiming(0)
}
}
})
return (
<Animated.View style={{ flex: 1 }}>
<TapGestureHandler
onHandlerStateChange={({ nativeEvent }) => {
if (nativeEvent.state === State.ACTIVE) {
dismiss()
}
}}
>
<Animated.View
style={[
styles.overlay,
{ backgroundColor: theme.backgroundOverlay }
]}
>
<PanGestureHandler onGestureEvent={onGestureEvent}>
<Animated.View
style={[
styles.container,
styleTop,
{
backgroundColor: theme.background,
paddingBottom: insets.bottom || StyleConstants.Spacing.L
}
]}
>
<View
style={[
styles.handle,
{ backgroundColor: theme.primaryOverlay }
]}
/>
{!sameAccount && (
<ActionsAccount
queryKey={queryKey}
account={status.account}
dismiss={dismiss}
/>
)}
{sameAccount && (
<ActionsStatus
navigation={navigation}
queryKey={queryKey}
status={status}
dismiss={dismiss}
/>
)}
{!sameDomain && (
<ActionsDomain
queryKey={queryKey}
domain={statusDomain}
dismiss={dismiss}
/>
)}
{url && type ? (
<ActionsShare url={url} type={type} dismiss={dismiss} />
) : null}
</Animated.View>
</PanGestureHandler>
</Animated.View>
</TapGestureHandler>
</Animated.View>
)
},
() => true
)
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
}
})
export default ScreenActions

126
src/screens/Actions/Account.tsx Normal file
View File

@ -0,0 +1,126 @@
import analytics from '@components/analytics'
import haptics from '@components/haptics'
import { MenuContainer, MenuHeader, MenuRow } from '@components/Menu'
import { toast } from '@components/toast'
import {
MutationVarsTimelineUpdateAccountProperty,
QueryKeyTimeline,
useTimelineMutation
} from '@utils/queryHooks/timeline'
import React from 'react'
import { useTranslation } from 'react-i18next'
import { useQueryClient } from 'react-query'
export interface Props {
queryKey?: QueryKeyTimeline
account: Mastodon.Account
dismiss: () => void
}
const ActionsAccount: React.FC<Props> = ({ queryKey, account, dismiss }) => {
const { t } = useTranslation('componentTimeline')
const queryClient = useQueryClient()
const mutateion = useTimelineMutation({
queryClient,
onSuccess: (_, params) => {
const theParams = params as MutationVarsTimelineUpdateAccountProperty
haptics('Success')
toast({
type: 'success',
message: t('common:toastMessage.success.message', {
function: t(
`shared.header.actions.account.${theParams.payload.property}.function`,
{
acct: account.acct
}
)
})
})
},
onError: (err: any, params) => {
const theParams = params as MutationVarsTimelineUpdateAccountProperty
haptics('Error')
toast({
type: 'error',
message: t('common:toastMessage.error.message', {
function: t(
`shared.header.actions.account.${theParams.payload.property}.function`
)
}),
...(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)
}
})
return (
<MenuContainer>
<MenuHeader heading={t('shared.header.actions.account.heading')} />
<MenuRow
onPress={() => {
analytics('timeline_shared_headeractions_account_mute_press', {
page: queryKey && queryKey[1].page
})
dismiss()
mutateion.mutate({
type: 'updateAccountProperty',
queryKey,
id: account.id,
payload: { property: 'mute' }
})
}}
iconFront='EyeOff'
title={t('shared.header.actions.account.mute.button', {
acct: account.acct
})}
/>
<MenuRow
onPress={() => {
analytics('timeline_shared_headeractions_account_block_press', {
page: queryKey && queryKey[1].page
})
dismiss()
mutateion.mutate({
type: 'updateAccountProperty',
queryKey,
id: account.id,
payload: { property: 'block' }
})
}}
iconFront='XCircle'
title={t('shared.header.actions.account.block.button', {
acct: account.acct
})}
/>
<MenuRow
onPress={() => {
analytics('timeline_shared_headeractions_account_reports_press', {
page: queryKey && queryKey[1].page
})
dismiss()
mutateion.mutate({
type: 'updateAccountProperty',
queryKey,
id: account.id,
payload: { property: 'reports' }
})
}}
iconFront='Flag'
title={t('shared.header.actions.account.reports.button', {
acct: account.acct
})}
/>
</MenuContainer>
)
}
export default ActionsAccount

83
src/screens/Actions/Domain.tsx Normal file
View File

@ -0,0 +1,83 @@
import analytics from '@components/analytics'
import MenuContainer from '@components/Menu/Container'
import MenuHeader from '@components/Menu/Header'
import MenuRow from '@components/Menu/Row'
import { toast } from '@components/toast'
import {
QueryKeyTimeline,
useTimelineMutation
} from '@utils/queryHooks/timeline'
import React from 'react'
import { useTranslation } from 'react-i18next'
import { Alert } from 'react-native'
import { useQueryClient } from 'react-query'
export interface Props {
queryKey: QueryKeyTimeline
domain: string
dismiss: () => void
}
const ActionsDomain: React.FC<Props> = ({ queryKey, domain, dismiss }) => {
const { t } = useTranslation('componentTimeline')
const queryClient = useQueryClient()
const mutation = useTimelineMutation({
queryClient,
onSettled: () => {
toast({
type: 'success',
message: t('common:toastMessage.success.message', {
function: t(`shared.header.actions.domain.block.function`)
})
})
queryClient.invalidateQueries(queryKey)
}
})
return (
<MenuContainer>
<MenuHeader heading={t(`shared.header.actions.domain.heading`)} />
<MenuRow
onPress={() => {
analytics('timeline_shared_headeractions_domain_block_press', {
page: queryKey[1].page
})
Alert.alert(
t('shared.header.actions.domain.alert.title', { domain }),
t('shared.header.actions.domain.alert.message'),
[
{
text: t('shared.header.actions.domain.alert.buttons.cancel'),
style: 'cancel'
},
{
text: t('shared.header.actions.domain.alert.buttons.confirm'),
style: 'destructive',
onPress: () => {
analytics(
'timeline_shared_headeractions_domain_block_confirm',
{
page: queryKey && queryKey[1].page
}
)
dismiss()
mutation.mutate({
type: 'domainBlock',
queryKey,
domain: domain
})
}
}
]
)
}}
iconFront='CloudOff'
title={t(`shared.header.actions.domain.block.button`, {
domain
})}
/>
</MenuContainer>
)
}
export default ActionsDomain

45
src/screens/Actions/Share.tsx Normal file
View File

@ -0,0 +1,45 @@
import analytics from '@components/analytics'
import MenuContainer from '@components/Menu/Container'
import MenuHeader from '@components/Menu/Header'
import MenuRow from '@components/Menu/Row'
import React from 'react'
import { useTranslation } from 'react-i18next'
import { Platform, Share } from 'react-native'
export interface Props {
type: 'status' | 'account'
url: string
dismiss: () => void
}
const ActionsShare: React.FC<Props> = ({ type, url, dismiss }) => {
const { t } = useTranslation('componentTimeline')
return (
<MenuContainer>
<MenuHeader heading={t(`shared.header.actions.share.${type}.heading`)} />
<MenuRow
iconFront='Share2'
title={t(`shared.header.actions.share.${type}.button`)}
onPress={async () => {
analytics('timeline_shared_headeractions_share_press')
switch (Platform.OS) {
case 'ios':
await Share.share({
url
})
break
case 'android':
await Share.share({
message: url
})
break
}
dismiss()
}}
/>
</MenuContainer>
)
}
export default ActionsShare

181
src/screens/Actions/Status.tsx Normal file
View File

@ -0,0 +1,181 @@
import React from 'react'
import { useTranslation } from 'react-i18next'
import { Alert } from 'react-native'
import { useQueryClient } from 'react-query'
import { MenuContainer, MenuHeader, MenuRow } from '@components/Menu'
import { toast } from '@components/toast'
import {
MutationVarsTimelineUpdateStatusProperty,
QueryKeyTimeline,
useTimelineMutation
} from '@utils/queryHooks/timeline'
import analytics from '@components/analytics'
import { StackNavigationProp } from '@react-navigation/stack'
export interface Props {
navigation: StackNavigationProp<Nav.RootStackParamList, 'Screen-Actions'>
queryKey: QueryKeyTimeline
status: Mastodon.Status
dismiss: () => void
}
const ActionsStatus: React.FC<Props> = ({
navigation,
queryKey,
status,
dismiss
}) => {
const { t } = useTranslation('componentTimeline')
const queryClient = useQueryClient()
const mutation = useTimelineMutation({
queryClient,
onMutate: true,
onError: (err: any, params, oldData) => {
const theFunction = (params as MutationVarsTimelineUpdateStatusProperty)
.payload
? (params as MutationVarsTimelineUpdateStatusProperty).payload.property
: 'delete'
toast({
type: 'error',
message: t('common:toastMessage.error.message', {
function: t(`shared.header.actions.status.${theFunction}.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)
}
})
return (
<MenuContainer>
<MenuHeader heading={t('shared.header.actions.status.heading')} />
<MenuRow
onPress={() => {
analytics('timeline_shared_headeractions_status_delete_press', {
page: queryKey && queryKey[1].page
})
dismiss()
mutation.mutate({
type: 'deleteItem',
source: 'statuses',
queryKey,
id: status.id
})
}}
iconFront='Trash'
title={t('shared.header.actions.status.delete.button')}
/>
<MenuRow
onPress={() => {
analytics('timeline_shared_headeractions_status_deleteedit_press', {
page: queryKey && queryKey[1].page
})
Alert.alert(
t('shared.header.actions.status.edit.alert.title'),
t('shared.header.actions.status.edit.alert.message'),
[
{
text: t(
'shared.header.actions.status.edit.alert.buttons.cancel'
),
style: 'cancel'
},
{
text: t(
'shared.header.actions.status.edit.alert.buttons.confirm'
),
style: 'destructive',
onPress: async () => {
analytics(
'timeline_shared_headeractions_status_deleteedit_confirm',
{
page: queryKey && queryKey[1].page
}
)
dismiss()
const res = (await mutation.mutateAsync({
type: 'deleteItem',
source: 'statuses',
queryKey,
id: status.id
})) as Mastodon.Status
if (res.id) {
navigation.navigate('Screen-Compose', {
type: 'edit',
incomingStatus: res,
queryKey
})
}
}
}
]
)
}}
iconFront='Edit'
title={t('shared.header.actions.status.edit.button')}
/>
<MenuRow
onPress={() => {
analytics('timeline_shared_headeractions_status_mute_press', {
page: queryKey && queryKey[1].page
})
dismiss()
mutation.mutate({
type: 'updateStatusProperty',
queryKey,
id: status.id,
payload: {
property: 'muted',
currentValue: status.muted,
propertyCount: undefined,
countValue: undefined
}
})
}}
iconFront='VolumeX'
title={
status.muted
? t('shared.header.actions.status.mute.button.negative')
: t('shared.header.actions.status.mute.button.positive')
}
/>
{/* Also note that reblogs cannot be pinned. */}
{(status.visibility === 'public' || status.visibility === 'unlisted') && (
<MenuRow
onPress={() => {
analytics('timeline_shared_headeractions_status_pin_press', {
page: queryKey && queryKey[1].page
})
dismiss()
mutation.mutate({
type: 'updateStatusProperty',
queryKey,
id: status.id,
payload: {
property: 'pinned',
currentValue: status.pinned,
propertyCount: undefined,
countValue: undefined
}
})
}}
iconFront='Anchor'
title={
status.pinned
? t('shared.header.actions.status.pin.button.negative')
: t('shared.header.actions.status.pin.button.positive')
}
/>
)}
</MenuContainer>
)
}
export default ActionsStatus

107
src/screens/Shared/Announcements.tsx → src/screens/Announcements.tsx
View File

@ -3,7 +3,8 @@ import Button from '@components/Button'
import haptics from '@components/haptics'
import { ParseHTML } from '@components/Parse'
import RelativeTime from '@components/RelativeTime'
import { useBottomTabBarHeight } from '@react-navigation/bottom-tabs'
import { BlurView } from '@react-native-community/blur'
import { StackScreenProps } from '@react-navigation/stack'
import {
useAnnouncementMutation,
useAnnouncementQuery
@ -23,16 +24,19 @@ import {
import { Chase } from 'react-native-animated-spinkit'
import { FlatList, ScrollView } from 'react-native-gesture-handler'
import { SafeAreaView } from 'react-native-safe-area-context'
import { SharedAnnouncementsProp } from './sharedScreens'
const ScreenSharedAnnouncements: React.FC<SharedAnnouncementsProp> = ({
export type ScreenAnnouncementsProp = StackScreenProps<
Nav.RootStackParamList,
'Screen-Announcements'
>
const ScreenAnnouncements: React.FC<ScreenAnnouncementsProp> = ({
route: {
params: { showAll = false }
},
navigation
}) => {
const { theme } = useTheme()
const bottomTabBarHeight = useBottomTabBarHeight()
const { mode, theme } = useTheme()
const [index, setIndex] = useState(0)
const { t } = useTranslation('sharedAnnouncements')
@ -60,13 +64,7 @@ const ScreenSharedAnnouncements: React.FC<SharedAnnouncementsProp> = ({
const renderItem = useCallback(
({ item, index }: { item: Mastodon.Announcement; index: number }) => (
<View
key={index}
style={[
styles.announcementContainer,
{ backgroundColor: theme.background }
]}
>
<View key={index} style={styles.announcementContainer}>
<Pressable
style={styles.pressable}
onPress={() => navigation.goBack()}
@ -199,40 +197,44 @@ const ScreenSharedAnnouncements: React.FC<SharedAnnouncementsProp> = ({
}, [])
return (
<SafeAreaView style={[styles.base, { backgroundColor: theme.background }]}>
<View style={[styles.header, { height: bottomTabBarHeight }]}>
<Text style={[styles.headerText, { color: theme.primary }]}>公告</Text>
</View>
<FlatList
horizontal
data={query.data}
pagingEnabled
renderItem={renderItem}
showsHorizontalScrollIndicator={false}
onMomentumScrollEnd={onMomentumScrollEnd}
ListEmptyComponent={ListEmptyComponent}
/>
<View style={[styles.indicators, { height: bottomTabBarHeight }]}>
{query.data && query.data.length > 1 ? (
<>
{query.data.map((d, i) => (
<View
key={i}
style={[
styles.indicator,
{
borderColor: theme.primary,
backgroundColor: i === index ? theme.primary : undefined,
marginLeft:
i === query.data.length ? 0 : StyleConstants.Spacing.S
}
]}
/>
))}
</>
) : null}
</View>
</SafeAreaView>
<BlurView
blurType={mode}
blurAmount={20}
style={styles.base}
reducedTransparencyFallbackColor={theme.background}
>
<SafeAreaView style={styles.base}>
<FlatList
horizontal
data={query.data}
pagingEnabled
renderItem={renderItem}
showsHorizontalScrollIndicator={false}
onMomentumScrollEnd={onMomentumScrollEnd}
ListEmptyComponent={ListEmptyComponent}
/>
<View style={[styles.indicators]}>
{query.data && query.data.length > 1 ? (
<>
{query.data.map((d, i) => (
<View
key={i}
style={[
styles.indicator,
{
borderColor: theme.primary,
backgroundColor: i === index ? theme.primary : undefined,
marginLeft:
i === query.data.length ? 0 : StyleConstants.Spacing.S
}
]}
/>
))}
</>
) : null}
</View>
</SafeAreaView>
</BlurView>
)
}
@ -241,14 +243,6 @@ const styles = StyleSheet.create({
flex: 1
},
invisibleTextInput: { ...StyleSheet.absoluteFillObject },
header: {
justifyContent: 'center',
alignItems: 'center'
},
headerText: {
...StyleConstants.FontStyle.L,
fontWeight: StyleConstants.Font.Weight.Bold
},
announcementContainer: {
width: Dimensions.get('screen').width,
padding: StyleConstants.Spacing.Global.PagePadding,
@ -297,7 +291,8 @@ const styles = StyleSheet.create({
indicators: {
flexDirection: 'row',
justifyContent: 'center',
alignItems: 'center'
alignItems: 'center',
minHeight: 49
},
indicator: {
width: StyleConstants.Spacing.S,
@ -307,4 +302,4 @@ const styles = StyleSheet.create({
}
})
export default ScreenSharedAnnouncements
export default ScreenAnnouncements

26
src/screens/Shared/Compose.tsx → src/screens/Compose.tsx
View File

@ -1,9 +1,10 @@
import analytics from '@components/analytics'
import { HeaderLeft, HeaderRight } from '@components/Header'
import { StackScreenProps } from '@react-navigation/stack'
import haptics from '@root/components/haptics'
import { store } from '@root/store'
import formatText from '@screens/Shared/Compose/formatText'
import ComposeRoot from '@screens/Shared/Compose/Root'
import formatText from '@screens/Compose/formatText'
import ComposeRoot from '@screens/Compose/Root'
import { QueryKeyTimeline } from '@utils/queryHooks/timeline'
import { updateStoreReview } from '@utils/slices/contextsSlice'
import { getLocalAccount } from '@utils/slices/instancesSlice'
@ -30,11 +31,15 @@ import composeInitialState from './Compose/utils/initialState'
import composeParseState from './Compose/utils/parseState'
import composePost from './Compose/utils/post'
import composeReducer from './Compose/utils/reducer'
import { SharedComposeProp } from './sharedScreens'
export type ScreenComposeProp = StackScreenProps<
Nav.RootStackParamList,
'Screen-Compose'
>
const Stack = createNativeStackNavigator()
const Compose: React.FC<SharedComposeProp> = ({
const ScreenCompose: React.FC<ScreenComposeProp> = ({
route: { params },
navigation
}) => {
@ -224,22 +229,22 @@ const Compose: React.FC<SharedComposeProp> = ({
return (
<KeyboardAvoidingView
style={styles.base}
behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
style={{ flex: 1 }}
>
<SafeAreaView
style={{ flex: 1 }}
edges={hasKeyboard ? ['left', 'right'] : ['left', 'right', 'bottom']}
style={styles.base}
edges={hasKeyboard ? ['top'] : ['top', 'bottom']}
>
<ComposeContext.Provider value={{ composeState, composeDispatch }}>
<Stack.Navigator screenOptions={{ headerTopInsetEnabled: false }}>
<Stack.Screen
name='Screen-Shared-Compose-Root'
name='Tab-Compose-Root'
component={ComposeRoot}
options={{ headerLeft, headerCenter, headerRight }}
/>
<Stack.Screen
name='Screen-Shared-Compose-EditAttachment'
name='Tab-Compose-EditAttachment'
component={ComposeEditAttachment}
options={{ stackPresentation: 'modal', headerShown: false }}
/>
@ -251,10 +256,11 @@ const Compose: React.FC<SharedComposeProp> = ({
}
const styles = StyleSheet.create({
base: { flex: 1 },
count: {
textAlign: 'center',
...StyleConstants.FontStyle.M
}
})
export default Compose
export default ScreenCompose

2
src/screens/Shared/Compose/EditAttachment.tsx → src/screens/Compose/EditAttachment.tsx
View File

@ -168,7 +168,7 @@ const ComposeEditAttachment: React.FC<Props> = ({
<SafeAreaView style={{ flex: 1 }} edges={['left', 'right', 'bottom']}>
<Stack.Navigator screenOptions={{ headerTopInsetEnabled: false }}>
<Stack.Screen
name='Screen-Shared-Compose-EditAttachment-Root'
name='Screen-Compose-EditAttachment-Root'
children={children}
options={{ headerLeft, headerRight, headerCenter: () => null }}
/>

0
src/screens/Shared/Compose/EditAttachment/Image.tsx → src/screens/Compose/EditAttachment/Image.tsx
View File

0
src/screens/Shared/Compose/EditAttachment/Root.tsx → src/screens/Compose/EditAttachment/Root.tsx
View File

0
src/screens/Shared/Compose/Posting.tsx → src/screens/Compose/Posting.tsx
View File

0
src/screens/Shared/Compose/Root.tsx → src/screens/Compose/Root.tsx
View File

0
src/screens/Shared/Compose/Root/Actions.tsx → src/screens/Compose/Root/Actions.tsx
View File

10
src/screens/Shared/Compose/Root/Footer.tsx → src/screens/Compose/Root/Footer.tsx
View File

@ -1,9 +1,9 @@
import React, { useContext } from 'react'
import ComposeAttachments from '@screens/Shared/Compose/Root/Footer/Attachments'
import ComposeEmojis from '@screens/Shared/Compose/Root/Footer/Emojis'
import ComposePoll from '@screens/Shared/Compose/Root/Footer/Poll'
import ComposeReply from '@screens/Shared/Compose/Root/Footer/Reply'
import ComposeContext from '@screens/Shared/Compose//utils/createContext'
import ComposeAttachments from '@screens/Compose/Root/Footer/Attachments'
import ComposeEmojis from '@screens/Compose/Root/Footer/Emojis'
import ComposePoll from '@screens/Compose/Root/Footer/Poll'
import ComposeReply from '@screens/Compose/Root/Footer/Reply'
import ComposeContext from '@screens/Compose/utils/createContext'
const ComposeRootFooter: React.FC = () => {
const { composeState } = useContext(ComposeContext)

2
src/screens/Shared/Compose/Root/Footer/Attachments.tsx → src/screens/Compose/Root/Footer/Attachments.tsx
View File

@ -177,7 +177,7 @@ const ComposeAttachments: React.FC = () => {
overlay
onPress={() => {
analytics('compose_attachment_edit')
navigation.navigate('Screen-Shared-Compose-EditAttachment', {
navigation.navigate('Screen-Compose-EditAttachment', {
index
})
}}

0
src/screens/Shared/Compose/Root/Footer/Emojis.tsx → src/screens/Compose/Root/Footer/Emojis.tsx
View File

0
src/screens/Shared/Compose/Root/Footer/Poll.tsx → src/screens/Compose/Root/Footer/Poll.tsx
View File

0
src/screens/Shared/Compose/Root/Footer/Reply.tsx → src/screens/Compose/Root/Footer/Reply.tsx
View File

0
src/screens/Shared/Compose/Root/Footer/addAttachment.ts → src/screens/Compose/Root/Footer/addAttachment.ts
View File

0
src/screens/Shared/Compose/Root/Header.tsx → src/screens/Compose/Root/Header.tsx
View File

0
src/screens/Shared/Compose/Root/Header/PostingAs.tsx → src/screens/Compose/Root/Header/PostingAs.tsx
View File

0
src/screens/Shared/Compose/Root/Header/SpoilerInput.tsx → src/screens/Compose/Root/Header/SpoilerInput.tsx
View File

0
src/screens/Shared/Compose/Root/Header/TextInput.tsx → src/screens/Compose/Root/Header/TextInput.tsx
View File

0
src/screens/Shared/Compose/Root/Suggestion.tsx → src/screens/Compose/Root/Suggestion.tsx
View File

0
src/screens/Shared/Compose/formatText.tsx → src/screens/Compose/formatText.tsx
View File

0
src/screens/Shared/Compose/updateText.ts → src/screens/Compose/updateText.ts
View File

0
src/screens/Shared/Compose/utils/createContext.ts → src/screens/Compose/utils/createContext.ts
View File

0
src/screens/Shared/Compose/utils/initialState.ts → src/screens/Compose/utils/initialState.ts
View File

2
src/screens/Shared/Compose/utils/parseState.ts → src/screens/Compose/utils/parseState.ts
View File

@ -4,7 +4,7 @@ import composeInitialState from './initialState'
import { ComposeState } from './types'
const composeParseState = (
params: NonNullable<Nav.SharedStackParamList['Screen-Shared-Compose']>
params: NonNullable<Nav.SharedStackParamList['Screen-Compose']>
): ComposeState => {
switch (params.type) {
case 'edit':

4
src/screens/Shared/Compose/utils/post.ts → src/screens/Compose/utils/post.ts
View File

@ -1,6 +1,6 @@
import client from '@root/api/client'
import { ComposeState } from '@screens/Shared/Compose/utils/types'
import { SharedComposeProp } from '@screens/Shared/sharedScreens'
import { ComposeState } from '@screens/Compose/utils/types'
import { SharedComposeProp } from '@screens/Tabs/Shared/sharedScreens'
import * as Crypto from 'expo-crypto'
const composePost = async (

0
src/screens/Shared/Compose/utils/reducer.ts → src/screens/Compose/utils/reducer.ts
View File

0
src/screens/Shared/Compose/utils/types.d.ts → src/screens/Compose/utils/types.d.ts vendored
View File

93
src/screens/ImagesViewer.tsx Normal file
View File

@ -0,0 +1,93 @@
import analytics from '@components/analytics'
import { HeaderRight } from '@components/Header'
import { StackScreenProps } from '@react-navigation/stack'
import { StyleConstants } from '@utils/styles/constants'
import { useTheme } from '@utils/styles/ThemeManager'
import { findIndex } from 'lodash'
import React, { useCallback, useLayoutEffect, useState } from 'react'
import { Platform, Share, StyleSheet, Text } from 'react-native'
import FastImage from 'react-native-fast-image'
import ImageViewer from 'react-native-image-zoom-viewer'
import { SharedElement } from 'react-navigation-shared-element'
export type ScreenImagesViewerProp = StackScreenProps<
Nav.RootStackParamList,
'Screen-ImagesViewer'
>
const ScreenImagesViewer = React.memo(
({
route: {
params: { imageUrls, imageIndex }
},
navigation
}: ScreenImagesViewerProp) => {
const { theme } = useTheme()
const [currentIndex, setCurrentIndex] = useState(
findIndex(imageUrls, ['imageIndex', imageIndex])
)
const onPress = useCallback(() => {
analytics('imageviewer_share_press')
switch (Platform.OS) {
case 'ios':
return Share.share({ url: imageUrls[currentIndex].url })
case 'android':
return Share.share({ message: imageUrls[currentIndex].url })
}
}, [currentIndex])
useLayoutEffect(
() =>
navigation.setOptions({
headerTitle: () => (
<Text
style={[styles.headerCenter, { color: theme.primaryOverlay }]}
>
{currentIndex + 1} / {imageUrls.length}
</Text>
),
headerRight: () => (
<HeaderRight content='Share' native={false} onPress={onPress} />
)
}),
[currentIndex]
)
const renderImage = useCallback(
prop => (
<SharedElement id={`image.${imageUrls[imageIndex].url}`}>
<FastImage {...prop} resizeMode={'contain'} />
</SharedElement>
),
[]
)
return (
<ImageViewer
index={currentIndex}
imageUrls={imageUrls}
pageAnimateTime={250}
enableSwipeDown
useNativeDriver
swipeDownThreshold={100}
renderIndicator={() => <></>}
saveToLocalByLongPress={false}
onSwipeDown={() => navigation.goBack()}
style={{ flex: 1 }}
onChange={index => index !== undefined && setCurrentIndex(index)}
renderImage={renderImage}
/>
)
},
() => true
)
const styles = StyleSheet.create({
headerCenter: {
color: 'white',
...StyleConstants.FontStyle.M
}
})
export default ScreenImagesViewer

99
src/screens/Shared/ImagesViewer.tsx
View File

@ -1,99 +0,0 @@
import analytics from '@components/analytics'
import { HeaderLeft, HeaderRight } from '@components/Header'
import { StyleConstants } from '@utils/styles/constants'
import { findIndex } from 'lodash'
import React, { useCallback, useState } from 'react'
import {
Image,
Platform,
Share,
StatusBar,
StyleSheet,
Text
} from 'react-native'
import ImageViewer from 'react-native-image-zoom-viewer'
import { useSafeAreaInsets } from 'react-native-safe-area-context'
import { createNativeStackNavigator } from 'react-native-screens/native-stack'
import { SharedImagesViewerProp } from './sharedScreens'
const Stack = createNativeStackNavigator()
const ScreenSharedImagesViewer: React.FC<SharedImagesViewerProp> = ({
route: {
params: { imageUrls, imageIndex }
},
navigation
}) => {
const safeAreaInsets = useSafeAreaInsets()
const initialIndex = findIndex(imageUrls, ['imageIndex', imageIndex])
const [currentIndex, setCurrentIndex] = useState(initialIndex)
const component = useCallback(
() => (
<>
<StatusBar barStyle='light-content' />
<ImageViewer
index={initialIndex}
imageUrls={imageUrls}
pageAnimateTime={250}
enableSwipeDown
useNativeDriver
swipeDownThreshold={100}
renderIndicator={() => <></>}
saveToLocalByLongPress={false}
onSwipeDown={() => navigation.goBack()}
style={{ flex: 1, marginBottom: 44 + safeAreaInsets.bottom }}
onChange={index => index !== undefined && setCurrentIndex(index)}
renderImage={prop => {
return <Image {...prop} resizeMode={'contain'} />
}}
/>
</>
),
[]
)
const onPress = useCallback(() => {
analytics('imageviewer_share_press')
switch (Platform.OS) {
case 'ios':
return Share.share({ url: imageUrls[currentIndex].url })
case 'android':
return Share.share({ message: imageUrls[currentIndex].url })
}
}, [currentIndex])
return (
<Stack.Navigator
screenOptions={{ headerHideShadow: true, headerTopInsetEnabled: false }}
>
<Stack.Screen
name='Screen-Shared-ImagesViewer-Root'
component={component}
options={{
contentStyle: { backgroundColor: 'black' },
headerStyle: { backgroundColor: 'black' },
headerLeft: () => (
<HeaderLeft content='X' onPress={() => navigation.goBack()} />
),
headerCenter: () => (
<Text style={styles.headerCenter}>
{currentIndex + 1} / {imageUrls.length}
</Text>
),
headerRight: () => <HeaderRight content='Share' onPress={onPress} />
}}
/>
</Stack.Navigator>
)
}
const styles = StyleSheet.create({
headerCenter: {
color: 'white',
...StyleConstants.FontStyle.M
}
})
export default React.memo(ScreenSharedImagesViewer, () => true)

73
src/screens/Shared/Relationships.tsx
View File

@ -1,73 +0,0 @@
import SegmentedControl from '@react-native-community/segmented-control'
import { useNavigation } from '@react-navigation/native'
import { useTheme } from '@utils/styles/ThemeManager'
import React, { useEffect, useState } from 'react'
import { useTranslation } from 'react-i18next'
import { Dimensions, StyleSheet, View } from 'react-native'
import { TabView } from 'react-native-tab-view'
import RelationshipsList from './Relationships/List'
import { SharedRelationshipsProp } from './sharedScreens'
const ScreenSharedRelationships: React.FC<SharedRelationshipsProp> = ({
route: {
params: { account, initialType }
}
}) => {
const { t } = useTranslation('sharedRelationships')
const { mode } = useTheme()
const navigation = useNavigation()
const [segment, setSegment] = useState(initialType === 'following' ? 0 : 1)
useEffect(() => {
const updateHeaderRight = () =>
navigation.setOptions({
headerCenter: () => (
<View style={styles.segmentsContainer}>
<SegmentedControl
appearance={mode}
values={[t('heading.segments.left'), t('heading.segments.right')]}
selectedIndex={segment}
onChange={({ nativeEvent }) =>
setSegment(nativeEvent.selectedSegmentIndex)
}
/>
</View>
)
})
return updateHeaderRight()
}, [segment, mode])
const routes: {
key: SharedRelationshipsProp['route']['params']['initialType']
}[] = [{ key: 'following' }, { key: 'followers' }]
const renderScene = ({
route
}: {
route: {
key: SharedRelationshipsProp['route']['params']['initialType']
}
}) => {
return <RelationshipsList id={account.id} type={route.key} />
}
return (
<TabView
lazy
swipeEnabled
renderScene={renderScene}
renderTabBar={() => null}
onIndexChange={index => setSegment(index)}
navigationState={{ index: segment, routes }}
initialLayout={{ width: Dimensions.get('screen').width }}
/>
)
}
const styles = StyleSheet.create({
segmentsContainer: {
flexBasis: '60%'
}
})
export default React.memo(ScreenSharedRelationships, () => true)

213
src/screens/Tabs.tsx Normal file
View File

@ -0,0 +1,213 @@
import haptics from '@components/haptics'
import Icon from '@components/Icon'
import {
BottomTabNavigationOptions,
createBottomTabNavigator
} from '@react-navigation/bottom-tabs'
import { NavigatorScreenParams } from '@react-navigation/native'
import { StackScreenProps } from '@react-navigation/stack'
import { useTimelineQuery } from '@utils/queryHooks/timeline'
import {
getLocalAccount,
getLocalActiveIndex,
getLocalNotification,
localUpdateNotification
} from '@utils/slices/instancesSlice'
import { useTheme } from '@utils/styles/ThemeManager'
import React, { useCallback, useEffect, useMemo } from 'react'
import { Platform } from 'react-native'
import FastImage from 'react-native-fast-image'
import { useDispatch, useSelector } from 'react-redux'
import TabLocal from './Tabs/Local'
import TabMe from './Tabs/Me'
import TabNotifications from './Tabs/Notifications'
import TabPublic from './Tabs/Public'
export type ScreenTabsParamList = {
'Tab-Local': NavigatorScreenParams<Nav.TabLocalStackParamList>
'Tab-Public': NavigatorScreenParams<Nav.TabPublicStackParamList>
'Tab-Compose': NavigatorScreenParams<Nav.TabComposeStackParamList>
'Tab-Notifications': NavigatorScreenParams<Nav.TabNotificationsStackParamList>
'Tab-Me': NavigatorScreenParams<Nav.TabMeStackParamList>
}
export type ScreenTabsProp = StackScreenProps<
Nav.RootStackParamList,
'Screen-Tabs'
>
const Tab = createBottomTabNavigator<Nav.ScreenTabsStackParamList>()
const ScreenTabs: React.FC<ScreenTabsProp> = ({ navigation }) => {
const { theme } = useTheme()
const dispatch = useDispatch()
const localActiveIndex = useSelector(getLocalActiveIndex)
const localAccount = useSelector(getLocalAccount)
const screenOptions = useCallback(
({ route }): BottomTabNavigationOptions => ({
tabBarIcon: ({
focused,
color,
size
}: {
focused: boolean
color: string
size: number
}) => {
switch (route.name) {
case 'Tab-Local':
return <Icon name='Home' size={size} color={color} />
case 'Tab-Public':
return <Icon name='Globe' size={size} color={color} />
case 'Tab-Compose':
return <Icon name='Plus' size={size} color={color} />
case 'Tab-Notifications':
return <Icon name='Bell' size={size} color={color} />
case 'Tab-Me':
return localActiveIndex !== null ? (
<FastImage
source={{ uri: localAccount?.avatarStatic }}
style={{
width: size,
height: size,
borderRadius: size,
borderWidth: focused ? 2 : 0,
borderColor: focused ? theme.secondary : color
}}
/>
) : (
<Icon
name={focused ? 'Meh' : 'Smile'}
size={size}
color={!focused ? theme.secondary : color}
/>
)
default:
return <Icon name='AlertOctagon' size={size} color={color} />
}
}
}),
[localActiveIndex, localAccount]
)
const tabNavigatorTabBarOptions = useMemo(
() => ({
activeTintColor: theme.primary,
inactiveTintColor:
localActiveIndex !== null ? theme.secondary : theme.disabled,
showLabel: false,
...(Platform.OS === 'android' && { keyboardHidesTabBar: true })
}),
[theme, localActiveIndex]
)
const tabScreenLocalListeners = useCallback(
() => ({
tabPress: (e: any) => {
if (!(localActiveIndex !== null)) {
e.preventDefault()
}
}
}),
[localActiveIndex]
)
const tabScreenComposeListeners = useMemo(
() => ({
tabPress: (e: any) => {
e.preventDefault()
if (localActiveIndex !== null) {
haptics('Light')
navigation.navigate('Screen-Compose')
}
}
}),
[localActiveIndex]
)
const tabScreenComposeComponent = useCallback(() => null, [])
const tabScreenNotificationsListeners = useCallback(
() => ({
tabPress: (e: any) => {
if (!(localActiveIndex !== null)) {
e.preventDefault()
}
}
}),
[localActiveIndex]
)
// On launch check if there is any unread noficiations
const queryNotification = useTimelineQuery({
page: 'Notifications',
options: {
enabled: localActiveIndex !== null ? true : false,
refetchInterval: 1000 * 60,
refetchIntervalInBackground: true
}
})
const prevNotification = useSelector(getLocalNotification)
useEffect(() => {
if (queryNotification.data?.pages) {
const flattenData = queryNotification.data.pages.flatMap(d => [...d])
const latestNotificationTime = flattenData.length
? (flattenData[0] as Mastodon.Notification).created_at
: undefined
if (!prevNotification || !prevNotification.latestTime) {
dispatch(localUpdateNotification({ unread: false }))
} else if (
latestNotificationTime &&
new Date(prevNotification.latestTime) < new Date(latestNotificationTime)
) {
dispatch(
localUpdateNotification({
unread: true,
latestTime: latestNotificationTime
})
)
}
}
}, [queryNotification.data?.pages])
return (
<Tab.Navigator
initialRouteName={localActiveIndex !== null ? 'Tab-Local' : 'Tab-Me'}
screenOptions={screenOptions}
tabBarOptions={tabNavigatorTabBarOptions}
>
<Tab.Screen
name='Tab-Local'
component={TabLocal}
listeners={tabScreenLocalListeners}
/>
<Tab.Screen name='Tab-Public' component={TabPublic} />
<Tab.Screen
name='Tab-Compose'
component={tabScreenComposeComponent}
listeners={tabScreenComposeListeners}
/>
<Tab.Screen
name='Tab-Notifications'
component={TabNotifications}
listeners={tabScreenNotificationsListeners}
options={
prevNotification && prevNotification.unread
? {
tabBarBadge: '',
tabBarBadgeStyle: {
transform: [{ scale: 0.5 }],
backgroundColor: theme.red
}
}
: {
tabBarBadgeStyle: {
transform: [{ scale: 0.5 }],
backgroundColor: theme.red
}
}
}
/>
<Tab.Screen name='Tab-Me' component={TabMe} />
</Tab.Navigator>
)
}
export default ScreenTabs

33
src/screens/Local.tsx → src/screens/Tabs/Local.tsx
View File

@ -1,7 +1,8 @@
import analytics from '@components/analytics'
import { HeaderCenter, HeaderRight } from '@components/Header'
import Timeline from '@components/Timelines/Timeline'
import { useNavigation } from '@react-navigation/native'
import { BottomTabScreenProps } from '@react-navigation/bottom-tabs'
import { ScreenTabsParamList } from '@screens/Tabs'
import { getLocalActiveIndex } from '@utils/slices/instancesSlice'
import React, { useCallback } from 'react'
import { useTranslation } from 'react-i18next'
@ -10,26 +11,27 @@ import { createNativeStackNavigator } from 'react-native-screens/native-stack'
import { useSelector } from 'react-redux'
import sharedScreens from './Shared/sharedScreens'
const Stack = createNativeStackNavigator<Nav.LocalStackParamList>()
export type TabLocalProp = BottomTabScreenProps<
ScreenTabsParamList,
'Tab-Local'
>
const ScreenLocal = React.memo(
() => {
const Stack = createNativeStackNavigator<Nav.TabLocalStackParamList>()
const TabLocal = React.memo(
({ navigation }: TabLocalProp) => {
const { t } = useTranslation('local')
const navigation = useNavigation()
const localActiveIndex = useSelector(getLocalActiveIndex)
const onPressSearch = useCallback(() => {
analytics('search_tap', { page: 'Local' })
navigation.navigate('Screen-Local', { screen: 'Screen-Shared-Search' })
navigation.navigate('Tab-Local', { screen: 'Tab-Shared-Search' })
}, [])
return (
<Stack.Navigator
<Stack.Navigator
screenOptions={{
headerLeft: () => null,
headerRight: () => (
<HeaderRight content='Search' onPress={onPressSearch} />
),
headerTitle: t('heading'),
...(Platform.OS === 'android' && {
headerCenter: () => <HeaderCenter content={t('heading')} />
@ -38,7 +40,14 @@ const ScreenLocal = React.memo(
headerTopInsetEnabled: false
}}
>
<Stack.Screen name='Screen-Local-Root'>
<Stack.Screen
name='Tab-Local-Root'
options={{
headerRight: () => (
<HeaderRight content='Search' onPress={onPressSearch} />
)
}}
>
{() =>
localActiveIndex !== null ? <Timeline page='Following' /> : null
}
@ -51,4 +60,4 @@ const ScreenLocal = React.memo(
() => true
)
export default ScreenLocal
export default TabLocal

42
src/screens/Me.tsx → src/screens/Tabs/Me.tsx
View File

@ -1,21 +1,21 @@
import { HeaderCenter, HeaderLeft } from '@components/Header'
import ScreenMeBookmarks from '@screens/Me/Bookmarks'
import ScreenMeConversations from '@screens/Me/Cconversations'
import ScreenMeFavourites from '@screens/Me/Favourites'
import ScreenMeLists from '@screens/Me/Lists'
import ScreenMeRoot from '@screens/Me/Root'
import ScreenMeListsList from '@screens/Me/Root/Lists/List'
import ScreenMeSettings from '@screens/Me/Settings'
import ScreenMeSwitch from '@screens/Me/Switch'
import sharedScreens from '@screens/Shared/sharedScreens'
import ScreenMeBookmarks from '@screens/Tabs/Me/Bookmarks'
import ScreenMeConversations from '@screens/Tabs/Me/Cconversations'
import ScreenMeFavourites from '@screens/Tabs/Me/Favourites'
import ScreenMeLists from '@screens/Tabs/Me/Lists'
import ScreenMeRoot from '@screens/Tabs/Me/Root'
import ScreenMeListsList from '@screens/Tabs/Me/Root/Lists/List'
import ScreenMeSettings from '@screens/Tabs/Me/Settings'
import ScreenMeSwitch from '@screens/Tabs/Me/Switch'
import sharedScreens from '@screens/Tabs/Shared/sharedScreens'
import React from 'react'
import { useTranslation } from 'react-i18next'
import { Platform } from 'react-native'
import { createNativeStackNavigator } from 'react-native-screens/native-stack'
const Stack = createNativeStackNavigator<Nav.MeStackParamList>()
const Stack = createNativeStackNavigator<Nav.TabMeStackParamList>()
const ScreenMe: React.FC = () => {
const TabMe: React.FC = () => {
const { t } = useTranslation()
return (
@ -23,7 +23,7 @@ const ScreenMe: React.FC = () => {
screenOptions={{ headerHideShadow: true, headerTopInsetEnabled: false }}
>
<Stack.Screen
name='Screen-Me-Root'
name='Tab-Me-Root'
component={ScreenMeRoot}
options={{
headerTranslucent: true,
@ -32,7 +32,7 @@ const ScreenMe: React.FC = () => {
}}
/>
<Stack.Screen
name='Screen-Me-Bookmarks'
name='Tab-Me-Bookmarks'
component={ScreenMeBookmarks}
options={({ navigation }: any) => ({
headerTitle: t('meBookmarks:heading'),
@ -45,7 +45,7 @@ const ScreenMe: React.FC = () => {
})}
/>
<Stack.Screen
name='Screen-Me-Conversations'
name='Tab-Me-Conversations'
component={ScreenMeConversations}
options={({ navigation }: any) => ({
headerTitle: t('meConversations:heading'),
@ -58,7 +58,7 @@ const ScreenMe: React.FC = () => {
})}
/>
<Stack.Screen
name='Screen-Me-Favourites'
name='Tab-Me-Favourites'
component={ScreenMeFavourites}
options={({ navigation }: any) => ({
headerTitle: t('meFavourites:heading'),
@ -71,7 +71,7 @@ const ScreenMe: React.FC = () => {
})}
/>
<Stack.Screen
name='Screen-Me-Lists'
name='Tab-Me-Lists'
component={ScreenMeLists}
options={({ navigation }: any) => ({
headerTitle: t('meLists:heading'),
@ -82,7 +82,7 @@ const ScreenMe: React.FC = () => {
})}
/>
<Stack.Screen
name='Screen-Me-Lists-List'
name='Tab-Me-Lists-List'
component={ScreenMeListsList}
options={({ route, navigation }: any) => ({
headerTitle: t('meListsList:heading', { list: route.params.title }),
@ -97,7 +97,7 @@ const ScreenMe: React.FC = () => {
})}
/>
<Stack.Screen
name='Screen-Me-Settings'
name='Tab-Me-Settings'
component={ScreenMeSettings}
options={({ navigation }: any) => ({
headerTitle: t('meSettings:heading'),
@ -110,10 +110,10 @@ const ScreenMe: React.FC = () => {
})}
/>
<Stack.Screen
name='Screen-Me-Switch'
name='Tab-Me-Switch'
component={ScreenMeSwitch}
options={({ navigation }: any) => ({
stackPresentation: 'fullScreenModal',
stackPresentation: 'modal',
headerShown: false,
headerLeft: () => <HeaderLeft onPress={() => navigation.pop(1)} />
})}
@ -124,4 +124,4 @@ const ScreenMe: React.FC = () => {
)
}
export default ScreenMe
export default TabMe

0
src/screens/Me/Bookmarks.tsx → src/screens/Tabs/Me/Bookmarks.tsx
View File

0
src/screens/Me/Cconversations.tsx → src/screens/Tabs/Me/Cconversations.tsx
View File

0
src/screens/Me/Favourites.tsx → src/screens/Tabs/Me/Favourites.tsx
View File

10
src/screens/Me/Lists.tsx → src/screens/Tabs/Me/Lists.tsx
View File

@ -1,11 +1,13 @@
import { MenuRow } from '@components/Menu'
import { useNavigation } from '@react-navigation/native'
import { StackScreenProps } from '@react-navigation/stack'
import TimelineEmpty from '@root/components/Timelines/Timeline/Empty'
import { useListsQuery } from '@utils/queryHooks/lists'
import React, { useMemo } from 'react'
const ScreenMeLists: React.FC = () => {
const navigation = useNavigation()
const ScreenMeLists: React.FC<StackScreenProps<
Nav.TabMeStackParamList,
'Tab-Me-Switch'
>> = ({ navigation }) => {
const { status, data, refetch } = useListsQuery({})
const children = useMemo(() => {
@ -16,7 +18,7 @@ const ScreenMeLists: React.FC = () => {
iconFront='List'
title={d.title}
onPress={() =>
navigation.navigate('Screen-Me-Lists-List', {
navigation.navigate('Tab-Me-Lists-List', {
list: d.id,
title: d.title
})

33
src/screens/Me/Root.tsx → src/screens/Tabs/Me/Root.tsx
View File

@ -1,31 +1,22 @@
import ComponentInstance from '@components/Instance'
import { useScrollToTop } from '@react-navigation/native'
import Collections from '@screens/Me/Root/Collections'
import MyInfo from '@screens/Me/Root/MyInfo'
import Settings from '@screens/Me/Root/Settings'
import Logout from '@screens/Me/Root/Logout'
import AccountNav from '@screens/Shared/Account/Nav'
import accountReducer from '@screens/Shared/Account/utils/reducer'
import accountInitialState from '@screens/Shared/Account/utils/initialState'
import AccountContext from '@screens/Shared/Account/utils/createContext'
import Collections from '@screens/Tabs/Me/Root/Collections'
import Logout from '@screens/Tabs/Me/Root/Logout'
import MyInfo from '@screens/Tabs/Me/Root/MyInfo'
import Settings from '@screens/Tabs/Me/Root/Settings'
import AccountNav from '@screens/Tabs/Shared/Account/Nav'
import AccountContext from '@screens/Tabs/Shared/Account/utils/createContext'
import accountInitialState from '@screens/Tabs/Shared/Account/utils/initialState'
import accountReducer from '@screens/Tabs/Shared/Account/utils/reducer'
import { getLocalActiveIndex } from '@utils/slices/instancesSlice'
import React, { useEffect, useReducer, useRef, useState } from 'react'
import { useSelector } from 'react-redux'
import React, { useReducer, useRef, useState } from 'react'
import Animated, {
useAnimatedScrollHandler,
useSharedValue
} from 'react-native-reanimated'
import ComponentInstance from '@components/Instance'
import { StackScreenProps } from '@react-navigation/stack'
import { useSelector } from 'react-redux'
const ScreenMeRoot: React.FC<StackScreenProps<
Nav.MeStackParamList,
'Screen-Me-Root'
>> = ({ route: { params }, navigation }) => {
useEffect(() => {
if (params && params.navigateAway) {
navigation.navigate(params.navigateAway)
}
}, [params])
const ScreenMeRoot: React.FC = () => {
const localActiveIndex = useSelector(getLocalActiveIndex)
const scrollRef = useRef<Animated.ScrollView>(null)

10
src/screens/Me/Root/Collections.tsx → src/screens/Tabs/Me/Root/Collections.tsx
View File

@ -27,25 +27,25 @@ const Collections: React.FC = () => {
iconFront='Mail'
iconBack='ChevronRight'
title={t('content.collections.conversations')}
onPress={() => navigation.navigate('Screen-Me-Conversations')}
onPress={() => navigation.navigate('Tab-Me-Conversations')}
/>
<MenuRow
iconFront='Bookmark'
iconBack='ChevronRight'
title={t('content.collections.bookmarks')}
onPress={() => navigation.navigate('Screen-Me-Bookmarks')}
onPress={() => navigation.navigate('Tab-Me-Bookmarks')}
/>
<MenuRow
iconFront='Star'
iconBack='ChevronRight'
title={t('content.collections.favourites')}
onPress={() => navigation.navigate('Screen-Me-Favourites')}
onPress={() => navigation.navigate('Tab-Me-Favourites')}
/>
<MenuRow
iconFront='List'
iconBack='ChevronRight'
title={t('content.collections.lists')}
onPress={() => navigation.navigate('Screen-Me-Lists')}
onPress={() => navigation.navigate('Tab-Me-Lists')}
/>
<MenuRow
iconFront='Clipboard'
@ -56,7 +56,7 @@ const Collections: React.FC = () => {
onPress={() =>
data &&
data.length &&
navigation.navigate('Screen-Shared-Announcements', { showAll: true })
navigation.navigate('Screen-Announcements', { showAll: true })
}
/>
</MenuContainer>

0
src/screens/Me/Root/Lists/List.tsx → src/screens/Tabs/Me/Root/Lists/List.tsx
View File

0
src/screens/Me/Root/Logout.tsx → src/screens/Tabs/Me/Root/Logout.tsx
View File

4
src/screens/Me/Root/MyInfo.tsx → src/screens/Tabs/Me/Root/MyInfo.tsx
View File

@ -1,5 +1,5 @@
import AccountHeader from '@screens/Shared/Account/Header'
import AccountInformation from '@screens/Shared/Account/Information'
import AccountHeader from '@screens/Tabs/Shared/Account/Header'
import AccountInformation from '@screens/Tabs/Shared/Account/Information'
import { useAccountQuery } from '@utils/queryHooks/account'
import { getLocalAccount } from '@utils/slices/instancesSlice'
import React, { useEffect } from 'react'

2
src/screens/Me/Root/Settings.tsx → src/screens/Tabs/Me/Root/Settings.tsx
View File

@ -21,7 +21,7 @@ const Settings: React.FC = () => {
iconFront='Settings'
iconBack='ChevronRight'
title={t('content.settings')}
onPress={() => navigation.navigate('Screen-Me-Settings')}
onPress={() => navigation.navigate('Tab-Me-Settings')}
/>
</MenuContainer>
)

0
src/screens/Me/Settings.tsx → src/screens/Tabs/Me/Settings.tsx
View File

0
src/screens/Me/Settings/Analytics.tsx → src/screens/Tabs/Me/Settings/Analytics.tsx
View File

0
src/screens/Me/Settings/App.tsx → src/screens/Tabs/Me/Settings/App.tsx
View File

0
src/screens/Me/Settings/Dev.tsx → src/screens/Tabs/Me/Settings/Dev.tsx
View File

2
src/screens/Me/Settings/Tooot.tsx → src/screens/Tabs/Me/Settings/Tooot.tsx
View File

@ -68,7 +68,7 @@ const SettingsTooot: React.FC = () => {
account => account.acct === 'tooot@xmflsct.com'
)
if (foundAccounts?.length === 1) {
navigation.navigate('Screen-Shared-Compose', {
navigation.navigate('Screen-Compose', {
type: 'conversation',
accts: [foundAccounts[0].acct]
})

0
src/screens/Me/Switch.tsx → src/screens/Tabs/Me/Switch.tsx
View File

0
src/screens/Me/Switch/Root.tsx → src/screens/Tabs/Me/Switch/Root.tsx
View File

10
src/screens/Notifications.tsx → src/screens/Tabs/Notifications.tsx
View File

@ -1,6 +1,6 @@
import { HeaderCenter } from '@components/Header'
import Timeline from '@components/Timelines/Timeline'
import sharedScreens from '@screens/Shared/sharedScreens'
import sharedScreens from '@screens/Tabs/Shared/sharedScreens'
import { getLocalActiveIndex } from '@utils/slices/instancesSlice'
import React from 'react'
import { useTranslation } from 'react-i18next'
@ -8,9 +8,9 @@ import { Platform } from 'react-native'
import { createNativeStackNavigator } from 'react-native-screens/native-stack'
import { useSelector } from 'react-redux'
const Stack = createNativeStackNavigator<Nav.NotificationsStackParamList>()
const Stack = createNativeStackNavigator<Nav.TabNotificationsStackParamList>()
const ScreenNotifications: React.FC = () => {
const TabNotifications: React.FC = () => {
const { t } = useTranslation()
const localActiveIndex = useSelector(getLocalActiveIndex)
@ -28,7 +28,7 @@ const ScreenNotifications: React.FC = () => {
headerTopInsetEnabled: false
}}
>
<Stack.Screen name='Screen-Notifications-Root'>
<Stack.Screen name='Tab-Notifications-Root'>
{() =>
localActiveIndex !== null ? <Timeline page='Notifications' /> : null
}
@ -39,4 +39,4 @@ const ScreenNotifications: React.FC = () => {
)
}
export default ScreenNotifications
export default TabNotifications

4
src/screens/Public.tsx → src/screens/Tabs/Public.tsx
View File

@ -1,11 +1,11 @@
import Timelines from '@components/Timelines'
import React from 'react'
const ScreenPublic = React.memo(
const TabPublic = React.memo(
() => {
return <Timelines />
},
() => true
)
export default ScreenPublic
export default TabPublic

11
src/screens/Shared/Account.tsx → src/screens/Tabs/Shared/Account.tsx
View File

@ -1,5 +1,4 @@
import analytics from '@components/analytics'
import BottomSheet from '@components/BottomSheet'
import { HeaderRight } from '@components/Header'
import Timeline from '@components/Timelines/Timeline'
import HeaderActionsAccount from '@components/Timelines/Timeline/Shared/HeaderActions/Account'
@ -26,7 +25,7 @@ import accountInitialState from './Account/utils/initialState'
import accountReducer from './Account/utils/reducer'
import { SharedAccountProp } from './sharedScreens'
const ScreenSharedAccount: React.FC<SharedAccountProp> = ({
const TabSharedAccount: React.FC<SharedAccountProp> = ({
route: {
params: { account }
},
@ -91,11 +90,11 @@ const ScreenSharedAccount: React.FC<SharedAccountProp> = ({
}}
/>
<BottomSheet
{/* <BottomSheet
visible={modalVisible}
handleDismiss={() => setBottomSheetVisible(false)}
>
{/* 添加到列表 */}
添加到列表
{localAccount?.id !== account.id && (
<HeaderActionsAccount
account={account}
@ -108,7 +107,7 @@ const ScreenSharedAccount: React.FC<SharedAccountProp> = ({
type='account'
setBottomSheetVisible={setBottomSheetVisible}
/>
</BottomSheet>
</BottomSheet> */}
</AccountContext.Provider>
)
}
@ -119,4 +118,4 @@ const styles = StyleSheet.create({
}
})
export default ScreenSharedAccount
export default TabSharedAccount

6
src/screens/Shared/Account/Attachments.tsx → src/screens/Tabs/Shared/Account/Attachments.tsx
View File

@ -25,7 +25,7 @@ export interface Props {
const AccountAttachments = React.memo(
({ account }: Props) => {
const navigation = useNavigation<
StackNavigationProp<Nav.LocalStackParamList>
StackNavigationProp<Nav.TabLocalStackParamList>
>()
const { theme } = useTheme()
@ -65,7 +65,7 @@ const AccountAttachments = React.memo(
onPress={() => {
analytics('account_attachment_more_press')
account &&
navigation.push('Screen-Shared-Attachments', { account })
navigation.push('Tab-Shared-Attachments', { account })
}}
children={
<View
@ -100,7 +100,7 @@ const AccountAttachments = React.memo(
style={{ marginLeft: StyleConstants.Spacing.Global.PagePadding }}
onPress={() => {
analytics('account_attachment_item_press')
navigation.push('Screen-Shared-Toot', { toot: item })
navigation.push('Tab-Shared-Toot', { toot: item })
}}
/>
)

0
src/screens/Shared/Account/Header.tsx → src/screens/Tabs/Shared/Account/Header.tsx
View File

0
src/screens/Shared/Account/Information.tsx → src/screens/Tabs/Shared/Account/Information.tsx
View File

0
src/screens/Shared/Account/Information/Account.tsx → src/screens/Tabs/Shared/Account/Information/Account.tsx
View File

6
src/screens/Shared/Account/Information/Actions.tsx → src/screens/Tabs/Shared/Account/Information/Actions.tsx
View File

@ -17,7 +17,7 @@ export interface Props {
const GoToMoved = ({ accountMoved }: { accountMoved: Mastodon.Account }) => {
const { t } = useTranslation('sharedAccount')
const navigation = useNavigation<
StackNavigationProp<Nav.LocalStackParamList>
StackNavigationProp<Nav.TabLocalStackParamList>
>()
return (
@ -26,7 +26,7 @@ const GoToMoved = ({ accountMoved }: { accountMoved: Mastodon.Account }) => {
content={t('content.moved')}
onPress={() => {
analytics('account_gotomoved_press')
navigation.push('Screen-Shared-Account', { account: accountMoved })
navigation.push('Tab-Shared-Account', { account: accountMoved })
}}
/>
)
@ -44,7 +44,7 @@ const Conversation = ({ account }: { account: Mastodon.Account }) => {
style={styles.actionConversation}
onPress={() => {
analytics('account_DM_press')
navigation.navigate('Screen-Shared-Compose', {
navigation.navigate('Screen-Compose', {
type: 'conversation',
accts: [account.acct]
})

4
src/screens/Shared/Account/Information/Avatar.tsx → src/screens/Tabs/Shared/Account/Information/Avatar.tsx
View File

@ -13,7 +13,7 @@ export interface Props {
const AccountInformationAvatar: React.FC<Props> = ({ account, myInfo }) => {
const navigation = useNavigation<
StackNavigationProp<Nav.LocalStackParamList>
StackNavigationProp<Nav.TabLocalStackParamList>
>()
const dimension = useMemo(
() => ({
@ -30,7 +30,7 @@ const AccountInformationAvatar: React.FC<Props> = ({ account, myInfo }) => {
analytics('account_avatar_press')
myInfo &&
account &&
navigation.push('Screen-Shared-Account', { account })
navigation.push('Tab-Shared-Account', { account })
}}
>
<GracefullyImage

0
src/screens/Shared/Account/Information/Created.tsx → src/screens/Tabs/Shared/Account/Information/Created.tsx
View File

0
src/screens/Shared/Account/Information/Fields.tsx → src/screens/Tabs/Shared/Account/Information/Fields.tsx
View File

0
src/screens/Shared/Account/Information/Name.tsx → src/screens/Tabs/Shared/Account/Information/Name.tsx
View File

0
src/screens/Shared/Account/Information/Notes.tsx → src/screens/Tabs/Shared/Account/Information/Notes.tsx
View File

8
src/screens/Shared/Account/Information/Stats.tsx → src/screens/Tabs/Shared/Account/Information/Stats.tsx
View File

@ -15,7 +15,7 @@ export interface Props {
const AccountInformationStats: React.FC<Props> = ({ account, myInfo }) => {
const navigation = useNavigation<
StackNavigationProp<Nav.LocalStackParamList>
StackNavigationProp<Nav.TabLocalStackParamList>
>()
const { theme } = useTheme()
const { t } = useTranslation('sharedAccount')
@ -32,7 +32,7 @@ const AccountInformationStats: React.FC<Props> = ({ account, myInfo }) => {
analytics('account_stats_toots_press', {
count: account.statuses_count
})
myInfo && navigation.push('Screen-Shared-Account', { account })
myInfo && navigation.push('Tab-Shared-Account', { account })
}}
/>
) : (
@ -54,7 +54,7 @@ const AccountInformationStats: React.FC<Props> = ({ account, myInfo }) => {
analytics('account_stats_following_press', {
count: account.following_count
})
navigation.push('Screen-Shared-Relationships', {
navigation.push('Tab-Shared-Relationships', {
account,
initialType: 'following'
})
@ -79,7 +79,7 @@ const AccountInformationStats: React.FC<Props> = ({ account, myInfo }) => {
analytics('account_stats_followers_press', {
count: account.followers_count
})
navigation.push('Screen-Shared-Relationships', {
navigation.push('Tab-Shared-Relationships', {
account,
initialType: 'followers'
})

Some files were not shown because too many files have changed in this diff Show More