Ollie Hsieh
f0706dbe9f
* Add alt text support and rework image layout * Add additional BottomSheet implementation to account for nested Composer modal * Use mobile gallery layout on mobile web * Missing key * Fix lint * Move altimage modal into the standard modal system * Fix overflow wrapping of images * Fixes to the alt-image modal * Remove unnecessary switch * Restore old imagelayoutgrid code --------- Co-authored-by: Paul Frazee <pfrazee@gmail.com>
89 lines
2.8 KiB
TypeScript
89 lines
2.8 KiB
TypeScript
import React from 'react'
|
|
import {observer} from 'mobx-react-lite'
|
|
import {StatusBar} from 'expo-status-bar'
|
|
import {StyleSheet, useWindowDimensions, View} from 'react-native'
|
|
import {useSafeAreaInsets} from 'react-native-safe-area-context'
|
|
import {Drawer} from 'react-native-drawer-layout'
|
|
import {useNavigationState} from '@react-navigation/native'
|
|
import {useStores} from 'state/index'
|
|
import {ModalsContainer} from 'view/com/modals/Modal'
|
|
import {Lightbox} from 'view/com/lightbox/Lightbox'
|
|
import {ErrorBoundary} from 'view/com/util/ErrorBoundary'
|
|
import {DrawerContent} from './Drawer'
|
|
import {Composer} from './Composer'
|
|
import {useTheme} from 'lib/ThemeContext'
|
|
import {usePalette} from 'lib/hooks/usePalette'
|
|
import {RoutesContainer, TabsNavigator} from '../../Navigation'
|
|
import {isStateAtTabRoot} from 'lib/routes/helpers'
|
|
|
|
const ShellInner = observer(() => {
|
|
const store = useStores()
|
|
const winDim = useWindowDimensions()
|
|
const safeAreaInsets = useSafeAreaInsets()
|
|
const containerPadding = React.useMemo(
|
|
() => ({height: '100%', paddingTop: safeAreaInsets.top}),
|
|
[safeAreaInsets],
|
|
)
|
|
const renderDrawerContent = React.useCallback(() => <DrawerContent />, [])
|
|
const onOpenDrawer = React.useCallback(
|
|
() => store.shell.openDrawer(),
|
|
[store],
|
|
)
|
|
const onCloseDrawer = React.useCallback(
|
|
() => store.shell.closeDrawer(),
|
|
[store],
|
|
)
|
|
const canGoBack = useNavigationState(state => !isStateAtTabRoot(state))
|
|
|
|
return (
|
|
<>
|
|
<View style={containerPadding}>
|
|
<ErrorBoundary>
|
|
<Drawer
|
|
renderDrawerContent={renderDrawerContent}
|
|
open={store.shell.isDrawerOpen}
|
|
onOpen={onOpenDrawer}
|
|
onClose={onCloseDrawer}
|
|
swipeEdgeWidth={winDim.width / 2}
|
|
swipeEnabled={
|
|
!canGoBack &&
|
|
store.session.hasSession &&
|
|
!store.shell.isDrawerSwipeDisabled
|
|
}>
|
|
<TabsNavigator />
|
|
</Drawer>
|
|
</ErrorBoundary>
|
|
</View>
|
|
<Lightbox />
|
|
<Composer
|
|
active={store.shell.isComposerActive}
|
|
onClose={() => store.shell.closeComposer()}
|
|
winHeight={winDim.height}
|
|
replyTo={store.shell.composerOpts?.replyTo}
|
|
onPost={store.shell.composerOpts?.onPost}
|
|
quote={store.shell.composerOpts?.quote}
|
|
/>
|
|
<ModalsContainer />
|
|
</>
|
|
)
|
|
})
|
|
|
|
export const Shell: React.FC = observer(() => {
|
|
const theme = useTheme()
|
|
const pal = usePalette('default')
|
|
return (
|
|
<View testID="mobileShellView" style={[styles.outerContainer, pal.view]}>
|
|
<StatusBar style={theme.colorScheme === 'dark' ? 'light' : 'dark'} />
|
|
<RoutesContainer>
|
|
<ShellInner />
|
|
</RoutesContainer>
|
|
</View>
|
|
)
|
|
})
|
|
|
|
const styles = StyleSheet.create({
|
|
outerContainer: {
|
|
height: '100%',
|
|
},
|
|
})
|