Creepso/stremio-web
1
0
Fork 0
mirror of https://github.com/Stremio/stremio-web.git synced 2026-01-11 22:40:31 +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,
when: boolean,
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 [mounted, setMounted] = useState(false);
@ -29,8 +30,15 @@ const Transition = ({ children, when, name }: Props) => {
);
}, [name, state, active, children]);
const onTransitionEnd = useCallback(() => {
state === 'exit' && setMounted(false);
const handleTransitionEnd = useCallback(() => {
switch (state) {
case 'enter':
onTransitionEnd?.();
break;
case 'exit':
setMounted(false);
break;
}
}, [state]);
useEffect(() => {
@ -45,8 +53,8 @@ const Transition = ({ children, when, name }: Props) => {
}, [element]);
useEffect(() => {
element?.addEventListener('transitionend', onTransitionEnd);
return () => element?.removeEventListener('transitionend', onTransitionEnd);
element?.addEventListener('transitionend', handleTransitionEnd);
return () => element?.removeEventListener('transitionend', handleTransitionEnd);
}, [element, onTransitionEnd]);
return (