69 lines
1.7 KiB
TypeScript
69 lines
1.7 KiB
TypeScript
import type { ElementRef, FC } from '../../lib/teact/teact';
|
|
import type React from '../../lib/teact/teact';
|
|
import { useRef } from '../../lib/teact/teact';
|
|
|
|
import usePreviousDeprecated from '../../hooks/usePreviousDeprecated';
|
|
import useShowTransition from '../../hooks/useShowTransition';
|
|
|
|
type OwnProps = {
|
|
isOpen: boolean;
|
|
isCustom?: boolean;
|
|
isHidden?: boolean;
|
|
id?: string;
|
|
className?: string;
|
|
onClick?: (e: React.MouseEvent<HTMLElement, MouseEvent>) => void;
|
|
noCloseTransition?: boolean;
|
|
shouldAnimateFirstRender?: boolean;
|
|
style?: string;
|
|
children: React.ReactNode;
|
|
ref?: ElementRef<HTMLDivElement>;
|
|
};
|
|
|
|
const ShowTransition: FC<OwnProps> = ({
|
|
isOpen,
|
|
isHidden,
|
|
isCustom,
|
|
id,
|
|
className,
|
|
onClick,
|
|
children,
|
|
noCloseTransition,
|
|
shouldAnimateFirstRender,
|
|
style,
|
|
ref: externalRef,
|
|
}) => {
|
|
const prevIsOpen = usePreviousDeprecated(isOpen);
|
|
const prevChildren = usePreviousDeprecated(children);
|
|
const fromChildrenRef = useRef<React.ReactNode>();
|
|
const isFirstRender = prevIsOpen === undefined;
|
|
|
|
const { ref, shouldRender } = useShowTransition({
|
|
isOpen: isOpen && !isHidden,
|
|
ref: externalRef,
|
|
noMountTransition: isFirstRender && !shouldAnimateFirstRender,
|
|
className: isCustom ? false : undefined,
|
|
noCloseTransition,
|
|
withShouldRender: true,
|
|
});
|
|
|
|
if (prevIsOpen && !isOpen) {
|
|
fromChildrenRef.current = prevChildren;
|
|
}
|
|
|
|
return (
|
|
(shouldRender || isHidden) && (
|
|
<div
|
|
id={id}
|
|
ref={ref}
|
|
className={className}
|
|
onClick={onClick}
|
|
style={style}
|
|
>
|
|
{isOpen ? children : fromChildrenRef.current!}
|
|
</div>
|
|
)
|
|
);
|
|
};
|
|
|
|
export default ShowTransition;
|