Merge pull request #1185 from GetStream/unread-handler

add active unread handler function to Channel

Author: DanC5

CHANGELOG.md

@@ -1,5 +1,18 @@
 # Changelog
 
+## [6.8.0](https://github.com/GetStream/stream-chat-react/releases/tag/v6.8.0) 2021-09-17
+
+### Feature
+
+- Improve user mention experience by ignoring diacritics, adding a `useMentionsTransliteration` prop to install an optional transliteration dependency, and using Levenshtein distance to match similar names [#1176](https://github.com/GetStream/stream-chat-react/pull/1176)
+- Add event listener to `ChannelPreview` to handle `markAllRead` function calls on the client [#1178](https://github.com/GetStream/stream-chat-react/pull/1178)
+- Add `setText` function to `MessageInputContext`, which overrides and sets the value of the `MessageInput` component's `textarea` element [#1184](https://github.com/GetStream/stream-chat-react/pull/1184)
+- Add `activeUnreadHandler` prop to `Channel`, which runs when the active channel has unread messages [#1185](https://github.com/GetStream/stream-chat-react/pull/1185)
+
+ ### Chore
+- Remove all SCSS files and import library styles from `stream-chat-css` dependency. This is non-breaking as the build process injects the external styles into the exact distributed directory as before. [#1168](https://github.com/GetStream/stream-chat-react/pull/1168)
+- Upgrade `stream-chat` and `react-file-utils` dependencies [#1178](https://github.com/GetStream/stream-chat-react/pull/1178)
+
 ## [6.7.2](https://github.com/GetStream/stream-chat-react/releases/tag/v6.7.2) 2021-09-15
 
 ### Feature

docusaurus/docs/React/core-components/channel.mdx

@@ -86,6 +86,14 @@ A list of accepted file upload types.
 | -------- |
 | string[] |
 
+### activeUnreadHandler
+
+Custom handler function that runs when the active channel has unread messages (i.e., when chat is running on a separate browser tab).
+
+| Type                                            |
+| ----------------------------------------------- |
+| (unread: number, documentTitle: string) => void |
+
 ### Attachment
 
 Custom UI component to display a message attachment.

src/components/Channel/Channel.tsx

@@ -82,6 +82,8 @@ export type ChannelProps<
 > = {
   /** List of accepted file types */
   acceptedFiles?: string[];
+  /** Custom handler function that runs when the active channel has unread messages (i.e., when chat is running on a separate browser tab) */
+  activeUnreadHandler?: (unread: number, documentTitle: string) => void;
   /** Custom UI component to display a message attachment, defaults to and accepts same props as: [Attachment](https://github.com/GetStream/stream-chat-react/blob/master/src/components/Attachment/Attachment.tsx) */
   Attachment?: ComponentContextValue<At, Ch, Co, Ev, Me, Re, Us>['Attachment'];
   /** Optional UI component to override the default suggestion Header component, defaults to and accepts same props as: [Header](https://github.com/GetStream/stream-chat-react/blob/master/src/components/AutoCompleteTextarea/Header.tsx) */
@@ -270,6 +272,7 @@ const ChannelInner = <
 ) => {
   const {
     acceptedFiles,
+    activeUnreadHandler,
     channel,
     children,
     doMarkReadRequest,
@@ -388,7 +391,12 @@ const ChannelInner = <
             markReadThrottled();
           } else if (channel.getConfig()?.read_events && !channel.muteStatus().muted) {
             const unread = channel.countUnread(lastRead.current);
-            document.title = `(${unread}) ${originalTitle.current}`;
+
+            if (activeUnreadHandler) {
+              activeUnreadHandler(unread, originalTitle.current);
+            } else {
+              document.title = `(${unread}) ${originalTitle.current}`;
+            }
           }
         }
       }