Skip to content

Commit 7061819

Browse files
MartinCupelaMartinCupela
committed
Revert "feat: allow to customize MessageStatus UI by message delivery status (#2405)"
This reverts commit 7929bc2.
1 parent ded8f05 commit 7061819

File tree

4 files changed

+65
-643
lines changed

4 files changed

+65
-643
lines changed

‎docusaurus/docs/React/components/message-components/ui-components.mdx

-24
Original file line numberDiff line numberDiff line change
@@ -266,30 +266,6 @@ Custom UI component to display a user's avatar (overrides the value from `Compon
266266
| --------- | ---------------------------------------------------------- |
267267
| component | <GHComponentLink text='Avatar' path='/Avatar/Avatar.tsx'/> |
268268

269-
### MessageDeliveredStatus
270-
271-
Custom component to render when message is considered delivered, not read. The default UI renders MessageDeliveredIcon and a tooltip with string 'Delivered'.
272-
273-
| Type |
274-
| --------- |
275-
| component |
276-
277-
### MessageReadStatus
278-
279-
Custom component to render when message is considered delivered and read. The default UI renders the last reader's Avatar and a tooltip with string readers' names.
280-
281-
| Type |
282-
| --------- |
283-
| component |
284-
285-
### MessageSendingStatus
286-
287-
Custom component to render when message is considered as being the in the process of delivery. The default UI renders LoadingIndicator and a tooltip with string 'Sending'.
288-
289-
| Type |
290-
| --------- |
291-
| component |
292-
293269
### messageType
294270

295271
Message type string to be added to CSS class names.

‎src/components/Message/MessageStatus.tsx

+65-83
Original file line numberDiff line numberDiff line change
@@ -19,12 +19,6 @@ import type { DefaultStreamChatGenerics } from '../../types/types';
1919
export type MessageStatusProps = {
2020
/* Custom UI component to display a user's avatar (overrides the value from `ComponentContext`) */
2121
Avatar?: React.ComponentType<AvatarProps>;
22-
/* Custom component to render when message is considered delivered, not read. The default UI renders MessageDeliveredIcon and a tooltip with string 'Delivered'. */
23-
MessageDeliveredStatus?: React.ComponentType;
24-
/* Custom component to render when message is considered delivered and read. The default UI renders the last reader's Avatar and a tooltip with string readers' names. */
25-
MessageReadStatus?: React.ComponentType;
26-
/* Custom component to render when message is considered as being the in the process of delivery. The default UI renders LoadingIndicator and a tooltip with string 'Sending'. */
27-
MessageSendingStatus?: React.ComponentType;
2822
/* Message type string to be added to CSS class names. */
2923
messageType?: string;
3024
/* Allows to customize the username(s) that appear on the message status tooltip */
@@ -38,16 +32,13 @@ const UnMemoizedMessageStatus = <
3832
) => {
3933
const {
4034
Avatar: propAvatar,
41-
MessageDeliveredStatus,
42-
MessageReadStatus,
43-
MessageSendingStatus,
4435
messageType = 'simple',
4536
tooltipUserNameMapper = mapToUserNameOrId,
4637
} = props;
4738

4839
const { handleEnter, handleLeave, tooltipVisible } = useEnterLeaveHandlers<HTMLSpanElement>();
4940

50-
const { client, themeVersion } = useChatContext<StreamChatGenerics>('MessageStatus');
41+
const { client } = useChatContext<StreamChatGenerics>('MessageStatus');
5142
const { Avatar: contextAvatar } = useComponentContext<StreamChatGenerics>('MessageStatus');
5243
const {
5344
isMyMessage,
@@ -57,6 +48,7 @@ const UnMemoizedMessageStatus = <
5748
threadList,
5849
} = useMessageContext<StreamChatGenerics>('MessageStatus');
5950
const { t } = useTranslationContext('MessageStatus');
51+
const { themeVersion } = useChatContext('MessageStatus');
6052
const [referenceElement, setReferenceElement] = useState<HTMLSpanElement | null>(null);
6153

6254
const Avatar = propAvatar || contextAvatar || DefaultAvatar;
@@ -86,79 +78,69 @@ const UnMemoizedMessageStatus = <
8678
onMouseLeave={handleLeave}
8779
ref={setReferenceElement}
8880
>
89-
{sending &&
90-
(MessageSendingStatus ? (
91-
<MessageSendingStatus />
92-
) : (
93-
<>
94-
{themeVersion === '1' && <Tooltip>{t<string>('Sending...')}</Tooltip>}
95-
{themeVersion === '2' && (
96-
<PopperTooltip
97-
offset={[0, 5]}
98-
referenceElement={referenceElement}
99-
visible={tooltipVisible}
100-
>
101-
{t<string>('Sending...')}
102-
</PopperTooltip>
103-
)}
104-
<LoadingIndicator />
105-
</>
106-
))}
107-
108-
{delivered &&
109-
!deliveredAndRead &&
110-
(MessageDeliveredStatus ? (
111-
<MessageDeliveredStatus />
112-
) : (
113-
<>
114-
{themeVersion === '1' && <Tooltip>{t<string>('Delivered')}</Tooltip>}
115-
{themeVersion === '2' && (
116-
<PopperTooltip
117-
offset={[0, 5]}
118-
referenceElement={referenceElement}
119-
visible={tooltipVisible}
120-
>
121-
{t<string>('Delivered')}
122-
</PopperTooltip>
123-
)}
124-
{themeVersion === '2' ? <MessageDeliveredIcon /> : <DeliveredCheckIcon />}
125-
</>
126-
))}
127-
128-
{deliveredAndRead &&
129-
(MessageReadStatus ? (
130-
<MessageReadStatus />
131-
) : (
132-
<>
133-
{themeVersion === '1' && (
134-
<Tooltip>{getReadByTooltipText(readBy, t, client, tooltipUserNameMapper)}</Tooltip>
135-
)}
136-
{themeVersion === '2' && (
137-
<PopperTooltip
138-
offset={[0, 5]}
139-
referenceElement={referenceElement}
140-
visible={tooltipVisible}
141-
>
142-
{getReadByTooltipText(readBy, t, client, tooltipUserNameMapper)}
143-
</PopperTooltip>
144-
)}
145-
<Avatar
146-
image={lastReadUser.image}
147-
name={lastReadUser.name || lastReadUser.id}
148-
size={15}
149-
user={lastReadUser}
150-
/>
151-
152-
{readBy.length > 2 && (
153-
<span
154-
className={`str-chat__message-${messageType}-status-number`}
155-
data-testid='message-status-read-by-many'
156-
>
157-
{readBy.length - 1}
158-
</span>
159-
)}
160-
</>
161-
))}
81+
{sending && (
82+
<>
83+
{themeVersion === '1' && <Tooltip>{t<string>('Sending...')}</Tooltip>}
84+
{themeVersion === '2' && (
85+
<PopperTooltip
86+
offset={[0, 5]}
87+
referenceElement={referenceElement}
88+
visible={tooltipVisible}
89+
>
90+
{t<string>('Sending...')}
91+
</PopperTooltip>
92+
)}
93+
<LoadingIndicator />
94+
</>
95+
)}
96+
97+
{delivered && !deliveredAndRead && (
98+
<>
99+
{themeVersion === '1' && <Tooltip>{t<string>('Delivered')}</Tooltip>}
100+
{themeVersion === '2' && (
101+
<PopperTooltip
102+
offset={[0, 5]}
103+
referenceElement={referenceElement}
104+
visible={tooltipVisible}
105+
>
106+
{t<string>('Delivered')}
107+
</PopperTooltip>
108+
)}
109+
{themeVersion === '2' ? <MessageDeliveredIcon /> : <DeliveredCheckIcon />}
110+
</>
111+
)}
112+
113+
{deliveredAndRead && (
114+
<>
115+
{themeVersion === '1' && (
116+
<Tooltip>{getReadByTooltipText(readBy, t, client, tooltipUserNameMapper)}</Tooltip>
117+
)}
118+
{themeVersion === '2' && (
119+
<PopperTooltip
120+
offset={[0, 5]}
121+
referenceElement={referenceElement}
122+
visible={tooltipVisible}
123+
>
124+
{getReadByTooltipText(readBy, t, client, tooltipUserNameMapper)}
125+
</PopperTooltip>
126+
)}
127+
<Avatar
128+
image={lastReadUser.image}
129+
name={lastReadUser.name || lastReadUser.id}
130+
size={15}
131+
user={lastReadUser}
132+
/>
133+
134+
{readBy.length > 2 && (
135+
<span
136+
className={`str-chat__message-${messageType}-status-number`}
137+
data-testid='message-status-read-by-many'
138+
>
139+
{readBy.length - 1}
140+
</span>
141+
)}
142+
</>
143+
)}
162144
</span>
163145
);
164146
};

0 commit comments

Comments
 (0)