chore: add customization option for CreatePollContent

Author: isekovanic

package/src/components/Channel/Channel.tsx

@@ -421,7 +421,7 @@ export type ChannelPropsWithContext<
      * Tells if channel is rendering a thread list
      */
     threadList?: boolean;
-  } & Partial<Pick<InputMessageInputContextValue, 'openPollCreationDialog'>>;
+  } & Partial<Pick<InputMessageInputContextValue, 'openPollCreationDialog' | 'CreatePollContent'>>;
 
 const ChannelWithContext = <
   StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
@@ -463,6 +463,7 @@ const ChannelWithContext = <
     CommandsButton = CommandsButtonDefault,
     compressImageQuality,
     CooldownTimer = CooldownTimerDefault,
+    CreatePollContent,
     DateHeader = DateHeaderDefault,
     deletedMessagesVisibilityType = 'always',
     disableIfFrozenChannel = true,
@@ -503,8 +504,8 @@ const ChannelWithContext = <
     handleReaction,
     handleRetry,
     handleThreadReply,
-    hasCameraPicker = isImagePickerAvailable(),
     // If pickDocument isn't available, default to hiding the file picker
+    hasCameraPicker = isImagePickerAvailable(),
     hasCommands = true,
     hasCreatePoll,
     hasFilePicker = pickDocument !== null,
@@ -2301,6 +2302,7 @@ const ChannelWithContext = <
     CommandsButton,
     compressImageQuality,
     CooldownTimer,
+    CreatePollContent,
     doDocUploadRequest,
     doImageUploadRequest,
     editing,

package/src/components/Channel/hooks/useCreateInputMessageInputContext.ts

@@ -27,6 +27,7 @@ export const useCreateInputMessageInputContext = <
   CommandsButton,
   compressImageQuality,
   CooldownTimer,
+  CreatePollContent,
   doDocUploadRequest,
   doImageUploadRequest,
   editing,
@@ -99,6 +100,7 @@ export const useCreateInputMessageInputContext = <
       CommandsButton,
       compressImageQuality,
       CooldownTimer,
+      CreatePollContent,
       doDocUploadRequest,
       doImageUploadRequest,
       editing,
@@ -146,6 +148,7 @@ export const useCreateInputMessageInputContext = <
       maxMessageLength,
       quotedMessageId,
       openPollCreationDialog,
+      CreatePollContent,
       showPollCreationDialog,
     ],
   );

package/src/components/MessageInput/MessageInput.tsx

@@ -59,7 +59,7 @@ import {
 import { isImageMediaLibraryAvailable, triggerHaptic } from '../../native';
 import type { Asset, DefaultStreamChatGenerics } from '../../types/types';
 import { AutoCompleteInput } from '../AutoCompleteInput/AutoCompleteInput';
-import { CreatePollContent } from '../Poll/CreatePollContent';
+import { CreatePoll } from '../Poll/CreatePollContent';
 
 const styles = StyleSheet.create({
   attachmentSeparator: {
@@ -158,6 +158,7 @@ type MessageInputPropsWithContext<
     | 'closePollCreationDialog'
     | 'showPollCreationDialog'
     | 'sendMessage'
+    | 'CreatePollContent'
   > &
   Pick<MessagesContextValue<StreamChatGenerics>, 'Reply'> &
   Pick<
@@ -195,6 +196,7 @@ const MessageInputWithContext = <
     closePollCreationDialog,
     cooldownEndsAt,
     CooldownTimer,
+    CreatePollContent,
     editing,
     FileUploadPreview,
     fileUploads,
@@ -906,8 +908,9 @@ const MessageInputWithContext = <
         >
           <GestureHandlerRootView style={{ flex: 1 }}>
             <SafeAreaView style={{ backgroundColor: white, flex: 1 }}>
-              <CreatePollContent
+              <CreatePoll
                 closePollCreationDialog={closePollCreationDialog}
+                CreatePollContent={CreatePollContent}
                 sendMessage={sendMessage}
               />
             </SafeAreaView>
@@ -1112,6 +1115,7 @@ export const MessageInput = <
     closePollCreationDialog,
     cooldownEndsAt,
     CooldownTimer,
+    CreatePollContent,
     editing,
     FileUploadPreview,
     fileUploads,
@@ -1197,6 +1201,7 @@ export const MessageInput = <
         closePollCreationDialog,
         cooldownEndsAt,
         CooldownTimer,
+        CreatePollContent,
         editing,
         FileUploadPreview,
         fileUploads,

package/src/components/Poll/CreatePollContent.tsx

@@ -26,7 +26,7 @@ export const isMaxNumberOfVotesValid = (maxNumberOfVotes: string) => {
   );
 };
 
-export const CreatePollContentWithContext = () => {
+export const CreatePollContent = () => {
   const { t } = useTranslationContext();
   const [pollTitle, setPollTitle] = useState('');
   const [pollOptions, setPollOptions] = useState<PollOptionData[]>([{ text: '' }]);
@@ -229,13 +229,14 @@ export const CreatePollContentWithContext = () => {
   );
 };
 
-export const CreatePollContent = ({
+export const CreatePoll = ({
   closePollCreationDialog,
+  CreatePollContent: CreatePollContentOverride,
   createPollOptionHeight,
   sendMessage,
 }: Pick<
   CreatePollContentContextValue,
-  'createPollOptionHeight' | 'sendMessage' | 'closePollCreationDialog'
+  'createPollOptionHeight' | 'sendMessage' | 'closePollCreationDialog' | 'CreatePollContent'
 >) => {
   const { client } = useChatContext();
 
@@ -252,7 +253,7 @@ export const CreatePollContent = ({
     <CreatePollContentProvider
       value={{ closePollCreationDialog, createAndSendPoll, createPollOptionHeight, sendMessage }}
     >
-      <CreatePollContentWithContext />
+      {CreatePollContentOverride ? <CreatePollContentOverride /> : <CreatePollContent />}
     </CreatePollContentProvider>
   );
 };

package/src/components/Poll/Poll.tsx

@@ -16,7 +16,7 @@ import {
 import { usePollState } from './hooks/usePollState';
 
 import {
-  ChannelContextValue,
+  MessagesContextValue,
   PollContextProvider,
   PollContextValue,
   usePollContext,
@@ -28,7 +28,7 @@ import type { DefaultStreamChatGenerics } from '../../types/types';
 export type PollProps<
   StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 > = Pick<PollContextValue<StreamChatGenerics>, 'poll' | 'message' | 'PollHeader' | 'PollButtons'> &
-  Pick<ChannelContextValue<StreamChatGenerics>, 'Poll'>;
+  Pick<MessagesContextValue<StreamChatGenerics>, 'Poll'>;
 
 export const PollButtons = () => (
   <>

package/src/contexts/messageInputContext/MessageInputContext.tsx

@@ -413,6 +413,8 @@ export type InputMessageInputContextValue<
    */
   compressImageQuality?: number;
 
+  CreatePollContent?: React.ComponentType;
+
   /**
    * Override file upload request
    *
@@ -447,7 +449,6 @@ export type InputMessageInputContextValue<
    * It is defined with message type if the editing state is true, else its undefined.
    */
   editing?: MessageType<StreamChatGenerics>;
-
   /**
    * Prop to override the default emoji search index in auto complete suggestion list.
    */
@@ -485,8 +486,8 @@ export type InputMessageInputContextValue<
    */
   InputButtons?: React.ComponentType<InputButtonsProps<StreamChatGenerics>>;
   maxMessageLength?: number;
-  mentionAllAppUsersEnabled?: boolean;
   /** Object containing filters/sort/options overrides for an @mention user query */
+  mentionAllAppUsersEnabled?: boolean;
   mentionAllAppUsersQuery?: MentionAllAppUsersQuery<StreamChatGenerics>;
   /**
    * Callback that is called when the text input's text changes. Changed text is passed as a single string argument to the callback handler.

package/src/contexts/messageInputContext/hooks/useCreateMessageInputContext.ts

@@ -32,6 +32,7 @@ export const useCreateMessageInputContext = <
   compressImageQuality,
   cooldownEndsAt,
   CooldownTimer,
+  CreatePollContent,
   doDocUploadRequest,
   doImageUploadRequest,
   editing,
@@ -157,6 +158,7 @@ export const useCreateMessageInputContext = <
       compressImageQuality,
       cooldownEndsAt,
       CooldownTimer,
+      CreatePollContent,
       doDocUploadRequest,
       doImageUploadRequest,
       editing,

package/src/contexts/pollContext/createPollContentContext.tsx

@@ -16,6 +16,7 @@ export type CreatePollContentContextValue = {
    * **Default: ** 71
    */
   closePollCreationDialog?: () => void;
+  CreatePollContent?: React.ComponentType;
   createPollOptionHeight?: number;
 };
 

package/src/contexts/pollContext/pollContext.tsx

@@ -4,7 +4,7 @@ import { Poll } from 'stream-chat';
 
 import { MessageType } from '../../components';
 import type { DefaultStreamChatGenerics } from '../../types/types';
-import { ChannelContextValue } from '../channelContext/ChannelContext';
+import { MessagesContextValue } from '../messagesContext/MessagesContext';
 import { DEFAULT_BASE_CONTEXT_VALUE } from '../utils/defaultBaseContextValue';
 
 import { isTestEnvironment } from '../utils/isTestEnvironment';
@@ -14,7 +14,7 @@ export type PollContextValue<
 > = {
   message: MessageType<StreamChatGenerics>;
   poll: Poll<StreamChatGenerics>;
-} & Pick<ChannelContextValue, 'PollButtons' | 'PollHeader'>;
+} & Partial<Pick<MessagesContextValue, 'PollButtons' | 'PollHeader'>>;
 
 export const PollContext = React.createContext(DEFAULT_BASE_CONTEXT_VALUE as PollContextValue);