Render group stories

This commit is contained in:
Josh Perez 2022-04-14 20:08:46 -04:00 committed by GitHub
parent 14ab7b9e0d
commit e3d537cbd3
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
24 changed files with 527 additions and 163 deletions

View file

@ -12,6 +12,7 @@ import type { EmojiPickDataType } from './emoji/EmojiPicker';
import type { InputApi } from './CompositionInput';
import type { PreferredBadgeSelectorType } from '../state/selectors/badges';
import type { RenderEmojiPickerProps } from './conversation/ReactionPicker';
import type { ReplyType } from '../types/Stories';
import { Avatar, AvatarSize } from './Avatar';
import { CompositionInput } from './CompositionInput';
import { ContactName } from './conversation/ContactName';
@ -23,26 +24,10 @@ import { Modal } from './Modal';
import { Quote } from './conversation/Quote';
import { ReactionPicker } from './conversation/ReactionPicker';
import { Tabs } from './Tabs';
import { Theme } from '../util/theme';
import { ThemeType } from '../types/Util';
import { getAvatarColor } from '../types/Colors';
type ReplyType = Pick<
ConversationType,
| 'acceptedMessageRequest'
| 'avatarPath'
| 'color'
| 'isMe'
| 'name'
| 'profileName'
| 'sharedGroupNames'
| 'title'
> & {
body?: string;
contactNameColor?: ContactNameColorType;
reactionEmoji?: string;
timestamp: number;
};
type ViewType = Pick<
ConversationType,
| 'acceptedMessageRequest'
@ -223,7 +208,7 @@ export const StoryViewsNRepliesModal = ({
<div className="StoryViewsNRepliesModal__replies">
{replies.map(reply =>
reply.reactionEmoji ? (
<div className="StoryViewsNRepliesModal__reaction">
<div className="StoryViewsNRepliesModal__reaction" key={reply.id}>
<div className="StoryViewsNRepliesModal__reaction--container">
<Avatar
acceptedMessageRequest={reply.acceptedMessageRequest}
@ -257,7 +242,7 @@ export const StoryViewsNRepliesModal = ({
<Emojify text={reply.reactionEmoji} />
</div>
) : (
<div className="StoryViewsNRepliesModal__reply">
<div className="StoryViewsNRepliesModal__reply" key={reply.id}>
<Avatar
acceptedMessageRequest={reply.acceptedMessageRequest}
avatarPath={reply.avatarPath}
@ -272,7 +257,13 @@ export const StoryViewsNRepliesModal = ({
size={AvatarSize.TWENTY_EIGHT}
title={reply.title}
/>
<div className="StoryViewsNRepliesModal__message-bubble">
<div
className={classNames('StoryViewsNRepliesModal__message-bubble', {
'StoryViewsNRepliesModal__message-bubble--doe': Boolean(
reply.deletedForEveryone
),
})}
>
<div className="StoryViewsNRepliesModal__reply--title">
<ContactName
contactNameColor={reply.contactNameColor}
@ -280,7 +271,14 @@ export const StoryViewsNRepliesModal = ({
/>
</div>
<MessageBody i18n={i18n} text={String(reply.body)} />
<MessageBody
i18n={i18n}
text={
reply.deletedForEveryone
? i18n('message--deletedForEveryone')
: String(reply.body)
}
/>
<MessageTimestamp
i18n={i18n}
@ -373,6 +371,7 @@ export const StoryViewsNRepliesModal = ({
})}
onClose={onClose}
useFocusTrap={!hasOnlyViewsElement}
theme={Theme.Dark}
>
{tabsElement || (
<>