Moves message details into React pane land
This commit is contained in:
parent
3def746014
commit
a80c6d89a8
20 changed files with 501 additions and 558 deletions
|
@ -462,7 +462,7 @@ export function CompositionArea({
|
|||
recentStickers={recentStickers}
|
||||
clearInstalledStickerPack={clearInstalledStickerPack}
|
||||
onClickAddPack={() =>
|
||||
pushPanelForConversation(conversationId, {
|
||||
pushPanelForConversation({
|
||||
type: PanelType.StickerManager,
|
||||
})
|
||||
}
|
||||
|
|
|
@ -154,12 +154,12 @@ export class ConversationHeader extends React.Component<PropsType, StateType> {
|
|||
}
|
||||
|
||||
private renderBackButton(): ReactNode {
|
||||
const { i18n, id, popPanelForConversation, showBackButton } = this.props;
|
||||
const { i18n, popPanelForConversation, showBackButton } = this.props;
|
||||
|
||||
return (
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => popPanelForConversation(id)}
|
||||
onClick={popPanelForConversation}
|
||||
className={classNames(
|
||||
'module-ConversationHeader__back-icon',
|
||||
showBackButton ? 'module-ConversationHeader__back-icon--show' : null
|
||||
|
@ -474,7 +474,7 @@ export class ConversationHeader extends React.Component<PropsType, StateType> {
|
|||
{!isGroup || hasGV2AdminEnabled ? (
|
||||
<MenuItem
|
||||
onClick={() =>
|
||||
pushPanelForConversation(id, {
|
||||
pushPanelForConversation({
|
||||
type: PanelType.ConversationDetails,
|
||||
})
|
||||
}
|
||||
|
@ -487,16 +487,14 @@ export class ConversationHeader extends React.Component<PropsType, StateType> {
|
|||
{isGroup && !hasGV2AdminEnabled ? (
|
||||
<MenuItem
|
||||
onClick={() =>
|
||||
pushPanelForConversation(id, { type: PanelType.GroupV1Members })
|
||||
pushPanelForConversation({ type: PanelType.GroupV1Members })
|
||||
}
|
||||
>
|
||||
{i18n('showMembers')}
|
||||
</MenuItem>
|
||||
) : null}
|
||||
<MenuItem
|
||||
onClick={() =>
|
||||
pushPanelForConversation(id, { type: PanelType.AllMedia })
|
||||
}
|
||||
onClick={() => pushPanelForConversation({ type: PanelType.AllMedia })}
|
||||
>
|
||||
{i18n('viewRecentMedia')}
|
||||
</MenuItem>
|
||||
|
@ -565,13 +563,8 @@ export class ConversationHeader extends React.Component<PropsType, StateType> {
|
|||
}
|
||||
|
||||
private renderHeader(): ReactNode {
|
||||
const {
|
||||
conversationTitle,
|
||||
id,
|
||||
groupVersion,
|
||||
pushPanelForConversation,
|
||||
type,
|
||||
} = this.props;
|
||||
const { conversationTitle, groupVersion, pushPanelForConversation, type } =
|
||||
this.props;
|
||||
|
||||
if (conversationTitle !== undefined) {
|
||||
return (
|
||||
|
@ -589,14 +582,14 @@ export class ConversationHeader extends React.Component<PropsType, StateType> {
|
|||
switch (type) {
|
||||
case 'direct':
|
||||
onClick = () => {
|
||||
pushPanelForConversation(id, { type: PanelType.ConversationDetails });
|
||||
pushPanelForConversation({ type: PanelType.ConversationDetails });
|
||||
};
|
||||
break;
|
||||
case 'group': {
|
||||
const hasGV2AdminEnabled = groupVersion === 2;
|
||||
onClick = hasGV2AdminEnabled
|
||||
? () => {
|
||||
pushPanelForConversation(id, {
|
||||
pushPanelForConversation({
|
||||
type: PanelType.ConversationDetails,
|
||||
});
|
||||
}
|
||||
|
|
|
@ -167,6 +167,7 @@ export type AudioAttachmentProps = {
|
|||
id: string;
|
||||
conversationId: string;
|
||||
played: boolean;
|
||||
pushPanelForConversation: PushPanelForConversationActionType;
|
||||
status?: MessageStatusType;
|
||||
textPending?: boolean;
|
||||
timestamp: number;
|
||||
|
@ -750,27 +751,25 @@ export class Message extends React.PureComponent<Props, State> {
|
|||
}
|
||||
|
||||
const {
|
||||
conversationId,
|
||||
deletedForEveryone,
|
||||
direction,
|
||||
expirationLength,
|
||||
expirationTimestamp,
|
||||
i18n,
|
||||
id,
|
||||
isSticker,
|
||||
isTapToViewExpired,
|
||||
status,
|
||||
i18n,
|
||||
pushPanelForConversation,
|
||||
status,
|
||||
text,
|
||||
textAttachment,
|
||||
timestamp,
|
||||
id,
|
||||
} = this.props;
|
||||
|
||||
const isStickerLike = isSticker || this.canRenderStickerLikeEmoji();
|
||||
|
||||
return (
|
||||
<MessageMetadata
|
||||
conversationId={conversationId}
|
||||
deletedForEveryone={deletedForEveryone}
|
||||
direction={direction}
|
||||
expirationLength={expirationLength}
|
||||
|
@ -827,23 +826,24 @@ export class Message extends React.PureComponent<Props, State> {
|
|||
public renderAttachment(): JSX.Element | null {
|
||||
const {
|
||||
attachments,
|
||||
conversationId,
|
||||
direction,
|
||||
expirationLength,
|
||||
expirationTimestamp,
|
||||
i18n,
|
||||
id,
|
||||
conversationId,
|
||||
isSticker,
|
||||
kickOffAttachmentDownload,
|
||||
markAttachmentAsCorrupted,
|
||||
pushPanelForConversation,
|
||||
quote,
|
||||
readStatus,
|
||||
reducedMotion,
|
||||
renderAudioAttachment,
|
||||
renderingContext,
|
||||
showLightbox,
|
||||
shouldCollapseAbove,
|
||||
shouldCollapseBelow,
|
||||
showLightbox,
|
||||
status,
|
||||
text,
|
||||
textAttachment,
|
||||
|
@ -966,6 +966,7 @@ export class Message extends React.PureComponent<Props, State> {
|
|||
id,
|
||||
conversationId,
|
||||
played,
|
||||
pushPanelForConversation,
|
||||
status,
|
||||
textPending: textAttachment?.pending,
|
||||
timestamp,
|
||||
|
@ -1562,7 +1563,6 @@ export class Message extends React.PureComponent<Props, State> {
|
|||
public renderEmbeddedContact(): JSX.Element | null {
|
||||
const {
|
||||
contact,
|
||||
conversationId,
|
||||
conversationType,
|
||||
direction,
|
||||
i18n,
|
||||
|
@ -1598,7 +1598,7 @@ export class Message extends React.PureComponent<Props, State> {
|
|||
}
|
||||
: undefined;
|
||||
|
||||
pushPanelForConversation(conversationId, {
|
||||
pushPanelForConversation({
|
||||
type: PanelType.ContactDetails,
|
||||
args: {
|
||||
contact,
|
||||
|
@ -2243,7 +2243,6 @@ export class Message extends React.PureComponent<Props, State> {
|
|||
const {
|
||||
attachments,
|
||||
contact,
|
||||
conversationId,
|
||||
showLightboxForViewOnceMedia,
|
||||
direction,
|
||||
giftBadge,
|
||||
|
@ -2381,7 +2380,7 @@ export class Message extends React.PureComponent<Props, State> {
|
|||
uuid: contact.uuid,
|
||||
}
|
||||
: undefined;
|
||||
pushPanelForConversation(conversationId, {
|
||||
pushPanelForConversation({
|
||||
type: PanelType.ContactDetails,
|
||||
args: {
|
||||
contact,
|
||||
|
|
|
@ -9,6 +9,7 @@ import { animated, useSpring } from '@react-spring/web';
|
|||
|
||||
import type { LocalizerType } from '../../types/Util';
|
||||
import type { AttachmentType } from '../../types/Attachment';
|
||||
import type { PushPanelForConversationActionType } from '../../state/ducks/conversations';
|
||||
import { isDownloaded } from '../../types/Attachment';
|
||||
import type { DirectionType, MessageStatusType } from './Message';
|
||||
|
||||
|
@ -16,7 +17,6 @@ import type { ComputePeaksResult } from '../GlobalAudioContext';
|
|||
import { MessageMetadata } from './MessageMetadata';
|
||||
import * as log from '../../logging/log';
|
||||
import type { ActiveAudioPlayerStateType } from '../../state/ducks/audioPlayer';
|
||||
import type { PushPanelForConversationActionType } from '../../state/ducks/conversations';
|
||||
|
||||
export type OwnProps = Readonly<{
|
||||
active: ActiveAudioPlayerStateType | undefined;
|
||||
|
@ -592,7 +592,6 @@ export function MessageAudio(props: Props): JSX.Element {
|
|||
|
||||
{!withContentBelow && !collapseMetadata && (
|
||||
<MessageMetadata
|
||||
conversationId={conversationId}
|
||||
direction={direction}
|
||||
expirationLength={expirationLength}
|
||||
expirationTimestamp={expirationTimestamp}
|
||||
|
|
|
@ -8,14 +8,13 @@ import Measure from 'react-measure';
|
|||
|
||||
import type { LocalizerType } from '../../types/Util';
|
||||
import type { DirectionType, MessageStatusType } from './Message';
|
||||
import type { PushPanelForConversationActionType } from '../../state/ducks/conversations';
|
||||
import { ExpireTimer } from './ExpireTimer';
|
||||
import { MessageTimestamp } from './MessageTimestamp';
|
||||
import { Spinner } from '../Spinner';
|
||||
import type { PushPanelForConversationActionType } from '../../state/ducks/conversations';
|
||||
import { PanelType } from '../../types/Panels';
|
||||
import { Spinner } from '../Spinner';
|
||||
|
||||
type PropsType = {
|
||||
conversationId: string;
|
||||
deletedForEveryone?: boolean;
|
||||
direction: DirectionType;
|
||||
expirationLength?: number;
|
||||
|
@ -35,7 +34,6 @@ type PropsType = {
|
|||
};
|
||||
|
||||
export function MessageMetadata({
|
||||
conversationId,
|
||||
deletedForEveryone,
|
||||
direction,
|
||||
expirationLength,
|
||||
|
@ -80,7 +78,7 @@ export function MessageMetadata({
|
|||
event.stopPropagation();
|
||||
event.preventDefault();
|
||||
|
||||
pushPanelForConversation(conversationId, {
|
||||
pushPanelForConversation({
|
||||
type: PanelType.MessageDetails,
|
||||
args: { messageId: id },
|
||||
});
|
||||
|
|
|
@ -23,12 +23,12 @@ import type {
|
|||
PropsData as MessagePropsData,
|
||||
PropsHousekeeping,
|
||||
} from './Message';
|
||||
import type { PushPanelForConversationActionType } from '../../state/ducks/conversations';
|
||||
import { doesMessageBodyOverflow } from './MessageBodyReadMore';
|
||||
import type { Props as ReactionPickerProps } from './ReactionPicker';
|
||||
import { ConfirmationDialog } from '../ConfirmationDialog';
|
||||
import { useToggleReactionPicker } from '../../hooks/useKeyboardShortcuts';
|
||||
import { PanelType } from '../../types/Panels';
|
||||
import type { PushPanelForConversationActionType } from '../../state/ducks/conversations';
|
||||
|
||||
export type PropsData = {
|
||||
canDownload: boolean;
|
||||
|
@ -46,8 +46,8 @@ export type PropsActions = {
|
|||
messageId: string;
|
||||
}) => void;
|
||||
deleteMessageForEveryone: (id: string) => void;
|
||||
toggleForwardMessageModal: (id: string) => void;
|
||||
pushPanelForConversation: PushPanelForConversationActionType;
|
||||
toggleForwardMessageModal: (id: string) => void;
|
||||
reactToMessage: (
|
||||
id: string,
|
||||
{ emoji, remove }: { emoji: string; remove: boolean }
|
||||
|
@ -75,42 +75,42 @@ type Trigger = {
|
|||
*/
|
||||
export function TimelineMessage(props: Props): JSX.Element {
|
||||
const {
|
||||
i18n,
|
||||
id,
|
||||
author,
|
||||
attachments,
|
||||
author,
|
||||
canDeleteForEveryone,
|
||||
canDownload,
|
||||
canReact,
|
||||
canReply,
|
||||
canRetry,
|
||||
canDeleteForEveryone,
|
||||
canRetryDeleteForEveryone,
|
||||
contact,
|
||||
payment,
|
||||
conversationId,
|
||||
containerElementRef,
|
||||
containerWidthBreakpoint,
|
||||
deletedForEveryone,
|
||||
conversationId,
|
||||
deleteMessage,
|
||||
deleteMessageForEveryone,
|
||||
deletedForEveryone,
|
||||
direction,
|
||||
giftBadge,
|
||||
i18n,
|
||||
id,
|
||||
isSelected,
|
||||
isSticker,
|
||||
isTapToView,
|
||||
kickOffAttachmentDownload,
|
||||
payment,
|
||||
pushPanelForConversation,
|
||||
reactToMessage,
|
||||
setQuoteByMessageId,
|
||||
renderReactionPicker,
|
||||
renderEmojiPicker,
|
||||
retryMessageSend,
|
||||
renderReactionPicker,
|
||||
retryDeleteForEveryone,
|
||||
retryMessageSend,
|
||||
saveAttachment,
|
||||
selectedReaction,
|
||||
toggleForwardMessageModal,
|
||||
setQuoteByMessageId,
|
||||
text,
|
||||
timestamp,
|
||||
kickOffAttachmentDownload,
|
||||
saveAttachment,
|
||||
toggleForwardMessageModal,
|
||||
} = props;
|
||||
|
||||
const [reactionPickerRoot, setReactionPickerRoot] = useState<
|
||||
|
@ -410,7 +410,7 @@ export function TimelineMessage(props: Props): JSX.Element {
|
|||
canDeleteForEveryone ? () => setHasDOEConfirmation(true) : undefined
|
||||
}
|
||||
onMoreInfo={() =>
|
||||
pushPanelForConversation(conversationId, {
|
||||
pushPanelForConversation({
|
||||
type: PanelType.MessageDetails,
|
||||
args: { messageId: id },
|
||||
})
|
||||
|
|
|
@ -441,7 +441,7 @@ export function ConversationDetails({
|
|||
}
|
||||
label={i18n('showChatColorEditor')}
|
||||
onClick={() => {
|
||||
pushPanelForConversation(conversation.id, {
|
||||
pushPanelForConversation({
|
||||
type: PanelType.ChatColorEditor,
|
||||
});
|
||||
}}
|
||||
|
@ -464,7 +464,7 @@ export function ConversationDetails({
|
|||
}
|
||||
label={i18n('ConversationDetails--notifications')}
|
||||
onClick={() =>
|
||||
pushPanelForConversation(conversation.id, {
|
||||
pushPanelForConversation({
|
||||
type: PanelType.NotificationSettings,
|
||||
})
|
||||
}
|
||||
|
@ -520,7 +520,7 @@ export function ConversationDetails({
|
|||
}
|
||||
label={i18n('ConversationDetails--group-link')}
|
||||
onClick={() =>
|
||||
pushPanelForConversation(conversation.id, {
|
||||
pushPanelForConversation({
|
||||
type: PanelType.GroupLinkManagement,
|
||||
})
|
||||
}
|
||||
|
@ -536,7 +536,7 @@ export function ConversationDetails({
|
|||
}
|
||||
label={i18n('ConversationDetails--requests-and-invites')}
|
||||
onClick={() =>
|
||||
pushPanelForConversation(conversation.id, {
|
||||
pushPanelForConversation({
|
||||
type: PanelType.GroupInvites,
|
||||
})
|
||||
}
|
||||
|
@ -552,7 +552,7 @@ export function ConversationDetails({
|
|||
}
|
||||
label={i18n('permissions')}
|
||||
onClick={() =>
|
||||
pushPanelForConversation(conversation.id, {
|
||||
pushPanelForConversation({
|
||||
type: PanelType.GroupPermissions,
|
||||
})
|
||||
}
|
||||
|
@ -566,7 +566,7 @@ export function ConversationDetails({
|
|||
i18n={i18n}
|
||||
loadRecentMediaItems={loadRecentMediaItems}
|
||||
showAllMedia={() =>
|
||||
pushPanelForConversation(conversation.id, {
|
||||
pushPanelForConversation({
|
||||
type: PanelType.AllMedia,
|
||||
})
|
||||
}
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue