29 lines
896 B
TypeScript
29 lines
896 B
TypeScript
|
import React, { ReactElement, useEffect, useState } from 'react';
|
||
|
|
|
||
|
|
export const DialogTransitionContext = React.createContext({ isUnmounting: false });
|
||
|
|
|
||
|
|
const DialogTransition = ({ children }: { children: ReactElement | null; }) => {
|
||
|
|
const [ childrenToRender, setChildrenToRender ] = useState(children);
|
||
|
|
const [ isUnmounting, setIsUnmounting ] = useState(false);
|
||
|
|
|
||
|
|
useEffect(() => {
|
||
|
|
if (children === null) {
|
||
|
|
setIsUnmounting(true);
|
||
|
|
setTimeout(() => {
|
||
|
|
setChildrenToRender(children);
|
||
|
|
setIsUnmounting(false);
|
||
|
|
}, 150);
|
||
|
|
} else {
|
||
|
|
setChildrenToRender(children);
|
||
|
|
}
|
||
|
|
}, [ children ]);
|
||
|
|
|
||
|
|
return (
|
||
|
|
<DialogTransitionContext.Provider value = {{ isUnmounting }}>
|
||
|
|
{childrenToRender}
|
||
|
|
</DialogTransitionContext.Provider>
|
||
|
|
);
|
||
|
|
};
|
||
|
|
|
||
|
|
export default DialogTransition;
|