Conversation details changes for PNP
Co-authored-by: Scott Nonnenberg <scott@signal.org>
This commit is contained in:
parent
1a74da0c26
commit
eb82ace2de
49 changed files with 1660 additions and 699 deletions
|
@ -12,15 +12,20 @@ import { assertDev } from '../../util/assert';
|
|||
import { Avatar, AvatarSize } from '../Avatar';
|
||||
import { ContactName } from './ContactName';
|
||||
import { SharedGroupNames } from '../SharedGroupNames';
|
||||
import { UserText } from '../UserText';
|
||||
import { Intl } from '../Intl';
|
||||
|
||||
type PropsType = {
|
||||
export type PropsType = Readonly<{
|
||||
children?: ReactNode;
|
||||
conversation: ConversationType;
|
||||
getPreferredBadge: PreferredBadgeSelectorType;
|
||||
i18n: LocalizerType;
|
||||
onClick?: () => void;
|
||||
toggleSignalConnectionsModal: () => void;
|
||||
theme: ThemeType;
|
||||
};
|
||||
oldName: string | undefined;
|
||||
isSignalConnection: boolean;
|
||||
}>;
|
||||
|
||||
export function ContactSpoofingReviewDialogPerson({
|
||||
children,
|
||||
|
@ -28,13 +33,44 @@ export function ContactSpoofingReviewDialogPerson({
|
|||
getPreferredBadge,
|
||||
i18n,
|
||||
onClick,
|
||||
toggleSignalConnectionsModal,
|
||||
theme,
|
||||
oldName,
|
||||
isSignalConnection,
|
||||
}: PropsType): JSX.Element {
|
||||
assertDev(
|
||||
conversation.type === 'direct',
|
||||
'<ContactSpoofingReviewDialogPerson> expected a direct conversation'
|
||||
);
|
||||
|
||||
const newName = conversation.profileName || conversation.title;
|
||||
|
||||
let callout: JSX.Element | undefined;
|
||||
if (oldName && oldName !== newName) {
|
||||
callout = (
|
||||
<div className="module-ContactSpoofingReviewDialogPerson__info__property">
|
||||
<i className="module-ContactSpoofingReviewDialogPerson__info__property__icon module-ContactSpoofingReviewDialogPerson__info__property__icon--person" />
|
||||
<div>
|
||||
<Intl
|
||||
i18n={i18n}
|
||||
id="icu:ContactSpoofingReviewDialog__group__name-change-info"
|
||||
components={{
|
||||
oldName: <UserText text={oldName} />,
|
||||
newName: <UserText text={newName} />,
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
const name = (
|
||||
<ContactName
|
||||
module="module-ContactSpoofingReviewDialogPerson__info__contact-name"
|
||||
title={conversation.title}
|
||||
/>
|
||||
);
|
||||
|
||||
const contents = (
|
||||
<>
|
||||
<Avatar
|
||||
|
@ -45,40 +81,59 @@ export function ContactSpoofingReviewDialogPerson({
|
|||
className="module-ContactSpoofingReviewDialogPerson__avatar"
|
||||
i18n={i18n}
|
||||
theme={theme}
|
||||
onClick={onClick}
|
||||
/>
|
||||
<div className="module-ContactSpoofingReviewDialogPerson__info">
|
||||
<ContactName
|
||||
module="module-ContactSpoofingReviewDialogPerson__info__contact-name"
|
||||
title={conversation.title}
|
||||
/>
|
||||
{onClick ? (
|
||||
<button
|
||||
type="button"
|
||||
className="module-ContactSpoofingReviewDialogPerson"
|
||||
onClick={onClick}
|
||||
>
|
||||
{name}
|
||||
</button>
|
||||
) : (
|
||||
name
|
||||
)}
|
||||
{callout}
|
||||
{conversation.phoneNumber ? (
|
||||
<div className="module-ContactSpoofingReviewDialogPerson__info__property">
|
||||
{conversation.phoneNumber}
|
||||
<i className="module-ContactSpoofingReviewDialogPerson__info__property__icon module-ContactSpoofingReviewDialogPerson__info__property__icon--phone" />
|
||||
<div>{conversation.phoneNumber}</div>
|
||||
</div>
|
||||
) : null}
|
||||
{isSignalConnection ? (
|
||||
<div className="module-ContactSpoofingReviewDialogPerson__info__property">
|
||||
<i className="module-ContactSpoofingReviewDialogPerson__info__property__icon module-ContactSpoofingReviewDialogPerson__info__property__icon--connections" />
|
||||
<button
|
||||
type="button"
|
||||
className="module-ContactSpoofingReviewDialogPerson__info__property__signal-connection"
|
||||
onClick={toggleSignalConnectionsModal}
|
||||
>
|
||||
{i18n('icu:ContactSpoofingReviewDialog__signal-connection')}
|
||||
</button>
|
||||
</div>
|
||||
) : null}
|
||||
<div className="module-ContactSpoofingReviewDialogPerson__info__property">
|
||||
<SharedGroupNames
|
||||
i18n={i18n}
|
||||
sharedGroupNames={conversation.sharedGroupNames || []}
|
||||
/>
|
||||
<i className="module-ContactSpoofingReviewDialogPerson__info__property__icon module-ContactSpoofingReviewDialogPerson__info__property__icon--group" />
|
||||
<div>
|
||||
{conversation.sharedGroupNames?.length ? (
|
||||
<SharedGroupNames
|
||||
i18n={i18n}
|
||||
sharedGroupNames={conversation.sharedGroupNames || []}
|
||||
/>
|
||||
) : (
|
||||
i18n(
|
||||
'icu:ContactSpoofingReviewDialog__group__members__no-shared-groups'
|
||||
)
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
{children}
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
|
||||
if (onClick) {
|
||||
return (
|
||||
<button
|
||||
type="button"
|
||||
className="module-ContactSpoofingReviewDialogPerson"
|
||||
onClick={onClick}
|
||||
>
|
||||
{contents}
|
||||
</button>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="module-ContactSpoofingReviewDialogPerson">{contents}</div>
|
||||
);
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue