Refactor: Prepare Message function props for conversation scope
This commit is contained in:
Scott Nonnenberg
parent
7e58594038
commit
d342b23cbc
13 changed files with 300 additions and 256 deletions
|
|
@ -2,7 +2,7 @@ import React from 'react';
|
|||
|
||||
import {
|
||||
AddressType,
|
||||
Contact,
|
||||
ContactFormType,
|
||||
ContactType,
|
||||
Email,
|
||||
Phone,
|
||||
|
|
@ -19,7 +19,7 @@ import {
|
|||
import { LocalizerType } from '../../types/Util';
|
||||
|
||||
interface Props {
|
||||
contact: Contact;
|
||||
contact: ContactType;
|
||||
hasSignalAccount: boolean;
|
||||
i18n: LocalizerType;
|
||||
onSendMessage: () => void;
|
||||
|
|
@ -27,13 +27,13 @@ interface Props {
|
|||
|
||||
function getLabelForEmail(method: Email, i18n: LocalizerType): string {
|
||||
switch (method.type) {
|
||||
case ContactType.CUSTOM:
|
||||
case ContactFormType.CUSTOM:
|
||||
return method.label || i18n('email');
|
||||
case ContactType.HOME:
|
||||
case ContactFormType.HOME:
|
||||
return i18n('home');
|
||||
case ContactType.MOBILE:
|
||||
case ContactFormType.MOBILE:
|
||||
return i18n('mobile');
|
||||
case ContactType.WORK:
|
||||
case ContactFormType.WORK:
|
||||
return i18n('work');
|
||||
default:
|
||||
throw missingCaseError(method.type);
|
||||
|
|
@ -42,13 +42,13 @@ function getLabelForEmail(method: Email, i18n: LocalizerType): string {
|
|||
|
||||
function getLabelForPhone(method: Phone, i18n: LocalizerType): string {
|
||||
switch (method.type) {
|
||||
case ContactType.CUSTOM:
|
||||
case ContactFormType.CUSTOM:
|
||||
return method.label || i18n('phone');
|
||||
case ContactType.HOME:
|
||||
case ContactFormType.HOME:
|
||||
return i18n('home');
|
||||
case ContactType.MOBILE:
|
||||
case ContactFormType.MOBILE:
|
||||
return i18n('mobile');
|
||||
case ContactType.WORK:
|
||||
case ContactFormType.WORK:
|
||||
return i18n('work');
|
||||
default:
|
||||
throw missingCaseError(method.type);
|
||||
|
|
|
|||
|
|
@ -20,7 +20,7 @@ const contact = {
|
|||
},
|
||||
onClick: () => console.log('onClick'),
|
||||
onSendMessage: () => console.log('onSendMessage'),
|
||||
hasSignalAccount: true,
|
||||
signalAccount: '+12025550000',
|
||||
};
|
||||
<util.ConversationContext theme={util.theme} ios={util.ios}>
|
||||
<li>
|
||||
|
|
@ -86,7 +86,7 @@ const contact = {
|
|||
},
|
||||
onClick: () => console.log('onClick'),
|
||||
onSendMessage: () => console.log('onSendMessage'),
|
||||
hasSignalAccount: true,
|
||||
signalAccount: '+12025550000',
|
||||
};
|
||||
<util.ConversationContext theme={util.theme} ios={util.ios}>
|
||||
<li>
|
||||
|
|
@ -129,7 +129,6 @@ const contact = {
|
|||
path: util.gifObjectUrl,
|
||||
},
|
||||
},
|
||||
hasSignalAccount: true,
|
||||
};
|
||||
<util.ConversationContext theme={util.theme} ios={util.ios}>
|
||||
<li>
|
||||
|
|
@ -170,7 +169,7 @@ const contact = {
|
|||
path: util.gifObjectUrl,
|
||||
},
|
||||
},
|
||||
hasSignalAccount: true,
|
||||
signalAccount: '+12025550000',
|
||||
};
|
||||
<util.ConversationContext theme={util.theme} type="group" ios={util.ios}>
|
||||
<li>
|
||||
|
|
@ -230,7 +229,6 @@ const contact = {
|
|||
path: util.gifObjectUrl,
|
||||
},
|
||||
},
|
||||
hasSignalAccount: false,
|
||||
};
|
||||
<util.ConversationContext theme={util.theme} ios={util.ios}>
|
||||
<li>
|
||||
|
|
@ -292,7 +290,6 @@ const contact = {
|
|||
path: util.gifObjectUrl,
|
||||
},
|
||||
},
|
||||
hasSignalAccount: false,
|
||||
};
|
||||
<util.ConversationContext theme={util.theme} ios={util.ios}>
|
||||
<li>
|
||||
|
|
@ -356,7 +353,7 @@ const contact = {
|
|||
path: util.gifObjectUrl,
|
||||
},
|
||||
},
|
||||
hasSignalAccount: false,
|
||||
signalAccount: '+12025551000',
|
||||
};
|
||||
<util.ConversationContext theme={util.theme} ios={util.ios}>
|
||||
<li>
|
||||
|
|
@ -415,7 +412,6 @@ const contact = {
|
|||
type: 1,
|
||||
},
|
||||
],
|
||||
hasSignalAccount: true,
|
||||
};
|
||||
<util.ConversationContext theme={util.theme} ios={util.ios}>
|
||||
<li>
|
||||
|
|
@ -527,7 +523,7 @@ const contactWithAccount = {
|
|||
path: util.gifObjectUrl,
|
||||
},
|
||||
},
|
||||
hasSignalAccount: true,
|
||||
signalAccount: '+12025550000',
|
||||
};
|
||||
const contactWithoutAccount = {
|
||||
name: {
|
||||
|
|
@ -544,7 +540,6 @@ const contactWithoutAccount = {
|
|||
path: util.gifObjectUrl,
|
||||
},
|
||||
},
|
||||
hasSignalAccount: false,
|
||||
};
|
||||
<util.ConversationContext theme={util.theme} ios={util.ios}>
|
||||
<li>
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
import React from 'react';
|
||||
import classNames from 'classnames';
|
||||
|
||||
import { Contact } from '../../types/Contact';
|
||||
import { ContactType } from '../../types/Contact';
|
||||
|
||||
import { LocalizerType } from '../../types/Util';
|
||||
import {
|
||||
|
|
@ -11,8 +11,7 @@ import {
|
|||
} from './_contactUtil';
|
||||
|
||||
interface Props {
|
||||
contact: Contact;
|
||||
hasSignalAccount: boolean;
|
||||
contact: ContactType;
|
||||
i18n: LocalizerType;
|
||||
isIncoming: boolean;
|
||||
withContentAbove: boolean;
|
||||
|
|
|
|||
|
|
@ -24,7 +24,7 @@ interface Props {
|
|||
i18n: LocalizerType;
|
||||
|
||||
onError: () => void;
|
||||
onClickAttachment?: (attachment: AttachmentType) => void;
|
||||
onClick?: (attachment: AttachmentType) => void;
|
||||
}
|
||||
|
||||
export class ImageGrid extends React.Component<Props> {
|
||||
|
|
@ -35,7 +35,7 @@ export class ImageGrid extends React.Component<Props> {
|
|||
bottomOverlay,
|
||||
i18n,
|
||||
onError,
|
||||
onClickAttachment,
|
||||
onClick,
|
||||
withContentAbove,
|
||||
withContentBelow,
|
||||
} = this.props;
|
||||
|
|
@ -76,7 +76,7 @@ export class ImageGrid extends React.Component<Props> {
|
|||
height={height}
|
||||
width={width}
|
||||
url={getUrl(attachments[0])}
|
||||
onClick={onClickAttachment}
|
||||
onClick={onClick}
|
||||
onError={onError}
|
||||
/>
|
||||
</div>
|
||||
|
|
@ -97,7 +97,7 @@ export class ImageGrid extends React.Component<Props> {
|
|||
height={149}
|
||||
width={149}
|
||||
url={getThumbnailUrl(attachments[0])}
|
||||
onClick={onClickAttachment}
|
||||
onClick={onClick}
|
||||
onError={onError}
|
||||
/>
|
||||
<Image
|
||||
|
|
@ -111,7 +111,7 @@ export class ImageGrid extends React.Component<Props> {
|
|||
width={149}
|
||||
attachment={attachments[1]}
|
||||
url={getThumbnailUrl(attachments[1])}
|
||||
onClick={onClickAttachment}
|
||||
onClick={onClick}
|
||||
onError={onError}
|
||||
/>
|
||||
</div>
|
||||
|
|
@ -132,7 +132,7 @@ export class ImageGrid extends React.Component<Props> {
|
|||
height={200}
|
||||
width={199}
|
||||
url={getUrl(attachments[0])}
|
||||
onClick={onClickAttachment}
|
||||
onClick={onClick}
|
||||
onError={onError}
|
||||
/>
|
||||
<div className="module-image-grid__column">
|
||||
|
|
@ -145,7 +145,7 @@ export class ImageGrid extends React.Component<Props> {
|
|||
attachment={attachments[1]}
|
||||
playIconOverlay={isVideoAttachment(attachments[1])}
|
||||
url={getThumbnailUrl(attachments[1])}
|
||||
onClick={onClickAttachment}
|
||||
onClick={onClick}
|
||||
onError={onError}
|
||||
/>
|
||||
<Image
|
||||
|
|
@ -158,7 +158,7 @@ export class ImageGrid extends React.Component<Props> {
|
|||
attachment={attachments[2]}
|
||||
playIconOverlay={isVideoAttachment(attachments[2])}
|
||||
url={getThumbnailUrl(attachments[2])}
|
||||
onClick={onClickAttachment}
|
||||
onClick={onClick}
|
||||
onError={onError}
|
||||
/>
|
||||
</div>
|
||||
|
|
@ -180,7 +180,7 @@ export class ImageGrid extends React.Component<Props> {
|
|||
height={149}
|
||||
width={149}
|
||||
url={getThumbnailUrl(attachments[0])}
|
||||
onClick={onClickAttachment}
|
||||
onClick={onClick}
|
||||
onError={onError}
|
||||
/>
|
||||
<Image
|
||||
|
|
@ -192,7 +192,7 @@ export class ImageGrid extends React.Component<Props> {
|
|||
width={149}
|
||||
attachment={attachments[1]}
|
||||
url={getThumbnailUrl(attachments[1])}
|
||||
onClick={onClickAttachment}
|
||||
onClick={onClick}
|
||||
onError={onError}
|
||||
/>
|
||||
</div>
|
||||
|
|
@ -207,7 +207,7 @@ export class ImageGrid extends React.Component<Props> {
|
|||
width={149}
|
||||
attachment={attachments[2]}
|
||||
url={getThumbnailUrl(attachments[2])}
|
||||
onClick={onClickAttachment}
|
||||
onClick={onClick}
|
||||
onError={onError}
|
||||
/>
|
||||
<Image
|
||||
|
|
@ -220,7 +220,7 @@ export class ImageGrid extends React.Component<Props> {
|
|||
width={149}
|
||||
attachment={attachments[3]}
|
||||
url={getThumbnailUrl(attachments[3])}
|
||||
onClick={onClickAttachment}
|
||||
onClick={onClick}
|
||||
onError={onError}
|
||||
/>
|
||||
</div>
|
||||
|
|
@ -247,7 +247,7 @@ export class ImageGrid extends React.Component<Props> {
|
|||
height={149}
|
||||
width={149}
|
||||
url={getThumbnailUrl(attachments[0])}
|
||||
onClick={onClickAttachment}
|
||||
onClick={onClick}
|
||||
onError={onError}
|
||||
/>
|
||||
<Image
|
||||
|
|
@ -259,7 +259,7 @@ export class ImageGrid extends React.Component<Props> {
|
|||
width={149}
|
||||
attachment={attachments[1]}
|
||||
url={getThumbnailUrl(attachments[1])}
|
||||
onClick={onClickAttachment}
|
||||
onClick={onClick}
|
||||
onError={onError}
|
||||
/>
|
||||
</div>
|
||||
|
|
@ -274,7 +274,7 @@ export class ImageGrid extends React.Component<Props> {
|
|||
width={99}
|
||||
attachment={attachments[2]}
|
||||
url={getThumbnailUrl(attachments[2])}
|
||||
onClick={onClickAttachment}
|
||||
onClick={onClick}
|
||||
onError={onError}
|
||||
/>
|
||||
<Image
|
||||
|
|
@ -286,7 +286,7 @@ export class ImageGrid extends React.Component<Props> {
|
|||
width={98}
|
||||
attachment={attachments[3]}
|
||||
url={getThumbnailUrl(attachments[3])}
|
||||
onClick={onClickAttachment}
|
||||
onClick={onClick}
|
||||
onError={onError}
|
||||
/>
|
||||
<Image
|
||||
|
|
@ -301,7 +301,7 @@ export class ImageGrid extends React.Component<Props> {
|
|||
overlayText={moreMessagesOverlayText}
|
||||
attachment={attachments[4]}
|
||||
url={getThumbnailUrl(attachments[4])}
|
||||
onClick={onClickAttachment}
|
||||
onClick={onClick}
|
||||
onError={onError}
|
||||
/>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -25,7 +25,7 @@ import {
|
|||
isVideo,
|
||||
} from '../../../ts/types/Attachment';
|
||||
import { AttachmentType } from '../../types/Attachment';
|
||||
import { Contact } from '../../types/Contact';
|
||||
import { ContactType } from '../../types/Contact';
|
||||
|
||||
import { getIncrement } from '../../util/timer';
|
||||
import { isFileDangerous } from '../../util/isFileDangerous';
|
||||
|
|
@ -46,22 +46,14 @@ interface LinkPreviewType {
|
|||
image?: AttachmentType;
|
||||
}
|
||||
|
||||
export interface Props {
|
||||
disableMenu?: boolean;
|
||||
type PropsData = {
|
||||
id: string;
|
||||
text?: string;
|
||||
textPending?: boolean;
|
||||
id?: string;
|
||||
collapseMetadata?: boolean;
|
||||
direction: 'incoming' | 'outgoing';
|
||||
timestamp: number;
|
||||
status?: 'sending' | 'sent' | 'delivered' | 'read' | 'error';
|
||||
// What if changed this over to a single contact like quote, and put the events on it?
|
||||
contact?: Contact & {
|
||||
hasSignalAccount: boolean;
|
||||
onSendMessage?: () => void;
|
||||
onClick?: () => void;
|
||||
};
|
||||
i18n: LocalizerType;
|
||||
contact?: ContactType;
|
||||
authorName?: string;
|
||||
authorProfileName?: string;
|
||||
/** Note: this should be formatted for display */
|
||||
|
|
@ -73,11 +65,12 @@ export interface Props {
|
|||
text: string;
|
||||
attachment?: QuotedAttachmentType;
|
||||
isFromMe: boolean;
|
||||
sentAt: number;
|
||||
authorId: string;
|
||||
authorPhoneNumber: string;
|
||||
authorProfileName?: string;
|
||||
authorName?: string;
|
||||
authorColor?: ColorType;
|
||||
onClick?: () => void;
|
||||
referencedMessageNotFound: boolean;
|
||||
};
|
||||
previews: Array<LinkPreviewType>;
|
||||
|
|
@ -85,14 +78,48 @@ export interface Props {
|
|||
isExpired: boolean;
|
||||
expirationLength?: number;
|
||||
expirationTimestamp?: number;
|
||||
onClickAttachment?: (attachment: AttachmentType) => void;
|
||||
onClickLinkPreview?: (url: string) => void;
|
||||
onReply?: () => void;
|
||||
onRetrySend?: () => void;
|
||||
onDownload?: (isDangerous: boolean) => void;
|
||||
onDelete?: () => void;
|
||||
onShowDetail: () => void;
|
||||
}
|
||||
};
|
||||
|
||||
type PropsHousekeeping = {
|
||||
i18n: LocalizerType;
|
||||
disableMenu?: boolean;
|
||||
disableScroll?: boolean;
|
||||
collapseMetadata?: boolean;
|
||||
};
|
||||
|
||||
export type PropsActions = {
|
||||
replyToMessage: (id: string) => void;
|
||||
retrySend: (id: string) => void;
|
||||
deleteMessage: (id: string) => void;
|
||||
showMessageDetail: (id: string) => void;
|
||||
|
||||
openConversation: (conversationId: string, messageId?: string) => void;
|
||||
showContactDetail: (
|
||||
options: { contact: ContactType; signalAccount?: string }
|
||||
) => void;
|
||||
|
||||
showVisualAttachment: (
|
||||
options: { attachment: AttachmentType; messageId: string }
|
||||
) => void;
|
||||
downloadAttachment: (
|
||||
options: {
|
||||
attachment: AttachmentType;
|
||||
timestamp: number;
|
||||
isDangerous: boolean;
|
||||
}
|
||||
) => void;
|
||||
|
||||
openLink: (url: string) => void;
|
||||
scrollToMessage: (
|
||||
options: {
|
||||
author: string;
|
||||
sentAt: number;
|
||||
referencedMessageNotFound: boolean;
|
||||
}
|
||||
) => void;
|
||||
};
|
||||
|
||||
export type Props = PropsData & PropsHousekeeping & PropsActions;
|
||||
|
||||
interface State {
|
||||
expiring: boolean;
|
||||
|
|
@ -301,6 +328,7 @@ export class Message extends React.PureComponent<Props, State> {
|
|||
// tslint:disable-next-line max-func-body-length cyclomatic-complexity
|
||||
public renderAttachment() {
|
||||
const {
|
||||
id,
|
||||
attachments,
|
||||
text,
|
||||
collapseMetadata,
|
||||
|
|
@ -308,7 +336,7 @@ export class Message extends React.PureComponent<Props, State> {
|
|||
direction,
|
||||
i18n,
|
||||
quote,
|
||||
onClickAttachment,
|
||||
showVisualAttachment,
|
||||
} = this.props;
|
||||
const { imageBroken } = this.state;
|
||||
|
||||
|
|
@ -349,7 +377,9 @@ export class Message extends React.PureComponent<Props, State> {
|
|||
bottomOverlay={!collapseMetadata}
|
||||
i18n={i18n}
|
||||
onError={this.handleImageErrorBound}
|
||||
onClickAttachment={onClickAttachment}
|
||||
onClick={attachment => {
|
||||
showVisualAttachment({ attachment, messageId: id });
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
|
|
@ -438,7 +468,7 @@ export class Message extends React.PureComponent<Props, State> {
|
|||
conversationType,
|
||||
direction,
|
||||
i18n,
|
||||
onClickLinkPreview,
|
||||
openLink,
|
||||
previews,
|
||||
quote,
|
||||
} = this.props;
|
||||
|
|
@ -475,9 +505,7 @@ export class Message extends React.PureComponent<Props, State> {
|
|||
: null
|
||||
)}
|
||||
onClick={() => {
|
||||
if (onClickLinkPreview) {
|
||||
onClickLinkPreview(first.url);
|
||||
}
|
||||
openLink(first.url);
|
||||
}}
|
||||
>
|
||||
{first.image && previewHasImage && isFullSizeImage ? (
|
||||
|
|
@ -537,8 +565,10 @@ export class Message extends React.PureComponent<Props, State> {
|
|||
conversationType,
|
||||
authorColor,
|
||||
direction,
|
||||
disableScroll,
|
||||
i18n,
|
||||
quote,
|
||||
scrollToMessage,
|
||||
} = this.props;
|
||||
|
||||
if (!quote) {
|
||||
|
|
@ -550,10 +580,21 @@ export class Message extends React.PureComponent<Props, State> {
|
|||
const quoteColor =
|
||||
direction === 'incoming' ? authorColor : quote.authorColor;
|
||||
|
||||
const { referencedMessageNotFound } = quote;
|
||||
const clickHandler = disableScroll
|
||||
? undefined
|
||||
: () => {
|
||||
scrollToMessage({
|
||||
author: quote.authorId,
|
||||
sentAt: quote.sentAt,
|
||||
referencedMessageNotFound,
|
||||
});
|
||||
};
|
||||
|
||||
return (
|
||||
<Quote
|
||||
i18n={i18n}
|
||||
onClick={quote.onClick}
|
||||
onClick={clickHandler}
|
||||
text={quote.text}
|
||||
attachment={quote.attachment}
|
||||
isIncoming={direction === 'incoming'}
|
||||
|
|
@ -561,7 +602,7 @@ export class Message extends React.PureComponent<Props, State> {
|
|||
authorProfileName={quote.authorProfileName}
|
||||
authorName={quote.authorName}
|
||||
authorColor={quoteColor}
|
||||
referencedMessageNotFound={quote.referencedMessageNotFound}
|
||||
referencedMessageNotFound={referencedMessageNotFound}
|
||||
isFromMe={quote.isFromMe}
|
||||
withContentAbove={withContentAbove}
|
||||
/>
|
||||
|
|
@ -575,6 +616,7 @@ export class Message extends React.PureComponent<Props, State> {
|
|||
conversationType,
|
||||
direction,
|
||||
i18n,
|
||||
showContactDetail,
|
||||
text,
|
||||
} = this.props;
|
||||
if (!contact) {
|
||||
|
|
@ -589,10 +631,11 @@ export class Message extends React.PureComponent<Props, State> {
|
|||
return (
|
||||
<EmbeddedContact
|
||||
contact={contact}
|
||||
hasSignalAccount={contact.hasSignalAccount}
|
||||
isIncoming={direction === 'incoming'}
|
||||
i18n={i18n}
|
||||
onClick={contact.onClick}
|
||||
onClick={() => {
|
||||
showContactDetail({ contact, signalAccount: contact.signalAccount });
|
||||
}}
|
||||
withContentAbove={withContentAbove}
|
||||
withContentBelow={withContentBelow}
|
||||
/>
|
||||
|
|
@ -600,15 +643,19 @@ export class Message extends React.PureComponent<Props, State> {
|
|||
}
|
||||
|
||||
public renderSendMessageButton() {
|
||||
const { contact, i18n } = this.props;
|
||||
if (!contact || !contact.hasSignalAccount) {
|
||||
const { contact, openConversation, i18n } = this.props;
|
||||
if (!contact || !contact.signalAccount) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return (
|
||||
<div
|
||||
role="button"
|
||||
onClick={contact.onSendMessage}
|
||||
onClick={() => {
|
||||
if (contact.signalAccount) {
|
||||
openConversation(contact.signalAccount);
|
||||
}
|
||||
}}
|
||||
className="module-message__send-message-button"
|
||||
>
|
||||
{i18n('sendMessageToContact')}
|
||||
|
|
@ -718,8 +765,10 @@ export class Message extends React.PureComponent<Props, State> {
|
|||
attachments,
|
||||
direction,
|
||||
disableMenu,
|
||||
onDownload,
|
||||
onReply,
|
||||
downloadAttachment,
|
||||
id,
|
||||
replyToMessage,
|
||||
timestamp,
|
||||
} = this.props;
|
||||
|
||||
if (!isCorrectSide || disableMenu) {
|
||||
|
|
@ -736,9 +785,11 @@ export class Message extends React.PureComponent<Props, State> {
|
|||
!multipleAttachments && firstAttachment && !firstAttachment.pending ? (
|
||||
<div
|
||||
onClick={() => {
|
||||
if (onDownload) {
|
||||
onDownload(isDangerous);
|
||||
}
|
||||
downloadAttachment({
|
||||
isDangerous,
|
||||
attachment: firstAttachment,
|
||||
timestamp,
|
||||
});
|
||||
}}
|
||||
role="button"
|
||||
className={classNames(
|
||||
|
|
@ -750,7 +801,9 @@ export class Message extends React.PureComponent<Props, State> {
|
|||
|
||||
const replyButton = (
|
||||
<div
|
||||
onClick={onReply}
|
||||
onClick={() => {
|
||||
replyToMessage(id);
|
||||
}}
|
||||
role="button"
|
||||
className={classNames(
|
||||
'module-message__buttons__reply',
|
||||
|
|
@ -793,13 +846,15 @@ export class Message extends React.PureComponent<Props, State> {
|
|||
const {
|
||||
attachments,
|
||||
direction,
|
||||
status,
|
||||
onDelete,
|
||||
onDownload,
|
||||
onReply,
|
||||
onRetrySend,
|
||||
onShowDetail,
|
||||
downloadAttachment,
|
||||
i18n,
|
||||
id,
|
||||
deleteMessage,
|
||||
showMessageDetail,
|
||||
replyToMessage,
|
||||
retrySend,
|
||||
status,
|
||||
timestamp,
|
||||
} = this.props;
|
||||
|
||||
const showRetry = status === 'error' && direction === 'outgoing';
|
||||
|
|
@ -816,9 +871,11 @@ export class Message extends React.PureComponent<Props, State> {
|
|||
className: 'module-message__context__download',
|
||||
}}
|
||||
onClick={() => {
|
||||
if (onDownload) {
|
||||
onDownload(isDangerous);
|
||||
}
|
||||
downloadAttachment({
|
||||
attachment: attachments[0],
|
||||
timestamp,
|
||||
isDangerous,
|
||||
});
|
||||
}}
|
||||
>
|
||||
{i18n('downloadAttachment')}
|
||||
|
|
@ -828,7 +885,9 @@ export class Message extends React.PureComponent<Props, State> {
|
|||
attributes={{
|
||||
className: 'module-message__context__reply',
|
||||
}}
|
||||
onClick={onReply}
|
||||
onClick={() => {
|
||||
replyToMessage(id);
|
||||
}}
|
||||
>
|
||||
{i18n('replyToMessage')}
|
||||
</MenuItem>
|
||||
|
|
@ -836,7 +895,9 @@ export class Message extends React.PureComponent<Props, State> {
|
|||
attributes={{
|
||||
className: 'module-message__context__more-info',
|
||||
}}
|
||||
onClick={onShowDetail}
|
||||
onClick={() => {
|
||||
showMessageDetail(id);
|
||||
}}
|
||||
>
|
||||
{i18n('moreInfo')}
|
||||
</MenuItem>
|
||||
|
|
@ -845,7 +906,9 @@ export class Message extends React.PureComponent<Props, State> {
|
|||
attributes={{
|
||||
className: 'module-message__context__retry-send',
|
||||
}}
|
||||
onClick={onRetrySend}
|
||||
onClick={() => {
|
||||
retrySend(id);
|
||||
}}
|
||||
>
|
||||
{i18n('retrySend')}
|
||||
</MenuItem>
|
||||
|
|
@ -854,7 +917,9 @@ export class Message extends React.PureComponent<Props, State> {
|
|||
attributes={{
|
||||
className: 'module-message__context__delete-message',
|
||||
}}
|
||||
onClick={onDelete}
|
||||
onClick={() => {
|
||||
deleteMessage(id);
|
||||
}}
|
||||
>
|
||||
{i18n('deleteMessage')}
|
||||
</MenuItem>
|
||||
|
|
|
|||
|
|
@ -59,7 +59,9 @@ export class MessageDetail extends React.Component<Props> {
|
|||
return (
|
||||
<div className="module-message-detail__delete-button-container">
|
||||
<button
|
||||
onClick={message.onDelete}
|
||||
onClick={() => {
|
||||
message.deleteMessage(message.id);
|
||||
}}
|
||||
className="module-message-detail__delete-button"
|
||||
>
|
||||
{i18n('deleteThisMessage')}
|
||||
|
|
|
|||
|
|
@ -5,22 +5,31 @@ import { ContactName } from './ContactName';
|
|||
import { Intl } from '../Intl';
|
||||
import { LocalizerType } from '../../types/Util';
|
||||
|
||||
interface Contact {
|
||||
interface ContactType {
|
||||
id: string;
|
||||
phoneNumber: string;
|
||||
profileName?: string;
|
||||
name?: string;
|
||||
}
|
||||
|
||||
interface Props {
|
||||
type PropsData = {
|
||||
isGroup: boolean;
|
||||
contact: Contact;
|
||||
contact: ContactType;
|
||||
};
|
||||
|
||||
type PropsHousekeeping = {
|
||||
i18n: LocalizerType;
|
||||
onVerify: () => void;
|
||||
}
|
||||
};
|
||||
|
||||
export type PropsActions = {
|
||||
showIdentity: (id: string) => void;
|
||||
};
|
||||
|
||||
type Props = PropsData & PropsHousekeeping & PropsActions;
|
||||
|
||||
export class SafetyNumberNotification extends React.Component<Props> {
|
||||
public render() {
|
||||
const { contact, isGroup, i18n, onVerify } = this.props;
|
||||
const { contact, isGroup, i18n, showIdentity } = this.props;
|
||||
const changeKey = isGroup
|
||||
? 'safetyNumberChangedGroup'
|
||||
: 'safetyNumberChanged';
|
||||
|
|
@ -50,7 +59,9 @@ export class SafetyNumberNotification extends React.Component<Props> {
|
|||
</div>
|
||||
<div
|
||||
role="button"
|
||||
onClick={onVerify}
|
||||
onClick={() => {
|
||||
showIdentity(contact.id);
|
||||
}}
|
||||
className="module-verification-notification__button"
|
||||
>
|
||||
{i18n('verifyNewNumber')}
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@ import { Avatar } from '../Avatar';
|
|||
import { Spinner } from '../Spinner';
|
||||
|
||||
import { LocalizerType } from '../../types/Util';
|
||||
import { Contact, getName } from '../../types/Contact';
|
||||
import { ContactType, getName } from '../../types/Contact';
|
||||
|
||||
// This file starts with _ to keep it from showing up in the StyleGuide.
|
||||
|
||||
|
|
@ -15,7 +15,7 @@ export function renderAvatar({
|
|||
size,
|
||||
direction,
|
||||
}: {
|
||||
contact: Contact;
|
||||
contact: ContactType;
|
||||
i18n: LocalizerType;
|
||||
size: number;
|
||||
direction?: string;
|
||||
|
|
@ -52,7 +52,7 @@ export function renderName({
|
|||
isIncoming,
|
||||
module,
|
||||
}: {
|
||||
contact: Contact;
|
||||
contact: ContactType;
|
||||
isIncoming: boolean;
|
||||
module: string;
|
||||
}) {
|
||||
|
|
@ -73,7 +73,7 @@ export function renderContactShorthand({
|
|||
isIncoming,
|
||||
module,
|
||||
}: {
|
||||
contact: Contact;
|
||||
contact: ContactType;
|
||||
isIncoming: boolean;
|
||||
module: string;
|
||||
}) {
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue