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
143
ts/components/conversationList/BaseConversationListItem.tsx
Normal file
143
ts/components/conversationList/BaseConversationListItem.tsx
Normal file
|
@ -0,0 +1,143 @@
|
|||
// Copyright 2021 Signal Messenger, LLC
|
||||
// SPDX-License-Identifier: AGPL-3.0-only
|
||||
|
||||
import React, { ReactNode, CSSProperties, FunctionComponent } from 'react';
|
||||
import classNames from 'classnames';
|
||||
import { isBoolean, isNumber } from 'lodash';
|
||||
|
||||
import { Avatar, AvatarSize } from '../Avatar';
|
||||
import { Timestamp } from '../conversation/Timestamp';
|
||||
import { isConversationUnread } from '../../util/isConversationUnread';
|
||||
import { cleanId } from '../_util';
|
||||
import { ColorType } from '../../types/Colors';
|
||||
import { LocalizerType } from '../../types/Util';
|
||||
|
||||
const BASE_CLASS_NAME =
|
||||
'module-conversation-list__item--contact-or-conversation';
|
||||
const CONTENT_CLASS_NAME = `${BASE_CLASS_NAME}__content`;
|
||||
const HEADER_CLASS_NAME = `${CONTENT_CLASS_NAME}__header`;
|
||||
export const DATE_CLASS_NAME = `${HEADER_CLASS_NAME}__date`;
|
||||
const TIMESTAMP_CLASS_NAME = `${DATE_CLASS_NAME}__timestamp`;
|
||||
export const MESSAGE_CLASS_NAME = `${CONTENT_CLASS_NAME}__message`;
|
||||
export const MESSAGE_TEXT_CLASS_NAME = `${MESSAGE_CLASS_NAME}__text`;
|
||||
|
||||
type PropsType = {
|
||||
avatarPath?: string;
|
||||
color?: ColorType;
|
||||
conversationType: 'group' | 'direct';
|
||||
headerDate?: number;
|
||||
headerName: ReactNode;
|
||||
i18n: LocalizerType;
|
||||
id?: string;
|
||||
isMe?: boolean;
|
||||
isNoteToSelf?: boolean;
|
||||
isSelected: boolean;
|
||||
markedUnread?: boolean;
|
||||
messageId?: string;
|
||||
messageStatusIcon?: ReactNode;
|
||||
messageText?: ReactNode;
|
||||
name?: string;
|
||||
onClick: () => void;
|
||||
phoneNumber?: string;
|
||||
profileName?: string;
|
||||
style: CSSProperties;
|
||||
title: string;
|
||||
unreadCount?: number;
|
||||
};
|
||||
|
||||
export const BaseConversationListItem: FunctionComponent<PropsType> = React.memo(
|
||||
({
|
||||
avatarPath,
|
||||
color,
|
||||
conversationType,
|
||||
headerDate,
|
||||
headerName,
|
||||
i18n,
|
||||
id,
|
||||
isMe,
|
||||
isNoteToSelf,
|
||||
isSelected,
|
||||
markedUnread,
|
||||
messageStatusIcon,
|
||||
messageText,
|
||||
name,
|
||||
onClick,
|
||||
phoneNumber,
|
||||
profileName,
|
||||
style,
|
||||
title,
|
||||
unreadCount,
|
||||
}) => {
|
||||
const isUnread = isConversationUnread({ markedUnread, unreadCount });
|
||||
|
||||
const isAvatarNoteToSelf = isBoolean(isNoteToSelf)
|
||||
? isNoteToSelf
|
||||
: Boolean(isMe);
|
||||
|
||||
return (
|
||||
<button
|
||||
type="button"
|
||||
onClick={onClick}
|
||||
style={style}
|
||||
className={classNames(BASE_CLASS_NAME, {
|
||||
[`${BASE_CLASS_NAME}--has-unread`]: isUnread,
|
||||
[`${BASE_CLASS_NAME}--is-selected`]: isSelected,
|
||||
})}
|
||||
data-id={id ? cleanId(id) : undefined}
|
||||
>
|
||||
<div className={`${BASE_CLASS_NAME}__avatar-container`}>
|
||||
<Avatar
|
||||
avatarPath={avatarPath}
|
||||
color={color}
|
||||
noteToSelf={isAvatarNoteToSelf}
|
||||
conversationType={conversationType}
|
||||
i18n={i18n}
|
||||
name={name}
|
||||
phoneNumber={phoneNumber}
|
||||
profileName={profileName}
|
||||
title={title}
|
||||
size={AvatarSize.FIFTY_TWO}
|
||||
/>
|
||||
{isUnread && (
|
||||
<div className={`${BASE_CLASS_NAME}__unread-count`}>
|
||||
{unreadCount || ''}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<div className={CONTENT_CLASS_NAME}>
|
||||
<div className={HEADER_CLASS_NAME}>
|
||||
<div className={`${HEADER_CLASS_NAME}__name`}>{headerName}</div>
|
||||
{isNumber(headerDate) && (
|
||||
<div
|
||||
className={classNames(DATE_CLASS_NAME, {
|
||||
[`${DATE_CLASS_NAME}--has-unread`]: isUnread,
|
||||
})}
|
||||
>
|
||||
<Timestamp
|
||||
timestamp={headerDate}
|
||||
extended={false}
|
||||
module={TIMESTAMP_CLASS_NAME}
|
||||
withUnread={isUnread}
|
||||
i18n={i18n}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
{messageText ? (
|
||||
<div className={MESSAGE_CLASS_NAME}>
|
||||
<div
|
||||
dir="auto"
|
||||
className={classNames(MESSAGE_TEXT_CLASS_NAME, {
|
||||
[`${MESSAGE_TEXT_CLASS_NAME}--has-unread`]: isUnread,
|
||||
})}
|
||||
>
|
||||
{messageText}
|
||||
</div>
|
||||
{messageStatusIcon}
|
||||
</div>
|
||||
) : null}
|
||||
</div>
|
||||
</button>
|
||||
);
|
||||
}
|
||||
);
|
Loading…
Add table
Add a link
Reference in a new issue