Skip to content

Commit 82d2c11

Browse files
arnautov-antonarnautov-anton
committed
Adjust ChannelPreview(UI) guides
1 parent 0274653 commit 82d2c11

File tree

3 files changed

+109
-130
lines changed

3 files changed

+109
-130
lines changed

Diff for: ‎docusaurus/docs/React/components/utility-components/channel-preview-ui.mdx

+76-78
Original file line numberDiff line numberDiff line change
@@ -1,183 +1,181 @@
11
---
22
id: channel_preview_ui
3-
title: ChannelPreview UI
3+
title: Preview (ChannelPreview)
44
---
55

66
import GHComponentLink from '../../_docusaurus-components/GHComponentLink';
77

8-
The ChannelPreview UI component receives props via the [`ChannelPreview`](./channel-preview.mdx) wrapper, and
9-
these props are a combination of the `ChannelPreview` props with additional UI specific items. The wrapper also handles the required logic
10-
while the UI component is responsible for the UI display and the click functionality for channel selection.
8+
The [`ChannelList`](../core-components/channel-list.mdx) property `Preview` is a UI placeholder (think of it as a UI of a `ChannelList` item) which receives props through the `ChannelList` and the [`ChannelPreview`](./channel-preview.mdx) wrapper which extends these props with additional UI-specific items and renders it. Apart from the UI the `Preview` component is also responsible for channel selection (click handler).
119

12-
This UI component is set via the `Preview` prop on `ChannelList`, and if nothing is provided then the default is used, [`ChannelPreviewMessenger`](https://github.com/GetStream/stream-chat-react/blob/master/src/components/ChannelPreview/ChannelPreviewMessenger.tsx).
10+
The `Preview` property defaults to [`ChannelPreviewMessenger`](https://github.com/GetStream/stream-chat-react/blob/master/src/components/ChannelPreview/ChannelPreviewMessenger.tsx) component if no custom component is provided.
1311

1412
## Basic Usage
1513

16-
This UI component is very customizable; below is an example of how to use the `Preview` prop, and for a more involved step-by-step guide, using the many provided props,
17-
see [ChannelPreview Code Example](../../guides/customization/channel-list-preview.mdx#the-preview-prop-component).
14+
To customize the `ChannelList` item UI simply pass your custom `Preview` component to the `ChannelList`. See [The Preview Prop Component](../../guides/customization/channel-list-preview.mdx#the-preview-prop-component) for the extended guide.
1815

1916
```tsx
20-
const YourCustomChannelPreview = (previewProps) => {
21-
// render custom preview info here
22-
return <YourCustomChannelPreview {...previewProps} />;
17+
const CustomChannelPreviewUI = ({ latestMessage, lastMessage }) => {
18+
// "lastMessage" property is for the last
19+
// message that has been interacted with (pinned/edited/deleted)
20+
21+
// to display last message of the channel use "latestMessage" property
22+
return <span>{latestMessage}</span>;
2323
};
2424

25-
<ChannelList Preview={YourCustomChannelPreview} />;
25+
<ChannelList Preview={CustomChannelPreviewUI} />;
2626
```
2727

2828
## Props
2929

3030
### <div class="label required basic">Required</div> channel
3131

32-
This required prop is the channel to be previewed; comes from either the `channelRenderFilterFn` or `usePaginatedChannels` call from
33-
[ChannelList](https://github.com/GetStream/stream-chat-react/blob/master/src/components/ChannelList/ChannelList.tsx) and does not need to be set manually.
32+
This required prop is the channel to be previewed; comes from either the `channelRenderFilterFn` or `usePaginatedChannels` call from [ChannelList](https://github.com/GetStream/stream-chat-react/blob/master/src/components/ChannelList/ChannelList.tsx) and does not need to be set manually.
3433

35-
| Type |
36-
| ------- |
37-
| Channel |
34+
| Type |
35+
| --------- |
36+
| `Channel` |
3837

3938
### active
4039

4140
If the component's channel is the active (selected) channel.
4241

43-
| Type |
44-
| ------- |
45-
| boolean |
42+
| Type |
43+
| --------- |
44+
| `boolean` |
4645

4746
### activeChannel
4847

4948
The currently selected channel object.
5049

51-
| Type |
52-
| ------- |
53-
| Channel |
50+
| Type |
51+
| --------- |
52+
| `Channel` |
5453

5554
### Avatar
5655

5756
The custom UI component to display the avatar for the channel.
5857

59-
| Type | Default |
60-
| --------- | ---------------------------------------------------------- |
61-
| component | <GHComponentLink text='Avatar' path='/Avatar/Avatar.tsx'/> |
58+
| Type | Default |
59+
| ----------- | ---------------------------------------------------------- |
60+
| `component` | <GHComponentLink text='Avatar' path='/Avatar/Avatar.tsx'/> |
6261

6362
### channelUpdateCount
6463

6564
A number that forces the update of the preview component on channel update.
6665

67-
| Type |
68-
| ------ |
69-
| number |
66+
| Type |
67+
| -------- |
68+
| `number` |
7069

7170
### className
7271

7372
Custom class for the channel preview root
7473

75-
| Type |
76-
| ------ |
77-
| string |
74+
| Type |
75+
| -------- |
76+
| `string` |
7877

7978
### displayImage
8079

8180
Image of channel to display.
8281

83-
| Type |
84-
| ------ |
85-
| string |
82+
| Type |
83+
| -------- |
84+
| `string` |
8685

8786
### displayTitle
8887

8988
Title of channel to display.
9089

91-
| Type |
92-
| ------ |
93-
| string |
90+
| Type |
91+
| -------- |
92+
| `string` |
9493

9594
### lastMessage
9695

9796
The last message received in a channel.
9897

99-
| Type |
100-
| ------------- |
101-
| StreamMessage |
98+
| Type |
99+
| --------------- |
100+
| `StreamMessage` |
102101

103102
### latestMessage
104103

105104
Latest message preview to display. Will be either a string or a JSX.Element rendering markdown.
106105

107-
| Type |
108-
| --------------------- |
109-
| string \| JSX.Element |
106+
| Type |
107+
| ----------------------- |
108+
| `string \| JSX.Element` |
110109

111110
### messageDeliveryStatus
112111

113112
Status describing whether own message has been delivered or read by another. If the last message is not an own message, then the status is undefined. The value is calculated from `channel.read` data on mount and updated on every `message.new` resp. `message.read` WS event.
114113

115114
| Type |
116-
|-------------------------|
115+
| ----------------------- |
117116
| `MessageDeliveryStatus` |
118117

119118
Use `MessageDeliveryStatus` enum to determine the current delivery status, for example:
120119

121-
```typescript jsx
122-
import { MessageDeliveryStatus } from 'stream-chat-react';
123-
import {
124-
DoubleCheckMarkIcon,
125-
SingleCheckMarkIcon,
126-
} from '../icons';
120+
```tsx
121+
import type { MessageDeliveryStatus } from 'stream-chat-react';
122+
import { DoubleCheckMarkIcon, SingleCheckMarkIcon } from '../icons';
127123

128124
type MessageDeliveryStatusIndicator = {
129-
messageDeliveryStatus: MessageDeliveryStatus;
130-
}
131-
132-
export const MessageDeliveryStatusIndicator = ({ messageDeliveryStatus }: MessageDeliveryStatusIndicator) => {
133-
// the last message is not an own message in the channel
134-
if (!messageDeliveryStatus) return null;
135-
136-
return (
137-
<div>
138-
{messageDeliveryStatus === MessageDeliveryStatus.DELIVERED && <SingleCheckMarkIcon /> }
139-
{messageDeliveryStatus === MessageDeliveryStatus.READ && <DoubleCheckMarkIcon /> }
140-
</div>
141-
);
125+
messageDeliveryStatus: MessageDeliveryStatus;
126+
};
127+
128+
export const MessageDeliveryStatusIndicator = ({
129+
messageDeliveryStatus,
130+
}: MessageDeliveryStatusIndicator) => {
131+
// the last message is not an own message in the channel
132+
if (!messageDeliveryStatus) return null;
133+
134+
return (
135+
<div>
136+
{messageDeliveryStatus === MessageDeliveryStatus.DELIVERED && <SingleCheckMarkIcon />}
137+
{messageDeliveryStatus === MessageDeliveryStatus.READ && <DoubleCheckMarkIcon />}
138+
</div>
139+
);
142140
};
143141
```
144142

145143
### onSelect
146144

147145
Custom handler invoked when the `ChannelPreview` is clicked. The SDK uses `ChannelPreview` to display items of channel search results. There, behind the scenes, the new active channel is set.
148146

149-
| Type |
150-
| --------------------------------- |
151-
| (event: React.MouseEvent) => void |
147+
| Type |
148+
| ----------------------------------- |
149+
| `(event: React.MouseEvent) => void` |
152150

153151
### Preview
154152

155153
The UI component to use for display.
156154

157-
| Type | Default |
158-
| --------- | ---------------------------------------------------------------------------------------------------- |
159-
| component | <GHComponentLink text='ChannelPreviewMessenger' path='/ChannelPreview/ChannelPreviewMessenger.tsx'/> |
155+
| Type | Default |
156+
| ----------- | ---------------------------------------------------------------------------------------------------- |
157+
| `component` | <GHComponentLink text='ChannelPreviewMessenger' path='/ChannelPreview/ChannelPreviewMessenger.tsx'/> |
160158

161159
### setActiveChannel
162160

163161
The setter function for a selected `channel`.
164162

165-
| Type |
166-
| ------------------------------------ |
167-
| ChatContextValue['setActiveChannel'] |
163+
| Type |
164+
| -------------------------------------- |
165+
| `ChatContextValue['setActiveChannel']` |
168166

169167
### unread
170168

171169
The number of unread Messages.
172170

173-
| Type |
174-
| ------ |
175-
| number |
171+
| Type |
172+
| -------- |
173+
| `number` |
176174

177175
### watchers
178176

179177
The object containing watcher parameters. See the [Pagination documentation](https://getstream.io/chat/docs/react/channel_pagination/?language=js) for a list of available fields for sort.
180178

181-
| Type |
182-
| ----------------------------------- |
183-
| { limit?: number; offset?: number } |
179+
| Type |
180+
| ------------------------------------- |
181+
| `{ limit?: number; offset?: number }` |

Diff for: ‎docusaurus/docs/React/components/utility-components/channel-preview.mdx

+32-51
Original file line numberDiff line numberDiff line change
@@ -5,103 +5,84 @@ title: ChannelPreview
55

66
import GHComponentLink from '../../_docusaurus-components/GHComponentLink';
77

8-
The `ChannelPreview` component is a wrapper component that handles the logic and functionality for a provided (or the default) channel preview and ultimately dictates the display via the component's `Preview` prop.
8+
The `ChannelPreview` component is a _UI wrapper component_ which handles the logic of each of the rendered channels within the `ChannelList`.
99

1010
## Basic Usage
1111

12-
You will not need to use the `ChannelPreview` component directly. If creating a custom preview component, you can take advantage of this component's logic while dictating the design and display by utilizing the `Preview` prop on `ChannelList`.
13-
This prop from the parent component ultimately sets the `Preview` prop in `ChannelPreview`. If this optional prop is not provided the default UI component is
14-
[`ChannelPreviewMessenger`](https://github.com/GetStream/stream-chat-react/blob/master/src/components/ChannelPreview/ChannelPreviewMessenger.tsx).
12+
This component is unchangeable and is used by the [`ChannelList`](../core-components/channel-list.mdx) component by default. You can change how your actual UI looks like through the `Preview` prop - read more about it in the [Channel Preview UI](./channel-preview-ui.mdx).
1513

16-
**Example**
17-
18-
```tsx
19-
const YourCustomChannelPreview = ({ latestMessage, lastMessage }) => {
20-
// "lastMessage" property is for the last
21-
// message that has been interacted with (pinned/edited/deleted)
22-
23-
// to display last message of the channel use "latestMessage"
24-
return <span>{latestMessage}</span>
25-
};
26-
27-
<ChannelList
28-
options={options}
29-
sort={sort}
30-
Preview={YourCustomChannelPreview} />}
31-
/>;
32-
```
14+
If you don't like the internal logic of the `ChannelPreview` component you can create and supply your own `renderChannels` function to the `ChannelList` through which you can render completely custom preview components with your own logic and UI.
3315

3416
## Props
3517

3618
### <div class="label required basic">Required</div> channel
3719

38-
This required prop is the `channel` to be previewed; comes from either the `channelRenderFilterFn` or `usePaginatedChannels` call from
39-
[ChannelList](https://github.com/GetStream/stream-chat-react/blob/master/src/components/ChannelList/ChannelList.tsx) and does not need to be set manually.
20+
This required prop is the `channel` to be previewed; comes from either the `channelRenderFilterFn` or `usePaginatedChannels` call from [ChannelList](https://github.com/GetStream/stream-chat-react/blob/master/src/components/ChannelList/ChannelList.tsx) and does not need to be set manually.
4021

41-
| Type |
42-
| ------- |
43-
| Channel |
22+
| Type |
23+
| --------- |
24+
| `Channel` |
4425

4526
### activeChannel
4627

4728
The currently selected channel object.
4829

49-
| Type |
50-
| ------- |
51-
| Channel |
30+
| Type |
31+
| --------- |
32+
| `Channel` |
5233

5334
### Avatar
5435

55-
The custom UI component to display the avatar for the `channel`.
36+
The custom UI component to display the avatar for the channel.
5637

57-
| Type | Default |
58-
| --------- | ---------------------------------------------------------- |
59-
| component | <GHComponentLink text='Avatar' path='/Avatar/Avatar.tsx'/> |
38+
| Type | Default |
39+
| ----------- | ---------------------------------------------------------- |
40+
| `component` | <GHComponentLink text='Avatar' path='/Avatar/Avatar.tsx'/> |
6041

6142
### channelUpdateCount
6243

6344
A number that forces the update of the preview component on channel update.
6445

65-
| Type |
66-
| ------ |
67-
| number |
46+
| Type |
47+
| -------- |
48+
| `number` |
6849

6950
### className
7051

7152
Custom class for the channel preview root
7253

73-
| Type |
74-
| ------ |
75-
| string |
54+
| Type |
55+
| -------- |
56+
| `string` |
7657

7758
### onSelect
7859

7960
Custom handler invoked when the `ChannelPreview` is clicked. The SDK uses `ChannelPreview` to display items of channel search results. There, behind the scenes, the new active channel is set.
8061

81-
| Type |
82-
| --------------------------------- |
83-
| (event: React.MouseEvent) => void |
62+
| Type |
63+
| ----------------------------------- |
64+
| `(event: React.MouseEvent) => void` |
8465

8566
### Preview
8667

8768
The UI component to use for display.
8869

89-
| Type | Default |
90-
| --------- | ---------------------------------------------------------------------------------------------------- |
91-
| component | <GHComponentLink text='ChannelPreviewMessenger' path='/ChannelPreview/ChannelPreviewMessenger.tsx'/> |
70+
| Type | Default |
71+
| ----------- | ---------------------------------------------------------------------------------------------------- |
72+
| `component` | <GHComponentLink text='ChannelPreviewMessenger' path='/ChannelPreview/ChannelPreviewMessenger.tsx'/> |
9273

9374
### setActiveChannel
9475

9576
The setter function for a selected `channel`.
9677

97-
| Type |
98-
| ------------------------------------ |
99-
| ChatContextValue['setActiveChannel'] |
78+
| Type |
79+
| -------------------------------------- |
80+
| `ChatContextValue['setActiveChannel']` |
10081

10182
### watchers
10283

10384
The object containing watcher parameters. See the [Pagination documentation](https://getstream.io/chat/docs/react/channel_pagination/?language=js) for a list of available fields for sort.
10485

105-
| Type |
106-
| ----------------------------------- |
107-
| { limit?: number; offset?: number } |
86+
| Type |
87+
| ------------------------------------- |
88+
| `{ limit?: number; offset?: number }` |

0 commit comments

Comments
 (0)