import React, { useEffect, useState, useRef, useCallback } from 'react'; import { useTranslation } from 'react-i18next'; import Typography from '../Typography'; import Item from '../AnnotationItem'; import { watchScroll } from '../../helpers/utility'; import { Body } from '../../global/sidebarStyled'; type Props = { isActive?: boolean; annotations: AnnotationType[]; }; const AnnotationList: React.FC = ({ isActive = false, annotations, }: Props) => { let observer: any = null; const { t } = useTranslation('sidebar'); const [renderQueue, setQueue] = useState([]); const containerRef = useRef(null); const innerRef = useRef(null); const scrollUpdate = useCallback( (state: ScrollStateType): void => { const innerHeight = innerRef.current?.offsetHeight || 0; const wrapperHeight = containerRef.current?.offsetHeight || 0; if ( wrapperHeight + state.lastY >= innerHeight && renderQueue.length !== annotations.length ) { const start = renderQueue.length; const end = renderQueue.length + 15; const newQueue = [...renderQueue, ...annotations.slice(start, end)]; setQueue(newQueue); } }, [renderQueue, annotations] ); useEffect(() => { observer = watchScroll(containerRef.current, scrollUpdate); return (): void => { if (observer) { observer.subscriber.unsubscribe(); } }; }, [containerRef, scrollUpdate]); useEffect(() => { if (isActive) { setQueue(annotations.slice(0, 15)); } }, [isActive, annotations]); return (

{`${annotations.length} ${t('annotation')}`} {isActive && renderQueue.map((ele, index) => { const key = `annot_item_${index}`; const { obj_type, obj_attr: { page, title, date }, } = ele; const actualPage = page + 1; const prevAnnot = annotations[index - 1]; const prevPage = index > 0 && prevAnnot ? prevAnnot.obj_attr.page + 1 : -1; return ( ); })}

); }; export default AnnotationList;