Merge branch 'master' into feature/pinned-messages

DanC5 · DanC5 · commit 443952d3de01 · 2021-01-26T09:22:00.000-07:00
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,10 +1,23 @@
 # Changelog
 
+## [3.5.3](https://github.com/GetStream/stream-chat-react/releases/tag/v3.5.3) 2021-01-26
+
+### Feature
+
+- `ChannelList` accepts an optional prop to filter/sort channels prior to render [#678](https://github.com/GetStream/stream-chat-react/pull/678)
+
+## [3.5.2](https://github.com/GetStream/stream-chat-react/releases/tag/v3.5.2) 2021-01-21
+
+### Fix
+
+- Handle emoji picker event listener race condition [#675](https://github.com/GetStream/stream-chat-react/pull/675)
+- Adjust style for only emoji messages [#676](https://github.com/GetStream/stream-chat-react/pull/676)
+
 ## [3.5.1](https://github.com/GetStream/stream-chat-react/releases/tag/v3.5.1) 2021-01-19
 
 ### Fix
 
-- Upload PSD attachments as file [#67](https://github.com/GetStream/stream-chat-react/pull/673)
+- Upload PSD attachments as file [#673](https://github.com/GetStream/stream-chat-react/pull/673)
 
 ### Chore
 
diff --git a/docs/build/bundle.33cc8b6e.js b/docs/build/bundle.33cc8b6e.js
diff --git a/docs/build/bundle.33cc8b6e.js.LICENSE.txt b/docs/build/bundle.33cc8b6e.js.LICENSE.txt
diff --git a/docs/index.html b/docs/index.html
@@ -9,6 +9,6 @@
   </head>
   <body>
     <div id="rsg-root"></div>
-    <script src="build/bundle.c0da581c.js"></script>
+    <script src="build/bundle.33cc8b6e.js"></script>
   </body>
 </html>
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "stream-chat-react",
-  "version": "3.5.1",
+  "version": "3.5.3",
   "description": "React components to create chat conversations or livestream style chat",
   "author": "GetStream",
   "homepage": "https://getstream.io/chat/",
diff --git a/src/components/ChannelList/ChannelList.js b/src/components/ChannelList/ChannelList.js
@@ -118,6 +118,10 @@ const ChannelList = (props) => {
     activeChannelHandler,
   );
 
+  const loadedChannels = props.channelRenderFilterFn
+    ? props.channelRenderFilterFn(channels)
+    : channels;
+
   useMobileNavigation(channelListRef, navOpen, closeMobileNav);
 
   // All the event listeners
@@ -216,13 +220,13 @@ const ChannelList = (props) => {
         LoadingIndicator={LoadingIndicator}
         LoadingErrorIndicator={LoadingErrorIndicator}
       >
-        {!channels || channels.length === 0
+        {!loadedChannels || loadedChannels.length === 0
           ? renderEmptyStateIndicator()
           : smartRender(Paginator, {
               loadNextPage,
               hasNextPage,
               refreshing: status.refreshing,
-              children: channels.map((item) => renderChannel(item)),
+              children: loadedChannels.map(renderChannel),
             })}
       </List>
     );
@@ -352,6 +356,13 @@ ChannelList.propTypes = {
    * @param {Event}     event       [Event object](https://getstream.io/chat/docs/event_object/?language=js) corresponding to `channel.deleted` event
    * */
   onChannelDeleted: PropTypes.func,
+  /**
+   * Optional function to filter channels prior to loading in the DOM. Do not use any complex or async logic here that would significantly delay the loading of the ChannelList.
+   * We recommend using a pure function with array methods like filter/sort/reduce.
+   * @param {Array} channels
+   * @returns {Array} channels
+   * */
+  channelRenderFilterFn: /** @type {PropTypes.Validator<(channels: import('stream-chat').Channel[]) => import('stream-chat').Channel[]>} */ (PropTypes.func),
   /**
    * Object containing query filters
    * @see See [Channel query documentation](https://getstream.io/chat/docs/query_channels/?language=js) for a list of available fields for filter.
diff --git a/src/components/ChannelList/__tests__/ChannelList.test.js b/src/components/ChannelList/__tests__/ChannelList.test.js
@@ -176,6 +176,37 @@ describe('ChannelList', () => {
     });
   });
 
+  it('should only show filtered channels when a filter function prop is provided', async () => {
+    const filteredChannel = generateChannel({ channel: { type: 'filtered' } });
+
+    const customFilterFunction = (channels) => {
+      return channels.filter((channel) => channel.type === 'filtered');
+    };
+
+    const props = {
+      filters: {},
+      Preview: ChannelPreviewComponent,
+      List: ChannelListComponent,
+      channelRenderFilterFn: customFilterFunction,
+    };
+
+    useMockedApis(chatClientUthred, [
+      queryChannelsApi([filteredChannel, testChannel1]),
+    ]);
+
+    const { getByRole, queryAllByRole } = render(
+      <Chat client={chatClientUthred}>
+        <ChannelList {...props} />
+      </Chat>,
+    );
+
+    // Wait for list of channels to load in DOM.
+    await waitFor(() => {
+      expect(getByRole('list')).toBeInTheDocument();
+      expect(queryAllByRole('listitem')).toHaveLength(1);
+    });
+  });
+
   it('should render `LoadingErrorIndicator` when queryChannels api throws error', async () => {
     useMockedApis(chatClientUthred, [erroredGetApi()]);
     jest.spyOn(console, 'warn').mockImplementationOnce(() => null);
diff --git a/src/components/MessageInput/hooks/messageInput.js b/src/components/MessageInput/hooks/messageInput.js
@@ -343,19 +343,27 @@ export default function useMessageInput(props) {
           type: 'setEmojiPickerIsOpen',
           value: false,
         });
-        document.removeEventListener('click', closeEmojiPicker, false);
       }
     },
     [emojiPickerRef],
   );
 
-  const openEmojiPicker = useCallback(() => {
+  const openEmojiPicker = useCallback((event) => {
     dispatch({
       type: 'setEmojiPickerIsOpen',
       value: true,
     });
-    document.addEventListener('click', closeEmojiPicker, false);
-  }, [closeEmojiPicker]);
+
+    // Prevent event from bubbling to document, so the close handler is never called for this event
+    event.stopPropagation();
+  }, []);
+
+  useEffect(() => {
+    if (state.emojiPickerIsOpen) {
+      document.addEventListener('click', closeEmojiPicker, false);
+    }
+    return () => document.removeEventListener('click', closeEmojiPicker, false);
+  }, [closeEmojiPicker, state.emojiPickerIsOpen]);
 
   const onSelectEmoji = useCallback((emoji) => insertText(emoji.native), [
     insertText,
diff --git a/src/styles/Message.scss b/src/styles/Message.scss
@@ -625,7 +625,6 @@
       max-width: 460px;
 
       &.str-chat__message-simple-text-inner--is-emoji {
-        margin: 5px 0;
         background: transparent;
         p {
           line-height: 48px;
diff --git a/types/index.d.ts b/types/index.d.ts
@@ -322,6 +322,11 @@ export interface ChannelListProps {
     e: Client.Event,
   ): void;
   setActiveChannelOnMount?: boolean;
+  /**
+   * Optional function to filter channels prior to loading in the DOM. Do not use any complex or async logic here that would significantly delay the loading of the ChannelList.
+   * We recommend using a pure function with array methods like filter/sort/reduce.
+   */
+  channelRenderFilterFn?: (channels: Client.Channel[]) => Client.Channel[];
   /** Object containing query filters */
   filters?: Client.ChannelFilters;
   /** Object containing query options */

Original file line number	Diff line number	Diff line change
`@@ -1,6 +1,6 @@`
`1`	`1`	`{`
`2`	`2`	`"name": "stream-chat-react",`
`3`		`- "version": "3.5.1",`
	`3`	`+ "version": "3.5.3",`
`4`	`4`	`"description": "React components to create chat conversations or livestream style chat",`
`5`	`5`	`"author": "GetStream",`
`6`	`6`	`"homepage": "https://getstream.io/chat/",`