Add "new conversation" composer for direct messages
This commit is contained in:
parent
84dc166b63
commit
06fb4fd0bc
61 changed files with 5960 additions and 3887 deletions
206
ts/components/conversationList/ConversationListItem.tsx
Normal file
206
ts/components/conversationList/ConversationListItem.tsx
Normal file
|
@ -0,0 +1,206 @@
|
|||
// Copyright 2018-2021 Signal Messenger, LLC
|
||||
// SPDX-License-Identifier: AGPL-3.0-only
|
||||
|
||||
import React, {
|
||||
useCallback,
|
||||
CSSProperties,
|
||||
FunctionComponent,
|
||||
ReactNode,
|
||||
} from 'react';
|
||||
import classNames from 'classnames';
|
||||
|
||||
import {
|
||||
BaseConversationListItem,
|
||||
MESSAGE_CLASS_NAME,
|
||||
MESSAGE_TEXT_CLASS_NAME,
|
||||
} from './BaseConversationListItem';
|
||||
import { MessageBody } from '../conversation/MessageBody';
|
||||
import { ContactName } from '../conversation/ContactName';
|
||||
import { TypingAnimation } from '../conversation/TypingAnimation';
|
||||
|
||||
import { LocalizerType } from '../../types/Util';
|
||||
import { ColorType } from '../../types/Colors';
|
||||
|
||||
const MESSAGE_STATUS_ICON_CLASS_NAME = `${MESSAGE_TEXT_CLASS_NAME}__status-icon`;
|
||||
|
||||
export const MessageStatuses = [
|
||||
'sending',
|
||||
'sent',
|
||||
'delivered',
|
||||
'read',
|
||||
'error',
|
||||
'partial-sent',
|
||||
] as const;
|
||||
|
||||
export type MessageStatusType = typeof MessageStatuses[number];
|
||||
|
||||
export type PropsData = {
|
||||
id: string;
|
||||
phoneNumber?: string;
|
||||
color?: ColorType;
|
||||
profileName?: string;
|
||||
title: string;
|
||||
name?: string;
|
||||
type: 'group' | 'direct';
|
||||
avatarPath?: string;
|
||||
isMe?: boolean;
|
||||
muteExpiresAt?: number;
|
||||
|
||||
lastUpdated?: number;
|
||||
unreadCount?: number;
|
||||
markedUnread?: boolean;
|
||||
isSelected?: boolean;
|
||||
|
||||
acceptedMessageRequest?: boolean;
|
||||
draftPreview?: string;
|
||||
shouldShowDraft?: boolean;
|
||||
|
||||
typingContact?: unknown;
|
||||
lastMessage?: {
|
||||
status: MessageStatusType;
|
||||
text: string;
|
||||
deletedForEveryone?: boolean;
|
||||
};
|
||||
isPinned?: boolean;
|
||||
};
|
||||
|
||||
type PropsHousekeeping = {
|
||||
i18n: LocalizerType;
|
||||
style: CSSProperties;
|
||||
onClick: (id: string) => void;
|
||||
};
|
||||
|
||||
export type Props = PropsData & PropsHousekeeping;
|
||||
|
||||
export const ConversationListItem: FunctionComponent<Props> = React.memo(
|
||||
({
|
||||
acceptedMessageRequest,
|
||||
avatarPath,
|
||||
color,
|
||||
draftPreview,
|
||||
i18n,
|
||||
id,
|
||||
isMe,
|
||||
isSelected,
|
||||
lastMessage,
|
||||
lastUpdated,
|
||||
markedUnread,
|
||||
muteExpiresAt,
|
||||
name,
|
||||
onClick,
|
||||
phoneNumber,
|
||||
profileName,
|
||||
shouldShowDraft,
|
||||
style,
|
||||
title,
|
||||
type,
|
||||
typingContact,
|
||||
unreadCount,
|
||||
}) => {
|
||||
const headerName = isMe ? (
|
||||
i18n('noteToSelf')
|
||||
) : (
|
||||
<ContactName
|
||||
phoneNumber={phoneNumber}
|
||||
name={name}
|
||||
profileName={profileName}
|
||||
title={title}
|
||||
i18n={i18n}
|
||||
/>
|
||||
);
|
||||
|
||||
let messageText: ReactNode = null;
|
||||
let messageStatusIcon: ReactNode = null;
|
||||
|
||||
if (lastMessage || typingContact) {
|
||||
const messageBody = lastMessage ? lastMessage.text : '';
|
||||
const showingDraft = shouldShowDraft && draftPreview;
|
||||
const deletedForEveryone = Boolean(
|
||||
lastMessage && lastMessage.deletedForEveryone
|
||||
);
|
||||
|
||||
/* eslint-disable no-nested-ternary */
|
||||
messageText = (
|
||||
<>
|
||||
{muteExpiresAt && Date.now() < muteExpiresAt && (
|
||||
<span className={`${MESSAGE_CLASS_NAME}__muted`} />
|
||||
)}
|
||||
{!acceptedMessageRequest ? (
|
||||
<span className={`${MESSAGE_CLASS_NAME}__message-request`}>
|
||||
{i18n('ConversationListItem--message-request')}
|
||||
</span>
|
||||
) : typingContact ? (
|
||||
<TypingAnimation i18n={i18n} />
|
||||
) : (
|
||||
<>
|
||||
{showingDraft ? (
|
||||
<>
|
||||
<span className={`${MESSAGE_TEXT_CLASS_NAME}__draft-prefix`}>
|
||||
{i18n('ConversationListItem--draft-prefix')}
|
||||
</span>
|
||||
<MessageBody
|
||||
text={(draftPreview || '').split('\n')[0]}
|
||||
disableJumbomoji
|
||||
disableLinks
|
||||
i18n={i18n}
|
||||
/>
|
||||
</>
|
||||
) : deletedForEveryone ? (
|
||||
<span
|
||||
className={`${MESSAGE_TEXT_CLASS_NAME}__deleted-for-everyone`}
|
||||
>
|
||||
{i18n('message--deletedForEveryone')}
|
||||
</span>
|
||||
) : (
|
||||
<MessageBody
|
||||
text={(messageBody || '').split('\n')[0]}
|
||||
disableJumbomoji
|
||||
disableLinks
|
||||
i18n={i18n}
|
||||
/>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
/* eslint-enable no-nested-ternary */
|
||||
|
||||
if (!showingDraft && lastMessage && lastMessage.status) {
|
||||
messageStatusIcon = (
|
||||
<div
|
||||
className={classNames(
|
||||
MESSAGE_STATUS_ICON_CLASS_NAME,
|
||||
`${MESSAGE_STATUS_ICON_CLASS_NAME}--${lastMessage.status}`
|
||||
)}
|
||||
/>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
const onClickItem = useCallback(() => onClick(id), [onClick, id]);
|
||||
|
||||
return (
|
||||
<BaseConversationListItem
|
||||
avatarPath={avatarPath}
|
||||
color={color}
|
||||
conversationType={type}
|
||||
headerDate={lastUpdated}
|
||||
headerName={headerName}
|
||||
i18n={i18n}
|
||||
id={id}
|
||||
isMe={isMe}
|
||||
isSelected={Boolean(isSelected)}
|
||||
markedUnread={markedUnread}
|
||||
messageStatusIcon={messageStatusIcon}
|
||||
messageText={messageText}
|
||||
name={name}
|
||||
onClick={onClickItem}
|
||||
phoneNumber={phoneNumber}
|
||||
profileName={profileName}
|
||||
style={style}
|
||||
title={title}
|
||||
unreadCount={unreadCount}
|
||||
/>
|
||||
);
|
||||
}
|
||||
);
|
Loading…
Add table
Add a link
Reference in a new issue