Multi-select forwarding and deleting
This commit is contained in:
parent
d986356eea
commit
1d549a9991
82 changed files with 2607 additions and 991 deletions
122
ts/components/conversation/SelectModeActions.tsx
Normal file
122
ts/components/conversation/SelectModeActions.tsx
Normal file
|
@ -0,0 +1,122 @@
|
|||
// Copyright 2023 Signal Messenger, LLC
|
||||
// SPDX-License-Identifier: AGPL-3.0-only
|
||||
|
||||
import classNames from 'classnames';
|
||||
import React, { useState } from 'react';
|
||||
import type { ShowToastAction } from '../../state/ducks/toast';
|
||||
import { ToastType } from '../../types/Toast';
|
||||
import type { LocalizerType } from '../../types/Util';
|
||||
import { ConfirmationDialog } from '../ConfirmationDialog';
|
||||
|
||||
// Keep this in sync with iOS and Android
|
||||
const MAX_FORWARD_COUNT = 30;
|
||||
|
||||
type SelectModeActionsProps = Readonly<{
|
||||
selectedMessageIds: ReadonlyArray<string>;
|
||||
onExitSelectMode: () => void;
|
||||
onDeleteMessages: () => void;
|
||||
onForwardMessages: () => void;
|
||||
showToast: ShowToastAction;
|
||||
i18n: LocalizerType;
|
||||
}>;
|
||||
|
||||
export default function SelectModeActions({
|
||||
selectedMessageIds,
|
||||
onExitSelectMode,
|
||||
onDeleteMessages,
|
||||
onForwardMessages,
|
||||
showToast,
|
||||
i18n,
|
||||
}: SelectModeActionsProps): JSX.Element {
|
||||
const [confirmDelete, setConfirmDelete] = useState(false);
|
||||
|
||||
const hasSelectedMessages = selectedMessageIds.length >= 1;
|
||||
const tooManyMessagesToForward =
|
||||
selectedMessageIds.length > MAX_FORWARD_COUNT;
|
||||
|
||||
const canForward = hasSelectedMessages && !tooManyMessagesToForward;
|
||||
const canDelete = hasSelectedMessages;
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="SelectModeActions">
|
||||
<button
|
||||
type="button"
|
||||
className="SelectModeActions__button"
|
||||
onClick={onExitSelectMode}
|
||||
aria-label={i18n('icu:SelectModeActions--exitSelectMode')}
|
||||
>
|
||||
<span
|
||||
role="presentation"
|
||||
className="SelectModeActions__icon SelectModeActions__icon--exitSelectMode"
|
||||
/>
|
||||
</button>
|
||||
<div className="SelectModeActions__selectedMessages">
|
||||
{i18n('icu:SelectModeActions--selectedMessages', {
|
||||
count: selectedMessageIds.length,
|
||||
})}
|
||||
</div>
|
||||
<button
|
||||
type="button"
|
||||
className={classNames('SelectModeActions__button', {
|
||||
'SelectModeActions__button--disabled': !canDelete,
|
||||
})}
|
||||
disabled={!canDelete}
|
||||
onClick={() => {
|
||||
setConfirmDelete(true);
|
||||
}}
|
||||
aria-label={i18n('icu:SelectModeActions--deleteSelectedMessages')}
|
||||
>
|
||||
<span
|
||||
role="presentation"
|
||||
className="SelectModeActions__icon SelectModeActions__icon--deleteSelectedMessages"
|
||||
/>
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
className={classNames('SelectModeActions__button', {
|
||||
'SelectModeActions__button--disabled': !canForward,
|
||||
})}
|
||||
aria-disabled={!canForward}
|
||||
onClick={() => {
|
||||
if (canForward) {
|
||||
onForwardMessages();
|
||||
} else if (tooManyMessagesToForward) {
|
||||
showToast(ToastType.TooManyMessagesToForward, {
|
||||
count: MAX_FORWARD_COUNT,
|
||||
});
|
||||
}
|
||||
}}
|
||||
aria-label={i18n('icu:SelectModeActions--forwardSelectedMessages')}
|
||||
>
|
||||
<span
|
||||
role="presentation"
|
||||
className="SelectModeActions__icon SelectModeActions__icon--forwardSelectedMessages"
|
||||
/>
|
||||
</button>
|
||||
</div>
|
||||
{confirmDelete && (
|
||||
<ConfirmationDialog
|
||||
actions={[
|
||||
{
|
||||
action: () => {
|
||||
onDeleteMessages();
|
||||
},
|
||||
style: 'negative',
|
||||
text: i18n('icu:SelectModeActions__confirmDelete--confirm'),
|
||||
},
|
||||
]}
|
||||
dialogName="TimelineMessage/deleteMessage"
|
||||
i18n={i18n}
|
||||
onClose={() => {
|
||||
setConfirmDelete(false);
|
||||
}}
|
||||
>
|
||||
{i18n('icu:SelectModeActions__confirmDelete--title', {
|
||||
count: selectedMessageIds.length,
|
||||
})}
|
||||
</ConfirmationDialog>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
}
|
Loading…
Add table
Add a link
Reference in a new issue