Support for creating New Groups
This commit is contained in:
parent
1934120e46
commit
5de4babc0d
56 changed files with 6222 additions and 526 deletions
|
@ -26,18 +26,29 @@ import {
|
|||
LeftPaneComposeHelper,
|
||||
LeftPaneComposePropsType,
|
||||
} from './leftPane/LeftPaneComposeHelper';
|
||||
import {
|
||||
LeftPaneChooseGroupMembersHelper,
|
||||
LeftPaneChooseGroupMembersPropsType,
|
||||
} from './leftPane/LeftPaneChooseGroupMembersHelper';
|
||||
import {
|
||||
LeftPaneSetGroupMetadataHelper,
|
||||
LeftPaneSetGroupMetadataPropsType,
|
||||
} from './leftPane/LeftPaneSetGroupMetadataHelper';
|
||||
|
||||
import * as OS from '../OS';
|
||||
import { LocalizerType } from '../types/Util';
|
||||
import { missingCaseError } from '../util/missingCaseError';
|
||||
|
||||
import { ConversationList } from './ConversationList';
|
||||
import { ContactCheckboxDisabledReason } from './conversationList/ContactCheckbox';
|
||||
|
||||
export enum LeftPaneMode {
|
||||
Inbox,
|
||||
Search,
|
||||
Archive,
|
||||
Compose,
|
||||
ChooseGroupMembers,
|
||||
SetGroupMetadata,
|
||||
}
|
||||
|
||||
export type PropsType = {
|
||||
|
@ -56,23 +67,40 @@ export type PropsType = {
|
|||
} & LeftPaneArchivePropsType)
|
||||
| ({
|
||||
mode: LeftPaneMode.Compose;
|
||||
} & LeftPaneComposePropsType);
|
||||
} & LeftPaneComposePropsType)
|
||||
| ({
|
||||
mode: LeftPaneMode.ChooseGroupMembers;
|
||||
} & LeftPaneChooseGroupMembersPropsType)
|
||||
| ({
|
||||
mode: LeftPaneMode.SetGroupMetadata;
|
||||
} & LeftPaneSetGroupMetadataPropsType);
|
||||
i18n: LocalizerType;
|
||||
selectedConversationId: undefined | string;
|
||||
selectedMessageId: undefined | string;
|
||||
regionCode: string;
|
||||
|
||||
// Action Creators
|
||||
cantAddContactToGroup: (conversationId: string) => void;
|
||||
clearGroupCreationError: () => void;
|
||||
closeCantAddContactToGroupModal: () => void;
|
||||
closeMaximumGroupSizeModal: () => void;
|
||||
closeRecommendedGroupSizeModal: () => void;
|
||||
createGroup: () => void;
|
||||
startNewConversationFromPhoneNumber: (e164: string) => void;
|
||||
openConversationInternal: (_: {
|
||||
conversationId: string;
|
||||
messageId?: string;
|
||||
switchToAssociatedView?: boolean;
|
||||
}) => void;
|
||||
setComposeSearchTerm: (composeSearchTerm: string) => void;
|
||||
setComposeGroupAvatar: (_: undefined | ArrayBuffer) => void;
|
||||
setComposeGroupName: (_: string) => void;
|
||||
showArchivedConversations: () => void;
|
||||
showInbox: () => void;
|
||||
startComposing: () => void;
|
||||
setComposeSearchTerm: (composeSearchTerm: string) => void;
|
||||
showChooseGroupMembers: () => void;
|
||||
startSettingGroupMetadata: () => void;
|
||||
toggleConversationInChooseMembers: (conversationId: string) => void;
|
||||
|
||||
// Render Props
|
||||
renderExpiredBuildDialog: () => JSX.Element;
|
||||
|
@ -84,6 +112,12 @@ export type PropsType = {
|
|||
};
|
||||
|
||||
export const LeftPane: React.FC<PropsType> = ({
|
||||
cantAddContactToGroup,
|
||||
clearGroupCreationError,
|
||||
closeCantAddContactToGroupModal,
|
||||
closeMaximumGroupSizeModal,
|
||||
closeRecommendedGroupSizeModal,
|
||||
createGroup,
|
||||
i18n,
|
||||
modeSpecificProps,
|
||||
openConversationInternal,
|
||||
|
@ -96,10 +130,15 @@ export const LeftPane: React.FC<PropsType> = ({
|
|||
selectedConversationId,
|
||||
selectedMessageId,
|
||||
setComposeSearchTerm,
|
||||
setComposeGroupAvatar,
|
||||
setComposeGroupName,
|
||||
showArchivedConversations,
|
||||
showInbox,
|
||||
startComposing,
|
||||
showChooseGroupMembers,
|
||||
startNewConversationFromPhoneNumber,
|
||||
startSettingGroupMetadata,
|
||||
toggleConversationInChooseMembers,
|
||||
}) => {
|
||||
const previousModeSpecificPropsRef = useRef(modeSpecificProps);
|
||||
const previousModeSpecificProps = previousModeSpecificPropsRef.current;
|
||||
|
@ -162,6 +201,32 @@ export const LeftPane: React.FC<PropsType> = ({
|
|||
helper = composeHelper;
|
||||
break;
|
||||
}
|
||||
case LeftPaneMode.ChooseGroupMembers: {
|
||||
const chooseGroupMembersHelper = new LeftPaneChooseGroupMembersHelper(
|
||||
modeSpecificProps
|
||||
);
|
||||
shouldRecomputeRowHeights =
|
||||
previousModeSpecificProps.mode === modeSpecificProps.mode
|
||||
? chooseGroupMembersHelper.shouldRecomputeRowHeights(
|
||||
previousModeSpecificProps
|
||||
)
|
||||
: true;
|
||||
helper = chooseGroupMembersHelper;
|
||||
break;
|
||||
}
|
||||
case LeftPaneMode.SetGroupMetadata: {
|
||||
const setGroupMetadataHelper = new LeftPaneSetGroupMetadataHelper(
|
||||
modeSpecificProps
|
||||
);
|
||||
shouldRecomputeRowHeights =
|
||||
previousModeSpecificProps.mode === modeSpecificProps.mode
|
||||
? setGroupMetadataHelper.shouldRecomputeRowHeights(
|
||||
previousModeSpecificProps
|
||||
)
|
||||
: true;
|
||||
helper = setGroupMetadataHelper;
|
||||
break;
|
||||
}
|
||||
default:
|
||||
throw missingCaseError(modeSpecificProps);
|
||||
}
|
||||
|
@ -245,11 +310,25 @@ export const LeftPane: React.FC<PropsType> = ({
|
|||
]);
|
||||
|
||||
const preRowsNode = helper.getPreRowsNode({
|
||||
clearGroupCreationError,
|
||||
closeCantAddContactToGroupModal,
|
||||
closeMaximumGroupSizeModal,
|
||||
closeRecommendedGroupSizeModal,
|
||||
createGroup,
|
||||
i18n,
|
||||
setComposeGroupAvatar,
|
||||
setComposeGroupName,
|
||||
onChangeComposeSearchTerm: event => {
|
||||
setComposeSearchTerm(event.target.value);
|
||||
},
|
||||
removeSelectedContact: toggleConversationInChooseMembers,
|
||||
});
|
||||
const footerContents = helper.getFooterContents({
|
||||
createGroup,
|
||||
i18n,
|
||||
startSettingGroupMetadata,
|
||||
});
|
||||
|
||||
const getRow = useMemo(() => helper.getRow.bind(helper), [helper]);
|
||||
|
||||
// We ensure that the listKey differs between some modes (e.g. inbox/archived), ensuring
|
||||
|
@ -261,7 +340,12 @@ export const LeftPane: React.FC<PropsType> = ({
|
|||
return (
|
||||
<div className="module-left-pane">
|
||||
<div className="module-left-pane__header">
|
||||
{helper.getHeaderContents({ i18n, showInbox }) || renderMainHeader()}
|
||||
{helper.getHeaderContents({
|
||||
i18n,
|
||||
showInbox,
|
||||
startComposing,
|
||||
showChooseGroupMembers,
|
||||
}) || renderMainHeader()}
|
||||
</div>
|
||||
{renderExpiredBuildDialog()}
|
||||
{renderRelinkDialog()}
|
||||
|
@ -288,6 +372,24 @@ export const LeftPane: React.FC<PropsType> = ({
|
|||
getRow={getRow}
|
||||
i18n={i18n}
|
||||
onClickArchiveButton={showArchivedConversations}
|
||||
onClickContactCheckbox={(
|
||||
conversationId: string,
|
||||
disabledReason: undefined | ContactCheckboxDisabledReason
|
||||
) => {
|
||||
switch (disabledReason) {
|
||||
case undefined:
|
||||
toggleConversationInChooseMembers(conversationId);
|
||||
break;
|
||||
case ContactCheckboxDisabledReason.MaximumContactsSelected:
|
||||
// This is a no-op.
|
||||
break;
|
||||
case ContactCheckboxDisabledReason.NotCapable:
|
||||
cantAddContactToGroup(conversationId);
|
||||
break;
|
||||
default:
|
||||
throw missingCaseError(disabledReason);
|
||||
}
|
||||
}}
|
||||
onSelectConversation={(
|
||||
conversationId: string,
|
||||
messageId?: string
|
||||
|
@ -304,6 +406,7 @@ export const LeftPane: React.FC<PropsType> = ({
|
|||
selectedConversationId
|
||||
)}
|
||||
shouldRecomputeRowHeights={shouldRecomputeRowHeights}
|
||||
showChooseGroupMembers={showChooseGroupMembers}
|
||||
startNewConversationFromPhoneNumber={
|
||||
startNewConversationFromPhoneNumber
|
||||
}
|
||||
|
@ -313,6 +416,9 @@ export const LeftPane: React.FC<PropsType> = ({
|
|||
</div>
|
||||
)}
|
||||
</Measure>
|
||||
{footerContents && (
|
||||
<div className="module-left-pane__footer">{footerContents}</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue