First-class profile name rendering
This commit is contained in:
Scott Nonnenberg
parent
632cd0e87e
commit
d07b8e82b2
63 changed files with 1044 additions and 454 deletions
|
|
@ -1,21 +0,0 @@
|
|||
#### Number, name and profile
|
||||
|
||||
```jsx
|
||||
<ContactName
|
||||
name="Someone 🔥 Somewhere"
|
||||
phoneNumber="(202) 555-0011"
|
||||
profileName="🔥Flames🔥"
|
||||
/>
|
||||
```
|
||||
|
||||
#### Number and profile, no name
|
||||
|
||||
```jsx
|
||||
<ContactName phoneNumber="(202) 555-0011" profileName="🔥Flames🔥" />
|
||||
```
|
||||
|
||||
#### No name, no profile
|
||||
|
||||
```jsx
|
||||
<ContactName phoneNumber="(202) 555-0011" />
|
||||
```
|
||||
47
ts/components/conversation/ContactName.stories.tsx
Normal file
47
ts/components/conversation/ContactName.stories.tsx
Normal file
|
|
@ -0,0 +1,47 @@
|
|||
import * as React from 'react';
|
||||
|
||||
import { storiesOf } from '@storybook/react';
|
||||
|
||||
// @ts-ignore
|
||||
import { setup as setupI18n } from '../../../js/modules/i18n';
|
||||
// @ts-ignore
|
||||
import enMessages from '../../../\_locales/en/messages.json';
|
||||
|
||||
import { ContactName } from './ContactName';
|
||||
|
||||
const i18n = setupI18n('en', enMessages);
|
||||
|
||||
storiesOf('Components/Conversation/ContactName', module)
|
||||
.add('Number, name and profile', () => {
|
||||
return (
|
||||
<ContactName
|
||||
title="Someone 🔥 Somewhere"
|
||||
name="Someone 🔥 Somewhere"
|
||||
phoneNumber="(202) 555-0011"
|
||||
profileName="🔥Flames🔥"
|
||||
i18n={i18n}
|
||||
/>
|
||||
);
|
||||
})
|
||||
.add('Number and profile, no name', () => {
|
||||
return (
|
||||
<ContactName
|
||||
title="🔥Flames🔥"
|
||||
phoneNumber="(202) 555-0011"
|
||||
profileName="🔥Flames🔥"
|
||||
i18n={i18n}
|
||||
/>
|
||||
);
|
||||
})
|
||||
.add('No name, no profile', () => {
|
||||
return (
|
||||
<ContactName
|
||||
title="(202) 555-0011"
|
||||
phoneNumber="(202) 555-0011"
|
||||
i18n={i18n}
|
||||
/>
|
||||
);
|
||||
})
|
||||
.add('No data provided', () => {
|
||||
return <ContactName title="unknownContact" i18n={i18n} />;
|
||||
});
|
||||
|
|
@ -1,32 +1,25 @@
|
|||
import React from 'react';
|
||||
|
||||
import { Emojify } from './Emojify';
|
||||
import { LocalizerType } from '../../types/Util';
|
||||
|
||||
export interface Props {
|
||||
title: string;
|
||||
phoneNumber?: string;
|
||||
name?: string;
|
||||
profileName?: string;
|
||||
module?: string;
|
||||
i18n: LocalizerType;
|
||||
}
|
||||
|
||||
export class ContactName extends React.Component<Props> {
|
||||
public render() {
|
||||
const { phoneNumber, name, profileName, module } = this.props;
|
||||
const { module, title } = this.props;
|
||||
const prefix = module ? module : 'module-contact-name';
|
||||
|
||||
const title = name ? name : phoneNumber;
|
||||
const shouldShowProfile = Boolean(profileName && !name);
|
||||
const profileElement = shouldShowProfile ? (
|
||||
<span className={`${prefix}__profile-name`}>
|
||||
~<Emojify text={profileName || ''} />
|
||||
</span>
|
||||
) : null;
|
||||
|
||||
return (
|
||||
<span className={prefix} dir="auto">
|
||||
<Emojify text={title || ''} />
|
||||
{shouldShowProfile ? ' ' : null}
|
||||
{profileElement}
|
||||
</span>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -10,9 +10,9 @@ import enMessages from '../../../\_locales/en/messages.json';
|
|||
|
||||
import {
|
||||
ConversationHeader,
|
||||
Props,
|
||||
PropsActions,
|
||||
PropsHousekeeping,
|
||||
PropsActionsType,
|
||||
PropsHousekeepingType,
|
||||
PropsType,
|
||||
} from './ConversationHeader';
|
||||
|
||||
import { gifUrl } from '../../storybook/Fixtures';
|
||||
|
|
@ -25,11 +25,11 @@ type ConversationHeaderStory = {
|
|||
description: string;
|
||||
items: Array<{
|
||||
title: string;
|
||||
props: Props;
|
||||
props: PropsType;
|
||||
}>;
|
||||
};
|
||||
|
||||
const actionProps: PropsActions = {
|
||||
const actionProps: PropsActionsType = {
|
||||
onSetDisappearingMessages: action('onSetDisappearingMessages'),
|
||||
onDeleteMessages: action('onDeleteMessages'),
|
||||
onResetSession: action('onResetSession'),
|
||||
|
|
@ -50,7 +50,7 @@ const actionProps: PropsActions = {
|
|||
onMoveToInbox: action('onMoveToInbox'),
|
||||
};
|
||||
|
||||
const housekeepingProps: PropsHousekeeping = {
|
||||
const housekeepingProps: PropsHousekeepingType = {
|
||||
i18n,
|
||||
};
|
||||
|
||||
|
|
@ -66,8 +66,10 @@ const stories: Array<ConversationHeaderStory> = [
|
|||
color: 'red',
|
||||
isVerified: true,
|
||||
avatarPath: gifUrl,
|
||||
title: 'Someone 🔥 Somewhere',
|
||||
name: 'Someone 🔥 Somewhere',
|
||||
phoneNumber: '(202) 555-0001',
|
||||
type: 'direct',
|
||||
id: '1',
|
||||
profileName: '🔥Flames🔥',
|
||||
isAccepted: true,
|
||||
|
|
@ -80,8 +82,25 @@ const stories: Array<ConversationHeaderStory> = [
|
|||
props: {
|
||||
color: 'blue',
|
||||
isVerified: false,
|
||||
title: 'Someone 🔥 Somewhere',
|
||||
name: 'Someone 🔥 Somewhere',
|
||||
phoneNumber: '(202) 555-0002',
|
||||
type: 'direct',
|
||||
id: '2',
|
||||
isAccepted: true,
|
||||
...actionProps,
|
||||
...housekeepingProps,
|
||||
},
|
||||
},
|
||||
{
|
||||
title: 'With name, not verified, descenders',
|
||||
props: {
|
||||
color: 'blue',
|
||||
isVerified: false,
|
||||
title: 'Joyrey 🔥 Leppey',
|
||||
name: 'Joyrey 🔥 Leppey',
|
||||
phoneNumber: '(202) 555-0002',
|
||||
type: 'direct',
|
||||
id: '2',
|
||||
isAccepted: true,
|
||||
...actionProps,
|
||||
|
|
@ -94,7 +113,9 @@ const stories: Array<ConversationHeaderStory> = [
|
|||
color: 'teal',
|
||||
isVerified: false,
|
||||
phoneNumber: '(202) 555-0003',
|
||||
type: 'direct',
|
||||
id: '3',
|
||||
title: '🔥Flames🔥',
|
||||
profileName: '🔥Flames🔥',
|
||||
isAccepted: true,
|
||||
...actionProps,
|
||||
|
|
@ -104,7 +125,9 @@ const stories: Array<ConversationHeaderStory> = [
|
|||
{
|
||||
title: 'No name, no profile, no color',
|
||||
props: {
|
||||
title: '(202) 555-0011',
|
||||
phoneNumber: '(202) 555-0011',
|
||||
type: 'direct',
|
||||
id: '11',
|
||||
isAccepted: true,
|
||||
...actionProps,
|
||||
|
|
@ -117,6 +140,8 @@ const stories: Array<ConversationHeaderStory> = [
|
|||
showBackButton: true,
|
||||
color: 'deep_orange',
|
||||
phoneNumber: '(202) 555-0004',
|
||||
title: '(202) 555-0004',
|
||||
type: 'direct',
|
||||
id: '4',
|
||||
isAccepted: true,
|
||||
...actionProps,
|
||||
|
|
@ -127,7 +152,9 @@ const stories: Array<ConversationHeaderStory> = [
|
|||
title: 'Disappearing messages set',
|
||||
props: {
|
||||
color: 'indigo',
|
||||
title: '(202) 555-0005',
|
||||
phoneNumber: '(202) 555-0005',
|
||||
type: 'direct',
|
||||
id: '5',
|
||||
expirationSettingName: '10 seconds',
|
||||
timerOptions: [
|
||||
|
|
@ -156,10 +183,11 @@ const stories: Array<ConversationHeaderStory> = [
|
|||
title: 'Basic',
|
||||
props: {
|
||||
color: 'signal-blue',
|
||||
title: 'Typescript support group',
|
||||
name: 'Typescript support group',
|
||||
phoneNumber: '',
|
||||
id: '1',
|
||||
isGroup: true,
|
||||
type: 'group',
|
||||
expirationSettingName: '10 seconds',
|
||||
timerOptions: [
|
||||
{
|
||||
|
|
@ -180,10 +208,11 @@ const stories: Array<ConversationHeaderStory> = [
|
|||
title: 'In a group you left - no disappearing messages',
|
||||
props: {
|
||||
color: 'signal-blue',
|
||||
title: 'Typescript support group',
|
||||
name: 'Typescript support group',
|
||||
phoneNumber: '',
|
||||
id: '2',
|
||||
isGroup: true,
|
||||
type: 'group',
|
||||
leftGroup: true,
|
||||
expirationSettingName: '10 seconds',
|
||||
timerOptions: [
|
||||
|
|
@ -211,8 +240,10 @@ const stories: Array<ConversationHeaderStory> = [
|
|||
title: 'In chat with yourself',
|
||||
props: {
|
||||
color: 'blue',
|
||||
title: '(202) 555-0007',
|
||||
phoneNumber: '(202) 555-0007',
|
||||
id: '7',
|
||||
type: 'direct',
|
||||
isMe: true,
|
||||
isAccepted: true,
|
||||
...actionProps,
|
||||
|
|
@ -229,8 +260,10 @@ const stories: Array<ConversationHeaderStory> = [
|
|||
title: '1:1 conversation',
|
||||
props: {
|
||||
color: 'blue',
|
||||
title: '(202) 555-0007',
|
||||
phoneNumber: '(202) 555-0007',
|
||||
id: '7',
|
||||
type: 'direct',
|
||||
isMe: false,
|
||||
isAccepted: false,
|
||||
...actionProps,
|
||||
|
|
|
|||
|
|
@ -1,9 +1,5 @@
|
|||
import React from 'react';
|
||||
import classNames from 'classnames';
|
||||
|
||||
import { Emojify } from './Emojify';
|
||||
import { Avatar } from '../Avatar';
|
||||
import { ColorType, LocalizerType } from '../../types/Util';
|
||||
import {
|
||||
ContextMenu,
|
||||
ContextMenuTrigger,
|
||||
|
|
@ -11,24 +7,31 @@ import {
|
|||
SubMenu,
|
||||
} from 'react-contextmenu';
|
||||
|
||||
import { Emojify } from './Emojify';
|
||||
import { Avatar } from '../Avatar';
|
||||
import { InContactsIcon } from '../InContactsIcon';
|
||||
|
||||
import { ColorType, LocalizerType } from '../../types/Util';
|
||||
|
||||
interface TimerOption {
|
||||
name: string;
|
||||
value: number;
|
||||
}
|
||||
|
||||
export interface PropsData {
|
||||
export interface PropsDataType {
|
||||
id: string;
|
||||
name?: string;
|
||||
|
||||
phoneNumber: string;
|
||||
phoneNumber?: string;
|
||||
profileName?: string;
|
||||
color?: ColorType;
|
||||
avatarPath?: string;
|
||||
type: 'direct' | 'group';
|
||||
title: string;
|
||||
|
||||
isAccepted?: boolean;
|
||||
isVerified?: boolean;
|
||||
isMe?: boolean;
|
||||
isGroup?: boolean;
|
||||
isArchived?: boolean;
|
||||
leftGroup?: boolean;
|
||||
|
||||
|
|
@ -37,7 +40,7 @@ export interface PropsData {
|
|||
timerOptions?: Array<TimerOption>;
|
||||
}
|
||||
|
||||
export interface PropsActions {
|
||||
export interface PropsActionsType {
|
||||
onSetDisappearingMessages: (seconds: number) => void;
|
||||
onDeleteMessages: () => void;
|
||||
onResetSession: () => void;
|
||||
|
|
@ -54,17 +57,19 @@ export interface PropsActions {
|
|||
onMoveToInbox: () => void;
|
||||
}
|
||||
|
||||
export interface PropsHousekeeping {
|
||||
export interface PropsHousekeepingType {
|
||||
i18n: LocalizerType;
|
||||
}
|
||||
|
||||
export type Props = PropsData & PropsActions & PropsHousekeeping;
|
||||
export type PropsType = PropsDataType &
|
||||
PropsActionsType &
|
||||
PropsHousekeepingType;
|
||||
|
||||
export class ConversationHeader extends React.Component<Props> {
|
||||
export class ConversationHeader extends React.Component<PropsType> {
|
||||
public showMenuBound: (event: React.MouseEvent<HTMLButtonElement>) => void;
|
||||
public menuTriggerRef: React.RefObject<any>;
|
||||
|
||||
public constructor(props: Props) {
|
||||
public constructor(props: PropsType) {
|
||||
super(props);
|
||||
|
||||
this.menuTriggerRef = React.createRef();
|
||||
|
|
@ -96,6 +101,8 @@ export class ConversationHeader extends React.Component<Props> {
|
|||
const {
|
||||
name,
|
||||
phoneNumber,
|
||||
title,
|
||||
type,
|
||||
i18n,
|
||||
isMe,
|
||||
profileName,
|
||||
|
|
@ -110,19 +117,22 @@ export class ConversationHeader extends React.Component<Props> {
|
|||
);
|
||||
}
|
||||
|
||||
const shouldShowIcon = Boolean(name && type === 'direct');
|
||||
const shouldShowNumber = Boolean(phoneNumber && (name || profileName));
|
||||
|
||||
return (
|
||||
<div className="module-conversation-header__title">
|
||||
{name ? <Emojify text={name} /> : null}
|
||||
{name && phoneNumber ? ' · ' : null}
|
||||
{phoneNumber ? phoneNumber : null}{' '}
|
||||
{profileName && !name ? (
|
||||
<span className="module-conversation-header__title__profile-name">
|
||||
~<Emojify text={profileName} />
|
||||
<Emojify text={title} />
|
||||
{shouldShowIcon ? (
|
||||
<span>
|
||||
{' '}
|
||||
<InContactsIcon i18n={i18n} />
|
||||
</span>
|
||||
) : null}
|
||||
{isVerified ? ' · ' : null}
|
||||
{shouldShowNumber ? ` · ${phoneNumber}` : null}
|
||||
{isVerified ? (
|
||||
<span>
|
||||
{' · '}
|
||||
<span className="module-conversation-header__title__verified-icon" />
|
||||
{i18n('verified')}
|
||||
</span>
|
||||
|
|
@ -136,23 +146,23 @@ export class ConversationHeader extends React.Component<Props> {
|
|||
avatarPath,
|
||||
color,
|
||||
i18n,
|
||||
isGroup,
|
||||
type,
|
||||
isMe,
|
||||
name,
|
||||
phoneNumber,
|
||||
profileName,
|
||||
title,
|
||||
} = this.props;
|
||||
|
||||
const conversationType = isGroup ? 'group' : 'direct';
|
||||
|
||||
return (
|
||||
<span className="module-conversation-header__avatar">
|
||||
<Avatar
|
||||
avatarPath={avatarPath}
|
||||
color={color}
|
||||
conversationType={conversationType}
|
||||
conversationType={type}
|
||||
i18n={i18n}
|
||||
noteToSelf={isMe}
|
||||
title={title}
|
||||
name={name}
|
||||
phoneNumber={phoneNumber}
|
||||
profileName={profileName}
|
||||
|
|
@ -226,7 +236,7 @@ export class ConversationHeader extends React.Component<Props> {
|
|||
if (!window.CALLING) {
|
||||
return null;
|
||||
}
|
||||
if (this.props.isGroup || this.props.isMe) {
|
||||
if (this.props.type === 'group' || this.props.isMe) {
|
||||
return null;
|
||||
}
|
||||
|
||||
|
|
@ -250,7 +260,7 @@ export class ConversationHeader extends React.Component<Props> {
|
|||
if (!window.CALLING) {
|
||||
return null;
|
||||
}
|
||||
if (this.props.isGroup || this.props.isMe) {
|
||||
if (this.props.type === 'group' || this.props.isMe) {
|
||||
return null;
|
||||
}
|
||||
|
||||
|
|
@ -275,7 +285,7 @@ export class ConversationHeader extends React.Component<Props> {
|
|||
i18n,
|
||||
isAccepted,
|
||||
isMe,
|
||||
isGroup,
|
||||
type,
|
||||
isArchived,
|
||||
leftGroup,
|
||||
onDeleteMessages,
|
||||
|
|
@ -290,6 +300,7 @@ export class ConversationHeader extends React.Component<Props> {
|
|||
} = this.props;
|
||||
|
||||
const disappearingTitle = i18n('disappearingMessages') as any;
|
||||
const isGroup = type === 'group';
|
||||
|
||||
return (
|
||||
<ContextMenu id={triggerId}>
|
||||
|
|
|
|||
|
|
@ -10,8 +10,9 @@ import enMessages from '../../../_locales/en/messages.json';
|
|||
|
||||
const i18n = setupI18n('en', enMessages);
|
||||
|
||||
const getTitle = () => text('name', 'Cayce Bollard');
|
||||
const getName = () => text('name', 'Cayce Bollard');
|
||||
const getProfileName = () => text('profileName', 'Cayce Bollard');
|
||||
const getProfileName = () => text('profileName', 'Cayce Bollard (profile)');
|
||||
const getAvatarPath = () =>
|
||||
text('avatarPath', '/fixtures/kitten-4-112-112.jpg');
|
||||
const getPhoneNumber = () => text('phoneNumber', '+1 (646) 327-2700');
|
||||
|
|
@ -22,6 +23,7 @@ storiesOf('Components/Conversation/ConversationHero', module)
|
|||
<div style={{ width: '480px' }}>
|
||||
<ConversationHero
|
||||
i18n={i18n}
|
||||
title={getTitle()}
|
||||
avatarPath={getAvatarPath()}
|
||||
name={getName()}
|
||||
profileName={getProfileName()}
|
||||
|
|
@ -37,6 +39,7 @@ storiesOf('Components/Conversation/ConversationHero', module)
|
|||
<div style={{ width: '480px' }}>
|
||||
<ConversationHero
|
||||
i18n={i18n}
|
||||
title={getTitle()}
|
||||
avatarPath={getAvatarPath()}
|
||||
name={getName()}
|
||||
profileName={getProfileName()}
|
||||
|
|
@ -52,6 +55,7 @@ storiesOf('Components/Conversation/ConversationHero', module)
|
|||
<div style={{ width: '480px' }}>
|
||||
<ConversationHero
|
||||
i18n={i18n}
|
||||
title={getTitle()}
|
||||
avatarPath={getAvatarPath()}
|
||||
name={getName()}
|
||||
profileName={getProfileName()}
|
||||
|
|
@ -62,13 +66,30 @@ storiesOf('Components/Conversation/ConversationHero', module)
|
|||
</div>
|
||||
);
|
||||
})
|
||||
.add('Direct (No Other Groups)', () => {
|
||||
.add('Direct (No Groups, Name)', () => {
|
||||
return (
|
||||
<div style={{ width: '480px' }}>
|
||||
<ConversationHero
|
||||
i18n={i18n}
|
||||
title={getTitle()}
|
||||
avatarPath={getAvatarPath()}
|
||||
name={getName()}
|
||||
profileName={text('profileName', '')}
|
||||
phoneNumber={getPhoneNumber()}
|
||||
conversationType="direct"
|
||||
groups={[]}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
})
|
||||
.add('Direct (No Groups, Just Profile)', () => {
|
||||
return (
|
||||
<div style={{ width: '480px' }}>
|
||||
<ConversationHero
|
||||
i18n={i18n}
|
||||
title={text('title', 'Cayce Bollard (profile)')}
|
||||
avatarPath={getAvatarPath()}
|
||||
name={text('name', '')}
|
||||
profileName={getProfileName()}
|
||||
phoneNumber={getPhoneNumber()}
|
||||
conversationType="direct"
|
||||
|
|
@ -77,13 +98,45 @@ storiesOf('Components/Conversation/ConversationHero', module)
|
|||
</div>
|
||||
);
|
||||
})
|
||||
.add('Direct (No Groups, Just Phone Number)', () => {
|
||||
return (
|
||||
<div style={{ width: '480px' }}>
|
||||
<ConversationHero
|
||||
i18n={i18n}
|
||||
title={text('title', '+1 (646) 327-2700')}
|
||||
avatarPath={getAvatarPath()}
|
||||
name={text('name', '')}
|
||||
profileName={text('profileName', '')}
|
||||
phoneNumber={getPhoneNumber()}
|
||||
conversationType="direct"
|
||||
groups={[]}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
})
|
||||
.add('Direct (No Groups, No Data)', () => {
|
||||
return (
|
||||
<div style={{ width: '480px' }}>
|
||||
<ConversationHero
|
||||
i18n={i18n}
|
||||
title={text('title', 'Unknown contact')}
|
||||
avatarPath={getAvatarPath()}
|
||||
name={text('name', '')}
|
||||
profileName={text('profileName', '')}
|
||||
phoneNumber={text('phoneNumber', '')}
|
||||
conversationType="direct"
|
||||
groups={[]}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
})
|
||||
.add('Group (many members)', () => {
|
||||
return (
|
||||
<div style={{ width: '480px' }}>
|
||||
<ConversationHero
|
||||
i18n={i18n}
|
||||
title={text('title', 'NYC Rock Climbers')}
|
||||
name={text('groupName', 'NYC Rock Climbers')}
|
||||
phoneNumber={text('phoneNumber', '+1 (646) 327-2700')}
|
||||
conversationType="group"
|
||||
membersCount={numberKnob('membersCount', 22)}
|
||||
/>
|
||||
|
|
@ -95,8 +148,8 @@ storiesOf('Components/Conversation/ConversationHero', module)
|
|||
<div style={{ width: '480px' }}>
|
||||
<ConversationHero
|
||||
i18n={i18n}
|
||||
title={text('title', 'NYC Rock Climbers')}
|
||||
name={text('groupName', 'NYC Rock Climbers')}
|
||||
phoneNumber={text('phoneNumber', '+1 (646) 327-2700')}
|
||||
conversationType="group"
|
||||
membersCount={1}
|
||||
/>
|
||||
|
|
@ -108,8 +161,21 @@ storiesOf('Components/Conversation/ConversationHero', module)
|
|||
<div style={{ width: '480px' }}>
|
||||
<ConversationHero
|
||||
i18n={i18n}
|
||||
title={text('title', 'NYC Rock Climbers')}
|
||||
name={text('groupName', 'NYC Rock Climbers')}
|
||||
phoneNumber={text('phoneNumber', '+1 (646) 327-2700')}
|
||||
conversationType="group"
|
||||
membersCount={0}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
})
|
||||
.add('Group (No name)', () => {
|
||||
return (
|
||||
<div style={{ width: '480px' }}>
|
||||
<ConversationHero
|
||||
i18n={i18n}
|
||||
title={text('title', 'Unknown group')}
|
||||
name={text('groupName', '')}
|
||||
conversationType="group"
|
||||
membersCount={0}
|
||||
/>
|
||||
|
|
@ -122,6 +188,7 @@ storiesOf('Components/Conversation/ConversationHero', module)
|
|||
<ConversationHero
|
||||
i18n={i18n}
|
||||
isMe={true}
|
||||
title={getTitle()}
|
||||
conversationType="direct"
|
||||
phoneNumber={getPhoneNumber()}
|
||||
/>
|
||||
|
|
|
|||
|
|
@ -11,7 +11,7 @@ export type Props = {
|
|||
isMe?: boolean;
|
||||
groups?: Array<string>;
|
||||
membersCount?: number;
|
||||
phoneNumber: string;
|
||||
phoneNumber?: string;
|
||||
onHeightChange?: () => unknown;
|
||||
} & Omit<AvatarProps, 'onClick' | 'size' | 'noteToSelf'>;
|
||||
|
||||
|
|
@ -60,6 +60,7 @@ export const ConversationHero = ({
|
|||
name,
|
||||
phoneNumber,
|
||||
profileName,
|
||||
title,
|
||||
onHeightChange,
|
||||
}: Props) => {
|
||||
const firstRenderRef = React.useRef(true);
|
||||
|
|
@ -86,6 +87,12 @@ export const ConversationHero = ({
|
|||
...groups.map(g => `g-${g}`),
|
||||
]);
|
||||
|
||||
const displayName =
|
||||
name || (conversationType === 'group' ? i18n('unknownGroup') : undefined);
|
||||
const phoneNumberOnly = Boolean(
|
||||
!name && !profileName && conversationType === 'direct'
|
||||
);
|
||||
|
||||
return (
|
||||
<div className="module-conversation-hero">
|
||||
<Avatar
|
||||
|
|
@ -96,6 +103,7 @@ export const ConversationHero = ({
|
|||
conversationType={conversationType}
|
||||
name={name}
|
||||
profileName={profileName}
|
||||
title={title}
|
||||
size={112}
|
||||
className="module-conversation-hero__avatar"
|
||||
/>
|
||||
|
|
@ -104,9 +112,11 @@ export const ConversationHero = ({
|
|||
i18n('noteToSelf')
|
||||
) : (
|
||||
<ContactName
|
||||
name={name}
|
||||
title={title}
|
||||
name={displayName}
|
||||
profileName={profileName}
|
||||
phoneNumber={phoneNumber}
|
||||
i18n={i18n}
|
||||
/>
|
||||
)}
|
||||
</h1>
|
||||
|
|
@ -116,6 +126,8 @@ export const ConversationHero = ({
|
|||
? i18n('ConversationHero--members-1')
|
||||
: membersCount !== undefined
|
||||
? i18n('ConversationHero--members', [`${membersCount}`])
|
||||
: phoneNumberOnly
|
||||
? null
|
||||
: phoneNumber}
|
||||
</div>
|
||||
) : null}
|
||||
|
|
|
|||
|
|
@ -20,6 +20,7 @@ const stories: Array<GroupNotificationStory> = [
|
|||
[
|
||||
{
|
||||
from: {
|
||||
title: 'Alice',
|
||||
name: 'Alice',
|
||||
phoneNumber: '(202) 555-1000',
|
||||
},
|
||||
|
|
@ -28,12 +29,14 @@ const stories: Array<GroupNotificationStory> = [
|
|||
type: 'add',
|
||||
contacts: [
|
||||
{
|
||||
title: 'Mrs. Ice',
|
||||
phoneNumber: '(202) 555-1001',
|
||||
profileName: 'Mrs. Ice',
|
||||
},
|
||||
{
|
||||
phoneNumber: '(202) 555-1002',
|
||||
name: 'Ms. Earth',
|
||||
title: 'Ms. Earth',
|
||||
},
|
||||
],
|
||||
},
|
||||
|
|
@ -44,6 +47,7 @@ const stories: Array<GroupNotificationStory> = [
|
|||
},
|
||||
{
|
||||
from: {
|
||||
title: 'Alice',
|
||||
name: 'Alice',
|
||||
phoneNumber: '(202) 555-1000',
|
||||
isMe: true,
|
||||
|
|
@ -53,10 +57,12 @@ const stories: Array<GroupNotificationStory> = [
|
|||
type: 'add',
|
||||
contacts: [
|
||||
{
|
||||
title: 'Mrs. Ice',
|
||||
phoneNumber: '(202) 555-1001',
|
||||
profileName: 'Mrs. Ice',
|
||||
},
|
||||
{
|
||||
title: 'Ms. Earth',
|
||||
phoneNumber: '(202) 555-1002',
|
||||
name: 'Ms. Earth',
|
||||
},
|
||||
|
|
@ -74,6 +80,7 @@ const stories: Array<GroupNotificationStory> = [
|
|||
[
|
||||
{
|
||||
from: {
|
||||
title: 'Alice',
|
||||
name: 'Alice',
|
||||
phoneNumber: '(202) 555-1000',
|
||||
},
|
||||
|
|
@ -82,13 +89,16 @@ const stories: Array<GroupNotificationStory> = [
|
|||
type: 'add',
|
||||
contacts: [
|
||||
{
|
||||
title: '(202) 555-1000',
|
||||
phoneNumber: '(202) 555-1000',
|
||||
},
|
||||
{
|
||||
title: 'Mrs. Ice',
|
||||
phoneNumber: '(202) 555-1001',
|
||||
profileName: 'Mrs. Ice',
|
||||
},
|
||||
{
|
||||
title: 'Ms. Earth',
|
||||
phoneNumber: '(202) 555-1002',
|
||||
name: 'Ms. Earth',
|
||||
},
|
||||
|
|
@ -99,6 +109,7 @@ const stories: Array<GroupNotificationStory> = [
|
|||
},
|
||||
{
|
||||
from: {
|
||||
title: 'Alice',
|
||||
name: 'Alice',
|
||||
phoneNumber: '(202) 555-1000',
|
||||
},
|
||||
|
|
@ -107,14 +118,17 @@ const stories: Array<GroupNotificationStory> = [
|
|||
type: 'add',
|
||||
contacts: [
|
||||
{
|
||||
title: '(202) 555-1000',
|
||||
phoneNumber: '(202) 555-1000',
|
||||
isMe: true,
|
||||
},
|
||||
{
|
||||
title: 'Mrs. Ice',
|
||||
phoneNumber: '(202) 555-1001',
|
||||
profileName: 'Mrs. Ice',
|
||||
},
|
||||
{
|
||||
title: 'Ms. Earth',
|
||||
phoneNumber: '(202) 555-1002',
|
||||
name: 'Ms. Earth',
|
||||
},
|
||||
|
|
@ -125,6 +139,7 @@ const stories: Array<GroupNotificationStory> = [
|
|||
},
|
||||
{
|
||||
from: {
|
||||
title: 'Alice',
|
||||
name: 'Alice',
|
||||
phoneNumber: '(202) 555-1000',
|
||||
},
|
||||
|
|
@ -133,6 +148,7 @@ const stories: Array<GroupNotificationStory> = [
|
|||
type: 'add',
|
||||
contacts: [
|
||||
{
|
||||
title: 'Mr. Fire',
|
||||
phoneNumber: '(202) 555-1000',
|
||||
profileName: 'Mr. Fire',
|
||||
},
|
||||
|
|
@ -143,6 +159,7 @@ const stories: Array<GroupNotificationStory> = [
|
|||
},
|
||||
{
|
||||
from: {
|
||||
title: 'Alice',
|
||||
name: 'Alice',
|
||||
phoneNumber: '(202) 555-1000',
|
||||
isMe: true,
|
||||
|
|
@ -152,6 +169,7 @@ const stories: Array<GroupNotificationStory> = [
|
|||
type: 'add',
|
||||
contacts: [
|
||||
{
|
||||
title: 'Mr. Fire',
|
||||
phoneNumber: '(202) 555-1000',
|
||||
profileName: 'Mr. Fire',
|
||||
},
|
||||
|
|
@ -162,6 +180,7 @@ const stories: Array<GroupNotificationStory> = [
|
|||
},
|
||||
{
|
||||
from: {
|
||||
title: 'Alice',
|
||||
name: 'Alice',
|
||||
phoneNumber: '(202) 555-1000',
|
||||
},
|
||||
|
|
@ -170,6 +189,7 @@ const stories: Array<GroupNotificationStory> = [
|
|||
type: 'add',
|
||||
contacts: [
|
||||
{
|
||||
title: 'Mr. Fire',
|
||||
phoneNumber: '(202) 555-1000',
|
||||
profileName: 'Mr. Fire',
|
||||
isMe: true,
|
||||
|
|
@ -181,6 +201,7 @@ const stories: Array<GroupNotificationStory> = [
|
|||
},
|
||||
{
|
||||
from: {
|
||||
title: 'Alice',
|
||||
name: 'Alice',
|
||||
phoneNumber: '(202) 555-1000',
|
||||
},
|
||||
|
|
@ -189,11 +210,13 @@ const stories: Array<GroupNotificationStory> = [
|
|||
type: 'add',
|
||||
contacts: [
|
||||
{
|
||||
title: 'Mr. Fire',
|
||||
phoneNumber: '(202) 555-1000',
|
||||
profileName: 'Mr. Fire',
|
||||
isMe: true,
|
||||
},
|
||||
{
|
||||
title: 'Mrs. Ice',
|
||||
phoneNumber: '(202) 555-1001',
|
||||
profileName: 'Mrs. Ice',
|
||||
},
|
||||
|
|
@ -209,6 +232,7 @@ const stories: Array<GroupNotificationStory> = [
|
|||
[
|
||||
{
|
||||
from: {
|
||||
title: 'Alice',
|
||||
name: 'Alice',
|
||||
phoneNumber: '(202) 555-1000',
|
||||
},
|
||||
|
|
@ -217,14 +241,17 @@ const stories: Array<GroupNotificationStory> = [
|
|||
type: 'remove',
|
||||
contacts: [
|
||||
{
|
||||
title: 'Mr. Fire',
|
||||
phoneNumber: '(202) 555-1000',
|
||||
profileName: 'Mr. Fire',
|
||||
},
|
||||
{
|
||||
title: 'Mrs. Ice',
|
||||
phoneNumber: '(202) 555-1001',
|
||||
profileName: 'Mrs. Ice',
|
||||
},
|
||||
{
|
||||
title: 'Ms. Earth',
|
||||
phoneNumber: '(202) 555-1002',
|
||||
name: 'Ms. Earth',
|
||||
},
|
||||
|
|
@ -235,6 +262,7 @@ const stories: Array<GroupNotificationStory> = [
|
|||
},
|
||||
{
|
||||
from: {
|
||||
title: 'Alice',
|
||||
name: 'Alice',
|
||||
phoneNumber: '(202) 555-1000',
|
||||
},
|
||||
|
|
@ -243,6 +271,7 @@ const stories: Array<GroupNotificationStory> = [
|
|||
type: 'remove',
|
||||
contacts: [
|
||||
{
|
||||
title: 'Mr. Fire',
|
||||
phoneNumber: '(202) 555-1000',
|
||||
profileName: 'Mr. Fire',
|
||||
},
|
||||
|
|
@ -253,6 +282,7 @@ const stories: Array<GroupNotificationStory> = [
|
|||
},
|
||||
{
|
||||
from: {
|
||||
title: 'Alice',
|
||||
name: 'Alice',
|
||||
phoneNumber: '(202) 555-1000',
|
||||
isMe: true,
|
||||
|
|
@ -262,6 +292,7 @@ const stories: Array<GroupNotificationStory> = [
|
|||
type: 'remove',
|
||||
contacts: [
|
||||
{
|
||||
title: 'Alice',
|
||||
name: 'Alice',
|
||||
phoneNumber: '(202) 555-1000',
|
||||
isMe: true,
|
||||
|
|
@ -278,6 +309,7 @@ const stories: Array<GroupNotificationStory> = [
|
|||
[
|
||||
{
|
||||
from: {
|
||||
title: 'Alice',
|
||||
name: 'Alice',
|
||||
phoneNumber: '(202) 555-1000',
|
||||
},
|
||||
|
|
@ -291,6 +323,7 @@ const stories: Array<GroupNotificationStory> = [
|
|||
},
|
||||
{
|
||||
from: {
|
||||
title: 'Alice',
|
||||
name: 'Alice',
|
||||
phoneNumber: '(202) 555-1000',
|
||||
isMe: true,
|
||||
|
|
@ -310,6 +343,7 @@ const stories: Array<GroupNotificationStory> = [
|
|||
[
|
||||
{
|
||||
from: {
|
||||
title: 'Alice',
|
||||
name: 'Alice',
|
||||
phoneNumber: '(202) 555-1000',
|
||||
},
|
||||
|
|
@ -323,6 +357,7 @@ const stories: Array<GroupNotificationStory> = [
|
|||
},
|
||||
{
|
||||
from: {
|
||||
title: 'Alice',
|
||||
name: 'Alice',
|
||||
phoneNumber: '(202) 555-1000',
|
||||
isMe: true,
|
||||
|
|
@ -342,6 +377,7 @@ const stories: Array<GroupNotificationStory> = [
|
|||
[
|
||||
{
|
||||
from: {
|
||||
title: 'Alice',
|
||||
name: 'Alice',
|
||||
phoneNumber: '(202) 555-1000',
|
||||
},
|
||||
|
|
|
|||
|
|
@ -8,9 +8,10 @@ import { LocalizerType } from '../../types/Util';
|
|||
import { missingCaseError } from '../../util/missingCaseError';
|
||||
|
||||
interface Contact {
|
||||
phoneNumber: string;
|
||||
phoneNumber?: string;
|
||||
profileName?: string;
|
||||
name?: string;
|
||||
title: string;
|
||||
isMe?: boolean;
|
||||
}
|
||||
|
||||
|
|
@ -48,9 +49,11 @@ export class GroupNotification extends React.Component<Props> {
|
|||
className="module-group-notification__contact"
|
||||
>
|
||||
<ContactName
|
||||
title={contact.title}
|
||||
phoneNumber={contact.phoneNumber}
|
||||
profileName={contact.profileName}
|
||||
name={contact.name}
|
||||
i18n={i18n}
|
||||
/>
|
||||
</span>
|
||||
);
|
||||
|
|
@ -128,9 +131,11 @@ export class GroupNotification extends React.Component<Props> {
|
|||
|
||||
const fromContact = (
|
||||
<ContactName
|
||||
title={from.title}
|
||||
phoneNumber={from.phoneNumber}
|
||||
profileName={from.profileName}
|
||||
name={from.name}
|
||||
i18n={i18n}
|
||||
/>
|
||||
);
|
||||
|
||||
|
|
|
|||
|
|
@ -29,7 +29,7 @@ const baseDataProps: Pick<
|
|||
| 'conversationType'
|
||||
| 'previews'
|
||||
| 'timestamp'
|
||||
| 'authorPhoneNumber'
|
||||
| 'authorTitle'
|
||||
> = {
|
||||
id: 'asdf',
|
||||
canReply: true,
|
||||
|
|
@ -38,7 +38,7 @@ const baseDataProps: Pick<
|
|||
conversationType: 'direct',
|
||||
previews: [],
|
||||
timestamp: Date.now(),
|
||||
authorPhoneNumber: '(202) 555-2001',
|
||||
authorTitle: '(202) 555-2001',
|
||||
};
|
||||
|
||||
type MessageStory = [
|
||||
|
|
|
|||
|
|
@ -73,10 +73,10 @@ export type PropsData = {
|
|||
timestamp: number;
|
||||
status?: 'sending' | 'sent' | 'delivered' | 'read' | 'error';
|
||||
contact?: ContactType;
|
||||
authorTitle: string;
|
||||
authorName?: string;
|
||||
authorProfileName?: string;
|
||||
/** Note: this should be formatted for display */
|
||||
authorPhoneNumber: string;
|
||||
authorPhoneNumber?: string;
|
||||
authorColor?: ColorType;
|
||||
conversationType: 'group' | 'direct';
|
||||
attachments?: Array<AttachmentType>;
|
||||
|
|
@ -86,8 +86,9 @@ export type PropsData = {
|
|||
isFromMe: boolean;
|
||||
sentAt: number;
|
||||
authorId: string;
|
||||
authorPhoneNumber: string;
|
||||
authorPhoneNumber?: string;
|
||||
authorProfileName?: string;
|
||||
authorTitle: string;
|
||||
authorName?: string;
|
||||
authorColor?: ColorType;
|
||||
referencedMessageNotFound: boolean;
|
||||
|
|
@ -483,12 +484,14 @@ export class Message extends React.PureComponent<Props, State> {
|
|||
|
||||
public renderAuthor() {
|
||||
const {
|
||||
authorTitle,
|
||||
authorName,
|
||||
authorPhoneNumber,
|
||||
authorProfileName,
|
||||
collapseMetadata,
|
||||
conversationType,
|
||||
direction,
|
||||
i18n,
|
||||
isSticker,
|
||||
isTapToView,
|
||||
isTapToViewExpired,
|
||||
|
|
@ -498,9 +501,11 @@ export class Message extends React.PureComponent<Props, State> {
|
|||
return;
|
||||
}
|
||||
|
||||
const title = authorName ? authorName : authorPhoneNumber;
|
||||
|
||||
if (direction !== 'incoming' || conversationType !== 'group' || !title) {
|
||||
if (
|
||||
direction !== 'incoming' ||
|
||||
conversationType !== 'group' ||
|
||||
!authorTitle
|
||||
) {
|
||||
return null;
|
||||
}
|
||||
|
||||
|
|
@ -515,10 +520,12 @@ export class Message extends React.PureComponent<Props, State> {
|
|||
return (
|
||||
<div className={moduleName}>
|
||||
<ContactName
|
||||
title={authorTitle}
|
||||
phoneNumber={authorPhoneNumber}
|
||||
name={authorName}
|
||||
profileName={authorProfileName}
|
||||
module={moduleName}
|
||||
i18n={i18n}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
|
|
@ -847,6 +854,7 @@ export class Message extends React.PureComponent<Props, State> {
|
|||
authorProfileName={quote.authorProfileName}
|
||||
authorName={quote.authorName}
|
||||
authorColor={quoteColor}
|
||||
authorTitle={quote.authorTitle}
|
||||
referencedMessageNotFound={referencedMessageNotFound}
|
||||
isFromMe={quote.isFromMe}
|
||||
withContentAbove={withContentAbove}
|
||||
|
|
@ -917,6 +925,7 @@ export class Message extends React.PureComponent<Props, State> {
|
|||
authorName,
|
||||
authorPhoneNumber,
|
||||
authorProfileName,
|
||||
authorTitle,
|
||||
collapseMetadata,
|
||||
authorColor,
|
||||
conversationType,
|
||||
|
|
@ -942,6 +951,7 @@ export class Message extends React.PureComponent<Props, State> {
|
|||
name={authorName}
|
||||
phoneNumber={authorPhoneNumber}
|
||||
profileName={authorProfileName}
|
||||
title={authorTitle}
|
||||
size={28}
|
||||
/>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -9,7 +9,9 @@ import { ColorType, LocalizerType } from '../../types/Util';
|
|||
|
||||
interface Contact {
|
||||
status: string;
|
||||
phoneNumber: string;
|
||||
|
||||
title: string;
|
||||
phoneNumber?: string;
|
||||
name?: string;
|
||||
profileName?: string;
|
||||
avatarPath?: string;
|
||||
|
|
@ -49,7 +51,14 @@ export class MessageDetail extends React.Component<Props> {
|
|||
|
||||
public renderAvatar(contact: Contact) {
|
||||
const { i18n } = this.props;
|
||||
const { avatarPath, color, phoneNumber, name, profileName } = contact;
|
||||
const {
|
||||
avatarPath,
|
||||
color,
|
||||
phoneNumber,
|
||||
name,
|
||||
profileName,
|
||||
title,
|
||||
} = contact;
|
||||
|
||||
return (
|
||||
<Avatar
|
||||
|
|
@ -60,6 +69,7 @@ export class MessageDetail extends React.Component<Props> {
|
|||
name={name}
|
||||
phoneNumber={phoneNumber}
|
||||
profileName={profileName}
|
||||
title={title}
|
||||
size={52}
|
||||
/>
|
||||
);
|
||||
|
|
@ -123,6 +133,8 @@ export class MessageDetail extends React.Component<Props> {
|
|||
phoneNumber={contact.phoneNumber}
|
||||
name={contact.name}
|
||||
profileName={contact.profileName}
|
||||
title={contact.title}
|
||||
i18n={i18n}
|
||||
/>
|
||||
</div>
|
||||
{errors.map((error, index) => (
|
||||
|
|
|
|||
|
|
@ -17,7 +17,9 @@ const i18n = setupI18n('en', enMessages);
|
|||
const getBaseProps = (isGroup = false): MessageRequestActionsProps => ({
|
||||
i18n,
|
||||
conversationType: isGroup ? 'group' : 'direct',
|
||||
profileName: isGroup ? undefined : text('profileName', 'Cayce Bollard'),
|
||||
title: isGroup
|
||||
? text('title', 'NYC Rock Climbers')
|
||||
: text('title', 'Cayce Bollard'),
|
||||
name: isGroup
|
||||
? text('name', 'NYC Rock Climbers')
|
||||
: text('name', 'Cayce Bollard'),
|
||||
|
|
|
|||
|
|
@ -12,17 +12,19 @@ import { LocalizerType } from '../../types/Util';
|
|||
export type Props = {
|
||||
i18n: LocalizerType;
|
||||
onAccept(): unknown;
|
||||
} & Omit<ContactNameProps, 'module'> &
|
||||
} & Omit<ContactNameProps, 'module' | 'i18n'> &
|
||||
Omit<
|
||||
MessageRequestActionsConfirmationProps,
|
||||
'i18n' | 'state' | 'onChangeState'
|
||||
>;
|
||||
|
||||
// tslint:disable-next-line max-func-body-length
|
||||
export const MessageRequestActions = ({
|
||||
i18n,
|
||||
name,
|
||||
profileName,
|
||||
phoneNumber,
|
||||
title,
|
||||
conversationType,
|
||||
isBlocked,
|
||||
onBlock,
|
||||
|
|
@ -45,6 +47,7 @@ export const MessageRequestActions = ({
|
|||
name={name}
|
||||
profileName={profileName}
|
||||
phoneNumber={phoneNumber}
|
||||
title={title}
|
||||
conversationType={conversationType}
|
||||
state={mrState}
|
||||
onChangeState={setMrState}
|
||||
|
|
@ -66,6 +69,8 @@ export const MessageRequestActions = ({
|
|||
name={name}
|
||||
profileName={profileName}
|
||||
phoneNumber={phoneNumber}
|
||||
title={title}
|
||||
i18n={i18n}
|
||||
/>
|
||||
</strong>,
|
||||
]}
|
||||
|
|
|
|||
|
|
@ -21,7 +21,7 @@ export type Props = {
|
|||
onDelete(): unknown;
|
||||
state: MessageRequestState;
|
||||
onChangeState(state: MessageRequestState): unknown;
|
||||
} & Omit<ContactNameProps, 'module'>;
|
||||
} & Omit<ContactNameProps, 'module' | 'i18n'>;
|
||||
|
||||
// tslint:disable-next-line: max-func-body-length
|
||||
export const MessageRequestActionsConfirmation = ({
|
||||
|
|
@ -29,6 +29,7 @@ export const MessageRequestActionsConfirmation = ({
|
|||
name,
|
||||
profileName,
|
||||
phoneNumber,
|
||||
title,
|
||||
conversationType,
|
||||
onBlock,
|
||||
onBlockAndDelete,
|
||||
|
|
@ -55,6 +56,8 @@ export const MessageRequestActionsConfirmation = ({
|
|||
name={name}
|
||||
profileName={profileName}
|
||||
phoneNumber={phoneNumber}
|
||||
title={title}
|
||||
i18n={i18n}
|
||||
/>,
|
||||
]}
|
||||
/>
|
||||
|
|
@ -95,6 +98,8 @@ export const MessageRequestActionsConfirmation = ({
|
|||
name={name}
|
||||
profileName={profileName}
|
||||
phoneNumber={phoneNumber}
|
||||
title={title}
|
||||
i18n={i18n}
|
||||
/>,
|
||||
]}
|
||||
/>
|
||||
|
|
@ -135,6 +140,8 @@ export const MessageRequestActionsConfirmation = ({
|
|||
name={name}
|
||||
profileName={profileName}
|
||||
phoneNumber={phoneNumber}
|
||||
title={title}
|
||||
i18n={i18n}
|
||||
/>,
|
||||
]}
|
||||
/>
|
||||
|
|
|
|||
|
|
@ -12,7 +12,8 @@ import { ContactName } from './ContactName';
|
|||
|
||||
interface Props {
|
||||
attachment?: QuotedAttachmentType;
|
||||
authorPhoneNumber: string;
|
||||
authorTitle: string;
|
||||
authorPhoneNumber?: string;
|
||||
authorProfileName?: string;
|
||||
authorName?: string;
|
||||
authorColor?: ColorType;
|
||||
|
|
@ -307,6 +308,7 @@ export class Quote extends React.Component<Props, State> {
|
|||
const {
|
||||
authorProfileName,
|
||||
authorPhoneNumber,
|
||||
authorTitle,
|
||||
authorName,
|
||||
i18n,
|
||||
isFromMe,
|
||||
|
|
@ -327,6 +329,8 @@ export class Quote extends React.Component<Props, State> {
|
|||
phoneNumber={authorPhoneNumber}
|
||||
name={authorName}
|
||||
profileName={authorProfileName}
|
||||
title={authorTitle}
|
||||
i18n={i18n}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -16,6 +16,7 @@ export type Reaction = {
|
|||
avatarPath?: string;
|
||||
name?: string;
|
||||
profileName?: string;
|
||||
title: string;
|
||||
isMe?: boolean;
|
||||
phoneNumber?: string;
|
||||
};
|
||||
|
|
@ -156,6 +157,7 @@ export const ReactionViewer = React.forwardRef<HTMLDivElement, Props>(
|
|||
name={from.name}
|
||||
profileName={from.profileName}
|
||||
phoneNumber={from.phoneNumber}
|
||||
title={from.title}
|
||||
i18n={i18n}
|
||||
/>
|
||||
</div>
|
||||
|
|
@ -168,6 +170,8 @@ export const ReactionViewer = React.forwardRef<HTMLDivElement, Props>(
|
|||
name={from.name}
|
||||
profileName={from.profileName}
|
||||
phoneNumber={from.phoneNumber}
|
||||
title={from.title}
|
||||
i18n={i18n}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -5,7 +5,11 @@
|
|||
<SafetyNumberNotification
|
||||
i18n={util.i18n}
|
||||
isGroup={true}
|
||||
contact={{ phoneNumber: '(202) 500-1000', profileName: 'Mr. Fire' }}
|
||||
contact={{
|
||||
phoneNumber: '(202) 500-1000',
|
||||
profileName: 'Mr. Fire',
|
||||
title: 'Mr. Fire',
|
||||
}}
|
||||
onVerify={() => console.log('onVerify')}
|
||||
/>
|
||||
</util.ConversationContext>
|
||||
|
|
@ -18,7 +22,11 @@
|
|||
<SafetyNumberNotification
|
||||
i18n={util.i18n}
|
||||
isGroup={false}
|
||||
contact={{ phoneNumber: '(202) 500-1000', profileName: 'Mr. Fire' }}
|
||||
contact={{
|
||||
phoneNumber: '(202) 500-1000',
|
||||
profileName: 'Mr. Fire',
|
||||
title: 'Mr. Fire',
|
||||
}}
|
||||
onVerify={() => console.log('onVerify')}
|
||||
/>
|
||||
</util.ConversationContext>
|
||||
|
|
|
|||
|
|
@ -6,8 +6,9 @@ import { LocalizerType } from '../../types/Util';
|
|||
|
||||
interface ContactType {
|
||||
id: string;
|
||||
phoneNumber: string;
|
||||
phoneNumber?: string;
|
||||
profileName?: string;
|
||||
title: string;
|
||||
name?: string;
|
||||
}
|
||||
|
||||
|
|
@ -48,7 +49,9 @@ export class SafetyNumberNotification extends React.Component<Props> {
|
|||
name={contact.name}
|
||||
profileName={contact.profileName}
|
||||
phoneNumber={contact.phoneNumber}
|
||||
title={contact.title}
|
||||
module="module-safety-number-notification__contact"
|
||||
i18n={i18n}
|
||||
/>
|
||||
</span>,
|
||||
]}
|
||||
|
|
|
|||
|
|
@ -6,6 +6,7 @@
|
|||
type="fromOther"
|
||||
phoneNumber="(202) 555-1000"
|
||||
profileName="Mr. Fire"
|
||||
title="Mr. Fire"
|
||||
timespan="1 hour"
|
||||
i18n={util.i18n}
|
||||
/>
|
||||
|
|
@ -13,6 +14,7 @@
|
|||
type="fromOther"
|
||||
phoneNumber="(202) 555-1000"
|
||||
profileName="Mr. Fire"
|
||||
title="Mr. Fire"
|
||||
disabled={true}
|
||||
timespan="Off"
|
||||
i18n={util.i18n}
|
||||
|
|
@ -27,12 +29,14 @@
|
|||
<TimerNotification
|
||||
type="fromMe"
|
||||
phoneNumber="(202) 555-1000"
|
||||
title="(202) 555-1000"
|
||||
timespan="1 hour"
|
||||
i18n={util.i18n}
|
||||
/>
|
||||
<TimerNotification
|
||||
type="fromMe"
|
||||
phoneNumber="(202) 555-1000"
|
||||
title="(202) 555-1000"
|
||||
disabled={true}
|
||||
timespan="Off"
|
||||
i18n={util.i18n}
|
||||
|
|
@ -47,12 +51,14 @@
|
|||
<TimerNotification
|
||||
type="fromSync"
|
||||
phoneNumber="(202) 555-1000"
|
||||
title="(202) 555-1000"
|
||||
timespan="1 hour"
|
||||
i18n={util.i18n}
|
||||
/>
|
||||
<TimerNotification
|
||||
type="fromSync"
|
||||
phoneNumber="(202) 555-1000"
|
||||
title="(202) 555-1000"
|
||||
disabled={true}
|
||||
timespan="Off"
|
||||
i18n={util.i18n}
|
||||
|
|
|
|||
|
|
@ -7,8 +7,9 @@ import { LocalizerType } from '../../types/Util';
|
|||
|
||||
export type PropsData = {
|
||||
type: 'fromOther' | 'fromMe' | 'fromSync';
|
||||
phoneNumber: string;
|
||||
phoneNumber?: string;
|
||||
profileName?: string;
|
||||
title: string;
|
||||
name?: string;
|
||||
disabled: boolean;
|
||||
timespan: string;
|
||||
|
|
@ -27,6 +28,7 @@ export class TimerNotification extends React.Component<Props> {
|
|||
name,
|
||||
phoneNumber,
|
||||
profileName,
|
||||
title,
|
||||
timespan,
|
||||
type,
|
||||
disabled,
|
||||
|
|
@ -46,7 +48,9 @@ export class TimerNotification extends React.Component<Props> {
|
|||
key="external-1"
|
||||
phoneNumber={phoneNumber}
|
||||
profileName={profileName}
|
||||
title={title}
|
||||
name={name}
|
||||
i18n={i18n}
|
||||
/>,
|
||||
timespan,
|
||||
]}
|
||||
|
|
|
|||
|
|
@ -10,8 +10,9 @@ interface Props {
|
|||
avatarPath?: string;
|
||||
color: ColorType;
|
||||
name?: string;
|
||||
phoneNumber: string;
|
||||
phoneNumber?: string;
|
||||
profileName?: string;
|
||||
title: string;
|
||||
conversationType: 'group' | 'direct';
|
||||
i18n: LocalizerType;
|
||||
}
|
||||
|
|
@ -24,6 +25,7 @@ export class TypingBubble extends React.PureComponent<Props> {
|
|||
name,
|
||||
phoneNumber,
|
||||
profileName,
|
||||
title,
|
||||
conversationType,
|
||||
i18n,
|
||||
} = this.props;
|
||||
|
|
@ -42,6 +44,7 @@ export class TypingBubble extends React.PureComponent<Props> {
|
|||
name={name}
|
||||
phoneNumber={phoneNumber}
|
||||
profileName={profileName}
|
||||
title={title}
|
||||
size={28}
|
||||
/>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -7,8 +7,9 @@ import { LocalizerType } from '../../types/Util';
|
|||
|
||||
interface ContactType {
|
||||
id: string;
|
||||
phoneNumber: string;
|
||||
phoneNumber?: string;
|
||||
profileName?: string;
|
||||
title: string;
|
||||
name?: string;
|
||||
isMe: boolean;
|
||||
}
|
||||
|
|
@ -63,7 +64,9 @@ export class UnsupportedMessage extends React.Component<Props> {
|
|||
name={contact.name}
|
||||
profileName={contact.profileName}
|
||||
phoneNumber={contact.phoneNumber}
|
||||
title={contact.title}
|
||||
module="module-unsupported-message__contact"
|
||||
i18n={i18n}
|
||||
/>
|
||||
</span>,
|
||||
]}
|
||||
|
|
|
|||
|
|
@ -8,9 +8,10 @@ import { LocalizerType } from '../../types/Util';
|
|||
import { missingCaseError } from '../../util/missingCaseError';
|
||||
|
||||
interface Contact {
|
||||
phoneNumber: string;
|
||||
phoneNumber?: string;
|
||||
profileName?: string;
|
||||
name?: string;
|
||||
title: string;
|
||||
}
|
||||
|
||||
export type PropsData = {
|
||||
|
|
@ -56,7 +57,9 @@ export class VerificationNotification extends React.Component<Props> {
|
|||
name={contact.name}
|
||||
profileName={contact.profileName}
|
||||
phoneNumber={contact.phoneNumber}
|
||||
title={contact.title}
|
||||
module="module-verification-notification__contact"
|
||||
i18n={i18n}
|
||||
/>,
|
||||
]}
|
||||
i18n={i18n}
|
||||
|
|
|
|||
|
|
@ -24,7 +24,7 @@ export function renderAvatar({
|
|||
|
||||
const avatarPath = avatar && avatar.avatar && avatar.avatar.path;
|
||||
const pending = avatar && avatar.avatar && avatar.avatar.pending;
|
||||
const name = getName(contact) || '';
|
||||
const title = getName(contact) || '';
|
||||
const spinnerSvgSize = size < 50 ? 'small' : 'normal';
|
||||
const spinnerSize = size < 50 ? '24px' : undefined;
|
||||
|
||||
|
|
@ -46,7 +46,7 @@ export function renderAvatar({
|
|||
color="grey"
|
||||
conversationType="direct"
|
||||
i18n={i18n}
|
||||
name={name}
|
||||
title={title}
|
||||
size={size}
|
||||
/>
|
||||
);
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue