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