ztr/TelegramPWA
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Composer: fix blinks for close animation (#4169)

Browse Source
This commit is contained in:
Alexander Zinchuk 2024-01-16 21:32:56 +01:00
parent ca130d49dd
commit 44a0c0a4fc
2 changed files with 13 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/components/common/embedded/EmbeddedMessage.tsx
View File

@ -20,6 +20,7 @@ import {
isMessageTranslatable, isMessageTranslatable,
} from '../../../global/helpers'; } from '../../../global/helpers';
import buildClassName from '../../../util/buildClassName'; import buildClassName from '../../../util/buildClassName';
import freezeWhenClosed from '../../../util/hoc/freezeWhenClosed';
import { getPictogramDimensions } from '../helpers/mediaDimensions'; import { getPictogramDimensions } from '../helpers/mediaDimensions';
import { getPeerColorClass } from '../helpers/peerColor'; import { getPeerColorClass } from '../helpers/peerColor';
import renderText from '../helpers/renderText'; import renderText from '../helpers/renderText';
@ -54,6 +55,7 @@ type OwnProps = {
isInComposer?: boolean; isInComposer?: boolean;
chatTranslations?: ChatTranslatedMessages; chatTranslations?: ChatTranslatedMessages;
requestedChatTranslationLanguage?: string; requestedChatTranslationLanguage?: string;
isOpen?: boolean;
observeIntersectionForLoading?: ObserveFn; observeIntersectionForLoading?: ObserveFn;
observeIntersectionForPlaying?: ObserveFn; observeIntersectionForPlaying?: ObserveFn;
onClick: NoneToVoidFunction; onClick: NoneToVoidFunction;
@ -256,4 +258,6 @@ function renderPictogram(
); );
} }
export const ClosableEmbeddedMessage = freezeWhenClosed(EmbeddedMessage);
export default EmbeddedMessage; export default EmbeddedMessage;

13
src/components/middle/composer/ComposerEmbeddedMessage.tsx
View File

@ -27,13 +27,14 @@ import captureEscKeyListener from '../../../util/captureEscKeyListener';
import { getPeerColorClass } from '../../common/helpers/peerColor'; import { getPeerColorClass } from '../../common/helpers/peerColor';
import useContextMenuHandlers from '../../../hooks/useContextMenuHandlers'; import useContextMenuHandlers from '../../../hooks/useContextMenuHandlers';
import useCurrentOrPrev from '../../../hooks/useCurrentOrPrev';
import useLang from '../../../hooks/useLang'; import useLang from '../../../hooks/useLang';
import useLastCallback from '../../../hooks/useLastCallback'; import useLastCallback from '../../../hooks/useLastCallback';
import useMenuPosition from '../../../hooks/useMenuPosition'; import useMenuPosition from '../../../hooks/useMenuPosition';
import useShowTransition from '../../../hooks/useShowTransition'; import useShowTransition from '../../../hooks/useShowTransition';
import useAsyncRendering from '../../right/hooks/useAsyncRendering'; import useAsyncRendering from '../../right/hooks/useAsyncRendering';
import EmbeddedMessage from '../../common/embedded/EmbeddedMessage'; import { ClosableEmbeddedMessage } from '../../common/embedded/EmbeddedMessage';
import Icon from '../../common/Icon'; import Icon from '../../common/Icon';
import Button from '../../ui/Button'; import Button from '../../ui/Button';
import Menu from '../../ui/Menu'; import Menu from '../../ui/Menu';
@ -165,9 +166,10 @@ const ComposerEmbeddedMessage: FC<OwnProps & StateProps> = ({
}, [handleContextMenuClose, shouldRender]); }, [handleContextMenuClose, shouldRender]);
const className = buildClassName('ComposerEmbeddedMessage', transitionClassNames); const className = buildClassName('ComposerEmbeddedMessage', transitionClassNames);
const renderingSender = useCurrentOrPrev(sender, true);
const innerClassName = buildClassName( const innerClassName = buildClassName(
'ComposerEmbeddedMessage_inner', 'ComposerEmbeddedMessage_inner',
getPeerColorClass(sender), getPeerColorClass(renderingSender),
); );
const isShowingReply = replyInfo && !shouldForceShowEditing; const isShowingReply = replyInfo && !shouldForceShowEditing;
@ -203,6 +205,8 @@ const ComposerEmbeddedMessage: FC<OwnProps & StateProps> = ({
}; };
}, [isCurrentUserPremium, isForwarding, message, noAuthors]); }, [isCurrentUserPremium, isForwarding, message, noAuthors]);
const renderingLeftIcon = useCurrentOrPrev(leftIcon, true);
if (!shouldRender) { if (!shouldRender) {
return undefined; return undefined;
} }
@ -211,12 +215,13 @@ const ComposerEmbeddedMessage: FC<OwnProps & StateProps> = ({
<div className={className} ref={ref} onContextMenu={handleContextMenu} onClick={handleContextMenu}> <div className={className} ref={ref} onContextMenu={handleContextMenu} onClick={handleContextMenu}>
<div className={innerClassName}> <div className={innerClassName}>
<div className="embedded-left-icon"> <div className="embedded-left-icon">
{leftIcon && <Icon name={leftIcon} />} {renderingLeftIcon && <Icon name={renderingLeftIcon} />}
{Boolean(replyInfo?.quoteText) && ( {Boolean(replyInfo?.quoteText) && (
<Icon name="quote" className="quote-reply" /> <Icon name="quote" className="quote-reply" />
)} )}
</div> </div>
<EmbeddedMessage <ClosableEmbeddedMessage
isOpen={isShown}
className="inside-input" className="inside-input"
replyInfo={replyInfo} replyInfo={replyInfo}
isInComposer isInComposer