+
{headerName}
{isNumber(headerDate) && (
@@ -137,7 +162,61 @@ export const BaseConversationListItem: FunctionComponent
= React.memo
) : null}
-
+ {checkboxNode}
+
+ );
+
+ const commonClassNames = classNames(BASE_CLASS_NAME, {
+ [`${BASE_CLASS_NAME}--has-unread`]: isUnread,
+ [`${BASE_CLASS_NAME}--is-selected`]: isSelected,
+ });
+
+ if (isCheckbox) {
+ return (
+
+ );
+ }
+
+ if (onClick) {
+ return (
+
+ );
+ }
+
+ return (
+
+ {contents}
+
);
}
);
diff --git a/ts/components/conversationList/ContactCheckbox.tsx b/ts/components/conversationList/ContactCheckbox.tsx
new file mode 100644
index 000000000..e28ea7bfc
--- /dev/null
+++ b/ts/components/conversationList/ContactCheckbox.tsx
@@ -0,0 +1,97 @@
+// Copyright 2021 Signal Messenger, LLC
+// SPDX-License-Identifier: AGPL-3.0-only
+
+import React, { CSSProperties, FunctionComponent } from 'react';
+
+import { BaseConversationListItem } from './BaseConversationListItem';
+import { ColorType } from '../../types/Colors';
+import { LocalizerType } from '../../types/Util';
+import { ContactName } from '../conversation/ContactName';
+import { About } from '../conversation/About';
+
+export enum ContactCheckboxDisabledReason {
+ // We start the enum at 1 because the default starting value of 0 is falsy.
+ MaximumContactsSelected = 1,
+ NotCapable,
+}
+
+export type PropsDataType = {
+ about?: string;
+ avatarPath?: string;
+ color?: ColorType;
+ disabledReason?: ContactCheckboxDisabledReason;
+ id: string;
+ isChecked: boolean;
+ name?: string;
+ phoneNumber?: string;
+ profileName?: string;
+ title: string;
+};
+
+type PropsHousekeepingType = {
+ i18n: LocalizerType;
+ style: CSSProperties;
+ onClick: (
+ id: string,
+ disabledReason: undefined | ContactCheckboxDisabledReason
+ ) => void;
+};
+
+type PropsType = PropsDataType & PropsHousekeepingType;
+
+export const ContactCheckbox: FunctionComponent
= React.memo(
+ ({
+ about,
+ avatarPath,
+ color,
+ disabledReason,
+ i18n,
+ id,
+ isChecked,
+ name,
+ onClick,
+ phoneNumber,
+ profileName,
+ style,
+ title,
+ }) => {
+ const disabled = Boolean(disabledReason);
+
+ const headerName = (
+
+ );
+
+ const messageText = about ? : null;
+
+ const onClickItem = () => {
+ onClick(id, disabledReason);
+ };
+
+ return (
+
+ );
+ }
+);
diff --git a/ts/components/conversationList/ContactListItem.tsx b/ts/components/conversationList/ContactListItem.tsx
index 7632ad6f6..5f031a3c9 100644
--- a/ts/components/conversationList/ContactListItem.tsx
+++ b/ts/components/conversationList/ContactListItem.tsx
@@ -1,7 +1,7 @@
// Copyright 2021 Signal Messenger, LLC
// SPDX-License-Identifier: AGPL-3.0-only
-import React, { useCallback, CSSProperties, FunctionComponent } from 'react';
+import React, { CSSProperties, FunctionComponent } from 'react';
import { BaseConversationListItem } from './BaseConversationListItem';
import { ColorType } from '../../types/Colors';
@@ -25,7 +25,7 @@ export type PropsDataType = {
type PropsHousekeepingType = {
i18n: LocalizerType;
style: CSSProperties;
- onClick: (id: string) => void;
+ onClick?: (id: string) => void;
};
type PropsType = PropsDataType & PropsHousekeepingType;
@@ -61,8 +61,6 @@ export const ContactListItem: FunctionComponent = React.memo(
const messageText =
about && !isMe ? : null;
- const onClickItem = useCallback(() => onClick(id), [onClick, id]);
-
return (
= React.memo(
isSelected={false}
messageText={messageText}
name={name}
- onClick={onClickItem}
+ onClick={onClick ? () => onClick(id) : undefined}
phoneNumber={phoneNumber}
profileName={profileName}
style={style}
diff --git a/ts/components/conversationList/CreateNewGroupButton.tsx b/ts/components/conversationList/CreateNewGroupButton.tsx
new file mode 100644
index 000000000..865e5858f
--- /dev/null
+++ b/ts/components/conversationList/CreateNewGroupButton.tsx
@@ -0,0 +1,32 @@
+// Copyright 2021 Signal Messenger, LLC
+// SPDX-License-Identifier: AGPL-3.0-only
+
+import React, { CSSProperties, FunctionComponent } from 'react';
+
+import { BaseConversationListItem } from './BaseConversationListItem';
+import { LocalizerType } from '../../types/Util';
+
+type PropsType = {
+ i18n: LocalizerType;
+ onClick: () => void;
+ style: CSSProperties;
+};
+
+export const CreateNewGroupButton: FunctionComponent = React.memo(
+ ({ i18n, onClick, style }) => {
+ const title = i18n('createNewGroupButton');
+
+ return (
+
+ );
+ }
+);
diff --git a/ts/components/leftPane/LeftPaneChooseGroupMembersHelper.tsx b/ts/components/leftPane/LeftPaneChooseGroupMembersHelper.tsx
new file mode 100644
index 000000000..43e8dadef
--- /dev/null
+++ b/ts/components/leftPane/LeftPaneChooseGroupMembersHelper.tsx
@@ -0,0 +1,304 @@
+// Copyright 2021 Signal Messenger, LLC
+// SPDX-License-Identifier: AGPL-3.0-only
+
+import React, { ReactChild, ChangeEvent } from 'react';
+
+import { LeftPaneHelper } from './LeftPaneHelper';
+import { Row, RowType } from '../ConversationList';
+import { ConversationType } from '../../state/ducks/conversations';
+import { ContactCheckboxDisabledReason } from '../conversationList/ContactCheckbox';
+import { ContactPills } from '../ContactPills';
+import { ContactPill } from '../ContactPill';
+import { Alert } from '../Alert';
+import { Button } from '../Button';
+import { LocalizerType } from '../../types/Util';
+import {
+ getGroupSizeRecommendedLimit,
+ getGroupSizeHardLimit,
+} from '../../groups/limits';
+
+export type LeftPaneChooseGroupMembersPropsType = {
+ candidateContacts: ReadonlyArray;
+ cantAddContactForModal: undefined | ConversationType;
+ isShowingRecommendedGroupSizeModal: boolean;
+ isShowingMaximumGroupSizeModal: boolean;
+ searchTerm: string;
+ selectedContacts: Array;
+};
+
+/* eslint-disable class-methods-use-this */
+
+export class LeftPaneChooseGroupMembersHelper extends LeftPaneHelper<
+ LeftPaneChooseGroupMembersPropsType
+> {
+ private readonly candidateContacts: ReadonlyArray;
+
+ private readonly cantAddContactForModal:
+ | undefined
+ | Readonly<{ title: string }>;
+
+ private readonly isShowingMaximumGroupSizeModal: boolean;
+
+ private readonly isShowingRecommendedGroupSizeModal: boolean;
+
+ private readonly searchTerm: string;
+
+ private readonly selectedContacts: Array;
+
+ private readonly selectedConversationIdsSet: Set;
+
+ constructor({
+ candidateContacts,
+ cantAddContactForModal,
+ isShowingMaximumGroupSizeModal,
+ isShowingRecommendedGroupSizeModal,
+ searchTerm,
+ selectedContacts,
+ }: Readonly) {
+ super();
+
+ this.candidateContacts = candidateContacts;
+ this.cantAddContactForModal = cantAddContactForModal;
+ this.isShowingMaximumGroupSizeModal = isShowingMaximumGroupSizeModal;
+ this.isShowingRecommendedGroupSizeModal = isShowingRecommendedGroupSizeModal;
+ this.searchTerm = searchTerm;
+ this.selectedContacts = selectedContacts;
+
+ this.selectedConversationIdsSet = new Set(
+ selectedContacts.map(contact => contact.id)
+ );
+ }
+
+ getHeaderContents({
+ i18n,
+ startComposing,
+ }: Readonly<{
+ i18n: LocalizerType;
+ startComposing: () => void;
+ }>): ReactChild {
+ const backButtonLabel = i18n('chooseGroupMembers__back-button');
+
+ return (
+
+
+
+ {i18n('chooseGroupMembers__title')}
+
+
+
+
+
+ {Boolean(this.selectedContacts.length) && (
+
+ {this.selectedContacts.map(contact => (
+
+ ))}
+
+ )}
+
+ {this.getRowCount() ? null : (
+
+ {i18n('newConversationNoContacts')}
+
+ )}
+
+ {modalDetails && (
+
+ )}
+
+ );
+ }
+
+ getFooterContents({
+ i18n,
+ startSettingGroupMetadata,
+ }: Readonly<{
+ i18n: LocalizerType;
+ startSettingGroupMetadata: () => void;
+ }>): ReactChild {
+ return (
+
+ );
+ }
+
+ getRowCount(): number {
+ if (!this.candidateContacts.length) {
+ return 0;
+ }
+ return this.candidateContacts.length + 2;
+ }
+
+ getRow(rowIndex: number): undefined | Row {
+ if (!this.candidateContacts.length) {
+ return undefined;
+ }
+
+ if (rowIndex === 0) {
+ return {
+ type: RowType.Header,
+ i18nKey: 'contactsHeader',
+ };
+ }
+
+ // This puts a blank row for the footer.
+ if (rowIndex === this.candidateContacts.length + 1) {
+ return { type: RowType.Blank };
+ }
+
+ const contact = this.candidateContacts[rowIndex - 1];
+ if (!contact) {
+ return undefined;
+ }
+
+ const isChecked = this.selectedConversationIdsSet.has(contact.id);
+
+ let disabledReason: undefined | ContactCheckboxDisabledReason;
+ if (!isChecked) {
+ if (this.hasSelectedMaximumNumberOfContacts()) {
+ disabledReason = ContactCheckboxDisabledReason.MaximumContactsSelected;
+ } else if (!contact.isGroupV2Capable) {
+ disabledReason = ContactCheckboxDisabledReason.NotCapable;
+ }
+ }
+
+ return {
+ type: RowType.ContactCheckbox,
+ contact,
+ isChecked,
+ disabledReason,
+ };
+ }
+
+ // This is deliberately unimplemented because these keyboard shortcuts shouldn't work in
+ // the composer. The same is true for the "in direction" function below.
+ getConversationAndMessageAtIndex(
+ ..._args: ReadonlyArray
+ ): undefined {
+ return undefined;
+ }
+
+ getConversationAndMessageInDirection(
+ ..._args: ReadonlyArray
+ ): undefined {
+ return undefined;
+ }
+
+ shouldRecomputeRowHeights(_old: unknown): boolean {
+ return false;
+ }
+
+ private hasSelectedMaximumNumberOfContacts(): boolean {
+ return this.selectedContacts.length >= this.getMaximumNumberOfContacts();
+ }
+
+ private hasExceededMaximumNumberOfContacts(): boolean {
+ // It should be impossible to reach this state. This is here as a failsafe.
+ return this.selectedContacts.length > this.getMaximumNumberOfContacts();
+ }
+
+ private getRecommendedMaximumNumberOfContacts(): number {
+ return getGroupSizeRecommendedLimit(151) - 1;
+ }
+
+ private getMaximumNumberOfContacts(): number {
+ return getGroupSizeHardLimit(1001) - 1;
+ }
+}
+
+function focusRef(el: HTMLElement | null) {
+ if (el) {
+ el.focus();
+ }
+}
diff --git a/ts/components/leftPane/LeftPaneComposeHelper.tsx b/ts/components/leftPane/LeftPaneComposeHelper.tsx
index 5800c8101..f232d65e0 100644
--- a/ts/components/leftPane/LeftPaneComposeHelper.tsx
+++ b/ts/components/leftPane/LeftPaneComposeHelper.tsx
@@ -12,6 +12,9 @@ import {
instance as phoneNumberInstance,
PhoneNumberFormat,
} from '../../util/libphonenumberInstance';
+import { assert } from '../../util/assert';
+import { missingCaseError } from '../../util/missingCaseError';
+import { isStorageWriteFeatureEnabled } from '../../storage/isFeatureEnabled';
export type LeftPaneComposePropsType = {
composeContacts: ReadonlyArray;
@@ -19,6 +22,12 @@ export type LeftPaneComposePropsType = {
searchTerm: string;
};
+enum TopButton {
+ None,
+ CreateNewGroup,
+ StartNewConversation,
+}
+
/* eslint-disable class-methods-use-this */
export class LeftPaneComposeHelper extends LeftPaneHelper<
@@ -98,24 +107,53 @@ export class LeftPaneComposeHelper extends LeftPaneHelper<
}
getRowCount(): number {
- return this.composeContacts.length + (this.phoneNumber ? 1 : 0);
+ let result = this.composeContacts.length;
+ if (this.hasTopButton()) {
+ result += 1;
+ }
+ if (this.hasContactsHeader()) {
+ result += 1;
+ }
+ return result;
}
getRow(rowIndex: number): undefined | Row {
- let contactIndex = rowIndex;
-
- if (this.phoneNumber) {
- if (rowIndex === 0) {
- return {
- type: RowType.StartNewConversation,
- phoneNumber: phoneNumberInstance.format(
+ if (rowIndex === 0) {
+ const topButton = this.getTopButton();
+ switch (topButton) {
+ case TopButton.None:
+ break;
+ case TopButton.StartNewConversation:
+ assert(
this.phoneNumber,
- PhoneNumberFormat.E164
- ),
- };
+ 'LeftPaneComposeHelper: we should have a phone number if the top button is "Start new conversation"'
+ );
+ return {
+ type: RowType.StartNewConversation,
+ phoneNumber: phoneNumberInstance.format(
+ this.phoneNumber,
+ PhoneNumberFormat.E164
+ ),
+ };
+ case TopButton.CreateNewGroup:
+ return { type: RowType.CreateNewGroup };
+ default:
+ throw missingCaseError(topButton);
}
+ }
- contactIndex -= 1;
+ if (rowIndex === 1 && this.hasContactsHeader()) {
+ return {
+ type: RowType.Header,
+ i18nKey: 'contactsHeader',
+ };
+ }
+
+ let contactIndex: number;
+ if (this.hasTopButton()) {
+ contactIndex = rowIndex - 2;
+ } else {
+ contactIndex = rowIndex;
}
const contact = this.composeContacts[contactIndex];
@@ -141,8 +179,29 @@ export class LeftPaneComposeHelper extends LeftPaneHelper<
return undefined;
}
- shouldRecomputeRowHeights(_old: unknown): boolean {
- return false;
+ shouldRecomputeRowHeights(old: Readonly): boolean {
+ return (
+ this.hasContactsHeader() !==
+ new LeftPaneComposeHelper(old).hasContactsHeader()
+ );
+ }
+
+ private getTopButton(): TopButton {
+ if (this.phoneNumber) {
+ return TopButton.StartNewConversation;
+ }
+ if (this.searchTerm || !isStorageWriteFeatureEnabled()) {
+ return TopButton.None;
+ }
+ return TopButton.CreateNewGroup;
+ }
+
+ private hasTopButton(): boolean {
+ return this.getTopButton() !== TopButton.None;
+ }
+
+ private hasContactsHeader(): boolean {
+ return this.hasTopButton() && Boolean(this.composeContacts.length);
}
}
diff --git a/ts/components/leftPane/LeftPaneHelper.tsx b/ts/components/leftPane/LeftPaneHelper.tsx
index b51e6ade9..fa438abc6 100644
--- a/ts/components/leftPane/LeftPaneHelper.tsx
+++ b/ts/components/leftPane/LeftPaneHelper.tsx
@@ -23,6 +23,8 @@ export abstract class LeftPaneHelper {
_: Readonly<{
i18n: LocalizerType;
showInbox: () => void;
+ startComposing: () => void;
+ showChooseGroupMembers: () => void;
}>
): null | ReactChild {
return null;
@@ -34,10 +36,28 @@ export abstract class LeftPaneHelper {
getPreRowsNode(
_: Readonly<{
+ clearGroupCreationError: () => void;
+ closeCantAddContactToGroupModal: () => unknown;
+ closeMaximumGroupSizeModal: () => unknown;
+ closeRecommendedGroupSizeModal: () => unknown;
+ createGroup: () => unknown;
i18n: LocalizerType;
+ setComposeGroupAvatar: (_: undefined | ArrayBuffer) => unknown;
+ setComposeGroupName: (_: string) => unknown;
onChangeComposeSearchTerm: (
event: ChangeEvent
) => unknown;
+ removeSelectedContact: (_: string) => unknown;
+ }>
+ ): null | ReactChild {
+ return null;
+ }
+
+ getFooterContents(
+ _: Readonly<{
+ i18n: LocalizerType;
+ startSettingGroupMetadata: () => void;
+ createGroup: () => unknown;
}>
): null | ReactChild {
return null;
diff --git a/ts/components/leftPane/LeftPaneSetGroupMetadataHelper.tsx b/ts/components/leftPane/LeftPaneSetGroupMetadataHelper.tsx
new file mode 100644
index 000000000..9b3740e50
--- /dev/null
+++ b/ts/components/leftPane/LeftPaneSetGroupMetadataHelper.tsx
@@ -0,0 +1,218 @@
+// Copyright 2021 Signal Messenger, LLC
+// SPDX-License-Identifier: AGPL-3.0-only
+
+import React, { ReactChild } from 'react';
+
+import { LeftPaneHelper } from './LeftPaneHelper';
+import { Row, RowType } from '../ConversationList';
+import { PropsDataType as ContactListItemPropsType } from '../conversationList/ContactListItem';
+import { LocalizerType } from '../../types/Util';
+import { AvatarInput } from '../AvatarInput';
+import { Alert } from '../Alert';
+import { Spinner } from '../Spinner';
+import { Button } from '../Button';
+
+export type LeftPaneSetGroupMetadataPropsType = {
+ groupAvatar: undefined | ArrayBuffer;
+ groupName: string;
+ hasError: boolean;
+ isCreating: boolean;
+ selectedContacts: ReadonlyArray;
+};
+
+/* eslint-disable class-methods-use-this */
+
+export class LeftPaneSetGroupMetadataHelper extends LeftPaneHelper<
+ LeftPaneSetGroupMetadataPropsType
+> {
+ private readonly groupAvatar: undefined | ArrayBuffer;
+
+ private readonly groupName: string;
+
+ private readonly hasError: boolean;
+
+ private readonly isCreating: boolean;
+
+ private readonly selectedContacts: ReadonlyArray;
+
+ constructor({
+ groupAvatar,
+ groupName,
+ isCreating,
+ hasError,
+ selectedContacts,
+ }: Readonly) {
+ super();
+
+ this.groupAvatar = groupAvatar;
+ this.groupName = groupName;
+ this.hasError = hasError;
+ this.isCreating = isCreating;
+ this.selectedContacts = selectedContacts;
+ }
+
+ getHeaderContents({
+ i18n,
+ showChooseGroupMembers,
+ }: Readonly<{
+ i18n: LocalizerType;
+ showChooseGroupMembers: () => void;
+ }>): ReactChild {
+ const backButtonLabel = i18n('setGroupMetadata__back-button');
+
+ return (
+
+
+
+ {i18n('setGroupMetadata__title')}
+
+