Fixes to drawer and bottombar
This commit is contained in:
@@ -69,7 +69,7 @@ export const BottomBar = observer(({navigation}: BottomTabBarProps) => {
|
|||||||
track(`MobileShell:${tab}ButtonPressed`)
|
track(`MobileShell:${tab}ButtonPressed`)
|
||||||
const state = navigation.getState()
|
const state = navigation.getState()
|
||||||
const curr = currentRoute(state).name
|
const curr = currentRoute(state).name
|
||||||
if (curr === tab || curr === `${tab}Stack`) {
|
if (curr === tab || curr === `${tab}Stack` || curr === `${tab}Inner`) {
|
||||||
store.emitScreenSoftReset()
|
store.emitScreenSoftReset()
|
||||||
} else if (state.routes[state.index].name === `${tab}Stack`) {
|
} else if (state.routes[state.index].name === `${tab}Stack`) {
|
||||||
navigation.dispatch(StackActions.popToTop())
|
navigation.dispatch(StackActions.popToTop())
|
||||||
@@ -94,10 +94,14 @@ export const BottomBar = observer(({navigation}: BottomTabBarProps) => {
|
|||||||
}, [navigation, track, store.me.handle])
|
}, [navigation, track, store.me.handle])
|
||||||
|
|
||||||
const curr = currentRoute(navigation.getState()).name
|
const curr = currentRoute(navigation.getState()).name
|
||||||
const isAtHome = curr === 'HomeStack' || curr === 'Home'
|
const isAtHome =
|
||||||
const isAtSearch = curr === 'SearchStack' || curr === 'Search'
|
curr === 'HomeStack' || curr === 'Home' || curr === 'HomeInner'
|
||||||
|
const isAtSearch =
|
||||||
|
curr === 'SearchStack' || curr === 'Search' || curr === 'SearchInner'
|
||||||
const isAtNotifications =
|
const isAtNotifications =
|
||||||
curr === 'NotificationsStack' || curr === 'Notifications'
|
curr === 'NotificationsStack' ||
|
||||||
|
curr === 'Notifications' ||
|
||||||
|
curr === 'NotificationsInner'
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Animated.View
|
<Animated.View
|
||||||
|
|||||||
+19
-22
@@ -48,8 +48,7 @@ function currentRoute(state) {
|
|||||||
return node
|
return node
|
||||||
}
|
}
|
||||||
|
|
||||||
export const Drawer = observer(
|
export const Drawer = observer(({navigation}: DrawerContentComponentProps) => {
|
||||||
({state, navigation}: DrawerContentComponentProps) => {
|
|
||||||
const theme = useTheme()
|
const theme = useTheme()
|
||||||
const pal = usePalette('default')
|
const pal = usePalette('default')
|
||||||
const store = useStores()
|
const store = useStores()
|
||||||
@@ -60,11 +59,7 @@ export const Drawer = observer(
|
|||||||
// =
|
// =
|
||||||
|
|
||||||
React.useEffect(() => {
|
React.useEffect(() => {
|
||||||
console.log(
|
console.log('Drawer', isDrawerOpen ? 'minimizing' : 'unminimizing', 'shell')
|
||||||
'Drawer',
|
|
||||||
isDrawerOpen ? 'minimizing' : 'unminimizing',
|
|
||||||
'shell',
|
|
||||||
)
|
|
||||||
store.shell.setMinimalShellMode(isDrawerOpen)
|
store.shell.setMinimalShellMode(isDrawerOpen)
|
||||||
}, [isDrawerOpen, store])
|
}, [isDrawerOpen, store])
|
||||||
|
|
||||||
@@ -72,22 +67,23 @@ export const Drawer = observer(
|
|||||||
(tab: string) => {
|
(tab: string) => {
|
||||||
track('Menu:ItemClicked', {url: tab})
|
track('Menu:ItemClicked', {url: tab})
|
||||||
const state = navigation.getState()
|
const state = navigation.getState()
|
||||||
|
navigation.closeDrawer()
|
||||||
const curr = currentRoute(state).name
|
const curr = currentRoute(state).name
|
||||||
if (curr === tab || curr === `${tab}Stack`) {
|
if (curr === tab || curr === `${tab}Stack`) {
|
||||||
store.emitScreenSoftReset()
|
store.emitScreenSoftReset()
|
||||||
} else if (state.routes[state.index].name === `${tab}Stack`) {
|
} else if (state.routes[state.index].name === `${tab}Stack`) {
|
||||||
navigation.dispatch(StackActions.popToTop())
|
navigation.dispatch(StackActions.popToTop())
|
||||||
} else {
|
} else {
|
||||||
|
// wait for drawer anim to finish
|
||||||
|
setTimeout(() => {
|
||||||
navigation.navigate(`${tab}Stack`)
|
navigation.navigate(`${tab}Stack`)
|
||||||
|
}, 250)
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
[store, track, navigation],
|
[store, track, navigation],
|
||||||
)
|
)
|
||||||
|
|
||||||
const onPressHome = React.useCallback(
|
const onPressHome = React.useCallback(() => onPressTab('Home'), [onPressTab])
|
||||||
() => onPressTab('Home'),
|
|
||||||
[onPressTab],
|
|
||||||
)
|
|
||||||
|
|
||||||
const onPressSearch = React.useCallback(
|
const onPressSearch = React.useCallback(
|
||||||
() => onPressTab('Search'),
|
() => onPressTab('Search'),
|
||||||
@@ -102,11 +98,13 @@ export const Drawer = observer(
|
|||||||
const onPressProfile = React.useCallback(() => {
|
const onPressProfile = React.useCallback(() => {
|
||||||
track('Menu:ItemClicked', {url: 'Profile'})
|
track('Menu:ItemClicked', {url: 'Profile'})
|
||||||
navigation.navigate('Profile', {name: store.me.handle})
|
navigation.navigate('Profile', {name: store.me.handle})
|
||||||
|
navigation.closeDrawer()
|
||||||
}, [navigation, track, store.me.handle])
|
}, [navigation, track, store.me.handle])
|
||||||
|
|
||||||
const onPressSettings = React.useCallback(() => {
|
const onPressSettings = React.useCallback(() => {
|
||||||
track('Menu:ItemClicked', {url: 'Settings'})
|
track('Menu:ItemClicked', {url: 'Settings'})
|
||||||
navigation.navigate('Settings')
|
navigation.navigate('Settings')
|
||||||
|
navigation.closeDrawer()
|
||||||
}, [navigation, track])
|
}, [navigation, track])
|
||||||
|
|
||||||
const onPressFeedback = () => {
|
const onPressFeedback = () => {
|
||||||
@@ -157,10 +155,14 @@ export const Drawer = observer(
|
|||||||
}
|
}
|
||||||
|
|
||||||
const curr = currentRoute(navigation.getState()).name
|
const curr = currentRoute(navigation.getState()).name
|
||||||
const isAtHome = curr === 'HomeStack' || curr === 'Home'
|
const isAtHome =
|
||||||
const isAtSearch = curr === 'SearchStack' || curr === 'Search'
|
curr === 'HomeStack' || curr === 'Home' || curr === 'HomeInner'
|
||||||
|
const isAtSearch =
|
||||||
|
curr === 'SearchStack' || curr === 'Search' || curr === 'SearchInner'
|
||||||
const isAtNotifications =
|
const isAtNotifications =
|
||||||
curr === 'NotificationsStack' || curr === 'Notifications'
|
curr === 'NotificationsStack' ||
|
||||||
|
curr === 'Notifications' ||
|
||||||
|
curr === 'NotificationsInner'
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<View
|
<View
|
||||||
@@ -170,9 +172,7 @@ export const Drawer = observer(
|
|||||||
theme.colorScheme === 'light' ? pal.view : styles.viewDarkMode,
|
theme.colorScheme === 'light' ? pal.view : styles.viewDarkMode,
|
||||||
]}>
|
]}>
|
||||||
<SafeAreaView style={s.flex1}>
|
<SafeAreaView style={s.flex1}>
|
||||||
<TouchableOpacity
|
<TouchableOpacity testID="profileCardButton" onPress={onPressProfile}>
|
||||||
testID="profileCardButton"
|
|
||||||
onPress={() => onNavigate(`/profile/${store.me.handle}`)}>
|
|
||||||
<UserAvatar
|
<UserAvatar
|
||||||
size={80}
|
size={80}
|
||||||
displayName={store.me.displayName}
|
displayName={store.me.displayName}
|
||||||
@@ -187,9 +187,7 @@ export const Drawer = observer(
|
|||||||
<Text type="2xl" style={[pal.textLight, styles.profileCardHandle]}>
|
<Text type="2xl" style={[pal.textLight, styles.profileCardHandle]}>
|
||||||
@{store.me.handle}
|
@{store.me.handle}
|
||||||
</Text>
|
</Text>
|
||||||
<Text
|
<Text type="xl" style={[pal.textLight, styles.profileCardFollowers]}>
|
||||||
type="xl"
|
|
||||||
style={[pal.textLight, styles.profileCardFollowers]}>
|
|
||||||
<Text type="xl-medium" style={pal.text}>
|
<Text type="xl-medium" style={pal.text}>
|
||||||
{store.me.followersCount || 0}
|
{store.me.followersCount || 0}
|
||||||
</Text>{' '}
|
</Text>{' '}
|
||||||
@@ -326,8 +324,7 @@ export const Drawer = observer(
|
|||||||
</SafeAreaView>
|
</SafeAreaView>
|
||||||
</View>
|
</View>
|
||||||
)
|
)
|
||||||
},
|
})
|
||||||
)
|
|
||||||
|
|
||||||
const styles = StyleSheet.create({
|
const styles = StyleSheet.create({
|
||||||
view: {
|
view: {
|
||||||
|
|||||||
Reference in New Issue
Block a user