stream-chat-react-native-core 4.9.0-beta.2 → 4.9.0-beta.3

package/lib/typescript/mock-builders/generator/channel.d.ts

@@ -0,0 +1,116 @@
+export function generateChannel(customValues: any): {
+    _client: {};
+    data: {
+        cid: string;
+        config: {
+            name: string;
+            type: string;
+            automod: string;
+            automod_behavior: string;
+            commands: {
+                args: string;
+                description: string;
+                name: string;
+                set: string;
+            }[];
+            connect_events: boolean;
+            created_at: string;
+            max_message_length: number;
+            message_retention: string;
+            mutes: boolean;
+            reactions: boolean;
+            read_events: boolean;
+            replies: boolean;
+            search: boolean;
+            typing_events: boolean;
+            updated_at: string;
+            uploads: boolean;
+            url_enrichment: boolean;
+        };
+        created_at: string;
+        created_by: {
+            banned: boolean;
+            created_at: string;
+            id: any;
+            image: any;
+            name: any;
+            online: boolean;
+            role: string;
+            updated_at: string;
+        };
+        frozen: boolean;
+        id: any;
+        own_capabilities: string[];
+        type: string;
+        updated_at: string;
+    };
+    id: any;
+    state: {
+        members: {};
+        messages: never[];
+        setIsUpToDate: jest.Mock<any, any>;
+    };
+    type: string;
+};
+export function generateChannelResponse(customValues?: {
+    channel: {};
+    id: any;
+    type: string;
+}): {
+    channel: {
+        id: any;
+        type: string;
+        user: {
+            banned: boolean;
+            created_at: string;
+            id: any;
+            image: any;
+            name: any;
+            online: boolean;
+            role: string;
+            updated_at: string;
+        };
+        cid: string;
+        config: {
+            name: string;
+            type: string;
+            automod: string;
+            automod_behavior: string;
+            commands: {
+                args: string;
+                description: string;
+                name: string;
+                set: string;
+            }[];
+            connect_events: boolean;
+            created_at: string;
+            max_message_length: number;
+            message_retention: string;
+            mutes: boolean;
+            reactions: boolean;
+            read_events: boolean;
+            replies: boolean;
+            search: boolean;
+            typing_events: boolean;
+            updated_at: string;
+            uploads: boolean;
+            url_enrichment: boolean;
+        };
+        created_at: string;
+        created_by: {
+            banned: boolean;
+            created_at: string;
+            id: any;
+            image: any;
+            name: any;
+            online: boolean;
+            role: string;
+            updated_at: string;
+        };
+        frozen: boolean;
+        own_capabilities: string[];
+        updated_at: string;
+    };
+    members: never[];
+    messages: never[];
+};

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "stream-chat-react-native-core",
   "description": "The official React Native and Expo components for Stream Chat, a service for building chat applications",
-  "version": "4.9.0-beta.2",
+  "version": "4.9.0-beta.3",
   "author": {
     "company": "Stream.io Inc",
     "name": "Stream.io Inc"
@@ -34,7 +34,8 @@
     "prepare-distribution": "cd examples/SampleApp && npm version patch && react-native-version && git add ./ && git commit -m 'Bump build version' --no-verify",
     "prettier": "prettier --list-different '**/*.{js,ts,tsx,md,json}' .eslintrc.json ../.prettierrc .babelrc",
     "prettier-fix": "prettier --write '**/*.{js,ts,tsx,md,json}' .eslintrc.json ../.prettierrc .babelrc",
-    "test:unit": "TZ=UTC jest --coverage",
+    "test:coverage": "yarn test:unit --coverage",
+    "test:unit": "TZ=UTC jest",
     "validate-translations": "node bin/validate-translations.js",
     "get-version": "echo $npm_package_version",
     "version": "bash ./bin/before-tag.sh",

package/src/components/MessageInput/FileUploadPreview.tsx

@@ -1,5 +1,5 @@
 import React, { useEffect, useRef, useState } from 'react';
-import { FlatList, StyleSheet, Text, TouchableOpacity, View } from 'react-native';
+import { FlatList, I18nManager, StyleSheet, Text, TouchableOpacity, View } from 'react-native';
 
 import { UploadProgressIndicator } from './UploadProgressIndicator';
 
@@ -19,6 +19,7 @@ import { Warning } from '../../icons/Warning';
 import type { DefaultStreamChatGenerics } from '../../types/types';
 import { getIndicatorTypeForFileState, ProgressIndicatorTypes } from '../../utils/utils';
 import { getFileSizeDisplayText } from '../Attachment/FileAttachment';
+import { WritingDirectionAwareText } from '../RTLComponents/WritingDirectionAwareText';
 
 const FILE_PREVIEW_HEIGHT = 60;
 const WARNING_ICON_SIZE = 16;
@@ -71,7 +72,7 @@ const styles = StyleSheet.create({
   },
   warningIconStyle: {
     borderRadius: 24,
-    marginTop: 3,
+    marginTop: 2,
   },
 });
 
@@ -105,9 +106,9 @@ const UnsupportedFileTypeOrFileSizeIndicator = ({
       </Text>
     </View>
   ) : (
-    <Text style={[styles.fileSizeText, { color: grey }, fileSizeText]}>
-      {item.file.duration ? item.file.duration : getFileSizeDisplayText(item.file.size)}
-    </Text>
+    <WritingDirectionAwareText style={[styles.fileSizeText, { color: grey }, fileSizeText]}>
+      {item.file.duration || getFileSizeDisplayText(item.file.size)}
+    </WritingDirectionAwareText>
   );
 };
 
@@ -188,6 +189,7 @@ const FileUploadPreviewWithContext = <
                         24 - // 24 = close icon size
                         24, // 24 = internal padding
                     },
+                    I18nManager.isRTL ? { writingDirection: 'rtl' } : { writingDirection: 'ltr' },
                     filenameText,
                   ]}
                 >

package/src/components/MessageInput/ImageUploadPreview.tsx

@@ -27,7 +27,7 @@ const styles = StyleSheet.create({
   },
   fileSizeText: {
     fontSize: 12,
-    paddingLeft: 10,
+    paddingHorizontal: 10,
   },
   flatList: { paddingBottom: 12 },
   iconContainer: {
@@ -54,7 +54,7 @@ const styles = StyleSheet.create({
   },
   warningIconStyle: {
     borderRadius: 24,
-    marginTop: 4,
+    marginTop: 6,
   },
   warningText: {
     alignItems: 'center',

package/src/components/RTLComponents/WritingDirectionAwareText.tsx

@@ -0,0 +1,17 @@
+import React from 'react';
+import { I18nManager, StyleSheet, Text, ViewProps } from 'react-native';
+
+const styles = StyleSheet.create({
+  defaultStyle: { writingDirection: I18nManager.isRTL ? 'rtl' : 'ltr' },
+});
+
+export type WritingDirectionAwareTextProps = ViewProps;
+
+export const WritingDirectionAwareText: React.FC<WritingDirectionAwareTextProps> = (props) => {
+  const { children, style, ...rest } = props;
+  return (
+    <Text {...rest} style={[style, styles.defaultStyle]}>
+      {children}
+    </Text>
+  );
+};

package/src/components/Reply/Reply.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { useContext, useState } from 'react';
 import { Image, ImageStyle, StyleSheet, View, ViewStyle } from 'react-native';
 
 import merge from 'lodash/merge';
@@ -7,8 +7,8 @@ import type { Attachment } from 'stream-chat';
 
 import { useMessageContext } from '../../contexts/messageContext/MessageContext';
 import {
+  MessageInputContext,
   MessageInputContextValue,
-  useMessageInputContext,
 } from '../../contexts/messageInputContext/MessageInputContext';
 import {
   MessagesContextValue,
@@ -267,6 +267,22 @@ const ReplyWithContext = <
   );
 };
 
+/**
+ * When a reply is rendered in a MessageSimple, it does
+ * not have a MessageInputContext. As this is deliberate,
+ * this function exists to avoid the error thrown when
+ * using a context outside of its provider.
+ * */
+const useMessageInputContextIfAvailable = <
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
+>() => {
+  const contextValue = useContext(
+    MessageInputContext,
+  ) as unknown as MessageInputContextValue<StreamChatGenerics>;
+
+  return contextValue;
+};
+
 const areEqual = <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>(
   prevProps: ReplyPropsWithContext<StreamChatGenerics>,
   nextProps: ReplyPropsWithContext<StreamChatGenerics>,
@@ -307,7 +323,7 @@ export const Reply = <
   const { FileAttachmentIcon = FileIconDefault, MessageAvatar = MessageAvatarDefault } =
     useMessagesContext<StreamChatGenerics>();
 
-  const { editing, quotedMessage } = useMessageInputContext<StreamChatGenerics>();
+  const { editing, quotedMessage } = useMessageInputContextIfAvailable<StreamChatGenerics>();
 
   const quotedEditingMessage = (
     typeof editing !== 'boolean' ? editing?.quoted_message || false : false

package/src/components/Reply/__tests__/Reply.test.tsx

@@ -0,0 +1,48 @@
+import React from 'react';
+
+import { render, waitFor } from '@testing-library/react-native';
+
+import { OverlayProvider } from '../../../contexts/overlayContext/OverlayProvider';
+import { getOrCreateChannelApi } from '../../../mock-builders/api/getOrCreateChannel';
+import { useMockedApis } from '../../../mock-builders/api/useMockedApis';
+import { generateChannelResponse } from '../../../mock-builders/generator/channel';
+import { getTestClientWithUser } from '../../../mock-builders/mock';
+import { Channel } from '../../Channel/Channel';
+import { Chat } from '../../Chat/Chat';
+import { Reply } from '../Reply';
+
+describe('<Reply/>', () => {
+  it('can be rendered outside of a MessageInputProvider', async () => {
+    const oldEnvironment = process.env;
+    process.env.NODE_ENV = 'not_test';
+
+    const chatClient = await getTestClientWithUser({ id: 'neil' });
+
+    const mockedChannel = generateChannelResponse();
+    useMockedApis(chatClient, [getOrCreateChannelApi(mockedChannel)]);
+    const channel = chatClient.channel('messaging', 'some-chat');
+    await channel.watch();
+
+    const TestComponent = () => (
+      <OverlayProvider>
+        <Chat client={chatClient}>
+          <Channel channel={channel} client={chatClient}>
+            <Reply />
+          </Channel>
+        </Chat>
+      </OverlayProvider>
+    );
+
+    try {
+      const { toJSON } = render(<TestComponent />);
+
+      await waitFor(() => {
+        expect(toJSON()).not.toBeNull();
+      });
+    } catch (error: unknown) {
+      throw new Error(`Error thrown while rendering Reply: ${error}`);
+    }
+
+    process.env = oldEnvironment;
+  });
+});

package/src/version.json

@@ -1,3 +1,3 @@
 {
-  "version": "4.9.0-beta.2"
+  "version": "4.9.0-beta.3"
 }