Multi-select forwarding and deleting

2023-03-20 15:23:53 -07:00 · 2023-03-20 15:23:53 -07:00 · 1d549a9991
commit 1d549a9991
parent d986356eea
82 changed files with 2607 additions and 991 deletions
--- a/ts/components/conversation/SelectModeActions.tsx
+++ b/ts/components/conversation/SelectModeActions.tsx
@ -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>
+      )}
+    </>
+  );
+}