-
Notifications
You must be signed in to change notification settings - Fork 290
/
MessageHeader.tsx
122 lines (111 loc) 路 3.7 KB
/
MessageHeader.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
/*
* Wire
* Copyright (C) 2023 Wire Swiss GmbH
*
* This program is free software: you can redistribute it and/or modify
* it under the terms of the GNU General Public License as published by
* the Free Software Foundation, either version 3 of the License, or
* (at your option) any later version.
*
* This program is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
* GNU General Public License for more details.
*
* You should have received a copy of the GNU General Public License
* along with this program. If not, see http://www.gnu.org/licenses/.
*
*/
import {AVATAR_SIZE, Avatar} from 'Components/Avatar';
import {Icon} from 'Components/Icon';
import {ContentMessage} from 'src/script/entity/message/ContentMessage';
import {DeleteMessage} from 'src/script/entity/message/DeleteMessage';
import {User} from 'src/script/entity/User';
import {ServiceEntity} from 'src/script/integration/ServiceEntity';
import {useKoSubscribableChildren} from 'Util/ComponentUtil';
import {t} from 'Util/LocalizerUtil';
type MessageHeaderParams = {
message: ContentMessage | DeleteMessage;
onClickAvatar: (user: User | ServiceEntity) => void;
focusTabIndex?: number;
/** Will not display the guest, federated or service badges next to the user name */
noBadges?: boolean;
/** Will not use the user's accent color to display the user name */
noColor?: boolean;
uieName?: string;
children?: React.ReactNode;
};
function BadgeSection({sender}: {sender: User}) {
return (
<>
{sender.isService && (
<span className="message-header-icon-service">
<Icon.Service />
</span>
)}
{sender.isExternal() && (
<span
className="message-header-icon-external with-tooltip with-tooltip--external"
data-tooltip={t('rolePartner')}
data-uie-name="sender-external"
>
<Icon.External />
</span>
)}
{sender.isFederated && (
<span
className="message-header-icon-guest with-tooltip with-tooltip--external"
data-tooltip={sender.handle}
data-uie-name="sender-federated"
>
<Icon.Federation />
</span>
)}
{sender.isDirectGuest() && (
<span
className="message-header-icon-guest with-tooltip with-tooltip--external"
data-tooltip={t('conversationGuestIndicator')}
data-uie-name="sender-guest"
>
<Icon.Guest />
</span>
)}
</>
);
}
export function MessageHeader({
message,
onClickAvatar,
focusTabIndex,
noBadges = false,
noColor = false,
uieName = '',
children,
}: MessageHeaderParams) {
const {user: sender} = useKoSubscribableChildren(message, ['user']);
const {name: senderName, isAvailable} = useKoSubscribableChildren(sender, ['name', 'isAvailable']);
return (
<div className="message-header">
<div className="message-header-icon">
<Avatar
tabIndex={focusTabIndex}
participant={sender}
onAvatarClick={onClickAvatar}
avatarSize={AVATAR_SIZE.X_SMALL}
/>
</div>
<div className="message-header-label" data-uie-name={uieName}>
<h4
className={`message-header-label-sender ${!noColor && message.accent_color()}`}
css={!isAvailable ? {color: 'var(--gray-70)'} : {}}
data-uie-name={uieName ? `${uieName}-sender-name` : 'sender-name'}
data-uie-uid={sender.id}
>
{!isAvailable ? t('unavailableUser') : senderName}
</h4>
{!noBadges && <BadgeSection sender={sender} />}
{children}
</div>
</div>
);
}