Skip to content

Commit 14bef23

Browse files
arnautov-antonarnautov-anton
committed
fix(emoji-mart): new reactions (#1947)
Refactor and fix the way reactions work, introduce new way of customizing with better DX. Fixes: #1935 Closes: #1637 Closes: #1437 Closes: #2159 Closes: GetStream/stream-chat-react-native#2023 - ditch EmojiMart implementation, use native/sprite-sheet solution BREAKING CHANGE: `reactionOptions` signature has changed, see [release guide](https://github.com/GetStream/stream-chat-react/blob/v11.0.0/docusaurus/docs/React/release-guides/upgrade-to-v11.mdx) for more information
1 parent 2a06b88 commit 14bef23

24 files changed

+774
-402
lines changed

‎docusaurus/docs/React/_docusaurus-components/GHComponentLink.jsx

+10-3
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,14 @@
11
import React from 'react';
22

3-
const GHComponentLink = ({text, path}) => {
4-
return <a target='_blank' href={`https://github.com/GetStream/stream-chat-react/blob/master/src/components${path}`}>{text}</a>
5-
}
3+
const GHComponentLink = ({ text, as: As = React.Fragment, path, branch = 'master' }) => {
4+
return (
5+
<a
6+
target='_blank'
7+
href={`https://github.com/GetStream/stream-chat-react/blob/${branch}/src/components${path}`}
8+
>
9+
<As>{text}</As>
10+
</a>
11+
);
12+
};
613

714
export default GHComponentLink;

‎docusaurus/docs/React/components/message-components/reactions.mdx

+40-47
Original file line numberDiff line numberDiff line change
@@ -6,23 +6,19 @@ title: Reactions
66

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

9-
The Stream Chat API provides built-in support for adding reactions to messages. The component library provides three default
10-
components to enable reaction selection and display:
11-
12-
- [`ReactionSelector`](https://github.com/GetStream/stream-chat-react/blob/master/src/components/Reactions/ReactionSelector.tsx) - allows
13-
the connected user to select a reaction on a message
9+
:::caution
10+
If you're moving from older versions to `11.0.0` then make sure to read ["Reactions 11.0.0"](../../release-guides/reactions-v11.mdx) release guide to help you transition to the new implementation.
11+
:::
1412

15-
- [`ReactionsList`](https://github.com/GetStream/stream-chat-react/blob/master/src/components/Reactions/ReactionsList.tsx) - displays
16-
the reactions added to a message
13+
The Stream Chat API provides built-in support for adding reactions to messages. The component library provides three default components to enable reaction selection and display:
1714

18-
- [`SimpleReactionsList`](https://github.com/GetStream/stream-chat-react/blob/master/src/components/Reactions/SimpleReactionsList.tsx) - displays
19-
a minimal list of the reactions added to a message
15+
- [`ReactionSelector`](https://github.com/GetStream/stream-chat-react/blob/master/src/components/Reactions/ReactionSelector.tsx) - allows the connected user to select a reaction on a message
16+
- [`ReactionsList`](https://github.com/GetStream/stream-chat-react/blob/master/src/components/Reactions/ReactionsList.tsx) - displays the reactions added to a message
17+
- [`SimpleReactionsList`](https://github.com/GetStream/stream-chat-react/blob/master/src/components/Reactions/SimpleReactionsList.tsx) - displays a minimal list of the reactions added to a message
2018

2119
## Basic Usage
2220

23-
By default, the `ReactionSelector` and `ReactionsList` components are included within `MessageSimple`. To render reaction UI within a
24-
custom [Message UI](./message-ui.mdx) component, import both components (or `SimpleReactionsList` for a lightweight view) and render
25-
conditionally.
21+
By default, the `ReactionSelector` and `ReactionsList` components are included within `MessageSimple`. To render reaction UI within a custom [Message UI](./message-ui.mdx) component, import both components (or `SimpleReactionsList` for a lightweight view) and render conditionally.
2622

2723
```jsx
2824
const CustomMessage = () => {
@@ -55,19 +51,14 @@ Be default, the `ReactionSelector` component provides the following reaction opt
5551
- `haha`
5652
- `wow`
5753
- `sad`
58-
- `angry`
54+
- `angry` - removed in `11.0.0`
5955

60-
The `defaultMinimalEmojis` data set that populates the default reaction options can be found in the
61-
[emojiData](https://github.com/GetStream/stream-chat-react/blob/master/src/components/Channel/emojiData.ts) file in the
62-
component library.
56+
The `defaultMinimalEmojis` data set that populates the default reaction options can be found in the <GHComponentLink as="code" text='emojiData' branch="v10.17.0" path='/Channel/emojiData.ts'/> file in the component library.
6357

64-
To override the default selection set, provide your own array of `MinimalEmoji` type objects and pass into the `reactionOptions`
65-
prop on the `ReactionSelector` component. You can also override the default [handleReaction](./components/contexts/message-context.mdx#handlereaction)
66-
function by adding the `handleReaction` prop.
58+
To override the default selection set, provide your own array of `MinimalEmoji` type objects and pass into the `reactionOptions` prop on the `ReactionSelector` component. You can also override the default [`handleReaction`](../contexts/message-context.mdx#handlereaction) function by adding the `handleReaction` prop.
6759

6860
:::caution
69-
If custom `reactionOptions` are supplied to the `ReactionSelector` component, then the same data set needs to be delivered to the
70-
`ReactionsList` component so the display for processed reactions has the same emoji objects.
61+
If custom `reactionOptions` are supplied to the `ReactionSelector` component, then the same data set needs to be delivered to the `ReactionsList` component so the display for processed reactions has the same emoji objects.
7162
:::
7263

7364
```jsx
@@ -105,8 +96,7 @@ const CustomMessage = () => {
10596
</Chat>;
10697
```
10798

108-
To completely override the `ReactionSelector` and `ReactionsList` components in `MessageSimple`, pass your own custom components as props
109-
to the [`Channel`](./components/core-components/channel.mdx).
99+
To completely override the `ReactionSelector` and `ReactionsList` components in `MessageSimple`, pass your own custom components as props to the [`Channel`](../core-components/channel.mdx).
110100

111101
```jsx
112102
const CustomReactionSelector = (props) => {
@@ -131,9 +121,9 @@ const CustomReactionsList = (props) => {
131121

132122
## ReactionSelector Props
133123

134-
### additionalEmojiProps
124+
### additionalEmojiProps (removed in `11.0.0`)
135125

136-
Additional props to be passed to the [NimbleEmoji](https://github.com/missive/emoji-mart/blob/master/src/components/emoji/nimble-emoji.js) component from `emoji-mart`.
126+
Additional props to be passed to the [`NimbleEmoji`](https://github.com/missive/emoji-mart/blob/v3.0.1/src/components/emoji/nimble-emoji.js) component from `emoji-mart`.
137127

138128
| Type |
139129
| ------ |
@@ -159,9 +149,9 @@ If true, shows the user's avatar with the reaction.
159149

160150
Function that adds/removes a reaction on a message (overrides the function stored in `MessageContext`).
161151

162-
| Type | Default |
163-
| ------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------- |
164-
| (reactionType: string, event: React.BaseSyntheticEvent) => Promise<void\> | [MessageContextValue['handleReaction']](./components/contexts/message-context.mdx#handlereaction) |
152+
| Type | Default |
153+
| ------------------------------------------------------------------------- | --------------------------------------------------------------------------------------- |
154+
| (reactionType: string, event: React.BaseSyntheticEvent) => Promise<void\> | [MessageContextValue['handleReaction']](../contexts/message-context.mdx#handlereaction) |
165155

166156
### latest_reactions
167157

@@ -191,9 +181,10 @@ An object that keeps track of the count of each type of reaction on a message (o
191181

192182
A list of the currently supported reactions on a message.
193183

194-
| Type | Default |
195-
| ----- | --------------------------------------------------------------------------- |
196-
| array | <GHComponentLink text='defaultMinimalEmojis' path='/Channel/emojiData.ts'/> |
184+
| Version | Type | Default |
185+
| ------- | ----- | -------------------------------------------------------------------------------------------------------------- |
186+
| >=4.0.0 | array | <GHComponentLink text='defaultMinimalEmojis' branch="v10.17.0" path='/Channel/emojiData.ts'/> |
187+
| ^11.0.0 | array | <GHComponentLink text='defaultReactionOptions' branch="feat/reactions" path='/Reactions/reactionOptions.tsx'/> |
197188

198189
### reverse
199190

@@ -205,9 +196,9 @@ If true, adds a CSS class that reverses the horizontal positioning of the select
205196

206197
## ReactionsList Props
207198

208-
### additionalEmojiProps
199+
### additionalEmojiProps (removed in `11.0.0`)
209200

210-
Additional props to be passed to the [NimbleEmoji](https://github.com/missive/emoji-mart/blob/master/src/components/emoji/nimble-emoji.js) component from `emoji-mart`.
201+
Additional props to be passed to the [`NimbleEmoji`](https://github.com/missive/emoji-mart/blob/v3.0.1/src/components/emoji/nimble-emoji.js) component from `emoji-mart`.
211202

212203
| Type |
213204
| ------ |
@@ -217,9 +208,9 @@ Additional props to be passed to the [NimbleEmoji](https://github.com/missive/em
217208

218209
Custom on click handler for an individual reaction in the list (overrides the function stored in `MessageContext`).
219210

220-
| Type | Default |
221-
| ----------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------- |
222-
| (event: React.BaseSyntheticEvent) => Promise<void\> \| void | [MessageContextValue['onReactionListClick']](./components/contexts/message-context.mdx#onreactionlistclick) |
211+
| Type | Default |
212+
| ----------------------------------------------------------- | ------------------------------------------------------------------------------------------------- |
213+
| (event: React.BaseSyntheticEvent) => Promise<void\> \| void | [MessageContextValue['onReactionListClick']](../contexts/message-context.mdx#onreactionlistclick) |
223214

224215
### own_reactions
225216

@@ -241,9 +232,10 @@ An object that keeps track of the count of each type of reaction on a message (o
241232

242233
A list of the currently supported reactions on a message.
243234

244-
| Type | Default |
245-
| ----- | --------------------------------------------------------------------------- |
246-
| array | <GHComponentLink text='defaultMinimalEmojis' path='/Channel/emojiData.ts'/> |
235+
| Version | Type | Default |
236+
| ------- | ----- | -------------------------------------------------------------------------------------------------------------- |
237+
| >=4.0.0 | array | <GHComponentLink text='defaultMinimalEmojis' branch="v10.17.0" path='/Channel/emojiData.ts'/> |
238+
| ^11.0.0 | array | <GHComponentLink text='defaultReactionOptions' branch="feat/reactions" path='/Reactions/reactionOptions.tsx'/> |
247239

248240
### reactions
249241

@@ -263,9 +255,9 @@ If true, adds a CSS class that reverses the horizontal positioning of the select
263255

264256
## SimpleReactionsList Props
265257

266-
### additionalEmojiProps
258+
### additionalEmojiProps (removed in `11.0.0`)
267259

268-
Additional props to be passed to the [NimbleEmoji](https://github.com/missive/emoji-mart/blob/master/src/components/emoji/nimble-emoji.js) component from `emoji-mart`.
260+
Additional props to be passed to the [`NimbleEmoji`](https://github.com/missive/emoji-mart/blob/v3.0.1/src/components/emoji/nimble-emoji.js) component from `emoji-mart`.
269261

270262
| Type |
271263
| ------ |
@@ -275,9 +267,9 @@ Additional props to be passed to the [NimbleEmoji](https://github.com/missive/em
275267

276268
Function that adds/removes a reaction on a message (overrides the function stored in `MessageContext`).
277269

278-
| Type | Default |
279-
| ------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------- |
280-
| (reactionType: string, event: React.BaseSyntheticEvent) => Promise<void\> | [MessageContextValue['handleReaction']](./components/contexts/message-context.mdx#handlereaction) |
270+
| Type | Default |
271+
| ------------------------------------------------------------------------- | --------------------------------------------------------------------------------------- |
272+
| (reactionType: string, event: React.BaseSyntheticEvent) => Promise<void\> | [MessageContextValue['handleReaction']](../contexts/message-context.mdx#handlereaction) |
281273

282274
### own_reactions
283275

@@ -299,9 +291,10 @@ An object that keeps track of the count of each type of reaction on a message (o
299291

300292
A list of the currently supported reactions on a message.
301293

302-
| Type | Default |
303-
| ----- | --------------------------------------------------------------------------- |
304-
| array | <GHComponentLink text='defaultMinimalEmojis' path='/Channel/emojiData.ts'/> |
294+
| Version | Type | Default |
295+
| ------- | ----- | -------------------------------------------------------------------------------------------------------------- |
296+
| >=4.0.0 | array | <GHComponentLink text='defaultMinimalEmojis' branch="v10.17.0" path='/Channel/emojiData.ts'/> |
297+
| ^11.0.0 | array | <GHComponentLink text='defaultReactionOptions' branch="feat/reactions" path='/Reactions/reactionOptions.tsx'/> |
305298

306299
### reactions
307300

‎docusaurus/docs/React/guides/theming/reactions.mdx

+9-10
Original file line numberDiff line numberDiff line change
@@ -7,15 +7,19 @@ title: Reaction Selector and List
77
import CustomReactionSelector from '../../assets/CustomReactionSelector.png';
88
import CustomReactionsList from '../../assets/CustomReactionsList.png';
99

10+
:::caution
11+
If you're moving from older versions to `11.0.0` then make sure to read ["Reactions 11.0.0"](../../release-guides/reactions-v11.mdx) release guide to help you transition to the new implementation.
12+
:::
13+
1014
In this example, we will demonstrate how to override the library's default reaction set, which can be found stored as the
1115
[`defaultMinimalEmojis`](https://github.com/GetStream/stream-chat-react/blob/master/src/components/Channel/emojiData.ts)
1216
variable. We will replace the default set with up and down arrows, simulating an up/down voting feature.
1317

1418
### Choose Your Reactions
1519

1620
Under the hood, our `ReactionSelector`, `ReactionsList`, and `SimpleReactionsList` components render individual emoji objects
17-
using the [`NimbleEmoji`](https://github.com/missive/emoji-mart/blob/master/src/components/emoji/nimble-emoji.js) component
18-
from [emoji-mart](https://www.npmjs.com/package/emoji-mart). Therefore, the object type of our custom reactions needs to
21+
using the [`NimbleEmoji`](https://github.com/missive/emoji-mart/blob/v3.0.1/src/components/emoji/nimble-emoji.js) component
22+
from [`emoji-mart`](https://www.npmjs.com/package/emoji-mart). Therefore, the object type of our custom reactions needs to
1923
conform to `NimbleEmoji` props.
2024

2125
`NimbleEmoji` accepts an `emoji` prop, which pertains to the object mapping of your custom reaction. The `emoji` prop has
@@ -107,15 +111,12 @@ const customReactions = [
107111
```
108112

109113
:::caution
110-
If custom `reactionOptions` are supplied to the selector component, then the same data set needs to be delivered to the
111-
list component so the display for processed reactions has the same emoji objects.
114+
If custom `reactionOptions` are supplied to the selector component, then the same data set needs to be delivered to the list component so the display for processed reactions has the same emoji objects.
112115
:::
113116

114117
### The Final Code
115118

116-
Putting all the pieces together and building upon the [custom message](./message-ui.mdx#how-it-fits-together)
117-
in the General Customization section, we are left with the following code for our [Message UI](../../components/message-components/message-ui.mdx)
118-
component:
119+
Putting all the pieces together and building upon the [custom message](./message-ui.mdx#how-it-fits-together) in the General Customization section, we are left with the following code for our [Message UI](../../components/message-components/message-ui.mdx) component:
119120

120121
```jsx
121122
import React, { useRef } from 'react';
@@ -186,9 +187,7 @@ export const CustomMessage = () => {
186187
<MessageText />
187188
<MessageStatus />
188189
{message.attachments && <Attachment attachments={message.attachments} />}
189-
{hasReactions && (
190-
<SimpleReactionsList reactionOptions={customReactions} />
191-
)}
190+
{hasReactions && <SimpleReactionsList reactionOptions={customReactions} />}
192191
<MessageRepliesCountButton reply_count={message.reply_count} />
193192
</div>
194193
</div>

0 commit comments

Comments
 (0)