diff --git a/src/components/auth/AuthQrCode.tsx b/src/components/auth/AuthQrCode.tsx index 60693b09a..879acdc31 100644 --- a/src/components/auth/AuthQrCode.tsx +++ b/src/components/auth/AuthQrCode.tsx @@ -17,7 +17,7 @@ import { getSuggestedLanguage } from './helpers/getSuggestedLanguage'; import useAsync from '../../hooks/useAsync'; import useFlag from '../../hooks/useFlag'; -import useMediaTransition from '../../hooks/useMediaTransition'; +import useMediaTransitionDeprecated from '../../hooks/useMediaTransitionDeprecated'; import useOldLang from '../../hooks/useOldLang'; import useOldLangString from '../../hooks/useOldLangString'; @@ -90,7 +90,7 @@ const AuthCode: FC = ({ }); }, []); - const transitionClassNames = useMediaTransition(isQrMounted); + const transitionClassNames = useMediaTransitionDeprecated(isQrMounted); useLayoutEffect(() => { if (!authQrCode || !qrCode) { diff --git a/src/components/calls/group/GroupCallTopPane.tsx b/src/components/calls/group/GroupCallTopPane.tsx index 29cf620d8..d0f767ed6 100644 --- a/src/components/calls/group/GroupCallTopPane.tsx +++ b/src/components/calls/group/GroupCallTopPane.tsx @@ -12,7 +12,7 @@ import buildClassName from '../../../util/buildClassName'; import useCurrentOrPrev from '../../../hooks/useCurrentOrPrev'; import useOldLang from '../../../hooks/useOldLang'; -import useShowTransition from '../../../hooks/useShowTransition'; +import useShowTransitionDeprecated from '../../../hooks/useShowTransitionDeprecated'; import AvatarList from '../../common/AvatarList'; import Button from '../../ui/Button'; @@ -89,7 +89,7 @@ const GroupCallTopPane: FC = ({ const { shouldRender, transitionClassNames, - } = useShowTransition(Boolean(groupCall && isActive)); + } = useShowTransitionDeprecated(Boolean(groupCall && isActive)); const renderingParticipantCount = useCurrentOrPrev(groupCall?.participantsCount, true); const renderingFetchedParticipants = useCurrentOrPrev(fetchedParticipants, true); diff --git a/src/components/common/AnimatedIcon.tsx b/src/components/common/AnimatedIcon.tsx index 860630f37..6e29638d1 100644 --- a/src/components/common/AnimatedIcon.tsx +++ b/src/components/common/AnimatedIcon.tsx @@ -6,7 +6,7 @@ import buildClassName from '../../util/buildClassName'; import useFlag from '../../hooks/useFlag'; import useLastCallback from '../../hooks/useLastCallback'; -import useMediaTransition from '../../hooks/useMediaTransition'; +import useMediaTransitionDeprecated from '../../hooks/useMediaTransitionDeprecated'; import AnimatedSticker from './AnimatedSticker'; @@ -29,7 +29,7 @@ function AnimatedIcon(props: OwnProps) { ...otherProps } = props; const [isAnimationLoaded, markAnimationLoaded] = useFlag(false); - const transitionClassNames = useMediaTransition(noTransition || isAnimationLoaded); + const transitionClassNames = useMediaTransitionDeprecated(noTransition || isAnimationLoaded); const handleLoad = useLastCallback(() => { markAnimationLoaded(); diff --git a/src/components/common/AnimatedIconWithPreview.tsx b/src/components/common/AnimatedIconWithPreview.tsx index a91006ffc..de53e2d07 100644 --- a/src/components/common/AnimatedIconWithPreview.tsx +++ b/src/components/common/AnimatedIconWithPreview.tsx @@ -7,7 +7,7 @@ import buildStyle from '../../util/buildStyle'; import useFlag from '../../hooks/useFlag'; import useLastCallback from '../../hooks/useLastCallback'; -import useMediaTransition from '../../hooks/useMediaTransition'; +import useMediaTransitionDeprecated from '../../hooks/useMediaTransitionDeprecated'; import AnimatedIcon from './AnimatedIcon'; @@ -27,10 +27,10 @@ function AnimatedIconWithPreview(props: OwnProps) { } = props; const [isThumbOpen, , unmarkThumbOpen] = useFlag(Boolean(thumbDataUri)); - const thumbClassNames = useMediaTransition(isThumbOpen); + const thumbClassNames = useMediaTransitionDeprecated(isThumbOpen); const [isPreviewOpen, markPreviewOpen, unmarkPreviewOpen] = useFlag(loadedPreviewUrls.has(previewUrl)); - const previewClassNames = useMediaTransition(isPreviewOpen); + const previewClassNames = useMediaTransitionDeprecated(isPreviewOpen); const [isAnimationReady, markAnimationReady] = useFlag(false); diff --git a/src/components/common/Audio.tsx b/src/components/common/Audio.tsx index 32851fa4f..f4ca5274c 100644 --- a/src/components/common/Audio.tsx +++ b/src/components/common/Audio.tsx @@ -38,7 +38,7 @@ import useLastCallback from '../../hooks/useLastCallback'; import useMedia from '../../hooks/useMedia'; import useMediaWithLoadProgress from '../../hooks/useMediaWithLoadProgress'; import useOldLang from '../../hooks/useOldLang'; -import useShowTransition from '../../hooks/useShowTransition'; +import useShowTransitionDeprecated from '../../hooks/useShowTransitionDeprecated'; import Button from '../ui/Button'; import Link from '../ui/Link'; @@ -213,7 +213,7 @@ const Audio: FC = ({ const { shouldRender: shouldRenderSpinner, transitionClassNames: spinnerClassNames, - } = useShowTransition(isTransferring); + } = useShowTransitionDeprecated(isTransferring); const shouldRenderCross = shouldRenderSpinner && (isLoadingForPlaying || isUploading); diff --git a/src/components/common/Avatar.tsx b/src/components/common/Avatar.tsx index 00bc0762e..dbd5c1074 100644 --- a/src/components/common/Avatar.tsx +++ b/src/components/common/Avatar.tsx @@ -34,7 +34,7 @@ import renderText from './helpers/renderText'; import { useFastClick } from '../../hooks/useFastClick'; import useLastCallback from '../../hooks/useLastCallback'; import useMedia from '../../hooks/useMedia'; -import useMediaTransition from '../../hooks/useMediaTransition'; +import useMediaTransitionDeprecated from '../../hooks/useMediaTransitionDeprecated'; import useOldLang from '../../hooks/useOldLang'; import OptimizedVideo from '../ui/OptimizedVideo'; @@ -160,7 +160,7 @@ const Avatar: FC = ({ // `videoBlobUrl` can be taken from memory cache, so we need to check `shouldLoadVideo` again const shouldPlayVideo = Boolean(videoBlobUrl && shouldLoadVideo); - const transitionClassNames = useMediaTransition(hasBlobUrl); + const transitionClassNames = useMediaTransitionDeprecated(hasBlobUrl); const handleVideoEnded = useLastCallback((e) => { const video = e.currentTarget; diff --git a/src/components/common/Composer.tsx b/src/components/common/Composer.tsx index 9171036b0..6153465c6 100644 --- a/src/components/common/Composer.tsx +++ b/src/components/common/Composer.tsx @@ -124,7 +124,7 @@ import useOldLang from '../../hooks/useOldLang'; import usePreviousDeprecated from '../../hooks/usePreviousDeprecated'; import useSchedule from '../../hooks/useSchedule'; import useSendMessageAction from '../../hooks/useSendMessageAction'; -import useShowTransition from '../../hooks/useShowTransition'; +import useShowTransitionDeprecated from '../../hooks/useShowTransitionDeprecated'; import { useStateRef } from '../../hooks/useStateRef'; import useSyncEffect from '../../hooks/useSyncEffect'; import useAttachmentModal from '../middle/composer/hooks/useAttachmentModal'; @@ -1425,7 +1425,7 @@ const Composer: FC = ({ const { shouldRender: shouldRenderReactionSelector, transitionClassNames: reactionSelectorTransitonClassNames, - } = useShowTransition(isReactionSelectorOpen); + } = useShowTransitionDeprecated(isReactionSelectorOpen); const areVoiceMessagesNotAllowed = mainButtonState === MainButtonState.Record && (!canAttachMedia || !canSendVoiceByPrivacy || !canSendVoices); diff --git a/src/components/common/File.tsx b/src/components/common/File.tsx index 3a0fe4993..28d107729 100644 --- a/src/components/common/File.tsx +++ b/src/components/common/File.tsx @@ -14,9 +14,9 @@ import renderText from './helpers/renderText'; import useAppLayout from '../../hooks/useAppLayout'; import useCanvasBlur from '../../hooks/useCanvasBlur'; -import useMediaTransition from '../../hooks/useMediaTransition'; +import useMediaTransitionDeprecated from '../../hooks/useMediaTransitionDeprecated'; import useOldLang from '../../hooks/useOldLang'; -import useShowTransition from '../../hooks/useShowTransition'; +import useShowTransitionDeprecated from '../../hooks/useShowTransitionDeprecated'; import Link from '../ui/Link'; import ProgressSpinner from '../ui/ProgressSpinner'; @@ -75,12 +75,12 @@ const File: FC = ({ const [withThumb] = useState(!previewData); const noThumb = Boolean(previewData); const thumbRef = useCanvasBlur(thumbnailDataUri, noThumb, isMobile && !IS_CANVAS_FILTER_SUPPORTED); - const thumbClassNames = useMediaTransition(!noThumb); + const thumbClassNames = useMediaTransitionDeprecated(!noThumb); const { shouldRender: shouldSpinnerRender, transitionClassNames: spinnerClassNames, - } = useShowTransition(isTransferring, undefined, true); + } = useShowTransitionDeprecated(isTransferring, undefined, true); const color = getColorFromExtension(extension); const sizeString = getFileSizeString(size); diff --git a/src/components/common/Media.tsx b/src/components/common/Media.tsx index 9e82bfcfb..82930fd07 100644 --- a/src/components/common/Media.tsx +++ b/src/components/common/Media.tsx @@ -19,7 +19,7 @@ import useFlag from '../../hooks/useFlag'; import { useIsIntersecting } from '../../hooks/useIntersectionObserver'; import useLastCallback from '../../hooks/useLastCallback'; import useMedia from '../../hooks/useMedia'; -import useMediaTransition from '../../hooks/useMediaTransition'; +import useMediaTransitionDeprecated from '../../hooks/useMediaTransitionDeprecated'; import MediaSpoiler from './MediaSpoiler'; @@ -46,7 +46,7 @@ const Media: FC = ({ const isIntersecting = useIsIntersecting(ref, observeIntersection); const thumbDataUri = getMessageMediaThumbDataUri(message); const mediaBlobUrl = useMedia(getMessageMediaHash(message, 'pictogram'), !isIntersecting); - const transitionClassNames = useMediaTransition(mediaBlobUrl); + const transitionClassNames = useMediaTransitionDeprecated(mediaBlobUrl); const video = getMessageVideo(message); diff --git a/src/components/common/MediaSpoiler.tsx b/src/components/common/MediaSpoiler.tsx index 7f10af85d..a53d15219 100644 --- a/src/components/common/MediaSpoiler.tsx +++ b/src/components/common/MediaSpoiler.tsx @@ -6,7 +6,7 @@ import buildClassName from '../../util/buildClassName'; import useCanvasBlur from '../../hooks/useCanvasBlur'; import useLastCallback from '../../hooks/useLastCallback'; -import useShowTransition from '../../hooks/useShowTransition'; +import useShowTransitionDeprecated from '../../hooks/useShowTransitionDeprecated'; import styles from './MediaSpoiler.module.scss'; @@ -33,7 +33,7 @@ const MediaSpoiler: FC = ({ // eslint-disable-next-line no-null/no-null const ref = useRef(null); - const { shouldRender, transitionClassNames } = useShowTransition( + const { shouldRender, transitionClassNames } = useShowTransitionDeprecated( isVisible, undefined, true, withAnimation ? false : undefined, undefined, ANIMATION_DURATION, ); const canvasRef = useCanvasBlur(thumbDataUri, !shouldRender, undefined, BLUR_RADIUS, width, height); diff --git a/src/components/common/NothingFound.tsx b/src/components/common/NothingFound.tsx index 6d5230c6a..4a9dd7527 100644 --- a/src/components/common/NothingFound.tsx +++ b/src/components/common/NothingFound.tsx @@ -5,7 +5,7 @@ import buildClassName from '../../util/buildClassName'; import renderText from './helpers/renderText'; import useOldLang from '../../hooks/useOldLang'; -import useShowTransition from '../../hooks/useShowTransition'; +import useShowTransitionDeprecated from '../../hooks/useShowTransitionDeprecated'; import './NothingFound.scss'; @@ -18,7 +18,7 @@ const DEFAULT_TEXT = 'Nothing found.'; const NothingFound: FC = ({ text = DEFAULT_TEXT, description }) => { const lang = useOldLang(); - const { transitionClassNames } = useShowTransition(true); + const { transitionClassNames } = useShowTransitionDeprecated(true); return (
diff --git a/src/components/common/PreviewMedia.tsx b/src/components/common/PreviewMedia.tsx index 4d9227a54..2730f0288 100644 --- a/src/components/common/PreviewMedia.tsx +++ b/src/components/common/PreviewMedia.tsx @@ -14,7 +14,7 @@ import stopEvent from '../../util/stopEvent'; import { useIsIntersecting } from '../../hooks/useIntersectionObserver'; import useLastCallback from '../../hooks/useLastCallback'; import useMedia from '../../hooks/useMedia'; -import useMediaTransition from '../../hooks/useMediaTransition'; +import useMediaTransitionDeprecated from '../../hooks/useMediaTransitionDeprecated'; import './Media.scss'; @@ -42,7 +42,7 @@ const PreviewMedia: FC = ({ const thumbDataUri = getMessageMediaThumbDataUri(media); const mediaBlobUrl = useMedia(getMessageMediaHash(media, 'preview'), !isIntersecting); - const transitionClassNames = useMediaTransition(mediaBlobUrl); + const transitionClassNames = useMediaTransitionDeprecated(mediaBlobUrl); const video = media.content.video; diff --git a/src/components/common/ProfilePhoto.tsx b/src/components/common/ProfilePhoto.tsx index f3024faa4..2a6179a78 100644 --- a/src/components/common/ProfilePhoto.tsx +++ b/src/components/common/ProfilePhoto.tsx @@ -27,7 +27,7 @@ import useAppLayout from '../../hooks/useAppLayout'; import useCanvasBlur from '../../hooks/useCanvasBlur'; import useFlag from '../../hooks/useFlag'; import useMedia from '../../hooks/useMedia'; -import useMediaTransition from '../../hooks/useMediaTransition'; +import useMediaTransitionDeprecated from '../../hooks/useMediaTransitionDeprecated'; import useOldLang from '../../hooks/useOldLang'; import OptimizedVideo from '../ui/OptimizedVideo'; @@ -82,7 +82,7 @@ const ProfilePhoto: FC = ({ const fullMediaData = videoBlobUrl || photoBlobUrl; const [isVideoReady, markVideoReady] = useFlag(); const isFullMediaReady = Boolean(fullMediaData && (!isVideo || isVideoReady)); - const transitionClassNames = useMediaTransition(isFullMediaReady); + const transitionClassNames = useMediaTransitionDeprecated(isFullMediaReady); const isBlurredThumb = canHaveMedia && !isFullMediaReady && !previewBlobUrl && photo?.thumbnail?.dataUri; const blurredThumbCanvasRef = useCanvasBlur( photo?.thumbnail?.dataUri, !isBlurredThumb, isMobile && !IS_CANVAS_FILTER_SUPPORTED, diff --git a/src/components/common/ReactionEmoji.tsx b/src/components/common/ReactionEmoji.tsx index a6a6f383e..084a1eaab 100644 --- a/src/components/common/ReactionEmoji.tsx +++ b/src/components/common/ReactionEmoji.tsx @@ -13,7 +13,7 @@ import buildClassName from '../../util/buildClassName'; import useCoordsInSharedCanvas from '../../hooks/useCoordsInSharedCanvas'; import useLastCallback from '../../hooks/useLastCallback'; import useMedia from '../../hooks/useMedia'; -import useMediaTransition from '../../hooks/useMediaTransition'; +import useMediaTransitionDeprecated from '../../hooks/useMediaTransitionDeprecated'; import AnimatedIconWithPreview from './AnimatedIconWithPreview'; import CustomEmoji from './CustomEmoji'; @@ -61,7 +61,7 @@ const ReactionEmoji: FC = ({ onClick(reaction); }); - const transitionClassNames = useMediaTransition(mediaData); + const transitionClassNames = useMediaTransitionDeprecated(mediaData); const fullClassName = buildClassName( styles.root, isSelected && styles.selected, diff --git a/src/components/common/ReactionStaticEmoji.tsx b/src/components/common/ReactionStaticEmoji.tsx index bc426811f..cef3b9d6d 100644 --- a/src/components/common/ReactionStaticEmoji.tsx +++ b/src/components/common/ReactionStaticEmoji.tsx @@ -9,7 +9,7 @@ import { isSameReaction } from '../../global/helpers'; import buildClassName from '../../util/buildClassName'; import useMedia from '../../hooks/useMedia'; -import useMediaTransition from '../../hooks/useMediaTransition'; +import useMediaTransitionDeprecated from '../../hooks/useMediaTransitionDeprecated'; import CustomEmoji from './CustomEmoji'; @@ -41,7 +41,7 @@ const ReactionStaticEmoji: FC = ({ const staticIconId = availableReaction?.staticIcon?.id; const mediaData = useMedia(`document${staticIconId}`, !staticIconId, ApiMediaFormat.BlobUrl); - const transitionClassNames = useMediaTransition(mediaData); + const transitionClassNames = useMediaTransitionDeprecated(mediaData); const shouldApplySizeFix = 'emoticon' in reaction && reaction.emoticon === '🦄'; const shouldReplaceWithHeartIcon = withIconHeart && 'emoticon' in reaction && reaction.emoticon === '❤'; diff --git a/src/components/common/StickerSet.tsx b/src/components/common/StickerSet.tsx index 47208545c..a85c8a309 100644 --- a/src/components/common/StickerSet.tsx +++ b/src/components/common/StickerSet.tsx @@ -27,7 +27,7 @@ import useAppLayout from '../../hooks/useAppLayout'; import useFlag from '../../hooks/useFlag'; import { useIsIntersecting } from '../../hooks/useIntersectionObserver'; import useLastCallback from '../../hooks/useLastCallback'; -import useMediaTransition from '../../hooks/useMediaTransition'; +import useMediaTransitionDeprecated from '../../hooks/useMediaTransitionDeprecated'; import useOldLang from '../../hooks/useOldLang'; import useResizeObserver from '../../hooks/useResizeObserver'; import useWindowSize from '../../hooks/window/useWindowSize'; @@ -138,7 +138,7 @@ const StickerSet: FC = ({ const [itemsPerRow, setItemsPerRow] = useState(getItemsPerRowFallback(windowWidth)); const isIntersecting = useIsIntersecting(ref, observeIntersection ?? observeIntersectionForShowingItems); - const transitionClassNames = useMediaTransition(isIntersecting); + const transitionClassNames = useMediaTransitionDeprecated(isIntersecting); // `isNearActive` is set in advance during animation, but it is not reliable for short sets const shouldRender = isNearActive || isIntersecting; diff --git a/src/components/common/StickerView.tsx b/src/components/common/StickerView.tsx index 5b86daec6..592b72423 100644 --- a/src/components/common/StickerView.tsx +++ b/src/components/common/StickerView.tsx @@ -123,9 +123,13 @@ const StickerView: FC = ({ const thumbData = cachedPreview || previewMediaData || thumbDataUri; const isThumbOpaque = sharedCanvasRef && !withTranslucentThumb; - const thumbClassNames = useMediaTransition(thumbData && !isFullMediaReady); - const fullMediaClassNames = useMediaTransition(isFullMediaReady); - const noTransition = isLottie && withPreview; + const noCrossTransition = Boolean(isLottie && withPreview); + const thumbRef = useMediaTransition(thumbData && !isFullMediaReady, { + noCloseTransition: noCrossTransition, + }); + const fullMediaRef = useMediaTransition(isFullMediaReady, { + noOpenTransition: noCrossTransition, + }); const coords = useCoordsInSharedCanvas(containerRef, sharedCanvasRef); @@ -144,13 +148,13 @@ const StickerView: FC = ({ return ( <> = ({ /> {shouldRenderFullMedia && (isLottie ? ( } key={renderId} renderId={renderId} size={size} className={buildClassName( styles.media, - (noTransition || isThumbOpaque) && styles.noTransition, + (noCrossTransition || isThumbOpaque) && styles.noTransition, fullMediaClassName, - fullMediaClassNames, )} tgsUrl={fullMediaData} play={shouldPlay} @@ -182,8 +186,9 @@ const StickerView: FC = ({ /> ) : isVideo ? ( } canPlay={shouldPlay} - className={buildClassName(styles.media, fullMediaClassName, fullMediaClassNames, 'sticker-media')} + className={buildClassName(styles.media, fullMediaClassName, 'sticker-media')} src={fullMediaData} playsInline muted @@ -197,7 +202,8 @@ const StickerView: FC = ({ /> ) : ( } + className={buildClassName(styles.media, fullMediaClassName, 'sticker-media')} src={fullMediaData} alt={emoji} style={filterStyle} diff --git a/src/components/common/UiLoader.tsx b/src/components/common/UiLoader.tsx index fa69626f6..b7eb848ce 100644 --- a/src/components/common/UiLoader.tsx +++ b/src/components/common/UiLoader.tsx @@ -17,7 +17,7 @@ import { pause } from '../../util/schedulers'; import useEffectOnce from '../../hooks/useEffectOnce'; import useFlag from '../../hooks/useFlag'; -import useShowTransition from '../../hooks/useShowTransition'; +import useShowTransitionDeprecated from '../../hooks/useShowTransitionDeprecated'; // Workaround for incorrect bundling by Webpack: force including in the main chunk import '../ui/Modal.scss'; @@ -110,7 +110,7 @@ const UiLoader: FC = ({ const [isReady, markReady] = useFlag(); const { shouldRender: shouldRenderMask, transitionClassNames, - } = useShowTransition(!isReady, undefined, true); + } = useShowTransitionDeprecated(!isReady, undefined, true); useEffectOnce(() => { let timeout: number | undefined; diff --git a/src/components/common/reactions/ReactionAnimatedEmoji.tsx b/src/components/common/reactions/ReactionAnimatedEmoji.tsx index 755c51e75..f32d04b09 100644 --- a/src/components/common/reactions/ReactionAnimatedEmoji.tsx +++ b/src/components/common/reactions/ReactionAnimatedEmoji.tsx @@ -16,7 +16,7 @@ import useFlag from '../../../hooks/useFlag'; import { useIsIntersecting } from '../../../hooks/useIntersectionObserver'; import useLastCallback from '../../../hooks/useLastCallback'; import useMedia from '../../../hooks/useMedia'; -import useShowTransition from '../../../hooks/useShowTransition'; +import useShowTransitionDeprecated from '../../../hooks/useShowTransitionDeprecated'; import useCustomEmoji from '../hooks/useCustomEmoji'; import AnimatedSticker from '../AnimatedSticker'; @@ -125,11 +125,11 @@ const ReactionAnimatedEmoji = ({ const { shouldRender: shouldRenderEffect, transitionClassNames: animationClassNames, - } = useShowTransition(shouldPlayEffect, undefined, true, 'slow'); + } = useShowTransitionDeprecated(shouldPlayEffect, undefined, true, 'slow'); const { shouldRender: shouldRenderCenter, transitionClassNames: centerAnimationClassNames, - } = useShowTransition(shouldPlayCenter, undefined, true, 'slow'); + } = useShowTransitionDeprecated(shouldPlayCenter, undefined, true, 'slow'); const handleEnded = useLastCallback(() => { stopActiveReaction({ containerId, reaction }); @@ -140,7 +140,7 @@ const ReactionAnimatedEmoji = ({ const { shouldRender: shouldRenderStatic, transitionClassNames: staticClassNames, - } = useShowTransition(shouldShowStatic, undefined, true); + } = useShowTransitionDeprecated(shouldShowStatic, undefined, true); const rootClassName = buildClassName( styles.root, diff --git a/src/components/left/ArchivedChats.tsx b/src/components/left/ArchivedChats.tsx index cde702e3c..6e41cc7b6 100644 --- a/src/components/left/ArchivedChats.tsx +++ b/src/components/left/ArchivedChats.tsx @@ -14,7 +14,7 @@ import useForumPanelRender from '../../hooks/useForumPanelRender'; import useHistoryBack from '../../hooks/useHistoryBack'; import useLastCallback from '../../hooks/useLastCallback'; import useOldLang from '../../hooks/useOldLang'; -import useShowTransition from '../../hooks/useShowTransition'; +import useShowTransitionDeprecated from '../../hooks/useShowTransitionDeprecated'; import useLeftHeaderButtonRtlForumTransition from './main/hooks/useLeftHeaderButtonRtlForumTransition'; import StoryRibbon from '../story/StoryRibbon'; @@ -70,7 +70,7 @@ const ArchivedChats: FC = ({ const { shouldRender: shouldRenderTitle, transitionClassNames: titleClassNames, - } = useShowTransition(!isForumPanelOpen); + } = useShowTransitionDeprecated(!isForumPanelOpen); const { shouldRenderForumPanel, handleForumPanelAnimationEnd, @@ -82,7 +82,9 @@ const ArchivedChats: FC = ({ shouldRender: shouldRenderStoryRibbon, transitionClassNames: storyRibbonClassNames, isClosing: isStoryRibbonClosing, - } = useShowTransition(isStoryRibbonShown, undefined, undefined, '', false, ANIMATION_DURATION + ANIMATION_END_DELAY); + } = useShowTransitionDeprecated( + isStoryRibbonShown, undefined, undefined, '', false, ANIMATION_DURATION + ANIMATION_END_DELAY, + ); return (
diff --git a/src/components/left/main/Chat.tsx b/src/components/left/main/Chat.tsx index df36834f7..7f7b283cf 100644 --- a/src/components/left/main/Chat.tsx +++ b/src/components/left/main/Chat.tsx @@ -57,7 +57,7 @@ import useEnsureMessage from '../../../hooks/useEnsureMessage'; import useFlag from '../../../hooks/useFlag'; import { useIsIntersecting } from '../../../hooks/useIntersectionObserver'; import useLastCallback from '../../../hooks/useLastCallback'; -import useShowTransition from '../../../hooks/useShowTransition'; +import useShowTransitionDeprecated from '../../../hooks/useShowTransitionDeprecated'; import useChatListEntry from './hooks/useChatListEntry'; import Avatar from '../../common/Avatar'; @@ -290,7 +290,7 @@ const Chat: FC = ({ }, [chat, chatId, isForum, isIntersecting]); const isOnline = user && userStatus && isUserOnline(user, userStatus); - const { hasShownClass: isAvatarOnlineShown } = useShowTransition(isOnline); + const { hasShownClass: isAvatarOnlineShown } = useShowTransitionDeprecated(isOnline); const href = useMemo(() => { if (!IS_OPEN_IN_NEW_TAB_SUPPORTED) return undefined; diff --git a/src/components/left/main/ChatFolders.tsx b/src/components/left/main/ChatFolders.tsx index 6370d3a5b..5aaa6fe58 100644 --- a/src/components/left/main/ChatFolders.tsx +++ b/src/components/left/main/ChatFolders.tsx @@ -24,7 +24,7 @@ import { useFolderManagerForUnreadCounters } from '../../../hooks/useFolderManag import useHistoryBack from '../../../hooks/useHistoryBack'; import useLastCallback from '../../../hooks/useLastCallback'; import useOldLang from '../../../hooks/useOldLang'; -import useShowTransition from '../../../hooks/useShowTransition'; +import useShowTransitionDeprecated from '../../../hooks/useShowTransitionDeprecated'; import StoryRibbon from '../../story/StoryRibbon'; import TabList from '../../ui/TabList'; @@ -103,7 +103,7 @@ const ChatFolders: FC = ({ shouldRender: shouldRenderStoryRibbon, transitionClassNames: storyRibbonClassNames, isClosing: isStoryRibbonClosing, - } = useShowTransition(isStoryRibbonShown, undefined, undefined, ''); + } = useShowTransitionDeprecated(isStoryRibbonShown, undefined, undefined, ''); const allChatsFolder: ApiChatFolder = useMemo(() => { return { @@ -283,7 +283,7 @@ const ChatFolders: FC = ({ const { shouldRender: shouldRenderPlaceholder, transitionClassNames, - } = useShowTransition(!orderedFolderIds, undefined, true); + } = useShowTransitionDeprecated(!orderedFolderIds, undefined, true); function renderCurrentTab(isActive: boolean) { const activeFolder = Object.values(chatFoldersById) diff --git a/src/components/left/main/LeftMain.tsx b/src/components/left/main/LeftMain.tsx index 125d7e50f..b0ed90797 100644 --- a/src/components/left/main/LeftMain.tsx +++ b/src/components/left/main/LeftMain.tsx @@ -15,7 +15,7 @@ import { IS_ELECTRON, IS_TOUCH_ENV } from '../../../util/windowEnvironment'; import useForumPanelRender from '../../../hooks/useForumPanelRender'; import useLastCallback from '../../../hooks/useLastCallback'; import useOldLang from '../../../hooks/useOldLang'; -import useShowTransition from '../../../hooks/useShowTransition'; +import useShowTransitionDeprecated from '../../../hooks/useShowTransitionDeprecated'; import Button from '../../ui/Button'; import Transition from '../../ui/Transition'; @@ -86,7 +86,7 @@ const LeftMain: FC = ({ const { shouldRender: shouldRenderUpdateButton, transitionClassNames: updateButtonClassNames, - } = useShowTransition(isAppUpdateAvailable || isElectronUpdateAvailable); + } = useShowTransitionDeprecated(isAppUpdateAvailable || isElectronUpdateAvailable); const isMouseInside = useRef(false); diff --git a/src/components/left/settings/WallpaperTile.tsx b/src/components/left/settings/WallpaperTile.tsx index 31e29cfea..1418f4237 100644 --- a/src/components/left/settings/WallpaperTile.tsx +++ b/src/components/left/settings/WallpaperTile.tsx @@ -17,7 +17,7 @@ import useCanvasBlur from '../../../hooks/useCanvasBlur'; import useMedia from '../../../hooks/useMedia'; import useMediaWithLoadProgress from '../../../hooks/useMediaWithLoadProgress'; import usePreviousDeprecated from '../../../hooks/usePreviousDeprecated'; -import useShowTransition from '../../../hooks/useShowTransition'; +import useShowTransitionDeprecated from '../../../hooks/useShowTransitionDeprecated'; import ProgressSpinner from '../../ui/ProgressSpinner'; @@ -41,7 +41,7 @@ const WallpaperTile: FC = ({ const localBlobUrl = document.previewBlobUrl; const previewBlobUrl = useMedia(`${localMediaHash}?size=m`); const thumbRef = useCanvasBlur(document.thumbnail?.dataUri, Boolean(previewBlobUrl), true); - const { transitionClassNames } = useShowTransition( + const { transitionClassNames } = useShowTransitionDeprecated( Boolean(previewBlobUrl || localBlobUrl), undefined, undefined, @@ -53,7 +53,7 @@ const WallpaperTile: FC = ({ mediaData: fullMedia, loadProgress, } = useMediaWithLoadProgress(localMediaHash, !isLoadAllowed); const wasLoadDisabled = usePreviousDeprecated(isLoadAllowed) === false; - const { shouldRender: shouldRenderSpinner, transitionClassNames: spinnerClassNames } = useShowTransition( + const { shouldRender: shouldRenderSpinner, transitionClassNames: spinnerClassNames } = useShowTransitionDeprecated( (isLoadAllowed && !fullMedia) || slug === UPLOADING_WALLPAPER_SLUG, undefined, wasLoadDisabled, diff --git a/src/components/main/LockScreen.tsx b/src/components/main/LockScreen.tsx index 9a34bc345..bad304149 100644 --- a/src/components/main/LockScreen.tsx +++ b/src/components/main/LockScreen.tsx @@ -12,7 +12,7 @@ import { LOCAL_TGS_URLS } from '../common/helpers/animatedAssets'; import useTimeout from '../../hooks/schedulers/useTimeout'; import useFlag from '../../hooks/useFlag'; import useOldLang from '../../hooks/useOldLang'; -import useShowTransition from '../../hooks/useShowTransition'; +import useShowTransitionDeprecated from '../../hooks/useShowTransitionDeprecated'; import AnimatedIconWithPreview from '../common/AnimatedIconWithPreview'; import PasswordForm from '../common/PasswordForm'; @@ -55,7 +55,7 @@ const LockScreen: FC = ({ const [validationError, setValidationError] = useState(''); const [shouldShowPasscode, setShouldShowPasscode] = useState(false); const [isSignOutDialogOpen, openSignOutConfirmation, closeSignOutConfirmation] = useFlag(false); - const { shouldRender } = useShowTransition(isLocked); + const { shouldRender } = useShowTransitionDeprecated(isLocked); useTimeout(resetInvalidUnlockAttempts, timeoutUntil ? timeoutUntil - Date.now() : undefined); diff --git a/src/components/main/Main.tsx b/src/components/main/Main.tsx index 7acc160cf..fbdef7e36 100644 --- a/src/components/main/Main.tsx +++ b/src/components/main/Main.tsx @@ -7,18 +7,12 @@ import React, { import { addExtraClass } from '../../lib/teact/teact-dom'; import { getActions, getGlobal, withGlobal } from '../../global'; -import type { - ApiChatFolder, - ApiMessage, - ApiUser, -} from '../../api/types'; +import type { ApiChatFolder, ApiMessage, ApiUser } from '../../api/types'; import type { ApiLimitTypeWithModal, TabState } from '../../global/types'; import type { LangCode } from '../../types'; import { ElectronEvent } from '../../types/electron'; -import { - BASE_EMOJI_KEYWORD_LANG, DEBUG, INACTIVE_MARKER, -} from '../../config'; +import { BASE_EMOJI_KEYWORD_LANG, DEBUG, INACTIVE_MARKER } from '../../config'; import { requestNextMutation } from '../../lib/fasterdom/fasterdom'; import { selectCanAnimateInterface, @@ -430,9 +424,12 @@ const Main = ({ } }, []); - const leftColumnTransition = useShowTransition( - isLeftColumnOpen, undefined, true, undefined, shouldSkipHistoryAnimations, undefined, true, - ); + useShowTransition({ + ref: containerRef, + isOpen: isLeftColumnOpen, + noCloseTransition: shouldSkipHistoryAnimations, + prefix: 'left-column-', + }); const willAnimateLeftColumnRef = useRef(false); const forceUpdate = useForceUpdate(); @@ -459,9 +456,12 @@ const Main = ({ }); }, [isLeftColumnOpen, withInterfaceAnimations, forceUpdate]); - const rightColumnTransition = useShowTransition( - isRightColumnOpen, undefined, true, undefined, shouldSkipHistoryAnimations, undefined, true, - ); + useShowTransition({ + ref: containerRef, + isOpen: isRightColumnOpen, + noCloseTransition: shouldSkipHistoryAnimations, + prefix: 'right-column-', + }); const willAnimateRightColumnRef = useRef(false); const [isNarrowMessageList, setIsNarrowMessageList] = useState(isRightColumnOpen); @@ -491,11 +491,7 @@ const Main = ({ }, [isMiddleColumnOpen, isRightColumnOpen, noRightColumnAnimation, forceUpdate]); const className = buildClassName( - leftColumnTransition.hasShownClass && 'left-column-shown', - leftColumnTransition.hasOpenClass && 'left-column-open', willAnimateLeftColumnRef.current && 'left-column-animating', - rightColumnTransition.hasShownClass && 'right-column-shown', - rightColumnTransition.hasOpenClass && 'right-column-open', willAnimateRightColumnRef.current && 'right-column-animating', isNarrowMessageList && 'narrow-message-list', shouldSkipHistoryAnimations && 'history-animation-disabled', diff --git a/src/components/main/premium/previews/PremiumFeaturePreviewVideo.tsx b/src/components/main/premium/previews/PremiumFeaturePreviewVideo.tsx index 7e67048dd..4c3bbeb0d 100644 --- a/src/components/main/premium/previews/PremiumFeaturePreviewVideo.tsx +++ b/src/components/main/premium/previews/PremiumFeaturePreviewVideo.tsx @@ -7,7 +7,7 @@ import buildClassName from '../../../../util/buildClassName'; import useCanvasBlur from '../../../../hooks/useCanvasBlur'; import useMedia from '../../../../hooks/useMedia'; -import useMediaTransition from '../../../../hooks/useMediaTransition'; +import useMediaTransitionDeprecated from '../../../../hooks/useMediaTransitionDeprecated'; import OptimizedVideo from '../../../ui/OptimizedVideo'; @@ -34,7 +34,7 @@ const PremiumFeaturePreviewVideo: FC = ({ }) => { const mediaData = useMedia(`document${videoId}`); const thumbnailRef = useCanvasBlur(videoThumbnail.dataUri); - const transitionClassNames = useMediaTransition(mediaData); + const transitionClassNames = useMediaTransitionDeprecated(mediaData); return (
diff --git a/src/components/mediaViewer/VideoPlayer.tsx b/src/components/mediaViewer/VideoPlayer.tsx index 03662c34e..1e96817ae 100644 --- a/src/components/mediaViewer/VideoPlayer.tsx +++ b/src/components/mediaViewer/VideoPlayer.tsx @@ -17,7 +17,7 @@ import useBuffering from '../../hooks/useBuffering'; import useCurrentTimeSignal from '../../hooks/useCurrentTimeSignal'; import useLastCallback from '../../hooks/useLastCallback'; import usePictureInPicture from '../../hooks/usePictureInPicture'; -import useShowTransition from '../../hooks/useShowTransition'; +import useShowTransitionDeprecated from '../../hooks/useShowTransitionDeprecated'; import useVideoCleanup from '../../hooks/useVideoCleanup'; import useFullscreen from '../../hooks/window/useFullscreen'; import useControlsSignal from './hooks/useControlsSignal'; @@ -126,11 +126,15 @@ const VideoPlayer: FC = ({ const { shouldRender: shouldRenderSpinner, transitionClassNames: spinnerClassNames, - } = useShowTransition(!isBuffered && !isUnsupported, undefined, undefined, 'slow'); + } = useShowTransitionDeprecated( + !isBuffered && !isUnsupported, undefined, undefined, 'slow', + ); const { shouldRender: shouldRenderPlayButton, transitionClassNames: playButtonClassNames, - } = useShowTransition(IS_IOS && !isPlaying && !shouldRenderSpinner && !isUnsupported, undefined, undefined, 'slow'); + } = useShowTransitionDeprecated( + IS_IOS && !isPlaying && !shouldRenderSpinner && !isUnsupported, undefined, undefined, 'slow', + ); useEffect(() => { lockControls(shouldRenderSpinner); diff --git a/src/components/middle/ActionMessage.tsx b/src/components/middle/ActionMessage.tsx index 17d3fa9e9..34f62cc2f 100644 --- a/src/components/middle/ActionMessage.tsx +++ b/src/components/middle/ActionMessage.tsx @@ -38,7 +38,7 @@ import useEnsureMessage from '../../hooks/useEnsureMessage'; import useFlag from '../../hooks/useFlag'; import { useIsIntersecting, useOnIntersect } from '../../hooks/useIntersectionObserver'; import useOldLang from '../../hooks/useOldLang'; -import useShowTransition from '../../hooks/useShowTransition'; +import useShowTransitionDeprecated from '../../hooks/useShowTransitionDeprecated'; import useFocusMessage from './message/hooks/useFocusMessage'; import AnimatedIconFromSticker from '../common/AnimatedIconFromSticker'; @@ -161,7 +161,7 @@ const ActionMessage: FC = ({ } }, [isVisible, requestConfetti]); - const { transitionClassNames } = useShowTransition(isShown, undefined, noAppearanceAnimation, false); + const { transitionClassNames } = useShowTransitionDeprecated(isShown, undefined, noAppearanceAnimation, false); // No need for expensive global updates on users and chats, so we avoid them const usersById = getGlobal().users.byId; diff --git a/src/components/middle/HeaderMenuContainer.tsx b/src/components/middle/HeaderMenuContainer.tsx index 32af04351..1955ef421 100644 --- a/src/components/middle/HeaderMenuContainer.tsx +++ b/src/components/middle/HeaderMenuContainer.tsx @@ -43,7 +43,7 @@ import useFlag from '../../hooks/useFlag'; import useLastCallback from '../../hooks/useLastCallback'; import useOldLang from '../../hooks/useOldLang'; import usePrevDuringAnimation from '../../hooks/usePrevDuringAnimation'; -import useShowTransition from '../../hooks/useShowTransition'; +import useShowTransitionDeprecated from '../../hooks/useShowTransitionDeprecated'; import DeleteChatModal from '../common/DeleteChatModal'; import ReportModal from '../common/ReportModal'; @@ -211,7 +211,7 @@ const HeaderMenuContainer: FC = ({ const [shouldRenderMuteModal, markRenderMuteModal, unmarkRenderMuteModal] = useFlag(); const { x, y } = anchor; - useShowTransition(isOpen, onCloseAnimationEnd, undefined, false); + useShowTransitionDeprecated(isOpen, onCloseAnimationEnd, undefined, false); const isViewGroupInfoShown = usePrevDuringAnimation( (!isChatInfoShown && isForum) ? true : undefined, CLOSE_MENU_ANIMATION_DURATION, ); diff --git a/src/components/middle/MiddleHeader.tsx b/src/components/middle/MiddleHeader.tsx index ff92b8802..b8c308981 100644 --- a/src/components/middle/MiddleHeader.tsx +++ b/src/components/middle/MiddleHeader.tsx @@ -63,7 +63,7 @@ import useLastCallback from '../../hooks/useLastCallback'; import useLongPress from '../../hooks/useLongPress'; import useOldLang from '../../hooks/useOldLang'; import usePreviousDeprecated from '../../hooks/usePreviousDeprecated'; -import useShowTransition from '../../hooks/useShowTransition'; +import useShowTransitionDeprecated from '../../hooks/useShowTransitionDeprecated'; import useWindowSize from '../../hooks/window/useWindowSize'; import GroupCallTopPane from '../calls/group/GroupCallTopPane'; @@ -310,20 +310,20 @@ const MiddleHeader: FC = ({ const { shouldRender: shouldShowChatReportPanel, transitionClassNames: chatReportPanelClassNames, - } = useShowTransition(hasChatSettings); + } = useShowTransitionDeprecated(hasChatSettings); const renderingChatSettings = useCurrentOrPrev(hasChatSettings ? settings : undefined, true); const { shouldRender: shouldRenderAudioPlayer, transitionClassNames: audioPlayerClassNames, - } = useShowTransition(Boolean(audioMessage)); + } = useShowTransitionDeprecated(Boolean(audioMessage)); const renderingAudioMessage = useCurrentOrPrev(audioMessage, true); const { shouldRender: shouldRenderPinnedMessage, transitionClassNames: pinnedMessageClassNames, - } = useShowTransition(Boolean(pinnedMessage) && !isMiddleSearchOpen, undefined, true); + } = useShowTransitionDeprecated(Boolean(pinnedMessage) && !isMiddleSearchOpen, undefined, true); const renderingPinnedMessage = useCurrentOrPrev(pinnedMessage, true); const renderingPinnedMessagesCount = useCurrentOrPrev(pinnedMessagesCount, true); diff --git a/src/components/middle/composer/ChatCommandTooltip.tsx b/src/components/middle/composer/ChatCommandTooltip.tsx index 4f105b4d6..d3bfba514 100644 --- a/src/components/middle/composer/ChatCommandTooltip.tsx +++ b/src/components/middle/composer/ChatCommandTooltip.tsx @@ -14,7 +14,7 @@ import freezeWhenClosed from '../../../util/hoc/freezeWhenClosed'; import setTooltipItemVisible from '../../../util/setTooltipItemVisible'; import useLastCallback from '../../../hooks/useLastCallback'; -import useShowTransition from '../../../hooks/useShowTransition'; +import useShowTransitionDeprecated from '../../../hooks/useShowTransitionDeprecated'; import { useKeyboardNavigation } from './hooks/useKeyboardNavigation'; import ChatCommand from './ChatCommand'; @@ -56,7 +56,7 @@ const ChatCommandTooltip: FC = ({ // eslint-disable-next-line no-null/no-null const containerRef = useRef(null); - const { shouldRender, transitionClassNames } = useShowTransition(isOpen, undefined, undefined, false); + const { shouldRender, transitionClassNames } = useShowTransitionDeprecated(isOpen, undefined, undefined, false); const handleSendCommand = useLastCallback(({ botId, command }: ApiBotCommand) => { // No need for expensive global updates on users and chats, so we avoid them diff --git a/src/components/middle/composer/ComposerEmbeddedMessage.tsx b/src/components/middle/composer/ComposerEmbeddedMessage.tsx index d114c8903..69050ec62 100644 --- a/src/components/middle/composer/ComposerEmbeddedMessage.tsx +++ b/src/components/middle/composer/ComposerEmbeddedMessage.tsx @@ -36,7 +36,7 @@ import useLang from '../../../hooks/useLang'; import useLastCallback from '../../../hooks/useLastCallback'; import useMenuPosition from '../../../hooks/useMenuPosition'; import useOldLang from '../../../hooks/useOldLang'; -import useShowTransition from '../../../hooks/useShowTransition'; +import useShowTransitionDeprecated from '../../../hooks/useShowTransitionDeprecated'; import { ClosableEmbeddedMessage } from '../../common/embedded/EmbeddedMessage'; import Icon from '../../common/icons/Icon'; @@ -131,7 +131,7 @@ const ComposerEmbeddedMessage: FC = ({ const { shouldRender, transitionClassNames, - } = useShowTransition( + } = useShowTransitionDeprecated( isShown && !isReplyToTopicStart && !isReplyToDiscussion, undefined, !shouldAnimate, diff --git a/src/components/middle/composer/CustomEmojiTooltip.tsx b/src/components/middle/composer/CustomEmojiTooltip.tsx index 109e78b62..8658fe747 100644 --- a/src/components/middle/composer/CustomEmojiTooltip.tsx +++ b/src/components/middle/composer/CustomEmojiTooltip.tsx @@ -14,7 +14,7 @@ import useHorizontalScroll from '../../../hooks/useHorizontalScroll'; import { useIntersectionObserver } from '../../../hooks/useIntersectionObserver'; import useLastCallback from '../../../hooks/useLastCallback'; import usePreviousDeprecated from '../../../hooks/usePreviousDeprecated'; -import useShowTransition from '../../../hooks/useShowTransition'; +import useShowTransitionDeprecated from '../../../hooks/useShowTransitionDeprecated'; import StickerButton from '../../common/StickerButton'; import Loading from '../../ui/Loading'; @@ -52,7 +52,7 @@ const CustomEmojiTooltip: FC = ({ // eslint-disable-next-line no-null/no-null const containerRef = useRef(null); - const { shouldRender, transitionClassNames } = useShowTransition(isOpen, undefined, undefined, false); + const { shouldRender, transitionClassNames } = useShowTransitionDeprecated(isOpen, undefined, undefined, false); const prevStickers = usePreviousDeprecated(customEmoji, true); const displayedStickers = customEmoji || prevStickers; diff --git a/src/components/middle/composer/DropArea.tsx b/src/components/middle/composer/DropArea.tsx index 037f46fec..f2455d8f4 100644 --- a/src/components/middle/composer/DropArea.tsx +++ b/src/components/middle/composer/DropArea.tsx @@ -13,7 +13,7 @@ import getFilesFromDataTransferItems from './helpers/getFilesFromDataTransferIte import useLastCallback from '../../../hooks/useLastCallback'; import useOldLang from '../../../hooks/useOldLang'; import usePreviousDeprecated from '../../../hooks/usePreviousDeprecated'; -import useShowTransition from '../../../hooks/useShowTransition'; +import useShowTransitionDeprecated from '../../../hooks/useShowTransitionDeprecated'; import Portal from '../../ui/Portal'; import DropTarget from './DropTarget'; @@ -44,7 +44,7 @@ const DropArea: FC = ({ // eslint-disable-next-line no-null/no-null const hideTimeoutRef = useRef(null); const prevWithQuick = usePreviousDeprecated(withQuick); - const { shouldRender, transitionClassNames } = useShowTransition(isOpen); + const { shouldRender, transitionClassNames } = useShowTransitionDeprecated(isOpen); const isInAlbum = editingMessage && editingMessage?.groupedId; useEffect(() => (isOpen ? captureEscKeyListener(onHide) : undefined), [isOpen, onHide]); diff --git a/src/components/middle/composer/EmojiCategory.tsx b/src/components/middle/composer/EmojiCategory.tsx index a5763a4ca..f16603c5a 100644 --- a/src/components/middle/composer/EmojiCategory.tsx +++ b/src/components/middle/composer/EmojiCategory.tsx @@ -10,7 +10,7 @@ import { REM } from '../../common/helpers/mediaDimensions'; import useAppLayout from '../../../hooks/useAppLayout'; import { useOnIntersect } from '../../../hooks/useIntersectionObserver'; -import useMediaTransition from '../../../hooks/useMediaTransition'; +import useMediaTransitionDeprecated from '../../../hooks/useMediaTransitionDeprecated'; import useOldLang from '../../../hooks/useOldLang'; import EmojiButton from './EmojiButton'; @@ -38,7 +38,7 @@ const EmojiCategory: FC = ({ useOnIntersect(ref, observeIntersection); - const transitionClassNames = useMediaTransition(shouldRender); + const transitionClassNames = useMediaTransitionDeprecated(shouldRender); const lang = useOldLang(); const { isMobile } = useAppLayout(); diff --git a/src/components/middle/composer/EmojiTooltip.tsx b/src/components/middle/composer/EmojiTooltip.tsx index 3ec92acf4..be569bcd4 100644 --- a/src/components/middle/composer/EmojiTooltip.tsx +++ b/src/components/middle/composer/EmojiTooltip.tsx @@ -13,7 +13,7 @@ import useHorizontalScroll from '../../../hooks/useHorizontalScroll'; import { useIntersectionObserver } from '../../../hooks/useIntersectionObserver'; import useLastCallback from '../../../hooks/useLastCallback'; import usePrevDuringAnimation from '../../../hooks/usePrevDuringAnimation'; -import useShowTransition from '../../../hooks/useShowTransition'; +import useShowTransitionDeprecated from '../../../hooks/useShowTransitionDeprecated'; import { useKeyboardNavigation } from './hooks/useKeyboardNavigation'; import Loading from '../../ui/Loading'; @@ -79,7 +79,7 @@ const EmojiTooltip: FC = ({ }) => { // eslint-disable-next-line no-null/no-null const containerRef = useRef(null); - const { shouldRender, transitionClassNames } = useShowTransition(isOpen, undefined, undefined, false); + const { shouldRender, transitionClassNames } = useShowTransitionDeprecated(isOpen, undefined, undefined, false); const listEmojis: (Emoji | ApiSticker)[] = usePrevDuringAnimation( emojis.length ? [...customEmojis, ...emojis] : undefined, CLOSE_DURATION, ) || []; diff --git a/src/components/middle/composer/InlineBotTooltip.tsx b/src/components/middle/composer/InlineBotTooltip.tsx index d0e8f7341..cef460f47 100644 --- a/src/components/middle/composer/InlineBotTooltip.tsx +++ b/src/components/middle/composer/InlineBotTooltip.tsx @@ -17,7 +17,7 @@ import useCurrentOrPrev from '../../../hooks/useCurrentOrPrev'; import { useIntersectionObserver } from '../../../hooks/useIntersectionObserver'; import useLastCallback from '../../../hooks/useLastCallback'; import usePreviousDeprecated from '../../../hooks/usePreviousDeprecated'; -import useShowTransition from '../../../hooks/useShowTransition'; +import useShowTransitionDeprecated from '../../../hooks/useShowTransitionDeprecated'; import { useKeyboardNavigation } from './hooks/useKeyboardNavigation'; import InfiniteScroll from '../../ui/InfiniteScroll'; @@ -71,7 +71,7 @@ const InlineBotTooltip: FC = ({ // eslint-disable-next-line no-null/no-null const containerRef = useRef(null); - const { shouldRender, transitionClassNames } = useShowTransition(isOpen, undefined, undefined, false); + const { shouldRender, transitionClassNames } = useShowTransitionDeprecated(isOpen, undefined, undefined, false); const renderedIsGallery = useCurrentOrPrev(isGallery, shouldRender); const { observe: observeIntersection, diff --git a/src/components/middle/composer/MentionTooltip.tsx b/src/components/middle/composer/MentionTooltip.tsx index fe0f69182..33ed4e1e4 100644 --- a/src/components/middle/composer/MentionTooltip.tsx +++ b/src/components/middle/composer/MentionTooltip.tsx @@ -9,7 +9,7 @@ import setTooltipItemVisible from '../../../util/setTooltipItemVisible'; import useLastCallback from '../../../hooks/useLastCallback'; import usePreviousDeprecated from '../../../hooks/usePreviousDeprecated'; -import useShowTransition from '../../../hooks/useShowTransition'; +import useShowTransitionDeprecated from '../../../hooks/useShowTransitionDeprecated'; import { useKeyboardNavigation } from './hooks/useKeyboardNavigation'; import PrivateChatInfo from '../../common/PrivateChatInfo'; @@ -32,7 +32,7 @@ const MentionTooltip: FC = ({ }) => { // eslint-disable-next-line no-null/no-null const containerRef = useRef(null); - const { shouldRender, transitionClassNames } = useShowTransition(isOpen, undefined, undefined, false); + const { shouldRender, transitionClassNames } = useShowTransitionDeprecated(isOpen, undefined, undefined, false); const handleUserSelect = useLastCallback((userId: string, forceFocus = false) => { // No need for expensive global updates on users, so we avoid them diff --git a/src/components/middle/composer/StickerSetCover.tsx b/src/components/middle/composer/StickerSetCover.tsx index 61e82a9c2..87022e816 100644 --- a/src/components/middle/composer/StickerSetCover.tsx +++ b/src/components/middle/composer/StickerSetCover.tsx @@ -17,7 +17,7 @@ import useDynamicColorListener from '../../../hooks/stickers/useDynamicColorList import useCoordsInSharedCanvas from '../../../hooks/useCoordsInSharedCanvas'; import { useIsIntersecting } from '../../../hooks/useIntersectionObserver'; import useMedia from '../../../hooks/useMedia'; -import useMediaTransition from '../../../hooks/useMediaTransition'; +import useMediaTransitionDeprecated from '../../../hooks/useMediaTransitionDeprecated'; import useCustomEmoji from '../../common/hooks/useCustomEmoji'; import AnimatedSticker from '../../common/AnimatedSticker'; @@ -68,7 +68,7 @@ const StickerSetCover: FC = ({ const mediaHash = ((hasThumbnail && !shouldFallbackToStatic) || hasAnimatedThumb) && `stickerSet${stickerSet.id}`; const mediaData = useMedia(mediaHash, !isIntersecting); const isReady = thumbCustomEmojiId || mediaData || staticMediaData; - const transitionClassNames = useMediaTransition(isReady); + const transitionClassNames = useMediaTransitionDeprecated(isReady); const coords = useCoordsInSharedCanvas(containerRef, sharedCanvasRef); diff --git a/src/components/middle/composer/StickerTooltip.tsx b/src/components/middle/composer/StickerTooltip.tsx index 0bd08e2d1..db8a36c03 100644 --- a/src/components/middle/composer/StickerTooltip.tsx +++ b/src/components/middle/composer/StickerTooltip.tsx @@ -13,7 +13,7 @@ import captureEscKeyListener from '../../../util/captureEscKeyListener'; import { useIntersectionObserver } from '../../../hooks/useIntersectionObserver'; import usePreviousDeprecated from '../../../hooks/usePreviousDeprecated'; import useSendMessageAction from '../../../hooks/useSendMessageAction'; -import useShowTransition from '../../../hooks/useShowTransition'; +import useShowTransitionDeprecated from '../../../hooks/useShowTransitionDeprecated'; import StickerButton from '../../common/StickerButton'; import Loading from '../../ui/Loading'; @@ -48,7 +48,7 @@ const StickerTooltip: FC = ({ }) => { // eslint-disable-next-line no-null/no-null const containerRef = useRef(null); - const { shouldRender, transitionClassNames } = useShowTransition(isOpen, undefined, undefined, false); + const { shouldRender, transitionClassNames } = useShowTransitionDeprecated(isOpen, undefined, undefined, false); const prevStickers = usePreviousDeprecated(stickers, true); const displayedStickers = stickers || prevStickers; const sendMessageAction = useSendMessageAction(chatId, threadId); diff --git a/src/components/middle/composer/SymbolMenu.tsx b/src/components/middle/composer/SymbolMenu.tsx index d67d67fd8..aa63ab4ff 100644 --- a/src/components/middle/composer/SymbolMenu.tsx +++ b/src/components/middle/composer/SymbolMenu.tsx @@ -17,7 +17,7 @@ import useAppLayout from '../../../hooks/useAppLayout'; import useLastCallback from '../../../hooks/useLastCallback'; import useMouseInside from '../../../hooks/useMouseInside'; import useOldLang from '../../../hooks/useOldLang'; -import useShowTransition from '../../../hooks/useShowTransition'; +import useShowTransitionDeprecated from '../../../hooks/useShowTransitionDeprecated'; import CustomEmojiPicker from '../../common/CustomEmojiPicker'; import Button from '../../ui/Button'; @@ -110,7 +110,7 @@ const SymbolMenu: FC = ({ const { isMobile } = useAppLayout(); const [handleMouseEnter, handleMouseLeave] = useMouseInside(isOpen, onClose, undefined, isMobile); - const { shouldRender, transitionClassNames } = useShowTransition(isOpen, onClose, false, false); + const { shouldRender, transitionClassNames } = useShowTransitionDeprecated(isOpen, onClose, false, false); const lang = useOldLang(); diff --git a/src/components/middle/composer/TextFormatter.tsx b/src/components/middle/composer/TextFormatter.tsx index 822718849..fdb9a26c4 100644 --- a/src/components/middle/composer/TextFormatter.tsx +++ b/src/components/middle/composer/TextFormatter.tsx @@ -17,7 +17,7 @@ import { INPUT_CUSTOM_EMOJI_SELECTOR } from './helpers/customEmoji'; import useFlag from '../../../hooks/useFlag'; import useLastCallback from '../../../hooks/useLastCallback'; import useOldLang from '../../../hooks/useOldLang'; -import useShowTransition from '../../../hooks/useShowTransition'; +import useShowTransitionDeprecated from '../../../hooks/useShowTransitionDeprecated'; import useVirtualBackdrop from '../../../hooks/useVirtualBackdrop'; import Button from '../../ui/Button'; @@ -64,7 +64,7 @@ const TextFormatter: FC = ({ const containerRef = useRef(null); // eslint-disable-next-line no-null/no-null const linkUrlInputRef = useRef(null); - const { shouldRender, transitionClassNames } = useShowTransition(isOpen); + const { shouldRender, transitionClassNames } = useShowTransitionDeprecated(isOpen); const [isLinkControlOpen, openLinkControl, closeLinkControl] = useFlag(); const [linkUrl, setLinkUrl] = useState(''); const [isEditingLink, setIsEditingLink] = useState(false); diff --git a/src/components/middle/composer/WebPagePreview.tsx b/src/components/middle/composer/WebPagePreview.tsx index 5e71ab93c..c0cb25fcf 100644 --- a/src/components/middle/composer/WebPagePreview.tsx +++ b/src/components/middle/composer/WebPagePreview.tsx @@ -25,7 +25,7 @@ import useDerivedState from '../../../hooks/useDerivedState'; import useLastCallback from '../../../hooks/useLastCallback'; import useMenuPosition from '../../../hooks/useMenuPosition'; import useOldLang from '../../../hooks/useOldLang'; -import useShowTransition from '../../../hooks/useShowTransition'; +import useShowTransitionDeprecated from '../../../hooks/useShowTransitionDeprecated'; import useSyncEffect from '../../../hooks/useSyncEffect'; import Button from '../../ui/Button'; @@ -113,7 +113,7 @@ const WebPagePreview: FC = ({ const isShown = useDerivedState(() => { return Boolean(webPagePreview && getHtml() && !noWebPage && !isDisabled); }, [isDisabled, getHtml, noWebPage, webPagePreview]); - const { shouldRender, transitionClassNames } = useShowTransition(isShown); + const { shouldRender, transitionClassNames } = useShowTransitionDeprecated(isShown); const renderingWebPage = useCurrentOrPrev(webPagePreview, true); diff --git a/src/components/middle/composer/inlineResults/MediaResult.tsx b/src/components/middle/composer/inlineResults/MediaResult.tsx index 9f4cdb248..33a322aea 100644 --- a/src/components/middle/composer/inlineResults/MediaResult.tsx +++ b/src/components/middle/composer/inlineResults/MediaResult.tsx @@ -10,7 +10,7 @@ import buildClassName from '../../../../util/buildClassName'; import useLastCallback from '../../../../hooks/useLastCallback'; import useMedia from '../../../../hooks/useMedia'; -import useMediaTransition from '../../../../hooks/useMediaTransition'; +import useMediaTransitionDeprecated from '../../../../hooks/useMediaTransitionDeprecated'; import BaseResult from './BaseResult'; @@ -43,7 +43,7 @@ const MediaResult: FC = ({ const thumbnailBlobUrl = useMedia(getWebDocumentHash(webThumbnail)); const mediaBlobUrl = useMedia(photo && getPhotoMediaHash(photo, 'pictogram')); - const transitionClassNames = useMediaTransition(mediaBlobUrl || thumbnailBlobUrl); + const transitionClassNames = useMediaTransitionDeprecated(mediaBlobUrl || thumbnailBlobUrl); const handleClick = useLastCallback(() => { onClick(inlineResult); diff --git a/src/components/middle/message/BaseStory.tsx b/src/components/middle/message/BaseStory.tsx index b5b95ac1b..f60bc9f17 100644 --- a/src/components/middle/message/BaseStory.tsx +++ b/src/components/middle/message/BaseStory.tsx @@ -14,7 +14,7 @@ import useCurrentOrPrev from '../../../hooks/useCurrentOrPrev'; import useLastCallback from '../../../hooks/useLastCallback'; import useMedia from '../../../hooks/useMedia'; import useOldLang from '../../../hooks/useOldLang'; -import useShowTransition from '../../../hooks/useShowTransition'; +import useShowTransitionDeprecated from '../../../hooks/useShowTransitionDeprecated'; import MediaAreaOverlay from '../../story/mediaArea/MediaAreaOverlay'; @@ -41,7 +41,7 @@ function BaseStory({ const imgBlobUrl = useMedia(imageHash); const thumbnail = isLoaded ? (video ? video.thumbnail?.dataUri : story.content.photo?.thumbnail?.dataUri) : undefined; const mediaUrl = useCurrentOrPrev(imgBlobUrl, true); - const { shouldRender, transitionClassNames } = useShowTransition(Boolean(mediaUrl)); + const { shouldRender, transitionClassNames } = useShowTransitionDeprecated(Boolean(mediaUrl)); const blurredBackgroundRef = useCanvasBlur( thumbnail, isExpired && !isPreview, diff --git a/src/components/middle/message/ContextMenuContainer.tsx b/src/components/middle/message/ContextMenuContainer.tsx index e6804699b..9804419f3 100644 --- a/src/components/middle/message/ContextMenuContainer.tsx +++ b/src/components/middle/message/ContextMenuContainer.tsx @@ -63,7 +63,7 @@ import useFlag from '../../../hooks/useFlag'; import useLastCallback from '../../../hooks/useLastCallback'; import useOldLang from '../../../hooks/useOldLang'; import useSchedule from '../../../hooks/useSchedule'; -import useShowTransition from '../../../hooks/useShowTransition'; +import useShowTransitionDeprecated from '../../../hooks/useShowTransitionDeprecated'; import PinMessageModal from '../../common/PinMessageModal.async'; import ReportModal from '../../common/ReportModal'; @@ -230,7 +230,7 @@ const ContextMenuContainer: FC = ({ } = getActions(); const lang = useOldLang(); - const { transitionClassNames } = useShowTransition(isOpen, onCloseAnimationEnd, undefined, false); + const { transitionClassNames } = useShowTransitionDeprecated(isOpen, onCloseAnimationEnd, undefined, false); const [isMenuOpen, setIsMenuOpen] = useState(true); const [isReportModalOpen, setIsReportModalOpen] = useState(false); const [isPinModalOpen, setIsPinModalOpen] = useState(false); diff --git a/src/components/middle/message/Message.tsx b/src/components/middle/message/Message.tsx index 13f3dd2bb..8eefed66b 100644 --- a/src/components/middle/message/Message.tsx +++ b/src/components/middle/message/Message.tsx @@ -132,7 +132,7 @@ import useLastCallback from '../../../hooks/useLastCallback'; import useOldLang from '../../../hooks/useOldLang'; import usePreviousDeprecated from '../../../hooks/usePreviousDeprecated'; import useResizeObserver from '../../../hooks/useResizeObserver'; -import useShowTransition from '../../../hooks/useShowTransition'; +import useShowTransitionDeprecated from '../../../hooks/useShowTransitionDeprecated'; import useTextLanguage from '../../../hooks/useTextLanguage'; import useThrottledCallback from '../../../hooks/useThrottledCallback'; import useDetectChatLanguage from './hooks/useDetectChatLanguage'; @@ -473,7 +473,7 @@ const Message: FC = ({ setTimeout(markShown, appearanceOrder * APPEARANCE_DELAY); }, [appearanceOrder, markShown, noAppearanceAnimation]); - const { transitionClassNames } = useShowTransition( + const { transitionClassNames } = useShowTransitionDeprecated( isShown || isJustAdded, undefined, noAppearanceAnimation && !isJustAdded, diff --git a/src/components/middle/message/MessageContextMenu.tsx b/src/components/middle/message/MessageContextMenu.tsx index 35b3022ea..6a75d20d4 100644 --- a/src/components/middle/message/MessageContextMenu.tsx +++ b/src/components/middle/message/MessageContextMenu.tsx @@ -87,7 +87,6 @@ type OwnProps = { hasCustomEmoji?: boolean; customEmojiSets?: ApiStickerSet[]; canPlayAnimatedEmojis?: boolean; - noTransition?: boolean; isInSavedMessages?: boolean; shouldRenderShowWhen?: boolean; canLoadReadDate?: boolean; @@ -176,7 +175,6 @@ const MessageContextMenu: FC = ({ hasCustomEmoji, customEmojiSets, canPlayAnimatedEmojis, - noTransition, isInSavedMessages, shouldRenderShowWhen, canLoadReadDate, @@ -353,7 +351,6 @@ const MessageContextMenu: FC = ({ className={buildClassName( 'MessageContextMenu', 'fluid', withReactions && 'with-reactions', )} - shouldSkipTransition={noTransition} onClose={onClose} onCloseAnimationEnd={onCloseAnimationEnd} > diff --git a/src/components/middle/message/Photo.tsx b/src/components/middle/message/Photo.tsx index 8cd045bae..6a1c3de93 100644 --- a/src/components/middle/message/Photo.tsx +++ b/src/components/middle/message/Photo.tsx @@ -22,10 +22,10 @@ import useFlag from '../../../hooks/useFlag'; import { useIsIntersecting } from '../../../hooks/useIntersectionObserver'; import useLastCallback from '../../../hooks/useLastCallback'; import useLayoutEffectWithPrevDeps from '../../../hooks/useLayoutEffectWithPrevDeps'; -import useMediaTransition from '../../../hooks/useMediaTransition'; +import useMediaTransitionDeprecated from '../../../hooks/useMediaTransitionDeprecated'; import useMediaWithLoadProgress from '../../../hooks/useMediaWithLoadProgress'; import usePreviousDeprecated from '../../../hooks/usePreviousDeprecated'; -import useShowTransition from '../../../hooks/useShowTransition'; +import useShowTransitionDeprecated from '../../../hooks/useShowTransitionDeprecated'; import useBlurredMediaThumbRef from './hooks/useBlurredMediaThumbRef'; import MediaSpoiler from '../../common/MediaSpoiler'; @@ -106,7 +106,7 @@ const Photo = ({ const noThumb = Boolean(fullMediaData); const thumbRef = useBlurredMediaThumbRef(photo, noThumb); const blurredBackgroundRef = useBlurredMediaThumbRef(photo, !withBlurredBackground); - const thumbClassNames = useMediaTransition(!noThumb); + const thumbClassNames = useMediaTransitionDeprecated(!noThumb); const thumbDataUri = getMediaThumbUri(photo); const [isSpoilerShown, showSpoiler, hideSpoiler] = useFlag(isPaidPreview || photo.isSpoiler); @@ -139,11 +139,11 @@ const Photo = ({ const { shouldRender: shouldRenderSpinner, transitionClassNames: spinnerClassNames, - } = useShowTransition(isTransferring, undefined, wasLoadDisabled, 'slow'); + } = useShowTransitionDeprecated(isTransferring, undefined, wasLoadDisabled, 'slow'); const { shouldRender: shouldRenderDownloadButton, transitionClassNames: downloadButtonClassNames, - } = useShowTransition(!fullMediaData && !isLoadAllowed); + } = useShowTransitionDeprecated(!fullMediaData && !isLoadAllowed); const handleClick = useLastCallback((e: React.MouseEvent) => { if (isUploading) { diff --git a/src/components/middle/message/RoundVideo.tsx b/src/components/middle/message/RoundVideo.tsx index 48b225fbb..bfc43552e 100644 --- a/src/components/middle/message/RoundVideo.tsx +++ b/src/components/middle/message/RoundVideo.tsx @@ -25,10 +25,10 @@ import { useThrottledSignal } from '../../../hooks/useAsyncResolvers'; import useFlag from '../../../hooks/useFlag'; import { useIsIntersecting } from '../../../hooks/useIntersectionObserver'; import useLastCallback from '../../../hooks/useLastCallback'; -import useMediaTransition from '../../../hooks/useMediaTransition'; +import useMediaTransitionDeprecated from '../../../hooks/useMediaTransitionDeprecated'; import useMediaWithLoadProgress from '../../../hooks/useMediaWithLoadProgress'; import usePreviousDeprecated from '../../../hooks/usePreviousDeprecated'; -import useShowTransition from '../../../hooks/useShowTransition'; +import useShowTransitionDeprecated from '../../../hooks/useShowTransitionDeprecated'; import useBlurredMediaThumbRef from './hooks/useBlurredMediaThumbRef'; import Icon from '../../common/icons/Icon'; @@ -101,7 +101,7 @@ const RoundVideo: FC = ({ const hasThumb = Boolean(getMessageMediaThumbDataUri(message)); const noThumb = !hasThumb || isPlayerReady || shouldRenderSpoiler; const thumbRef = useBlurredMediaThumbRef(video, noThumb); - const thumbClassNames = useMediaTransition(!noThumb); + const thumbClassNames = useMediaTransitionDeprecated(!noThumb); const thumbDataUri = getMessageMediaThumbDataUri(message); const isTransferring = (isLoadAllowed && !isPlayerReady) || isDownloading; const wasLoadDisabled = usePreviousDeprecated(isLoadAllowed) === false; @@ -109,7 +109,7 @@ const RoundVideo: FC = ({ const { shouldRender: shouldSpinnerRender, transitionClassNames: spinnerClassNames, - } = useShowTransition(isTransferring, undefined, wasLoadDisabled); + } = useShowTransitionDeprecated(isTransferring, undefined, wasLoadDisabled); const [isActivated, setIsActivated] = useState(false); diff --git a/src/components/middle/message/SponsoredMessageContextMenuContainer.tsx b/src/components/middle/message/SponsoredMessageContextMenuContainer.tsx index f2ab19255..8682f7bce 100644 --- a/src/components/middle/message/SponsoredMessageContextMenuContainer.tsx +++ b/src/components/middle/message/SponsoredMessageContextMenuContainer.tsx @@ -9,7 +9,7 @@ import buildClassName from '../../../util/buildClassName'; import useFlag from '../../../hooks/useFlag'; import useLastCallback from '../../../hooks/useLastCallback'; -import useShowTransition from '../../../hooks/useShowTransition'; +import useShowTransitionDeprecated from '../../../hooks/useShowTransitionDeprecated'; import MessageContextMenu from './MessageContextMenu'; @@ -34,7 +34,7 @@ const SponsoredMessageContextMenuContainer: FC = ({ const { openPremiumModal, showDialog } = getActions(); const [isMenuOpen, , closeMenu] = useFlag(true); - const { transitionClassNames } = useShowTransition(isMenuOpen, onCloseAnimationEnd, undefined, false); + const { transitionClassNames } = useShowTransitionDeprecated(isMenuOpen, onCloseAnimationEnd, undefined, false); const handleAboutAdsOpen = useLastCallback(() => { onAboutAdsClick(); diff --git a/src/components/middle/message/Video.tsx b/src/components/middle/message/Video.tsx index 4aed92775..e5399686b 100644 --- a/src/components/middle/message/Video.tsx +++ b/src/components/middle/message/Video.tsx @@ -23,10 +23,10 @@ import useFlag from '../../../hooks/useFlag'; import { useIsIntersecting } from '../../../hooks/useIntersectionObserver'; import useLastCallback from '../../../hooks/useLastCallback'; import useMedia from '../../../hooks/useMedia'; -import useMediaTransition from '../../../hooks/useMediaTransition'; +import useMediaTransitionDeprecated from '../../../hooks/useMediaTransitionDeprecated'; import useMediaWithLoadProgress from '../../../hooks/useMediaWithLoadProgress'; import usePreviousDeprecated from '../../../hooks/usePreviousDeprecated'; -import useShowTransition from '../../../hooks/useShowTransition'; +import useShowTransitionDeprecated from '../../../hooks/useShowTransitionDeprecated'; import useBlurredMediaThumbRef from './hooks/useBlurredMediaThumbRef'; import MediaSpoiler from '../../common/MediaSpoiler'; @@ -130,12 +130,12 @@ const Video = ({ const [isPreviewPreloaded] = useState(Boolean(previewMediaHash && mediaLoader.getFromMemory(previewMediaHash))); const canLoadPreview = isIntersectingForLoading; const previewBlobUrl = useMedia(previewMediaHash, !canLoadPreview); - const previewClassNames = useMediaTransition((hasThumb || previewBlobUrl) && !isPlayerReady); + const previewClassNames = useMediaTransitionDeprecated((hasThumb || previewBlobUrl) && !isPlayerReady); const noThumb = Boolean(!hasThumb || previewBlobUrl || isPlayerReady); const thumbRef = useBlurredMediaThumbRef(video, noThumb); const blurredBackgroundRef = useBlurredMediaThumbRef(video, !withBlurredBackground); - const thumbClassNames = useMediaTransition(!noThumb); + const thumbClassNames = useMediaTransitionDeprecated(!noThumb); const isInline = fullMediaData && wasIntersectedRef.current; @@ -156,10 +156,10 @@ const Video = ({ const { shouldRender: shouldRenderSpinner, transitionClassNames: spinnerClassNames, - } = useShowTransition(isTransferring && !isUnsupported, undefined, wasLoadDisabled); + } = useShowTransitionDeprecated(isTransferring && !isUnsupported, undefined, wasLoadDisabled); const { transitionClassNames: playButtonClassNames, - } = useShowTransition(Boolean((isLoadAllowed || fullMediaData) && !isPlayAllowed && !shouldRenderSpinner)); + } = useShowTransitionDeprecated(Boolean((isLoadAllowed || fullMediaData) && !isPlayAllowed && !shouldRenderSpinner)); const [playProgress, setPlayProgress] = useState(0); const handleTimeUpdate = useLastCallback((e: React.SyntheticEvent) => { diff --git a/src/components/modals/oneTimeMedia/OneTimeMediaModal.tsx b/src/components/modals/oneTimeMedia/OneTimeMediaModal.tsx index bdf4c1cee..8f450d57b 100644 --- a/src/components/modals/oneTimeMedia/OneTimeMediaModal.tsx +++ b/src/components/modals/oneTimeMedia/OneTimeMediaModal.tsx @@ -11,7 +11,7 @@ import buildClassName from '../../../util/buildClassName'; import useCurrentOrPrev from '../../../hooks/useCurrentOrPrev'; import useLastCallback from '../../../hooks/useLastCallback'; import useOldLang from '../../../hooks/useOldLang'; -import useShowTransition from '../../../hooks/useShowTransition'; +import useShowTransitionDeprecated from '../../../hooks/useShowTransitionDeprecated'; import Audio from '../../common/Audio'; import RoundVideo from '../../middle/message/RoundVideo'; @@ -36,7 +36,7 @@ const OneTimeMediaModal = ({ const { shouldRender, transitionClassNames, - } = useShowTransition(Boolean(modal)); + } = useShowTransitionDeprecated(Boolean(modal)); const handlePlayVoice = useLastCallback(() => { return undefined; diff --git a/src/components/story/Story.tsx b/src/components/story/Story.tsx index 198e2e494..b2af9dd93 100644 --- a/src/components/story/Story.tsx +++ b/src/components/story/Story.tsx @@ -43,9 +43,9 @@ import useEffectWithPrevDeps from '../../hooks/useEffectWithPrevDeps'; import useFlag from '../../hooks/useFlag'; import useLastCallback from '../../hooks/useLastCallback'; import useLongPress from '../../hooks/useLongPress'; -import useMediaTransition from '../../hooks/useMediaTransition'; +import useMediaTransitionDeprecated from '../../hooks/useMediaTransitionDeprecated'; import useOldLang from '../../hooks/useOldLang'; -import useShowTransition from '../../hooks/useShowTransition'; +import useShowTransitionDeprecated from '../../hooks/useShowTransitionDeprecated'; import { useStreaming } from '../../hooks/useStreaming'; import useBackgroundMode from '../../hooks/window/useBackgroundMode'; import useStoryPreloader from './hooks/useStoryPreloader'; @@ -233,30 +233,30 @@ function Story({ const { shouldRender: shouldRenderSkeleton, transitionClassNames: skeletonTransitionClassNames, - } = useShowTransition(!hasFullData); + } = useShowTransitionDeprecated(!hasFullData); const { transitionClassNames: mediaTransitionClassNames, - } = useShowTransition(Boolean(fullMediaData)); + } = useShowTransitionDeprecated(Boolean(fullMediaData)); const thumbRef = useCanvasBlur(thumbnail, !hasThumb); - const previewTransitionClassNames = useMediaTransition(previewBlobUrl); + const previewTransitionClassNames = useMediaTransitionDeprecated(previewBlobUrl); const { shouldRender: shouldRenderComposer, transitionClassNames: composerAppearanceAnimationClassNames, - } = useShowTransition(shouldShowComposer); + } = useShowTransitionDeprecated(shouldShowComposer); const { shouldRender: shouldRenderCaptionBackdrop, transitionClassNames: captionBackdropTransitionClassNames, - } = useShowTransition(hasText && isCaptionExpanded); + } = useShowTransitionDeprecated(hasText && isCaptionExpanded); - const { transitionClassNames: appearanceAnimationClassNames } = useShowTransition(true); + const { transitionClassNames: appearanceAnimationClassNames } = useShowTransitionDeprecated(true); const { shouldRender: shouldRenderCaption, transitionClassNames: captionAppearanceAnimationClassNames, - } = useShowTransition(hasText || hasForwardInfo); + } = useShowTransitionDeprecated(hasText || hasForwardInfo); const isStreamingSupported = useStreaming(videoRef, fullMediaData, PRIMARY_VIDEO_MIME); diff --git a/src/components/story/StoryCaption.tsx b/src/components/story/StoryCaption.tsx index 28037b96d..db60d5bf6 100644 --- a/src/components/story/StoryCaption.tsx +++ b/src/components/story/StoryCaption.tsx @@ -12,7 +12,7 @@ import calcTextLineHeightAndCount from '../../util/element/calcTextLineHeightAnd import useCurrentOrPrev from '../../hooks/useCurrentOrPrev'; import useOldLang from '../../hooks/useOldLang'; import usePrevDuringAnimation from '../../hooks/usePrevDuringAnimation'; -import useShowTransition from '../../hooks/useShowTransition'; +import useShowTransitionDeprecated from '../../hooks/useShowTransitionDeprecated'; import EmbeddedStoryForward from '../common/embedded/EmbeddedStoryForward'; import MessageText from '../common/MessageText'; @@ -65,7 +65,7 @@ function StoryCaption({ }, [isExpanded]); const canExpand = hasOverflow && !isInExpandedState; - const { shouldRender: shouldRenderShowMore, transitionClassNames } = useShowTransition( + const { shouldRender: shouldRenderShowMore, transitionClassNames } = useShowTransitionDeprecated( canExpand, undefined, true, 'slow', true, ); diff --git a/src/components/story/StoryToggler.tsx b/src/components/story/StoryToggler.tsx index b1940d903..25693b835 100644 --- a/src/components/story/StoryToggler.tsx +++ b/src/components/story/StoryToggler.tsx @@ -10,7 +10,7 @@ import { animateClosing, animateOpening, ANIMATION_DURATION } from './helpers/ri import { dispatchHeavyAnimationEvent } from '../../hooks/useHeavyAnimationCheck'; import useOldLang from '../../hooks/useOldLang'; -import useShowTransition from '../../hooks/useShowTransition'; +import useShowTransitionDeprecated from '../../hooks/useShowTransitionDeprecated'; import useStoryPreloader from './hooks/useStoryPreloader'; import Avatar from '../common/Avatar'; @@ -89,7 +89,7 @@ function StoryToggler({ const isVisible = canShow && isShown; // For some reason, setting 'slow' here also fixes scroll freezes on iOS when collapsing Story Ribbon - const { shouldRender, transitionClassNames } = useShowTransition(isVisible, undefined, undefined, 'slow'); + const { shouldRender, transitionClassNames } = useShowTransitionDeprecated(isVisible, undefined, undefined, 'slow'); useEffect(() => { if (!withAnimation || isForumPanelOpen) return; diff --git a/src/components/ui/DropdownMenu.tsx b/src/components/ui/DropdownMenu.tsx index 2ec266947..0d9d524e4 100644 --- a/src/components/ui/DropdownMenu.tsx +++ b/src/components/ui/DropdownMenu.tsx @@ -115,7 +115,6 @@ const DropdownMenu: FC = ({ footer={footer} autoClose onClose={handleClose} - shouldSkipTransition={forceOpen} onCloseAnimationEnd={onHide} onMouseEnterBackdrop={onMouseEnterBackdrop} > diff --git a/src/components/ui/Menu.tsx b/src/components/ui/Menu.tsx index 41d1e7e85..9fc85d750 100644 --- a/src/components/ui/Menu.tsx +++ b/src/components/ui/Menu.tsx @@ -1,6 +1,4 @@ -import React, { - type FC, memo, useEffect, useRef, -} from '../../lib/teact/teact'; +import React, { type FC, memo, useEffect } from '../../lib/teact/teact'; import buildClassName from '../../util/buildClassName'; import buildStyle from '../../util/buildStyle'; @@ -38,7 +36,6 @@ type OwnProps = { positionX?: 'left' | 'right'; positionY?: 'top' | 'bottom'; autoClose?: boolean; - shouldSkipTransition?: boolean; footer?: string; noCloseOnBackdrop?: boolean; backdropExcludedSelector?: string; @@ -50,13 +47,13 @@ type OwnProps = { onMouseEnterBackdrop?: (e: React.MouseEvent) => void; onMouseLeave?: (e: React.MouseEvent) => void; withPortal?: boolean; - children: React.ReactNode; + children?: React.ReactNode; }; const ANIMATION_DURATION = 200; const Menu: FC = ({ - ref, + ref: externalRef, containerRef, shouldCloseFast, isOpen, @@ -80,27 +77,18 @@ const Menu: FC = ({ onClose, onMouseEnter, onMouseLeave, - shouldSkipTransition, withPortal, onMouseEnterBackdrop, }) => { - // eslint-disable-next-line no-null/no-null - let menuRef = useRef(null); - if (ref) { - menuRef = ref; - } - const backdropContainerRef = containerRef || menuRef; const { isTouchScreen } = useAppLayout(); - const { - transitionClassNames, - } = useShowTransition( + const { ref: menuRef } = useShowTransition({ isOpen, + ref: externalRef, onCloseAnimationEnd, - shouldSkipTransition, - undefined, - shouldSkipTransition, - ); + }); + + const backdropContainerRef = containerRef || menuRef; useEffect( () => (isOpen ? captureEscKeyListener(onClose) : undefined), @@ -134,7 +122,6 @@ const Menu: FC = ({ positionY, positionX, footer && 'with-footer', - transitionClassNames, bubbleClassName, shouldCloseFast && 'close-fast', ); @@ -144,7 +131,9 @@ const Menu: FC = ({ const handleClick = useLastCallback((e: React.MouseEvent) => { e.stopPropagation(); - if (autoClose) { onClose(); } + if (autoClose) { + onClose(); + } }); const menu = ( diff --git a/src/components/ui/Modal.tsx b/src/components/ui/Modal.tsx index bb26d1810..0df37b61f 100644 --- a/src/components/ui/Modal.tsx +++ b/src/components/ui/Modal.tsx @@ -1,5 +1,5 @@ import type { FC, TeactNode } from '../../lib/teact/teact'; -import React, { useEffect, useRef } from '../../lib/teact/teact'; +import React, { useEffect } from '../../lib/teact/teact'; import type { TextPart } from '../../types'; @@ -9,6 +9,7 @@ import { disableDirectTextInput, enableDirectTextInput } from '../../util/direct import freezeWhenClosed from '../../util/hoc/freezeWhenClosed'; import trapFocus from '../../util/trapFocus'; +import useDerivedState from '../../hooks/useDerivedState'; import { dispatchHeavyAnimationEvent } from '../../hooks/useHeavyAnimationCheck'; import useHistoryBack from '../../hooks/useHistoryBack'; import useLastCallback from '../../hooks/useLastCallback'; @@ -44,11 +45,7 @@ export type OwnProps = { onEnter?: () => void; }; -type StateProps = { - shouldSkipHistoryAnimations?: boolean; -}; - -const Modal: FC = ({ +const Modal: FC = ({ dialogRef, title, className, @@ -63,19 +60,19 @@ const Modal: FC = ({ noBackdropClose, children, style, - shouldSkipHistoryAnimations, onClose, onCloseAnimationEnd, onEnter, }) => { const { - shouldRender, - transitionClassNames, - } = useShowTransition( - isOpen, onCloseAnimationEnd, shouldSkipHistoryAnimations, undefined, shouldSkipHistoryAnimations, - ); - // eslint-disable-next-line no-null/no-null - const modalRef = useRef(null); + ref: modalRef, + getShouldRender, + } = useShowTransition({ + isOpen, + onCloseAnimationEnd, + }); + const shouldRender = useDerivedState(getShouldRender); + const withCloseButton = hasCloseButton || hasAbsoluteCloseButton; useEffect(() => { @@ -101,7 +98,7 @@ const Modal: FC = ({ useEffect(() => ( isOpen ? captureKeyboardListeners({ onEsc: onClose, onEnter: handleEnter }) : undefined ), [isOpen, onClose, handleEnter]); - useEffect(() => (isOpen && modalRef.current ? trapFocus(modalRef.current) : undefined), [isOpen]); + useEffect(() => (isOpen && modalRef.current ? trapFocus(modalRef.current) : undefined), [isOpen, modalRef]); useHistoryBack({ isActive: isOpen, @@ -155,7 +152,6 @@ const Modal: FC = ({ const fullClassName = buildClassName( 'Modal', className, - transitionClassNames, noBackdrop && 'transparent-backdrop', isSlim && 'slim', ); diff --git a/src/components/ui/Notification.tsx b/src/components/ui/Notification.tsx index cf14048bd..3ddf56b56 100644 --- a/src/components/ui/Notification.tsx +++ b/src/components/ui/Notification.tsx @@ -14,7 +14,7 @@ import { ANIMATION_END_DELAY } from '../../config'; import buildClassName from '../../util/buildClassName'; import captureEscKeyListener from '../../util/captureEscKeyListener'; -import useShowTransition from '../../hooks/useShowTransition'; +import useShowTransitionDeprecated from '../../hooks/useShowTransitionDeprecated'; import Button from './Button'; import Portal from './Portal'; @@ -45,7 +45,7 @@ const Notification: FC = ({ const [isOpen, setIsOpen] = useState(true); // eslint-disable-next-line no-null/no-null const timerRef = useRef(null); - const { transitionClassNames } = useShowTransition(isOpen); + const { transitionClassNames } = useShowTransitionDeprecated(isOpen); const closeAndDismiss = useCallback(() => { setIsOpen(false); diff --git a/src/components/ui/ShowTransition.tsx b/src/components/ui/ShowTransition.tsx index 0e7862a9e..dbcdf9cff 100644 --- a/src/components/ui/ShowTransition.tsx +++ b/src/components/ui/ShowTransition.tsx @@ -1,8 +1,7 @@ import type { FC } from '../../lib/teact/teact'; import React, { useRef } from '../../lib/teact/teact'; -import buildClassName from '../../util/buildClassName'; - +import useDerivedState from '../../hooks/useDerivedState'; import usePreviousDeprecated from '../../hooks/usePreviousDeprecated'; import useShowTransition from '../../hooks/useShowTransition'; @@ -17,7 +16,7 @@ type OwnProps = { shouldAnimateFirstRender?: boolean; style?: string; children: React.ReactNode; - ref?: React.LegacyRef; + ref?: React.RefObject; }; const ShowTransition: FC = ({ @@ -31,22 +30,21 @@ const ShowTransition: FC = ({ noCloseTransition, shouldAnimateFirstRender, style, - ref, + ref: externalRef, }) => { const prevIsOpen = usePreviousDeprecated(isOpen); const prevChildren = usePreviousDeprecated(children); const fromChildrenRef = useRef(); const isFirstRender = prevIsOpen === undefined; - const { - shouldRender, - transitionClassNames, - } = useShowTransition( - isOpen && !isHidden, - undefined, - isFirstRender && !shouldAnimateFirstRender, - isCustom ? false : undefined, + + const { ref, getShouldRender } = useShowTransition({ + isOpen: isOpen && !isHidden, + ref: externalRef, + noMountTransition: isFirstRender && !shouldAnimateFirstRender, + className: isCustom ? false : undefined, noCloseTransition, - ); + }); + const shouldRender = useDerivedState(getShouldRender); if (prevIsOpen && !isOpen) { fromChildrenRef.current = prevChildren; @@ -57,7 +55,7 @@ const ShowTransition: FC = ({
diff --git a/src/hooks/useMediaTransition.ts b/src/hooks/useMediaTransition.ts index 142af5fe2..045a25e5f 100644 --- a/src/hooks/useMediaTransition.ts +++ b/src/hooks/useMediaTransition.ts @@ -1,8 +1,17 @@ import useShowTransition from './useShowTransition'; -export default function useMediaTransition(mediaData?: unknown) { +export default function useMediaTransition( + mediaData?: unknown, + options?: Partial>[0]>, +) { const isMediaReady = Boolean(mediaData); - const { transitionClassNames } = useShowTransition(isMediaReady, undefined, isMediaReady, 'slow'); - return transitionClassNames; + const { ref } = useShowTransition({ + isOpen: isMediaReady, + noMountTransition: isMediaReady, + className: 'slow', + ...options, + }); + + return ref; } diff --git a/src/hooks/useMediaTransitionDeprecated.ts b/src/hooks/useMediaTransitionDeprecated.ts new file mode 100644 index 000000000..a7ddf44b7 --- /dev/null +++ b/src/hooks/useMediaTransitionDeprecated.ts @@ -0,0 +1,8 @@ +import useShowTransitionDeprecated from './useShowTransitionDeprecated'; + +export default function useMediaTransitionDeprecated(mediaData?: unknown) { + const isMediaReady = Boolean(mediaData); + const { transitionClassNames } = useShowTransitionDeprecated(isMediaReady, undefined, isMediaReady, 'slow'); + + return transitionClassNames; +} diff --git a/src/hooks/useShowTransition.ts b/src/hooks/useShowTransition.ts index 4916912d5..f16e6f507 100644 --- a/src/hooks/useShowTransition.ts +++ b/src/hooks/useShowTransition.ts @@ -1,75 +1,103 @@ -import { useRef, useState } from '../lib/teact/teact'; +import type { RefObject } from 'react'; +import { useLayoutEffect, useRef, useSignal } from '../lib/teact/teact'; +import { addExtraClass, toggleExtraClass } from '../lib/teact/teact-dom'; -import buildClassName from '../util/buildClassName'; +import { requestMeasure } from '../lib/fasterdom/fasterdom'; +import useDerivedSignal from './useDerivedSignal'; +import useLastCallback from './useLastCallback'; +import { useStateRef } from './useStateRef'; +import useSyncEffectWithPrevDeps from './useSyncEffectWithPrevDeps'; const CLOSE_DURATION = 350; -const useShowTransition = ( - isOpen = false, - onCloseTransitionEnd?: () => void, - noFirstOpenTransition = false, - className: string | false = 'fast', +type State = + 'closed' + | 'scheduled-open' + | 'open' + | 'closing'; + +export default function useShowTransition({ + isOpen, + ref, + noMountTransition = false, + noOpenTransition = false, noCloseTransition = false, closeDuration = CLOSE_DURATION, - noOpenTransition = false, -) => { - const [isClosed, setIsClosed] = useState(!isOpen); - const closeTimeoutRef = useRef(); - // СSS class should be added in a separate tick to turn on CSS transition. - const [hasOpenClassName, setHasOpenClassName] = useState(isOpen && noFirstOpenTransition); + className = 'fast', + prefix = '', + onCloseAnimationEnd, +}: { + isOpen: boolean | undefined; + ref?: RefObject; + noMountTransition?: boolean; + noOpenTransition?: boolean; + noCloseTransition?: boolean; + closeDuration?: number; + className?: string | false; + prefix?: string; + onCloseAnimationEnd?: NoneToVoidFunction; +}) { + // eslint-disable-next-line no-null/no-null + const localRef = useRef(null); + ref ||= localRef; + const closingTimeoutRef = useRef(); + const [getState, setState] = useSignal(); + const optionsRef = useStateRef({ + closeDuration, noMountTransition, noOpenTransition, noCloseTransition, + }); + const onCloseEndLast = useLastCallback(onCloseAnimationEnd); - if (isOpen) { - setIsClosed(false); - setHasOpenClassName(true); + useSyncEffectWithPrevDeps(([prevIsOpen]) => { + const options = optionsRef.current; - if (closeTimeoutRef.current) { - window.clearTimeout(closeTimeoutRef.current); - - closeTimeoutRef.current = undefined; - } - } else { - setHasOpenClassName(false); - - if (!isClosed && !closeTimeoutRef.current) { - const exec = () => { - setIsClosed(true); - - if (onCloseTransitionEnd) { - onCloseTransitionEnd(); - } - - closeTimeoutRef.current = undefined; - }; - - if (noCloseTransition) { - exec(); - } else { - closeTimeoutRef.current = window.setTimeout(exec, closeDuration); + if (isOpen) { + if (closingTimeoutRef.current) { + clearTimeout(closingTimeoutRef.current); + closingTimeoutRef.current = undefined; } + + if (options.noOpenTransition || (prevIsOpen === undefined && options.noMountTransition)) { + setState('open'); + } else { + setState('scheduled-open'); + requestMeasure(() => { + setState('open'); + }); + } + } else if (prevIsOpen === undefined || options.noCloseTransition) { + setState('closed'); + } else { + setState('closing'); + + closingTimeoutRef.current = window.setTimeout(() => { + setState('closed'); + onCloseEndLast(); + }, options.closeDuration); } - } + }, [isOpen]); - // `noCloseTransition`, when set to true, should remove the open class immediately - const shouldHaveOpenClassName = (hasOpenClassName && !(noCloseTransition && !isOpen)) || (noOpenTransition && isOpen); - const isClosing = Boolean(closeTimeoutRef.current); - const shouldRender = isOpen || isClosing; - const transitionClassNames = buildClassName( - className && 'opacity-transition', - className, - shouldHaveOpenClassName && 'open', - !shouldHaveOpenClassName && 'not-open', - shouldRender && 'shown', - !shouldRender && 'not-shown', - isClosing && 'closing', - ); + useLayoutEffect(() => { + const element = ref.current; + if (!element) return; - return { - shouldRender, - transitionClassNames, - hasShownClass: shouldRender, - hasOpenClass: shouldHaveOpenClassName, - isClosing, - }; -}; + addExtraClass(element, 'opacity-transition'); + if (className !== false) { + addExtraClass(element, className); + } -export default useShowTransition; + const state = getState(); + const shouldRender = state !== 'closed'; + const hasOpenClass = state === 'open'; + const isClosing = state === 'closing'; + + toggleExtraClass(element, `${prefix}shown`, shouldRender); + toggleExtraClass(element, `${prefix}not-shown`, !shouldRender); + toggleExtraClass(element, `${prefix}open`, hasOpenClass); + toggleExtraClass(element, `${prefix}not-open`, !hasOpenClass); + toggleExtraClass(element, `${prefix}closing`, isClosing); + }, [className, getState, prefix, ref]); + + const getShouldRender = useDerivedSignal(() => getState() !== 'closed', [getState]); + + return { ref, getShouldRender }; +} diff --git a/src/hooks/useShowTransitionDeprecated.ts b/src/hooks/useShowTransitionDeprecated.ts new file mode 100644 index 000000000..e985b4793 --- /dev/null +++ b/src/hooks/useShowTransitionDeprecated.ts @@ -0,0 +1,75 @@ +import { useRef, useState } from '../lib/teact/teact'; + +import buildClassName from '../util/buildClassName'; + +const CLOSE_DURATION = 350; + +const useShowTransitionDeprecated = ( + isOpen = false, + onCloseTransitionEnd?: () => void, + noFirstOpenTransition = false, + className: string | false = 'fast', + noCloseTransition = false, + closeDuration = CLOSE_DURATION, + noOpenTransition = false, +) => { + const [isClosed, setIsClosed] = useState(!isOpen); + const closeTimeoutRef = useRef(); + // СSS class should be added in a separate tick to turn on CSS transition. + const [hasOpenClassName, setHasOpenClassName] = useState(isOpen && noFirstOpenTransition); + + if (isOpen) { + setIsClosed(false); + setHasOpenClassName(true); + + if (closeTimeoutRef.current) { + window.clearTimeout(closeTimeoutRef.current); + + closeTimeoutRef.current = undefined; + } + } else { + setHasOpenClassName(false); + + if (!isClosed && !closeTimeoutRef.current) { + const exec = () => { + setIsClosed(true); + + if (onCloseTransitionEnd) { + onCloseTransitionEnd(); + } + + closeTimeoutRef.current = undefined; + }; + + if (noCloseTransition) { + exec(); + } else { + closeTimeoutRef.current = window.setTimeout(exec, closeDuration); + } + } + } + + // `noCloseTransition`, when set to true, should remove the open class immediately + const shouldHaveOpenClassName = (hasOpenClassName && !(noCloseTransition && !isOpen)) || (noOpenTransition && isOpen); + const isClosing = Boolean(closeTimeoutRef.current); + const shouldRender = isOpen || isClosing; + const transitionClassNames = buildClassName( + className && 'opacity-transition', + className, + shouldHaveOpenClassName && 'open', + !shouldHaveOpenClassName && 'not-open', + shouldRender && 'shown', + !shouldRender && 'not-shown', + isClosing && 'closing', + ); + + return { + shouldRender, + transitionClassNames, + hasShownClass: shouldRender, + hasOpenClass: shouldHaveOpenClassName, + isClosing, + }; +}; + +export default useShowTransitionDeprecated; diff --git a/src/hooks/useSyncEffectWithPrevDeps.ts b/src/hooks/useSyncEffectWithPrevDeps.ts new file mode 100644 index 000000000..4c7451a34 --- /dev/null +++ b/src/hooks/useSyncEffectWithPrevDeps.ts @@ -0,0 +1,19 @@ +import { useRef } from '../lib/teact/teact'; + +import useSyncEffect from './useSyncEffect'; + +const useLayoutEffectWithPrevDeps = ( + cb: (args: T | readonly []) => void, dependencies: T, +) => { + const prevDepsRef = useRef(); + + return useSyncEffect(() => { + const prevDeps = prevDepsRef.current; + prevDepsRef.current = dependencies; + + return cb(prevDeps || []); + // eslint-disable-next-line react-hooks-static-deps/exhaustive-deps + }, dependencies); +}; + +export default useLayoutEffectWithPrevDeps;