stream-chat-react-native-core 4.5.0 → 4.6.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +3 -3
- package/lib/commonjs/components/Attachment/FileIcon.js +9 -1
- package/lib/commonjs/components/Attachment/FileIcon.js.map +1 -1
- package/lib/commonjs/components/AttachmentPicker/AttachmentPicker.js +232 -48
- package/lib/commonjs/components/AttachmentPicker/AttachmentPicker.js.map +1 -1
- package/lib/commonjs/components/Channel/Channel.js.map +1 -1
- package/lib/commonjs/components/Chat/Chat.js.map +1 -1
- package/lib/commonjs/components/Message/Message.js.map +1 -1
- package/lib/commonjs/components/Message/MessageSimple/MessageContent.js +39 -21
- package/lib/commonjs/components/Message/MessageSimple/MessageContent.js.map +1 -1
- package/lib/commonjs/components/Message/MessageSimple/utils/renderText.md +1 -1
- package/lib/commonjs/components/MessageInput/FileUploadPreview.js +1 -1
- package/lib/commonjs/components/MessageInput/FileUploadPreview.js.map +1 -1
- package/lib/commonjs/components/MessageInput/MessageInput.js +129 -44
- package/lib/commonjs/components/MessageInput/MessageInput.js.map +1 -1
- package/lib/commonjs/components/Reply/Reply.js +25 -9
- package/lib/commonjs/components/Reply/Reply.js.map +1 -1
- package/lib/commonjs/contexts/attachmentPickerContext/AttachmentPickerContext.js +15 -8
- package/lib/commonjs/contexts/attachmentPickerContext/AttachmentPickerContext.js.map +1 -1
- package/lib/commonjs/contexts/channelContext/ChannelContext.js.map +1 -1
- package/lib/commonjs/contexts/channelContext/ChannelContext.md +1 -1
- package/lib/commonjs/contexts/channelsContext/ChannelsContext.js.map +1 -1
- package/lib/commonjs/contexts/channelsContext/ChannelsContext.md +1 -1
- package/lib/commonjs/contexts/chatContext/ChatContext.md +1 -1
- package/lib/commonjs/contexts/imageGalleryContext/ImageGalleryContext.md +1 -1
- package/lib/commonjs/contexts/keyboardContext/KeyboardContext.md +1 -1
- package/lib/commonjs/contexts/messageContext/MessageContext.js.map +1 -1
- package/lib/commonjs/contexts/messageContext/MessageContext.md +1 -1
- package/lib/commonjs/contexts/messageInputContext/MessageInputContext.js +10 -7
- package/lib/commonjs/contexts/messageInputContext/MessageInputContext.js.map +1 -1
- package/lib/commonjs/contexts/messageInputContext/MessageInputContext.md +1 -1
- package/lib/commonjs/contexts/messageInputContext/hooks/useMessageDetailsForState.js +16 -1
- package/lib/commonjs/contexts/messageInputContext/hooks/useMessageDetailsForState.js.map +1 -1
- package/lib/commonjs/contexts/messageOverlayContext/MessageOverlayContext.js.map +1 -1
- package/lib/commonjs/contexts/messagesContext/MessagesContext.js.map +1 -1
- package/lib/commonjs/contexts/messagesContext/MessagesContext.md +1 -1
- package/lib/commonjs/contexts/overlayContext/OverlayContext.md +1 -1
- package/lib/commonjs/contexts/paginatedMessageListContext/PaginatedMessageListContext.md +1 -1
- package/lib/commonjs/contexts/suggestionsContext/SuggestionsContext.md +1 -1
- package/lib/commonjs/contexts/themeContext/utils/theme.js +1 -0
- package/lib/commonjs/contexts/themeContext/utils/theme.js.map +1 -1
- package/lib/commonjs/contexts/typingContext/TypingContext.md +1 -1
- package/lib/commonjs/icons/Recorder.js +47 -0
- package/lib/commonjs/icons/Recorder.js.map +1 -0
- package/lib/commonjs/icons/Video.js +82 -0
- package/lib/commonjs/icons/Video.js.map +1 -0
- package/lib/commonjs/icons/index.js +26 -0
- package/lib/commonjs/icons/index.js.map +1 -1
- package/lib/commonjs/native.js.map +1 -1
- package/lib/commonjs/version.json +1 -1
- package/lib/module/components/Attachment/FileIcon.js +9 -1
- package/lib/module/components/Attachment/FileIcon.js.map +1 -1
- package/lib/module/components/AttachmentPicker/AttachmentPicker.js +232 -48
- package/lib/module/components/AttachmentPicker/AttachmentPicker.js.map +1 -1
- package/lib/module/components/Channel/Channel.js.map +1 -1
- package/lib/module/components/Chat/Chat.js.map +1 -1
- package/lib/module/components/Message/Message.js.map +1 -1
- package/lib/module/components/Message/MessageSimple/MessageContent.js +39 -21
- package/lib/module/components/Message/MessageSimple/MessageContent.js.map +1 -1
- package/lib/module/components/Message/MessageSimple/utils/renderText.md +1 -1
- package/lib/module/components/MessageInput/FileUploadPreview.js +1 -1
- package/lib/module/components/MessageInput/FileUploadPreview.js.map +1 -1
- package/lib/module/components/MessageInput/MessageInput.js +129 -44
- package/lib/module/components/MessageInput/MessageInput.js.map +1 -1
- package/lib/module/components/Reply/Reply.js +25 -9
- package/lib/module/components/Reply/Reply.js.map +1 -1
- package/lib/module/contexts/attachmentPickerContext/AttachmentPickerContext.js +15 -8
- package/lib/module/contexts/attachmentPickerContext/AttachmentPickerContext.js.map +1 -1
- package/lib/module/contexts/channelContext/ChannelContext.js.map +1 -1
- package/lib/module/contexts/channelContext/ChannelContext.md +1 -1
- package/lib/module/contexts/channelsContext/ChannelsContext.js.map +1 -1
- package/lib/module/contexts/channelsContext/ChannelsContext.md +1 -1
- package/lib/module/contexts/chatContext/ChatContext.md +1 -1
- package/lib/module/contexts/imageGalleryContext/ImageGalleryContext.md +1 -1
- package/lib/module/contexts/keyboardContext/KeyboardContext.md +1 -1
- package/lib/module/contexts/messageContext/MessageContext.js.map +1 -1
- package/lib/module/contexts/messageContext/MessageContext.md +1 -1
- package/lib/module/contexts/messageInputContext/MessageInputContext.js +10 -7
- package/lib/module/contexts/messageInputContext/MessageInputContext.js.map +1 -1
- package/lib/module/contexts/messageInputContext/MessageInputContext.md +1 -1
- package/lib/module/contexts/messageInputContext/hooks/useMessageDetailsForState.js +16 -1
- package/lib/module/contexts/messageInputContext/hooks/useMessageDetailsForState.js.map +1 -1
- package/lib/module/contexts/messageOverlayContext/MessageOverlayContext.js.map +1 -1
- package/lib/module/contexts/messagesContext/MessagesContext.js.map +1 -1
- package/lib/module/contexts/messagesContext/MessagesContext.md +1 -1
- package/lib/module/contexts/overlayContext/OverlayContext.md +1 -1
- package/lib/module/contexts/paginatedMessageListContext/PaginatedMessageListContext.md +1 -1
- package/lib/module/contexts/suggestionsContext/SuggestionsContext.md +1 -1
- package/lib/module/contexts/themeContext/utils/theme.js +1 -0
- package/lib/module/contexts/themeContext/utils/theme.js.map +1 -1
- package/lib/module/contexts/typingContext/TypingContext.md +1 -1
- package/lib/module/icons/Recorder.js +47 -0
- package/lib/module/icons/Recorder.js.map +1 -0
- package/lib/module/icons/Video.js +82 -0
- package/lib/module/icons/Video.js.map +1 -0
- package/lib/module/icons/index.js +26 -0
- package/lib/module/icons/index.js.map +1 -1
- package/lib/module/native.js.map +1 -1
- package/lib/module/version.json +1 -1
- package/lib/typescript/components/AttachmentPicker/AttachmentPicker.d.ts +6 -6
- package/lib/typescript/components/Channel/Channel.d.ts +2 -2
- package/lib/typescript/components/Chat/Chat.d.ts +1 -1
- package/lib/typescript/components/Message/Message.d.ts +2 -2
- package/lib/typescript/components/MessageInput/MessageInput.d.ts +1 -1
- package/lib/typescript/contexts/attachmentPickerContext/AttachmentPickerContext.d.ts +9 -8
- package/lib/typescript/contexts/channelContext/ChannelContext.d.ts +2 -2
- package/lib/typescript/contexts/channelsContext/ChannelsContext.d.ts +6 -6
- package/lib/typescript/contexts/messageContext/MessageContext.d.ts +2 -2
- package/lib/typescript/contexts/messageInputContext/MessageInputContext.d.ts +10 -21
- package/lib/typescript/contexts/messageOverlayContext/MessageOverlayContext.d.ts +6 -6
- package/lib/typescript/contexts/messagesContext/MessagesContext.d.ts +20 -20
- package/lib/typescript/contexts/themeContext/utils/theme.d.ts +2 -1
- package/lib/typescript/icons/Recorder.d.ts +3 -0
- package/lib/typescript/icons/Video.d.ts +3 -0
- package/lib/typescript/icons/index.d.ts +2 -0
- package/lib/typescript/native.d.ts +3 -14
- package/lib/typescript/types/types.d.ts +24 -0
- package/package.json +1 -1
- package/src/components/Attachment/FileIcon.tsx +45 -0
- package/src/components/AttachmentPicker/AttachmentPicker.tsx +210 -60
- package/src/components/Channel/Channel.tsx +2 -2
- package/src/components/Chat/Chat.tsx +1 -1
- package/src/components/Message/Message.tsx +2 -2
- package/src/components/Message/MessageSimple/MessageContent.tsx +23 -12
- package/src/components/Message/MessageSimple/utils/renderText.md +1 -1
- package/src/components/MessageInput/FileUploadPreview.tsx +1 -1
- package/src/components/MessageInput/MessageInput.tsx +106 -19
- package/src/components/Reply/Reply.tsx +31 -14
- package/src/components/Thread/__tests__/__snapshots__/Thread.test.js.snap +12 -0
- package/src/contexts/attachmentPickerContext/AttachmentPickerContext.tsx +12 -8
- package/src/contexts/channelContext/ChannelContext.md +1 -1
- package/src/contexts/channelContext/ChannelContext.tsx +2 -2
- package/src/contexts/channelsContext/ChannelsContext.md +1 -1
- package/src/contexts/channelsContext/ChannelsContext.tsx +6 -6
- package/src/contexts/chatContext/ChatContext.md +1 -1
- package/src/contexts/imageGalleryContext/ImageGalleryContext.md +1 -1
- package/src/contexts/keyboardContext/KeyboardContext.md +1 -1
- package/src/contexts/messageContext/MessageContext.md +1 -1
- package/src/contexts/messageContext/MessageContext.tsx +2 -2
- package/src/contexts/messageInputContext/MessageInputContext.md +1 -1
- package/src/contexts/messageInputContext/MessageInputContext.tsx +23 -30
- package/src/contexts/messageInputContext/hooks/useMessageDetailsForState.ts +17 -1
- package/src/contexts/messageOverlayContext/MessageOverlayContext.tsx +6 -6
- package/src/contexts/messagesContext/MessagesContext.md +1 -1
- package/src/contexts/messagesContext/MessagesContext.tsx +20 -20
- package/src/contexts/overlayContext/OverlayContext.md +1 -1
- package/src/contexts/paginatedMessageListContext/PaginatedMessageListContext.md +1 -1
- package/src/contexts/suggestionsContext/SuggestionsContext.md +1 -1
- package/src/contexts/themeContext/utils/theme.ts +3 -1
- package/src/contexts/typingContext/TypingContext.md +1 -1
- package/src/icons/Recorder.tsx +16 -0
- package/src/icons/Video.tsx +37 -0
- package/src/icons/index.ts +2 -0
- package/src/native.ts +4 -14
- package/src/types/types.ts +27 -0
- package/src/version.json +1 -1
|
@@ -30,8 +30,7 @@ import {
|
|
|
30
30
|
useTranslationContext,
|
|
31
31
|
} from '../../contexts/translationContext/TranslationContext';
|
|
32
32
|
|
|
33
|
-
import type { Asset } from '../../
|
|
34
|
-
import type { DefaultStreamChatGenerics } from '../../types/types';
|
|
33
|
+
import type { Asset, DefaultStreamChatGenerics } from '../../types/types';
|
|
35
34
|
import { AttachmentSelectionBar } from '../AttachmentPicker/components/AttachmentSelectionBar';
|
|
36
35
|
import { AutoCompleteInput } from '../AutoCompleteInput/AutoCompleteInput';
|
|
37
36
|
|
|
@@ -115,7 +114,9 @@ type MessageInputPropsWithContext<
|
|
|
115
114
|
| 'setGiphyActive'
|
|
116
115
|
| 'showMoreOptions'
|
|
117
116
|
| 'ShowThreadMessageInChannelButton'
|
|
117
|
+
| 'removeFile'
|
|
118
118
|
| 'removeImage'
|
|
119
|
+
| 'uploadNewFile'
|
|
119
120
|
| 'uploadNewImage'
|
|
120
121
|
> &
|
|
121
122
|
Pick<MessagesContextValue<StreamChatGenerics>, 'Reply'> &
|
|
@@ -164,6 +165,7 @@ const MessageInputWithContext = <
|
|
|
164
165
|
mentionedUsers,
|
|
165
166
|
numberOfUploads,
|
|
166
167
|
quotedMessage,
|
|
168
|
+
removeFile,
|
|
167
169
|
removeImage,
|
|
168
170
|
Reply,
|
|
169
171
|
resetInput,
|
|
@@ -175,6 +177,7 @@ const MessageInputWithContext = <
|
|
|
175
177
|
thread,
|
|
176
178
|
threadList,
|
|
177
179
|
triggerType,
|
|
180
|
+
uploadNewFile,
|
|
178
181
|
uploadNewImage,
|
|
179
182
|
watchers,
|
|
180
183
|
} = props;
|
|
@@ -202,9 +205,11 @@ const MessageInputWithContext = <
|
|
|
202
205
|
attachmentPickerBottomSheetHeight,
|
|
203
206
|
attachmentSelectionBarHeight,
|
|
204
207
|
bottomInset,
|
|
208
|
+
selectedFiles,
|
|
205
209
|
selectedImages,
|
|
206
210
|
selectedPicker,
|
|
207
211
|
setMaxNumberOfFiles,
|
|
212
|
+
setSelectedFiles,
|
|
208
213
|
setSelectedImages,
|
|
209
214
|
} = useAttachmentPickerContext();
|
|
210
215
|
|
|
@@ -224,8 +229,11 @@ const MessageInputWithContext = <
|
|
|
224
229
|
}, []);
|
|
225
230
|
|
|
226
231
|
const [hasResetImages, setHasResetImages] = useState(false);
|
|
232
|
+
const [hasResetFiles, setHasResetFiles] = useState(false);
|
|
227
233
|
const selectedImagesLength = hasResetImages ? selectedImages.length : 0;
|
|
228
234
|
const imageUploadsLength = hasResetImages ? imageUploads.length : 0;
|
|
235
|
+
const selectedFilesLength = hasResetFiles ? selectedFiles.length : 0;
|
|
236
|
+
const fileUploadsLength = hasResetFiles ? fileUploads.length : 0;
|
|
229
237
|
const imagesForInput = (!!thread && !!threadList) || (!thread && !threadList);
|
|
230
238
|
|
|
231
239
|
useEffect(() => {
|
|
@@ -236,44 +244,90 @@ const MessageInputWithContext = <
|
|
|
236
244
|
return () => setSelectedImages([]);
|
|
237
245
|
}, []);
|
|
238
246
|
|
|
247
|
+
useEffect(() => {
|
|
248
|
+
setSelectedFiles([]);
|
|
249
|
+
if (fileUploads.length) {
|
|
250
|
+
fileUploads.forEach((file) => removeFile(file.id));
|
|
251
|
+
}
|
|
252
|
+
return () => setSelectedFiles([]);
|
|
253
|
+
}, []);
|
|
254
|
+
|
|
239
255
|
useEffect(() => {
|
|
240
256
|
if (hasResetImages === false && imageUploadsLength === 0 && selectedImagesLength === 0) {
|
|
241
257
|
setHasResetImages(true);
|
|
242
258
|
}
|
|
243
259
|
}, [imageUploadsLength, selectedImagesLength]);
|
|
244
260
|
|
|
261
|
+
useEffect(() => {
|
|
262
|
+
if (hasResetFiles === false && fileUploadsLength === 0 && selectedFilesLength === 0) {
|
|
263
|
+
setHasResetFiles(true);
|
|
264
|
+
}
|
|
265
|
+
}, [fileUploadsLength, selectedFilesLength]);
|
|
266
|
+
|
|
245
267
|
useEffect(() => {
|
|
246
268
|
if (imagesForInput === false && imageUploads.length) {
|
|
247
269
|
imageUploads.forEach((image) => removeImage(image.id));
|
|
248
270
|
}
|
|
249
271
|
}, [imagesForInput]);
|
|
250
272
|
|
|
273
|
+
const uploadImagesHandler = () => {
|
|
274
|
+
const imagesToUpload = selectedImages.filter((selectedImage) => {
|
|
275
|
+
const uploadedImage = imageUploads.find(
|
|
276
|
+
(imageUpload) =>
|
|
277
|
+
imageUpload.file.uri === selectedImage.uri || imageUpload.url === selectedImage.uri,
|
|
278
|
+
);
|
|
279
|
+
return !uploadedImage;
|
|
280
|
+
});
|
|
281
|
+
imagesToUpload.forEach((image) => uploadNewImage(image));
|
|
282
|
+
};
|
|
283
|
+
|
|
284
|
+
const removeImagesHandler = () => {
|
|
285
|
+
const imagesToRemove = imageUploads.filter(
|
|
286
|
+
(imageUpload) =>
|
|
287
|
+
!selectedImages.find(
|
|
288
|
+
(selectedImage) =>
|
|
289
|
+
selectedImage.uri === imageUpload.file.uri || selectedImage.uri === imageUpload.url,
|
|
290
|
+
),
|
|
291
|
+
);
|
|
292
|
+
imagesToRemove.forEach((image) => removeImage(image.id));
|
|
293
|
+
};
|
|
294
|
+
|
|
251
295
|
useEffect(() => {
|
|
252
296
|
if (imagesForInput) {
|
|
253
297
|
if (selectedImagesLength > imageUploadsLength) {
|
|
254
298
|
/** User selected an image in bottom sheet attachment picker */
|
|
255
|
-
|
|
256
|
-
|
|
257
|
-
(imageUpload) =>
|
|
258
|
-
imageUpload.file.uri === selectedImage.uri || imageUpload.url === selectedImage.uri,
|
|
259
|
-
);
|
|
260
|
-
return !uploadedImage;
|
|
261
|
-
});
|
|
262
|
-
imagesToUpload.forEach((image) => uploadNewImage(image));
|
|
263
|
-
} else if (selectedImagesLength < imageUploadsLength) {
|
|
299
|
+
uploadImagesHandler();
|
|
300
|
+
} else {
|
|
264
301
|
/** User de-selected an image in bottom sheet attachment picker */
|
|
265
|
-
|
|
266
|
-
(imageUpload) =>
|
|
267
|
-
!selectedImages.find(
|
|
268
|
-
(selectedImage) =>
|
|
269
|
-
selectedImage.uri === imageUpload.file.uri || selectedImage.uri === imageUpload.url,
|
|
270
|
-
),
|
|
271
|
-
);
|
|
272
|
-
imagesToRemove.forEach((image) => removeImage(image.id));
|
|
302
|
+
removeImagesHandler();
|
|
273
303
|
}
|
|
274
304
|
}
|
|
275
305
|
}, [selectedImagesLength]);
|
|
276
306
|
|
|
307
|
+
useEffect(() => {
|
|
308
|
+
if (selectedFilesLength > fileUploadsLength) {
|
|
309
|
+
/** User selected a video in bottom sheet attachment picker */
|
|
310
|
+
const filesToUpload = selectedFiles.filter((selectedFile) => {
|
|
311
|
+
const uploadedFile = fileUploads.find(
|
|
312
|
+
(fileUpload) =>
|
|
313
|
+
fileUpload.file.uri === selectedFile.uri || fileUpload.url === selectedFile.uri,
|
|
314
|
+
);
|
|
315
|
+
return !uploadedFile;
|
|
316
|
+
});
|
|
317
|
+
filesToUpload.forEach((file) => uploadNewFile(file));
|
|
318
|
+
} else {
|
|
319
|
+
/** User de-selected a video in bottom sheet attachment picker */
|
|
320
|
+
const filesToRemove = fileUploads.filter(
|
|
321
|
+
(fileUpload) =>
|
|
322
|
+
!selectedFiles.find(
|
|
323
|
+
(selectedFile) =>
|
|
324
|
+
selectedFile.uri === fileUpload.file.uri || selectedFile.uri === fileUpload.url,
|
|
325
|
+
),
|
|
326
|
+
);
|
|
327
|
+
filesToRemove.forEach((file) => removeFile(file.id));
|
|
328
|
+
}
|
|
329
|
+
}, [selectedFilesLength]);
|
|
330
|
+
|
|
277
331
|
useEffect(() => {
|
|
278
332
|
if (imagesForInput) {
|
|
279
333
|
if (imageUploadsLength < selectedImagesLength) {
|
|
@@ -306,6 +360,35 @@ const MessageInputWithContext = <
|
|
|
306
360
|
}
|
|
307
361
|
}, [imageUploadsLength]);
|
|
308
362
|
|
|
363
|
+
useEffect(() => {
|
|
364
|
+
if (fileUploadsLength < selectedFilesLength) {
|
|
365
|
+
/** User removed some video from seleted files within ImageUploadPreview. */
|
|
366
|
+
const updatedSelectedFiles = selectedFiles.filter((selectedFile) => {
|
|
367
|
+
const uploadedFile = fileUploads.find(
|
|
368
|
+
(fileUpload) =>
|
|
369
|
+
fileUpload.file.uri === selectedFile.uri || fileUpload.url === selectedFile.uri,
|
|
370
|
+
);
|
|
371
|
+
return uploadedFile;
|
|
372
|
+
});
|
|
373
|
+
setSelectedFiles(updatedSelectedFiles);
|
|
374
|
+
} else if (fileUploadsLength > selectedFilesLength) {
|
|
375
|
+
/**
|
|
376
|
+
* User is editing some message which contains video attachments OR
|
|
377
|
+
* video attachment is added from custom image picker (other than the default bottomsheet image picker)
|
|
378
|
+
* using `uploadNewFile` function from `MessageInputContext`.
|
|
379
|
+
**/
|
|
380
|
+
setSelectedFiles(
|
|
381
|
+
fileUploads.map((fileUpload) => ({
|
|
382
|
+
duration: fileUpload.file.duration,
|
|
383
|
+
name: fileUpload.file.name,
|
|
384
|
+
size: fileUpload.file.size,
|
|
385
|
+
type: fileUpload.file.type,
|
|
386
|
+
uri: fileUpload.file.uri,
|
|
387
|
+
})),
|
|
388
|
+
);
|
|
389
|
+
}
|
|
390
|
+
}, [fileUploadsLength]);
|
|
391
|
+
|
|
309
392
|
const editingExists = !!editing;
|
|
310
393
|
useEffect(() => {
|
|
311
394
|
if (editing && inputBoxRef.current) {
|
|
@@ -666,6 +749,7 @@ export const MessageInput = <
|
|
|
666
749
|
mentionedUsers,
|
|
667
750
|
numberOfUploads,
|
|
668
751
|
quotedMessage,
|
|
752
|
+
removeFile,
|
|
669
753
|
removeImage,
|
|
670
754
|
resetInput,
|
|
671
755
|
SendButton,
|
|
@@ -676,6 +760,7 @@ export const MessageInput = <
|
|
|
676
760
|
setShowMoreOptions,
|
|
677
761
|
showMoreOptions,
|
|
678
762
|
ShowThreadMessageInChannelButton,
|
|
763
|
+
uploadNewFile,
|
|
679
764
|
uploadNewImage,
|
|
680
765
|
} = useMessageInputContext<StreamChatGenerics>();
|
|
681
766
|
|
|
@@ -730,6 +815,7 @@ export const MessageInput = <
|
|
|
730
815
|
mentionedUsers,
|
|
731
816
|
numberOfUploads,
|
|
732
817
|
quotedMessage,
|
|
818
|
+
removeFile,
|
|
733
819
|
removeImage,
|
|
734
820
|
Reply,
|
|
735
821
|
resetInput,
|
|
@@ -744,6 +830,7 @@ export const MessageInput = <
|
|
|
744
830
|
t,
|
|
745
831
|
thread,
|
|
746
832
|
triggerType,
|
|
833
|
+
uploadNewFile,
|
|
747
834
|
uploadNewImage,
|
|
748
835
|
watchers,
|
|
749
836
|
}}
|
|
@@ -69,6 +69,36 @@ type ReplyPropsWithContext<
|
|
|
69
69
|
}>;
|
|
70
70
|
};
|
|
71
71
|
|
|
72
|
+
const getMessageType = <
|
|
73
|
+
StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
|
|
74
|
+
>(
|
|
75
|
+
lastAttachment: Attachment<StreamChatGenerics>,
|
|
76
|
+
) => {
|
|
77
|
+
let messageType;
|
|
78
|
+
|
|
79
|
+
const isLastAttachmentFile =
|
|
80
|
+
lastAttachment.type === 'file' ||
|
|
81
|
+
lastAttachment.type === 'audio' ||
|
|
82
|
+
lastAttachment.type === 'video';
|
|
83
|
+
|
|
84
|
+
const isLastAttachmentGiphy = lastAttachment.type === 'giphy' || lastAttachment.type === 'imgur';
|
|
85
|
+
|
|
86
|
+
const isLastAttachmentImageOrGiphy =
|
|
87
|
+
lastAttachment.type === 'image' && !lastAttachment.title_link && !lastAttachment.og_scrape_url;
|
|
88
|
+
|
|
89
|
+
const isLastAttachmentImage = lastAttachment.image_url || lastAttachment.thumb_url;
|
|
90
|
+
|
|
91
|
+
if (isLastAttachmentFile) {
|
|
92
|
+
messageType = 'file';
|
|
93
|
+
} else if (isLastAttachmentImageOrGiphy) {
|
|
94
|
+
if (isLastAttachmentImage) messageType = 'image';
|
|
95
|
+
else messageType = undefined;
|
|
96
|
+
} else if (isLastAttachmentGiphy) messageType = 'giphy';
|
|
97
|
+
else messageType = 'other';
|
|
98
|
+
|
|
99
|
+
return messageType;
|
|
100
|
+
};
|
|
101
|
+
|
|
72
102
|
const ReplyWithContext = <
|
|
73
103
|
StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
|
|
74
104
|
>(
|
|
@@ -105,20 +135,7 @@ const ReplyWithContext = <
|
|
|
105
135
|
if (typeof quotedMessage === 'boolean') return null;
|
|
106
136
|
|
|
107
137
|
const lastAttachment = quotedMessage.attachments?.slice(-1)[0] as Attachment<StreamChatGenerics>;
|
|
108
|
-
|
|
109
|
-
const messageType = lastAttachment
|
|
110
|
-
? lastAttachment.type === 'file' || lastAttachment.type === 'audio'
|
|
111
|
-
? 'file'
|
|
112
|
-
: lastAttachment.type === 'image' &&
|
|
113
|
-
!lastAttachment.title_link &&
|
|
114
|
-
!lastAttachment.og_scrape_url
|
|
115
|
-
? lastAttachment.image_url || lastAttachment.thumb_url
|
|
116
|
-
? 'image'
|
|
117
|
-
: undefined
|
|
118
|
-
: lastAttachment.type === 'giphy' || lastAttachment.type === 'imgur'
|
|
119
|
-
? 'giphy'
|
|
120
|
-
: 'other'
|
|
121
|
-
: undefined;
|
|
138
|
+
const messageType = lastAttachment && getMessageType(lastAttachment);
|
|
122
139
|
|
|
123
140
|
const hasImage =
|
|
124
141
|
!error &&
|
|
@@ -369,6 +369,9 @@ exports[`Thread should match thread snapshot 1`] = `
|
|
|
369
369
|
"borderBottomLeftRadius": 0,
|
|
370
370
|
"borderBottomRightRadius": 16,
|
|
371
371
|
"borderColor": "#ECEBEB",
|
|
372
|
+
"borderRadius": undefined,
|
|
373
|
+
"borderTopLeftRadius": 16,
|
|
374
|
+
"borderTopRightRadius": 16,
|
|
372
375
|
},
|
|
373
376
|
Object {},
|
|
374
377
|
Object {},
|
|
@@ -617,6 +620,9 @@ exports[`Thread should match thread snapshot 1`] = `
|
|
|
617
620
|
"borderBottomLeftRadius": 0,
|
|
618
621
|
"borderBottomRightRadius": 16,
|
|
619
622
|
"borderColor": "#ECEBEB",
|
|
623
|
+
"borderRadius": undefined,
|
|
624
|
+
"borderTopLeftRadius": 16,
|
|
625
|
+
"borderTopRightRadius": 16,
|
|
620
626
|
},
|
|
621
627
|
Object {},
|
|
622
628
|
Object {},
|
|
@@ -865,6 +871,9 @@ exports[`Thread should match thread snapshot 1`] = `
|
|
|
865
871
|
"borderBottomLeftRadius": 0,
|
|
866
872
|
"borderBottomRightRadius": 16,
|
|
867
873
|
"borderColor": "#ECEBEB",
|
|
874
|
+
"borderRadius": undefined,
|
|
875
|
+
"borderTopLeftRadius": 16,
|
|
876
|
+
"borderTopRightRadius": 16,
|
|
868
877
|
},
|
|
869
878
|
Object {},
|
|
870
879
|
Object {},
|
|
@@ -1161,6 +1170,9 @@ exports[`Thread should match thread snapshot 1`] = `
|
|
|
1161
1170
|
"borderBottomLeftRadius": 0,
|
|
1162
1171
|
"borderBottomRightRadius": 16,
|
|
1163
1172
|
"borderColor": "#ECEBEB",
|
|
1173
|
+
"borderRadius": undefined,
|
|
1174
|
+
"borderTopLeftRadius": 16,
|
|
1175
|
+
"borderTopRightRadius": 16,
|
|
1164
1176
|
},
|
|
1165
1177
|
Object {},
|
|
1166
1178
|
Object {},
|
|
@@ -1,7 +1,6 @@
|
|
|
1
1
|
import React, { PropsWithChildren, useContext, useEffect, useState } from 'react';
|
|
2
2
|
|
|
3
|
-
import type { Asset } from '../../
|
|
4
|
-
import type { DefaultStreamChatGenerics } from '../../types/types';
|
|
3
|
+
import type { Asset, DefaultStreamChatGenerics, File } from '../../types/types';
|
|
5
4
|
import { getDisplayName } from '../utils/getDisplayName';
|
|
6
5
|
|
|
7
6
|
export type AttachmentPickerIconProps = {
|
|
@@ -19,22 +18,22 @@ export type AttachmentPickerContextValue = {
|
|
|
19
18
|
*/
|
|
20
19
|
bottomInset: number;
|
|
21
20
|
/**
|
|
22
|
-
* Custom UI component for [camera selector icon](https://github.com/GetStream/stream-chat-react-native/blob/
|
|
21
|
+
* Custom UI component for [camera selector icon](https://github.com/GetStream/stream-chat-react-native/blob/main/screenshots/docs/1.png)
|
|
23
22
|
*
|
|
24
|
-
* **Default: ** [CameraSelectorIcon](https://github.com/GetStream/stream-chat-react-native/blob/
|
|
23
|
+
* **Default: ** [CameraSelectorIcon](https://github.com/GetStream/stream-chat-react-native/blob/main/package/src/components/AttachmentPicker/components/CameraSelectorIcon.tsx)
|
|
25
24
|
*/
|
|
26
25
|
CameraSelectorIcon: React.ComponentType<AttachmentPickerIconProps>;
|
|
27
26
|
closePicker: () => void;
|
|
28
27
|
/**
|
|
29
|
-
* Custom UI component for [file selector icon](https://github.com/GetStream/stream-chat-react-native/blob/
|
|
28
|
+
* Custom UI component for [file selector icon](https://github.com/GetStream/stream-chat-react-native/blob/main/screenshots/docs/1.png)
|
|
30
29
|
*
|
|
31
|
-
* **Default: ** [FileSelectorIcon](https://github.com/GetStream/stream-chat-react-native/blob/
|
|
30
|
+
* **Default: ** [FileSelectorIcon](https://github.com/GetStream/stream-chat-react-native/blob/main/package/src/components/AttachmentPicker/components/FileSelectorIcon.tsx)
|
|
32
31
|
*/
|
|
33
32
|
FileSelectorIcon: React.ComponentType<AttachmentPickerIconProps>;
|
|
34
33
|
/**
|
|
35
|
-
* Custom UI component for [image selector icon](https://github.com/GetStream/stream-chat-react-native/blob/
|
|
34
|
+
* Custom UI component for [image selector icon](https://github.com/GetStream/stream-chat-react-native/blob/main/screenshots/docs/1.png)
|
|
36
35
|
*
|
|
37
|
-
* **Default: ** [ImageSelectorIcon](https://github.com/GetStream/stream-chat-react-native/blob/
|
|
36
|
+
* **Default: ** [ImageSelectorIcon](https://github.com/GetStream/stream-chat-react-native/blob/main/package/src/components/AttachmentPicker/components/ImageSelectorIcon.tsx)
|
|
38
37
|
*/
|
|
39
38
|
ImageSelectorIcon: React.ComponentType<AttachmentPickerIconProps>;
|
|
40
39
|
/**
|
|
@@ -42,9 +41,11 @@ export type AttachmentPickerContextValue = {
|
|
|
42
41
|
*/
|
|
43
42
|
maxNumberOfFiles: number;
|
|
44
43
|
openPicker: () => void;
|
|
44
|
+
selectedFiles: File[];
|
|
45
45
|
selectedImages: Asset[];
|
|
46
46
|
setBottomInset: React.Dispatch<React.SetStateAction<number>>;
|
|
47
47
|
setMaxNumberOfFiles: React.Dispatch<React.SetStateAction<number>>;
|
|
48
|
+
setSelectedFiles: React.Dispatch<React.SetStateAction<File[]>>;
|
|
48
49
|
setSelectedImages: React.Dispatch<React.SetStateAction<Asset[]>>;
|
|
49
50
|
setSelectedPicker: React.Dispatch<React.SetStateAction<'images' | undefined>>;
|
|
50
51
|
setTopInset: React.Dispatch<React.SetStateAction<number>>;
|
|
@@ -80,6 +81,7 @@ export const AttachmentPickerProvider = ({
|
|
|
80
81
|
const [bottomInset, setBottomInset] = useState<number>(bottomInsetValue ?? 0);
|
|
81
82
|
const [maxNumberOfFiles, setMaxNumberOfFiles] = useState(10);
|
|
82
83
|
const [selectedImages, setSelectedImages] = useState<Asset[]>([]);
|
|
84
|
+
const [selectedFiles, setSelectedFiles] = useState<File[]>([]);
|
|
83
85
|
const [selectedPicker, setSelectedPicker] = useState<'images'>();
|
|
84
86
|
const [topInset, setTopInset] = useState<number>(value?.topInset ?? 0);
|
|
85
87
|
|
|
@@ -93,10 +95,12 @@ export const AttachmentPickerProvider = ({
|
|
|
93
95
|
|
|
94
96
|
const combinedValue = {
|
|
95
97
|
maxNumberOfFiles,
|
|
98
|
+
selectedFiles,
|
|
96
99
|
selectedImages,
|
|
97
100
|
selectedPicker,
|
|
98
101
|
setBottomInset,
|
|
99
102
|
setMaxNumberOfFiles,
|
|
103
|
+
setSelectedFiles,
|
|
100
104
|
setSelectedImages,
|
|
101
105
|
setSelectedPicker,
|
|
102
106
|
setTopInset,
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
Please check the `ChannelContextValue` in [ChannelContext](https://github.com/GetStream/stream-chat-react-native/blob/
|
|
1
|
+
Please check the `ChannelContextValue` in [ChannelContext](https://github.com/GetStream/stream-chat-react-native/blob/main/package/src/contexts/channelContext/ChannelContext.md), for consumable values.
|
|
2
2
|
Provider for this context exists in `Channel` component. And so, any child component of Channel
|
|
3
3
|
can get access to context as following:
|
|
4
4
|
|
|
@@ -36,7 +36,7 @@ export type ChannelContextValue<
|
|
|
36
36
|
/**
|
|
37
37
|
* Custom UI component to display empty state when channel has no messages.
|
|
38
38
|
*
|
|
39
|
-
* **Default** [EmptyStateIndicator](https://github.com/GetStream/stream-chat-react-native/blob/
|
|
39
|
+
* **Default** [EmptyStateIndicator](https://github.com/GetStream/stream-chat-react-native/blob/main/package/src/components/Indicators/EmptyStateIndicator.tsx)
|
|
40
40
|
*/
|
|
41
41
|
EmptyStateIndicator: React.ComponentType<EmptyStateProps>;
|
|
42
42
|
/**
|
|
@@ -155,7 +155,7 @@ export type ChannelContextValue<
|
|
|
155
155
|
/**
|
|
156
156
|
* Custom UI component for sticky header of channel.
|
|
157
157
|
*
|
|
158
|
-
* **Default** [DateHeader](https://github.com/GetStream/stream-chat-react-native/blob/
|
|
158
|
+
* **Default** [DateHeader](https://github.com/GetStream/stream-chat-react-native/blob/main/package/src/components/MessageList/DateHeader.tsx)
|
|
159
159
|
*/
|
|
160
160
|
StickyHeader?: React.ComponentType<{ dateString: string }>;
|
|
161
161
|
/**
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
Please check the `ChannelsContextValue` in [ChannelsContext](https://github.com/GetStream/stream-chat-react-native/blob/
|
|
1
|
+
Please check the `ChannelsContextValue` in [ChannelsContext](https://github.com/GetStream/stream-chat-react-native/blob/main/package/src/contexts/channelsContext/ChannelsContext.md), for consumable values.
|
|
2
2
|
Provider for this context exists in `ChannelList` component. And so, any child component of ChannelList
|
|
3
3
|
can get access to context as following:
|
|
4
4
|
|
|
@@ -172,37 +172,37 @@ export type ChannelsContextValue<
|
|
|
172
172
|
/**
|
|
173
173
|
* Custom UI component to render preview avatar.
|
|
174
174
|
*
|
|
175
|
-
* **Default** [ChannelAvatar](https://github.com/GetStream/stream-chat-react-native/blob/
|
|
175
|
+
* **Default** [ChannelAvatar](https://github.com/GetStream/stream-chat-react-native/blob/main/package/src/components/ChannelPreview/ChannelAvatar.tsx)
|
|
176
176
|
*/
|
|
177
177
|
PreviewAvatar?: React.ComponentType<ChannelAvatarProps<StreamChatGenerics>>;
|
|
178
178
|
/**
|
|
179
179
|
* Custom UI component to render preview of latest message on channel.
|
|
180
180
|
*
|
|
181
|
-
* **Default** [ChannelPreviewMessage](https://github.com/GetStream/stream-chat-react-native/blob/
|
|
181
|
+
* **Default** [ChannelPreviewMessage](https://github.com/GetStream/stream-chat-react-native/blob/main/package/src/components/ChannelPreview/ChannelPreviewMessage.tsx)
|
|
182
182
|
*/
|
|
183
183
|
PreviewMessage?: React.ComponentType<ChannelPreviewMessageProps<StreamChatGenerics>>;
|
|
184
184
|
/**
|
|
185
185
|
* Custom UI component to render muted status.
|
|
186
186
|
*
|
|
187
|
-
* **Default** [ChannelMutedStatus](https://github.com/GetStream/stream-chat-react-native/blob/
|
|
187
|
+
* **Default** [ChannelMutedStatus](https://github.com/GetStream/stream-chat-react-native/blob/main/package/src/components/ChannelPreview/ChannelPreviewMutedStatus.tsx)
|
|
188
188
|
*/
|
|
189
189
|
PreviewMutedStatus?: React.ComponentType<ChannelPreviewMutedStatusProps<StreamChatGenerics>>;
|
|
190
190
|
/**
|
|
191
191
|
* Custom UI component to render preview avatar.
|
|
192
192
|
*
|
|
193
|
-
* **Default** [ChannelPreviewStatus](https://github.com/GetStream/stream-chat-react-native/blob/
|
|
193
|
+
* **Default** [ChannelPreviewStatus](https://github.com/GetStream/stream-chat-react-native/blob/main/package/src/components/ChannelPreview/ChannelPreviewStatus.tsx)
|
|
194
194
|
*/
|
|
195
195
|
PreviewStatus?: React.ComponentType<ChannelPreviewStatusProps<StreamChatGenerics>>;
|
|
196
196
|
/**
|
|
197
197
|
* Custom UI component to render preview avatar.
|
|
198
198
|
*
|
|
199
|
-
* **Default** [ChannelPreviewTitle](https://github.com/GetStream/stream-chat-react-native/blob/
|
|
199
|
+
* **Default** [ChannelPreviewTitle](https://github.com/GetStream/stream-chat-react-native/blob/main/package/src/components/ChannelPreview/ChannelPreviewTitle.tsx)
|
|
200
200
|
*/
|
|
201
201
|
PreviewTitle?: React.ComponentType<ChannelPreviewTitleProps<StreamChatGenerics>>;
|
|
202
202
|
/**
|
|
203
203
|
* Custom UI component to render preview avatar.
|
|
204
204
|
*
|
|
205
|
-
* **Default** [ChannelPreviewUnreadCount](https://github.com/GetStream/stream-chat-react-native/blob/
|
|
205
|
+
* **Default** [ChannelPreviewUnreadCount](https://github.com/GetStream/stream-chat-react-native/blob/main/package/src/components/ChannelPreview/ChannelPreviewUnreadCount.tsx)
|
|
206
206
|
*/
|
|
207
207
|
PreviewUnreadCount?: React.ComponentType<ChannelPreviewUnreadCountProps<StreamChatGenerics>>;
|
|
208
208
|
};
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
Please check the `ChatContextValue` in [ChatContext](https://github.com/GetStream/stream-chat-react-native/blob/
|
|
1
|
+
Please check the `ChatContextValue` in [ChatContext](https://github.com/GetStream/stream-chat-react-native/blob/main/package/src/contexts/chatContext/ChatContext.tsx), for consumable values.
|
|
2
2
|
Provider for this context exists in `Chat` component. And so, any child component of Chat
|
|
3
3
|
can get access to context as following:
|
|
4
4
|
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
Please check the `ImageGalleryContextValue` in [ImageGalleryContext](https://github.com/GetStream/stream-chat-react-native/blob/
|
|
1
|
+
Please check the `ImageGalleryContextValue` in [ImageGalleryContext](https://github.com/GetStream/stream-chat-react-native/blob/main/package/src/contexts/imageGalleryContext/ImageGalleryContext.tsx), for consumable values.
|
|
2
2
|
Provider for this context exists in `OverlayProvider` component. And so, any child component of OverlayProvider
|
|
3
3
|
can get access to context as following:
|
|
4
4
|
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
When user focuses on input box, keyboard opens up on mobile devices. When keyboard opens, it is necessary to update the position of input box and height of content on screen
|
|
2
|
-
so that it doesn't get hidden behind keyboard. This is handled by [KeyboardCompatibleView](https://github.com/GetStream/stream-chat-react-native/blob/
|
|
2
|
+
so that it doesn't get hidden behind keyboard. This is handled by [KeyboardCompatibleView](https://github.com/GetStream/stream-chat-react-native/blob/main/package/src/components/KeyboardCompatibleView/KeyboardCompatibleView.tsx) which
|
|
3
3
|
is a HOC. It creates a context which contain following function.
|
|
4
4
|
|
|
5
5
|
- **dismissKeyboard** Dismisses the keyboard and adjusts the height of content on screen.
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
Please check the `MessageContextValue` in [MessageContext](https://github.com/GetStream/stream-chat-react-native/blob/
|
|
1
|
+
Please check the `MessageContextValue` in [MessageContext](https://github.com/GetStream/stream-chat-react-native/blob/main/package/src/contexts/messageContext/MessageContext.tsx), for consumable values.
|
|
2
2
|
Provider for this context exists in `Message` component. And so, any child component of `Message`
|
|
3
3
|
can get access to context as following:
|
|
4
4
|
|
|
@@ -61,7 +61,7 @@ export type MessageContextValue<
|
|
|
61
61
|
* You can call methods available on the Message
|
|
62
62
|
* component such as handleEdit, handleDelete, handleAction etc.
|
|
63
63
|
*
|
|
64
|
-
* Source - [Message](https://github.com/GetStream/stream-chat-react-native/blob/
|
|
64
|
+
* Source - [Message](https://github.com/GetStream/stream-chat-react-native/blob/main/package/src/components/Message/Message.tsx)
|
|
65
65
|
*
|
|
66
66
|
* By default, we show the overlay with all the message actions on long press.
|
|
67
67
|
*
|
|
@@ -76,7 +76,7 @@ export type MessageContextValue<
|
|
|
76
76
|
* You can call methods available on the Message
|
|
77
77
|
* component such as handleEdit, handleDelete, handleAction etc.
|
|
78
78
|
*
|
|
79
|
-
* Source - [Message](https://github.com/GetStream/stream-chat-react-native/blob/
|
|
79
|
+
* Source - [Message](https://github.com/GetStream/stream-chat-react-native/blob/main/package/src/components/Message/Message.tsx)
|
|
80
80
|
*
|
|
81
81
|
* By default, we will dismiss the keyboard on press.
|
|
82
82
|
*
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
Please check the `MessageInputContextValue` in [MessageInputContext](https://github.com/GetStream/stream-chat-react-native/blob/
|
|
1
|
+
Please check the `MessageInputContextValue` in [MessageInputContext](https://github.com/GetStream/stream-chat-react-native/blob/main/package/src/contexts/messageInputContext/MessageInputContext.tsx), for consumable values.
|
|
2
2
|
Provider for this context exists in `Channel` component. And so, any child component of `Channel`
|
|
3
3
|
can get access to context as following:
|
|
4
4
|
|