stream-chat-react-native-core 3.10.2 → 4.0.0-beta.4

package/src/contexts/overlayContext/OverlayProvider.tsx

@@ -1,6 +1,6 @@
 import React, { PropsWithChildren, useEffect, useRef, useState } from 'react';
 import { BackHandler, Dimensions, StyleSheet, ViewStyle } from 'react-native';
-import Dayjs from 'dayjs';
+
 import Animated, {
   cancelAnimation,
   useAnimatedStyle,
@@ -8,18 +8,15 @@ import Animated, {
   withTiming,
 } from 'react-native-reanimated';
 
-import { AttachmentPickerProvider } from '../attachmentPickerContext/AttachmentPickerContext';
-import { ImageGalleryProvider } from '../imageGalleryContext/ImageGalleryContext';
-import { MessageOverlayProvider } from '../messageOverlayContext/MessageOverlayContext';
-import { ThemeProvider } from '../themeContext/ThemeContext';
-import {
-  TranslationContextValue,
-  TranslationProvider,
-} from '../translationContext/TranslationContext';
+import type BottomSheet from '@gorhom/bottom-sheet';
+import Dayjs from 'dayjs';
+
+import { OverlayContext, OverlayProviderProps } from './OverlayContext';
 
 import { AttachmentPicker } from '../../components/AttachmentPicker/AttachmentPicker';
-import { AttachmentPickerError as DefaultAttachmentPickerError } from '../../components/AttachmentPicker/components/AttachmentPickerError';
+
 import { AttachmentPickerBottomSheetHandle as DefaultAttachmentPickerBottomSheetHandle } from '../../components/AttachmentPicker/components/AttachmentPickerBottomSheetHandle';
+import { AttachmentPickerError as DefaultAttachmentPickerError } from '../../components/AttachmentPicker/components/AttachmentPickerError';
 import { AttachmentPickerErrorImage as DefaultAttachmentPickerErrorImage } from '../../components/AttachmentPicker/components/AttachmentPickerErrorImage';
 import { CameraSelectorIcon as DefaultCameraSelectorIcon } from '../../components/AttachmentPicker/components/CameraSelectorIcon';
 import { FileSelectorIcon as DefaultFileSelectorIcon } from '../../components/AttachmentPicker/components/FileSelectorIcon';
@@ -27,12 +24,9 @@ import { ImageOverlaySelectedComponent as DefaultImageOverlaySelectedComponent }
 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 { ChannelsStateProvider } from '../../contexts/channelsStateContext/ChannelsStateContext';
 import { useStreami18n } from '../../hooks/useStreami18n';
-import { BlurView } from '../../native';
-
-import type BottomSheet from '@gorhom/bottom-sheet';
-
-import { BlurType, OverlayContext, OverlayProviderProps } from './OverlayContext';
 
 import type {
   DefaultAttachmentType,
@@ -44,6 +38,14 @@ import type {
   DefaultUserType,
   UnknownType,
 } from '../../types/types';
+import { AttachmentPickerProvider } from '../attachmentPickerContext/AttachmentPickerContext';
+import { ImageGalleryProvider } from '../imageGalleryContext/ImageGalleryContext';
+import { MessageOverlayProvider } from '../messageOverlayContext/MessageOverlayContext';
+import { ThemeProvider } from '../themeContext/ThemeContext';
+import {
+  TranslationContextValue,
+  TranslationProvider,
+} from '../translationContext/TranslationContext';
 
 /**
  * - The highest level of these components is the `OverlayProvider`. The `OverlayProvider` allows users to interact with messages on long press above the underlying views, use the full screen image viewer, and use the `AttachmentPicker` as a keyboard-esk view.
@@ -100,13 +102,15 @@ export const OverlayProvider = <
     imageGalleryGridSnapPoints,
     ImageOverlaySelectedComponent = DefaultImageOverlaySelectedComponent,
     ImageSelectorIcon = DefaultImageSelectorIcon,
-    MessageActions,
+    MessageActionList,
+    MessageActionListItem,
+    messageTextNumberOfLines,
     numberOfAttachmentImagesToLoadPerCall,
     numberOfAttachmentPickerImageColumns,
     numberOfImageGalleryGridColumns,
     openPicker = (ref) => {
-      if (ref.current) {
-        ref.current.snapTo(0);
+      if (ref.current?.snapToIndex) {
+        ref.current.snapToIndex(0);
       } else {
         console.warn('bottom and top insets must be set for the image picker to work correctly');
       }
@@ -115,6 +119,7 @@ export const OverlayProvider = <
     translucentStatusBar,
     OverlayReactionList,
     OverlayReactions,
+    OverlayReactionsAvatar,
     value,
   } = props;
 
@@ -139,7 +144,6 @@ export const OverlayProvider = <
     t: (key: string) => key,
     tDateTimeParser: (input?: string | number | Date) => Dayjs(input),
   });
-  const [blurType, setBlurType] = useState<BlurType>();
   const [overlay, setOverlay] = useState(value?.overlay || 'none');
 
   const overlayOpacity = useSharedValue(0);
@@ -151,7 +155,6 @@ export const OverlayProvider = <
   useEffect(() => {
     const backAction = () => {
       if (overlay !== 'none') {
-        setBlurType(undefined);
         setOverlay('none');
         return true;
       }
@@ -166,7 +169,7 @@ export const OverlayProvider = <
 
   useEffect(() => {
     if (bottomSheetRef.current) {
-      bottomSheetRef.current.close();
+      bottomSheetRef.current.close?.();
     }
     cancelAnimation(overlayOpacity);
     if (overlay !== 'none') {
@@ -200,7 +203,6 @@ export const OverlayProvider = <
 
   const overlayContext = {
     overlay,
-    setBlurType,
     setOverlay,
     style: value?.style,
     translucentStatusBar,
@@ -214,32 +216,36 @@ export const OverlayProvider = <
         <MessageOverlayProvider<At, Ch, Co, Ev, Me, Re, Us>>
           <AttachmentPickerProvider value={attachmentPickerContext}>
             <ImageGalleryProvider>
-              {children}
+              <ChannelsStateProvider<At, Ch, Co, Ev, Me, Re, Us>>{children}</ChannelsStateProvider>
               <ThemeProvider style={overlayContext.style}>
                 <Animated.View
                   pointerEvents={overlay === 'none' ? 'none' : 'auto'}
                   style={[StyleSheet.absoluteFill, overlayStyle]}
                 >
-                  <BlurView
-                    blurType={blurType}
-                    style={[StyleSheet.absoluteFill, { height, width }]}
-                  />
+                  <OverlayBackdrop style={[StyleSheet.absoluteFill, { height, width }]} />
                 </Animated.View>
-                <MessageOverlay<At, Ch, Co, Ev, Me, Re, Us>
-                  MessageActions={MessageActions}
-                  overlayOpacity={overlayOpacity}
-                  OverlayReactionList={OverlayReactionList}
-                  OverlayReactions={OverlayReactions}
-                  visible={overlay === 'message'}
-                />
-                <ImageGallery<At, Ch, Co, Ev, Me, Re, Us>
-                  imageGalleryCustomComponents={imageGalleryCustomComponents}
-                  imageGalleryGridHandleHeight={imageGalleryGridHandleHeight}
-                  imageGalleryGridSnapPoints={imageGalleryGridSnapPoints}
-                  numberOfImageGalleryGridColumns={numberOfImageGalleryGridColumns}
-                  overlayOpacity={overlayOpacity}
-                  visible={overlay === 'gallery'}
-                />
+                {overlay === 'message' && (
+                  <MessageOverlay<At, Ch, Co, Ev, Me, Re, Us>
+                    MessageActionList={MessageActionList}
+                    MessageActionListItem={MessageActionListItem}
+                    messageTextNumberOfLines={messageTextNumberOfLines}
+                    overlayOpacity={overlayOpacity}
+                    OverlayReactionList={OverlayReactionList}
+                    OverlayReactions={OverlayReactions}
+                    OverlayReactionsAvatar={OverlayReactionsAvatar}
+                    visible={overlay === 'message'}
+                  />
+                )}
+                {overlay === 'gallery' && (
+                  <ImageGallery<At, Ch, Co, Ev, Me, Re, Us>
+                    imageGalleryCustomComponents={imageGalleryCustomComponents}
+                    imageGalleryGridHandleHeight={imageGalleryGridHandleHeight}
+                    imageGalleryGridSnapPoints={imageGalleryGridSnapPoints}
+                    numberOfImageGalleryGridColumns={numberOfImageGalleryGridColumns}
+                    overlayOpacity={overlayOpacity}
+                    visible={overlay === 'gallery'}
+                  />
+                )}
                 <AttachmentPicker ref={bottomSheetRef} {...attachmentPickerProps} />
               </ThemeProvider>
             </ImageGalleryProvider>

package/src/contexts/ownCapabilitiesContext/OwnCapabilitiesContext.tsx

@@ -0,0 +1,38 @@
+import React, { PropsWithChildren, useContext } from 'react';
+
+export const allOwnCapabilities = {
+  banChannelMembers: 'ban-channel-members',
+  deleteAnyMessage: 'delete-any-message',
+  deleteOwnMessage: 'delete-own-message',
+  flagMessage: 'flag-message',
+  pinMessage: 'pin-message',
+  quoteMessage: 'quote-message',
+  readEvents: 'read-events',
+  sendLinks: 'send-links',
+  sendMessage: 'send-message',
+  sendReaction: 'send-reaction',
+  sendReply: 'send-reply',
+  sendTypingEvents: 'send-typing-events',
+  updateAnyMessage: 'update-any-message',
+  updateOwnMessage: 'update-own-message',
+  uploadFile: 'upload-file',
+};
+
+export type OwnCapability = keyof typeof allOwnCapabilities;
+
+export type OwnCapabilitiesContextValue = Record<OwnCapability, boolean>;
+export const OwnCapabilitiesContext = React.createContext({} as OwnCapabilitiesContextValue);
+
+export const OwnCapabilitiesProvider = ({
+  children,
+  value,
+}: PropsWithChildren<{
+  value: OwnCapabilitiesContextValue;
+}>) => (
+  <OwnCapabilitiesContext.Provider value={value as unknown as OwnCapabilitiesContextValue}>
+    {children}
+  </OwnCapabilitiesContext.Provider>
+);
+
+export const useOwnCapabilitiesContext = () =>
+  useContext(OwnCapabilitiesContext) as unknown as OwnCapabilitiesContextValue;

package/src/contexts/paginatedMessageListContext/PaginatedMessageListContext.tsx

@@ -1,7 +1,5 @@
 import React, { PropsWithChildren, useContext } from 'react';
 
-import { getDisplayName } from '../utils/getDisplayName';
-
 import type { ChannelState } from 'stream-chat';
 
 import type {
@@ -14,6 +12,7 @@ import type {
   DefaultUserType,
   UnknownType,
 } from '../../types/types';
+import { getDisplayName } from '../utils/getDisplayName';
 
 export type PaginatedMessageListContextValue<
   At extends UnknownType = DefaultAttachmentType,

package/src/contexts/suggestionsContext/SuggestionsContext.tsx

@@ -1,16 +1,15 @@
 import React, { PropsWithChildren, useContext, useState } from 'react';
 
-import { getDisplayName } from '../utils/getDisplayName';
-
 import type { CommandResponse, UserResponse } from 'stream-chat';
 
+import type { AutoCompleteSuggestionHeaderProps } from '../../components/AutoCompleteInput/AutoCompleteSuggestionHeader';
+import type { AutoCompleteSuggestionItemProps } from '../../components/AutoCompleteInput/AutoCompleteSuggestionItem';
+import type { AutoCompleteSuggestionListProps } from '../../components/AutoCompleteInput/AutoCompleteSuggestionList';
 import type { Emoji } from '../../emoji-data/compiled';
 import type { DefaultCommandType, DefaultUserType, UnknownType } from '../../types/types';
+import { getDisplayName } from '../utils/getDisplayName';
 
-export type SuggestionComponentType<
-  Co extends string = DefaultCommandType,
-  Us extends UnknownType = DefaultUserType,
-> = string | React.ReactElement<{ item: Suggestion<Co, Us> }>;
+export type SuggestionComponentType = 'command' | 'emoji' | 'mention';
 
 export const isSuggestionCommand = <
   Co extends string = DefaultCommandType,
@@ -36,10 +35,9 @@ export const isSuggestionUser = <
 export type Suggestion<
   Co extends string = DefaultCommandType,
   Us extends UnknownType = DefaultUserType,
-> = SuggestionCommand<Co> | SuggestionUser<Us> | Emoji;
+> = Emoji | SuggestionCommand<Co> | SuggestionUser<Us>;
 
 export type SuggestionCommand<Co extends string = DefaultCommandType> = CommandResponse<Co>;
-
 export type SuggestionUser<Us extends UnknownType = DefaultUserType> = UserResponse<Us>;
 
 export type Suggestions<
@@ -48,41 +46,35 @@ export type Suggestions<
 > = {
   data: Suggestion<Co, Us>[];
   onSelect: (item: Suggestion<Co, Us>) => void;
+  queryText?: string;
 };
 
 export type SuggestionsContextValue<
   Co extends string = DefaultCommandType,
   Us extends UnknownType = DefaultUserType,
 > = {
+  AutoCompleteSuggestionHeader: React.ComponentType<AutoCompleteSuggestionHeaderProps>;
+  AutoCompleteSuggestionItem: React.ComponentType<AutoCompleteSuggestionItemProps<Co, Us>>;
+  AutoCompleteSuggestionList: React.ComponentType<AutoCompleteSuggestionListProps<Co, Us>>;
   /** Override handler for closing suggestions (mentions, command autocomplete etc) */
   closeSuggestions: () => void;
   /**
    * Override handler for opening suggestions (mentions, command autocomplete etc)
    *
    * @param component {Component|element} UI Component for suggestion item.
-   * @param title {string} Title for suggestions box
-   *
    * @overrideType Function
    */
-  openSuggestions: (
-    component: SuggestionComponentType<Co, Us>,
-    title?: React.ReactElement,
-  ) => Promise<void>;
+  openSuggestions: (component: SuggestionComponentType) => Promise<void>;
+  suggestions: Suggestions<Co, Us>;
+  triggerType: SuggestionComponentType;
   /**
    * Override handler for updating suggestions (mentions, command autocomplete etc)
    *
    * @param newSuggestions {Component|element} UI Component for suggestion item.
-   * @param newSuggestionsTitle {string} Title for suggestions box
-   *
    * @overrideType Function
    */
-  updateSuggestions: (
-    newSuggestions: Suggestions<Co, Us>,
-    newSuggestionsTitle?: React.ReactElement,
-  ) => void;
-  componentType?: SuggestionComponentType<Co, Us>;
-  suggestions?: Suggestions<Co, Us>;
-  suggestionsTitle?: React.ReactElement;
+  updateSuggestions: (newSuggestions: Suggestions<Co, Us>) => void;
+  queryText?: string;
   suggestionsViewActive?: boolean;
 };
 
@@ -98,46 +90,34 @@ export const SuggestionsProvider = <
   children,
   value,
 }: PropsWithChildren<{ value?: Partial<SuggestionsContextValue<Co, Us>> }>) => {
-  const [componentType, setComponentType] = useState<SuggestionComponentType<Co, Us>>('');
+  const [triggerType, setTriggerType] = useState<SuggestionComponentType | null>(null);
   const [suggestions, setSuggestions] = useState<Suggestions<Co, Us>>();
-  const [suggestionsTitle, setSuggestionsTitle] = useState<React.ReactElement>();
   const [suggestionsViewActive, setSuggestionsViewActive] = useState(false);
 
-  const openSuggestions = (
-    component: SuggestionComponentType<Co, Us>,
-    title?: React.ReactElement,
-  ) => {
-    setComponentType(component);
-    setSuggestionsTitle(title);
+  const openSuggestions = (component: SuggestionComponentType) => {
+    setTriggerType(component);
     setSuggestionsViewActive(true);
   };
 
-  const updateSuggestions = (
-    newSuggestions: Suggestions<Co, Us>,
-    newSuggestionsTitle?: React.ReactElement,
-  ) => {
+  const updateSuggestions = (newSuggestions: Suggestions<Co, Us>) => {
     setSuggestions(newSuggestions);
-    if (newSuggestionsTitle) {
-      setSuggestionsTitle(newSuggestionsTitle);
-    }
-    setSuggestionsViewActive(!!componentType);
+    setSuggestionsViewActive(!!triggerType);
   };
 
   const closeSuggestions = () => {
-    setComponentType('');
+    setTriggerType(null);
     setSuggestions(undefined);
-    setSuggestionsTitle(undefined);
     setSuggestionsViewActive(false);
   };
 
   const suggestionsContext = {
-    closeSuggestions: value?.closeSuggestions || closeSuggestions,
-    componentType,
-    openSuggestions: value?.openSuggestions || openSuggestions,
+    ...value,
+    closeSuggestions,
+    openSuggestions,
     suggestions,
-    suggestionsTitle,
     suggestionsViewActive,
-    updateSuggestions: value?.updateSuggestions || updateSuggestions,
+    triggerType,
+    updateSuggestions,
   };
 
   return (

package/src/contexts/suggestionsContext/__tests__/Suggestions.test.js

@@ -1,5 +1,6 @@
 import React from 'react';
 import { View } from 'react-native';
+
 import { cleanup, render, waitFor } from '@testing-library/react-native';
 
 import { SuggestionsProvider, useSuggestionsContext } from '../SuggestionsContext';
@@ -39,7 +40,6 @@ describe('SuggestionsProvider', () => {
     await waitFor(() => {
       expect(context).toBeInstanceOf(Object);
       expect(context.closeSuggestions).toBeInstanceOf(Function);
-      expect(typeof context.componentType).toBe('string');
       expect(context.openSuggestions).toBeInstanceOf(Function);
       expect(typeof context.suggestionsViewActive).toBe('boolean');
       expect(context.updateSuggestions).toBeInstanceOf(Function);

package/src/contexts/themeContext/ThemeContext.tsx

@@ -1,4 +1,5 @@
 import React, { useContext, useMemo } from 'react';
+
 import merge from 'lodash/merge';
 
 import { defaultTheme, Theme } from './utils/theme';