stream-chat-react-native-core 3.8.3-next.1 → 3.9.0-next.2

package/src/components/MessageList/MessageList.tsx

@@ -131,6 +131,7 @@ type MessageListPropsWithContext<
     | 'channel'
     | 'disabled'
     | 'EmptyStateIndicator'
+    | 'hideStickyDateHeader'
     | 'loadChannelAtMessage'
     | 'loading'
     | 'LoadingIndicator'
@@ -158,6 +159,7 @@ type MessageListPropsWithContext<
     | 'initialScrollToFirstUnreadMessage'
     | 'InlineDateSeparator'
     | 'InlineUnreadIndicator'
+    | 'legacyImageViewerSwipeBehaviour'
     | 'Message'
     | 'ScrollToBottomButton'
     | 'MessageSystem'
@@ -264,10 +266,12 @@ const MessageListWithContext = <
     FlatList,
     FooterComponent = LoadingMoreIndicator,
     HeaderComponent = InlineLoadingMoreRecentIndicator,
+    hideStickyDateHeader,
     initialScrollToFirstUnreadMessage,
     InlineDateSeparator,
     InlineUnreadIndicator,
     inverted = true,
+    legacyImageViewerSwipeBehaviour,
     loadChannelAtMessage,
     loading,
     LoadingIndicator,
@@ -410,7 +414,7 @@ const MessageListWithContext = <
    */
   const onViewableItemsChanged = useRef(
     ({ viewableItems }: { viewableItems: ViewToken[] | undefined }) => {
-      if (viewableItems) {
+      if (viewableItems && !hideStickyDateHeader) {
         updateStickyHeaderDateIfNeeded(viewableItems);
       }
       setInitialScrollIfNeeded();
@@ -785,44 +789,58 @@ const MessageListWithContext = <
     [messageListLengthAfterUpdate],
   );
 
-  const messagesWithImages = messageList.filter((message) => {
-    if (!message.deleted_at && message.attachments) {
-      return message.attachments.some(
-        (attachment) =>
-          attachment.type === 'image' &&
-          !attachment.title_link &&
-          !attachment.og_scrape_url &&
-          (attachment.image_url || attachment.thumb_url),
-      );
-    }
-    return false;
-  });
+  const messagesWithImages =
+    legacyImageViewerSwipeBehaviour &&
+    messageList.filter((message) => {
+      if (!message.deleted_at && message.attachments) {
+        return message.attachments.some(
+          (attachment) =>
+            attachment.type === 'image' &&
+            !attachment.title_link &&
+            !attachment.og_scrape_url &&
+            (attachment.image_url || attachment.thumb_url),
+        );
+      }
+      return false;
+    });
 
   /**
    * This is for the useEffect to run again in the case that a message
    * gets edited with more or the same number of images
    */
-  const imageString = messagesWithImages
-    .map((message) =>
-      message.attachments
-        ?.map((attachment) => attachment.image_url || attachment.thumb_url || '')
-        .join(),
-    )
-    .join();
-
-  const numberOfMessagesWithImages = messagesWithImages.length;
+  const imageString =
+    legacyImageViewerSwipeBehaviour &&
+    messagesWithImages &&
+    messagesWithImages
+      .map((message) =>
+        message.attachments
+          ?.map((attachment) => attachment.image_url || attachment.thumb_url || '')
+          .join(),
+      )
+      .join();
+
+  const numberOfMessagesWithImages =
+    legacyImageViewerSwipeBehaviour && messagesWithImages && messagesWithImages.length;
   const threadExists = !!thread;
+
   useEffect(() => {
-    if ((threadList && thread) || (!threadList && !thread)) {
-      setImages(messagesWithImages);
+    if (legacyImageViewerSwipeBehaviour && ((threadList && thread) || (!threadList && !thread))) {
+      setImages(messagesWithImages as MessageType<At, Ch, Co, Ev, Me, Re, Us>[]);
     }
-  }, [imageString, numberOfMessagesWithImages, threadExists, threadList]);
+  }, [
+    imageString,
+    legacyImageViewerSwipeBehaviour,
+    numberOfMessagesWithImages,
+    threadExists,
+    threadList,
+  ]);
 
   const stickyHeaderFormatDate =
     stickyHeaderDate?.getFullYear() === new Date().getFullYear() ? 'MMM D' : 'MMM D, YYYY';
-  const tStickyHeaderDate = stickyHeaderDate ? tDateTimeParser(stickyHeaderDate) : null;
+  const tStickyHeaderDate =
+    stickyHeaderDate && !hideStickyDateHeader ? tDateTimeParser(stickyHeaderDate) : null;
   const stickyHeaderDateToRender =
-    tStickyHeaderDate === null
+    tStickyHeaderDate === null || hideStickyDateHeader
       ? null
       : isDayOrMoment(tStickyHeaderDate)
       ? tStickyHeaderDate.format(stickyHeaderFormatDate)
@@ -943,7 +961,9 @@ export const MessageList = <
     channel,
     disabled,
     EmptyStateIndicator,
+    enableMessageGroupingByUser,
     error,
+    hideStickyDateHeader,
     loadChannelAtMessage,
     loading,
     LoadingIndicator,
@@ -965,6 +985,7 @@ export const MessageList = <
     initialScrollToFirstUnreadMessage,
     InlineDateSeparator,
     InlineUnreadIndicator,
+    legacyImageViewerSwipeBehaviour,
     Message,
     MessageSystem,
     myMessageTheme,
@@ -987,11 +1008,14 @@ export const MessageList = <
         disabled,
         disableTypingIndicator,
         EmptyStateIndicator,
+        enableMessageGroupingByUser,
         error,
         FlatList,
+        hideStickyDateHeader,
         initialScrollToFirstUnreadMessage,
         InlineDateSeparator,
         InlineUnreadIndicator,
+        legacyImageViewerSwipeBehaviour,
         loadChannelAtMessage,
         loading,
         LoadingIndicator,
@@ -1021,6 +1045,7 @@ export const MessageList = <
         TypingIndicatorContainer,
       }}
       {...props}
+      noGroupByUser={!enableMessageGroupingByUser || props.noGroupByUser}
     />
   );
 };

package/src/components/MessageList/hooks/useMessageList.ts

@@ -116,7 +116,7 @@ export const useMessageList = <
     .map((msg) => ({
       ...msg,
       dateSeparator: dateSeparators[msg.id] || undefined,
-      groupStyles: messageGroupStyles[msg.id] || [],
+      groupStyles: messageGroupStyles[msg.id] || ['single'],
       readBy: msg.id ? readData[msg.id] || false : false,
     }));
 

package/src/components/MessageList/utils/getGroupStyles.ts

@@ -53,6 +53,9 @@ export const getGroupStyles = <
     noGroupByUser,
     userId,
   } = params;
+
+  if (noGroupByUser) return {};
+
   const messageGroupStyles: { [key: string]: GroupType[] } = {};
 
   const messagesFilteredForNonUser = messages.filter(
@@ -128,14 +131,6 @@ export const getGroupStyles = <
       }
     }
 
-    /**
-     * If noGroupByUser set add the key for single
-     */
-    if (noGroupByUser) {
-      groupStyles.splice(0, groupStyles.length);
-      groupStyles.push('single');
-    }
-
     if (message.id) {
       messageGroupStyles[message.id] = groupStyles;
     }

package/src/contexts/channelContext/ChannelContext.tsx

@@ -53,6 +53,7 @@ export type ChannelContextValue<
    * Hide inline date separators on channel
    */
   hideDateSeparators: boolean;
+  hideStickyDateHeader: boolean;
   /**
    * Returns true if the current user has admin privileges
    */
@@ -164,6 +165,7 @@ export type ChannelContextValue<
    */
   channel?: Channel<At, Ch, Co, Ev, Me, Re, Us>;
   disabled?: boolean;
+  enableMessageGroupingByUser?: boolean;
   lastRead?: Date;
   /**
    * Maximum time in milliseconds that should occur between messages

package/src/contexts/messagesContext/MessagesContext.tsx

@@ -97,6 +97,7 @@ export type MessagesContextValue<
   DateHeader: React.ComponentType<DateHeaderProps>;
   /** Should keyboard be dismissed when messaged is touched */
   dismissKeyboardOnMessageTouch: boolean;
+  enableMessageGroupingByUser: boolean;
   /**
    * UI component to display File type attachment.
    * Defaults to: [FileAttachment](https://github.com/GetStream/stream-chat-react-native/blob/master/src/components/Attachment/FileAttachment.tsx)
@@ -326,6 +327,7 @@ export type MessagesContextValue<
   handleRetry?: (message: MessageType<At, Ch, Co, Ev, Me, Re, Us>) => Promise<void>;
   /** Handler to access when a thread reply action is invoked */
   handleThreadReply?: (message: MessageType<At, Ch, Co, Ev, Me, Re, Us>) => Promise<void>;
+  legacyImageViewerSwipeBehaviour?: boolean;
   /** Object specifying rules defined within simple-markdown https://github.com/Khan/simple-markdown#adding-a-simple-extension */
   markdownRules?: MarkdownRules;
   /**

package/src/version.json

@@ -1,3 +1,3 @@
 {
-  "version": "3.8.3-next.1"
+  "version": "3.9.0-next.2"
 }

package/lib/commonjs/components/Channel/utils/debounce.js

@@ -1,20 +0,0 @@
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.heavyDebounce = void 0;
-
-var _debounce = _interopRequireDefault(require("lodash/debounce"));
-
-var heavyDebounce = function heavyDebounce(callback) {
-  var ms = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 500;
-  var option = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {
-    leading: true,
-    trailing: true
-  };
-  return (0, _debounce["default"])(callback, ms, option);
-};
-
-exports.heavyDebounce = heavyDebounce;
-//# sourceMappingURL=debounce.js.map

package/lib/commonjs/components/Channel/utils/debounce.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["debounce.ts"],"names":["heavyDebounce","callback","ms","option","leading","trailing"],"mappings":";;;;;;;AAEA;;AAEO,IAAMA,aAAa,GAAG,SAAhBA,aAAgB,CAC3BC,QAD2B;AAAA,MAE3BC,EAF2B,uEAEtB,GAFsB;AAAA,MAG3BC,MAH2B,uEAGA;AACzBC,IAAAA,OAAO,EAAE,IADgB;AAEzBC,IAAAA,QAAQ,EAAE;AAFe,GAHA;AAAA,SAOxB,0BAASJ,QAAT,EAAmBC,EAAnB,EAAuBC,MAAvB,CAPwB;AAAA,CAAtB","sourcesContent":["/* eslint-disable @typescript-eslint/no-explicit-any */\nimport type { DebounceSettings } from 'lodash';\nimport debounce from 'lodash/debounce';\n\nexport const heavyDebounce = <T extends (...args: any) => any>(\n  callback: T,\n  ms = 500,\n  option: DebounceSettings = {\n    leading: true,\n    trailing: true,\n  },\n) => debounce(callback, ms, option);\n"]}

package/lib/commonjs/components/Channel/utils/throttle.js

@@ -1,20 +0,0 @@
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.lightThrottle = void 0;
-
-var _throttle = _interopRequireDefault(require("lodash/throttle"));
-
-var lightThrottle = function lightThrottle(callback) {
-  var ms = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 500;
-  var option = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {
-    leading: true,
-    trailing: true
-  };
-  return (0, _throttle["default"])(callback, ms, option);
-};
-
-exports.lightThrottle = lightThrottle;
-//# sourceMappingURL=throttle.js.map

package/lib/commonjs/components/Channel/utils/throttle.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["throttle.ts"],"names":["lightThrottle","callback","ms","option","leading","trailing"],"mappings":";;;;;;;AAEA;;AAEO,IAAMA,aAAa,GAAG,SAAhBA,aAAgB,CAC3BC,QAD2B;AAAA,MAE3BC,EAF2B,uEAEtB,GAFsB;AAAA,MAG3BC,MAH2B,uEAGA;AACzBC,IAAAA,OAAO,EAAE,IADgB;AAEzBC,IAAAA,QAAQ,EAAE;AAFe,GAHA;AAAA,SAOxB,0BAASJ,QAAT,EAAmBC,EAAnB,EAAuBC,MAAvB,CAPwB;AAAA,CAAtB","sourcesContent":["/* eslint-disable @typescript-eslint/no-explicit-any */\nimport type { ThrottleSettings } from 'lodash';\nimport throttle from 'lodash/throttle';\n\nexport const lightThrottle = <T extends (...args: any) => any>(\n  callback: T,\n  ms = 500,\n  option: ThrottleSettings = {\n    leading: true,\n    trailing: true,\n  },\n) => throttle(callback, ms, option);\n"]}

package/lib/module/components/Channel/utils/debounce.js

@@ -1,20 +0,0 @@
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.heavyDebounce = void 0;
-
-var _debounce = _interopRequireDefault(require("lodash/debounce"));
-
-var heavyDebounce = function heavyDebounce(callback) {
-  var ms = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 500;
-  var option = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {
-    leading: true,
-    trailing: true
-  };
-  return (0, _debounce["default"])(callback, ms, option);
-};
-
-exports.heavyDebounce = heavyDebounce;
-//# sourceMappingURL=debounce.js.map

package/lib/module/components/Channel/utils/debounce.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["debounce.ts"],"names":["heavyDebounce","callback","ms","option","leading","trailing"],"mappings":";;;;;;;AAEA;;AAEO,IAAMA,aAAa,GAAG,SAAhBA,aAAgB,CAC3BC,QAD2B;AAAA,MAE3BC,EAF2B,uEAEtB,GAFsB;AAAA,MAG3BC,MAH2B,uEAGA;AACzBC,IAAAA,OAAO,EAAE,IADgB;AAEzBC,IAAAA,QAAQ,EAAE;AAFe,GAHA;AAAA,SAOxB,0BAASJ,QAAT,EAAmBC,EAAnB,EAAuBC,MAAvB,CAPwB;AAAA,CAAtB","sourcesContent":["/* eslint-disable @typescript-eslint/no-explicit-any */\nimport type { DebounceSettings } from 'lodash';\nimport debounce from 'lodash/debounce';\n\nexport const heavyDebounce = <T extends (...args: any) => any>(\n  callback: T,\n  ms = 500,\n  option: DebounceSettings = {\n    leading: true,\n    trailing: true,\n  },\n) => debounce(callback, ms, option);\n"]}

package/lib/module/components/Channel/utils/throttle.js

@@ -1,20 +0,0 @@
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.lightThrottle = void 0;
-
-var _throttle = _interopRequireDefault(require("lodash/throttle"));
-
-var lightThrottle = function lightThrottle(callback) {
-  var ms = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 500;
-  var option = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {
-    leading: true,
-    trailing: true
-  };
-  return (0, _throttle["default"])(callback, ms, option);
-};
-
-exports.lightThrottle = lightThrottle;
-//# sourceMappingURL=throttle.js.map

package/lib/module/components/Channel/utils/throttle.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["throttle.ts"],"names":["lightThrottle","callback","ms","option","leading","trailing"],"mappings":";;;;;;;AAEA;;AAEO,IAAMA,aAAa,GAAG,SAAhBA,aAAgB,CAC3BC,QAD2B;AAAA,MAE3BC,EAF2B,uEAEtB,GAFsB;AAAA,MAG3BC,MAH2B,uEAGA;AACzBC,IAAAA,OAAO,EAAE,IADgB;AAEzBC,IAAAA,QAAQ,EAAE;AAFe,GAHA;AAAA,SAOxB,0BAASJ,QAAT,EAAmBC,EAAnB,EAAuBC,MAAvB,CAPwB;AAAA,CAAtB","sourcesContent":["/* eslint-disable @typescript-eslint/no-explicit-any */\nimport type { ThrottleSettings } from 'lodash';\nimport throttle from 'lodash/throttle';\n\nexport const lightThrottle = <T extends (...args: any) => any>(\n  callback: T,\n  ms = 500,\n  option: ThrottleSettings = {\n    leading: true,\n    trailing: true,\n  },\n) => throttle(callback, ms, option);\n"]}

package/lib/typescript/components/Channel/utils/debounce.d.ts

@@ -1,2 +0,0 @@
-import type { DebounceSettings } from 'lodash';
-export declare const heavyDebounce: <T extends (...args: any) => any>(callback: T, ms?: number, option?: DebounceSettings) => import("lodash").DebouncedFunc<T>;

package/lib/typescript/components/Channel/utils/throttle.d.ts

@@ -1,2 +0,0 @@
-import type { ThrottleSettings } from 'lodash';
-export declare const lightThrottle: <T extends (...args: any) => any>(callback: T, ms?: number, option?: ThrottleSettings) => import("lodash").DebouncedFunc<T>;

package/src/components/Channel/utils/debounce.ts

@@ -1,12 +0,0 @@
-/* eslint-disable @typescript-eslint/no-explicit-any */
-import type { DebounceSettings } from 'lodash';
-import debounce from 'lodash/debounce';
-
-export const heavyDebounce = <T extends (...args: any) => any>(
-  callback: T,
-  ms = 500,
-  option: DebounceSettings = {
-    leading: true,
-    trailing: true,
-  },
-) => debounce(callback, ms, option);

package/src/components/Channel/utils/throttle.ts

@@ -1,12 +0,0 @@
-/* eslint-disable @typescript-eslint/no-explicit-any */
-import type { ThrottleSettings } from 'lodash';
-import throttle from 'lodash/throttle';
-
-export const lightThrottle = <T extends (...args: any) => any>(
-  callback: T,
-  ms = 500,
-  option: ThrottleSettings = {
-    leading: true,
-    trailing: true,
-  },
-) => throttle(callback, ms, option);