stream-chat-react-native-core 5.40.0-rc.2 → 5.41.0-beta.1

package/src/contexts/overlayContext/OverlayProvider.tsx

@@ -1,8 +1,13 @@
 import React, { PropsWithChildren, useEffect, useRef, useState } from 'react';
 
-import { BackHandler } from 'react-native';
+import { BackHandler, Dimensions, StyleSheet, ViewStyle } from 'react-native';
 
-import { cancelAnimation, useSharedValue, withTiming } from 'react-native-reanimated';
+import Animated, {
+  cancelAnimation,
+  useAnimatedStyle,
+  useSharedValue,
+  withTiming,
+} from 'react-native-reanimated';
 
 import type BottomSheet from '@gorhom/bottom-sheet';
 
@@ -20,6 +25,9 @@ import { FileSelectorIcon as DefaultFileSelectorIcon } from '../../components/At
 import { ImageOverlaySelectedComponent as DefaultImageOverlaySelectedComponent } from '../../components/AttachmentPicker/components/ImageOverlaySelectedComponent';
 import { ImageSelectorIcon as DefaultImageSelectorIcon } from '../../components/AttachmentPicker/components/ImageSelectorIcon';
 import { ImageGallery } from '../../components/ImageGallery/ImageGallery';
+import { MessageOverlay } from '../../components/MessageOverlay/MessageOverlay';
+import { OverlayBackdrop } from '../../components/MessageOverlay/OverlayBackdrop';
+import { CreatePollIcon as DefaultCreatePollIcon } from '../../components/Poll/components/CreatePollIcon';
 import { useStreami18n } from '../../hooks/useStreami18n';
 
 import { useViewport } from '../../hooks/useViewport';
@@ -27,6 +35,7 @@ import { isImageMediaLibraryAvailable } from '../../native';
 import type { DefaultStreamChatGenerics } from '../../types/types';
 import { AttachmentPickerProvider } from '../attachmentPickerContext/AttachmentPickerContext';
 import { ImageGalleryProvider } from '../imageGalleryContext/ImageGalleryContext';
+import { MessageOverlayProvider } from '../messageOverlayContext/MessageOverlayContext';
 import { ThemeProvider } from '../themeContext/ThemeContext';
 import {
   DEFAULT_USER_LANGUAGE,
@@ -91,6 +100,7 @@ export const OverlayProvider = <
         }, 600);
       }
     },
+    CreatePollIcon = DefaultCreatePollIcon,
     FileSelectorIcon = DefaultFileSelectorIcon,
     giphyVersion,
     i18nInstance,
@@ -99,6 +109,9 @@ export const OverlayProvider = <
     imageGalleryGridSnapPoints,
     ImageOverlaySelectedComponent = DefaultImageOverlaySelectedComponent,
     ImageSelectorIcon = DefaultImageSelectorIcon,
+    MessageActionList,
+    MessageActionListItem,
+    messageTextNumberOfLines,
     numberOfAttachmentImagesToLoadPerCall,
     numberOfAttachmentPickerImageColumns,
     numberOfImageGalleryGridColumns,
@@ -112,6 +125,9 @@ export const OverlayProvider = <
         console.warn('bottom and top insets must be set for the image picker to work correctly');
       }
     },
+    OverlayReactionList,
+    OverlayReactions,
+    OverlayReactionsAvatar,
     topInset,
     value,
   } = props;
@@ -136,6 +152,7 @@ export const OverlayProvider = <
   const [overlay, setOverlay] = useState(value?.overlay || 'none');
 
   const overlayOpacity = useSharedValue(0);
+  const { height, width } = Dimensions.get('screen');
 
   // Setup translators
   const translators = useStreami18n(i18nInstance);
@@ -185,12 +202,20 @@ export const OverlayProvider = <
     bottomInset,
     CameraSelectorIcon,
     closePicker: () => closePicker(bottomSheetRef),
+    CreatePollIcon,
     FileSelectorIcon,
     ImageSelectorIcon,
     openPicker: () => openPicker(bottomSheetRef),
     topInset,
   };
 
+  const overlayStyle = useAnimatedStyle<ViewStyle>(
+    () => ({
+      opacity: overlayOpacity.value,
+    }),
+    [],
+  );
+
   const overlayContext = {
     overlay,
     setOverlay,
@@ -200,27 +225,46 @@ export const OverlayProvider = <
   return (
     <TranslationProvider value={{ ...translators, userLanguage: DEFAULT_USER_LANGUAGE }}>
       <OverlayContext.Provider value={overlayContext}>
-        <AttachmentPickerProvider value={attachmentPickerContext}>
-          <ImageGalleryProvider>
-            {children}
-            <ThemeProvider style={overlayContext.style}>
-              {overlay === 'gallery' && (
-                <ImageGallery<StreamChatGenerics>
-                  autoPlayVideo={autoPlayVideo}
-                  giphyVersion={giphyVersion}
-                  imageGalleryCustomComponents={imageGalleryCustomComponents}
-                  imageGalleryGridHandleHeight={imageGalleryGridHandleHeight}
-                  imageGalleryGridSnapPoints={imageGalleryGridSnapPoints}
-                  numberOfImageGalleryGridColumns={numberOfImageGalleryGridColumns}
-                  overlayOpacity={overlayOpacity}
-                />
-              )}
-              {isImageMediaLibraryAvailable() ? (
-                <AttachmentPicker ref={bottomSheetRef} {...attachmentPickerProps} />
-              ) : null}
-            </ThemeProvider>
-          </ImageGalleryProvider>
-        </AttachmentPickerProvider>
+        <MessageOverlayProvider<StreamChatGenerics>>
+          <AttachmentPickerProvider value={attachmentPickerContext}>
+            <ImageGalleryProvider>
+              {children}
+              <ThemeProvider style={overlayContext.style}>
+                <Animated.View
+                  pointerEvents={overlay === 'none' ? 'none' : 'auto'}
+                  style={[StyleSheet.absoluteFill, overlayStyle]}
+                >
+                  <OverlayBackdrop style={[StyleSheet.absoluteFill, { height, width }]} />
+                </Animated.View>
+                {overlay === 'message' && (
+                  <MessageOverlay<StreamChatGenerics>
+                    MessageActionList={MessageActionList}
+                    MessageActionListItem={MessageActionListItem}
+                    messageTextNumberOfLines={messageTextNumberOfLines}
+                    overlayOpacity={overlayOpacity}
+                    OverlayReactionList={OverlayReactionList}
+                    OverlayReactions={OverlayReactions}
+                    OverlayReactionsAvatar={OverlayReactionsAvatar}
+                  />
+                )}
+                {overlay === 'gallery' && (
+                  <ImageGallery<StreamChatGenerics>
+                    autoPlayVideo={autoPlayVideo}
+                    giphyVersion={giphyVersion}
+                    imageGalleryCustomComponents={imageGalleryCustomComponents}
+                    imageGalleryGridHandleHeight={imageGalleryGridHandleHeight}
+                    imageGalleryGridSnapPoints={imageGalleryGridSnapPoints}
+                    numberOfImageGalleryGridColumns={numberOfImageGalleryGridColumns}
+                    overlayOpacity={overlayOpacity}
+                  />
+                )}
+                {isImageMediaLibraryAvailable() ? (
+                  <AttachmentPicker ref={bottomSheetRef} {...attachmentPickerProps} />
+                ) : null}
+              </ThemeProvider>
+            </ImageGalleryProvider>
+          </AttachmentPickerProvider>
+        </MessageOverlayProvider>
       </OverlayContext.Provider>
     </TranslationProvider>
   );

package/src/contexts/ownCapabilitiesContext/OwnCapabilitiesContext.tsx

@@ -6,14 +6,17 @@ import { isTestEnvironment } from '../utils/isTestEnvironment';
 
 export const allOwnCapabilities = {
   banChannelMembers: 'ban-channel-members',
+  castPollVote: 'cast-poll-vote',
   deleteAnyMessage: 'delete-any-message',
   deleteOwnMessage: 'delete-own-message',
   flagMessage: 'flag-message',
   pinMessage: 'pin-message',
+  queryPollVotes: 'query-poll-votes',
   quoteMessage: 'quote-message',
   readEvents: 'read-events',
   sendLinks: 'send-links',
   sendMessage: 'send-message',
+  sendPoll: 'send-poll',
   sendReaction: 'send-reaction',
   sendReply: 'send-reply',
   sendTypingEvents: 'send-typing-events',

package/src/contexts/paginatedMessageListContext/PaginatedMessageListContext.tsx

@@ -2,9 +2,10 @@ import React, { PropsWithChildren, useContext } from 'react';
 
 import type { ChannelState } from 'stream-chat';
 
-import type { DefaultStreamChatGenerics } from '../../types/types';
+import type { DefaultStreamChatGenerics, UnknownType } from '../../types/types';
 import { DEFAULT_BASE_CONTEXT_VALUE } from '../utils/defaultBaseContextValue';
 
+import { getDisplayName } from '../utils/getDisplayName';
 import { isTestEnvironment } from '../utils/isTestEnvironment';
 
 export type PaginatedMessageListContextValue<
@@ -82,3 +83,31 @@ export const usePaginatedMessageListContext = <
 
   return contextValue;
 };
+
+/**
+ * @deprecated
+ *
+ * This will be removed in the next major version.
+ *
+ * Typescript currently does not support partial inference so if ChatContext
+ * typing is desired while using the HOC withPaginatedMessageListContext the Props for the
+ * wrapped component must be provided as the first generic.
+ */
+export const withPaginatedMessageListContext = <
+  P extends UnknownType,
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
+>(
+  Component: React.ComponentType<P>,
+): React.ComponentType<Omit<P, keyof PaginatedMessageListContextValue<StreamChatGenerics>>> => {
+  const WithPaginatedMessageListContextComponent = (
+    props: Omit<P, keyof PaginatedMessageListContextValue<StreamChatGenerics>>,
+  ) => {
+    const paginatedMessageListContext = usePaginatedMessageListContext<StreamChatGenerics>();
+
+    return <Component {...(props as P)} {...paginatedMessageListContext} />;
+  };
+  WithPaginatedMessageListContextComponent.displayName = `WithPaginatedMessageListContext${getDisplayName(
+    Component,
+  )}`;
+  return WithPaginatedMessageListContextComponent;
+};

package/src/contexts/pollContext/createPollContentContext.tsx

@@ -0,0 +1,49 @@
+import React, { PropsWithChildren, useContext } from 'react';
+
+import { CreatePollData } from 'stream-chat';
+
+import { MessageInputContextValue } from '../messageInputContext/MessageInputContext';
+import { DEFAULT_BASE_CONTEXT_VALUE } from '../utils/defaultBaseContextValue';
+
+import { isTestEnvironment } from '../utils/isTestEnvironment';
+
+export type CreatePollContentContextValue = {
+  createAndSendPoll: (pollData: CreatePollData) => Promise<void>;
+  sendMessage: MessageInputContextValue['sendMessage'];
+  /**
+   * A property that defines the constant height of the options within the poll creation screen.
+   *
+   * **Default: ** 71
+   */
+  closePollCreationDialog?: () => void;
+  createPollOptionHeight?: number;
+};
+
+export const CreatePollContentContext = React.createContext(
+  DEFAULT_BASE_CONTEXT_VALUE as CreatePollContentContextValue,
+);
+
+export const CreatePollContentProvider = ({
+  children,
+  value,
+}: PropsWithChildren<{
+  value: CreatePollContentContextValue;
+}>) => (
+  <CreatePollContentContext.Provider value={value as unknown as CreatePollContentContextValue}>
+    {children}
+  </CreatePollContentContext.Provider>
+);
+
+export const useCreatePollContentContext = () => {
+  const contextValue = useContext(
+    CreatePollContentContext,
+  ) as unknown as CreatePollContentContextValue;
+
+  if (contextValue === DEFAULT_BASE_CONTEXT_VALUE && !isTestEnvironment()) {
+    throw new Error(
+      `The useCreatePollContentContext hook was called outside of the CreatePollContentContext provider. Make sure you have configured the CreatePollContent component correctly - https://getstream.io/chat/docs/sdk/reactnative/basics/hello_stream_chat/#channel`,
+    );
+  }
+
+  return contextValue;
+};

package/src/contexts/pollContext/index.ts

@@ -0,0 +1,2 @@
+export * from './createPollContentContext';
+export * from './pollContext';

package/src/contexts/pollContext/pollContext.tsx

@@ -0,0 +1,43 @@
+import React, { PropsWithChildren, useContext } from 'react';
+
+import { Poll } from 'stream-chat';
+
+import { MessageType } from '../../components';
+import type { DefaultStreamChatGenerics } from '../../types/types';
+import { DEFAULT_BASE_CONTEXT_VALUE } from '../utils/defaultBaseContextValue';
+
+import { isTestEnvironment } from '../utils/isTestEnvironment';
+
+export type PollContextValue<
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
+> = {
+  message: MessageType<StreamChatGenerics>;
+  poll: Poll<StreamChatGenerics>;
+};
+
+export const PollContext = React.createContext(DEFAULT_BASE_CONTEXT_VALUE as PollContextValue);
+
+export const PollContextProvider = <
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
+>({
+  children,
+  value,
+}: PropsWithChildren<{
+  value: PollContextValue<StreamChatGenerics>;
+}>) => (
+  <PollContext.Provider value={value as unknown as PollContextValue}>
+    {children}
+  </PollContext.Provider>
+);
+
+export const usePollContext = () => {
+  const contextValue = useContext(PollContext) as unknown as PollContextValue;
+
+  if (contextValue === DEFAULT_BASE_CONTEXT_VALUE && !isTestEnvironment()) {
+    throw new Error(
+      `The useCreatePollContext hook was called outside of the PollContext provider. Make sure you have configured the Poll component correctly - https://getstream.io/chat/docs/sdk/reactnative/basics/hello_stream_chat/#channel`,
+    );
+  }
+
+  return contextValue;
+};

package/src/contexts/suggestionsContext/SuggestionsContext.tsx

@@ -6,9 +6,10 @@ import type { AutoCompleteSuggestionHeaderProps } from '../../components/AutoCom
 import type { AutoCompleteSuggestionItemProps } from '../../components/AutoCompleteInput/AutoCompleteSuggestionItem';
 import type { AutoCompleteSuggestionListProps } from '../../components/AutoCompleteInput/AutoCompleteSuggestionList';
 import type { Emoji } from '../../emoji-data';
-import type { DefaultStreamChatGenerics } from '../../types/types';
+import type { DefaultStreamChatGenerics, UnknownType } from '../../types/types';
 import { DEFAULT_BASE_CONTEXT_VALUE } from '../utils/defaultBaseContextValue';
 
+import { getDisplayName } from '../utils/getDisplayName';
 import { isTestEnvironment } from '../utils/isTestEnvironment';
 
 export type SuggestionComponentType = 'command' | 'emoji' | 'mention';
@@ -147,3 +148,31 @@ export const useSuggestionsContext = <
 
   return contextValue;
 };
+
+/**
+ * @deprecated
+ *
+ * This will be removed in the next major version.
+ *
+ * Typescript currently does not support partial inference so if ChatContext
+ * typing is desired while using the HOC withSuggestionsContext the Props for the
+ * wrapped component must be provided as the first generic.
+ */
+export const withSuggestionsContext = <
+  P extends UnknownType,
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
+>(
+  Component: React.ComponentType<P>,
+): React.ComponentType<Omit<P, keyof SuggestionsContextValue<StreamChatGenerics>>> => {
+  const WithSuggestionsContextComponent = (
+    props: Omit<P, keyof SuggestionsContextValue<StreamChatGenerics>>,
+  ) => {
+    const suggestionsContext = useSuggestionsContext<StreamChatGenerics>();
+
+    return <Component {...(props as P)} {...suggestionsContext} />;
+  };
+  WithSuggestionsContextComponent.displayName = `WithSuggestionsContext${getDisplayName(
+    Component,
+  )}`;
+  return WithSuggestionsContextComponent;
+};