From b39f24d9a750fc5d74a092f6db38b0a5bd4357cc Mon Sep 17 00:00:00 2001 From: Roland Osborne Date: Wed, 18 May 2022 11:18:24 -0700 Subject: [PATCH] fix empty list in safari bug --- .../TopicItem/ImageAsset/ImageAsset.styled.js | 4 +-- .../TopicItem/TopicItem.styled.js | 2 +- .../TopicItem/VideoAsset/VideoAsset.styled.js | 4 +-- net/web/src/VirtualList/VirtualList.jsx | 32 ++++++++----------- 4 files changed, 19 insertions(+), 23 deletions(-) diff --git a/net/web/src/User/Conversation/TopicItem/ImageAsset/ImageAsset.styled.js b/net/web/src/User/Conversation/TopicItem/ImageAsset/ImageAsset.styled.js index 797d5ac3..b77da6a6 100644 --- a/net/web/src/User/Conversation/TopicItem/ImageAsset/ImageAsset.styled.js +++ b/net/web/src/User/Conversation/TopicItem/ImageAsset/ImageAsset.styled.js @@ -21,10 +21,10 @@ export const ImageAssetWrapper = styled.div` } .expand { - padding-right: 2px; + padding-left: 4px; position: absolute; bottom: 0; - right: 0; + left: 0; } `; diff --git a/net/web/src/User/Conversation/TopicItem/TopicItem.styled.js b/net/web/src/User/Conversation/TopicItem/TopicItem.styled.js index 1aaec5be..458637c6 100644 --- a/net/web/src/User/Conversation/TopicItem/TopicItem.styled.js +++ b/net/web/src/User/Conversation/TopicItem/TopicItem.styled.js @@ -5,7 +5,6 @@ export const TopicItemWrapper = styled.div` flex-direction: row; width: 100%; padding-left: 8px; - padding-right: 8px; .avatar { height: 32px; @@ -43,6 +42,7 @@ export const TopicItemWrapper = styled.div` .message { padding-top: 6px; + padding-right: 16px; } } `; diff --git a/net/web/src/User/Conversation/TopicItem/VideoAsset/VideoAsset.styled.js b/net/web/src/User/Conversation/TopicItem/VideoAsset/VideoAsset.styled.js index a04b4f62..eafb2c7d 100644 --- a/net/web/src/User/Conversation/TopicItem/VideoAsset/VideoAsset.styled.js +++ b/net/web/src/User/Conversation/TopicItem/VideoAsset/VideoAsset.styled.js @@ -39,11 +39,11 @@ export const VideoAssetWrapper = styled.div` } .expand { - padding-right: 2px; + padding-left: 4px; visibility: hidden; position: absolute; bottom: 0; - right: 0; + left: 0; } `; diff --git a/net/web/src/VirtualList/VirtualList.jsx b/net/web/src/VirtualList/VirtualList.jsx index 6a25903c..21bfceea 100644 --- a/net/web/src/VirtualList/VirtualList.jsx +++ b/net/web/src/VirtualList/VirtualList.jsx @@ -11,12 +11,12 @@ export function VirtualList({ id, items, itemRenderer }) { const DEFAULT_LIST_HEIGHT = 4096; const GUTTER = 6; - const [ viewHeight, setViewHeight ] = useState(DEFAULT_LIST_HEIGHT); const [ canvasHeight, setCanvasHeight ] = useState(DEFAULT_LIST_HEIGHT*3); const [ slots, setSlots ] = useState(new Map()); const [ scroll, setScroll ] = useState('hidden'); let update = useRef(0); + let viewHeight = useRef(DEFAULT_LIST_HEIGHT); let latch = useRef(true); let scrollTop = useRef(0); let containers = useRef([]); @@ -49,11 +49,8 @@ export function VirtualList({ id, items, itemRenderer }) { } useEffect(() => { - if (viewHeight * 3 > canvasHeight) { - growCanvasHeight(viewHeight * 3); - } updateCanvas(); - }, [viewHeight]); + }, [canvasHeight]); useEffect(() => { if (key.current != id) { @@ -65,10 +62,6 @@ export function VirtualList({ id, items, itemRenderer }) { setItems(); }, [items, id]); - useEffect(() => { - updateCanvas(); - }, [viewHeight, canvasHeight]); - const onScrollWheel = (e) => { if (e.deltaY < 0 && latch.current) { latch.current = false; @@ -96,15 +89,15 @@ export function VirtualList({ id, items, itemRenderer }) { let view = getPlacement(); if (view && containers.current[containers.current.length - 1].index == items.length - 1) { if (view?.overscan?.bottom <= 0) { - if (view.position.height < viewHeight) { + if (view.position.height < viewHeight.current) { if (scrollTop.current != view.position.top) { scrollTop.current = view.position.top; listRef.current.scrollTo({ top: scrollTop.current, left: 0 }); } } else { - if (scrollTop.current != view.position.bottom - viewHeight) { - scrollTop.current = view.position.bottom - viewHeight; + if (scrollTop.current != view.position.bottom - viewHeight.current) { + scrollTop.current = view.position.bottom - viewHeight.current; listRef.current.scrollTo({ top: scrollTop.current, left: 0 }); } } @@ -162,7 +155,7 @@ export function VirtualList({ id, items, itemRenderer }) { containers.current.shift(); } while (containers.current.length > 0 && - containers.current[containers.current.length - 1].top > scrollTop.current + viewHeight + HOLDZONE) { + containers.current[containers.current.length - 1].top > scrollTop.current + viewHeight.current + HOLDZONE) { removeSlot(containers.current[containers.current.length - 1].id); containers.current.pop(); } @@ -226,15 +219,15 @@ export function VirtualList({ id, items, itemRenderer }) { if (latch.current) { let view = getPlacement(); if (view) { - if (view.position.height < viewHeight) { + if (view.position.height < viewHeight.current) { if (scrollTop.current != view.position.top) { scrollTop.current = view.position.top; listRef.current.scrollTo({ top: scrollTop.current, left: 0, behavior: 'smooth' }); } } else { - if (scrollTop.current != view.position.bottom - viewHeight) { - scrollTop.current = view.position.bottom - viewHeight; + if (scrollTop.current != view.position.bottom - viewHeight.current) { + scrollTop.current = view.position.bottom - viewHeight.current; listRef.current.scrollTo({ top: scrollTop.current, left: 0, behavior: 'smooth' }); } } @@ -310,7 +303,7 @@ export function VirtualList({ id, items, itemRenderer }) { let top = containers.current[0].top; let bottom = containers.current[containers.current.length-1].top + containers.current[containers.current.length-1].height + 2 * GUTTER; let overTop = scrollTop.current - top; - let overBottom = bottom - (scrollTop.current + viewHeight); + let overBottom = bottom - (scrollTop.current + viewHeight.current); return { position: { top, bottom, height: bottom - top }, overscan: { top: overTop, bottom: overBottom } @@ -320,7 +313,10 @@ export function VirtualList({ id, items, itemRenderer }) { return ( {({ height }) => { - setViewHeight(height); + if (height) { + growCanvasHeight(height * 3); + viewHeight.current = height; + } return (