docs: poll documentation and type fixes

isekovanic · isekovanic · commit 02bd3fb05f5a · 2024-10-29T11:20:12.000+01:00
diff --git a/docusaurus/docs/reactnative/common-content/contexts/create-poll-context/close-poll-creation-dialog.mdx b/docusaurus/docs/reactnative/common-content/contexts/create-poll-context/close-poll-creation-dialog.mdx
@@ -0,0 +1,5 @@
+A method that will be used as a callback whenever the default `CreatePoll` component back button is pressed in the header. Unless used, it will have no effect if the default `CreatePollContent` is overriden.
+
+| Type                                 |
+| ------------------------------------ |
+| `() => void` |
diff --git a/docusaurus/docs/reactnative/common-content/contexts/create-poll-context/create-and-send-poll.mdx b/docusaurus/docs/reactnative/common-content/contexts/create-poll-context/create-and-send-poll.mdx
@@ -0,0 +1,5 @@
+A method that will be used as a callback whenever send button is clicked on the `CreatePoll` modal. If a custom UI is used for `CreatePollContent`, it can be used as an out-of-the-box method to create and send a poll to the `MessageList`.
+
+| Type                                 |
+| ------------------------------------ |
+| `(thread, channel) => Promise<void>` |
diff --git a/docusaurus/docs/reactnative/common-content/contexts/create-poll-context/create-poll-content.mdx b/docusaurus/docs/reactnative/common-content/contexts/create-poll-context/create-poll-content.mdx
@@ -0,0 +1,5 @@
+A custom UI component used to render the entire poll creation form. It has access to the [`CreatePollContext`](../../../contexts/create-poll-context.mdx) values by default through the `useCreatePollContext` hook.
+
+| Type          | Default                                                                                                                                                 |
+| ------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| ComponentType | [`CreatePollContent`](https://github.com/GetStream/stream-chat-react-native/blob/main/package/src/components/Poll/CreatePollContent.tsx)    |
diff --git a/docusaurus/docs/reactnative/common-content/contexts/create-poll-context/create-poll-option-height.mdx b/docusaurus/docs/reactnative/common-content/contexts/create-poll-context/create-poll-option-height.mdx
@@ -0,0 +1,5 @@
+A property used to define the height of the poll options in the `CreatePollContent` draggable list. The items can have a constant and equal height only and this should only be used if custom theming implies that the static height of the items changes. Has no effect if a custom UI for `CreatePollContent` is provided.
+
+| Type                                 |
+| ------------------------------------ |
+| number |
diff --git a/docusaurus/docs/reactnative/common-content/contexts/message-input-context/close-poll-creation-dialog.mdx b/docusaurus/docs/reactnative/common-content/contexts/message-input-context/close-poll-creation-dialog.mdx
@@ -0,0 +1,5 @@
+Function called whenever the close button is pressed on the poll creation modal. Has no effect if [`PollCreateContent`](../../../core-components/channel.mdx#createpollcontent) is custom.
+
+| Type     |
+| -------- |
+| function |
diff --git a/docusaurus/docs/reactnative/common-content/contexts/message-input-context/show-poll-creation-dialog.mdx b/docusaurus/docs/reactnative/common-content/contexts/message-input-context/show-poll-creation-dialog.mdx
@@ -0,0 +1,5 @@
+A boolean signifying whether the poll creation dialog is shown or not. Will always be `false` if [`PollCreateContent`](../../../core-components/channel.mdx#createpollcontent) is custom.
+
+| Type     |
+| -------- |
+| boolean |
diff --git a/docusaurus/docs/reactnative/common-content/ui-components/channel/props/has-create-poll.mdx b/docusaurus/docs/reactnative/common-content/ui-components/channel/props/has-create-poll.mdx
@@ -0,0 +1,5 @@
+A boolean value that is responsible for controlling whether the poll creation button is visible or not.
+
+| Type     |
+| -------- |
+| boolean |
diff --git a/docusaurus/docs/reactnative/common-content/ui-components/channel/props/open-poll-creation-dialog.mdx b/docusaurus/docs/reactnative/common-content/ui-components/channel/props/open-poll-creation-dialog.mdx
@@ -0,0 +1,11 @@
+Function called immediately when the poll creation button is clicked in the attachment picker. Can be used to override the default behaviour of the poll creation UI appearing as a Modal.
+
+If overridden, a `payload` is passed containing the `sendMessage` callback from [`MessageInputContext`](../../../../contexts/message-input-context.mdx) is passed, so that [`CreatePoll`](../../../../ui-components/create-poll.mdx)
+
+| Type     |
+| -------- |
+| function |
+
+| Parameter | Description                   |
+| --------- | ----------------------------- |
+| payload   | `{ sendMessage }` |
diff --git a/docusaurus/docs/reactnative/contexts/create-poll-context.mdx b/docusaurus/docs/reactnative/contexts/create-poll-context.mdx
@@ -0,0 +1,51 @@
+---
+id: create-poll-context
+title: CreatePollContext
+---
+
+import ClosePollCreationDialog from '../common-content/contexts/create-poll-context/close-poll-creation-dialog.mdx';
+import CreateAndSendPoll from '../common-content/contexts/create-poll-context/create-and-send-poll.mdx';
+import CreatePollContent from '../common-content/contexts/create-poll-context/create-poll-content.mdx';
+import CreatePollOptionHeight from '../common-content/contexts/create-poll-context/create-poll-option-height.mdx';
+import SendMessage from '../common-content/contexts/message-input-context/send_message.mdx'
+
+The `CreatePollContext` is provided by the [`CreatePoll`](../../ui-components/create-poll) component. If you are not familiar with React Context API, please read about it on [React docs](https://reactjs.org/docs/context.html).
+
+The `CreatePollContext` needs to be used within the [`Channel` component](../../core-components/channel) as it depends on the [`MessageInputContext`](./message-input-context.mdx) which is added by it.
+
+## Basic Usage
+
+The `CreatePollContext` can be consumed by any of the child components of `Channel` as following:
+
+```tsx
+import { useContext } from 'react';
+import { CreatePollContext } from 'stream-chat-react-native';
+
+const value = useContext(CreatePollContext);
+```
+
+Alternatively, you can also use `useCreatePollContext` hook provided by library to consume `CreatePollContext`.
+
+```tsx
+import { useCreatePollContext } from 'stream-chat-react-native';
+
+const value = useCreatePollContext();
+```
+
+## Value
+
+### <div class="label description">_forwarded from [MessageInputContext](../../contexts/message-input-context#sendmessage)_ props</div> sendMessage {#sendmessage}
+
+<SendMessage />
+
+### `closePollCreationDialog`
+
+<ClosePollCreationDialog />
+
+### `createAndSendPoll`
+
+<CreateAndSendPoll />
+
+### `onThreadSelect`
+
+<CreatePollOptionHeight />
diff --git a/docusaurus/docs/reactnative/contexts/message-input-context.mdx b/docusaurus/docs/reactnative/contexts/message-input-context.mdx
@@ -94,6 +94,8 @@ import UploadImage from '../common-content/contexts/message-input-context/upload
 import UpdateMessage from '../common-content/contexts/message-input-context/update_message.mdx';
 import UploadNewFile from '../common-content/contexts/message-input-context/upload_new_file.mdx';
 import UploadNewImage from '../common-content/contexts/message-input-context/upload_new_image.mdx';
+import ClosePollCreationDialog from '../common-content/contexts/message-input-context/close-poll-creation-dialog.mdx'
+import ShowPollCreationDialog from '../common-content/contexts/message-input-context/show-poll-creation-dialog.mdx'
 
 `MessageInputContext` is provided by [`Channel`](../../core-components/channel) component. If you are not familiar with React Context API, please read about it on [React docs](https://reactjs.org/docs/context.html).
 
@@ -490,3 +492,11 @@ const { sendMessage, toggleAttachmentPicker } = useMessageInputContext();
 ### <div class="label description">_forwarded from [Channel](../../core-components/channel#uploadprogressindicator)_ props</div> UploadProgressIndicator {#uploadprogressindicator}
 
 <UploadProgressIndicator />
+
+### `closePollCreationDialog`
+
+<ClosePollCreationDialog />
+
+### `showPollCreationDialog`
+
+<ShowPollCreationDialog />
diff --git a/docusaurus/docs/reactnative/contexts/messages-context.mdx b/docusaurus/docs/reactnative/contexts/messages-context.mdx
@@ -40,7 +40,6 @@ import InitialScrollToFirstUnreadMessage from '../common-content/ui-components/c
 import InlineDateSeparator from '../common-content/ui-components/channel/props/inline_date_separator.mdx';
 import InlineUnreadIndicator from '../common-content/ui-components/channel/props/inline_unread_indicator.mdx';
 import IsAttachmentEqual from '../common-content/ui-components/channel/props/is_attachment_equal.mdx';
-import LegacyImageViewerSwipeBehaviour from '../common-content/ui-components/channel/props/legacy_image_viewer_swipe_behaviour.mdx';
 import MarkdownRules from '../common-content/ui-components/channel/props/markdown_rules.mdx';
 import MessageAvatar from '../common-content/ui-components/channel/props/message-avatar.mdx';
 import MessageBounce from '../common-content/ui-components/channel/props/message-bounce.mdx';
@@ -73,6 +72,8 @@ import TypingIndicator from '../common-content/ui-components/channel/props/typin
 import TypingIndicatorContainer from '../common-content/ui-components/channel/props/typing_indicator_container.mdx';
 import UrlPreview from '../common-content/ui-components/channel/props/url_preview.mdx';
 import VideoThumbnail from '../common-content/ui-components/channel/props/video_thumbnail.mdx';
+import OpenPollCreationDialog from '../common-content/ui-components/channel/props/open-poll-creation-dialog.mdx'
+import HasCreatePoll from '../common-content/ui-components/channel/props/has-create-poll.mdx'
 
 ## Value
 
@@ -260,6 +261,14 @@ Upserts a given message in local channel state. Please note that this function d
 | ------------------- |
 | `(message) => void` |
 
+### <div class="label description">_forwarded from [Channel](../../core-components/channel#openpollcreationdialog)_ props</div> openPollCreationDialog {#openPollCreationDialog}
+
+<OpenPollCreationDialog />
+
+### <div class="label description">_forwarded from [Channel](../../core-components/channel#hascreatepoll)_ props</div> hasCreatePoll {#hascreatepoll}
+
+<HasCreatePoll />
+
 ### <div class="label description">_forwarded from [Channel](../../core-components/channel#attachment)_ props</div> Attachment {#attachment}
 
 <Attachment />
diff --git a/docusaurus/docs/reactnative/contexts/own-capabilities-context.mdx b/docusaurus/docs/reactnative/contexts/own-capabilities-context.mdx
@@ -148,3 +148,27 @@ Ability to upload message attachments.
 | Type    |
 | ------- |
 | boolean |
+
+### `sendPoll`
+
+Ability to send polls as messages.
+
+| Type    |
+| ------- |
+| boolean |
+
+### `queryPollVotes`
+
+Ability to query for the votes of polls.
+
+| Type    |
+| ------- |
+| boolean |
+
+### `castPollVote`
+
+Ability to cast a vote on polls.
+
+| Type    |
+| ------- |
+| boolean |
diff --git a/docusaurus/docs/reactnative/contexts/poll-context.mdx b/docusaurus/docs/reactnative/contexts/poll-context.mdx
@@ -0,0 +1,4 @@
+---
+id: poll-context
+title: PollContext
+---
diff --git a/docusaurus/docs/reactnative/core-components/channel.mdx b/docusaurus/docs/reactnative/core-components/channel.mdx
@@ -144,6 +144,9 @@ import ThreadList from '../common-content/ui-components/channel/props/thread_lis
 import TypingIndicator from '../common-content/ui-components/channel/props/typing_indicator.mdx';
 import TypingIndicatorContainer from '../common-content/ui-components/channel/props/typing_indicator_container.mdx';
 import UrlPreview from '../common-content/ui-components/channel/props/url_preview.mdx';
+import CreatePollContent from '../common-content/contexts/create-poll-context/create-poll-content.mdx'
+import OpenPollCreationDialog from '../common-content/ui-components/channel/props/open-poll-creation-dialog.mdx'
+import HasCreatePoll from '../common-content/ui-components/channel/props/has-create-poll.mdx'
 
 The `Channel` component is the main entry point for many Stream Chat customizations and contains the majority of the content providers and a significant amount of the logic utilized by Stream Chat for React Native.
 Components, custom and out of the box, channel information, and UI integrated chat functions are disseminated by the contexts contained in `Channel`.
@@ -727,6 +730,14 @@ Callback function to set the [ref](https://reactjs.org/docs/refs-and-the-dom.htm
 
 <ThreadList />
 
+### `openPollCreationDialog`
+
+<OpenPollCreationDialog />
+
+### `hasCreatePoll`
+
+<HasCreatePoll />
+
 <!-- ### updateSuggestions -->
 
 ## UI Components Props
@@ -1028,3 +1039,7 @@ Component to render upload progress indicator as an overlay above [ImageUploadPr
 ### UrlPreview
 
 <UrlPreview />
+
+### CreatePollContent
+
+<CreatePollContent />
diff --git a/docusaurus/docs/reactnative/ui-components/create-poll.mdx b/docusaurus/docs/reactnative/ui-components/create-poll.mdx
@@ -0,0 +1,49 @@
+---
+id: create-poll
+title: CreatePoll
+---
+
+import ClosePollCreationDialog from '../common-content/contexts/create-poll-context/close-poll-creation-dialog.mdx';
+import CreatePollContent from '../common-content/contexts/create-poll-context/create-poll-content.mdx';
+import CreatePollOptionHeight from '../common-content/contexts/create-poll-context/create-poll-option-height.mdx';
+import SendMessage from '../common-content/contexts/message-input-context/send_message.mdx'
+
+A component used to render the entirety of the poll creation form. It encapsulates the `CreatePollContent` component within a [`CreatePollContext`](../contexts/create-poll-context.mdx). Needs to be structured inside a [`Channel` component](../core-components/channel).
+
+The default behaviour of this component is it opening in a [React Native Modal](https://reactnative.dev/docs/modal). Integrators are highly encouraged to write their own UI for the dialog with the specific options and flexibility they require.
+
+## General Usage
+
+```tsx
+import { OverlayProvider, Chat, CreatePoll } from 'stream-chat-react-native';
+
+const App = () => {
+  return (
+    <OverlayProvider>
+      <Chat client={client}>
+        <Channel channel={channel}>
+          <CreatePoll sendMessage={sendMessage} {...otherOptionalProps} />
+        </Channel>
+      </Chat>
+    </OverlayProvider>
+  );
+};
+```
+
+## Props
+
+### <div class="label description">_forwarded from [MessageInputContext](../../contexts/message-input-context#sendmessage)_ props</div> sendMessage {#sendmessage}
+
+<SendMessage />
+
+### `closePollCreationDialog`
+
+<ClosePollCreationDialog />
+
+### `onThreadSelect`
+
+<CreatePollOptionHeight />
+
+### `CreatePollContent`
+
+<CreatePollContent />
diff --git a/docusaurus/docs/reactnative/ui-components/poll-answers-list.mdx b/docusaurus/docs/reactnative/ui-components/poll-answers-list.mdx
@@ -0,0 +1,4 @@
+---
+id: poll-answers-list
+title: PollAnswersList
+---
diff --git a/docusaurus/docs/reactnative/ui-components/poll-option-full-results.mdx b/docusaurus/docs/reactnative/ui-components/poll-option-full-results.mdx
@@ -0,0 +1,4 @@
+---
+id: poll-option-full-results
+title: PollOptionFullResults
+---
diff --git a/docusaurus/docs/reactnative/ui-components/poll-results.mdx b/docusaurus/docs/reactnative/ui-components/poll-results.mdx
@@ -0,0 +1,4 @@
+---
+id: poll-results
+title: PollResults
+---
diff --git a/docusaurus/docs/reactnative/ui-components/poll.mdx b/docusaurus/docs/reactnative/ui-components/poll.mdx
@@ -0,0 +1,4 @@
+---
+id: poll
+title: Poll
+---
diff --git a/docusaurus/sidebars-react-native.json b/docusaurus/sidebars-react-native.json
@@ -98,6 +98,9 @@
       {
         "Thread List": ["ui-components/thread-list", "ui-components/thread-list-item"]
       },
+      {
+        "Poll": ["ui-components/create-poll", "ui-components/poll", "ui-components/poll-answers-list", "ui-components/poll-results", "ui-components/poll-option-full-results"]
+      },
       {
         "Contexts": [
           "customization/contexts",
@@ -112,7 +115,9 @@
           "contexts/translation-context",
           "contexts/typing-context",
           "contexts/threads-context",
-          "contexts/thread-list-item-context"
+          "contexts/thread-list-item-context",
+          "contexts/create-poll-context",
+          "contexts/poll-context"
         ]
       }
     ],
diff --git a/package/src/components/Poll/CreatePollContent.tsx b/package/src/components/Poll/CreatePollContent.tsx
@@ -11,6 +11,7 @@ import { CreatePollOptions, CurrentOptionPositionsCache, PollModalHeader } from
 import {
   CreatePollContentContextValue,
   CreatePollContentProvider,
+  InputMessageInputContextValue,
   useChatContext,
   useCreatePollContentContext,
   useTheme,
@@ -236,8 +237,9 @@ export const CreatePoll = ({
   sendMessage,
 }: Pick<
   CreatePollContentContextValue,
-  'createPollOptionHeight' | 'sendMessage' | 'closePollCreationDialog' | 'CreatePollContent'
->) => {
+  'createPollOptionHeight' | 'closePollCreationDialog' | 'sendMessage'
+> &
+  Pick<InputMessageInputContextValue, 'CreatePollContent'>) => {
   const { client } = useChatContext();
 
   const createAndSendPoll = useCallback(
diff --git a/package/src/contexts/pollContext/createPollContentContext.tsx b/package/src/contexts/pollContext/createPollContentContext.tsx
@@ -16,7 +16,6 @@ export type CreatePollContentContextValue = {
    * **Default: ** 71
    */
   closePollCreationDialog?: () => void;
-  CreatePollContent?: React.ComponentType;
   createPollOptionHeight?: number;
 };
 
