Creepso/stremio-web
1
0
Fork 0
mirror of https://github.com/Stremio/stremio-web.git synced 2026-04-21 11:42:05 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

add a callback function prop onTransitionEnd

Browse source
This commit is contained in:
Abdalrzag Eisa 2025-06-20 07:04:48 +03:00
parent 5f106f49d3
commit 37de79a0dc
No known key found for this signature in database
GPG key ID: 4CD5A78B36195BC8
1 changed files with 13 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

18
src/components/Transition/Transition.tsx
View file

@ -5,9 +5,10 @@ type Props = {
children: JSX.Element, children: JSX.Element,
when: boolean, when: boolean,
name: string, name: string,
onTransitionEnd?: () => void
}; };
const Transition = ({ children, when, name }: Props) => { const Transition = ({ children, when, name, onTransitionEnd }: Props) => {
const [element, setElement] = useState<HTMLElement | null>(null); const [element, setElement] = useState<HTMLElement | null>(null);
const [mounted, setMounted] = useState(false); const [mounted, setMounted] = useState(false);
@ -29,8 +30,15 @@ const Transition = ({ children, when, name }: Props) => {
); );
}, [name, state, active, children]); }, [name, state, active, children]);
const onTransitionEnd = useCallback(() => { const handleTransitionEnd = useCallback(() => {
state === 'exit' && setMounted(false); switch (state) {
case 'enter':
onTransitionEnd?.();
break;
case 'exit':
setMounted(false);
break;
}
}, [state]); }, [state]);
useEffect(() => { useEffect(() => {
@ -45,8 +53,8 @@ const Transition = ({ children, when, name }: Props) => {
}, [element]); }, [element]);
useEffect(() => { useEffect(() => {
element?.addEventListener('transitionend', onTransitionEnd); element?.addEventListener('transitionend', handleTransitionEnd);
return () => element?.removeEventListener('transitionend', onTransitionEnd); return () => element?.removeEventListener('transitionend', handleTransitionEnd);
}, [element, onTransitionEnd]); }, [element, onTransitionEnd]);
return ( return (