1
0
Fork 0
mirror of https://github.com/muerwre/vault-frontend.git synced 2025-04-25 12:56:41 +07:00

made tags panel

This commit is contained in:
Fedor Katurov 2020-10-31 15:06:08 +07:00
parent f2289f4530
commit c4f60f3d81
31 changed files with 552 additions and 75 deletions

View file

@ -0,0 +1,42 @@
import React, { FC, HTMLAttributes, useCallback, useEffect, useRef } from 'react';
import styles from './styles.module.scss';
interface IProps extends HTMLAttributes<HTMLDivElement> {
hasMore: boolean;
scrollReactPx?: number;
loadMore: () => void;
}
const InfiniteScroll: FC<IProps> = ({ children, hasMore, scrollReactPx, loadMore, ...props }) => {
const ref = useRef<HTMLDivElement>(null);
const onScrollEnd = useCallback(
(entries: IntersectionObserverEntry[]) => {
if (!hasMore || !entries[0].isIntersecting) return;
loadMore();
},
[hasMore, loadMore]
);
useEffect(() => {
if (!ref.current) return;
const observer = new IntersectionObserver(onScrollEnd, {
root: null,
rootMargin: '200px',
threshold: 1.0,
});
observer.observe(ref.current);
return () => observer.disconnect();
}, [ref.current, onScrollEnd]);
return (
<div {...props}>
{children}
{hasMore && <div className={styles.more} ref={ref} />}
</div>
);
};
export { InfiniteScroll };

View file

@ -0,0 +1,2 @@
.more {
}