Skip to content

Commit

Permalink
Simplify component context props forwarding, add MessageListMainPanel…
Browse files Browse the repository at this point in the history 
… to Channel props
  • Loading branch information
@arnautov-anton
arnautov-anton committed Oct 2, 2024
1 parent f4318ae commit 1fa3e6e
Show file tree
Hide file tree
Showing 2 changed files with 102 additions and 103 deletions.
157 changes: 54 additions & 103 deletions src/components/Channel/Channel.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -74,8 +74,6 @@ import { useChannelContainerClasses } from './hooks/useChannelContainerClasses';
import { findInMsgSetByDate, findInMsgSetById, makeAddNotifications } from './utils';
import { getChannel } from '../../utils';

import type { UnreadMessagesNotificationProps } from '../MessageList';
import type { MessageProps } from '../Message';
import type { MessageInputProps } from '../MessageInput';

import type {
Expand All @@ -93,111 +91,62 @@ import {
getVideoAttachmentConfiguration,
} from '../Attachment/attachment-sizing';
import type { URLEnrichmentConfig } from '../MessageInput/hooks/useLinkPreviews';
import { ReactionOptions } from '../Reactions';
import { useThreadContext } from '../Threads';

type ChannelPropsForwardedToComponentContext<
StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics
> = {
/** Custom UI component to display a message attachment, defaults to and accepts same props as: [Attachment](https://github.com/GetStream/stream-chat-react/blob/master/src/components/Attachment/Attachment.tsx) */
Attachment?: ComponentContextValue<StreamChatGenerics>['Attachment'];
/** Custom UI component to display an attachment previews in MessageInput, defaults to and accepts same props as: [Attachment](https://github.com/GetStream/stream-chat-react/blob/master/src/components/MessageInput/AttachmentPreviewList.tsx) */
AttachmentPreviewList?: ComponentContextValue<StreamChatGenerics>['AttachmentPreviewList'];
/** Custom UI component to display AudioRecorder in MessageInput, defaults to and accepts same props as: [AudioRecorder](https://github.com/GetStream/stream-chat-react/blob/master/src/components/MessageInput/AudioRecorder.tsx) */
AudioRecorder?: ComponentContextValue<StreamChatGenerics>['AudioRecorder'];
/** Optional UI component to override the default suggestion Item component, defaults to and accepts same props as: [Item](https://github.com/GetStream/stream-chat-react/blob/master/src/components/AutoCompleteTextarea/Item.js) */
AutocompleteSuggestionItem?: ComponentContextValue<StreamChatGenerics>['AutocompleteSuggestionItem'];
/** Optional UI component to override the default List component that displays suggestions, defaults to and accepts same props as: [List](https://github.com/GetStream/stream-chat-react/blob/master/src/components/AutoCompleteTextarea/List.js) */
AutocompleteSuggestionList?: ComponentContextValue<StreamChatGenerics>['AutocompleteSuggestionList'];
/** UI component to display a user's avatar, defaults to and accepts same props as: [Avatar](https://github.com/GetStream/stream-chat-react/blob/master/src/components/Avatar/Avatar.tsx) */
Avatar?: ComponentContextValue<StreamChatGenerics>['Avatar'];
/** Custom UI component to display <img/> elements resp. a fallback in case of load error, defaults to and accepts same props as: [BaseImage](https://github.com/GetStream/stream-chat-react/blob/master/src/components/Gallery/BaseImage.tsx) */
BaseImage?: ComponentContextValue<StreamChatGenerics>['BaseImage'];
/** Custom UI component to display the slow mode cooldown timer, defaults to and accepts same props as: [CooldownTimer](https://github.com/GetStream/stream-chat-react/blob/master/src/components/MessageInput/CooldownTimer.tsx) */
CooldownTimer?: ComponentContextValue<StreamChatGenerics>['CooldownTimer'];
/** Custom UI component to render set of buttons to be displayed in the MessageActionsBox, defaults to and accepts same props as: [CustomMessageActionsList](https://github.com/GetStream/stream-chat-react/blob/master/src/components/MessageActions/CustomMessageActionsList.tsx) */
CustomMessageActionsList?: ComponentContextValue<StreamChatGenerics>['CustomMessageActionsList'];
/** Custom UI component for date separators, defaults to and accepts same props as: [DateSeparator](https://github.com/GetStream/stream-chat-react/blob/master/src/components/DateSeparator.tsx) */
DateSeparator?: ComponentContextValue<StreamChatGenerics>['DateSeparator'];
/** Custom UI component to override default edit message input, defaults to and accepts same props as: [EditMessageForm](https://github.com/GetStream/stream-chat-react/blob/master/src/components/MessageInput/EditMessageForm.tsx) */
EditMessageInput?: ComponentContextValue<StreamChatGenerics>['EditMessageInput'];
/** Custom UI component for rendering button with emoji picker in MessageInput */
EmojiPicker?: ComponentContextValue<StreamChatGenerics>['EmojiPicker'];
/** Mechanism to be used with autocomplete and text replace features of the `MessageInput` component, see [emoji-mart `SearchIndex`](https://github.com/missive/emoji-mart#%EF%B8%8F%EF%B8%8F-headless-search) */
emojiSearchIndex?: ComponentContextValue<StreamChatGenerics>['emojiSearchIndex'];
/** Custom UI component to be displayed when the `MessageList` is empty, defaults to and accepts same props as: [EmptyStateIndicator](https://github.com/GetStream/stream-chat-react/blob/master/src/components/EmptyStateIndicator/EmptyStateIndicator.tsx) */
EmptyStateIndicator?: ComponentContextValue<StreamChatGenerics>['EmptyStateIndicator'];
/** Custom UI component for file upload icon, defaults to and accepts same props as: [FileUploadIcon](https://github.com/GetStream/stream-chat-react/blob/master/src/components/MessageInput/icons.tsx) */
FileUploadIcon?: ComponentContextValue<StreamChatGenerics>['FileUploadIcon'];
/** Custom UI component to render a Giphy preview in the `VirtualizedMessageList` */
GiphyPreviewMessage?: ComponentContextValue<StreamChatGenerics>['GiphyPreviewMessage'];
/** Custom UI component to render at the top of the `MessageList` */
HeaderComponent?: ComponentContextValue<StreamChatGenerics>['HeaderComponent'];
/** Custom UI component handling how the message input is rendered, defaults to and accepts the same props as [MessageInputFlat](https://github.com/GetStream/stream-chat-react/blob/master/src/components/MessageInput/MessageInputFlat.tsx) */
Input?: ComponentContextValue<StreamChatGenerics>['Input'];
/** Custom component to render link previews in message input **/
LinkPreviewList?: ComponentContextValue<StreamChatGenerics>['LinkPreviewList'];
/** Custom UI component to be shown if the channel query fails, defaults to and accepts same props as: [LoadingErrorIndicator](https://github.com/GetStream/stream-chat-react/blob/master/src/components/Loading/LoadingErrorIndicator.tsx) */
LoadingErrorIndicator?: React.ComponentType<LoadingErrorIndicatorProps>;
/** Custom UI component to render while the `MessageList` is loading new messages, defaults to and accepts same props as: [LoadingIndicator](https://github.com/GetStream/stream-chat-react/blob/master/src/components/Loading/LoadingIndicator.tsx) */
LoadingIndicator?: ComponentContextValue<StreamChatGenerics>['LoadingIndicator'];
/** Custom UI component to display a message in the standard `MessageList`, defaults to and accepts the same props as: [MessageSimple](https://github.com/GetStream/stream-chat-react/blob/master/src/components/Message/MessageSimple.tsx) */
Message?: ComponentContextValue<StreamChatGenerics>['Message'];
/** Custom UI component to display the contents of a bounced message modal. Usually it allows to retry, edit, or delete the message. Defaults to and accepts the same props as: [MessageBouncePrompt](https://github.com/GetStream/stream-chat-react/blob/master/src/components/MessageBounce/MessageBouncePrompt.tsx) */
MessageBouncePrompt?: ComponentContextValue<StreamChatGenerics>['MessageBouncePrompt'];
/** Custom UI component for a deleted message, defaults to and accepts same props as: [MessageDeleted](https://github.com/GetStream/stream-chat-react/blob/master/src/components/Message/MessageDeleted.tsx) */
MessageDeleted?: ComponentContextValue<StreamChatGenerics>['MessageDeleted'];
/** 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?: ComponentContextValue<StreamChatGenerics>['MessageListNotifications'];
/** Custom UI component to display a notification when scrolled up the list and new messages arrive, defaults to and accepts same props as [MessageNotification](https://github.com/GetStream/stream-chat-react/blob/master/src/components/MessageList/MessageNotification.tsx) */
MessageNotification?: ComponentContextValue<StreamChatGenerics>['MessageNotification'];
/** Custom UI component for message options popup, defaults to and accepts same props as: [MessageOptions](https://github.com/GetStream/stream-chat-react/blob/master/src/components/Message/MessageOptions.tsx) */
MessageOptions?: ComponentContextValue<StreamChatGenerics>['MessageOptions'];
/** 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) */
MessageRepliesCountButton?: ComponentContextValue<StreamChatGenerics>['MessageRepliesCountButton'];
/** Custom UI component to display message delivery status, defaults to and accepts same props as: [MessageStatus](https://github.com/GetStream/stream-chat-react/blob/master/src/components/Message/MessageStatus.tsx) */
MessageStatus?: ComponentContextValue<StreamChatGenerics>['MessageStatus'];
/** Custom UI component to display system messages, defaults to and accepts same props as: [EventComponent](https://github.com/GetStream/stream-chat-react/blob/master/src/components/EventComponent/EventComponent.tsx) */
MessageSystem?: ComponentContextValue<StreamChatGenerics>['MessageSystem'];
/** Custom UI component to display a timestamp on a message, defaults to and accepts same props as: [MessageTimestamp](https://github.com/GetStream/stream-chat-react/blob/master/src/components/Message/MessageTimestamp.tsx) */
MessageTimestamp?: ComponentContextValue<StreamChatGenerics>['MessageTimestamp'];
/** Custom UI component for viewing message's image attachments, defaults to and accepts the same props as [ModalGallery](https://github.com/GetStream/stream-chat-react/blob/master/src/components/Gallery/ModalGallery.tsx) */
ModalGallery?: ComponentContextValue<StreamChatGenerics>['ModalGallery'];
/** Custom UI component to override default pinned message indicator, defaults to and accepts same props as: [PinIndicator](https://github.com/GetStream/stream-chat-react/blob/master/src/components/Message/icons.tsx) */
PinIndicator?: ComponentContextValue<StreamChatGenerics>['PinIndicator'];
/** Custom UI component to override quoted message UI on a sent message, defaults to and accepts same props as: [QuotedMessage](https://github.com/GetStream/stream-chat-react/blob/master/src/components/Message/QuotedMessage.tsx) */
QuotedMessage?: ComponentContextValue<StreamChatGenerics>['QuotedMessage'];
/** Custom UI component to override the message input's quoted message preview, defaults to and accepts same props as: [QuotedMessagePreview](https://github.com/GetStream/stream-chat-react/blob/master/src/components/MessageInput/QuotedMessagePreview.tsx) */
QuotedMessagePreview?: ComponentContextValue<StreamChatGenerics>['QuotedMessagePreview'];
/** Custom reaction options to be applied to ReactionSelector, ReactionList and SimpleReactionList components */
reactionOptions?: ReactionOptions;
/** Custom UI component to display the reaction selector, defaults to and accepts same props as: [ReactionSelector](https://github.com/GetStream/stream-chat-react/blob/master/src/components/Reactions/ReactionSelector.tsx) */
ReactionSelector?: ComponentContextValue<StreamChatGenerics>['ReactionSelector'];
/** Custom UI component to display the list of reactions on a message, defaults to and accepts same props as: [ReactionsList](https://github.com/GetStream/stream-chat-react/blob/master/src/components/Reactions/ReactionsList.tsx) */
ReactionsList?: ComponentContextValue<StreamChatGenerics>['ReactionsList'];
/** Custom UI component for send button, defaults to and accepts same props as: [SendButton](https://github.com/GetStream/stream-chat-react/blob/master/src/components/MessageInput/icons.tsx) */
SendButton?: ComponentContextValue<StreamChatGenerics>['SendButton'];
/** Custom UI component button for initiating audio recording, defaults to and accepts same props as: [StartRecordingAudioButton](https://github.com/GetStream/stream-chat-react/blob/master/src/components/MediaRecorder/AudioRecorder/AudioRecordingButtons.tsx) */
StartRecordingAudioButton?: ComponentContextValue<StreamChatGenerics>['StartRecordingAudioButton'];
/** Custom UI component that displays thread's parent or other message at the top of the `MessageList`, defaults to and accepts same props as [MessageSimple](https://github.com/GetStream/stream-chat-react/blob/master/src/components/Message/MessageSimple.tsx) */
ThreadHead?: React.ComponentType<MessageProps<StreamChatGenerics>>;
/** Custom UI component to display the header of a `Thread`, defaults to and accepts same props as: [DefaultThreadHeader](https://github.com/GetStream/stream-chat-react/blob/master/src/components/Thread/Thread.tsx) */
ThreadHeader?: ComponentContextValue<StreamChatGenerics>['ThreadHeader'];
/** Custom UI component to display the start of a threaded `MessageList`, defaults to and accepts same props as: [DefaultThreadStart](https://github.com/GetStream/stream-chat-react/blob/master/src/components/Thread/Thread.tsx) */
ThreadStart?: ComponentContextValue<StreamChatGenerics>['ThreadStart'];
/** Custom UI component to display a date used in timestamps. It's used internally by the default `MessageTimestamp`, and to display a timestamp for edited messages. */
Timestamp?: ComponentContextValue<StreamChatGenerics>['Timestamp'];
/** Optional context provider that lets you override the default autocomplete triggers, defaults to: [DefaultTriggerProvider](https://github.com/GetStream/stream-chat-react/blob/master/src/components/MessageInput/DefaultTriggerProvider.tsx) */
TriggerProvider?: ComponentContextValue<StreamChatGenerics>['TriggerProvider'];
/** Custom UI component for the typing indicator, defaults to and accepts same props as: [TypingIndicator](https://github.com/GetStream/stream-chat-react/blob/master/src/components/TypingIndicator/TypingIndicator.tsx) */
TypingIndicator?: ComponentContextValue<StreamChatGenerics>['TypingIndicator'];
/** Custom UI component that indicates a user is viewing unread messages. It disappears once the user scrolls to UnreadMessagesSeparator. Defaults to and accepts same props as: [UnreadMessagesNotification](https://github.com/GetStream/stream-chat-react/blob/master/src/components/MessageList/UnreadMessagesNotification.tsx) */
UnreadMessagesNotification?: React.ComponentType<UnreadMessagesNotificationProps>;
/** Custom UI component that separates read messages from unread, defaults to and accepts same props as: [UnreadMessagesSeparator](https://github.com/GetStream/stream-chat-react/blob/master/src/components/MessageList/UnreadMessagesSeparator.tsx) */
UnreadMessagesSeparator?: ComponentContextValue<StreamChatGenerics>['UnreadMessagesSeparator'];
/** Custom UI component to display a message in the `VirtualizedMessageList`, does not have a default implementation */
VirtualMessage?: ComponentContextValue<StreamChatGenerics>['VirtualMessage'];
};
> = Pick<
ComponentContextValue<StreamChatGenerics>,
| 'Attachment'
| 'AttachmentPreviewList'
| 'AudioRecorder'
| 'AutocompleteSuggestionItem'
| 'AutocompleteSuggestionList'
| 'Avatar'
| 'BaseImage'
| 'CooldownTimer'
| 'CustomMessageActionsList'
| 'DateSeparator'
| 'EditMessageInput'
| 'EmojiPicker'
| 'emojiSearchIndex'
| 'EmptyStateIndicator'
| 'FileUploadIcon'
| 'GiphyPreviewMessage'
| 'HeaderComponent'
| 'Input'
| 'LinkPreviewList'
| 'LoadingIndicator'
| 'Message'
| 'MessageBouncePrompt'
| 'MessageDeleted'
| 'MessageListNotifications'
| 'MessageListMainPanel'
| 'MessageNotification'
| 'MessageOptions'
| 'MessageRepliesCountButton'
| 'MessageStatus'
| 'MessageSystem'
| 'MessageTimestamp'
| 'ModalGallery'
| 'PinIndicator'
| 'QuotedMessage'
| 'QuotedMessagePreview'
| 'reactionOptions'
| 'ReactionSelector'
| 'ReactionsList'
| 'SendButton'
| 'StartRecordingAudioButton'
| 'ThreadHead'
| 'ThreadHeader'
| 'ThreadStart'
| 'Timestamp'
| 'TriggerProvider'
| 'TypingIndicator'
| 'UnreadMessagesNotification'
| 'UnreadMessagesSeparator'
| 'VirtualMessage'
>;

const isUserResponseArray = <
StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics
Expand Down Expand Up @@ -266,6 +215,8 @@ export type ChannelProps<
* Preventing to initialize the channel on mount allows us to postpone the channel creation to a later point in time.
*/
initializeOnMount?: boolean;
/** Custom UI component to be shown if the channel query fails, defaults to and accepts same props as: [LoadingErrorIndicator](https://github.com/GetStream/stream-chat-react/blob/master/src/components/Loading/LoadingErrorIndicator.tsx) */
LoadingErrorIndicator?: React.ComponentType<LoadingErrorIndicatorProps>;
/** Configuration parameter to mark the active channel as read when mounted (opened). By default, the channel is marked read on mount. */
markReadOnMount?: boolean;
/** Maximum number of attachments allowed per message */
Expand Down
Loading

0 comments on commit 1fa3e6e

Please sign in to comment.