From abca8eec0599e19a798ca734fd9a021b9954e86f Mon Sep 17 00:00:00 2001 From: martincupela Date: Wed, 12 Feb 2025 16:10:10 +0100 Subject: [PATCH] chore: replace JSX.Element use with ReactNode --- src/components/ChannelList/ChannelList.tsx | 4 ++-- src/components/ChannelPreview/ChannelPreview.tsx | 8 ++++---- src/components/ChannelPreview/utils.tsx | 12 ++++++------ src/components/Message/types.ts | 3 ++- src/context/MessageContext.tsx | 4 ++-- 5 files changed, 16 insertions(+), 15 deletions(-) diff --git a/src/components/ChannelList/ChannelList.tsx b/src/components/ChannelList/ChannelList.tsx index 4863242ebc..a69f42b7d2 100644 --- a/src/components/ChannelList/ChannelList.tsx +++ b/src/components/ChannelList/ChannelList.tsx @@ -1,4 +1,4 @@ -import React, { useCallback, useEffect, useRef, useState } from 'react'; +import React, { ReactNode, useCallback, useEffect, useRef, useState } from 'react'; import clsx from 'clsx'; import { ChannelListMessenger, ChannelListMessengerProps } from './ChannelListMessenger'; @@ -97,7 +97,7 @@ export type ChannelListProps< t: TranslationContextValue['t'], userLanguage: TranslationContextValue['userLanguage'], isMessageAIGenerated?: ChatContextValue['isMessageAIGenerated'], - ) => string | JSX.Element; + ) => ReactNode; /** Custom UI component to display the container for the queried channels, defaults to and accepts same props as: [ChannelListMessenger](https://github.com/GetStream/stream-chat-react/blob/master/src/components/ChannelList/ChannelListMessenger.tsx) */ List?: React.ComponentType>; /** Custom UI component to display the loading error indicator, defaults to component that renders null */ diff --git a/src/components/ChannelPreview/ChannelPreview.tsx b/src/components/ChannelPreview/ChannelPreview.tsx index fb8a5b77de..3bdcaeabda 100644 --- a/src/components/ChannelPreview/ChannelPreview.tsx +++ b/src/components/ChannelPreview/ChannelPreview.tsx @@ -1,5 +1,5 @@ import throttle from 'lodash.throttle'; -import React, { useEffect, useMemo, useState } from 'react'; +import React, { ReactNode, useEffect, useMemo, useState } from 'react'; import { ChannelPreviewMessenger } from './ChannelPreviewMessenger'; import { useIsChannelMuted } from './hooks/useIsChannelMuted'; @@ -33,9 +33,9 @@ export type ChannelPreviewUIComponentProps< /** The last message received in a channel */ lastMessage?: StreamMessage; /** @deprecated Use latestMessagePreview prop instead. */ - latestMessage?: string | JSX.Element; + latestMessage?: ReactNode; /** Latest message preview to display, will be a string or JSX element supporting markdown. */ - latestMessagePreview?: string | JSX.Element; + latestMessagePreview?: ReactNode; /** Status describing whether own message has been delivered or read by another. If the last message is not an own message, then the status is undefined. */ messageDeliveryStatus?: MessageDeliveryStatus; /** Number of unread Messages */ @@ -62,7 +62,7 @@ export type ChannelPreviewProps< channel: Channel, t: TranslationContextValue['t'], userLanguage: TranslationContextValue['userLanguage'], - ) => string | JSX.Element; + ) => ReactNode; key?: string; /** Custom ChannelPreview click handler function */ onSelect?: (event: React.MouseEvent) => void; diff --git a/src/components/ChannelPreview/utils.tsx b/src/components/ChannelPreview/utils.tsx index 492b4293f9..7a0fd3ec5a 100644 --- a/src/components/ChannelPreview/utils.tsx +++ b/src/components/ChannelPreview/utils.tsx @@ -1,4 +1,4 @@ -import React from 'react'; +import React, { ReactNode } from 'react'; import ReactMarkdown from 'react-markdown'; @@ -37,7 +37,7 @@ export const getLatestMessagePreview = < t: TranslationContextValue['t'], userLanguage: TranslationContextValue['userLanguage'] = 'en', isMessageAIGenerated?: ChatContextValue['isMessageAIGenerated'], -): string | JSX.Element => { +): ReactNode => { const latestMessage = channel.state.latestMessages[channel.state.latestMessages.length - 1]; @@ -47,11 +47,11 @@ export const getLatestMessagePreview = < const poll = latestMessage?.poll; if (!latestMessage) { - return t('Nothing yet...'); + return t('Nothing yet...'); } if (latestMessage.deleted_at) { - return t('Message deleted'); + return t('Message deleted'); } if (poll) { @@ -94,10 +94,10 @@ export const getLatestMessagePreview = < } if (latestMessage.attachments?.length) { - return t('🏙 Attachment...'); + return t('🏙 Attachment...'); } - return t('Empty message...'); + return t('Empty message...'); }; export type GroupChannelDisplayInfo = { image?: string; name?: string }[]; diff --git a/src/components/Message/types.ts b/src/components/Message/types.ts index fb991e1af0..6f3c1b1a9b 100644 --- a/src/components/Message/types.ts +++ b/src/components/Message/types.ts @@ -1,4 +1,5 @@ import type { TFunction } from 'i18next'; +import type { ReactNode } from 'react'; import type { ReactionSort, UserResponse } from 'stream-chat'; import type { PinPermissions, UserEventHandler } from './hooks'; @@ -109,7 +110,7 @@ export type MessageProps< text?: string, mentioned_users?: UserResponse[], options?: RenderTextOptions, - ) => JSX.Element | null; + ) => ReactNode; /** Custom retry send message handler to override default in [ChannelActionContext](https://getstream.io/chat/docs/sdk/react/contexts/channel_action_context/) */ retrySendMessage?: ChannelActionContextValue['retrySendMessage']; /** Comparator function to sort the list of reacted users diff --git a/src/context/MessageContext.tsx b/src/context/MessageContext.tsx index 063b4b7d10..cf3ebc8110 100644 --- a/src/context/MessageContext.tsx +++ b/src/context/MessageContext.tsx @@ -1,4 +1,4 @@ -import React, { PropsWithChildren, useContext } from 'react'; +import React, { PropsWithChildren, ReactNode, useContext } from 'react'; import type { Mute, ReactionResponse, ReactionSort, UserResponse } from 'stream-chat'; @@ -130,7 +130,7 @@ export type MessageContextValue< text?: string, mentioned_users?: UserResponse[], options?: RenderTextOptions, - ) => JSX.Element | null; + ) => ReactNode; /** Comparator function to sort the list of reacted users * @deprecated use `reactionDetailsSort` instead */