New Web Layout (#2126)
* Rip out virtualization on the web * Screw around with layout * onEndReached * scrollToOffset * Fix background * onScroll * Shell bars * More scroll * Fixes * position: sticky * Clean up 1 * Clean up 2 * Undo PagerWithHeader changes and fork it * Trim down both versions * Cleanup 3 * Memoize, lint * Don't scroll away modal or lightbox * Add content-visibility for rows * Fix composer * Fix types * Fix borked scroll animation * Fixes to layout * More FlatList parity * Layout fixes * Fix more layout * More layout * More layouts * Fix profile layout * Remove onScroll * Display: none inactive pages * Add an intermediate List component * Fix type * Add onScrolledDownChange * Port pager to use onScrolledDownChange * Fix on mobile * Don't pass down onScroll (replacement TBD) * Remove resetMainScroll * Replace onMainScroll with MainScrollProvider * Hook ScrollProvider to pager * Fix the remaining special case * Optimize a bit * Enforce that onScroll cannot be passed * Keep value updated even if no handler * Also memo it * Move the fork to List.web * Add scroll handler * Consolidate List props a bit * More stuff * Rm unused * Simplify * Make isScrolledDown work * Oops * Fixes * Hook up context scroll handlers * Scroll restore for tabs * Route scroll restoration POC * Fix some issues with restoration * Remove bad idea * Fix pager scroll restoration * Undo accidental locale changes * onContentSizeChange * Scroll to post * Better positioning * Layout fixes * Factor out navigation stuff * Cleanup * Oops * Cleanup * Fixes and types * Naming etc * Fix crash * Match FL semantics * Snap the header scroll on the web * Add body scroll lock * Scroll to top on search * Fix types * Typos * Fix Safari overflow * Fix search positioning * Add border * Patch react navigation * Revert "Patch react navigation" This reverts commit 62516ed9c20410d166e1582b43b656c819495ddc. * fixes * scroll * scrollbar * cleanup unrelated * undo unrel * flatter * Fix css * twk
This commit is contained in:
parent
cd02922b03
commit
f015229acf
35 changed files with 849 additions and 97 deletions
|
@ -15,6 +15,7 @@ import {useAuxClick} from 'lib/hooks/useAuxClick'
|
|||
import {t} from '@lingui/macro'
|
||||
import {useIsDrawerOpen, useSetDrawerOpen} from '#/state/shell'
|
||||
import {useCloseAllActiveElements} from '#/state/util'
|
||||
import {useWebBodyScrollLock} from '#/lib/hooks/useWebBodyScrollLock'
|
||||
import {Outlet as PortalOutlet} from '#/components/Portal'
|
||||
|
||||
function ShellInner() {
|
||||
|
@ -24,6 +25,7 @@ function ShellInner() {
|
|||
const navigator = useNavigation<NavigationProp>()
|
||||
const closeAllActiveElements = useCloseAllActiveElements()
|
||||
|
||||
useWebBodyScrollLock(isDrawerOpen)
|
||||
useAuxClick()
|
||||
|
||||
useEffect(() => {
|
||||
|
@ -34,12 +36,10 @@ function ShellInner() {
|
|||
}, [navigator, closeAllActiveElements])
|
||||
|
||||
return (
|
||||
<View style={[s.hContentRegion, {overflow: 'hidden'}]}>
|
||||
<View style={s.hContentRegion}>
|
||||
<ErrorBoundary>
|
||||
<FlatNavigator />
|
||||
</ErrorBoundary>
|
||||
</View>
|
||||
<>
|
||||
<ErrorBoundary>
|
||||
<FlatNavigator />
|
||||
</ErrorBoundary>
|
||||
<Composer winHeight={0} />
|
||||
<ModalsContainer />
|
||||
<PortalOutlet />
|
||||
|
@ -55,7 +55,7 @@ function ShellInner() {
|
|||
</View>
|
||||
</TouchableOpacity>
|
||||
)}
|
||||
</View>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
|
@ -78,7 +78,8 @@ const styles = StyleSheet.create({
|
|||
backgroundColor: colors.black, // TODO
|
||||
},
|
||||
drawerMask: {
|
||||
position: 'absolute',
|
||||
// @ts-ignore web only
|
||||
position: 'fixed',
|
||||
width: '100%',
|
||||
height: '100%',
|
||||
top: 0,
|
||||
|
@ -87,7 +88,8 @@ const styles = StyleSheet.create({
|
|||
},
|
||||
drawerContainer: {
|
||||
display: 'flex',
|
||||
position: 'absolute',
|
||||
// @ts-ignore web only
|
||||
position: 'fixed',
|
||||
top: 0,
|
||||
left: 0,
|
||||
height: '100%',
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue