Add user badges to typing bubbles
This commit is contained in:
parent
8f27d29415
commit
1febe31472
|
@ -25,6 +25,7 @@ import { TypingBubble } from './TypingBubble';
|
|||
import { ContactSpoofingType } from '../../util/contactSpoofing';
|
||||
import { ReadStatus } from '../../messages/MessageReadStatus';
|
||||
import type { WidthBreakpoint } from '../_util';
|
||||
import { ThemeType } from '../../types/Util';
|
||||
|
||||
const i18n = setupI18n('en', enMessages);
|
||||
|
||||
|
@ -443,11 +444,13 @@ const renderLoadingRow = () => <TimelineLoadingRow state="loading" />;
|
|||
const renderTypingBubble = () => (
|
||||
<TypingBubble
|
||||
acceptedMessageRequest
|
||||
badge={undefined}
|
||||
color={getRandomColor()}
|
||||
conversationType="direct"
|
||||
phoneNumber="+18005552222"
|
||||
i18n={i18n}
|
||||
isMe={false}
|
||||
theme={ThemeType.light}
|
||||
title="title"
|
||||
sharedGroupNames={[]}
|
||||
/>
|
||||
|
|
|
@ -10,6 +10,7 @@ import enMessages from '../../../_locales/en/messages.json';
|
|||
import type { Props } from './TypingBubble';
|
||||
import { TypingBubble } from './TypingBubble';
|
||||
import { AvatarColors } from '../../types/Colors';
|
||||
import { ThemeType } from '../../types/Util';
|
||||
|
||||
const i18n = setupI18n('en', enMessages);
|
||||
|
||||
|
@ -17,6 +18,7 @@ const story = storiesOf('Components/Conversation/TypingBubble', module);
|
|||
|
||||
const createProps = (overrideProps: Partial<Props> = {}): Props => ({
|
||||
acceptedMessageRequest: true,
|
||||
badge: undefined,
|
||||
isMe: false,
|
||||
i18n,
|
||||
color: select(
|
||||
|
@ -33,6 +35,7 @@ const createProps = (overrideProps: Partial<Props> = {}): Props => ({
|
|||
overrideProps.conversationType || 'direct'
|
||||
),
|
||||
sharedGroupNames: [],
|
||||
theme: ThemeType.light,
|
||||
});
|
||||
|
||||
story.add('Direct', () => {
|
||||
|
|
|
@ -7,8 +7,9 @@ import classNames from 'classnames';
|
|||
import { TypingAnimation } from './TypingAnimation';
|
||||
import { Avatar } from '../Avatar';
|
||||
|
||||
import type { LocalizerType } from '../../types/Util';
|
||||
import type { LocalizerType, ThemeType } from '../../types/Util';
|
||||
import type { ConversationType } from '../../state/ducks/conversations';
|
||||
import type { BadgeType } from '../../badges/types';
|
||||
|
||||
export type Props = Pick<
|
||||
ConversationType,
|
||||
|
@ -22,8 +23,10 @@ export type Props = Pick<
|
|||
| 'sharedGroupNames'
|
||||
| 'title'
|
||||
> & {
|
||||
badge: undefined | BadgeType;
|
||||
conversationType: 'group' | 'direct';
|
||||
i18n: LocalizerType;
|
||||
theme: ThemeType;
|
||||
};
|
||||
|
||||
export class TypingBubble extends React.PureComponent<Props> {
|
||||
|
@ -31,6 +34,7 @@ export class TypingBubble extends React.PureComponent<Props> {
|
|||
const {
|
||||
acceptedMessageRequest,
|
||||
avatarPath,
|
||||
badge,
|
||||
color,
|
||||
conversationType,
|
||||
i18n,
|
||||
|
@ -39,6 +43,7 @@ export class TypingBubble extends React.PureComponent<Props> {
|
|||
phoneNumber,
|
||||
profileName,
|
||||
sharedGroupNames,
|
||||
theme,
|
||||
title,
|
||||
} = this.props;
|
||||
|
||||
|
@ -51,6 +56,7 @@ export class TypingBubble extends React.PureComponent<Props> {
|
|||
<Avatar
|
||||
acceptedMessageRequest={acceptedMessageRequest}
|
||||
avatarPath={avatarPath}
|
||||
badge={badge}
|
||||
color={color}
|
||||
conversationType="direct"
|
||||
i18n={i18n}
|
||||
|
@ -58,6 +64,7 @@ export class TypingBubble extends React.PureComponent<Props> {
|
|||
name={name}
|
||||
phoneNumber={phoneNumber}
|
||||
profileName={profileName}
|
||||
theme={theme}
|
||||
title={title}
|
||||
sharedGroupNames={sharedGroupNames}
|
||||
size={28}
|
||||
|
|
|
@ -174,6 +174,7 @@ export type ConversationType = {
|
|||
typingContact?: {
|
||||
acceptedMessageRequest: boolean;
|
||||
avatarPath?: string;
|
||||
badges: ConversationType['badges'];
|
||||
color?: AvatarColorType;
|
||||
isMe: boolean;
|
||||
name?: string;
|
||||
|
|
|
@ -1,4 +1,4 @@
|
|||
// Copyright 2019-2020 Signal Messenger, LLC
|
||||
// Copyright 2019-2021 Signal Messenger, LLC
|
||||
// SPDX-License-Identifier: AGPL-3.0-only
|
||||
|
||||
import { connect } from 'react-redux';
|
||||
|
@ -7,8 +7,9 @@ import { TypingBubble } from '../../components/conversation/TypingBubble';
|
|||
import { strictAssert } from '../../util/assert';
|
||||
import type { StateType } from '../reducer';
|
||||
|
||||
import { getIntl } from '../selectors/user';
|
||||
import { getIntl, getTheme } from '../selectors/user';
|
||||
import { getConversationSelector } from '../selectors/conversations';
|
||||
import { getPreferredBadgeSelector } from '../selectors/badges';
|
||||
|
||||
type ExternalProps = {
|
||||
id: string;
|
||||
|
@ -22,12 +23,16 @@ const mapStateToProps = (state: StateType, props: ExternalProps) => {
|
|||
throw new Error(`Did not find conversation ${id} in state!`);
|
||||
}
|
||||
|
||||
strictAssert(conversation.typingContact, 'Missing typingContact');
|
||||
const { typingContact } = conversation;
|
||||
strictAssert(typingContact, 'Missing typingContact');
|
||||
|
||||
return {
|
||||
...conversation.typingContact,
|
||||
...typingContact,
|
||||
// This `|| []` is probably unnecessarily defensive. This should only affect v5.24.
|
||||
badge: getPreferredBadgeSelector(state)(typingContact.badges || []),
|
||||
conversationType: conversation.type,
|
||||
i18n: getIntl(state),
|
||||
theme: getTheme(state),
|
||||
};
|
||||
};
|
||||
|
||||
|
|
Loading…
Reference in New Issue