stream-chat-react-native-core 5.39.6 → 5.40.0-beta.1

package/src/components/Message/Message.tsx

@@ -1,4 +1,4 @@
-import React, { useMemo, useState } from 'react';
+import React, { useCallback, useMemo, useState } from 'react';
 import { GestureResponderEvent, Keyboard, StyleProp, View, ViewStyle } from 'react-native';
 
 import type { Attachment, UserResponse } from 'stream-chat';
@@ -54,6 +54,7 @@ import {
   MessageType,
 } from '../MessageList/hooks/useMessageList';
 import type { MessageActionListItemProps } from '../MessageOverlay/MessageActionListItem';
+import { Poll as PollComponent } from '../Poll';
 
 export type TouchableEmitter =
   | 'fileAttachment'
@@ -175,6 +176,7 @@ export type MessagePropsWithContext<
     | 'setQuotedMessageState'
     | 'supportedReactions'
     | 'updateMessage'
+    | 'PollContent'
   > &
   Pick<MessageOverlayContextValue<StreamChatGenerics>, 'setData'> &
   Pick<OverlayContextValue, 'setOverlay'> &
@@ -284,6 +286,7 @@ const MessageWithContext = <
     onThreadSelect,
     openThread,
     OverlayReactionList,
+    PollContent,
     preventPress,
     removeMessage,
     retrySendMessage,
@@ -451,6 +454,8 @@ const MessageWithContext = <
         return !!attachments.files.length;
       case 'gallery':
         return !!attachments.images.length || !!attachments.videos.length;
+      case 'poll':
+        return !!message.poll_id;
       case 'text':
       default:
         return !!message.text;
@@ -561,6 +566,14 @@ const MessageWithContext = <
 
   const { userLanguage } = useTranslationContext();
 
+  // TODO: Can be removed in V6 and from here completely once it becomes baseline.
+  const PollWrapper = useCallback(() => {
+    const poll = message?.poll_id ? client.polls.fromState(message.poll_id) : undefined;
+    return message?.poll_id && poll ? (
+      <PollComponent<StreamChatGenerics> message={message} poll={poll} PollContent={PollContent} />
+    ) : null;
+  }, [PollContent, client, message]);
+
   const showMessageOverlay = async (isMessageActionsVisible = true, error = errorOrFailed) => {
     await dismissKeyboard();
 
@@ -611,6 +624,7 @@ const MessageWithContext = <
       otherAttachments: attachments.other,
       OverlayReactionList,
       ownCapabilities,
+      Poll: PollWrapper,
       supportedReactions,
       threadList,
       userLanguage,

package/src/components/Message/MessageSimple/MessageContent.tsx

@@ -9,6 +9,7 @@ import {
 
 import { MessageTextContainer } from './MessageTextContainer';
 
+import { useChatContext } from '../../../contexts';
 import {
   MessageContextValue,
   useMessageContext,
@@ -26,6 +27,7 @@ import {
 import { useViewport } from '../../../hooks/useViewport';
 import type { DefaultStreamChatGenerics } from '../../../types/types';
 import { MessageStatusTypes } from '../../../utils/utils';
+import { Poll } from '../../Poll/Poll';
 
 const styles = StyleSheet.create({
   containerInner: {
@@ -142,6 +144,8 @@ const MessageContentWithContext = <
     showMessageStatus,
     threadList,
   } = props;
+  const { client } = useChatContext();
+  const { PollContent: PollContentOverride } = useMessagesContext();
 
   const {
     theme: {
@@ -377,6 +381,18 @@ const MessageContentWithContext = <
                 );
               case 'gallery':
                 return <Gallery key={`gallery_${messageContentOrderIndex}`} />;
+              case 'poll': {
+                const pollId = message.poll_id;
+                const poll = pollId && client.polls.fromState(pollId);
+                return pollId && poll ? (
+                  <Poll
+                    key={`poll_${message.poll_id}`}
+                    message={message}
+                    poll={poll}
+                    PollContent={PollContentOverride}
+                  />
+                ) : null;
+              }
               case 'text':
               default:
                 return otherAttachments.length && otherAttachments[0].actions ? null : (

package/src/components/MessageInput/MessageInput.tsx

@@ -1,9 +1,17 @@
 import React, { useEffect, useMemo, useState } from 'react';
-import { NativeSyntheticEvent, StyleSheet, TextInputFocusEventData, View } from 'react-native';
+import {
+  Modal,
+  NativeSyntheticEvent,
+  SafeAreaView,
+  StyleSheet,
+  TextInputFocusEventData,
+  View,
+} from 'react-native';
 
 import {
   Gesture,
   GestureDetector,
+  GestureHandlerRootView,
   PanGestureHandlerEventPayload,
 } from 'react-native-gesture-handler';
 import Animated, {
@@ -51,6 +59,7 @@ import {
 import { isImageMediaLibraryAvailable, triggerHaptic } from '../../native';
 import type { Asset, DefaultStreamChatGenerics } from '../../types/types';
 import { AutoCompleteInput } from '../AutoCompleteInput/AutoCompleteInput';
+import { CreatePoll } from '../Poll/CreatePollContent';
 
 const styles = StyleSheet.create({
   attachmentSeparator: {
@@ -145,6 +154,11 @@ type MessageInputPropsWithContext<
     | 'text'
     | 'uploadNewFile'
     | 'uploadNewImage'
+    | 'openPollCreationDialog'
+    | 'closePollCreationDialog'
+    | 'showPollCreationDialog'
+    | 'sendMessage'
+    | 'CreatePollContent'
   > &
   Pick<MessagesContextValue<StreamChatGenerics>, 'Reply'> &
   Pick<
@@ -179,8 +193,10 @@ const MessageInputWithContext = <
     AudioRecordingPreview,
     AutoCompleteSuggestionList,
     closeAttachmentPicker,
+    closePollCreationDialog,
     cooldownEndsAt,
     CooldownTimer,
+    CreatePollContent,
     editing,
     FileUploadPreview,
     fileUploads,
@@ -206,8 +222,10 @@ const MessageInputWithContext = <
     resetInput,
     SendButton,
     sending,
+    sendMessage,
     sendMessageAsync,
     setShowMoreOptions,
+    showPollCreationDialog,
     ShowThreadMessageInChannelButton,
     StartAudioRecordingButton,
     suggestions,
@@ -876,6 +894,23 @@ const MessageInputWithContext = <
           <AttachmentPickerSelectionBar />
         </View>
       )}
+      {showPollCreationDialog ? (
+        <Modal
+          animationType='slide'
+          onRequestClose={closePollCreationDialog}
+          visible={showPollCreationDialog}
+        >
+          <GestureHandlerRootView style={{ flex: 1 }}>
+            <SafeAreaView style={{ backgroundColor: white, flex: 1 }}>
+              <CreatePoll
+                closePollCreationDialog={closePollCreationDialog}
+                CreatePollContent={CreatePollContent}
+                sendMessage={sendMessage}
+              />
+            </SafeAreaView>
+          </GestureHandlerRootView>
+        </Modal>
+      ) : null}
     </>
   );
 };
@@ -891,6 +926,7 @@ const areEqual = <StreamChatGenerics extends DefaultStreamChatGenerics = Default
     asyncMessagesSlideToCancelDistance: prevAsyncMessagesSlideToCancelDistance,
     asyncUploads: prevAsyncUploads,
     audioRecordingEnabled: prevAsyncMessagesEnabled,
+    closePollCreationDialog: prevClosePollCreationDialog,
     editing: prevEditing,
     fileUploads: prevFileUploads,
     giphyActive: prevGiphyActive,
@@ -898,9 +934,11 @@ const areEqual = <StreamChatGenerics extends DefaultStreamChatGenerics = Default
     isOnline: prevIsOnline,
     isValidMessage: prevIsValidMessage,
     mentionedUsers: prevMentionedUsers,
+    openPollCreationDialog: prevOpenPollCreationDialog,
     quotedMessage: prevQuotedMessage,
     sending: prevSending,
     showMoreOptions: prevShowMoreOptions,
+    showPollCreationDialog: prevShowPollCreationDialog,
     suggestions: prevSuggestions,
     t: prevT,
     thread: prevThread,
@@ -913,6 +951,7 @@ const areEqual = <StreamChatGenerics extends DefaultStreamChatGenerics = Default
     asyncMessagesSlideToCancelDistance: nextAsyncMessagesSlideToCancelDistance,
     asyncUploads: nextAsyncUploads,
     audioRecordingEnabled: nextAsyncMessagesEnabled,
+    closePollCreationDialog: nextClosePollCreationDialog,
     editing: nextEditing,
     fileUploads: nextFileUploads,
     giphyActive: nextGiphyActive,
@@ -920,9 +959,11 @@ const areEqual = <StreamChatGenerics extends DefaultStreamChatGenerics = Default
     isOnline: nextIsOnline,
     isValidMessage: nextIsValidMessage,
     mentionedUsers: nextMentionedUsers,
+    openPollCreationDialog: nextOpenPollCreationDialog,
     quotedMessage: nextQuotedMessage,
     sending: nextSending,
     showMoreOptions: nextShowMoreOptions,
+    showPollCreationDialog: nextShowPollCreationDialog,
     suggestions: nextSuggestions,
     t: nextT,
     thread: nextThread,
@@ -932,6 +973,12 @@ const areEqual = <StreamChatGenerics extends DefaultStreamChatGenerics = Default
   const tEqual = prevT === nextT;
   if (!tEqual) return false;
 
+  const pollCreationInputPropsEqual =
+    prevOpenPollCreationDialog === nextOpenPollCreationDialog &&
+    prevClosePollCreationDialog === nextClosePollCreationDialog &&
+    prevShowPollCreationDialog === nextShowPollCreationDialog;
+  if (!pollCreationInputPropsEqual) return false;
+
   const additionalTextInputPropsEven =
     prevAdditionalTextInputProps === nextAdditionalTextInputProps;
   if (!additionalTextInputPropsEven) return false;
@@ -1059,8 +1106,10 @@ export const MessageInput = <
     clearEditingState,
     clearQuotedMessageState,
     closeAttachmentPicker,
+    closePollCreationDialog,
     cooldownEndsAt,
     CooldownTimer,
+    CreatePollContent,
     editing,
     FileUploadPreview,
     fileUploads,
@@ -1077,17 +1126,20 @@ export const MessageInput = <
     maxNumberOfFiles,
     mentionedUsers,
     numberOfUploads,
+    openPollCreationDialog,
     quotedMessage,
     removeFile,
     removeImage,
     resetInput,
     SendButton,
     sending,
+    sendMessage,
     sendMessageAsync,
     SendMessageDisallowedIndicator,
     setGiphyActive,
     setShowMoreOptions,
     showMoreOptions,
+    showPollCreationDialog,
     ShowThreadMessageInChannelButton,
     StartAudioRecordingButton,
     text,
@@ -1140,8 +1192,10 @@ export const MessageInput = <
         clearEditingState,
         clearQuotedMessageState,
         closeAttachmentPicker,
+        closePollCreationDialog,
         cooldownEndsAt,
         CooldownTimer,
+        CreatePollContent,
         editing,
         FileUploadPreview,
         fileUploads,
@@ -1160,6 +1214,7 @@ export const MessageInput = <
         members,
         mentionedUsers,
         numberOfUploads,
+        openPollCreationDialog,
         quotedMessage,
         removeFile,
         removeImage,
@@ -1167,11 +1222,13 @@ export const MessageInput = <
         resetInput,
         SendButton,
         sending,
+        sendMessage,
         sendMessageAsync,
         SendMessageDisallowedIndicator,
         setGiphyActive,
         setShowMoreOptions,
         showMoreOptions,
+        showPollCreationDialog,
         ShowThreadMessageInChannelButton,
         StartAudioRecordingButton,
         suggestions,

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

@@ -23,6 +23,7 @@ import { FileSelectorIcon } from '../../AttachmentPicker/components/FileSelector
 import { ImageSelectorIcon } from '../../AttachmentPicker/components/ImageSelectorIcon';
 import { Channel } from '../../Channel/Channel';
 import { Chat } from '../../Chat/Chat';
+import { CreatePollIcon } from '../../Poll';
 import { MessageInput } from '../MessageInput';
 
 describe('MessageInput', () => {
@@ -32,6 +33,7 @@ describe('MessageInput', () => {
       AttachmentPickerSelectionBar,
       CameraSelectorIcon,
       closePicker: jest.fn(),
+      CreatePollIcon,
       FileSelectorIcon,
       ImageSelectorIcon,
       openPicker: jest.fn(),

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/MessageOverlay/MessageOverlay.tsx

@@ -25,6 +25,7 @@ import { MessageActionList as DefaultMessageActionList } from './MessageActionLi
 import { OverlayReactionList as OverlayReactionListDefault } from './OverlayReactionList';
 import { OverlayReactionsAvatar as OverlayReactionsAvatarDefault } from './OverlayReactionsAvatar';
 
+import { OwnCapabilitiesProvider } from '../../contexts';
 import { ChatProvider } from '../../contexts/chatContext/ChatContext';
 import { MessageProvider } from '../../contexts/messageContext/MessageContext';
 import {
@@ -135,6 +136,7 @@ const MessageOverlayWithContext = <
     OverlayReactions = DefaultOverlayReactions,
     OverlayReactionsAvatar = OverlayReactionsAvatarDefault,
     ownCapabilities,
+    Poll,
     setOverlay,
     threadList,
     videos,
@@ -441,6 +443,14 @@ const MessageOverlayWithContext = <
                             />
                           )
                         );
+                      case 'poll': {
+                        const pollId = message.poll_id;
+                        return Poll && pollId && ownCapabilities ? (
+                          <OwnCapabilitiesProvider key={`poll_${pollId}`} value={ownCapabilities}>
+                            <Poll />
+                          </OwnCapabilitiesProvider>
+                        ) : null;
+                      }
                       case 'text':
                       default:
                         return otherAttachments?.length && otherAttachments[0].actions ? null : (