@@ -40,6 +40,7 @@ import {
4040 LoadingErrorIndicatorProps ,
4141} from '../Loading' ;
4242import { MessageSimple } from '../Message/MessageSimple' ;
43+ import { DropzoneProvider } from '../MessageInput/DropzoneProvider' ;
4344
4445import {
4546 ChannelActionContextValue ,
@@ -61,7 +62,10 @@ import defaultEmojiData from '../../stream-emoji.json';
6162
6263import type { Data as EmojiMartData } from 'emoji-mart' ;
6364
65+ import type { MessageInputProps } from '../MessageInput/MessageInput' ;
66+
6467import type {
68+ CustomTrigger ,
6569 DefaultAttachmentType ,
6670 DefaultChannelType ,
6771 DefaultCommandType ,
@@ -78,7 +82,8 @@ export type ChannelProps<
7882 Ev extends DefaultEventType = DefaultEventType ,
7983 Me extends DefaultMessageType = DefaultMessageType ,
8084 Re extends DefaultReactionType = DefaultReactionType ,
81- Us extends DefaultUserType < Us > = DefaultUserType
85+ Us extends DefaultUserType < Us > = DefaultUserType ,
86+ V extends CustomTrigger = CustomTrigger
8287> = {
8388 /** List of accepted file types */
8489 acceptedFiles ?: string [ ] ;
@@ -138,6 +143,8 @@ export type ChannelProps<
138143 cid : string ,
139144 updatedMessage : UpdatedMessage < At , Ch , Co , Me , Re , Us > ,
140145 ) => ReturnType < StreamChat < At , Ch , Co , Ev , Me , Re , Us > [ 'updateMessage' ] > ;
146+ /** If true, chat users will be able to drag and drop file uploads to the entire channel window */
147+ dragAndDropWindow ?: boolean ;
141148 /** 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) */
142149 EditMessageInput ?: ComponentContextValue < At , Ch , Co , Ev , Me , Re , Us > [ 'EditMessageInput' ] ;
143150 /** Custom UI component to override default `NimbleEmoji` from `emoji-mart` */
@@ -208,6 +215,8 @@ export type ChannelProps<
208215 onMentionsClick ?: OnMentionAction < Us > ;
209216 /** Custom action handler function to run on hover of an @mention in a message */
210217 onMentionsHover ?: OnMentionAction < Us > ;
218+ /** If `dragAndDropWindow` prop is true, the props to pass to the MessageInput component (overrides props placed directly on MessageInput) */
219+ optionalMessageInputProps ?: MessageInputProps < At , Ch , Co , Ev , Me , Re , Us , V > ;
211220 /** 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) */
212221 PinIndicator ?: ComponentContextValue < At , Ch , Co , Ev , Me , Re , Us > [ 'PinIndicator' ] ;
213222 /** 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) */
@@ -241,9 +250,10 @@ const UnMemoizedChannel = <
241250 Ev extends DefaultEventType = DefaultEventType ,
242251 Me extends DefaultMessageType = DefaultMessageType ,
243252 Re extends DefaultReactionType = DefaultReactionType ,
244- Us extends DefaultUserType < Us > = DefaultUserType
253+ Us extends DefaultUserType < Us > = DefaultUserType ,
254+ V extends CustomTrigger = CustomTrigger
245255> (
246- props : PropsWithChildren < ChannelProps < At , Ch , Co , Ev , Me , Re , Us > > ,
256+ props : PropsWithChildren < ChannelProps < At , Ch , Co , Ev , Me , Re , Us , V > > ,
247257) => {
248258 const { channel : propsChannel , EmptyPlaceholder = null } = props ;
249259
@@ -263,10 +273,11 @@ const ChannelInner = <
263273 Ev extends DefaultEventType = DefaultEventType ,
264274 Me extends DefaultMessageType = DefaultMessageType ,
265275 Re extends DefaultReactionType = DefaultReactionType ,
266- Us extends DefaultUserType < Us > = DefaultUserType
276+ Us extends DefaultUserType < Us > = DefaultUserType ,
277+ V extends CustomTrigger = CustomTrigger
267278> (
268279 props : PropsWithChildren <
269- ChannelProps < At , Ch , Co , Ev , Me , Re , Us > & {
280+ ChannelProps < At , Ch , Co , Ev , Me , Re , Us , V > & {
270281 channel : StreamChannel < At , Ch , Co , Ev , Me , Re , Us > ;
271282 key : string ;
272283 }
@@ -280,13 +291,15 @@ const ChannelInner = <
280291 doMarkReadRequest,
281292 doSendMessageRequest,
282293 doUpdateMessageRequest,
294+ dragAndDropWindow = false ,
283295 emojiData = defaultEmojiData ,
284296 LoadingErrorIndicator = DefaultLoadingErrorIndicator ,
285297 LoadingIndicator = DefaultLoadingIndicator ,
286298 maxNumberOfFiles,
287299 multipleUploads = true ,
288300 onMentionsClick,
289301 onMentionsHover,
302+ optionalMessageInputProps = { } ,
290303 skipMessageDataMemoization,
291304 } = props ;
292305
@@ -739,6 +752,7 @@ const ChannelInner = <
739752 channel,
740753 channelCapabilitiesArray,
741754 channelConfig,
755+ dragAndDropWindow,
742756 maxNumberOfFiles,
743757 multipleUploads,
744758 mutes,
@@ -831,6 +845,13 @@ const ChannelInner = <
831845 ? 'str-chat--windows-flags'
832846 : '' ;
833847
848+ const NullProvider : React . FC = ( { children } ) => < > { children } </ > ;
849+
850+ const OptionalMessageInputProvider = useMemo (
851+ ( ) => ( dragAndDropWindow ? DropzoneProvider : NullProvider ) ,
852+ [ dragAndDropWindow ] ,
853+ ) ;
854+
834855 if ( state . error ) {
835856 return (
836857 < div className = { `${ chatClass } ${ channelClass } ${ theme } } >
@@ -862,7 +883,11 @@ const ChannelInner = <
862883 < ComponentProvider value = { componentContextValue } >
863884 < EmojiProvider value = { emojiContextValue } >
864885 < TypingProvider value = { typingContextValue } >
865- < div className = { `${ chatContainerClass } } > { children } </ div >
886+ < div className = { `${ chatContainerClass } } >
887+ < OptionalMessageInputProvider { ...optionalMessageInputProps } >
888+ { children }
889+ </ OptionalMessageInputProvider >
890+ </ div >
866891 </ TypingProvider >
867892 </ EmojiProvider >
868893 </ ComponentProvider >
0 commit comments