Merge delete for me/everyone into one modal

This commit is contained in:
Jamie Kyle 2023-04-10 14:38:34 -07:00 committed by GitHub
parent c956c0e025
commit 822b162136
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
43 changed files with 658 additions and 672 deletions

View file

@ -2,11 +2,10 @@
// SPDX-License-Identifier: AGPL-3.0-only
import classNames from 'classnames';
import React, { useState } from 'react';
import React 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;
@ -28,8 +27,6 @@ export default function SelectModeActions({
showToast,
i18n,
}: SelectModeActionsProps): JSX.Element {
const [confirmDelete, setConfirmDelete] = useState(false);
const hasSelectedMessages = selectedMessageIds.length >= 1;
const tooManyMessagesToForward =
selectedMessageIds.length > MAX_FORWARD_COUNT;
@ -38,88 +35,57 @@ export default function SelectModeActions({
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 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>
{confirmDelete && (
<ConfirmationDialog
actions={[
{
action: () => {
onDeleteMessages();
},
style: 'negative',
text: i18n('icu:ConfirmDeleteForMeModal--confirm'),
},
]}
dialogName="ConfirmDeleteForMeModal"
title={i18n('icu:ConfirmDeleteForMeModal--title', {
count: selectedMessageIds.length,
})}
i18n={i18n}
onClose={() => {
setConfirmDelete(false);
}}
>
{i18n('icu:ConfirmDeleteForMeModal--description', {
count: selectedMessageIds.length,
})}
</ConfirmationDialog>
)}
</>
<button
type="button"
className={classNames('SelectModeActions__button', {
'SelectModeActions__button--disabled': !canDelete,
})}
disabled={!canDelete}
onClick={onDeleteMessages}
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: ToastType.TooManyMessagesToForward });
}
}}
aria-label={i18n('icu:SelectModeActions--forwardSelectedMessages')}
>
<span
role="presentation"
className="SelectModeActions__icon SelectModeActions__icon--forwardSelectedMessages"
/>
</button>
</div>
);
}