TelegramPWA/src/components/ui/ShowTransition.tsx
Alexander Zinchuk 3afcde3217 Initial commit
2021-04-09 14:11:51 +03:00

42 lines
1.1 KiB
TypeScript

import React, { FC, useRef } from '../../lib/teact/teact';
import useShowTransition from '../../hooks/useShowTransition';
import usePrevious from '../../hooks/usePrevious';
import buildClassName from '../../util/buildClassName';
type ChildrenFn = () => any;
type OwnProps = {
isOpen: boolean;
isCustom?: boolean;
id?: string;
className?: string;
onClick?: (e: React.MouseEvent<HTMLElement, MouseEvent>) => void;
children: ChildrenFn;
};
const ShowTransition: FC<OwnProps> = ({
isOpen, isCustom, id, className, onClick, children,
}) => {
const { shouldRender, transitionClassNames } = useShowTransition(
isOpen, undefined, undefined, isCustom ? false : undefined,
);
const prevIsOpen = usePrevious(isOpen);
const prevChildren = usePrevious(children);
const fromChildrenRef = useRef<ChildrenFn>();
if (prevIsOpen && !isOpen) {
fromChildrenRef.current = prevChildren;
}
return (
shouldRender && (
<div id={id} className={buildClassName(className, transitionClassNames)} onClick={onClick}>
{isOpen ? children() : fromChildrenRef.current!()}
</div>
)
);
};
export default ShowTransition;