diff --git a/webapp/components/threads/Conversation.tsx b/webapp/components/threads/Conversation.tsx index 67790320..42784446 100644 --- a/webapp/components/threads/Conversation.tsx +++ b/webapp/components/threads/Conversation.tsx @@ -44,11 +44,7 @@ function Conversation({ }; const position = { x: scrollPosition === -1 ? -1 : 0, y: scrollPosition }; - const [ref, scrollTo] = useScroll( - conversationId, - position, - handleUpdatePosition, - ); + const [ref, scrollTo] = useScroll(conversationId, position, handleUpdatePosition); return (
diff --git a/webapp/hooks/useScroll.ts b/webapp/hooks/useScroll.ts index 8d27d299..dab404da 100644 --- a/webapp/hooks/useScroll.ts +++ b/webapp/hooks/useScroll.ts @@ -76,7 +76,11 @@ const containerToPercentage = (element: HTMLDivElement, parent: HTMLDivElement): return containerRectToPercentage(elementRect, parentRect); }; -const percentageToContainerRect = (elementRect: Rect, parent: HTMLDivElement, position: Position2D): Rect => { +const percentageToContainerRect = ( + elementRect: Rect, + parent: HTMLDivElement, + position: Position2D, +): Rect => { const parentRect = getBoundingClientRect(parent); let width = elementRect.width - parentRect.width - parentRect.x; if (width === 0) { @@ -111,21 +115,24 @@ export default function useScroll( position: Position2D, onUpdatePosition: (props: KeyedScrollPosition) => void, ): [ - React.RefCallback, - (scrollPosition: Position2D, forceUpdate?: boolean) => void, - ] { + React.RefCallback, + (scrollPosition: Position2D, forceUpdate?: boolean) => void, +] { const previousNode: MutableRefObject = useRef(); - const keyedRect = useRef({ key, position: { x: -1, y: -1, width: -1, height: -1 } as Position2D }); + const keyedRect = useRef({ + key, + position: { x: -1, y: -1, width: -1, height: -1 } as Position2D, + }); const isScrolling = useRef(false); const handler = useRef | undefined>(); const isResizing = useRef(true); - + const handleResize = useCallback( (contentRect: Rect) => { if (isScrolling.current) { - // logger.info('handleResize isScrolling', isScrolling.current); - return; - } + // logger.info('handleResize isScrolling', isScrolling.current); + return; + } const currentRect = keyedRect.current.rect; const parent = previousNode.current as HTMLDivElement; @@ -133,7 +140,8 @@ export default function useScroll( if ( parent && (!currentRect || - (contentRect.width !== currentRect.width || contentRect.height !== currentRect.height)) + contentRect.width !== currentRect.width || + contentRect.height !== currentRect.height) ) { const rect = percentageToContainerRect(contentRect, parent, position); const { width, height, ...xy } = rect; @@ -160,21 +168,21 @@ export default function useScroll( [key, position], ); - const handleScrollEnd = useCallback((rect: Rect) => { - - if (rect.x === position.x && rect.y === position.y) { - // logger.info('same position'); - isScrolling.current = false; - return; - } - // logger.info(`handleScroll newPosition ${key}`, keyedRect.current, position, rect); - if (rect.width && rect.height) { - const newKeyedPosition: KeyedScrollPosition = { - key, - position: { x: rect.x, y: rect.y }, - rect, - }; - /* if ( + const handleScrollEnd = useCallback( + (rect: Rect) => { + if (rect.x === position.x && rect.y === position.y) { + // logger.info('same position'); + isScrolling.current = false; + return; + } + // logger.info(`handleScroll newPosition ${key}`, keyedRect.current, position, rect); + if (rect.width && rect.height) { + const newKeyedPosition: KeyedScrollPosition = { + key, + position: { x: rect.x, y: rect.y }, + rect, + }; + /* if ( (keyedRect.current.key === key && keyedRect.current.position.x !== newKeyedPosition.position.x) || keyedRect.current.position.y !== newKeyedPosition.position.y @@ -187,12 +195,14 @@ export default function useScroll( onUpdatePosition(newKeyedPosition); } } */ - onUpdatePosition(newKeyedPosition); - } + onUpdatePosition(newKeyedPosition); + } - isScrolling.current = false; - // logger.info('handleScrollEnd isScrolling', isScrolling.current, handler.current); - }, [position, onUpdatePosition, key]); + isScrolling.current = false; + // logger.info('handleScrollEnd isScrolling', isScrolling.current, handler.current); + }, + [position, onUpdatePosition, key], + ); const handleScroll = useCallback(() => { isScrolling.current = true; @@ -214,7 +224,7 @@ export default function useScroll( } const rect: Rect = containerToPercentage(element, parent); // const testRect = percentageToContainerRect(elementRect, parent, rect); - + handleScrollEnd(rect); }, 200); // waitAfterScroll(handleScrollEnd); @@ -300,7 +310,6 @@ export default function useScroll( resizeObserver.observe(node.firstChild as Element); isScrolling.current = false; } - }, [handleResize, handleScroll], );