Skip to content

Commit a024f22

Browse files
isekovanicisekovanic
committed
docs: extend docs with more examples and specifications
1 parent 70cb992 commit a024f22

File tree

7 files changed

+211
-6
lines changed

7 files changed

+211
-6
lines changed

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@ The default behaviour of this component is it opening in a [React Native Modal](
1515
## General Usage
1616

1717
```tsx
18-
import { OverlayProvider, Chat, CreatePoll } from 'stream-chat-react-native';
18+
import { OverlayProvider, Chat, Channel, CreatePoll } from 'stream-chat-react-native';
1919

2020
const App = () => {
2121
return (

‎docusaurus/docs/reactnative/ui-components/poll-all-options.mdx‎

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,24 @@ A component used to render a list of all of the options that a `Poll` has. Votin
1010

1111
It will render its default `PollAllOptionsContent`, which can be overridden for custom UI. Its children have access to the entire `poll` state through the `usePollState` hook.
1212

13+
## General Usage
14+
15+
```tsx
16+
import { OverlayProvider, Chat, Channel, PollAllOptions } from 'stream-chat-react-native';
17+
18+
const App = () => {
19+
return (
20+
<OverlayProvider>
21+
<Chat client={client}>
22+
<Channel channel={channel}>
23+
<PollAllOptions message={message} poll={poll} {...otherOptionalProps} />
24+
</Channel>
25+
</Chat>
26+
</OverlayProvider>
27+
);
28+
};
29+
```
30+
1331
## Props
1432

1533
### <div class="label description">_forwarded from [MessageContext](../../contexts/message-context#message)_ props</div> message {#message}
@@ -44,3 +62,27 @@ The component has full access to the entire `Poll` reactive state through the `u
4462
| ------------- | ---------------------------------------------- |
4563
| ComponentType | [`PollAllOptionsContent`](https://github.com/GetStream/stream-chat-react-native/blob/main/package/src/components/Poll/PollOption.tsx) |
4664

65+
#### Usage
66+
67+
```tsx
68+
import { Text } from 'react-native';
69+
import { OverlayProvider, Chat, Channel, PollAllOptions, usePollState } from 'stream-chat-react-native';
70+
71+
const MyPollAllOptionsContent = () => {
72+
const { options } = usePollState();
73+
return options.map(option => <Text>{option.id}</Text>)
74+
}
75+
76+
const App = () => {
77+
return (
78+
<OverlayProvider>
79+
<Chat client={client}>
80+
<Channel channel={channel}>
81+
<PollAllOptions message={message} poll={poll} PollAllOptionsContent={MyPollAllOptionsContent} />
82+
</Channel>
83+
</Chat>
84+
</OverlayProvider>
85+
);
86+
};
87+
```
88+

‎docusaurus/docs/reactnative/ui-components/poll-answers-list.mdx‎

Lines changed: 53 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,24 @@ It will render its default `PollAnswersListContent`, which can be overridden for
1212

1313
To access the paginated list of answers, the `usePollAnswersPagination` hook can be used.
1414

15+
## General Usage
16+
17+
```tsx
18+
import { OverlayProvider, Chat, Channel, PollAnswersList } from 'stream-chat-react-native';
19+
20+
const App = () => {
21+
return (
22+
<OverlayProvider>
23+
<Chat client={client}>
24+
<Channel channel={channel}>
25+
<PollAnswersList message={message} poll={poll} {...otherOptionalProps} />
26+
</Channel>
27+
</Chat>
28+
</OverlayProvider>
29+
);
30+
};
31+
```
32+
1533
## Props
1634

1735
### <div class="label description">_forwarded from [MessageContext](../../contexts/message-context#message)_ props</div> message {#message}
@@ -46,3 +64,38 @@ The component has full access to the entire `Poll` reactive state through the `u
4664
| ------------- | ---------------------------------------------- |
4765
| ComponentType | [`PollAnswersListContent`](https://github.com/GetStream/stream-chat-react-native/blob/main/package/src/components/Poll/PollAnswersList.tsx) |
4866

67+
#### Usage
68+
69+
```tsx
70+
import { Text, FlatList } from 'react-native';
71+
import { OverlayProvider, Chat, Channel, PollAnswersList, usePollAnswersPagination, usePollState } from 'stream-chat-react-native';
72+
73+
// will only display the first page of answers without loading more
74+
const MyPollAnswersListContent = () => {
75+
const { name } = usePollState();
76+
const { pollAnswers } = usePollAnswersPagination();
77+
return (
78+
<FlatList
79+
ListHeaderComponent={() => <Text>{name}</Text>}
80+
data={pollAnswers}
81+
renderItem={({ item }) => <Text>{item.answer_text}</Text>}
82+
/>
83+
);
84+
};
85+
86+
const App = () => {
87+
return (
88+
<OverlayProvider>
89+
<Chat client={client}>
90+
<Channel channel={channel}>
91+
<PollAnswersList
92+
message={message}
93+
poll={poll}
94+
PollAnswersListContent={MyPollAnswersListContent}
95+
/>
96+
</Channel>
97+
</Chat>
98+
</OverlayProvider>
99+
);
100+
};
101+
```

‎docusaurus/docs/reactnative/ui-components/poll-option-full-results.mdx‎

Lines changed: 54 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,24 @@ It will render its default `PollOptionFullResultsContent`, which can be overridd
1212

1313
To access the paginated list of votes, the `usePollOptionVotesPagination` hook can be used.
1414

15+
## General Usage
16+
17+
```tsx
18+
import { OverlayProvider, Chat, Channel, PollOptionFullResults } from 'stream-chat-react-native';
19+
20+
const App = () => {
21+
return (
22+
<OverlayProvider>
23+
<Chat client={client}>
24+
<Channel channel={channel}>
25+
<PollOptionFullResults message={message} poll={poll} {...otherOptionalProps} />
26+
</Channel>
27+
</Chat>
28+
</OverlayProvider>
29+
);
30+
};
31+
```
32+
1533
## Props
1634

1735
### <div class="label description">_forwarded from [MessageContext](../../contexts/message-context#message)_ props</div> message {#message}
@@ -54,3 +72,39 @@ The component has full access to the entire `Poll` reactive state through the `u
5472
| ------------- | ---------------------------------------------- |
5573
| ComponentType | [`PollOptionFullResultsContent`](https://github.com/GetStream/stream-chat-react-native/blob/main/package/src/components/Poll/PollOptionFullResults.tsx) |
5674

75+
#### Usage
76+
77+
```tsx
78+
import { Text, FlatList } from 'react-native';
79+
import { OverlayProvider, Chat, Channel, PollOptionFullResults, usePollOptionVotesPagination, usePollState } from 'stream-chat-react-native';
80+
81+
// will only display the first page of votes without loading more
82+
const MyPollOptionFullResultsContent = ({ option }) => {
83+
const { name } = usePollState();
84+
const { votes } = usePollOptionVotesPagination({ option });
85+
return (
86+
<FlatList
87+
ListHeaderComponent={() => <Text>{name}</Text>}
88+
data={votes}
89+
renderItem={({ item }) => <Text>{item.id}</Text>}
90+
/>
91+
);
92+
};
93+
94+
const App = () => {
95+
return (
96+
<OverlayProvider>
97+
<Chat client={client}>
98+
<Channel channel={channel}>
99+
<PollOptionFullResults
100+
message={message}
101+
poll={poll}
102+
option={option}
103+
PollOptionFullResultsContent={MyPollOptionFullResultsContent}
104+
/>
105+
</Channel>
106+
</Chat>
107+
</OverlayProvider>
108+
);
109+
};
110+
```

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

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,24 @@ A component used to render a list of all of the votes per option that a `Poll` h
1010

1111
It will render its default `PollResultsContent`, which can be overridden for custom UI. Its children have access to the entire `poll` state through the `usePollState` hook.
1212

13+
## General Usage
14+
15+
```tsx
16+
import { OverlayProvider, Chat, Channel, PollResults } from 'stream-chat-react-native';
17+
18+
const App = () => {
19+
return (
20+
<OverlayProvider>
21+
<Chat client={client}>
22+
<Channel channel={channel}>
23+
<PollResults message={message} poll={poll} {...otherOptionalProps} />
24+
</Channel>
25+
</Chat>
26+
</OverlayProvider>
27+
);
28+
};
29+
```
30+
1331
## Props
1432

1533
### <div class="label description">_forwarded from [MessageContext](../../contexts/message-context#message)_ props</div> message {#message}
@@ -44,3 +62,26 @@ The component has full access to the entire `Poll` reactive state through the `u
4462
| ------------- | ---------------------------------------------- |
4563
| ComponentType | [`PollResultsContent`](https://github.com/GetStream/stream-chat-react-native/blob/main/package/src/components/Poll/PollResults.tsx) |
4664

65+
#### Usage
66+
67+
```tsx
68+
import { Text } from 'react-native';
69+
import { OverlayProvider, Chat, Channel, PollResults, usePollState } from 'stream-chat-react-native';
70+
71+
const MyPollResultsContent = () => {
72+
const { options } = usePollState();
73+
return options.map(option => <Text>{option.id}</Text>)
74+
}
75+
76+
const App = () => {
77+
return (
78+
<OverlayProvider>
79+
<Chat client={client}>
80+
<Channel channel={channel}>
81+
<PollResults message={message} poll={poll} PollResultsContent={MyPollResultsContent} />
82+
</Channel>
83+
</Chat>
84+
</OverlayProvider>
85+
);
86+
};
87+
```

‎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-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"]
103103
},
104104
{
105105
"Contexts": [

‎package/src/components/Poll/components/Button.tsx‎

Lines changed: 19 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -34,6 +34,21 @@ export type PollButtonProps<
3434
}) => void;
3535
};
3636

37+
export type ShowAllVotesButtonProps<
38+
StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
39+
> = {
40+
option: PollOption<StreamChatGenerics>;
41+
onPress?: ({
42+
message,
43+
option,
44+
poll,
45+
}: {
46+
message: MessageType<StreamChatGenerics>;
47+
option: PollOption<StreamChatGenerics>;
48+
poll: Poll<StreamChatGenerics>;
49+
}) => void;
50+
};
51+
3752
export type PollVoteButtonProps = {
3853
option: PollOption;
3954
} & Pick<PollButtonProps, 'onPress'>;
@@ -380,7 +395,7 @@ export const VoteButton = ({ onPress, option }: PollVoteButtonProps) => {
380395
) : null;
381396
};
382397

383-
export const ShowAllVotesButton = (props: PollButtonProps & { option: PollOption }) => {
398+
export const ShowAllVotesButton = (props: ShowAllVotesButtonProps) => {
384399
const { t } = useTranslationContext();
385400
const { message, poll } = usePollContext();
386401
const { vote_counts_by_option } = usePollState();
@@ -390,12 +405,12 @@ export const ShowAllVotesButton = (props: PollButtonProps & { option: PollOption
390405

391406
const onPressHandler = useCallback(() => {
392407
if (onPress) {
393-
onPress({ message, poll });
408+
onPress({ message, option, poll });
394409
return;
395410
}
396411

397412
setShowAllVotes(true);
398-
}, [message, onPress, poll]);
413+
}, [message, onPress, option, poll]);
399414

400415
const {
401416
theme: {
@@ -407,7 +422,7 @@ export const ShowAllVotesButton = (props: PollButtonProps & { option: PollOption
407422
<>
408423
{ownCapabilities.queryPollVotes &&
409424
vote_counts_by_option &&
410-
vote_counts_by_option?.[option.id] > 5 ? (
425+
vote_counts_by_option?.[option.id] > 0 ? (
411426
<GenericPollButton onPress={onPressHandler} title={t<string>('Show All')} />
412427
) : null}
413428
{showAllVotes ? (

0 commit comments

Comments
 (0)