From f015229acfef48084f9f9bbafd1d7fb787cbe00e Mon Sep 17 00:00:00 2001 From: dan Date: Mon, 22 Jan 2024 22:46:32 +0000 Subject: 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 --- src/view/com/lightbox/Lightbox.web.tsx | 20 ++++++++++++++------ 1 file changed, 14 insertions(+), 6 deletions(-) (limited to 'src/view/com/lightbox/Lightbox.web.tsx') diff --git a/src/view/com/lightbox/Lightbox.web.tsx b/src/view/com/lightbox/Lightbox.web.tsx index a258d25ab..fb97c30a4 100644 --- a/src/view/com/lightbox/Lightbox.web.tsx +++ b/src/view/com/lightbox/Lightbox.web.tsx @@ -1,13 +1,17 @@ import React, {useCallback, useEffect, useState} from 'react' import { Image, + ImageStyle, TouchableOpacity, TouchableWithoutFeedback, StyleSheet, View, Pressable, } from 'react-native' -import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome' +import { + FontAwesomeIcon, + FontAwesomeIconStyle, +} from '@fortawesome/react-native-fontawesome' import {colors, s} from 'lib/styles' import ImageDefaultHeader from './ImageViewing/components/ImageDefaultHeader' import {Text} from '../util/text/Text' @@ -19,6 +23,7 @@ import { ImagesLightbox, ProfileImageLightbox, } from '#/state/lightbox' +import {useWebBodyScrollLock} from '#/lib/hooks/useWebBodyScrollLock' interface Img { uri: string @@ -28,8 +33,10 @@ interface Img { export function Lightbox() { const {activeLightbox} = useLightbox() const {closeLightbox} = useLightboxControls() + const isActive = !!activeLightbox + useWebBodyScrollLock(isActive) - if (!activeLightbox) { + if (!isActive) { return null } @@ -116,7 +123,7 @@ function LightboxInner({ @@ -129,7 +136,7 @@ function LightboxInner({ accessibilityHint=""> @@ -143,7 +150,7 @@ function LightboxInner({ accessibilityHint=""> @@ -178,7 +185,8 @@ function LightboxInner({ const styles = StyleSheet.create({ mask: { - position: 'absolute', + // @ts-ignore + position: 'fixed', top: 0, left: 0, width: '100%', -- cgit 1.4.1