Merge pull request #402 from GetStream/vishal/slack-clone-fixes

Minor fixes/additions

Author: vishalnarkhede

expo-package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "stream-chat-expo",
-  "version": "2.0.0-beta.1",
+  "version": "2.0.0-dev-sc.0",
   "author": {
     "company": "Stream.io Inc",
     "name": "Stream.io Inc"
@@ -9,7 +9,7 @@
   "main": "src/index.js",
   "types": "types/index.d.ts",
   "dependencies": {
-    "stream-chat-react-native-core": "v2.0.0-beta.1"
+    "stream-chat-react-native-core": "v2.0.0-dev-sc.0"
   },
   "peerDependencies": {
     "expo": "^39.0.0",

native-package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "stream-chat-react-native",
-  "version": "2.0.0-beta.1",
+  "version": "2.0.0-dev-sc.0",
   "author": {
     "company": "Stream.io Inc",
     "name": "Stream.io Inc"
@@ -10,7 +10,7 @@
   "types": "types/index.d.ts",
   "dependencies": {
     "es6-symbol": "^3.1.3",
-    "stream-chat-react-native-core": "v2.0.0-beta.1"
+    "stream-chat-react-native-core": "v2.0.0-dev-sc.0"
   },
   "peerDependencies": {
     "@react-native-community/netinfo": ">=2.0.7",

package.json

@@ -1,6 +1,6 @@
 {
   "name": "stream-chat-react-native-core",
-  "version": "2.0.0-beta.1",
+  "version": "2.0.0-dev-sc.0",
   "author": {
     "company": "Stream.io Inc",
     "name": "Stream.io Inc"

src/components/Message/MessageSimple/MessageActionSheet.tsx

@@ -6,6 +6,18 @@ import type { StyleProp, TextStyle, ViewStyle } from 'react-native';
 import { useTranslationContext } from '../../../contexts/translationContext/TranslationContext';
 import { styled } from '../../../styles/styledComponents';
 import { MESSAGE_ACTIONS } from '../../../utils/utils';
+import type { Message as InsertDatesMessage } from '../../MessageList/utils/insertDates';
+import type {
+  DefaultAttachmentType,
+  DefaultChannelType,
+  DefaultCommandType,
+  DefaultEventType,
+  DefaultMessageType,
+  DefaultReactionType,
+  DefaultUserType,
+  UnknownType,
+} from '../../../types/types';
+import type { Reaction } from 'src/components/Reaction/ReactionList';
 
 const ActionSheetButtonContainer = styled.View`
   align-items: center;
@@ -62,7 +74,15 @@ export type ActionSheetStyles = {
   wrapper?: StyleProp<ViewStyle>;
 };
 
-export type MessageActionSheetProps = {
+export type MessageActionSheetProps<
+  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
+> = {
   /**
    * Handler to delete a current message
    */
@@ -72,6 +92,8 @@ export type MessageActionSheetProps = {
    * The `editing` prop is used by the MessageInput component to switch to edit mode.
    */
   handleEdit: () => void;
+  handleReaction: (reactionType: string) => Promise<void>;
+  message: InsertDatesMessage<At, Ch, Co, Ev, Me, Re, Us>;
   /**
    * Function that opens the reaction picker
    */
@@ -97,6 +119,7 @@ export type MessageActionSheetProps = {
    * React useState hook setter function that toggles action sheet visibility
    */
   setActionSheetVisible: React.Dispatch<React.SetStateAction<boolean>>;
+  supportedReactions: Reaction[];
   /**
    * Style object for action sheet (used to style message actions)
    * Supported styles: https://github.com/beefe/react-native-actionsheet/blob/master/lib/styles.js

src/components/Message/MessageSimple/MessageContent.tsx

@@ -146,6 +146,7 @@ export type ForwardedMessageProps<
    * e.g., user avatar (to which message belongs to) is only showed for last (bottom) message in group.
    */
   groupStyles: GroupType[];
+  disabled?: boolean;
   /**
    * Custom message footer component
    */
@@ -161,6 +162,7 @@ export type ForwardedMessageProps<
   MessageReplies?: React.ComponentType<
     MessageRepliesProps<At, Ch, Co, Ev, Me, Re, Us>
   >;
+  textBeforeAttachments?: boolean;
 };
 
 /**
@@ -229,9 +231,20 @@ export const MessageContent = <
     showActionSheet,
     supportedReactions = emojiData,
     threadList,
+    textBeforeAttachments = false,
+    disabled: disabledFromProps,
   } = props;
 
-  const { disabled } = useChannelContext<At, Ch, Co, Ev, Me, Re, Us>();
+  const { disabled: disabledFromContext } = useChannelContext<
+    At,
+    Ch,
+    Co,
+    Ev,
+    Me,
+    Re,
+    Us
+  >();
+  const disabled = disabledFromProps || disabledFromContext;
   const {
     Attachment: ContextAttachment,
     Message,
@@ -344,6 +357,53 @@ export const MessageContent = <
     return message.created_at;
   };
 
+  const renderAttachments = () => (
+    <>
+      {Array.isArray(message.attachments) &&
+        message.attachments.map((attachment, index) => {
+          // We handle files separately
+          if (
+            attachment.type === 'file' ||
+            (attachment.type === 'image' &&
+              !attachment.title_link &&
+              !attachment.og_scrape_url)
+          ) {
+            return null;
+          }
+
+          return (
+            <Attachment<At>
+              actionHandler={handleAction}
+              alignment={alignment}
+              attachment={attachment}
+              AttachmentActions={AttachmentActions}
+              Card={Card}
+              CardCover={CardCover}
+              CardFooter={CardFooter}
+              CardHeader={CardHeader}
+              FileAttachment={FileAttachment}
+              Giphy={Giphy}
+              key={`${message.id}-${index}`}
+              UrlPreview={UrlPreview}
+            />
+          );
+        })}
+      {files.length > 0 && (
+        <FileAttachmentGroup<At>
+          alignment={alignment}
+          AttachmentActions={AttachmentActions}
+          AttachmentFileIcon={AttachmentFileIcon}
+          FileAttachment={FileAttachment}
+          files={files}
+          handleAction={handleAction}
+          messageId={message.id}
+        />
+      )}
+      {images.length > 0 && (
+        <Gallery<At> alignment={alignment} images={images} />
+      )}
+    </>
+  );
   return (
     <MessageContentProvider value={context}>
       <Container
@@ -401,49 +461,7 @@ export const MessageContent = <
         {MessageHeader && <MessageHeader testID='message-header' {...props} />}
         {/* TODO: Look at this in production: Reason for collapsible: https://github.com/facebook/react-native/issues/12966 */}
         <ContainerInner alignment={alignment} collapsable={false}>
-          {Array.isArray(message.attachments) &&
-            message.attachments.map((attachment, index) => {
-              // We handle files separately
-              if (
-                attachment.type === 'file' ||
-                (attachment.type === 'image' &&
-                  !attachment.title_link &&
-                  !attachment.og_scrape_url)
-              ) {
-                return null;
-              }
-
-              return (
-                <Attachment<At>
-                  actionHandler={handleAction}
-                  alignment={alignment}
-                  attachment={attachment}
-                  AttachmentActions={AttachmentActions}
-                  Card={Card}
-                  CardCover={CardCover}
-                  CardFooter={CardFooter}
-                  CardHeader={CardHeader}
-                  FileAttachment={FileAttachment}
-                  Giphy={Giphy}
-                  key={`${message.id}-${index}`}
-                  UrlPreview={UrlPreview}
-                />
-              );
-            })}
-          {files.length > 0 && (
-            <FileAttachmentGroup<At>
-              alignment={alignment}
-              AttachmentActions={AttachmentActions}
-              AttachmentFileIcon={AttachmentFileIcon}
-              FileAttachment={FileAttachment}
-              files={files}
-              handleAction={handleAction}
-              messageId={message.id}
-            />
-          )}
-          {images.length > 0 && (
-            <Gallery<At> alignment={alignment} images={images} />
-          )}
+          {!textBeforeAttachments && renderAttachments()}
           <MessageTextContainer<At, Ch, Co, Ev, Me, Re, Us>
             alignment={alignment}
             disabled={message.status === 'failed' || message.type === 'error'}
@@ -456,6 +474,7 @@ export const MessageContent = <
             MessageText={MessageText}
             openThread={onOpenThread}
           />
+          {textBeforeAttachments && renderAttachments()}
         </ContainerInner>
         {repliesEnabled && (
           <MessageReplies<At, Ch, Co, Ev, Me, Re, Us>
@@ -484,13 +503,16 @@ export const MessageContent = <
             canEditMessage={canEditMessage}
             handleDelete={handleDelete}
             handleEdit={handleEdit}
+            handleReaction={handleReaction}
+            message={message}
             messageActions={messageActions}
             openReactionPicker={openReactionPicker}
             openThread={onOpenThread}
             reactionsEnabled={reactionsEnabled}
             ref={actionSheetRef}
             repliesEnabled={repliesEnabled}
             setActionSheetVisible={setActionSheetVisible}
+            supportedReactions={emojiData}
             threadList={threadList}
           />
         )}

src/components/Message/MessageSimple/MessageSimple.tsx

@@ -358,6 +358,7 @@ export type MessageSimpleProps<
       icon: string;
       id: string;
     }[];
+    textBeforeAttachment?: boolean;
     /**
      * Custom UI component to display enriched url preview.
      * Defaults to https://github.com/GetStream/stream-chat-react-native/blob/master/src/components/Attachment/Card.tsx

src/components/Message/MessageSimple/utils/renderText.tsx

@@ -76,7 +76,7 @@ export const renderText = <
 
   for (const urlInfo of urls) {
     const displayLink = truncate(urlInfo.encoded.replace(/^(www\.)/, ''), {
-      length: 20,
+      length: 200,
       omission: '...',
     });
     const markdown = `[${displayLink}](${urlInfo.protocol}${urlInfo.encoded})`;

src/components/MessageList/TypingIndicator.tsx

@@ -22,7 +22,7 @@ import type {
 } from '../../types/types';
 
 const Container = styled.View`
-  align-items: center;
+  align-items: flex-end;
   flex-direction: row;
   justify-content: flex-start;
   ${({ theme }) => theme.typingIndicator.container.css};
@@ -70,7 +70,7 @@ export const TypingIndicator = <
           image={user.image}
           key={`${user.id}${idx}`}
           name={user.name || user.id}
-          size={24}
+          size={20}
           testID={`typing-avatar-${idx}`}
         />
       ))}

src/components/MessageList/__tests__/__snapshots__/TypingIndicator.test.js.snap

@@ -5,7 +5,7 @@ exports[`TypingIndicator should match typing indicator snapshot 1`] = `
   style={
     Array [
       Object {
-        "alignItems": "center",
+        "alignItems": "flex-end",
         "flexDirection": "row",
         "justifyContent": "flex-start",
       },
@@ -26,7 +26,7 @@ exports[`TypingIndicator should match typing indicator snapshot 1`] = `
       accessibilityLabel="initials"
       onError={[Function]}
       resizeMethod="resize"
-      size={24}
+      size={20}
       source={
         Object {
           "uri": "https://i.imgur.com/SLx06PP.png",
@@ -35,9 +35,9 @@ exports[`TypingIndicator should match typing indicator snapshot 1`] = `
       style={
         Array [
           Object {
-            "borderRadius": 12,
-            "height": 24,
-            "width": 24,
+            "borderRadius": 10,
+            "height": 20,
+            "width": 20,
           },
         ]
       }
@@ -57,7 +57,7 @@ exports[`TypingIndicator should match typing indicator snapshot 1`] = `
       accessibilityLabel="initials"
       onError={[Function]}
       resizeMethod="resize"
-      size={24}
+      size={20}
       source={
         Object {
           "uri": "https://i.imgur.com/T68W8nR_d.webp?maxwidth=728&fidelity=grand",
@@ -66,9 +66,9 @@ exports[`TypingIndicator should match typing indicator snapshot 1`] = `
       style={
         Array [
           Object {
-            "borderRadius": 12,
-            "height": 24,
-            "width": 24,
+            "borderRadius": 10,
+            "height": 20,
+            "width": 20,
           },
         ]
       }

src/components/Thread/Thread.tsx

@@ -171,11 +171,11 @@ export const Thread = <
   const headerComponent = (
     <>
       <DefaultMessage<At, Ch, Co, Ev, Me, Re, Us>
-        {...additionalParentMessageProps}
         groupStyles={['single']}
         message={thread}
         Message={Message}
         threadList
+        {...additionalParentMessageProps}
       />
       <NewThread>
         <NewThreadText>{t('Start of a new thread')}</NewThreadText>
@@ -186,15 +186,15 @@ export const Thread = <
   return (
     <React.Fragment key={`thread-${thread.id}-${channel?.cid || ''}`}>
       <MessageList<At, Ch, Co, Ev, Me, Re, Us>
-        {...additionalMessageListProps}
         HeaderComponent={headerComponent}
         Message={Message}
         threadList
+        {...additionalMessageListProps}
       />
       <MessageInput<At, Ch, Co, Ev, Me, Re, Us>
-        {...additionalMessageInputProps}
         additionalTextInputProps={{ autoFocus, editable: !disabled }}
         parent_id={thread.id as StreamMessage<At, Me, Us>['parent_id']}
+        {...additionalMessageInputProps}
       />
     </React.Fragment>
   );