Skip to content

Commit e564c8d

Browse files
isekovanicisekovanic
committed
docs: add documentation for all of the poll buttons
1 parent a024f22 commit e564c8d

File tree

2 files changed

+266
-1
lines changed

2 files changed

+266
-1
lines changed

‎docusaurus/docs/reactnative/ui-components/poll-buttons.mdx‎

Lines changed: 265 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,265 @@
1+
---
2+
id: poll-buttons
3+
title: Poll Buttons
4+
---
5+
6+
For the purposes of managing the `Poll` UI more easily, we expose various button components that have an overridable `onPress` property in case the default behaviour needs to be changed.
7+
8+
The `onPress` property should be typically used to navigate to the various `Poll` screens using a popular navigation library rather than relying on the default [React Native Modal](https://reactnative.dev/docs/modal) implementation. Integrators are encouraged to handle navigation to these screens like this rather than relying on the defaults.
9+
10+
In order to be able to render the screens, all of the required props will be passed to the `onPress` method.
11+
12+
Conversely, if one wishes to use the default button behaviour they may render them without any props.
13+
14+
All of the buttons need to be structured inside a [`Channel` component](../core-components/channel).
15+
16+
## `GenericPollButton`
17+
18+
A generic button component that has the default UI encapsulated within it.
19+
20+
### Props
21+
22+
#### `title` *
23+
24+
The text that is going to be rendered as the button's content.
25+
26+
| Type |
27+
| ------ |
28+
| string |
29+
30+
#### `onPress` *
31+
32+
A press handler that will be invoked whenever the button is pressed.
33+
34+
| Type |
35+
| ------ |
36+
| `() => void` |
37+
38+
### Example usage
39+
40+
```tsx
41+
import { GenericPollButton } from 'stream-chat-react-native';
42+
43+
const button = () => <GenericPollButton title="Button title" onPress={() => console.log('I got pressed !')}/>
44+
```
45+
46+
## `ViewResultsButton`
47+
48+
A button responsible for opening the `PollResults` modal.
49+
50+
### Props
51+
52+
#### `onPress`
53+
54+
A press handler that will be invoked whenever the button is pressed.
55+
56+
| Type |
57+
| ------ |
58+
| `({ message, poll }) => void` |
59+
60+
### Example usage
61+
62+
```tsx
63+
import { ViewResultsButton } from 'stream-chat-react-native';
64+
65+
const button = () => (
66+
<ViewResultsButton
67+
onPress={({ message, poll }) => console.log(`Poll ID: ${poll.id}; Message ID: ${message.id}`)}
68+
/>
69+
);
70+
```
71+
72+
## `EndVoteButton`
73+
74+
A button responsible for closing voting on the `Poll`.
75+
76+
### Example usage
77+
78+
```tsx
79+
import { EndVoteButton } from 'stream-chat-react-native';
80+
81+
const button = () => (
82+
<EndVoteButton />
83+
);
84+
```
85+
86+
## `AddCommentButton`
87+
88+
A button responsible for opening the `Poll` input dialog used to add a new comment to it.
89+
90+
### Props
91+
92+
#### `onPress`
93+
94+
A press handler that will be invoked whenever the button is pressed.
95+
96+
| Type |
97+
| ------ |
98+
| `({ message, poll }) => void` |
99+
100+
### Example usage
101+
102+
```tsx
103+
import { AddCommentButton } from 'stream-chat-react-native';
104+
105+
const button = () => (
106+
<AddCommentButton
107+
onPress={({ message, poll }) => console.log(`Poll ID: ${poll.id}; Message ID: ${message.id}`)}
108+
/>
109+
);
110+
```
111+
112+
## `ShowAllCommentsButton`
113+
114+
A button responsible for opening the `PollAnswersList` modal.
115+
116+
### Props
117+
118+
#### `onPress`
119+
120+
A press handler that will be invoked whenever the button is pressed.
121+
122+
| Type |
123+
| ------ |
124+
| `({ message, poll }) => void` |
125+
126+
### Example usage
127+
128+
```tsx
129+
import { ShowAllCommentsButton } from 'stream-chat-react-native';
130+
131+
const button = () => (
132+
<ShowAllCommentsButton
133+
onPress={({ message, poll }) => console.log(`Poll ID: ${poll.id}; Message ID: ${message.id}`)}
134+
/>
135+
);
136+
```
137+
138+
## `AnswerListAddCommentButton`
139+
140+
A button responsible for opening the `Poll` input dialog used to add a new comment to it, from within `PollAnswersList`.
141+
142+
It has the same props and usage as [`AddCommentButton`](#addcommentbutton).
143+
144+
## `SuggestOptionButton`
145+
146+
A button responsible for opening the `Poll` input dialog used to suggest new options to the it.
147+
148+
### Props
149+
150+
#### `onPress`
151+
152+
A press handler that will be invoked whenever the button is pressed.
153+
154+
| Type |
155+
| ------ |
156+
| `({ message, poll }) => void` |
157+
158+
### Example usage
159+
160+
```tsx
161+
import { SuggestOptionButton } from 'stream-chat-react-native';
162+
163+
const button = () => (
164+
<SuggestOptionButton
165+
onPress={({ message, poll }) => console.log(`Poll ID: ${poll.id}; Message ID: ${message.id}`)}
166+
/>
167+
);
168+
```
169+
170+
## `ShowAllOptionsButton`
171+
172+
A button responsible for opening the `PollAllOptions` modal.
173+
174+
### Props
175+
176+
#### `onPress`
177+
178+
A press handler that will be invoked whenever the button is pressed.
179+
180+
| Type |
181+
| ------ |
182+
| `({ message, poll }) => void` |
183+
184+
### Example usage
185+
186+
```tsx
187+
import { ShowAllOptionsButton } from 'stream-chat-react-native';
188+
189+
const button = () => (
190+
<ShowAllOptionsButton
191+
onPress={({ message, poll }) => console.log(`Poll ID: ${poll.id}; Message ID: ${message.id}`)}
192+
/>
193+
);
194+
```
195+
196+
## `VoteButton`
197+
198+
A button responsible for voting on a specific option within a `Poll`.
199+
200+
### Props
201+
202+
#### `option` *
203+
204+
The `poll` option that we want to vote on.
205+
206+
| Type |
207+
| ------ |
208+
| object |
209+
210+
#### `onPress`
211+
212+
A press handler that will be invoked whenever the button is pressed.
213+
214+
| Type |
215+
| ------ |
216+
| `({ message, poll }) => void` |
217+
218+
### Example usage
219+
220+
```tsx
221+
import { VoteButton } from 'stream-chat-react-native';
222+
223+
const button = () => (
224+
<VoteButton
225+
option={option}
226+
onPress={({ message, poll }) => console.log(`Poll ID: ${poll.id}; Message ID: ${message.id}`)}
227+
/>
228+
);
229+
```
230+
231+
## `ShowAllVotesButton`
232+
233+
A button responsible for opening the `PollOptionFullResults` modal.
234+
235+
### Props
236+
237+
#### `option` *
238+
239+
The `poll` option that we want to vote on.
240+
241+
| Type |
242+
| ------ |
243+
| object |
244+
245+
#### `onPress`
246+
247+
A press handler that will be invoked whenever the button is pressed.
248+
249+
| Type |
250+
| ------ |
251+
| `({ message, option, poll }) => void` |
252+
253+
### Example usage
254+
255+
```tsx
256+
import { ShowAllVotesButton } from 'stream-chat-react-native';
257+
258+
const button = () => (
259+
<ShowAllVotesButton
260+
option={option}
261+
onPress={({ message, option, poll }) => console.log(`Poll ID: ${poll.id}; Message ID: ${message.id}; Option ID: ${option.id}`)}
262+
/>
263+
);
264+
```
265+

‎docusaurus/sidebars-react-native.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -99,7 +99,7 @@
9999
"Thread List": ["ui-components/thread-list", "ui-components/thread-list-item"]
100100
},
101101
{
102-
"Poll": ["ui-components/create-poll", "ui-components/poll", "ui-components/poll-all-options", "ui-components/poll-answers-list", "ui-components/poll-results", "ui-components/poll-option-full-results"]
102+
"Poll": ["ui-components/create-poll", "ui-components/poll", "ui-components/poll-all-options", "ui-components/poll-answers-list", "ui-components/poll-results", "ui-components/poll-option-full-results", "ui-components/poll-buttons"]
103103
},
104104
{
105105
"Contexts": [

0 commit comments

Comments
 (0)