Merge branch 'RocketChat:develop' into develop

Author: divyanshu-patil

android/app/src/main/java/chat/rocket/reactnative/MainApplication.kt

@@ -20,6 +20,7 @@ import chat.rocket.reactnative.storage.MMKVKeyManager;
 import chat.rocket.reactnative.storage.SecureStoragePackage;
 import chat.rocket.reactnative.notification.VideoConfTurboPackage
 import chat.rocket.reactnative.notification.PushNotificationTurboPackage
+import chat.rocket.reactnative.scroll.InvertedScrollPackage
 
 /**
  * Main Application class.
@@ -44,6 +45,7 @@ open class MainApplication : Application(), ReactApplication {
               add(VideoConfTurboPackage())
               add(PushNotificationTurboPackage())
               add(SecureStoragePackage())
+              add(InvertedScrollPackage())
             }
 
         override fun getJSMainModuleName(): String = "index"

android/app/src/main/java/chat/rocket/reactnative/scroll/InvertedScrollContentView.java

@@ -0,0 +1,23 @@
+package chat.rocket.reactnative.scroll;
+
+import android.view.View;
+import com.facebook.react.views.view.ReactViewGroup;
+import java.util.ArrayList;
+import java.util.Collections;
+
+/**
+ * Content view for inverted FlatLists. Reports its children to accessibility in reversed order so
+ * TalkBack traversal matches the visual order (newest-first) when used inside InvertedScrollView.
+ */
+public class InvertedScrollContentView extends ReactViewGroup {
+
+  public InvertedScrollContentView(android.content.Context context) {
+    super(context);
+  }
+
+  @Override
+  public void addChildrenForAccessibility(ArrayList<View> outChildren) {
+    super.addChildrenForAccessibility(outChildren);
+    Collections.reverse(outChildren);
+  }
+}

android/app/src/main/java/chat/rocket/reactnative/scroll/InvertedScrollContentViewManager.java

@@ -0,0 +1,25 @@
+package chat.rocket.reactnative.scroll;
+
+import com.facebook.react.module.annotations.ReactModule;
+import com.facebook.react.uimanager.ThemedReactContext;
+import com.facebook.react.views.view.ReactViewManager;
+
+/**
+ * View manager for InvertedScrollContentView. Behaves like a View but reports children in reversed
+ * order for accessibility so TalkBack matches the visual order in inverted lists.
+ */
+@ReactModule(name = InvertedScrollContentViewManager.REACT_CLASS)
+public class InvertedScrollContentViewManager extends ReactViewManager {
+
+  public static final String REACT_CLASS = "InvertedScrollContentView";
+
+  @Override
+  public String getName() {
+    return REACT_CLASS;
+  }
+
+  @Override
+  public InvertedScrollContentView createViewInstance(ThemedReactContext context) {
+    return new InvertedScrollContentView(context);
+  }
+}

android/app/src/main/java/chat/rocket/reactnative/scroll/InvertedScrollPackage.java

@@ -0,0 +1,24 @@
+package chat.rocket.reactnative.scroll;
+
+import com.facebook.react.ReactPackage;
+import com.facebook.react.bridge.NativeModule;
+import com.facebook.react.bridge.ReactApplicationContext;
+import com.facebook.react.uimanager.ViewManager;
+import java.util.Collections;
+import java.util.List;
+
+public class InvertedScrollPackage implements ReactPackage {
+
+  @Override
+  public List<NativeModule> createNativeModules(ReactApplicationContext reactContext) {
+    return Collections.emptyList();
+  }
+
+  @Override
+  public List<ViewManager> createViewManagers(ReactApplicationContext reactContext) {
+    List<ViewManager> managers = new java.util.ArrayList<>();
+    managers.add(new InvertedScrollViewManager());
+    managers.add(new InvertedScrollContentViewManager());
+    return managers;
+  }
+}

android/app/src/main/java/chat/rocket/reactnative/scroll/InvertedScrollView.java

@@ -0,0 +1,36 @@
+package chat.rocket.reactnative.scroll;
+
+import android.view.View;
+import com.facebook.react.bridge.ReactContext;
+import com.facebook.react.views.scroll.ReactScrollView;
+import java.util.ArrayList;
+import java.util.Collections;
+
+// When a FlatList is inverted (inverted={true}), React Native uses scaleY: -1 transform which
+// visually inverts the list but Android still reports children in array order. This view overrides
+// addChildrenForAccessibility to reverse the order so TalkBack matches the visual order.
+
+public class InvertedScrollView extends ReactScrollView {
+
+  private boolean mIsInvertedVirtualizedList = false;
+
+  public InvertedScrollView(ReactContext context) {
+    super(context);
+  }
+
+  
+  // Set whether this ScrollView is used for an inverted virtualized list. When true, we reverse the
+  // accessibility traversal order to match the visual order.
+  
+  public void setIsInvertedVirtualizedList(boolean isInverted) {
+    mIsInvertedVirtualizedList = isInverted;
+  }
+
+  @Override
+  public void addChildrenForAccessibility(ArrayList<View> outChildren) {
+    super.addChildrenForAccessibility(outChildren);
+    if (mIsInvertedVirtualizedList) {
+      Collections.reverse(outChildren);
+    }
+  }
+}

android/app/src/main/java/chat/rocket/reactnative/scroll/InvertedScrollViewManager.java

@@ -0,0 +1,26 @@
+package chat.rocket.reactnative.scroll;
+
+import com.facebook.react.module.annotations.ReactModule;
+import com.facebook.react.uimanager.ThemedReactContext;
+import com.facebook.react.views.scroll.ReactScrollViewManager;
+
+/**
+ * View manager for {@link InvertedScrollView}. Registers as "InvertedScrollView" to avoid
+ * collision with core RCTScrollView. Inherits all ScrollView props from ReactScrollViewManager;
+ * FlatList passes isInvertedVirtualizedList when inverted, which is applied by the parent setter.
+ */
+@ReactModule(name = InvertedScrollViewManager.REACT_CLASS)
+public class InvertedScrollViewManager extends ReactScrollViewManager {
+
+  public static final String REACT_CLASS = "InvertedScrollView";
+
+  @Override
+  public String getName() {
+    return REACT_CLASS;
+  }
+
+  @Override
+  public InvertedScrollView createViewInstance(ThemedReactContext context) {
+    return new InvertedScrollView(context);
+  }
+}

app/containers/message/Message.stories.tsx

@@ -673,7 +673,7 @@ export const WithImage = () => (
 			attachments={[
 				{
 					title: 'This is a title',
-					description: 'This is a description',
+					description: 'This is a description :nyan_rocket:',
 					image_url: '/dummypath'
 				}
 			]}
@@ -697,6 +697,19 @@ export const WithImage = () => (
 				}
 			]}
 		/>
+		<Message
+			msg='multi file'
+			attachments={[
+				{
+					title: 'This is a title',
+					image_url: '/dummypath'
+				},
+				{
+					title: 'This is a title',
+					image_url: '/dummypath'
+				}
+			]}
+		/>
 		<Message
 			attachments={[
 				{
@@ -724,7 +737,21 @@ export const WithImageLargeFont = () => (
 			attachments={[
 				{
 					title: 'This is a title',
-					description: 'This is a description :nyan_rocket:',
+					description: 'Header false',
+					image_url: '/dummypath'
+				}
+			]}
+			isHeader={false}
+		/>
+		<Message
+			msg='multi file'
+			attachments={[
+				{
+					title: 'This is a title',
+					image_url: '/dummypath'
+				},
+				{
+					title: 'This is a title',
 					image_url: '/dummypath'
 				}
 			]}
@@ -756,16 +783,22 @@ export const WithVideo = () => (
 			attachments={[
 				{
 					title: 'This is a title',
+					description: 'Header false',
 					video_url: '/dummypath'
-				},
+				}
+			]}
+			isHeader={false}
+		/>
+		<Message
+			msg='multi file'
+			attachments={[
 				{
 					title: 'This is a title',
-					description: 'This is a description :nyan_rocket:',
 					video_url: '/dummypath'
 				},
 				{
 					title: 'This is a title',
-					video_url: '/dummypath2'
+					video_url: '/dummypath'
 				}
 			]}
 		/>
@@ -791,6 +824,19 @@ export const WithVideoLargeFont = () => (
 				}
 			]}
 		/>
+		<MessageLargeFont
+			msg='multi file'
+			attachments={[
+				{
+					title: 'This is a title',
+					video_url: '/dummypath'
+				},
+				{
+					title: 'This is a title',
+					video_url: '/dummypath'
+				}
+			]}
+		/>
 	</>
 );
 
@@ -805,19 +851,23 @@ export const WithAudio = () => (
 				}
 			]}
 		/>
-		<Message msg='First message' isHeader={false} />
 		<Message
 			attachments={[
 				{
 					title: 'This is a title',
-					description: 'This is a description',
+					description: 'Header false',
 					audio_url: '/dummypath'
 				}
 			]}
 			isHeader={false}
 		/>
 		<Message
+			msg='multi file'
 			attachments={[
+				{
+					title: 'This is a title',
+					audio_url: '/dummypath'
+				},
 				{
 					title: 'This is a title',
 					audio_url: '/dummypath'
@@ -878,7 +928,17 @@ export const WithAudioLargeFont = () => (
 			isHeader={false}
 		/>
 		<MessageLargeFont
+			msg='multi file'
 			attachments={[
+				{
+					title: 'This is a title',
+					audio_url: '/dummypath'
+				},
+				{
+					title: 'This is a title',
+					description: 'This is a description :nyan_rocket:',
+					audio_url: '/dummypath'
+				},
 				{
 					title: 'This is a title',
 					audio_url: '/dummypath'
@@ -1056,6 +1116,17 @@ export const FileAttachmentsWithFilenamesLargeFont = () => (
 			]}
 			isHeader={false}
 		/>
+		<MessageLargeFont
+			msg='multi file'
+			attachments={[
+				{
+					text: 'File.pdf'
+				},
+				{
+					text: 'File.pdf'
+				}
+			]}
+		/>
 	</>
 );