Mobile Web (#427)
* WIP * WIP * Fix header offset on web * Remove debug * Fix web mobile feed and FAB layout * Fix modals on mobile web * Remove dead code * Remove ios config that shouldnt be committed now * Move bottom bar into its own folder * Fix web drawer navigation and state behaviors * Remove dark mode toggle from web drawer for now * Fix search on mobile web * Fix the logged out splash screen on mobile web * Fixes to detox simulator --------- Co-authored-by: Paul Frazee <pfrazee@gmail.com>
This commit is contained in:
John Fawcett
GitHub
parent
2fed6c4021
commit
f6769b283f
30 changed files with 4343 additions and 319 deletions
198
src/view/shell/bottom-bar/BottomBar.tsx
Normal file
198
src/view/shell/bottom-bar/BottomBar.tsx
Normal file
|
|
@ -0,0 +1,198 @@
|
|||
import React from 'react'
|
||||
import {
|
||||
Animated,
|
||||
GestureResponderEvent,
|
||||
TouchableOpacity,
|
||||
View,
|
||||
} from 'react-native'
|
||||
import {StackActions, useNavigationState} from '@react-navigation/native'
|
||||
import {BottomTabBarProps} from '@react-navigation/bottom-tabs'
|
||||
import {useSafeAreaInsets} from 'react-native-safe-area-context'
|
||||
import {observer} from 'mobx-react-lite'
|
||||
import {Text} from 'view/com/util/text/Text'
|
||||
import {useStores} from 'state/index'
|
||||
import {useAnalytics} from 'lib/analytics'
|
||||
import {clamp} from 'lib/numbers'
|
||||
import {
|
||||
HomeIcon,
|
||||
HomeIconSolid,
|
||||
MagnifyingGlassIcon2,
|
||||
MagnifyingGlassIcon2Solid,
|
||||
BellIcon,
|
||||
BellIconSolid,
|
||||
UserIcon,
|
||||
} from 'lib/icons'
|
||||
import {usePalette} from 'lib/hooks/usePalette'
|
||||
import {getTabState, TabState} from 'lib/routes/helpers'
|
||||
import {styles} from './BottomBarStyles'
|
||||
import {useMinimalShellMode} from 'lib/hooks/useMinimalShellMode'
|
||||
|
||||
export const BottomBar = observer(({navigation}: BottomTabBarProps) => {
|
||||
const store = useStores()
|
||||
const pal = usePalette('default')
|
||||
const safeAreaInsets = useSafeAreaInsets()
|
||||
const {track} = useAnalytics()
|
||||
const {isAtHome, isAtSearch, isAtNotifications} = useNavigationState(
|
||||
state => {
|
||||
const res = {
|
||||
isAtHome: getTabState(state, 'Home') !== TabState.Outside,
|
||||
isAtSearch: getTabState(state, 'Search') !== TabState.Outside,
|
||||
isAtNotifications:
|
||||
getTabState(state, 'Notifications') !== TabState.Outside,
|
||||
}
|
||||
if (!res.isAtHome && !res.isAtNotifications && !res.isAtSearch) {
|
||||
// HACK for some reason useNavigationState will give us pre-hydration results
|
||||
// and not update after, so we force isAtHome if all came back false
|
||||
// -prf
|
||||
res.isAtHome = true
|
||||
}
|
||||
return res
|
||||
},
|
||||
)
|
||||
|
||||
const {footerMinimalShellTransform} = useMinimalShellMode()
|
||||
|
||||
const onPressTab = React.useCallback(
|
||||
(tab: string) => {
|
||||
track(`MobileShell:${tab}ButtonPressed`)
|
||||
const state = navigation.getState()
|
||||
const tabState = getTabState(state, tab)
|
||||
if (tabState === TabState.InsideAtRoot) {
|
||||
store.emitScreenSoftReset()
|
||||
} else if (tabState === TabState.Inside) {
|
||||
navigation.dispatch(StackActions.popToTop())
|
||||
} else {
|
||||
navigation.navigate(`${tab}Tab`)
|
||||
}
|
||||
},
|
||||
[store, track, navigation],
|
||||
)
|
||||
const onPressHome = React.useCallback(() => onPressTab('Home'), [onPressTab])
|
||||
const onPressSearch = React.useCallback(
|
||||
() => onPressTab('Search'),
|
||||
[onPressTab],
|
||||
)
|
||||
const onPressNotifications = React.useCallback(
|
||||
() => onPressTab('Notifications'),
|
||||
[onPressTab],
|
||||
)
|
||||
const onPressProfile = React.useCallback(() => {
|
||||
track('MobileShell:ProfileButtonPressed')
|
||||
navigation.navigate('Profile', {name: store.me.handle})
|
||||
}, [navigation, track, store.me.handle])
|
||||
|
||||
return (
|
||||
<Animated.View
|
||||
style={[
|
||||
styles.bottomBar,
|
||||
pal.view,
|
||||
pal.border,
|
||||
{paddingBottom: clamp(safeAreaInsets.bottom, 15, 30)},
|
||||
footerMinimalShellTransform,
|
||||
]}>
|
||||
<Btn
|
||||
testID="bottomBarHomeBtn"
|
||||
icon={
|
||||
isAtHome ? (
|
||||
<HomeIconSolid
|
||||
strokeWidth={4}
|
||||
size={24}
|
||||
style={[styles.ctrlIcon, pal.text, styles.homeIcon]}
|
||||
/>
|
||||
) : (
|
||||
<HomeIcon
|
||||
strokeWidth={4}
|
||||
size={24}
|
||||
style={[styles.ctrlIcon, pal.text, styles.homeIcon]}
|
||||
/>
|
||||
)
|
||||
}
|
||||
onPress={onPressHome}
|
||||
/>
|
||||
<Btn
|
||||
testID="bottomBarSearchBtn"
|
||||
icon={
|
||||
isAtSearch ? (
|
||||
<MagnifyingGlassIcon2Solid
|
||||
size={25}
|
||||
style={[styles.ctrlIcon, pal.text, styles.searchIcon]}
|
||||
strokeWidth={1.8}
|
||||
/>
|
||||
) : (
|
||||
<MagnifyingGlassIcon2
|
||||
size={25}
|
||||
style={[styles.ctrlIcon, pal.text, styles.searchIcon]}
|
||||
strokeWidth={1.8}
|
||||
/>
|
||||
)
|
||||
}
|
||||
onPress={onPressSearch}
|
||||
/>
|
||||
<Btn
|
||||
testID="bottomBarNotificationsBtn"
|
||||
icon={
|
||||
isAtNotifications ? (
|
||||
<BellIconSolid
|
||||
size={24}
|
||||
strokeWidth={1.9}
|
||||
style={[styles.ctrlIcon, pal.text, styles.bellIcon]}
|
||||
/>
|
||||
) : (
|
||||
<BellIcon
|
||||
size={24}
|
||||
strokeWidth={1.9}
|
||||
style={[styles.ctrlIcon, pal.text, styles.bellIcon]}
|
||||
/>
|
||||
)
|
||||
}
|
||||
onPress={onPressNotifications}
|
||||
notificationCount={
|
||||
store.me.notifications.unreadCount + store.invitedUsers.numNotifs
|
||||
}
|
||||
/>
|
||||
<Btn
|
||||
testID="bottomBarProfileBtn"
|
||||
icon={
|
||||
<View style={styles.ctrlIconSizingWrapper}>
|
||||
<UserIcon
|
||||
size={28}
|
||||
strokeWidth={1.5}
|
||||
style={[styles.ctrlIcon, pal.text, styles.profileIcon]}
|
||||
/>
|
||||
</View>
|
||||
}
|
||||
onPress={onPressProfile}
|
||||
/>
|
||||
</Animated.View>
|
||||
)
|
||||
})
|
||||
|
||||
function Btn({
|
||||
testID,
|
||||
icon,
|
||||
notificationCount,
|
||||
onPress,
|
||||
onLongPress,
|
||||
}: {
|
||||
testID?: string
|
||||
icon: JSX.Element
|
||||
notificationCount?: number
|
||||
onPress?: (event: GestureResponderEvent) => void
|
||||
onLongPress?: (event: GestureResponderEvent) => void
|
||||
}) {
|
||||
return (
|
||||
<TouchableOpacity
|
||||
testID={testID}
|
||||
style={styles.ctrl}
|
||||
onPress={onLongPress ? onPress : undefined}
|
||||
onPressIn={onLongPress ? undefined : onPress}
|
||||
onLongPress={onLongPress}>
|
||||
{notificationCount ? (
|
||||
<View style={[styles.notificationCount]}>
|
||||
<Text style={styles.notificationCountLabel}>{notificationCount}</Text>
|
||||
</View>
|
||||
) : undefined}
|
||||
{icon}
|
||||
</TouchableOpacity>
|
||||
)
|
||||
}
|
||||
61
src/view/shell/bottom-bar/BottomBarStyles.tsx
Normal file
61
src/view/shell/bottom-bar/BottomBarStyles.tsx
Normal file
|
|
@ -0,0 +1,61 @@
|
|||
import {StyleSheet} from 'react-native'
|
||||
import {colors} from 'lib/styles'
|
||||
|
||||
export const styles = StyleSheet.create({
|
||||
bottomBar: {
|
||||
position: 'absolute',
|
||||
bottom: 0,
|
||||
left: 0,
|
||||
right: 0,
|
||||
flexDirection: 'row',
|
||||
borderTopWidth: 1,
|
||||
paddingLeft: 5,
|
||||
paddingRight: 10,
|
||||
},
|
||||
ctrl: {
|
||||
flex: 1,
|
||||
paddingTop: 13,
|
||||
paddingBottom: 4,
|
||||
},
|
||||
notificationCount: {
|
||||
position: 'absolute',
|
||||
left: '52%',
|
||||
top: 8,
|
||||
backgroundColor: colors.blue3,
|
||||
paddingHorizontal: 4,
|
||||
paddingBottom: 1,
|
||||
borderRadius: 6,
|
||||
zIndex: 1,
|
||||
},
|
||||
notificationCountLight: {
|
||||
borderColor: colors.white,
|
||||
},
|
||||
notificationCountDark: {
|
||||
borderColor: colors.gray8,
|
||||
},
|
||||
notificationCountLabel: {
|
||||
fontSize: 12,
|
||||
fontWeight: 'bold',
|
||||
color: colors.white,
|
||||
fontVariant: ['tabular-nums'],
|
||||
},
|
||||
ctrlIcon: {
|
||||
marginLeft: 'auto',
|
||||
marginRight: 'auto',
|
||||
},
|
||||
ctrlIconSizingWrapper: {
|
||||
height: 27,
|
||||
},
|
||||
homeIcon: {
|
||||
top: 0,
|
||||
},
|
||||
searchIcon: {
|
||||
top: -2,
|
||||
},
|
||||
bellIcon: {
|
||||
top: -2.5,
|
||||
},
|
||||
profileIcon: {
|
||||
top: -4,
|
||||
},
|
||||
})
|
||||
101
src/view/shell/bottom-bar/BottomBarWeb.tsx
Normal file
101
src/view/shell/bottom-bar/BottomBarWeb.tsx
Normal file
|
|
@ -0,0 +1,101 @@
|
|||
import React from 'react'
|
||||
import {observer} from 'mobx-react-lite'
|
||||
import {useStores} from 'state/index'
|
||||
import {usePalette} from 'lib/hooks/usePalette'
|
||||
import {Animated} from 'react-native'
|
||||
import {useNavigationState} from '@react-navigation/native'
|
||||
import {useSafeAreaInsets} from 'react-native-safe-area-context'
|
||||
import {getCurrentRoute, isTab} from 'lib/routes/helpers'
|
||||
import {styles} from './BottomBarStyles'
|
||||
import {clamp} from 'lib/numbers'
|
||||
import {
|
||||
BellIcon,
|
||||
BellIconSolid,
|
||||
HomeIcon,
|
||||
HomeIconSolid,
|
||||
MagnifyingGlassIcon2,
|
||||
MagnifyingGlassIcon2Solid,
|
||||
UserIcon,
|
||||
} from 'lib/icons'
|
||||
import {Link} from 'view/com/util/Link'
|
||||
import {useMinimalShellMode} from 'lib/hooks/useMinimalShellMode'
|
||||
|
||||
export const BottomBarWeb = observer(() => {
|
||||
const store = useStores()
|
||||
const pal = usePalette('default')
|
||||
const safeAreaInsets = useSafeAreaInsets()
|
||||
const {footerMinimalShellTransform} = useMinimalShellMode()
|
||||
|
||||
return (
|
||||
<Animated.View
|
||||
style={[
|
||||
styles.bottomBar,
|
||||
pal.view,
|
||||
pal.border,
|
||||
{paddingBottom: clamp(safeAreaInsets.bottom, 15, 30)},
|
||||
footerMinimalShellTransform,
|
||||
]}>
|
||||
<NavItem routeName="Home" href="/">
|
||||
{({isActive}) => {
|
||||
const Icon = isActive ? HomeIconSolid : HomeIcon
|
||||
return (
|
||||
<Icon
|
||||
strokeWidth={4}
|
||||
size={24}
|
||||
style={[styles.ctrlIcon, pal.text, styles.homeIcon]}
|
||||
/>
|
||||
)
|
||||
}}
|
||||
</NavItem>
|
||||
<NavItem routeName="Search" href="/search">
|
||||
{({isActive}) => {
|
||||
const Icon = isActive
|
||||
? MagnifyingGlassIcon2Solid
|
||||
: MagnifyingGlassIcon2
|
||||
return (
|
||||
<Icon
|
||||
size={25}
|
||||
style={[styles.ctrlIcon, pal.text, styles.searchIcon]}
|
||||
strokeWidth={1.8}
|
||||
/>
|
||||
)
|
||||
}}
|
||||
</NavItem>
|
||||
<NavItem routeName="Notifications" href="/notifications">
|
||||
{({isActive}) => {
|
||||
const Icon = isActive ? BellIconSolid : BellIcon
|
||||
return (
|
||||
<Icon
|
||||
size={24}
|
||||
strokeWidth={1.9}
|
||||
style={[styles.ctrlIcon, pal.text, styles.bellIcon]}
|
||||
/>
|
||||
)
|
||||
}}
|
||||
</NavItem>
|
||||
<NavItem routeName="Profile" href={`/profile/${store.me.handle}`}>
|
||||
{() => (
|
||||
<UserIcon
|
||||
size={28}
|
||||
strokeWidth={1.5}
|
||||
style={[styles.ctrlIcon, pal.text, styles.profileIcon]}
|
||||
/>
|
||||
)}
|
||||
</NavItem>
|
||||
</Animated.View>
|
||||
)
|
||||
})
|
||||
|
||||
const NavItem: React.FC<{
|
||||
children: (props: {isActive: boolean}) => React.ReactChild
|
||||
href: string
|
||||
routeName: string
|
||||
}> = ({children, href, routeName}) => {
|
||||
const currentRoute = useNavigationState(getCurrentRoute)
|
||||
const isActive = isTab(currentRoute.name, routeName)
|
||||
return (
|
||||
<Link href={href} style={styles.ctrl}>
|
||||
{children({isActive})}
|
||||
</Link>
|
||||
)
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue