Switched ForwardMessageModal to use ListTile

2023-01-25 16:51:08 -07:00 · 2023-01-25 16:51:08 -07:00 · d64e0b65c4
commit d64e0b65c4
parent 257f5e1231
25 changed files with 528 additions and 239 deletions
--- a/ts/components/conversationList/BaseConversationListItem.tsx
+++ b/ts/components/conversationList/BaseConversationListItem.tsx
@ -30,7 +30,7 @@ const MESSAGE_CLASS_NAME = `${CONTENT_CLASS_NAME}__message`;
 export const MESSAGE_TEXT_CLASS_NAME = `${MESSAGE_CLASS_NAME}__text`;
 const CHECKBOX_CONTAINER_CLASS_NAME = `${BASE_CLASS_NAME}__checkbox--container`;
 const CHECKBOX_CLASS_NAME = `${BASE_CLASS_NAME}__checkbox`;
-const SPINNER_CLASS_NAME = `${BASE_CLASS_NAME}__spinner`;
+export const SPINNER_CLASS_NAME = `${BASE_CLASS_NAME}__spinner`;

 type PropsType = {
  checked?: boolean;
--- a/ts/components/conversationList/ContactCheckbox.tsx
+++ b/ts/components/conversationList/ContactCheckbox.tsx
@ -1,18 +1,17 @@
 // Copyright 2021 Signal Messenger, LLC
 // SPDX-License-Identifier: AGPL-3.0-only

-import type { FunctionComponent, ReactNode } from 'react';
 import React from 'react';
+import type { FunctionComponent } from 'react';

-import {
-  BaseConversationListItem,
-  HEADER_CONTACT_NAME_CLASS_NAME,
-} from './BaseConversationListItem';
+import { HEADER_CONTACT_NAME_CLASS_NAME } from './BaseConversationListItem';
 import type { ConversationType } from '../../state/ducks/conversations';
 import type { BadgeType } from '../../badges/types';
 import type { LocalizerType, ThemeType } from '../../types/Util';
 import { ContactName } from '../conversation/ContactName';
 import { About } from '../conversation/About';
+import { ListTile } from '../ListTile';
+import { Avatar, AvatarSize } from '../Avatar';

 export enum ContactCheckboxDisabledReason {
  // We start the enum at 1 because the default starting value of 0 is falsy.
@ -61,7 +60,6 @@ export const ContactCheckbox: FunctionComponent<PropsType> = React.memo(
    badge,
    color,
    disabledReason,
-    groupId,
    i18n,
    id,
    isChecked,
@ -74,7 +72,6 @@ export const ContactCheckbox: FunctionComponent<PropsType> = React.memo(
    title,
    type,
    unblurredAvatarPath,
-    uuid,
  }) {
    const disabled = Boolean(disabledReason);

@ -86,13 +83,11 @@ export const ContactCheckbox: FunctionComponent<PropsType> = React.memo(
      <ContactName module={HEADER_CONTACT_NAME_CLASS_NAME} title={title} />
    );

-    let messageText: ReactNode;
+    let messageText: undefined | string | JSX.Element;
    if (disabledReason === ContactCheckboxDisabledReason.AlreadyAdded) {
      messageText = i18n('alreadyAMember');
    } else if (about) {
      messageText = <About className="" text={about} />;
-    } else {
-      messageText = null;
    }

    const onClickItem = () => {
@ -100,29 +95,33 @@ export const ContactCheckbox: FunctionComponent<PropsType> = React.memo(
    };

    return (
-      <BaseConversationListItem
-        acceptedMessageRequest={acceptedMessageRequest}
-        avatarPath={avatarPath}
-        badge={badge}
-        checked={isChecked}
-        color={color}
-        conversationType={type}
+      <ListTile.checkbox
+        clickable
        disabled={disabled}
-        groupId={groupId}
-        headerName={headerName}
-        i18n={i18n}
-        id={id}
-        isMe={isMe}
-        isSelected={false}
-        messageText={messageText}
+        isChecked={isChecked}
+        leading={
+          <Avatar
+            acceptedMessageRequest={acceptedMessageRequest}
+            avatarPath={avatarPath}
+            color={color}
+            conversationType={type}
+            noteToSelf={Boolean(isMe)}
+            i18n={i18n}
+            isMe={isMe}
+            phoneNumber={phoneNumber}
+            profileName={profileName}
+            title={title}
+            sharedGroupNames={sharedGroupNames}
+            size={AvatarSize.THIRTY_TWO}
+            unblurredAvatarPath={unblurredAvatarPath}
+            // appease the type checker.
+            {...(badge ? { badge, theme } : { badge: undefined })}
+          />
+        }
+        title={headerName}
+        subtitle={isMe ? undefined : messageText}
+        subtitleMaxLines={1}
        onClick={onClickItem}
-        phoneNumber={phoneNumber}
-        profileName={profileName}
-        sharedGroupNames={sharedGroupNames}
-        theme={theme}
-        title={title}
-        unblurredAvatarPath={unblurredAvatarPath}
-        uuid={uuid}
      />
    );
  }
--- a/ts/components/conversationList/ContactListItem.tsx
+++ b/ts/components/conversationList/ContactListItem.tsx
@ -4,15 +4,14 @@
 import type { FunctionComponent } from 'react';
 import React from 'react';

-import {
-  BaseConversationListItem,
-  HEADER_CONTACT_NAME_CLASS_NAME,
-} from './BaseConversationListItem';
+import { HEADER_CONTACT_NAME_CLASS_NAME } from './BaseConversationListItem';
 import type { ConversationType } from '../../state/ducks/conversations';
 import type { BadgeType } from '../../badges/types';
 import type { LocalizerType, ThemeType } from '../../types/Util';
 import { ContactName } from '../conversation/ContactName';
 import { About } from '../conversation/About';
+import { ListTile } from '../ListTile';
+import { Avatar, AvatarSize } from '../Avatar';
 import { isSignalConversation } from '../../util/isSignalConversation';

 export type ContactListItemConversationType = Pick<
@ -55,7 +54,6 @@ export const ContactListItem: FunctionComponent<PropsType> = React.memo(
    avatarPath,
    badge,
    color,
-    groupId,
    i18n,
    id,
    isMe,
@ -82,30 +80,33 @@ export const ContactListItem: FunctionComponent<PropsType> = React.memo(
    );

    const messageText =
-      about && !isMe ? <About className="" text={about} /> : null;
+      about && !isMe ? <About className="" text={about} /> : undefined;

    return (
-      <BaseConversationListItem
-        acceptedMessageRequest={acceptedMessageRequest}
-        avatarPath={avatarPath}
-        badge={badge}
-        color={color}
-        conversationType={type}
-        groupId={groupId}
-        headerName={headerName}
-        i18n={i18n}
-        id={id}
-        isMe={isMe}
-        isSelected={false}
-        messageText={messageText}
+      <ListTile
+        leading={
+          <Avatar
+            acceptedMessageRequest={acceptedMessageRequest}
+            avatarPath={avatarPath}
+            color={color}
+            conversationType={type}
+            noteToSelf={Boolean(isMe)}
+            i18n={i18n}
+            isMe={isMe}
+            phoneNumber={phoneNumber}
+            profileName={profileName}
+            title={title}
+            sharedGroupNames={sharedGroupNames}
+            size={AvatarSize.THIRTY_TWO}
+            unblurredAvatarPath={unblurredAvatarPath}
+            // This is here to appease the type checker.
+            {...(badge ? { badge, theme } : { badge: undefined })}
+          />
+        }
+        title={headerName}
+        subtitle={messageText}
+        subtitleMaxLines={1}
        onClick={onClick ? () => onClick(id) : undefined}
-        phoneNumber={phoneNumber}
-        profileName={profileName}
-        sharedGroupNames={sharedGroupNames}
-        theme={theme}
-        title={title}
-        unblurredAvatarPath={unblurredAvatarPath}
-        uuid={uuid}
      />
    );
  }
--- a/ts/components/conversationList/CreateNewGroupButton.tsx
+++ b/ts/components/conversationList/CreateNewGroupButton.tsx
@ -4,8 +4,9 @@
 import type { FunctionComponent } from 'react';
 import React from 'react';

-import { BaseConversationListItem } from './BaseConversationListItem';
 import type { LocalizerType } from '../../types/Util';
+import { ListTile } from '../ListTile';
+import { Avatar, AvatarSize } from '../Avatar';

 type PropsType = {
  i18n: LocalizerType;
@ -17,17 +18,22 @@ export const CreateNewGroupButton: FunctionComponent<PropsType> = React.memo(
    const title = i18n('createNewGroupButton');

    return (
-      <BaseConversationListItem
-        acceptedMessageRequest={false}
-        conversationType="group"
-        headerName={title}
-        i18n={i18n}
-        isMe={false}
-        isSelected={false}
-        onClick={onClick}
-        sharedGroupNames={[]}
+      <ListTile
        testId="CreateNewGroupButton"
+        leading={
+          <Avatar
+            acceptedMessageRequest={false}
+            conversationType="group"
+            i18n={i18n}
+            isMe={false}
+            title={title}
+            sharedGroupNames={[]}
+            size={AvatarSize.THIRTY_TWO}
+            badge={undefined}
+          />
+        }
        title={title}
+        onClick={onClick}
      />
    );
  }
--- a/ts/components/conversationList/GroupListItem.tsx
+++ b/ts/components/conversationList/GroupListItem.tsx
@ -5,8 +5,9 @@ import React from 'react';
 import type { ConversationType } from '../../state/ducks/conversations';
 import type { LocalizerType } from '../../types/Util';
 import type { UUIDStringType } from '../../types/UUID';
-import { AvatarSize } from '../Avatar';
-import { BaseConversationListItem } from './BaseConversationListItem';
+import { Avatar, AvatarSize } from '../Avatar';
+import { Emojify } from '../conversation/Emojify';
+import { ListTile } from '../ListTile';

 export enum DisabledReason {
  AlreadyMember = 'already-member',
@ -49,21 +50,25 @@ export function GroupListItem({
        count: group.membersCount,
      });
  }
+
  return (
-    <BaseConversationListItem
-      disabled={group.disabledReason !== undefined}
-      conversationType="group"
-      title={group.title}
-      avatarSize={AvatarSize.THIRTY_TWO}
-      avatarPath={group.avatarPath}
-      acceptedMessageRequest
-      isMe={false}
-      sharedGroupNames={[]}
-      headerName={group.title}
-      i18n={i18n}
-      isSelected={false}
+    <ListTile
+      leading={
+        <Avatar
+          acceptedMessageRequest
+          avatarPath={group.avatarPath}
+          conversationType="group"
+          i18n={i18n}
+          isMe={false}
+          title={group.title}
+          sharedGroupNames={[]}
+          size={AvatarSize.THIRTY_TWO}
+          badge={undefined}
+        />
+      }
+      title={<Emojify text={group.title} />}
+      subtitle={<Emojify text={messageText} />}
      onClick={() => onSelectGroup(group.id)}
-      messageText={messageText}
    />
  );
 }
--- a/ts/components/conversationList/PhoneNumberCheckbox.tsx
+++ b/ts/components/conversationList/PhoneNumberCheckbox.tsx
@ -6,11 +6,15 @@ import React, { useState } from 'react';

 import { ButtonVariant } from '../Button';
 import { ConfirmationDialog } from '../ConfirmationDialog';
-import { BaseConversationListItem } from './BaseConversationListItem';
+import { SPINNER_CLASS_NAME } from './BaseConversationListItem';
 import type { ParsedE164Type } from '../../util/libphonenumberInstance';
 import type { LocalizerType, ThemeType } from '../../types/Util';
 import { AvatarColors } from '../../types/Colors';
 import type { LookupConversationWithoutUuidActionsType } from '../../util/lookupConversationWithoutUuid';
+import { ListTile } from '../ListTile';
+import { Emojify } from '../conversation/Emojify';
+import { Avatar, AvatarSize } from '../Avatar';
+import { Spinner } from '../Spinner';

 export type PropsDataType = {
  phoneNumber: ParsedE164Type;
@ -31,7 +35,6 @@ export const PhoneNumberCheckbox: FunctionComponent<PropsType> = React.memo(
    phoneNumber,
    isChecked,
    isFetching,
-    theme,
    i18n,
    lookupConversationWithoutUuid,
    showUserNotFoundModal,
@ -88,24 +91,46 @@ export const PhoneNumberCheckbox: FunctionComponent<PropsType> = React.memo(
      );
    }

+    const avatar = (
+      <Avatar
+        acceptedMessageRequest={false}
+        color={AvatarColors[0]}
+        conversationType="direct"
+        i18n={i18n}
+        isMe={false}
+        phoneNumber={phoneNumber.userInput}
+        title={phoneNumber.userInput}
+        sharedGroupNames={[]}
+        size={AvatarSize.THIRTY_TWO}
+        badge={undefined}
+      />
+    );
+
+    const title = <Emojify text={phoneNumber.userInput} />;
+
    return (
      <>
-        <BaseConversationListItem
-          acceptedMessageRequest={false}
-          checked={isChecked}
-          color={AvatarColors[0]}
-          conversationType="direct"
-          headerName={phoneNumber.userInput}
-          i18n={i18n}
-          isMe={false}
-          isSelected={false}
-          onClick={onClickItem}
-          phoneNumber={phoneNumber.userInput}
-          shouldShowSpinner={isFetching}
-          theme={theme}
-          sharedGroupNames={[]}
-          title={phoneNumber.userInput}
-        />
+        {isFetching ? (
+          <ListTile
+            leading={avatar}
+            title={title}
+            trailing={
+              <Spinner
+                size="20px"
+                svgSize="small"
+                moduleClassName={SPINNER_CLASS_NAME}
+                direction="on-progress-dialog"
+              />
+            }
+          />
+        ) : (
+          <ListTile.checkbox
+            isChecked={isChecked}
+            onClick={onClickItem}
+            leading={avatar}
+            title={<Emojify text={phoneNumber.userInput} />}
+          />
+        )}
        {modal}
      </>
    );
--- a/ts/components/conversationList/UsernameCheckbox.tsx
+++ b/ts/components/conversationList/UsernameCheckbox.tsx
@ -1,13 +1,16 @@
 // Copyright 2022 Signal Messenger, LLC
 // SPDX-License-Identifier: AGPL-3.0-only

-import type { FunctionComponent } from 'react';
 import React from 'react';
+import type { FunctionComponent } from 'react';

-import { BaseConversationListItem } from './BaseConversationListItem';
 import type { LocalizerType, ThemeType } from '../../types/Util';
 import { AvatarColors } from '../../types/Colors';
 import type { LookupConversationWithoutUuidActionsType } from '../../util/lookupConversationWithoutUuid';
+import { ListTile } from '../ListTile';
+import { Avatar, AvatarSize } from '../Avatar';
+import { Spinner } from '../Spinner';
+import { SPINNER_CLASS_NAME } from './BaseConversationListItem';

 export type PropsDataType = {
  username: string;
@ -28,7 +31,6 @@ export const UsernameCheckbox: FunctionComponent<PropsType> = React.memo(
    username,
    isChecked,
    isFetching,
-    theme,
    i18n,
    lookupConversationWithoutUuid,
    showUserNotFoundModal,
@ -62,22 +64,41 @@ export const UsernameCheckbox: FunctionComponent<PropsType> = React.memo(

    const title = i18n('at-username', { username });

-    return (
-      <BaseConversationListItem
+    const avatar = (
+      <Avatar
        acceptedMessageRequest={false}
-        checked={isChecked}
        color={AvatarColors[0]}
        conversationType="direct"
-        headerName={title}
+        searchResult
        i18n={i18n}
        isMe={false}
-        isSelected={false}
-        isUsernameSearchResult
-        onClick={onClickItem}
-        shouldShowSpinner={isFetching}
-        theme={theme}
-        sharedGroupNames={[]}
        title={title}
+        sharedGroupNames={[]}
+        size={AvatarSize.THIRTY_TWO}
+        badge={undefined}
+      />
+    );
+
+    return isFetching ? (
+      <ListTile
+        leading={avatar}
+        title={title}
+        trailing={
+          <Spinner
+            size="20px"
+            svgSize="small"
+            moduleClassName={SPINNER_CLASS_NAME}
+            direction="on-progress-dialog"
+          />
+        }
+      />
+    ) : (
+      <ListTile.checkbox
+        leading={avatar}
+        title={title}
+        isChecked={isChecked}
+        onClick={onClickItem}
+        clickable
      />
    );
  }