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

package/src/components/MessageInput/components/AudioRecorder/AudioRecordingLockIndicator.tsx

@@ -80,5 +80,6 @@ const styles = StyleSheet.create({
     padding: 8,
     position: 'absolute',
     right: 0,
+    zIndex: 1,
   },
 });

package/src/components/MessageInput/components/NativeAttachmentPicker.tsx

@@ -1,12 +1,18 @@
 import React, { useEffect, useRef } from 'react';
 import { Animated, Easing, LayoutRectangle, Pressable, StyleSheet } from 'react-native';
 
+import {
+  useChannelContext,
+  useMessagesContext,
+  useOwnCapabilitiesContext,
+} from '../../../contexts';
 import { useMessageInputContext } from '../../../contexts/messageInputContext/MessageInputContext';
 import { useTheme } from '../../../contexts/themeContext/ThemeContext';
 
 import { CameraSelectorIcon } from '../../AttachmentPicker/components/CameraSelectorIcon';
 import { FileSelectorIcon } from '../../AttachmentPicker/components/FileSelectorIcon';
 import { ImageSelectorIcon } from '../../AttachmentPicker/components/ImageSelectorIcon';
+import { CreatePollIcon } from '../../Poll/components/CreatePollIcon';
 
 type NativeAttachmentPickerProps = {
   onRequestedClose: () => void;
@@ -38,10 +44,15 @@ export const NativeAttachmentPicker = ({
   const {
     hasFilePicker,
     hasImagePicker,
+    openPollCreationDialog,
     pickAndUploadImageFromNativePicker,
     pickFile,
+    sendMessage,
     takeAndUploadImage,
   } = useMessageInputContext();
+  const { threadList } = useChannelContext();
+  const { hasCreatePoll } = useMessagesContext();
+  const ownCapabilities = useOwnCapabilitiesContext();
 
   const popupHeight =
     // the top padding
@@ -91,7 +102,11 @@ export const NativeAttachmentPicker = ({
     width: size,
   };
 
-  const onClose = ({ onPressHandler }: { onPressHandler?: () => Promise<void> }) => {
+  const onClose = ({
+    onPressHandler,
+  }: {
+    onPressHandler?: (() => Promise<void>) | (() => void);
+  }) => {
     if (onPressHandler) {
       onPressHandler();
     }
@@ -103,7 +118,19 @@ export const NativeAttachmentPicker = ({
     }).start(onRequestedClose);
   };
 
-  const buttons = [];
+  // do not allow poll creation in threads
+  const buttons =
+    threadList && hasCreatePoll && ownCapabilities.sendPoll
+      ? []
+      : [
+          {
+            icon: <CreatePollIcon />,
+            id: 'Poll',
+            onPressHandler: () => {
+              openPollCreationDialog?.({ sendMessage });
+            },
+          },
+        ];
 
   if (hasImagePicker) {
     buttons.push({

package/src/components/MessageInput/hooks/useAudioController.tsx

@@ -84,6 +84,7 @@ export const useAudioController = () => {
   };
 
   const onVoicePlayerPlayPause = async () => {
+    if (!Audio) return;
     if (paused) {
       if (progress === 0) await startVoicePlayer();
       else {
@@ -105,6 +106,7 @@ export const useAudioController = () => {
    * Function to start playing voice recording to preview it after recording.
    */
   const startVoicePlayer = async () => {
+    if (!Audio) return;
     if (!recording) return;
     // For Native CLI
     if (Audio.startPlayer)
@@ -132,6 +134,7 @@ export const useAudioController = () => {
    * Function to stop playing voice recording.
    */
   const stopVoicePlayer = async () => {
+    if (!Audio) return;
     // For Native CLI
     if (Audio.stopPlayer) {
       await Audio.stopPlayer();

package/src/components/MessageList/MessageList.tsx

@@ -666,7 +666,7 @@ const MessageListWithContext = <
         message={message}
         onThreadSelect={onThreadSelect}
         showUnreadUnderlay={showUnreadUnderlay}
-        style={[messageContainer]}
+        style={[{ paddingHorizontal: screenPadding }, messageContainer]}
         threadList={threadList}
       />
     );

package/src/components/MessageList/__tests__/MessageList.test.js

@@ -13,6 +13,7 @@ import { generateMember } from '../../../mock-builders/generator/member';
 import { generateMessage } from '../../../mock-builders/generator/message';
 import { generateUser } from '../../../mock-builders/generator/user';
 import { getTestClientWithUser } from '../../../mock-builders/mock';
+import { registerNativeHandlers } from '../../../native';
 import { Channel } from '../../Channel/Channel';
 import { Chat } from '../../Chat/Chat';
 import { MessageList } from '../MessageList';
@@ -313,6 +314,16 @@ describe('MessageList', () => {
   });
 
   it('should render the is offline error', async () => {
+    registerNativeHandlers({
+      NetInfo: {
+        addEventListener: () => () => null,
+        fetch: () =>
+          new Promise((resolve) => {
+            resolve(false);
+          }),
+      },
+    });
+
     const user1 = generateUser();
     const mockedChannel = generateChannelResponse({
       members: [generateMember({ user: user1 })],
@@ -340,6 +351,16 @@ describe('MessageList', () => {
       expect(getByTestId('error-notification')).toBeTruthy();
       expect(getByText('Reconnecting...')).toBeTruthy();
     });
+
+    registerNativeHandlers({
+      NetInfo: {
+        addEventListener: () => () => null,
+        fetch: () =>
+          new Promise((resolve) => {
+            resolve(true);
+          }),
+      },
+    });
   });
 
   it('should scroll to a message even if out of the loaded window', async () => {

package/src/components/MessageOverlay/MessageActionList.tsx

@@ -0,0 +1,171 @@
+import React from 'react';
+import { StyleSheet, ViewStyle } from 'react-native';
+import Animated, { interpolate, useAnimatedStyle, useSharedValue } from 'react-native-reanimated';
+
+import { MessageActionListItem as DefaultMessageActionListItem } from './MessageActionListItem';
+
+import {
+  MessageOverlayData,
+  useMessageOverlayContext,
+} from '../../contexts/messageOverlayContext/MessageOverlayContext';
+import type { OverlayProviderProps } from '../../contexts/overlayContext/OverlayContext';
+import { useTheme } from '../../contexts/themeContext/ThemeContext';
+import { useViewport } from '../../hooks/useViewport';
+import type { DefaultStreamChatGenerics } from '../../types/types';
+
+export type MessageActionListPropsWithContext<
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
+> = Pick<
+  OverlayProviderProps<StreamChatGenerics>,
+  | 'MessageActionListItem'
+  | 'error'
+  | 'isMyMessage'
+  | 'isThreadMessage'
+  | 'message'
+  | 'messageReactions'
+> &
+  Pick<MessageOverlayData<StreamChatGenerics>, 'alignment' | 'messageActions'> & {
+    showScreen: Animated.SharedValue<number>;
+  };
+
+const MessageActionListWithContext = <
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
+>(
+  props: MessageActionListPropsWithContext<StreamChatGenerics>,
+) => {
+  const {
+    alignment,
+    error,
+    isMyMessage,
+    isThreadMessage,
+    message,
+    MessageActionListItem = DefaultMessageActionListItem,
+    messageActions,
+    messageReactions,
+    showScreen,
+  } = props;
+
+  const messageActionProps = {
+    error,
+    isMyMessage,
+    isThreadMessage,
+    message,
+    messageReactions,
+  };
+  const { vw } = useViewport();
+
+  const {
+    theme: {
+      colors: { white_snow },
+      overlay: {
+        messageActionsList: { container },
+      },
+    },
+  } = useTheme();
+
+  const height = useSharedValue(0);
+  const width = useSharedValue(0);
+
+  const showScreenStyle = useAnimatedStyle<ViewStyle>(
+    () => ({
+      transform: [
+        {
+          translateY: interpolate(showScreen.value, [0, 1], [-height.value / 2, 0]),
+        },
+        {
+          translateX: interpolate(
+            showScreen.value,
+            [0, 1],
+            [alignment === 'left' ? -width.value / 2 : width.value / 2, 0],
+          ),
+        },
+        {
+          scale: showScreen.value,
+        },
+      ],
+    }),
+    [alignment],
+  );
+
+  return (
+    <Animated.View
+      onLayout={({ nativeEvent: { layout } }) => {
+        width.value = layout.width;
+        height.value = layout.height;
+      }}
+      style={[
+        styles.container,
+        { backgroundColor: white_snow, minWidth: vw(65) },
+        showScreenStyle,
+        container,
+      ]}
+      testID='message-action-list'
+    >
+      {messageActions?.map((messageAction, index) => (
+        <MessageActionListItem
+          key={messageAction.title}
+          {...messageActionProps}
+          {...{ ...messageAction, index, length: messageActions.length }}
+        />
+      ))}
+    </Animated.View>
+  );
+};
+
+const areEqual = <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>(
+  prevProps: MessageActionListPropsWithContext<StreamChatGenerics>,
+  nextProps: MessageActionListPropsWithContext<StreamChatGenerics>,
+) => {
+  const { alignment: prevAlignment, messageActions: prevMessageActions } = prevProps;
+  const { alignment: nextAlignment, messageActions: nextMessageActions } = nextProps;
+
+  const messageActionsEqual = prevMessageActions?.length === nextMessageActions?.length;
+  if (!messageActionsEqual) return false;
+
+  const alignmentEqual = prevAlignment === nextAlignment;
+  if (!alignmentEqual) return false;
+
+  return true;
+};
+
+const MemoizedMessageActionList = React.memo(
+  MessageActionListWithContext,
+  areEqual,
+) as typeof MessageActionListWithContext;
+
+export type MessageActionListProps<
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
+> = Partial<Omit<MessageActionListPropsWithContext<StreamChatGenerics>, 'showScreen'>> &
+  Pick<
+    MessageActionListPropsWithContext<StreamChatGenerics>,
+    'showScreen' | 'message' | 'isMyMessage' | 'error' | 'isThreadMessage' | 'messageReactions'
+  >;
+
+/**
+ * MessageActionList - A high level component which implements all the logic required for MessageActions
+ */
+export const MessageActionList = <
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
+>(
+  props: MessageActionListProps<StreamChatGenerics>,
+) => {
+  const { data } = useMessageOverlayContext<StreamChatGenerics>();
+
+  const { alignment, messageActions } = data || {};
+
+  return <MemoizedMessageActionList {...{ alignment, messageActions }} {...props} />;
+};
+
+const styles = StyleSheet.create({
+  bottomBorder: {
+    borderBottomWidth: 1,
+  },
+  container: {
+    borderRadius: 16,
+    marginTop: 8,
+    overflow: 'hidden',
+  },
+  titleStyle: {
+    paddingLeft: 20,
+  },
+});

package/src/components/MessageOverlay/MessageActionListItem.tsx

@@ -0,0 +1,144 @@
+import React from 'react';
+import { StyleProp, StyleSheet, Text, TextStyle, View } from 'react-native';
+import { TapGestureHandler } from 'react-native-gesture-handler';
+import Animated from 'react-native-reanimated';
+
+import { useMessageActionAnimation } from './hooks/useMessageActionAnimation';
+
+import { useTheme } from '../../contexts/themeContext/ThemeContext';
+import { useViewport } from '../../hooks/useViewport';
+import type { DefaultStreamChatGenerics } from '../../types/types';
+import type { MessageOverlayPropsWithContext } from '../MessageOverlay/MessageOverlay';
+
+export type ActionType =
+  | 'banUser'
+  | 'blockUser'
+  | 'copyMessage'
+  | 'deleteMessage'
+  | 'editMessage'
+  | 'flagMessage'
+  | 'muteUser'
+  | 'pinMessage'
+  | 'selectReaction'
+  | 'reply'
+  | 'retry'
+  | 'quotedReply'
+  | 'threadReply'
+  | 'unpinMessage';
+
+export type MessageActionType = {
+  /**
+   * Callback when user presses the action button.
+   */
+  action: () => void;
+  /**
+   * Type of the action performed.
+   * Eg: 'banUser', 'blockUser', 'copyMessage', 'deleteMessage', 'editMessage', 'flagMessage', 'muteUser', 'pinMessage', 'selectReaction', 'reply', 'retry', 'quotedReply', 'threadReply', 'unpinMessage'
+   */
+  actionType: ActionType | string;
+  /**
+   * Title for action button.
+   */
+  title: string;
+  /**
+   * Element to render as icon for action button.
+   */
+  icon?: React.ReactElement;
+  /**
+   * Styles for underlying Text component of action title.
+   */
+  titleStyle?: StyleProp<TextStyle>;
+};
+
+export type MessageActionListItemProps<
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
+> = MessageActionType &
+  Pick<
+    MessageOverlayPropsWithContext<StreamChatGenerics>,
+    'error' | 'isMyMessage' | 'isThreadMessage' | 'message' | 'messageReactions'
+  > & {
+    index: number;
+    length: number;
+  };
+
+const MessageActionListItemWithContext = <
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
+>(
+  props: MessageActionListItemProps<StreamChatGenerics>,
+) => {
+  const { action, actionType, icon, index, length, title, titleStyle } = props;
+  const { vw } = useViewport();
+
+  const {
+    theme: {
+      colors: { black, border },
+      overlay: { messageActions },
+    },
+  } = useTheme();
+
+  const { animatedStyle, onTap } = useMessageActionAnimation({ action });
+
+  return (
+    <TapGestureHandler onHandlerStateChange={onTap}>
+      <Animated.View
+        style={[
+          styles.row,
+          {
+            minWidth: vw(65),
+          },
+          index !== length - 1 ? { ...styles.bottomBorder, borderBottomColor: border } : {},
+          animatedStyle,
+          messageActions.actionContainer,
+        ]}
+        testID={`${actionType}-list-item`}
+      >
+        <View style={messageActions.icon}>{icon}</View>
+        <Text style={[styles.titleStyle, { color: black }, titleStyle, messageActions.title]}>
+          {title}
+        </Text>
+      </Animated.View>
+    </TapGestureHandler>
+  );
+};
+
+const messageActionIsEqual = <
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
+>(
+  prevProps: MessageActionListItemProps<StreamChatGenerics>,
+  nextProps: MessageActionListItemProps<StreamChatGenerics>,
+) => prevProps.length === nextProps.length;
+
+export const MemoizedMessageActionListItem = React.memo(
+  MessageActionListItemWithContext,
+  messageActionIsEqual,
+) as typeof MessageActionListItemWithContext;
+
+/**
+ * MessageActionListItem - A high-level component that implements all the logic required for a `MessageAction` in a `MessageActionList`
+ */
+export const MessageActionListItem = <
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
+>(
+  props: MessageActionListItemProps<StreamChatGenerics>,
+) => <MemoizedMessageActionListItem {...props} />;
+
+const styles = StyleSheet.create({
+  bottomBorder: {
+    borderBottomWidth: 1,
+  },
+  container: {
+    borderRadius: 16,
+    marginTop: 8,
+    maxWidth: 275,
+  },
+  row: {
+    alignItems: 'center',
+    flexDirection: 'row',
+    justifyContent: 'flex-start',
+    paddingHorizontal: 20,
+    paddingVertical: 10,
+  },
+  titleStyle: {
+    paddingLeft: 20,
+  },
+});