stream-chat-react-native-core 4.1.0-next.1 → 4.1.1-beta.2

package/src/components/Thread/components/ThreadFooterComponent.tsx

@@ -12,19 +12,9 @@ import {
   useThreadContext,
 } from '../../../contexts/threadContext/ThreadContext';
 import { useTranslationContext } from '../../../contexts/translationContext/TranslationContext';
+import type { DefaultStreamChatGenerics } from '../../../types/types';
 import { vw } from '../../../utils/utils';
 
-import type {
-  DefaultAttachmentType,
-  DefaultChannelType,
-  DefaultCommandType,
-  DefaultEventType,
-  DefaultMessageType,
-  DefaultReactionType,
-  DefaultUserType,
-  UnknownType,
-} from '../../../types/types';
-
 const styles = StyleSheet.create({
   absolute: { position: 'absolute' },
   messagePadding: {
@@ -46,26 +36,14 @@ const styles = StyleSheet.create({
 });
 
 type ThreadFooterComponentPropsWithContext<
-  At extends UnknownType = DefaultAttachmentType,
-  Ch extends UnknownType = DefaultChannelType,
-  Co extends string = DefaultCommandType,
-  Ev extends UnknownType = DefaultEventType,
-  Me extends UnknownType = DefaultMessageType,
-  Re extends UnknownType = DefaultReactionType,
-  Us extends UnknownType = DefaultUserType,
-> = Pick<MessagesContextValue<At, Ch, Co, Ev, Me, Re, Us>, 'Message'> &
-  Pick<ThreadContextValue<At, Ch, Co, Ev, Me, Re, Us>, 'thread'>;
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
+> = Pick<MessagesContextValue<StreamChatGenerics>, 'Message'> &
+  Pick<ThreadContextValue<StreamChatGenerics>, 'thread'>;
 
 const ThreadFooterComponentWithContext = <
-  At extends UnknownType = DefaultAttachmentType,
-  Ch extends UnknownType = DefaultChannelType,
-  Co extends string = DefaultCommandType,
-  Ev extends UnknownType = DefaultEventType,
-  Me extends UnknownType = DefaultMessageType,
-  Re extends UnknownType = DefaultReactionType,
-  Us extends UnknownType = DefaultUserType,
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 >(
-  props: ThreadFooterComponentPropsWithContext<At, Ch, Co, Ev, Me, Re, Us>,
+  props: ThreadFooterComponentPropsWithContext<StreamChatGenerics>,
 ) => {
   const { Message, thread } = props;
   const { t } = useTranslationContext();
@@ -84,7 +62,7 @@ const ThreadFooterComponentWithContext = <
   const replyCount = thread.reply_count;
 
   return (
-    <View style={styles.threadHeaderContainer}>
+    <View style={styles.threadHeaderContainer} testID='thread-footer-component'>
       <View style={styles.messagePadding}>
         <Message groupStyles={['single']} message={thread} preventPress threadList />
       </View>
@@ -125,17 +103,9 @@ const ThreadFooterComponentWithContext = <
   );
 };
 
-const areEqual = <
-  At extends UnknownType = DefaultAttachmentType,
-  Ch extends UnknownType = DefaultChannelType,
-  Co extends string = DefaultCommandType,
-  Ev extends UnknownType = DefaultEventType,
-  Me extends UnknownType = DefaultMessageType,
-  Re extends UnknownType = DefaultReactionType,
-  Us extends UnknownType = DefaultUserType,
->(
-  prevProps: ThreadFooterComponentPropsWithContext<At, Ch, Co, Ev, Me, Re, Us>,
-  nextProps: ThreadFooterComponentPropsWithContext<At, Ch, Co, Ev, Me, Re, Us>,
+const areEqual = <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>(
+  prevProps: ThreadFooterComponentPropsWithContext<StreamChatGenerics>,
+  nextProps: ThreadFooterComponentPropsWithContext<StreamChatGenerics>,
 ) => {
   const { thread: prevThread } = prevProps;
   const { thread: nextThread } = nextProps;
@@ -167,16 +137,10 @@ const MemoizedThreadFooter = React.memo(
 ) as typeof ThreadFooterComponentWithContext;
 
 export const ThreadFooterComponent = <
-  At extends UnknownType = DefaultAttachmentType,
-  Ch extends UnknownType = DefaultChannelType,
-  Co extends string = DefaultCommandType,
-  Ev extends UnknownType = DefaultEventType,
-  Me extends UnknownType = DefaultMessageType,
-  Re extends UnknownType = DefaultReactionType,
-  Us extends UnknownType = DefaultUserType,
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 >() => {
-  const { Message } = useMessagesContext<At, Ch, Co, Ev, Me, Re, Us>();
-  const { thread } = useThreadContext<At, Ch, Co, Ev, Me, Re, Us>();
+  const { Message } = useMessagesContext<StreamChatGenerics>();
+  const { thread } = useThreadContext<StreamChatGenerics>();
 
   return (
     <MemoizedThreadFooter

package/src/components/docs/ListProps.md

@@ -1,6 +1,6 @@
 All props available in the [ChannelList](#channellist) component are passed along to the List component. Additionally, the following props are provided to the List component:
 
-- `error` {boolean} Error in channels query, if any
+- `error` {boolean | Error} Error in channels query, if any
 - `channels` {array} List of channel objects
 - `forceUpdate` {number} Incremental number change to force update the FlatList
 - `hasNextPage` {boolean} Whether or not the FlatList has another page to render

package/src/components/docs/data.js

@@ -1,7 +1,6 @@
 /* global require */
-
-const StreamChat = require('stream-chat').StreamChat;
 const Dayjs = require('dayjs');
+const StreamChat = require('stream-chat').StreamChat;
 export const client = new StreamChat('qk4nn7rpcn75');
 
 client.connectUser(
@@ -18,8 +17,8 @@ export const channel = client.channel('messaging', 'general', {
 });
 
 export const channelContext = {
-  client,
   channel,
+  client,
 };
 
 export const translationContext = {
@@ -27,13 +26,13 @@ export const translationContext = {
   tDateTimeParser: (date) => Dayjs(date),
 };
 export const suggestionsContext = {
-  openSuggestions: () => {},
   closeSuggestions: () => {},
+  openSuggestions: () => {},
   setInputBoxContainerRef: () => {},
   updateSuggestions: () => {},
 };
 
-const filters = { type: 'team', example: 1 };
+const filters = { example: 1, type: 'team' };
 const sort = { last_message_at: -1 };
 
 export const channels = client.queryChannels(filters, sort, {
@@ -41,11 +40,14 @@ export const channels = client.queryChannels(filters, sort, {
 });
 
 export const message = {
+  __html:
+    '<p><a href="https://unsplash.com/photos/lxuB4abGzXc" rel="nofollow">https://unsplash.com/photos/lxuB4abGzXc</a></p>\n',
   attachments: [],
   command: '',
   created_at: '2019-01-25T00:18:59.675Z',
   html:
     '<p><a href="https://unsplash.com/photos/lxuB4abGzXc" rel="nofollow">https://unsplash.com/photos/lxuB4abGzXc</a></p>\n',
+  id: 'thierry-e298f569-8745-407f-a02b-f75c0206612f',
   own_reactions: [
     {
       created_at: '2019-01-25T16:24:00.173967Z',
@@ -111,8 +113,8 @@ export const message = {
     },
   ],
   reply_count: 0,
+  status: 'received',
   text: 'Hey this is getstream message',
-  id: 'thierry-e298f569-8745-407f-a02b-f75c0206612f',
   type: 'regular',
   updated_at: '2019-01-25T16:24:00.181Z',
   user: {
@@ -125,12 +127,11 @@ export const message = {
     role: 'user',
     updated_at: '2019-01-25T16:23:47.052538Z',
   },
-  __html:
-    '<p><a href="https://unsplash.com/photos/lxuB4abGzXc" rel="nofollow">https://unsplash.com/photos/lxuB4abGzXc</a></p>\n',
-  status: 'received',
 };
 
 export const messageWithImages = {
+  __html:
+    '<p><a href="https://unsplash.com/photos/lxuB4abGzXc" rel="nofollow">https://unsplash.com/photos/lxuB4abGzXc</a></p>\n',
   attachments: [
     {
       image_url:
@@ -164,6 +165,7 @@ export const messageWithImages = {
   command: '',
   created_at: '2019-01-25T00:18:59.675Z',
   html: '',
+  id: 'thierry-e298f569-8745-407f-a02b-f75c0206612f',
   own_reactions: [
     {
       created_at: '2019-01-25T16:24:00.173967Z',
@@ -229,8 +231,8 @@ export const messageWithImages = {
     },
   ],
   reply_count: 0,
+  status: 'received',
   text: 'This message contains images',
-  id: 'thierry-e298f569-8745-407f-a02b-f75c0206612f',
   type: 'regular',
   updated_at: '2019-01-25T16:24:00.181Z',
   user: {
@@ -243,12 +245,12 @@ export const messageWithImages = {
     role: 'user',
     updated_at: '2019-01-25T16:23:47.052538Z',
   },
-  __html:
-    '<p><a href="https://unsplash.com/photos/lxuB4abGzXc" rel="nofollow">https://unsplash.com/photos/lxuB4abGzXc</a></p>\n',
-  status: 'received',
+  
 };
 
 export const messageWithUrlPreview = {
+  __html:
+    '<p><a href="https://unsplash.com/photos/lxuB4abGzXc" rel="nofollow">https://unsplash.com/photos/lxuB4abGzXc</a></p>\n',
   attachments: [
     {
       image_url:
@@ -267,6 +269,7 @@ export const messageWithUrlPreview = {
   created_at: '2019-01-25T00:18:59.675Z',
   html:
     '<p><a href="https://unsplash.com/photos/lxuB4abGzXc" rel="nofollow">https://unsplash.com/photos/lxuB4abGzXc</a></p>\n',
+  id: 'thierry-e298f569-8745-407f-a02b-f75c0206612f',
   own_reactions: [
     {
       created_at: '2019-01-25T16:24:00.173967Z',
@@ -332,8 +335,8 @@ export const messageWithUrlPreview = {
     },
   ],
   reply_count: 0,
+  status: 'received',
   text: 'https://unsplash.com/photos/lxuB4abGzXc',
-  id: 'thierry-e298f569-8745-407f-a02b-f75c0206612f',
   type: 'regular',
   updated_at: '2019-01-25T16:24:00.181Z',
   user: {
@@ -346,12 +349,11 @@ export const messageWithUrlPreview = {
     role: 'user',
     updated_at: '2019-01-25T16:23:47.052538Z',
   },
-  __html:
-    '<p><a href="https://unsplash.com/photos/lxuB4abGzXc" rel="nofollow">https://unsplash.com/photos/lxuB4abGzXc</a></p>\n',
-  status: 'received',
 };
 
 export const thread = {
+  __html:
+    '<p>this place looks amazing: <a href="https://unsplash.com/photos/f3hDGOHptrM" rel="nofollow">https://unsplash.com/photos/f3hDGOHptrM</a></p>\n',
   attachments: [
     {
       image_url:
@@ -370,12 +372,13 @@ export const thread = {
   created_at: '2019-01-25T21:25:45.306Z',
   html:
     '<p>this place looks amazing: <a href="https://unsplash.com/photos/f3hDGOHptrM" rel="nofollow">https://unsplash.com/photos/f3hDGOHptrM</a></p>\n',
+  id: 'thierry-ec4eac2b-1278-4f49-8b20-2ebcd76dace5',
   own_reactions: [],
   reaction_counts: null,
   reactions: [],
   reply_count: 2,
+  status: 'received',
   text: 'this place looks amazing: https://unsplash.com/photos/f3hDGOHptrM',
-  id: 'thierry-ec4eac2b-1278-4f49-8b20-2ebcd76dace5',
   type: 'regular',
   updated_at: '2019-01-25T21:25:45.306Z',
   user: {
@@ -385,24 +388,24 @@ export const thread = {
     role: 'user',
     updated_at: '2019-01-25T21:27:39.606466Z',
   },
-  __html:
-    '<p>this place looks amazing: <a href="https://unsplash.com/photos/f3hDGOHptrM" rel="nofollow">https://unsplash.com/photos/f3hDGOHptrM</a></p>\n',
-  status: 'received',
+  
 };
 
 export const threadMessages = [
   {
+    __html: '<p>whow, where is that?</p>\n',
     attachments: [],
     command: '',
     created_at: new Date('2019-01-25T21:26:06.346Z'),
     html: '<p>whow, where is that?</p>\n',
+    id: 'thierry-97a02ade-3a38-4400-9377-001c10fc2663',
     own_reactions: [],
     parent_id: '6312fb0b-0c94-4107-a036-376ac5ab650b',
     reaction_counts: null,
     reactions: [],
     reply_count: 0,
+    status: 'received',
     text: 'whow, where is that?',
-    id: 'thierry-97a02ade-3a38-4400-9377-001c10fc2663',
     type: 'reply',
     updated_at: '2019-01-25T21:26:06.346Z',
     user: {
@@ -415,21 +418,21 @@ export const threadMessages = [
       role: 'user',
       updated_at: '2019-01-25T21:27:39.606466Z',
     },
-    __html: '<p>whow, where is that?</p>\n',
-    status: 'received',
   },
   {
+    __html: '<p>it’s soo green, amazing</p>\n',
     attachments: [],
     command: '',
     created_at: new Date('2019-01-25T21:26:11.863Z'),
     html: '<p>it’s soo green, amazing</p>\n',
+    id: 'thierry-264fdc4d-03c5-4f93-b97c-cfe5612968aa',
     own_reactions: [],
     parent_id: '6312fb0b-0c94-4107-a036-376ac5ab650b',
     reaction_counts: null,
     reactions: [],
     reply_count: 0,
+    status: 'received',
     text: "it's soo green, amazing",
-    id: 'thierry-264fdc4d-03c5-4f93-b97c-cfe5612968aa',
     type: 'reply',
     updated_at: '2019-01-25T21:26:11.863Z',
     user: {
@@ -442,24 +445,24 @@ export const threadMessages = [
       role: 'user',
       updated_at: '2019-01-25T21:27:39.606466Z',
     },
-    __html: '<p>it’s soo green, amazing</p>\n',
-    status: 'received',
   },
 ];
 
 export const messages = [
   {
+    __html: '<p>whow, where is that?</p>\n',
     attachments: [],
     command: '',
     created_at: new Date('2019-01-25T21:26:06.346Z'),
     html: '<p>whow, where is that?</p>\n',
+    id: 'thierry-97a02ade-3a38-4400-9377-001c10fc2663',
     own_reactions: [],
     parent_id: '6312fb0b-0c94-4107-a036-376ac5ab650b',
     reaction_counts: null,
     reactions: [],
     reply_count: 0,
+    status: 'received',
     text: 'whow, where is that?',
-    id: 'thierry-97a02ade-3a38-4400-9377-001c10fc2663',
     type: 'reply',
     updated_at: '2019-01-25T21:26:06.346Z',
     user: {
@@ -472,21 +475,21 @@ export const messages = [
       role: 'user',
       updated_at: '2019-01-25T21:27:39.606466Z',
     },
-    __html: '<p>whow, where is that?</p>\n',
-    status: 'received',
   },
   {
+    __html: '<p>it’s soo green, amazing</p>\n',
     attachments: [],
     command: '',
     created_at: new Date('2019-01-25T21:26:11.863Z'),
     html: '<p>it’s soo green, amazing</p>\n',
+    id: 'thierry-264fdc4d-03c5-4f93-b97c-cfe5612968aa',
     own_reactions: [],
     parent_id: '6312fb0b-0c94-4107-a036-376ac5ab650b',
     reaction_counts: null,
     reactions: [],
     reply_count: 0,
+    status: 'received',
     text: "it's soo green, amazing",
-    id: 'thierry-264fdc4d-03c5-4f93-b97c-cfe5612968aa',
     type: 'reply',
     updated_at: '2019-01-25T21:26:11.863Z',
     user: {
@@ -499,8 +502,6 @@ export const messages = [
       role: 'user',
       updated_at: '2019-01-25T21:27:39.606466Z',
     },
-    __html: '<p>it’s soo green, amazing</p>\n',
-    status: 'received',
   },
 ];
 
@@ -516,12 +517,12 @@ export const users = [
 ];
 
 export const MessageMock = {
-  handleFlag: console.log,
-  handleMute: console.log,
-  handleEdit: console.log,
-  handleDelete: console.log,
   canDeleteMessage: () => true,
   canEditMessage: () => true,
+  handleDelete: console.log,
+  handleEdit: console.log,
+  handleFlag: console.log,
+  handleMute: console.log,
 };
 
 // Based on: https://javascript.info/promise-basics#example-loadscript

package/src/components/index.ts

@@ -6,6 +6,7 @@ export * from './Attachment/FileAttachmentGroup';
 export * from './Attachment/FileIcon';
 export * from './Attachment/Gallery';
 export * from './Attachment/Giphy';
+export * from './Attachment/utils/buildGallery/buildGallery';
 
 export * from './AttachmentPicker/AttachmentPicker';
 export * from './AttachmentPicker/components/AttachmentPickerBottomSheetHandle';
@@ -18,12 +19,9 @@ export * from './AttachmentPicker/components/ImageOverlaySelectedComponent';
 export * from './AttachmentPicker/components/ImageSelectorIcon';
 
 export * from './AutoCompleteInput/AutoCompleteInput';
-export * from './AutoCompleteInput/CommandsHeader';
-export * from './AutoCompleteInput/CommandsItem';
-export * from './AutoCompleteInput/EmojisHeader';
-export * from './AutoCompleteInput/EmojisItem';
-export * from './AutoCompleteInput/MentionsItem';
-export * from './AutoCompleteInput/SuggestionsList';
+export * from './AutoCompleteInput/AutoCompleteSuggestionHeader';
+export * from './AutoCompleteInput/AutoCompleteSuggestionItem';
+export * from './AutoCompleteInput/AutoCompleteSuggestionList';
 
 export * from './Avatar/Avatar';
 export * from './Avatar/GroupAvatar';
@@ -91,11 +89,14 @@ export * from './Indicators/LoadingIndicator';
 export * from './KeyboardCompatibleView/KeyboardCompatibleView';
 
 export * from './Message/hooks/useCreateMessageContext';
+export * from './Message/hooks/useMessageActions';
+export * from './Message/hooks/useMessageActionHandlers';
 export * from './Message/Message';
 export * from './Message/MessageSimple/MessageAvatar';
 export * from './Message/MessageSimple/MessageContent';
 export * from './Message/MessageSimple/MessageDeleted';
 export * from './Message/MessageSimple/MessageFooter';
+export * from './Message/MessageSimple/MessagePinnedHeader';
 export * from './Message/MessageSimple/MessageReplies';
 export * from './Message/MessageSimple/MessageRepliesAvatars';
 export * from './Message/MessageSimple/MessageSimple';
@@ -108,6 +109,7 @@ export * from './Message/utils/removeReservedFields';
 
 export * from './MessageInput/AttachButton';
 export * from './MessageInput/CommandsButton';
+export * from './MessageInput/CooldownTimer';
 export * from './MessageInput/FileUploadPreview';
 export * from './MessageInput/ImageUploadPreview';
 export * from './MessageInput/InputButtons';
@@ -136,9 +138,13 @@ export * from './MessageList/utils/getGroupStyles';
 export * from './MessageList/utils/getLastReceivedMessage';
 export * from './MessageList/utils/getReadStates';
 
-export * from './MessageOverlay/MessageActions';
+export * from './MessageOverlay/hooks/useMessageActionAnimation';
+export * from './MessageOverlay/MessageActionList';
+export * from './MessageOverlay/MessageActionListItem';
 export * from './MessageOverlay/MessageOverlay';
+export * from './MessageOverlay/OverlayBackdrop';
 export * from './MessageOverlay/OverlayReactions';
+export * from './MessageOverlay/OverlayReactionsAvatar';
 export * from './MessageOverlay/OverlayReactionList';
 
 export * from './Reply/Reply';

package/src/contexts/activeChannelsRefContext/ActiveChannelsRefContext.tsx

@@ -1,8 +1,7 @@
 import React, { PropsWithChildren, useContext } from 'react';
 
-import { getDisplayName } from '../utils/getDisplayName';
-
 import type { UnknownType } from '../../types/types';
+import { getDisplayName } from '../utils/getDisplayName';
 
 type ActiveChannels = React.MutableRefObject<string[]>;
 

package/src/contexts/attachmentPickerContext/AttachmentPickerContext.tsx

@@ -1,9 +1,8 @@
 import React, { PropsWithChildren, useContext, useEffect, useState } from 'react';
 
-import { getDisplayName } from '../utils/getDisplayName';
-
 import type { Asset } from '../../native';
-import type { UnknownType } from '../../types/types';
+import type { DefaultStreamChatGenerics } from '../../types/types';
+import { getDisplayName } from '../utils/getDisplayName';
 
 export type AttachmentPickerIconProps = {
   numberOfImageUploads: number;
@@ -118,18 +117,20 @@ export const AttachmentPickerProvider = ({
 export const useAttachmentPickerContext = () =>
   useContext(AttachmentPickerContext) as unknown as AttachmentPickerContextValue;
 
-export const withAttachmentPickerContext = <P extends UnknownType>(
-  Component: React.ComponentType<P>,
-): React.FC<Omit<P, keyof AttachmentPickerContextValue>> => {
+export const withAttachmentPickerContext = <
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
+>(
+  Component: React.ComponentType<StreamChatGenerics>,
+): React.FC<Omit<StreamChatGenerics, keyof AttachmentPickerContextValue>> => {
   const WithAttachmentPickerContextComponent = (
-    props: Omit<P, keyof AttachmentPickerContextValue>,
+    props: Omit<StreamChatGenerics, keyof AttachmentPickerContextValue>,
   ) => {
     const attachmentPickerContext = useAttachmentPickerContext();
 
-    return <Component {...(props as P)} {...attachmentPickerContext} />;
+    return <Component {...(props as StreamChatGenerics)} {...attachmentPickerContext} />;
   };
   WithAttachmentPickerContextComponent.displayName = `WithAttachmentPickerContext${getDisplayName(
-    Component,
+    Component as React.ComponentType,
   )}`;
   return WithAttachmentPickerContextComponent;
 };