polynux
/
groupomania
mirror of https://github.com/polynux/groupomania-openclassrooms.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

scroll when new message

This commit is contained in:
Guillaume Dorce 2022-10-06 17:23:18 +02:00
parent 6e01331ef4
commit e84fb8db65
2 changed files with 14 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
client/src/components/MessageWrapper.tsx
View File

@ -21,7 +21,7 @@ const MessageWrapper = () => {
return ( return (
<main className="messages-wrapper rounded-md w-full max-w-3xl flex flex-col max-h-[83vh] relative"> <main className="messages-wrapper rounded-md w-full max-w-3xl flex flex-col max-h-[83vh] relative">
<ScrollToBottom className="message-container overflow-scroll flex flex-col gap-4 w-full py-4 -mb-3"> <ScrollToBottom className="message-container overflow-scroll flex flex-col gap-4 w-full pt-4 pb-6 -mb-3">
{isLoading {isLoading
? '' ? ''
: isError : isError

21
client/src/components/ScrollToBottom.tsx
View File

@ -4,24 +4,29 @@ import { FaChevronDown } from 'react-icons/fa';
const ScrollToBottom = ({ children, className = '' }: { children: ReactNode; className?: string }) => { const ScrollToBottom = ({ children, className = '' }: { children: ReactNode; className?: string }) => {
const [node, setNode] = useState<HTMLDivElement | null>(null); const [node, setNode] = useState<HTMLDivElement | null>(null);
const [show, setShow] = useState(false); const [show, setShow] = useState(false);
const bottom = useCallback((node: HTMLDivElement) => { const bottom = useCallback((node: HTMLDivElement) => {
if (node) { if (node) {
node.scrollIntoView({ behavior: 'smooth' }); node.scrollIntoView({ behavior: 'smooth' });
setNode(node); setNode(node);
} }
}, []); }, []);
useEffect(() => { useEffect(() => {
document.querySelector('main > div')?.addEventListener('scroll', () => { const container = document.querySelector('main > div');
container?.addEventListener('scroll', () => {
if (node?.getBoundingClientRect() && node.getBoundingClientRect().y >= window.innerHeight) { if (node?.getBoundingClientRect() && node.getBoundingClientRect().y >= window.innerHeight) {
setShow(true); setShow(true);
} else { } else {
setShow(false); setShow(false);
} }
}); });
container?.addEventListener('DOMNodeInserted', () => {
if (node?.getBoundingClientRect() && node.getBoundingClientRect().y >= window.innerHeight) {
node?.scrollIntoView({ behavior: 'smooth' });
}
});
}, [node]); }, [node]);
return ( return (
<> <>
@ -31,11 +36,11 @@ const ScrollToBottom = ({ children, className = '' }: { children: ReactNode; cla
</div> </div>
<button <button
onClick={() => node?.scrollIntoView({ behavior: 'smooth' })} onClick={() => node?.scrollIntoView({ behavior: 'smooth' })}
className={"absolute right-3 transition-all" + (show ? ' bottom-3' : ' -bottom-10')} className={'absolute right-3 transition-all' + (show ? ' bottom-3' : ' -bottom-10')}
> >
<div className="popup-btn cursor-pointer rounded-full bg-grey-dark hover:bg-grey-light transition-all"> <div className="popup-btn 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" /> <FaChevronDown className="fill-grey-light hover:fill-grey-dark transition-all text-xl w-10 h-10 p-2.5" />
</div> </div>
</button> </button>
</> </>
); );