diff --git a/examples/vite/src/App.tsx b/examples/vite/src/App.tsx index 2e7f5062a..63c24c12b 100644 --- a/examples/vite/src/App.tsx +++ b/examples/vite/src/App.tsx @@ -250,7 +250,6 @@ const App = () => { overrides={{ emojiSearchIndex: SearchIndex, EmojiPicker: EmojiPickerWithCustomOptions, - MessageListNotifications: ConfigurableNotificationList, NotificationList: ConfigurableNotificationList, ReactionsList: CustomMessageReactions, reactionOptions: newReactionOptions, diff --git a/src/components/Attachment/VoiceRecording.tsx b/src/components/Attachment/VoiceRecording.tsx index 852ff1fb5..6c4e34677 100644 --- a/src/components/Attachment/VoiceRecording.tsx +++ b/src/components/Attachment/VoiceRecording.tsx @@ -9,9 +9,9 @@ import { type AudioPlayerState, DurationDisplay, PlaybackRateButton, - useAudioPlayer, WaveProgressBar, } from '../AudioPlayback'; +import { useAudioPlayer } from '../AudioPlayback/WithAudioPlayback'; import { useStateStore } from '../../store'; import { PlayButton } from '../Button'; diff --git a/src/components/MessageInput/AttachmentPreviewList/AudioAttachmentPreview.tsx b/src/components/MessageInput/AttachmentPreviewList/AudioAttachmentPreview.tsx index 695f39e72..86c54f1bc 100644 --- a/src/components/MessageInput/AttachmentPreviewList/AudioAttachmentPreview.tsx +++ b/src/components/MessageInput/AttachmentPreviewList/AudioAttachmentPreview.tsx @@ -17,9 +17,9 @@ import { type AudioPlayerState, DurationDisplay, PlaybackRateButton, - useAudioPlayer, WaveProgressBar, } from '../../AudioPlayback'; +import { useAudioPlayer } from '../../AudioPlayback/WithAudioPlayback'; import { useStateStore } from '../../../store'; export type AudioAttachmentPreviewProps> = diff --git a/src/components/MessageList/MessageList.tsx b/src/components/MessageList/MessageList.tsx index f3fc8f15c..481a9733d 100644 --- a/src/components/MessageList/MessageList.tsx +++ b/src/components/MessageList/MessageList.tsx @@ -43,7 +43,10 @@ import { } from '../../constants/limits'; import { useLastOwnMessage } from './hooks/useLastOwnMessage'; import { ScrollToLatestMessageButton } from './ScrollToLatestMessageButton'; -import { NotificationList, useNotificationTarget } from '../Notifications'; +import { + NotificationList as DefaultNotificationList, + useNotificationTarget, +} from '../Notifications'; type MessageListWithContextProps = Omit< ChannelStateContextValue, @@ -95,15 +98,12 @@ const MessageListWithContext = (props: MessageListWithContextProps) => { EmptyStateIndicator = DefaultEmptyStateIndicator, LoadingIndicator = DefaultLoadingIndicator, MessageListMainPanel = DefaultMessageListMainPanel, - MessageListNotifications = undefined, MessageListWrapper = 'ul', NewMessageNotification = DefaultNewMessageNotification, - NotificationList: NotificationListFromContext = NotificationList, + NotificationList = DefaultNotificationList, TypingIndicator = DefaultTypingIndicator, UnreadMessagesNotification = DefaultUnreadMessagesNotification, - } = useComponentContext('MessageList'); - const MessageListNotificationsComponent = - MessageListNotifications ?? NotificationListFromContext; + } = useComponentContext(); const notificationTarget = useNotificationTarget(); @@ -307,7 +307,7 @@ const MessageListWithContext = (props: MessageListWithContextProps) => { threadList={threadList} /> - + diff --git a/src/components/MessageList/MessageListNotifications.tsx b/src/components/MessageList/MessageListNotifications.tsx deleted file mode 100644 index f055433bc..000000000 --- a/src/components/MessageList/MessageListNotifications.tsx +++ /dev/null @@ -1,25 +0,0 @@ -import React from 'react'; - -import { ConnectionStatus } from './ConnectionStatus'; -import { CustomNotification } from './CustomNotification'; - -import type { ChannelNotifications } from '../../context/ChannelStateContext'; - -export type MessageListNotificationsProps = { - notifications: ChannelNotifications; -}; - -export const MessageListNotifications = (props: MessageListNotificationsProps) => { - const { notifications } = props; - - return ( -
- {notifications.map((notification) => ( - - {notification.text} - - ))} - -
- ); -}; diff --git a/src/components/MessageList/VirtualizedMessageList.tsx b/src/components/MessageList/VirtualizedMessageList.tsx index 51ff5454c..94d2d7374 100644 --- a/src/components/MessageList/VirtualizedMessageList.tsx +++ b/src/components/MessageList/VirtualizedMessageList.tsx @@ -46,7 +46,10 @@ import { } from '../MessageList'; import { DateSeparator as DefaultDateSeparator } from '../DateSeparator'; import { EventComponent as DefaultMessageSystem } from '../EventComponent'; -import { NotificationList, useNotificationTarget } from '../Notifications'; +import { + NotificationList as DefaultNotificationList, + useNotificationTarget, +} from '../Notifications'; import { DialogManagerProvider } from '../../context'; import type { ChannelActionContextValue } from '../../context/ChannelActionContext'; @@ -245,17 +248,14 @@ const VirtualizedMessageListWithContext = ( DateSeparator = DefaultDateSeparator, GiphyPreviewMessage = DefaultGiphyPreviewMessage, MessageListMainPanel = DefaultMessageListMainPanel, - MessageListNotifications = undefined, MessageSystem = DefaultMessageSystem, NewMessageNotification = DefaultNewMessageNotification, - NotificationList: NotificationListFromContext = NotificationList, + NotificationList = DefaultNotificationList, TypingIndicator, UnreadMessagesNotification = DefaultUnreadMessagesNotification, UnreadMessagesSeparator = DefaultUnreadMessagesSeparator, VirtualMessage: MessageUIComponentFromContext = MessageSimple, } = useComponentContext('VirtualizedMessageList'); - const MessageListNotificationsComponent = - MessageListNotifications ?? NotificationListFromContext; const MessageUIComponent = MessageUIComponentFromProps || MessageUIComponentFromContext; const { client, customClasses } = useChatContext('VirtualizedMessageList'); @@ -596,7 +596,7 @@ const VirtualizedMessageListWithContext = ( /> - + {giphyPreviewMessage && } diff --git a/src/components/MessageList/index.ts b/src/components/MessageList/index.ts index 985ddbec2..ae3c7be95 100644 --- a/src/components/MessageList/index.ts +++ b/src/components/MessageList/index.ts @@ -1,7 +1,6 @@ export * from './ConnectionStatus'; // TODO: export this under its own folder export * from './GiphyPreviewMessage'; export * from './MessageList'; -export * from './MessageListNotifications'; export * from './NewMessageNotification'; export * from './ScrollToLatestMessageButton'; export * from './UnreadMessagesNotification'; diff --git a/src/context/ComponentContext.tsx b/src/context/ComponentContext.tsx index eb1fd945b..2da80242d 100644 --- a/src/context/ComponentContext.tsx +++ b/src/context/ComponentContext.tsx @@ -149,8 +149,6 @@ export type ComponentContextValue = { MessageListMainPanel?: React.ComponentType; /** Custom UI component to display notifications rendered by `NotificationList`, defaults to and accepts same props as: [NotificationList](https://github.com/GetStream/stream-chat-react/blob/master/src/components/Notifications/NotificationList.tsx) */ NotificationList?: React.ComponentType; - /** Custom UI component that displays message and connection status notifications in the `MessageList`, defaults to and accepts same props as [DefaultMessageListNotifications](https://github.com/GetStream/stream-chat-react/blob/master/src/components/MessageList/MessageListNotifications.tsx) */ - MessageListNotifications?: React.ComponentType; /** Custom UI component to display a notification when scrolled up the list and new messages arrive, defaults to and accepts same props as [NewMessageNotification](https://github.com/GetStream/stream-chat-react/blob/master/src/components/MessageList/NewMessageNotification.tsx) */ NewMessageNotification?: React.ComponentType; /** Custom UI component to display message replies, defaults to and accepts same props as: [MessageRepliesCountButton](https://github.com/GetStream/stream-chat-react/blob/master/src/components/Message/MessageRepliesCountButton.tsx) */