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

Fix back button

Browse Source 
Using customized component, need to get `navigation` from props instead of hooks
This commit is contained in:
Zhiyuan Zheng
2020-12-14 22:33:19 +01:00
parent 991741488d
commit 177afe1dd1
19 changed files with 98 additions and 80 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
src/components/BottomSheet.tsx
View File

@ -67,7 +67,7 @@ const BottomSheet: React.FC<Props> = ({ children, visible, handleDismiss }) => {
return (
<Modal animated animationType='fade' visible={visible} transparent>
<View
style={[styles.overlay, { backgroundColor: theme.border }]}
style={[styles.overlay, { backgroundColor: theme.backgroundOverlay }]}
{...panResponder.panHandlers}
>
<Animated.View
@ -84,10 +84,12 @@ const BottomSheet: React.FC<Props> = ({ children, visible, handleDismiss }) => {
style={[styles.handle, { backgroundColor: theme.background }]}
/>
{children}
<ButtonRow
onPress={() => closeModal.start(() => handleDismiss())}
text='取消'
/>
<View style={styles.button}>
<ButtonRow
onPress={() => closeModal.start(() => handleDismiss())}
text='取消'
/>
</View>
</Animated.View>
</View>
</Modal>
@ -108,6 +110,10 @@ const styles = StyleSheet.create({
height: StyleConstants.Spacing.S / 2,
borderRadius: 100,
top: -StyleConstants.Spacing.M * 2
},
button: {
paddingLeft: StyleConstants.Spacing.Global.PagePadding * 2,
paddingRight: StyleConstants.Spacing.Global.PagePadding * 2
}
})

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

@ -5,13 +5,25 @@ import { Pressable, StyleSheet, Text } from 'react-native'
import { useTheme } from '@utils/styles/ThemeManager'
import { StyleConstants } from '@utils/styles/constants'
export interface Props {
type PropsBase = {
onPress: () => void
text?: string
}
export interface PropsText extends PropsBase {
text: string
icon?: any
}
const HeaderLeft: React.FC<Props> = ({ onPress, text, icon }) => {
export interface PropsIcon extends PropsBase {
text?: string
icon: any
}
const HeaderLeft: React.FC<PropsText | PropsIcon> = ({
onPress,
text,
icon
}) => {
const { theme } = useTheme()
return (
@ -21,7 +33,7 @@ const HeaderLeft: React.FC<Props> = ({ onPress, text, icon }) => {
styles.base,
{
backgroundColor: theme.backgroundGradientStart,
...(icon && { height: 44, width: 44 })
...(icon && { height: 44, width: 44, marginLeft: -9 })
}
]}
>

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

@ -35,7 +35,7 @@ const HeaderRight: React.FC<PropsText | PropsIcon> = ({
styles.base,
{
backgroundColor: theme.backgroundGradientStart,
...(icon && { height: 44, width: 44 })
...(icon && { height: 44, width: 44, marginRight: -9 })
}
]}
>

5
src/components/Menu/Header.tsx
View File

@ -12,7 +12,7 @@ const MenuHeader: React.FC<Props> = ({ heading }) => {
return (
<View style={[styles.base, { borderBottomColor: theme.separator }]}>
<Text>{heading}</Text>
<Text style={[styles.text, { color: theme.primary }]}>{heading}</Text>
</View>
)
}
@ -23,6 +23,9 @@ const styles = StyleSheet.create({
paddingLeft: StyleConstants.Spacing.Global.PagePadding,
paddingRight: StyleConstants.Spacing.Global.PagePadding,
paddingBottom: StyleConstants.Spacing.S
},
text: {
fontSize: StyleConstants.Font.Size.S
}
})

2
src/components/Timelines.tsx
View File

@ -42,7 +42,7 @@ export interface Props {
const Timelines: React.FC<Props> = ({ name, content }) => {
const navigation = useNavigation()
const { mode, theme } = useTheme()
const { mode } = useTheme()
const localRegistered = useSelector(getLocalUrl)
const publicDomain = useSelector(getRemoteUrl)
const [segment, setSegment] = useState(0)

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

@ -61,14 +61,7 @@ const Timeline: React.FC<Props> = ({
fetchMore,
refetch
} = useInfiniteQuery(queryKey, timelineFetch, {
getFetchMore: (last, all) => {
const allLastGroup = all[all.length - 1]!
return (
last?.toots.length > 0 &&
allLastGroup.toots[allLastGroup.toots.length - 1].id !==
last?.toots[last?.toots.length - 1].id
)
}
getFetchMore: last => last?.toots.length > 0
})
const flattenData = data ? data.flatMap(d => [...d?.toots]) : []
const flattenPointer = data ? data.flatMap(d => [d?.pointer]) : []

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

@ -53,7 +53,7 @@ const TimelineConversation: React.FC<Props> = ({
return (
<View style={styles.conversationView}>
<View style={styles.header}>
<TimelineAvatar account={item.accounts[0]} />
<TimelineAvatar queryKey={queryKey} account={item.accounts[0]} />
<TimelineHeaderConversation
queryKey={queryKey}
id={item.id}

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

@ -25,6 +25,7 @@ const TimelineDefault: React.FC<Props> = ({
queryKey,
highlighted = false
}) => {
const isRemotePublic = queryKey[0] === 'RemotePublic'
const navigation = useNavigation()
let actualStatus = item.reblog ? item.reblog : item
@ -38,6 +39,7 @@ const TimelineDefault: React.FC<Props> = ({
const tootOnPress = useCallback(
() =>
!isRemotePublic &&
navigation.navigate('Screen-Shared-Toot', {
toot: actualStatus
}),
@ -75,20 +77,29 @@ const TimelineDefault: React.FC<Props> = ({
)}
<View style={styles.header}>
<TimelineAvatar account={actualStatus.account} />
<TimelineHeaderDefault queryKey={queryKey} status={actualStatus} />
<TimelineAvatar
{...(!isRemotePublic && { queryKey })}
account={actualStatus.account}
/>
<TimelineHeaderDefault
{...(!isRemotePublic && { queryKey })}
status={actualStatus}
/>
</View>
<Pressable onPress={tootOnPress} children={tootChildren} />
<View
style={{
paddingLeft: highlighted
? 0
: StyleConstants.Avatar.S + StyleConstants.Spacing.S
}}
>
<TimelineActions queryKey={queryKey} status={actualStatus} />
</View>
{!isRemotePublic && (
<View
style={{
paddingLeft: highlighted
? 0
: StyleConstants.Avatar.S + StyleConstants.Spacing.S
}}
>
<TimelineActions queryKey={queryKey} status={actualStatus} />
</View>
)}
</View>
)
}

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

@ -86,7 +86,7 @@ const TimelineNotifications: React.FC<Props> = ({
/>
<View style={styles.header}>
<TimelineAvatar account={actualAccount} />
<TimelineAvatar queryKey={queryKey} account={actualAccount} />
<TimelineHeaderNotification notification={notification} />
</View>

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

@ -4,16 +4,18 @@ import { useNavigation } from '@react-navigation/native'
import { StyleConstants } from '@utils/styles/constants'
export interface Props {
queryKey?: App.QueryKey
account: Mastodon.Account
}
const TimelineAvatar: React.FC<Props> = ({ account }) => {
const TimelineAvatar: React.FC<Props> = ({ queryKey, account }) => {
const navigation = useNavigation()
// Need to fix go back root
const onPress = useCallback(() => {
navigation.navigate('Screen-Shared-Account', {
id: account.id
})
queryKey &&
navigation.navigate('Screen-Shared-Account', {
id: account.id
})
}, [])
return (

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

@ -61,7 +61,7 @@ const TimelineHeaderDefault: React.FC<Props> = ({ queryKey, status }) => {
return (
<View style={styles.base}>
<View style={styles.nameAndMeta}>
<View style={queryKey ? { flexBasis: '80%' } : { flexBasis: '100%' }}>
<View style={styles.name}>
{emojis?.length ? (
<Emojis