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

Message Select Toolbar: Show dialog modal when downloading selected files (#5619)

Browse Source
This commit is contained in:
Alexander Zinchuk 2025-03-01 17:58:54 +01:00
parent 49f83efb32
commit 47fcfd9e96
1 changed files with 76 additions and 36 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

112
src/components/middle/MessageSelectToolbar.tsx
View File

@ -1,5 +1,5 @@
import type { FC } from '../../lib/teact/teact'; import type { FC } from '../../lib/teact/teact';
import React, { memo, useEffect } from '../../lib/teact/teact'; import React, { memo, useEffect, useState } from '../../lib/teact/teact';
import { getActions, withGlobal } from '../../global'; import { getActions, withGlobal } from '../../global';
import type { ApiChat } from '../../api/types'; import type { ApiChat } from '../../api/types';
@ -18,6 +18,7 @@ import {
import buildClassName from '../../util/buildClassName'; import buildClassName from '../../util/buildClassName';
import captureKeyboardListeners from '../../util/captureKeyboardListeners'; import captureKeyboardListeners from '../../util/captureKeyboardListeners';
import useFlag from '../../hooks/useFlag';
import useLastCallback from '../../hooks/useLastCallback'; import useLastCallback from '../../hooks/useLastCallback';
import useOldLang from '../../hooks/useOldLang'; import useOldLang from '../../hooks/useOldLang';
import usePreviousDeprecated from '../../hooks/usePreviousDeprecated'; import usePreviousDeprecated from '../../hooks/usePreviousDeprecated';
@ -25,6 +26,8 @@ import useCopySelectedMessages from './hooks/useCopySelectedMessages';
import Icon from '../common/icons/Icon'; import Icon from '../common/icons/Icon';
import Button from '../ui/Button'; import Button from '../ui/Button';
import Checkbox from '../ui/Checkbox';
import ConfirmDialog from '../ui/ConfirmDialog';
import './MessageSelectToolbar.scss'; import './MessageSelectToolbar.scss';
@ -45,6 +48,7 @@ type StateProps = {
hasProtectedMessage?: boolean; hasProtectedMessage?: boolean;
isAnyModalOpen?: boolean; isAnyModalOpen?: boolean;
selectedMessageIds?: number[]; selectedMessageIds?: number[];
shouldWarnAboutSvg?: boolean;
}; };
const MessageSelectToolbar: FC<OwnProps & StateProps> = ({ const MessageSelectToolbar: FC<OwnProps & StateProps> = ({
@ -61,6 +65,7 @@ const MessageSelectToolbar: FC<OwnProps & StateProps> = ({
hasProtectedMessage, hasProtectedMessage,
isAnyModalOpen, isAnyModalOpen,
selectedMessageIds, selectedMessageIds,
shouldWarnAboutSvg,
}) => { }) => {
const { const {
exitMessageSelectMode, exitMessageSelectMode,
@ -70,11 +75,15 @@ const MessageSelectToolbar: FC<OwnProps & StateProps> = ({
showNotification, showNotification,
reportMessages, reportMessages,
openDeleteMessageModal, openDeleteMessageModal,
setSettingOption,
} = getActions(); } = getActions();
const lang = useOldLang(); const lang = useOldLang();
useCopySelectedMessages(isActive); useCopySelectedMessages(isActive);
const [isSvgDialogOpen, openSvgDialog, closeSvgDialog] = useFlag();
const [shouldNotWarnAboutSvg, setShouldNotWarnAboutSvg] = useState(false);
const handleExitMessageSelectMode = useLastCallback(() => { const handleExitMessageSelectMode = useLastCallback(() => {
exitMessageSelectMode(); exitMessageSelectMode();
}); });
@ -114,6 +123,21 @@ const MessageSelectToolbar: FC<OwnProps & StateProps> = ({
exitMessageSelectMode(); exitMessageSelectMode();
}); });
const handleMessageDownload = useLastCallback(() => {
if (shouldWarnAboutSvg) {
openSvgDialog();
return;
}
handleDownload();
});
const handleSvgConfirm = useLastCallback(() => {
setSettingOption({ shouldWarnAboutSvg: false });
closeSvgDialog();
handleDownload();
});
const prevSelectedMessagesCount = usePreviousDeprecated(selectedMessagesCount || undefined, true); const prevSelectedMessagesCount = usePreviousDeprecated(selectedMessagesCount || undefined, true);
const renderingSelectedMessagesCount = isActive ? selectedMessagesCount : prevSelectedMessagesCount; const renderingSelectedMessagesCount = isActive ? selectedMessagesCount : prevSelectedMessagesCount;
@ -156,43 +180,58 @@ const MessageSelectToolbar: FC<OwnProps & StateProps> = ({
}; };
return ( return (
<div className={className}> <>
<div className="MessageSelectToolbar-inner"> <div className={className}>
<Button <div className="MessageSelectToolbar-inner">
color="translucent" <Button
round color="translucent"
onClick={handleExitMessageSelectMode} round
ariaLabel="Exit select mode" onClick={handleExitMessageSelectMode}
> ariaLabel="Exit select mode"
<Icon name="close" /> >
</Button> <Icon name="close" />
<span className="MessageSelectToolbar-count" title={formattedMessagesCount}> </Button>
{formattedMessagesCount} <span className="MessageSelectToolbar-count" title={formattedMessagesCount}>
</span> {formattedMessagesCount}
</span>
{Boolean(selectedMessagesCount) && ( {Boolean(selectedMessagesCount) && (
<div className="MessageSelectToolbar-actions"> <div className="MessageSelectToolbar-actions">
{messageListType !== 'scheduled' && canForwardMessages && ( {messageListType !== 'scheduled' && canForwardMessages && (
renderButton( renderButton(
'forward', lang('Chat.ForwardActionHeader'), openForwardMenuForSelectedMessages, 'forward', lang('Chat.ForwardActionHeader'), openForwardMenuForSelectedMessages,
) )
)} )}
{canReportMessages && ( {canReportMessages && (
renderButton('flag', lang('Conversation.ReportMessages'), openMessageReport) renderButton('flag', lang('Conversation.ReportMessages'), openMessageReport)
)} )}
{canDownloadMessages && !hasProtectedMessage && ( {canDownloadMessages && !hasProtectedMessage && (
renderButton('download', lang('lng_media_download'), handleDownload) renderButton('download', lang('lng_media_download'), handleMessageDownload)
)} )}
{!hasProtectedMessage && ( {!hasProtectedMessage && (
renderButton('copy', lang('lng_context_copy_selected_items'), handleCopy) renderButton('copy', lang('lng_context_copy_selected_items'), handleCopy)
)} )}
{canDeleteMessages && ( {canDeleteMessages && (
renderButton('delete', lang('EditAdminGroupDeleteMessages'), handleDelete, true) renderButton('delete', lang('EditAdminGroupDeleteMessages'), handleDelete, true)
)} )}
</div> </div>
)} )}
</div>
</div> </div>
</div> <ConfirmDialog
isOpen={isSvgDialogOpen}
onClose={closeSvgDialog}
confirmHandler={handleSvgConfirm}
>
{lang('lng_launch_svg_warning')}
<Checkbox
className="dialog-checkbox"
checked={shouldNotWarnAboutSvg}
label={lang('lng_launch_exe_dont_ask')}
onCheck={setShouldNotWarnAboutSvg}
/>
</ConfirmDialog>
</>
); );
}; };
@ -224,6 +263,7 @@ export default memo(withGlobal<OwnProps>(
selectedMessageIds, selectedMessageIds,
hasProtectedMessage, hasProtectedMessage,
isAnyModalOpen, isAnyModalOpen,
shouldWarnAboutSvg: global.settings.byKey.shouldWarnAboutSvg,
}; };
}, },
)(MessageSelectToolbar)); )(MessageSelectToolbar));