RoyLiu
/
pdf-reader-web


			
				
					
						
						
							12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394
							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<Props> = ({
  isActive = false,
  annotations,
}: Props) => {
  let observer: any = null;
  const { t } = useTranslation('sidebar');
  const [renderQueue, setQueue] = useState<AnnotationType[]>([]);
  const containerRef = useRef<HTMLDivElement>(null);
  const innerRef = useRef<HTMLDivElement>(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 (
    <Body ref={containerRef}>
      <div ref={innerRef}>
        <Typography light align="left">
          {`${annotations.length} ${t('annotation')}`}
        </Typography>
        {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 (
              <Item
                key={key}
                title={title}
                date={date}
                type={obj_type}
                page={actualPage}
                showPageNum={actualPage !== prevPage}
              />
            );
          })}
      </div>
    </Body>
  );
};

export default AnnotationList;