|
|
@@ -1,15 +1,13 @@
|
|
|
-import React, { useEffect, useState, useRef, useCallback } from 'react';
|
|
|
+import React, { useEffect, useState } 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;
|
|
|
+ isActive: boolean;
|
|
|
annotations: AnnotationType[];
|
|
|
};
|
|
|
|
|
|
@@ -17,55 +15,33 @@ 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]);
|
|
|
+ const [list, setList] = useState<AnnotationType[]>([]);
|
|
|
|
|
|
useEffect(() => {
|
|
|
- if (isActive) {
|
|
|
- setQueue(annotations.slice(0, 15));
|
|
|
+ if (isActive && annotations.length) {
|
|
|
+ annotations.sort((a, b) => {
|
|
|
+ if (a.obj_attr.page > b.obj_attr.page) {
|
|
|
+ return 1;
|
|
|
+ }
|
|
|
+ if (a.obj_attr.page < b.obj_attr.page) {
|
|
|
+ return -1;
|
|
|
+ }
|
|
|
+ return 0;
|
|
|
+ });
|
|
|
+ setList(annotations);
|
|
|
}
|
|
|
}, [isActive, annotations]);
|
|
|
|
|
|
return (
|
|
|
- <Body ref={containerRef}>
|
|
|
- <div ref={innerRef}>
|
|
|
+ <Body>
|
|
|
+ <div>
|
|
|
<Typography light align="left">
|
|
|
{`${annotations.length} ${t('annotation')}`}
|
|
|
</Typography>
|
|
|
{isActive &&
|
|
|
- renderQueue.map((ele, index) => {
|
|
|
- const key = `annot_item_${index}`;
|
|
|
+ list.map((ele, index) => {
|
|
|
+ const key = `annotation_item_${index}`;
|
|
|
const {
|
|
|
obj_type,
|
|
|
obj_attr: { page, title, date },
|
