Merge branch 'master' into rc

Author: arnautov-anton

docusaurus/docs/React/components/contexts/message-list-context.mdx

@@ -0,0 +1,51 @@
+---
+id: message_list_context
+sidebar_position: 8
+title: MessageListContext
+---
+
+The context value is provided by `MessageListContextProvider` which wraps the contents rendered by [`MessageList`](../core-components/message-list.mdx). It exposes API that the default and custom components rendered by `MessageList` can take advantage of. The components that can consume the context are:
+
+- `EmptyStateIndicator` - rendered when there are no messages in the channel. The [`component can be customized`](./component-context.mdx#emptystateindicator).
+- `LoadingIndicator` - rendered while loading more messages to the channel. The [`component can be customized`](./component-context.mdx#loadingindicator).
+- `MessageListNotifications` - component rendering application notifications. The [`component can be customized`](./component-context.mdx#messagelistnotifications).
+- `MessageNotification` - component used to display a single notification message in `MessageListNotifications`. The [`component can be customized`](./component-context.mdx#messagenotification).
+- `TypingIndicator` - component indicating that another user is typing a message in a given channel. The [`component can be customized`](./component-context.mdx#typingindicator).
+- `Message` and its children - component to render a message. The [`component can be customized`](./component-context.mdx#message).
+- `DateSeparator` - component rendered to separate messages posted on different dates. The [`component can be customized`](./component-context.mdx#dateseparator).
+- `MessageSystem` - component to display system messages in the message list. The [`component can be customized`](./component-context.mdx#messagesystem).
+- `HeaderComponent` - component to be displayed before the oldest message in the message list. The [`component can be customized`](./component-context.mdx#headercomponent).
+
+## Basic Usage
+
+Pull the value from context with our custom hook:
+
+```jsx
+import { useMessageListContext } from 'stream-chat-react';
+
+export const CustomComponent = () => {
+  const { listElement, scrollToBottom } = useMessageListContext();
+  // component logic ...
+  return(
+      {/* rendered elements */}
+  );
+}
+```
+
+## Value
+
+### listElement
+
+The scroll container within which the messages and typing indicator are rendered. You may want to perform scroll-to-bottom operations based on the `listElement`'s scroll state.
+
+| Type                     |
+|--------------------------|
+| `HTMLDivElement \| null` |
+
+### scrollToBottom
+
+Function that scrolls the `listElement` to the bottom.
+
+| Type         |
+|--------------|
+| `() => void` |

docusaurus/docs/React/components/contexts/translation-context.mdx

@@ -1,6 +1,6 @@
 ---
 id: translation_context
-sidebar_position: 8
+sidebar_position: 9
 title: TranslationContext
 ---
 

docusaurus/docs/React/components/contexts/typing-context.mdx

@@ -1,6 +1,6 @@
 ---
 id: typing_context
-sidebar_position: 9
+sidebar_position: 10
 title: TypingContext
 ---
 

src/components/MessageList/MessageList.tsx

@@ -19,6 +19,7 @@ import {
 } from '../../context/ChannelStateContext';
 import { useChatContext } from '../../context/ChatContext';
 import { useComponentContext } from '../../context/ComponentContext';
+import { MessageListContextProvider } from '../../context/MessageListContext';
 import { EmptyStateIndicator as DefaultEmptyStateIndicator } from '../EmptyStateIndicator';
 import { InfiniteScroll, InfiniteScrollProps } from '../InfiniteScrollPaginator/InfiniteScroll';
 import { LoadingIndicator as DefaultLoadingIndicator } from '../Loading';
@@ -180,7 +181,7 @@ const MessageListWithContext = <
   const showEmptyStateIndicator = elements.length === 0 && !threadList;
 
   return (
-    <>
+    <MessageListContextProvider value={{ listElement, scrollToBottom }}>
       <MessageListMainPanel>
         <div
           className={`${messageListClass} ${threadListClass}`}
@@ -230,7 +231,7 @@ const MessageListWithContext = <
         scrollToBottom={scrollToBottomFromNotification}
         threadList={threadList}
       />
-    </>
+    </MessageListContextProvider>
   );
 };
 

src/context/MessageListContext.tsx

@@ -0,0 +1,38 @@
+import React, { createContext, PropsWithChildren, useContext } from 'react';
+
+export type MessageListContextValue = {
+  /** The scroll container within which the messages and typing indicator are rendered */
+  listElement: HTMLDivElement | null;
+  /** Function that scrolls the `listElement` to the bottom. */
+  scrollToBottom: () => void;
+};
+
+export const MessageListContext = createContext<MessageListContextValue | undefined>(undefined);
+
+/**
+ * Context provider for components rendered within the `MessageList`
+ */
+export const MessageListContextProvider = ({
+  children,
+  value,
+}: PropsWithChildren<{
+  value: MessageListContextValue;
+}>) => (
+  <MessageListContext.Provider value={value as MessageListContextValue}>
+    {children}
+  </MessageListContext.Provider>
+);
+
+export const useMessageListContext = (componentName?: string) => {
+  const contextValue = useContext(MessageListContext);
+
+  if (!contextValue) {
+    console.warn(
+      `The useMessageListContext hook was called outside of the MessageListContext provider. Make sure this hook is called within the MessageList component. The errored call is located in the ${componentName} component.`,
+    );
+
+    return {} as MessageListContextValue;
+  }
+
+  return contextValue as MessageListContextValue;
+};

src/context/index.ts

@@ -4,5 +4,6 @@ export * from './ChatContext';
 export * from './ComponentContext';
 export * from './MessageContext';
 export * from './MessageInputContext';
+export * from './MessageListContext';
 export * from './TranslationContext';
 export * from './TypingContext';