Fixes to drawer and bottombar

This commit is contained in:
Paul Frazee
2023-03-09 21:32:44 -06:00
parent 0d92dd8306
commit de5ee3c768
2 changed files with 268 additions and 267 deletions
+8 -4
View File
@@ -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
View File
@@ -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: {