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,
} from '../../../global/helpers';
import buildClassName from '../../../util/buildClassName';
import freezeWhenClosed from '../../../util/hoc/freezeWhenClosed';
import { getPictogramDimensions } from '../helpers/mediaDimensions';
import { getPeerColorClass } from '../helpers/peerColor';
import renderText from '../helpers/renderText';
@ -54,6 +55,7 @@ type OwnProps = {
isInComposer?: boolean;
chatTranslations?: ChatTranslatedMessages;
requestedChatTranslationLanguage?: string;
isOpen?: boolean;
observeIntersectionForLoading?: ObserveFn;
observeIntersectionForPlaying?: ObserveFn;
onClick: NoneToVoidFunction;
@ -256,4 +258,6 @@ function renderPictogram(
);
}
export const ClosableEmbeddedMessage = freezeWhenClosed(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 useContextMenuHandlers from '../../../hooks/useContextMenuHandlers';
import useCurrentOrPrev from '../../../hooks/useCurrentOrPrev';
import useLang from '../../../hooks/useLang';
import useLastCallback from '../../../hooks/useLastCallback';
import useMenuPosition from '../../../hooks/useMenuPosition';
import useShowTransition from '../../../hooks/useShowTransition';
import useAsyncRendering from '../../right/hooks/useAsyncRendering';
import EmbeddedMessage from '../../common/embedded/EmbeddedMessage';
import { ClosableEmbeddedMessage } from '../../common/embedded/EmbeddedMessage';
import Icon from '../../common/Icon';
import Button from '../../ui/Button';
import Menu from '../../ui/Menu';
@ -165,9 +166,10 @@ const ComposerEmbeddedMessage: FC<OwnProps & StateProps> = ({
}, [handleContextMenuClose, shouldRender]);
const className = buildClassName('ComposerEmbeddedMessage', transitionClassNames);
const renderingSender = useCurrentOrPrev(sender, true);
const innerClassName = buildClassName(
'ComposerEmbeddedMessage_inner',
getPeerColorClass(sender),
getPeerColorClass(renderingSender),
);
const isShowingReply = replyInfo && !shouldForceShowEditing;
@ -203,6 +205,8 @@ const ComposerEmbeddedMessage: FC<OwnProps & StateProps> = ({
};
}, [isCurrentUserPremium, isForwarding, message, noAuthors]);
const renderingLeftIcon = useCurrentOrPrev(leftIcon, true);
if (!shouldRender) {
return undefined;
}
@ -211,12 +215,13 @@ const ComposerEmbeddedMessage: FC<OwnProps & StateProps> = ({
<div className={className} ref={ref} onContextMenu={handleContextMenu} onClick={handleContextMenu}>
<div className={innerClassName}>
<div className="embedded-left-icon">
{leftIcon && <Icon name={leftIcon} />}
{renderingLeftIcon && <Icon name={renderingLeftIcon} />}
{Boolean(replyInfo?.quoteText) && (
<Icon name="quote" className="quote-reply" />
)}
</div>
<EmbeddedMessage
<ClosableEmbeddedMessage
isOpen={isShown}
className="inside-input"
replyInfo={replyInfo}
isInComposer