mirrors/signal-desktop
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages 2 Wiki Activity Actions

Refactor ConversationHeader into function component

Browse source
This commit is contained in:
Jamie Kyle 2024-03-19 06:46:09 -07:00 • committed by GitHub
parent 9533796c81
commit 33d30c6e74
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
6 changed files with 1273 additions and 1112 deletions
Download patch file Download diff file Expand all files Collapse all files

325
ts/components/conversation/ConversationHeader.stories.tsx
View file

@ -46,32 +46,32 @@ const commonProps = {
i18n,
setDisappearingMessages: action('setDisappearingMessages'),
destroyMessages: action('destroyMessages'),
leaveGroup: action('leaveGroup'),
onOutgoingAudioCallInConversation: action(
'onOutgoingAudioCallInConversation'
onConversationAccept: action('onConversationAccept'),
onConversationArchive: action('onConversationArchive'),
onConversationBlock: action('onConversationBlock'),
onConversationBlockAndReportSpam: action('onConversationBlockAndReportSpam'),
onConversationDelete: action('onConversationDelete'),
onConversationDeleteMessages: action('onConversationDeleteMessages'),
onConversationDisappearingMessagesChange: action(
'onConversationDisappearingMessagesChange'
),
onOutgoingVideoCallInConversation: action(
'onOutgoingVideoCallInConversation'
onConversationLeaveGroup: action('onConversationLeaveGroup'),
onConversationMarkUnread: action('onConversationMarkUnread'),
onConversationMuteExpirationChange: action(
'onConversationMuteExpirationChange'
),
onArchive: action('onArchive'),
onMarkUnread: action('onMarkUnread'),
toggleSelectMode: action('toggleSelectMode'),
onMoveToInbox: action('onMoveToInbox'),
pushPanelForConversation: action('pushPanelForConversation'),
popPanelForConversation: action('popPanelForConversation'),
searchInConversation: action('searchInConversation'),
setMuteExpiration: action('onSetMuteNotifications'),
setPinned: action('setPinned'),
viewUserStories: action('viewUserStories'),
acceptConversation: action('acceptConversation'),
blockAndReportSpam: action('blockAndReportSpam'),
blockConversation: action('blockConversation'),
reportSpam: action('reportSpam'),
deleteConversation: action('deleteConversation'),
onConversationPin: action('onConversationPin'),
onConversationReportSpam: action('onConversationReportSpam'),
onConversationUnarchive: action('onConversationUnarchive'),
onConversationUnpin: action('onConversationUnpin'),
onOutgoingAudioCall: action('onOutgoingAudioCall'),
onOutgoingVideoCall: action('onOutgoingVideoCall'),
onSearchInConversation: action('onSearchInConversation'),
onSelectModeEnter: action('onSelectModeEnter'),
onShowMembers: action('onShowMembers'),
onViewConversationDetails: action('onViewConversationDetails'),
onViewRecentMedia: action('onViewRecentMedia'),
onViewUserStories: action('onViewUserStories'),
};
export function PrivateConvo(): JSX.Element {
@ -80,69 +80,79 @@ export function PrivateConvo(): JSX.Element {
title: 'With name and profile, verified',
props: {
...commonProps,
color: getRandomColor(),
isVerified: true,
avatarPath: gifUrl,
title: 'Someone 🔥 Somewhere',
name: 'Someone 🔥 Somewhere',
phoneNumber: '(202) 555-0001',
type: 'direct',
id: '1',
profileName: '🔥Flames🔥',
acceptedMessageRequest: true,
conversation: getDefaultConversation({
color: getRandomColor(),
isVerified: true,
avatarPath: gifUrl,
title: 'Someone 🔥 Somewhere',
name: 'Someone 🔥 Somewhere',
phoneNumber: '(202) 555-0001',
type: 'direct',
id: '1',
profileName: '🔥Flames🔥',
acceptedMessageRequest: true,
}),
},
},
{
title: 'With name, not verified, no avatar',
props: {
...commonProps,
color: getRandomColor(),
isVerified: false,
title: 'Someone 🔥 Somewhere',
name: 'Someone 🔥 Somewhere',
phoneNumber: '(202) 555-0002',
type: 'direct',
id: '2',
acceptedMessageRequest: true,
conversation: getDefaultConversation({
color: getRandomColor(),
isVerified: false,
title: 'Someone 🔥 Somewhere',
name: 'Someone 🔥 Somewhere',
phoneNumber: '(202) 555-0002',
type: 'direct',
id: '2',
acceptedMessageRequest: true,
}),
},
},
{
title: 'With name, not verified, descenders',
props: {
...commonProps,
color: getRandomColor(),
isVerified: false,
title: 'Joyrey 🔥 Leppey',
name: 'Joyrey 🔥 Leppey',
phoneNumber: '(202) 555-0002',
type: 'direct',
id: '3',
acceptedMessageRequest: true,
conversation: getDefaultConversation({
color: getRandomColor(),
isVerified: false,
title: 'Joyrey 🔥 Leppey',
name: 'Joyrey 🔥 Leppey',
phoneNumber: '(202) 555-0002',
type: 'direct',
id: '3',
acceptedMessageRequest: true,
}),
},
},
{
title: 'Profile, no name',
props: {
...commonProps,
color: getRandomColor(),
isVerified: false,
phoneNumber: '(202) 555-0003',
type: 'direct',
id: '4',
title: '🔥Flames🔥',
profileName: '🔥Flames🔥',
acceptedMessageRequest: true,
conversation: getDefaultConversation({
color: getRandomColor(),
isVerified: false,
phoneNumber: '(202) 555-0003',
type: 'direct',
id: '4',
title: '🔥Flames🔥',
profileName: '🔥Flames🔥',
acceptedMessageRequest: true,
}),
},
},
{
title: 'No name, no profile, no color',
props: {
...commonProps,
title: '(202) 555-0011',
phoneNumber: '(202) 555-0011',
type: 'direct',
id: '5',
acceptedMessageRequest: true,
conversation: getDefaultConversation({
title: '(202) 555-0011',
phoneNumber: '(202) 555-0011',
type: 'direct',
id: '5',
acceptedMessageRequest: true,
}),
},
},
{
@ -150,66 +160,76 @@ export function PrivateConvo(): JSX.Element {
props: {
...commonProps,
showBackButton: true,
color: getRandomColor(),
phoneNumber: '(202) 555-0004',
title: '(202) 555-0004',
type: 'direct',
id: '6',
acceptedMessageRequest: true,
conversation: getDefaultConversation({
color: getRandomColor(),
phoneNumber: '(202) 555-0004',
title: '(202) 555-0004',
type: 'direct',
id: '6',
acceptedMessageRequest: true,
}),
},
},
{
title: 'Disappearing messages set',
props: {
...commonProps,
color: getRandomColor(),
title: '(202) 555-0005',
phoneNumber: '(202) 555-0005',
type: 'direct',
id: '7',
expireTimer: DurationInSeconds.fromSeconds(10),
acceptedMessageRequest: true,
conversation: getDefaultConversation({
color: getRandomColor(),
title: '(202) 555-0005',
phoneNumber: '(202) 555-0005',
type: 'direct',
id: '7',
expireTimer: DurationInSeconds.fromSeconds(10),
acceptedMessageRequest: true,
}),
},
},
{
title: 'Disappearing messages + verified',
props: {
...commonProps,
color: getRandomColor(),
title: '(202) 555-0005',
phoneNumber: '(202) 555-0005',
type: 'direct',
id: '8',
expireTimer: DurationInSeconds.fromSeconds(300),
acceptedMessageRequest: true,
isVerified: true,
canChangeTimer: true,
conversation: getDefaultConversation({
color: getRandomColor(),
title: '(202) 555-0005',
phoneNumber: '(202) 555-0005',
type: 'direct',
id: '8',
expireTimer: DurationInSeconds.fromSeconds(300),
acceptedMessageRequest: true,
isVerified: true,
canChangeTimer: true,
}),
},
},
{
title: 'Muting Conversation',
props: {
...commonProps,
color: getRandomColor(),
title: '(202) 555-0006',
phoneNumber: '(202) 555-0006',
type: 'direct',
id: '9',
acceptedMessageRequest: true,
muteExpiresAt: new Date('3000-10-18T11:11:11Z').valueOf(),
conversation: getDefaultConversation({
color: getRandomColor(),
title: '(202) 555-0006',
phoneNumber: '(202) 555-0006',
type: 'direct',
id: '9',
acceptedMessageRequest: true,
muteExpiresAt: new Date('3000-10-18T11:11:11Z').valueOf(),
}),
},
},
{
title: 'SMS-only conversation',
props: {
...commonProps,
color: getRandomColor(),
title: '(202) 555-0006',
phoneNumber: '(202) 555-0006',
type: 'direct',
id: '10',
acceptedMessageRequest: true,
isSMSOnly: true,
conversation: getDefaultConversation({
color: getRandomColor(),
title: '(202) 555-0006',
phoneNumber: '(202) 555-0006',
type: 'direct',
id: '10',
acceptedMessageRequest: true,
}),
},
},
];
@ -236,62 +256,71 @@ export function Group(): JSX.Element {
title: 'Basic',
props: {
...commonProps,
color: getRandomColor(),
title: 'Typescript support group',
name: 'Typescript support group',
phoneNumber: '',
id: '11',
type: 'group',
expireTimer: DurationInSeconds.fromSeconds(10),
acceptedMessageRequest: true,
outgoingCallButtonStyle: OutgoingCallButtonStyle.JustVideo,
conversation: getDefaultConversation({
color: getRandomColor(),
title: 'Typescript support group',
name: 'Typescript support group',
phoneNumber: '',
id: '11',
type: 'group',
expireTimer: DurationInSeconds.fromSeconds(10),
acceptedMessageRequest: true,
}),
},
},
{
title: 'In a group you left - no disappearing messages',
props: {
...commonProps,
color: getRandomColor(),
title: 'Typescript support group',
name: 'Typescript support group',
phoneNumber: '',
id: '12',
type: 'group',
left: true,
expireTimer: DurationInSeconds.fromSeconds(10),
acceptedMessageRequest: true,
outgoingCallButtonStyle: OutgoingCallButtonStyle.JustVideo,
conversation: getDefaultConversation({
color: getRandomColor(),
title: 'Typescript support group',
name: 'Typescript support group',
phoneNumber: '',
id: '12',
type: 'group',
left: true,
expireTimer: DurationInSeconds.fromSeconds(10),
acceptedMessageRequest: true,
}),
},
},
{
title: 'In a group with an active group call',
props: {
...commonProps,
color: getRandomColor(),
title: 'Typescript support group',
name: 'Typescript support group',
phoneNumber: '',
id: '13',
type: 'group',
expireTimer: DurationInSeconds.fromSeconds(10),
acceptedMessageRequest: true,
outgoingCallButtonStyle: OutgoingCallButtonStyle.Join,
conversation: getDefaultConversation({
color: getRandomColor(),
title: 'Typescript support group',
name: 'Typescript support group',
phoneNumber: '',
id: '13',
type: 'group',
expireTimer: DurationInSeconds.fromSeconds(10),
acceptedMessageRequest: true,
}),
},
},
{
title: 'In a forever muted group',
props: {
...commonProps,
color: getRandomColor(),
title: 'Way too many messages',
name: 'Way too many messages',
phoneNumber: '',
id: '14',
type: 'group',
expireTimer: DurationInSeconds.fromSeconds(10),
acceptedMessageRequest: true,
outgoingCallButtonStyle: OutgoingCallButtonStyle.JustVideo,
muteExpiresAt: Infinity,
conversation: getDefaultConversation({
color: getRandomColor(),
title: 'Way too many messages',
name: 'Way too many messages',
phoneNumber: '',
id: '14',
type: 'group',
expireTimer: DurationInSeconds.fromSeconds(10),
acceptedMessageRequest: true,
muteExpiresAt: Infinity,
}),
},
},
];
@ -318,14 +347,16 @@ export function NoteToSelf(): JSX.Element {
title: 'In chat with yourself',
props: {
...commonProps,
color: getRandomColor(),
title: '(202) 555-0007',
phoneNumber: '(202) 555-0007',
id: '15',
type: 'direct',
isMe: true,
acceptedMessageRequest: true,
outgoingCallButtonStyle: OutgoingCallButtonStyle.None,
conversation: getDefaultConversation({
color: getRandomColor(),
title: '(202) 555-0007',
phoneNumber: '(202) 555-0007',
id: '15',
type: 'direct',
isMe: true,
acceptedMessageRequest: true,
}),
},
},
];
@ -352,14 +383,16 @@ export function Unaccepted(): JSX.Element {
title: '1:1 conversation',
props: {
...commonProps,
color: getRandomColor(),
title: '(202) 555-0007',
phoneNumber: '(202) 555-0007',
id: '16',
type: 'direct',
isMe: false,
acceptedMessageRequest: false,
outgoingCallButtonStyle: OutgoingCallButtonStyle.None,
conversation: getDefaultConversation({
color: getRandomColor(),
title: '(202) 555-0007',
phoneNumber: '(202) 555-0007',
id: '16',
type: 'direct',
isMe: false,
acceptedMessageRequest: false,
}),
},
},
];

1677
ts/components/conversation/ConversationHeader.tsx
View file

File diff suppressed because it is too large Load diff