Moves various panels out to ConversationView react
This commit is contained in:
parent
15efbde23d
commit
e142cb47f5
32 changed files with 287 additions and 473 deletions
|
@ -92,7 +92,7 @@ const useProps = (overrideProps: Partial<Props> = {}): Props => ({
|
|||
blessedPacks: [],
|
||||
recentStickers: [],
|
||||
clearInstalledStickerPack: action('clearInstalledStickerPack'),
|
||||
onClickAddPack: action('onClickAddPack'),
|
||||
pushPanelForConversation: action('pushPanelForConversation'),
|
||||
sendStickerMessage: action('sendStickerMessage'),
|
||||
clearShowIntroduction: action('clearShowIntroduction'),
|
||||
showPickerHint: false,
|
||||
|
|
|
@ -42,6 +42,7 @@ import { AudioCapture } from './conversation/AudioCapture';
|
|||
import { CompositionUpload } from './CompositionUpload';
|
||||
import type {
|
||||
ConversationType,
|
||||
PushPanelForConversationActionType,
|
||||
ShowConversationType,
|
||||
} from '../state/ducks/conversations';
|
||||
import type { EmojiPickDataType } from './emoji/EmojiPicker';
|
||||
|
@ -61,6 +62,7 @@ import { MediaEditor } from './MediaEditor';
|
|||
import { isImageTypeSupported } from '../util/GoogleChrome';
|
||||
import * as KeyboardLayout from '../services/keyboardLayout';
|
||||
import { usePrevious } from '../hooks/usePrevious';
|
||||
import { PanelType } from '../types/Panels';
|
||||
|
||||
export type OwnProps = Readonly<{
|
||||
acceptedMessageRequest?: boolean;
|
||||
|
@ -162,15 +164,15 @@ export type Props = Pick<
|
|||
| 'blessedPacks'
|
||||
| 'recentStickers'
|
||||
| 'clearInstalledStickerPack'
|
||||
| 'onClickAddPack'
|
||||
| 'clearShowIntroduction'
|
||||
| 'showPickerHint'
|
||||
| 'clearShowPickerHint'
|
||||
> &
|
||||
MessageRequestActionsProps &
|
||||
Pick<GroupV1DisabledActionsPropsType, 'showGV2MigrationDialog'> &
|
||||
Pick<GroupV2PendingApprovalActionsPropsType, 'onCancelJoinRequest'> &
|
||||
OwnProps;
|
||||
Pick<GroupV2PendingApprovalActionsPropsType, 'onCancelJoinRequest'> & {
|
||||
pushPanelForConversation: PushPanelForConversationActionType;
|
||||
} & OwnProps;
|
||||
|
||||
export function CompositionArea({
|
||||
// Base props
|
||||
|
@ -182,6 +184,7 @@ export function CompositionArea({
|
|||
isDisabled,
|
||||
isSignalConversation,
|
||||
messageCompositionId,
|
||||
pushPanelForConversation,
|
||||
processAttachments,
|
||||
removeAttachment,
|
||||
sendMultiMediaMessage,
|
||||
|
@ -232,7 +235,6 @@ export function CompositionArea({
|
|||
blessedPacks,
|
||||
recentStickers,
|
||||
clearInstalledStickerPack,
|
||||
onClickAddPack,
|
||||
sendStickerMessage,
|
||||
clearShowIntroduction,
|
||||
showPickerHint,
|
||||
|
@ -459,7 +461,11 @@ export function CompositionArea({
|
|||
blessedPacks={blessedPacks}
|
||||
recentStickers={recentStickers}
|
||||
clearInstalledStickerPack={clearInstalledStickerPack}
|
||||
onClickAddPack={onClickAddPack}
|
||||
onClickAddPack={() =>
|
||||
pushPanelForConversation(conversationId, {
|
||||
type: PanelType.StickerManager,
|
||||
})
|
||||
}
|
||||
onPickSticker={(packId, stickerId) =>
|
||||
sendStickerMessage(conversationId, { packId, stickerId })
|
||||
}
|
||||
|
|
|
@ -56,16 +56,15 @@ const MESSAGE_DEFAULT_PROPS = {
|
|||
markAttachmentAsCorrupted: shouldNeverBeCalled,
|
||||
markViewed: shouldNeverBeCalled,
|
||||
messageExpanded: shouldNeverBeCalled,
|
||||
// Called when clicking mention, but shouldn't do anything.
|
||||
showConversation: noop,
|
||||
openGiftBadge: shouldNeverBeCalled,
|
||||
openLink: shouldNeverBeCalled,
|
||||
previews: [],
|
||||
pushPanelForConversation: shouldNeverBeCalled,
|
||||
renderAudioAttachment: () => <div />,
|
||||
saveAttachment: shouldNeverBeCalled,
|
||||
scrollToQuotedMessage: shouldNeverBeCalled,
|
||||
showContactDetail: shouldNeverBeCalled,
|
||||
showContactModal: shouldNeverBeCalled,
|
||||
showConversation: noop,
|
||||
showExpiredIncomingTapToViewToast: shouldNeverBeCalled,
|
||||
showExpiredOutgoingTapToViewToast: shouldNeverBeCalled,
|
||||
showLightbox: shouldNeverBeCalled,
|
||||
|
|
|
@ -49,12 +49,12 @@ const commonProps = {
|
|||
),
|
||||
|
||||
onShowAllMedia: action('onShowAllMedia'),
|
||||
onShowGroupMembers: action('onShowGroupMembers'),
|
||||
onGoBack: action('onGoBack'),
|
||||
|
||||
onArchive: action('onArchive'),
|
||||
onMarkUnread: action('onMarkUnread'),
|
||||
onMoveToInbox: action('onMoveToInbox'),
|
||||
pushPanelForConversation: action('pushPanelForConversation'),
|
||||
setMuteExpiration: action('onSetMuteNotifications'),
|
||||
setPinned: action('setPinned'),
|
||||
viewUserStories: action('viewUserStories'),
|
||||
|
|
|
@ -18,7 +18,10 @@ import { Avatar, AvatarSize } from '../Avatar';
|
|||
import { InContactsIcon } from '../InContactsIcon';
|
||||
|
||||
import type { LocalizerType, ThemeType } from '../../types/Util';
|
||||
import type { ConversationType } from '../../state/ducks/conversations';
|
||||
import type {
|
||||
ConversationType,
|
||||
PushPanelForConversationActionType,
|
||||
} from '../../state/ducks/conversations';
|
||||
import type { BadgeType } from '../../badges/types';
|
||||
import type { HasStories } from '../../types/Stories';
|
||||
import type { ViewUserStoriesActionCreatorType } from '../../state/ducks/stories';
|
||||
|
@ -34,6 +37,7 @@ import {
|
|||
useStartCallShortcuts,
|
||||
useKeyboardShortcuts,
|
||||
} from '../../hooks/useKeyboardShortcuts';
|
||||
import { PanelType } from '../../types/Panels';
|
||||
|
||||
export enum OutgoingCallButtonStyle {
|
||||
None,
|
||||
|
@ -90,7 +94,7 @@ export type PropsActionsType = {
|
|||
onSearchInConversation: () => void;
|
||||
onShowAllMedia: () => void;
|
||||
onShowConversationDetails: () => void;
|
||||
onShowGroupMembers: () => void;
|
||||
pushPanelForConversation: PushPanelForConversationActionType;
|
||||
setDisappearingMessages: (
|
||||
conversationId: string,
|
||||
seconds: DurationInSeconds
|
||||
|
@ -349,7 +353,7 @@ export class ConversationHeader extends React.Component<PropsType, StateType> {
|
|||
onMoveToInbox,
|
||||
onShowAllMedia,
|
||||
onShowConversationDetails,
|
||||
onShowGroupMembers,
|
||||
pushPanelForConversation,
|
||||
setDisappearingMessages,
|
||||
setMuteExpiration,
|
||||
setPinned,
|
||||
|
@ -478,7 +482,11 @@ export class ConversationHeader extends React.Component<PropsType, StateType> {
|
|||
</MenuItem>
|
||||
) : null}
|
||||
{isGroup && !hasGV2AdminEnabled ? (
|
||||
<MenuItem onClick={onShowGroupMembers}>
|
||||
<MenuItem
|
||||
onClick={() =>
|
||||
pushPanelForConversation(id, { type: PanelType.GroupV1Members })
|
||||
}
|
||||
>
|
||||
{i18n('showMembers')}
|
||||
</MenuItem>
|
||||
) : null}
|
||||
|
|
|
@ -14,6 +14,7 @@ import type {
|
|||
ConversationType,
|
||||
ConversationTypeType,
|
||||
InteractionModeType,
|
||||
PushPanelForConversationActionType,
|
||||
SaveAttachmentActionCreatorType,
|
||||
ShowConversationType,
|
||||
} from '../../state/ducks/conversations';
|
||||
|
@ -89,6 +90,7 @@ import { PaymentEventKind } from '../../types/Payment';
|
|||
import type { AnyPaymentEvent } from '../../types/Payment';
|
||||
import { Emojify } from './Emojify';
|
||||
import { getPaymentEventDescription } from '../../messages/helpers';
|
||||
import { PanelType } from '../../types/Panels';
|
||||
|
||||
const GUESS_METADATA_WIDTH_TIMESTAMP_SIZE = 10;
|
||||
const GUESS_METADATA_WIDTH_EXPIRE_TIMER_SIZE = 18;
|
||||
|
@ -302,13 +304,7 @@ export type PropsActions = {
|
|||
startConversation: (e164: string, uuid: UUIDStringType) => void;
|
||||
showConversation: ShowConversationType;
|
||||
openGiftBadge: (messageId: string) => void;
|
||||
showContactDetail: (options: {
|
||||
contact: EmbeddedContactType;
|
||||
signalAccount?: {
|
||||
phoneNumber: string;
|
||||
uuid: UUIDStringType;
|
||||
};
|
||||
}) => void;
|
||||
pushPanelForConversation: PushPanelForConversationActionType;
|
||||
showContactModal: (contactId: string, conversationId?: string) => void;
|
||||
|
||||
kickOffAttachmentDownload: (options: {
|
||||
|
@ -1566,10 +1562,11 @@ export class Message extends React.PureComponent<Props, State> {
|
|||
public renderEmbeddedContact(): JSX.Element | null {
|
||||
const {
|
||||
contact,
|
||||
conversationId,
|
||||
conversationType,
|
||||
direction,
|
||||
i18n,
|
||||
showContactDetail,
|
||||
pushPanelForConversation,
|
||||
text,
|
||||
} = this.props;
|
||||
if (!contact) {
|
||||
|
@ -1601,9 +1598,12 @@ export class Message extends React.PureComponent<Props, State> {
|
|||
}
|
||||
: undefined;
|
||||
|
||||
showContactDetail({
|
||||
contact,
|
||||
signalAccount,
|
||||
pushPanelForConversation(conversationId, {
|
||||
type: PanelType.ContactDetails,
|
||||
args: {
|
||||
contact,
|
||||
signalAccount,
|
||||
},
|
||||
});
|
||||
}}
|
||||
withContentAbove={withContentAbove}
|
||||
|
@ -2238,6 +2238,7 @@ export class Message extends React.PureComponent<Props, State> {
|
|||
const {
|
||||
attachments,
|
||||
contact,
|
||||
conversationId,
|
||||
showLightboxForViewOnceMedia,
|
||||
direction,
|
||||
giftBadge,
|
||||
|
@ -2247,7 +2248,7 @@ export class Message extends React.PureComponent<Props, State> {
|
|||
kickOffAttachmentDownload,
|
||||
startConversation,
|
||||
openGiftBadge,
|
||||
showContactDetail,
|
||||
pushPanelForConversation,
|
||||
showLightbox,
|
||||
showExpiredIncomingTapToViewToast,
|
||||
showExpiredOutgoingTapToViewToast,
|
||||
|
@ -2374,7 +2375,13 @@ export class Message extends React.PureComponent<Props, State> {
|
|||
uuid: contact.uuid,
|
||||
}
|
||||
: undefined;
|
||||
showContactDetail({ contact, signalAccount });
|
||||
pushPanelForConversation(conversationId, {
|
||||
type: PanelType.ContactDetails,
|
||||
args: {
|
||||
contact,
|
||||
signalAccount,
|
||||
},
|
||||
});
|
||||
|
||||
event.preventDefault();
|
||||
event.stopPropagation();
|
||||
|
|
|
@ -83,7 +83,7 @@ const createProps = (overrideProps: Partial<Props> = {}): Props => ({
|
|||
openLink: action('openLink'),
|
||||
renderAudioAttachment: () => <div>*AudioAttachment*</div>,
|
||||
saveAttachment: action('saveAttachment'),
|
||||
showContactDetail: action('showContactDetail'),
|
||||
pushPanelForConversation: action('pushPanelForConversation'),
|
||||
showContactModal: action('showContactModal'),
|
||||
showExpiredIncomingTapToViewToast: action(
|
||||
'showExpiredIncomingTapToViewToast'
|
||||
|
|
|
@ -84,7 +84,6 @@ export type PropsBackboneActions = Pick<
|
|||
| 'openGiftBadge'
|
||||
| 'openLink'
|
||||
| 'renderAudioAttachment'
|
||||
| 'showContactDetail'
|
||||
| 'showExpiredIncomingTapToViewToast'
|
||||
| 'showExpiredOutgoingTapToViewToast'
|
||||
| 'startConversation'
|
||||
|
@ -95,6 +94,7 @@ export type PropsReduxActions = Pick<
|
|||
| 'checkForAccount'
|
||||
| 'clearSelectedMessage'
|
||||
| 'doubleCheckMissingQuoteReference'
|
||||
| 'pushPanelForConversation'
|
||||
| 'saveAttachment'
|
||||
| 'showContactModal'
|
||||
| 'showConversation'
|
||||
|
@ -292,9 +292,9 @@ export class MessageDetail extends React.Component<Props> {
|
|||
markViewed,
|
||||
openGiftBadge,
|
||||
openLink,
|
||||
pushPanelForConversation,
|
||||
renderAudioAttachment,
|
||||
saveAttachment,
|
||||
showContactDetail,
|
||||
showContactModal,
|
||||
showConversation,
|
||||
showExpiredIncomingTapToViewToast,
|
||||
|
@ -339,6 +339,7 @@ export class MessageDetail extends React.Component<Props> {
|
|||
showConversation={showConversation}
|
||||
openGiftBadge={openGiftBadge}
|
||||
openLink={openLink}
|
||||
pushPanelForConversation={pushPanelForConversation}
|
||||
renderAudioAttachment={renderAudioAttachment}
|
||||
saveAttachment={saveAttachment}
|
||||
shouldCollapseAbove={false}
|
||||
|
@ -347,7 +348,6 @@ export class MessageDetail extends React.Component<Props> {
|
|||
scrollToQuotedMessage={() => {
|
||||
log.warn('MessageDetail: scrollToQuotedMessage called!');
|
||||
}}
|
||||
showContactDetail={showContactDetail}
|
||||
showContactModal={showContactModal}
|
||||
showExpiredIncomingTapToViewToast={
|
||||
showExpiredIncomingTapToViewToast
|
||||
|
|
|
@ -130,7 +130,7 @@ const defaultMessageProps: TimelineMessagesProps = {
|
|||
shouldCollapseAbove: false,
|
||||
shouldCollapseBelow: false,
|
||||
shouldHideMetadata: false,
|
||||
showContactDetail: action('default--showContactDetail'),
|
||||
pushPanelForConversation: action('default--pushPanelForConversation'),
|
||||
showContactModal: action('default--showContactModal'),
|
||||
showExpiredIncomingTapToViewToast: action(
|
||||
'showExpiredIncomingTapToViewToast'
|
||||
|
|
|
@ -283,7 +283,7 @@ const actions = () => ({
|
|||
deleteMessageForEveryone: action('deleteMessageForEveryone'),
|
||||
showMessageDetail: action('showMessageDetail'),
|
||||
saveAttachment: action('saveAttachment'),
|
||||
showContactDetail: action('showContactDetail'),
|
||||
pushPanelForConversation: action('pushPanelForConversation'),
|
||||
showContactModal: action('showContactModal'),
|
||||
showConversation: action('showConversation'),
|
||||
kickOffAttachmentDownload: action('kickOffAttachmentDownload'),
|
||||
|
|
|
@ -248,7 +248,6 @@ const getActions = createSelector(
|
|||
'showMessageDetail',
|
||||
'openGiftBadge',
|
||||
'setQuoteByMessageId',
|
||||
'showContactDetail',
|
||||
'showContactModal',
|
||||
'kickOffAttachmentDownload',
|
||||
'markAttachmentAsCorrupted',
|
||||
|
@ -257,6 +256,7 @@ const getActions = createSelector(
|
|||
'showLightbox',
|
||||
'showLightboxForViewOnceMedia',
|
||||
'openLink',
|
||||
'pushPanelForConversation',
|
||||
'scrollToQuotedMessage',
|
||||
'showExpiredIncomingTapToViewToast',
|
||||
'showExpiredOutgoingTapToViewToast',
|
||||
|
|
|
@ -81,7 +81,7 @@ const getDefaultProps = () => ({
|
|||
showConversation: action('showConversation'),
|
||||
openGiftBadge: action('openGiftBadge'),
|
||||
saveAttachment: action('saveAttachment'),
|
||||
showContactDetail: action('showContactDetail'),
|
||||
pushPanelForConversation: action('pushPanelForConversation'),
|
||||
showContactModal: action('showContactModal'),
|
||||
showLightbox: action('showLightbox'),
|
||||
toggleForwardMessageModal: action('toggleForwardMessageModal'),
|
||||
|
|
|
@ -308,7 +308,7 @@ const createProps = (overrideProps: Partial<Props> = {}): Props => ({
|
|||
shouldHideMetadata: isBoolean(overrideProps.shouldHideMetadata)
|
||||
? overrideProps.shouldHideMetadata
|
||||
: false,
|
||||
showContactDetail: action('showContactDetail'),
|
||||
pushPanelForConversation: action('pushPanelForConversation'),
|
||||
showContactModal: action('showContactModal'),
|
||||
showExpiredIncomingTapToViewToast: action(
|
||||
'showExpiredIncomingTapToViewToast'
|
||||
|
|
|
@ -81,13 +81,7 @@ const createProps = (
|
|||
showAllMedia: action('showAllMedia'),
|
||||
showContactModal: action('showContactModal'),
|
||||
pushPanelForConversation: action('pushPanelForConversation'),
|
||||
showGroupLinkManagement: action('showGroupLinkManagement'),
|
||||
showGroupV2Permissions: action('showGroupV2Permissions'),
|
||||
showConversationNotificationsSettings: action(
|
||||
'showConversationNotificationsSettings'
|
||||
),
|
||||
showConversation: action('showConversation'),
|
||||
showPendingInvites: action('showPendingInvites'),
|
||||
showLightboxWithMedia: action('showLightboxWithMedia'),
|
||||
updateGroupAttributes: async () => {
|
||||
action('updateGroupAttributes')();
|
||||
|
|
|
@ -82,10 +82,6 @@ export type StateProps = {
|
|||
pendingApprovalMemberships: ReadonlyArray<GroupV2RequestingMembership>;
|
||||
pendingMemberships: ReadonlyArray<GroupV2PendingMembership>;
|
||||
showAllMedia: () => void;
|
||||
showGroupLinkManagement: () => void;
|
||||
showGroupV2Permissions: () => void;
|
||||
showPendingInvites: () => void;
|
||||
showConversationNotificationsSettings: () => void;
|
||||
updateGroupAttributes: (
|
||||
_: Readonly<{
|
||||
avatar?: undefined | Uint8Array;
|
||||
|
@ -161,12 +157,8 @@ export function ConversationDetails({
|
|||
setMuteExpiration,
|
||||
showAllMedia,
|
||||
showContactModal,
|
||||
showConversationNotificationsSettings,
|
||||
showConversation,
|
||||
showGroupLinkManagement,
|
||||
showGroupV2Permissions,
|
||||
showLightboxWithMedia,
|
||||
showPendingInvites,
|
||||
theme,
|
||||
toggleSafetyNumberModal,
|
||||
toggleAddUserToAnotherGroupModal,
|
||||
|
@ -451,7 +443,11 @@ export function ConversationDetails({
|
|||
/>
|
||||
}
|
||||
label={i18n('ConversationDetails--notifications')}
|
||||
onClick={showConversationNotificationsSettings}
|
||||
onClick={() =>
|
||||
pushPanelForConversation(conversation.id, {
|
||||
type: PanelType.NotificationSettings,
|
||||
})
|
||||
}
|
||||
right={
|
||||
conversation.muteExpiresAt
|
||||
? getMutedUntilText(conversation.muteExpiresAt, i18n)
|
||||
|
@ -503,7 +499,11 @@ export function ConversationDetails({
|
|||
/>
|
||||
}
|
||||
label={i18n('ConversationDetails--group-link')}
|
||||
onClick={showGroupLinkManagement}
|
||||
onClick={() =>
|
||||
pushPanelForConversation(conversation.id, {
|
||||
type: PanelType.GroupLinkManagement,
|
||||
})
|
||||
}
|
||||
right={hasGroupLink ? i18n('on') : i18n('off')}
|
||||
/>
|
||||
) : null}
|
||||
|
@ -515,7 +515,11 @@ export function ConversationDetails({
|
|||
/>
|
||||
}
|
||||
label={i18n('ConversationDetails--requests-and-invites')}
|
||||
onClick={showPendingInvites}
|
||||
onClick={() =>
|
||||
pushPanelForConversation(conversation.id, {
|
||||
type: PanelType.GroupInvites,
|
||||
})
|
||||
}
|
||||
right={invitesCount}
|
||||
/>
|
||||
{isAdmin ? (
|
||||
|
@ -527,7 +531,11 @@ export function ConversationDetails({
|
|||
/>
|
||||
}
|
||||
label={i18n('permissions')}
|
||||
onClick={showGroupV2Permissions}
|
||||
onClick={() =>
|
||||
pushPanelForConversation(conversation.id, {
|
||||
type: PanelType.GroupPermissions,
|
||||
})
|
||||
}
|
||||
/>
|
||||
) : null}
|
||||
</PanelSection>
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue