acetheking987/bsky-social-app
1
0
Fork 0
Code Issues Actions Packages Projects Releases 1 Wiki Activity

Fixes to drawer and bottombar

Browse Source
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
Download Patch File Download Diff File Expand all files Collapse all files
src/view/shell/BottomBar.tsx
+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
src/view/shell/Drawer.tsx
+260 -263
View File
@@ -48,286 +48,283 @@ 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() const {track} = useAnalytics()
const {track} = useAnalytics() const isDrawerOpen = useDrawerStatus() === 'open'
const isDrawerOpen = useDrawerStatus() === 'open'
// events // events
// = // =
React.useEffect(() => { React.useEffect(() => {
console.log( console.log('Drawer', isDrawerOpen ? 'minimizing' : 'unminimizing', 'shell')
'Drawer', store.shell.setMinimalShellMode(isDrawerOpen)
isDrawerOpen ? 'minimizing' : 'unminimizing', }, [isDrawerOpen, store])
'shell',
)
store.shell.setMinimalShellMode(isDrawerOpen)
}, [isDrawerOpen, store])
const onPressTab = React.useCallback( const onPressTab = React.useCallback(
(tab: string) => { (tab: string) => {
track('Menu:ItemClicked', {url: tab}) track('Menu:ItemClicked', {url: tab})
const state = navigation.getState() const state = navigation.getState()
const curr = currentRoute(state).name navigation.closeDrawer()
if (curr === tab || curr === `${tab}Stack`) { const curr = currentRoute(state).name
store.emitScreenSoftReset() if (curr === tab || curr === `${tab}Stack`) {
} else if (state.routes[state.index].name === `${tab}Stack`) { store.emitScreenSoftReset()
navigation.dispatch(StackActions.popToTop()) } else if (state.routes[state.index].name === `${tab}Stack`) {
} else { navigation.dispatch(StackActions.popToTop())
} 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'),
[onPressTab], [onPressTab],
) )
const onPressNotifications = React.useCallback( const onPressNotifications = React.useCallback(
() => onPressTab('Notifications'), () => onPressTab('Notifications'),
[onPressTab], [onPressTab],
) )
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, track, store.me.handle]) navigation.closeDrawer()
}, [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, track]) navigation.closeDrawer()
}, [navigation, track])
const onPressFeedback = () => { const onPressFeedback = () => {
track('Menu:FeedbackClicked') track('Menu:FeedbackClicked')
Linking.openURL(FEEDBACK_FORM_URL) Linking.openURL(FEEDBACK_FORM_URL)
} }
// rendering // rendering
// = // =
const MenuItem = ({ const MenuItem = ({
icon, icon,
label, label,
count, count,
bold, bold,
onPress, onPress,
}: { }: {
icon: JSX.Element icon: JSX.Element
label: string label: string
count?: number count?: number
bold?: boolean bold?: boolean
onPress: () => void onPress: () => void
}) => ( }) => (
<TouchableOpacity <TouchableOpacity
testID={`menuItemButton-${label}`} testID={`menuItemButton-${label}`}
style={styles.menuItem} style={styles.menuItem}
onPress={onPress}> onPress={onPress}>
<View style={[styles.menuItemIconWrapper]}> <View style={[styles.menuItemIconWrapper]}>
{icon} {icon}
{count ? ( {count ? (
<View style={styles.menuItemCount}> <View style={styles.menuItemCount}>
<Text style={styles.menuItemCountLabel}>{count}</Text> <Text style={styles.menuItemCountLabel}>{count}</Text>
</View> </View>
) : undefined} ) : undefined}
</View>
<Text
type={bold ? '2xl-bold' : '2xl'}
style={[pal.text, s.flex1]}
numberOfLines={1}>
{label}
</Text>
</TouchableOpacity>
)
const onDarkmodePress = () => {
track('Menu:ItemClicked', {url: '/darkmode'})
store.shell.setDarkMode(!store.shell.darkMode)
}
const curr = currentRoute(navigation.getState()).name
const isAtHome =
curr === 'HomeStack' || curr === 'Home' || curr === 'HomeInner'
const isAtSearch =
curr === 'SearchStack' || curr === 'Search' || curr === 'SearchInner'
const isAtNotifications =
curr === 'NotificationsStack' ||
curr === 'Notifications' ||
curr === 'NotificationsInner'
return (
<View
testID="menuView"
style={[
styles.view,
theme.colorScheme === 'light' ? pal.view : styles.viewDarkMode,
]}>
<SafeAreaView style={s.flex1}>
<TouchableOpacity testID="profileCardButton" onPress={onPressProfile}>
<UserAvatar
size={80}
displayName={store.me.displayName}
handle={store.me.handle}
avatar={store.me.avatar}
/>
<Text
type="title-lg"
style={[pal.text, s.bold, styles.profileCardDisplayName]}>
{store.me.displayName || store.me.handle}
</Text>
<Text type="2xl" style={[pal.textLight, styles.profileCardHandle]}>
@{store.me.handle}
</Text>
<Text type="xl" style={[pal.textLight, styles.profileCardFollowers]}>
<Text type="xl-medium" style={pal.text}>
{store.me.followersCount || 0}
</Text>{' '}
{pluralize(store.me.followersCount || 0, 'follower')} &middot;{' '}
<Text type="xl-medium" style={pal.text}>
{store.me.followsCount || 0}
</Text>{' '}
following
</Text>
</TouchableOpacity>
<View style={s.flex1} />
<View>
<MenuItem
icon={
isAtSearch ? (
<MagnifyingGlassIcon2Solid
style={pal.text as StyleProp<ViewStyle>}
size={24}
strokeWidth={1.7}
/>
) : (
<MagnifyingGlassIcon2
style={pal.text as StyleProp<ViewStyle>}
size={24}
strokeWidth={1.7}
/>
)
}
label="Search"
bold={isAtSearch}
onPress={onPressSearch}
/>
<MenuItem
icon={
isAtHome ? (
<HomeIconSolid
style={pal.text as StyleProp<ViewStyle>}
size="24"
strokeWidth={3.25}
fillOpacity={1}
/>
) : (
<HomeIcon
style={pal.text as StyleProp<ViewStyle>}
size="24"
strokeWidth={3.25}
/>
)
}
label="Home"
bold={isAtHome}
onPress={onPressHome}
/>
<MenuItem
icon={
isAtNotifications ? (
<BellIconSolid
style={pal.text as StyleProp<ViewStyle>}
size="24"
strokeWidth={1.7}
fillOpacity={1}
/>
) : (
<BellIcon
style={pal.text as StyleProp<ViewStyle>}
size="24"
strokeWidth={1.7}
/>
)
}
label="Notifications"
count={store.me.notifications.unreadCount}
bold={isAtNotifications}
onPress={onPressNotifications}
/>
<MenuItem
icon={
<UserIcon
style={pal.text as StyleProp<ViewStyle>}
size="26"
strokeWidth={1.5}
/>
}
label="Profile"
onPress={onPressProfile}
/>
<MenuItem
icon={
<CogIcon
style={pal.text as StyleProp<ViewStyle>}
size="26"
strokeWidth={1.75}
/>
}
label="Settings"
onPress={onPressSettings}
/>
</View> </View>
<Text <View style={s.flex1} />
type={bold ? '2xl-bold' : '2xl'} <View style={styles.footer}>
style={[pal.text, s.flex1]}
numberOfLines={1}>
{label}
</Text>
</TouchableOpacity>
)
const onDarkmodePress = () => {
track('Menu:ItemClicked', {url: '/darkmode'})
store.shell.setDarkMode(!store.shell.darkMode)
}
const curr = currentRoute(navigation.getState()).name
const isAtHome = curr === 'HomeStack' || curr === 'Home'
const isAtSearch = curr === 'SearchStack' || curr === 'Search'
const isAtNotifications =
curr === 'NotificationsStack' || curr === 'Notifications'
return (
<View
testID="menuView"
style={[
styles.view,
theme.colorScheme === 'light' ? pal.view : styles.viewDarkMode,
]}>
<SafeAreaView style={s.flex1}>
<TouchableOpacity <TouchableOpacity
testID="profileCardButton" onPress={onDarkmodePress}
onPress={() => onNavigate(`/profile/${store.me.handle}`)}> style={[
<UserAvatar styles.footerBtn,
size={80} theme.colorScheme === 'light'
displayName={store.me.displayName} ? pal.btn
handle={store.me.handle} : styles.footerBtnDarkMode,
avatar={store.me.avatar} ]}>
<MoonIcon
size={22}
style={pal.text as StyleProp<ViewStyle>}
strokeWidth={2}
/> />
<Text </TouchableOpacity>
type="title-lg" <TouchableOpacity
style={[pal.text, s.bold, styles.profileCardDisplayName]}> onPress={onPressFeedback}
{store.me.displayName || store.me.handle} style={[
</Text> styles.footerBtn,
<Text type="2xl" style={[pal.textLight, styles.profileCardHandle]}> styles.footerBtnFeedback,
@{store.me.handle} theme.colorScheme === 'light'
</Text> ? styles.footerBtnFeedbackLight
<Text : styles.footerBtnFeedbackDark,
type="xl" ]}>
style={[pal.textLight, styles.profileCardFollowers]}> <FontAwesomeIcon
<Text type="xl-medium" style={pal.text}> style={pal.link as FontAwesomeIconStyle}
{store.me.followersCount || 0} size={19}
</Text>{' '} icon={['far', 'message']}
{pluralize(store.me.followersCount || 0, 'follower')} &middot;{' '} />
<Text type="xl-medium" style={pal.text}> <Text type="2xl-medium" style={[pal.link, s.pl10]}>
{store.me.followsCount || 0} Feedback
</Text>{' '}
following
</Text> </Text>
</TouchableOpacity> </TouchableOpacity>
<View style={s.flex1} /> </View>
<View> </SafeAreaView>
<MenuItem </View>
icon={ )
isAtSearch ? ( })
<MagnifyingGlassIcon2Solid
style={pal.text as StyleProp<ViewStyle>}
size={24}
strokeWidth={1.7}
/>
) : (
<MagnifyingGlassIcon2
style={pal.text as StyleProp<ViewStyle>}
size={24}
strokeWidth={1.7}
/>
)
}
label="Search"
bold={isAtSearch}
onPress={onPressSearch}
/>
<MenuItem
icon={
isAtHome ? (
<HomeIconSolid
style={pal.text as StyleProp<ViewStyle>}
size="24"
strokeWidth={3.25}
fillOpacity={1}
/>
) : (
<HomeIcon
style={pal.text as StyleProp<ViewStyle>}
size="24"
strokeWidth={3.25}
/>
)
}
label="Home"
bold={isAtHome}
onPress={onPressHome}
/>
<MenuItem
icon={
isAtNotifications ? (
<BellIconSolid
style={pal.text as StyleProp<ViewStyle>}
size="24"
strokeWidth={1.7}
fillOpacity={1}
/>
) : (
<BellIcon
style={pal.text as StyleProp<ViewStyle>}
size="24"
strokeWidth={1.7}
/>
)
}
label="Notifications"
count={store.me.notifications.unreadCount}
bold={isAtNotifications}
onPress={onPressNotifications}
/>
<MenuItem
icon={
<UserIcon
style={pal.text as StyleProp<ViewStyle>}
size="26"
strokeWidth={1.5}
/>
}
label="Profile"
onPress={onPressProfile}
/>
<MenuItem
icon={
<CogIcon
style={pal.text as StyleProp<ViewStyle>}
size="26"
strokeWidth={1.75}
/>
}
label="Settings"
onPress={onPressSettings}
/>
</View>
<View style={s.flex1} />
<View style={styles.footer}>
<TouchableOpacity
onPress={onDarkmodePress}
style={[
styles.footerBtn,
theme.colorScheme === 'light'
? pal.btn
: styles.footerBtnDarkMode,
]}>
<MoonIcon
size={22}
style={pal.text as StyleProp<ViewStyle>}
strokeWidth={2}
/>
</TouchableOpacity>
<TouchableOpacity
onPress={onPressFeedback}
style={[
styles.footerBtn,
styles.footerBtnFeedback,
theme.colorScheme === 'light'
? styles.footerBtnFeedbackLight
: styles.footerBtnFeedbackDark,
]}>
<FontAwesomeIcon
style={pal.link as FontAwesomeIconStyle}
size={19}
icon={['far', 'message']}
/>
<Text type="2xl-medium" style={[pal.link, s.pl10]}>
Feedback
</Text>
</TouchableOpacity>
</View>
</SafeAreaView>
</View>
)
},
)
const styles = StyleSheet.create({ const styles = StyleSheet.create({
view: { view: {