69 lines
2.3 KiB
TypeScript
69 lines
2.3 KiB
TypeScript
import { ReactNode, useCallback, useEffect, useMemo, useState } from 'react';
|
|
import { FaChevronDown } from 'react-icons/fa';
|
|
|
|
const ScrollToBottom = ({ children, className = '' }: { children: ReactNode; className?: string }) => {
|
|
const [node, setNode] = useState<HTMLDivElement | null>(null);
|
|
const [show, setShow] = useState(false);
|
|
|
|
const bottom = useCallback((node: HTMLDivElement) => {
|
|
if (node) {
|
|
node.scrollIntoView({ behavior: 'smooth' });
|
|
setNode(node);
|
|
}
|
|
}, []);
|
|
|
|
useMemo(() => {
|
|
if (node) {
|
|
const container = document.querySelector('main > div');
|
|
container?.addEventListener('DOMNodeInserted', (e) => {
|
|
if (!(e.target as Element).classList.contains('message')) return;
|
|
if (node?.getBoundingClientRect() && node.getBoundingClientRect().y >= window.innerHeight) {
|
|
node?.scrollIntoView({ behavior: 'smooth' });
|
|
}
|
|
});
|
|
|
|
container?.querySelectorAll('.message > div > img').forEach((img) => {
|
|
img.addEventListener('load', () => {
|
|
if (node?.getBoundingClientRect() && node.getBoundingClientRect().y >= window.innerHeight) {
|
|
node?.scrollIntoView({ behavior: 'smooth' });
|
|
}
|
|
});
|
|
});
|
|
|
|
const observer = new IntersectionObserver(
|
|
([entry]) => {
|
|
if (entry.isIntersecting) {
|
|
setShow(false);
|
|
} else {
|
|
setShow(true);
|
|
}
|
|
},
|
|
{ threshold: 1 }
|
|
);
|
|
observer.observe(node);
|
|
return () => observer.disconnect();
|
|
}
|
|
}, [node]);
|
|
|
|
return (
|
|
<>
|
|
<div className={className}>
|
|
{children}
|
|
<div className="scroll-bottom" ref={bottom}></div>
|
|
</div>
|
|
<button
|
|
onClick={() => node?.scrollIntoView({ behavior: 'smooth' })}
|
|
className={'absolute right-3 ' + (show ? 'animate-show bottom-3 block' : 'animate-hide hidden bottom-0 -mb-10')}
|
|
name="bottom"
|
|
>
|
|
<span className="popup-btn block cursor-pointer rounded-full shadow-lg shadow-slate-900 bg-grey-dark hover:bg-grey-light transition-all">
|
|
<FaChevronDown className="fill-grey-light hover:fill-grey-dark transition-all text-xl w-10 h-10 p-2.5" />
|
|
</span>
|
|
<span className="sr-only">Descendre en bas de la page</span>
|
|
</button>
|
|
</>
|
|
);
|
|
};
|
|
|
|
export default ScrollToBottom;
|