+);
+
+const customReactionOptions = [
+ {
+ Component: RickRollReaction,
+ type: 'rick_roll',
+ name: 'Rick Roll',
+ },
+ {
+ Component: () => <>❤️
+ type: 'love',
+ name: "Heart"
+ }
+];
+```
+
+And then you can pass these newly created options to [`Channel`](../components/core-components/channel.mdx) component which will be then propagated to `ReactionSelector` and `ReactionsList`:
+
+```tsx
+-
- {reactionOptions.map((reactionOption: ReactionEmoji) => {
- const latestUser = getLatestUserForReactionType(reactionOption.id);
- const count = reactionCounts && reactionCounts[reactionOption.id];
+ {reactionOptions.map(({ Component, name: reactionName, type: reactionType }) => {
+ const latestUser = getLatestUserForReactionType(reactionType);
+ const count = reactionCounts && reactionCounts[reactionType];
return (
-
- +
- + ) + ); })}
-
{totalReactionCount}
diff --git a/src/components/Reactions/SimpleReactionsList.tsx b/src/components/Reactions/SimpleReactionsList.tsx
index f9d8bb951..b54a19f74 100644
--- a/src/components/Reactions/SimpleReactionsList.tsx
+++ b/src/components/Reactions/SimpleReactionsList.tsx
@@ -1,20 +1,16 @@
-import React, { PropsWithChildren, Suspense, useState } from 'react';
+import React, { PropsWithChildren, useState } from 'react';
import clsx from 'clsx';
+import type { ReactionResponse } from 'stream-chat';
+
import { useChatContext } from '../../context/ChatContext';
-import { useEmojiContext } from '../../context/EmojiContext';
import { useMessageContext } from '../../context/MessageContext';
-
-import { useEnterLeaveHandlers } from '../Tooltip/hooks';
import { useProcessReactions } from './hooks/useProcessReactions';
-
+import { useEnterLeaveHandlers } from '../Tooltip/hooks';
import { PopperTooltip } from '../Tooltip';
-import type { NimbleEmojiProps } from 'emoji-mart';
-import type { ReactionResponse } from 'stream-chat';
-
import type { DefaultStreamChatGenerics } from '../../types/types';
-import type { ReactionEmoji } from '../Channel/emojiData';
+import type { ReactionOptions } from './reactionOptions';
type WithTooltipProps = {
onMouseEnter: React.MouseEventHandler;
@@ -55,8 +51,6 @@ const WithTooltip = ({
export type SimpleReactionsListProps<
StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics
> = {
- /** 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` */
- additionalEmojiProps?: Partial
; /** Function that adds/removes a reaction on a message (overrides the function stored in `MessageContext`) */ handleReaction?: (reactionType: string, event: React.BaseSyntheticEvent) => Promise ; /** An array of the own reaction objects to distinguish own reactions visually */ @@ -64,7 +58,7 @@ export type SimpleReactionsListProps< /** An object that keeps track of the count of each type of reaction on a message */ reaction_counts?: { [key: string]: number }; /** A list of the currently supported reactions on a message */ - reactionOptions?: ReactionEmoji[]; + reactionOptions?: ReactionOptions; /** An array of the reaction objects to display in the list */ reactions?: ReactionResponse []; }; @@ -76,21 +70,18 @@ const UnMemoizedSimpleReactionsList = < ) => { const { handleReaction: propHandleReaction, ...rest } = props; - const { Emoji, emojiConfig } = useEmojiContext('SimpleReactionsList'); const { handleReaction: contextHandleReaction } = useMessageContext ( 'SimpleReactionsList', ); const { - additionalEmojiProps, - emojiData, getEmojiByReactionType, iHaveReactedWithReaction, latestReactions, latestReactionTypes, supportedReactionsArePresent, totalReactionCount, - } = useProcessReactions({ emojiConfig, ...rest }); + } = useProcessReactions(rest); const [tooltipReactionType, setTooltipReactionType] = useState (undefined); const { themeVersion } = useChatContext('SimpleReactionsList'); @@ -118,46 +109,39 @@ const UnMemoizedSimpleReactionsList = < data-testid='simple-reaction-list' onMouseLeave={() => setTooltipReactionType(undefined)} > - {latestReactionTypes.map((reactionType, i) => { - const emojiObject = getEmojiByReactionType(reactionType); + {latestReactionTypes.map((reactionType) => { + const ReactionOption = getEmojiByReactionType(reactionType); const isOwnReaction = iHaveReactedWithReaction(reactionType); - const tooltipVisible = emojiObject && tooltipReactionType === emojiObject?.id; + const tooltipVisible = tooltipReactionType === reactionType; const tooltipContent = getUsersPerReactionType(tooltipReactionType)?.join(', '); - return emojiObject ? ( - - handleReaction(reactionType, event)} - onKeyUp={(event) => handleReaction(reactionType, event)} - > -
- ) : null; +setTooltipReactionType(reactionType)} - onMouseLeave={() => setTooltipReactionType(undefined)} - title={tooltipContent} + return ( + ReactionOption && ( + -- handleReaction(reactionType, event)} + onKeyUp={(event) => handleReaction(reactionType, event)} > - { -
- - } - - {tooltipVisible && themeVersion === '1' && ( -- - - {tooltipContent} -- )} -setTooltipReactionType(reactionType)} + onMouseLeave={() => setTooltipReactionType(undefined)} + title={tooltipContent} + > + ++ + {tooltipVisible && themeVersion === '1' && ( + + + {tooltipContent} ++ )} +
+ )
+ );
})}
{
- handleReaction(reactionType, event)} - onKeyUp={(event) => handleReaction(reactionType, event)} - > -
-
diff --git a/src/components/Reactions/SpriteImage.tsx b/src/components/Reactions/SpriteImage.tsx
new file mode 100644
index 000000000..415824812
--- /dev/null
+++ b/src/components/Reactions/SpriteImage.tsx
@@ -0,0 +1,55 @@
+import React, { useEffect, useState } from 'react';
+
+import { getImageDimensions } from './utils/utils';
+
+export type SpriteImageProps = {
+ columns: number;
+ position: [number, number];
+ rows: number;
+ spriteUrl: string;
+ fallback?: React.ReactNode;
+ height?: number;
+ width?: number;
+};
+
+export const SpriteImage = ({
+ columns,
+ fallback,
+ height,
+ position,
+ rows,
+ spriteUrl,
+ width,
+}: SpriteImageProps) => {
+ const [[spriteWidth, spriteHeight], setSpriteDimensions] = useState([0, 0]);
+
+ useEffect(() => {
+ getImageDimensions(spriteUrl).then(setSpriteDimensions).catch(console.error);
+ }, [spriteUrl]);
+
+ const [x, y] = position;
+ const spriteItemWidth = spriteWidth / columns;
+ const spriteItemHeight = spriteHeight / rows;
+
+ let resizeRatio = 1;
+
+ if (!width && height) resizeRatio = height / spriteItemHeight;
+ if (width && !height) resizeRatio = width / spriteItemWidth;
+
+ if (resizeRatio === Infinity) resizeRatio = 1;
+
+ if (!spriteHeight || !spriteWidth) return <>{fallback};
+
+ return (
+
+ );
+};
diff --git a/src/components/Reactions/StreamEmoji.tsx b/src/components/Reactions/StreamEmoji.tsx
new file mode 100644
index 000000000..04277fd80
--- /dev/null
+++ b/src/components/Reactions/StreamEmoji.tsx
@@ -0,0 +1,35 @@
+import React from 'react';
+
+import { SpriteImage, SpriteImageProps } from './SpriteImage';
+
+import type { Readable } from '../../types/types';
+
+const StreamSpriteEmojiPositions = {
+ angry: [1, 1],
+ haha: [1, 0],
+ like: [0, 0],
+ love: [1, 2],
+ sad: [0, 1],
+ wow: [0, 2],
+};
+
+type StreamEmojiType = keyof typeof StreamSpriteEmojiPositions;
+
+const STREAM_SPRITE_URL = 'https://getstream.imgix.net/images/emoji-sprite.png';
+
+export const StreamEmoji = ({
+ fallback,
+ type,
+}: Readable<{ type: StreamEmojiType } & Pick
+ ); +}; diff --git a/src/components/Reactions/__tests__/ReactionSelector.test.js b/src/components/Reactions/__tests__/ReactionSelector.test.js index 16ae03166..bfc2ed77d 100644 --- a/src/components/Reactions/__tests__/ReactionSelector.test.js +++ b/src/components/Reactions/__tests__/ReactionSelector.test.js @@ -1,26 +1,20 @@ import React from 'react'; -import { fireEvent, render } from '@testing-library/react'; +import { fireEvent, render, waitFor } from '@testing-library/react'; import '@testing-library/jest-dom'; -import EmojiComponentMock from 'emoji-mart/dist-modern/components/emoji/nimble-emoji'; import { toHaveNoViolations } from 'jest-axe'; import { axe } from '../../../../axe-helper'; expect.extend(toHaveNoViolations); import { ReactionSelector } from '../ReactionSelector'; +import { defaultReactionOptions } from '../reactionOptions'; +import * as utils from '../utils/utils'; import { Avatar as AvatarMock } from '../../Avatar'; -import { defaultMinimalEmojis } from '../../Channel/emojiData'; import { ComponentProvider } from '../../../context/ComponentContext'; -import { EmojiProvider } from '../../../context/EmojiContext'; import { MessageProvider } from '../../../context/MessageContext'; -import { - emojiComponentMock, - emojiDataMock, - generateReaction, - generateUser, -} from '../../../mock-builders'; +import { generateReaction, generateUser } from '../../../mock-builders'; jest.mock('emoji-mart/dist-modern/components/emoji/nimble-emoji', () => jest.fn(({ emoji }) => ), @@ -45,18 +39,9 @@ const handleReactionMock = jest.fn(); const renderComponent = (props) => render( - + - - +- - , +const renderComponent = ({ reaction_counts = {}, ...props }) => { + const reactions = Object.entries(reaction_counts).flatMap(([type, count]) => + Array.from({ length: count }, (_, i) => + generateReaction({ type, user: { id: `${USER_ID}-${i}` } }), + ), ); -}; -const expectEmojiToHaveBeenRendered = (id) => { - expect(EmojiComponentMock).toHaveBeenCalledWith( - expect.objectContaining({ - emoji: expect.objectContaining({ id }), - }), - {}, + return render( +- - , -- + , ); }; describe('ReactionsList', () => { afterEach(jest.clearAllMocks); + // disable warnings (unreachable context) + jest.spyOn(console, 'warn').mockImplementation(null); + it('should render the total reaction count', async () => { const { container, getByText } = renderComponent({ reaction_counts: { @@ -71,14 +58,26 @@ describe('ReactionsList', () => { it('should render an emoji for each type of reaction', async () => { const reaction_counts = { - angry: 2, + haha: 2, love: 5, }; - const { container } = renderComponent({ reaction_counts }); + // make sure to render default fallbacks + jest.spyOn(utils, 'getImageDimensions').mockRejectedValue('Error'); + jest.spyOn(console, 'error').mockImplementation(null); + + const { container, getByTestId } = renderComponent({ reaction_counts }); - expect(EmojiComponentMock).toHaveBeenCalledTimes(Object.keys(reaction_counts).length); + const hahaButton = getByTestId('reactions-list-button-haha'); + const loveButton = getByTestId('reactions-list-button-love'); + + expect(hahaButton).toHaveAttribute('title', generateButtonTitle(reaction_counts['haha'])); + expect(hahaButton.lastChild).toHaveTextContent(reaction_counts['haha']); + expect(hahaButton.firstChild).toHaveTextContent('😂'); + + expect(loveButton).toHaveAttribute('title', generateButtonTitle(reaction_counts['love'])); + expect(loveButton.lastChild).toHaveTextContent(reaction_counts['love']); + expect(loveButton.firstChild).toHaveTextContent('❤️'); - Object.keys(reaction_counts).forEach(expectEmojiToHaveBeenRendered); const results = await axe(container); expect(results).toHaveNoViolations(); }); @@ -89,17 +88,24 @@ describe('ReactionsList', () => { cowboy: 2, }; - const { container } = renderComponent({ + const { container, getByTestId } = renderComponent({ reaction_counts, reactionOptions: [ - { emoji: '🍌', id: 'banana' }, - { emoji: '🤠', id: 'cowboy' }, + { Component: () => <>🍌, type: 'banana' }, + { Component: () => <>🤠, type: 'cowboy' }, ], }); - expect(EmojiComponentMock).toHaveBeenCalledTimes(Object.keys(reaction_counts).length); + const bananaButton = getByTestId('reactions-list-button-banana'); + const cowboyButton = getByTestId('reactions-list-button-cowboy'); + + expect(bananaButton).toHaveAttribute('title', generateButtonTitle(reaction_counts['banana'])); + expect(bananaButton.lastChild).toHaveTextContent(reaction_counts['banana']); + expect(bananaButton.firstChild).toHaveTextContent('🍌'); + expect(cowboyButton).toHaveAttribute('title', generateButtonTitle(reaction_counts['cowboy'])); + expect(cowboyButton.lastChild).toHaveTextContent(reaction_counts['cowboy']); + expect(cowboyButton.firstChild).toHaveTextContent('🤠'); - Object.keys(reaction_counts).forEach(expectEmojiToHaveBeenRendered); const results = await axe(container); expect(results).toHaveNoViolations(); }); @@ -110,8 +116,8 @@ describe('ReactionsList', () => { cowboy: 2, }; const reactionOptions = [ - { emoji: '🍌', id: 'banana' }, - { emoji: '🤠', id: 'cowboy' }, + { Component: () => <>🍌, type: 'banana' }, + { Component: () => <>🤠, type: 'cowboy' }, ]; expect( diff --git a/src/components/Reactions/__tests__/SimpleReactionsList.test.js b/src/components/Reactions/__tests__/SimpleReactionsList.test.js index e8ac915e4..db1815539 100644 --- a/src/components/Reactions/__tests__/SimpleReactionsList.test.js +++ b/src/components/Reactions/__tests__/SimpleReactionsList.test.js @@ -1,69 +1,54 @@ import React from 'react'; import { fireEvent, render } from '@testing-library/react'; import '@testing-library/jest-dom'; -import EmojiComponentMock from 'emoji-mart/dist-modern/components/emoji/nimble-emoji'; import { toHaveNoViolations } from 'jest-axe'; import { axe } from '../../../../axe-helper'; expect.extend(toHaveNoViolations); +import * as utils from '../utils/utils'; import { SimpleReactionsList } from '../SimpleReactionsList'; +import { defaultReactionOptions } from '../reactionOptions'; import { ChatProvider } from '../../../context/ChatContext'; -import { EmojiProvider } from '../../../context/EmojiContext'; import { MessageProvider } from '../../../context/MessageContext'; -import { emojiComponentMock, emojiDataMock, generateReaction } from '../../../mock-builders'; +import { generateReaction } from '../../../mock-builders'; +import { ComponentProvider } from '../../../context'; jest.mock('emoji-mart/dist-modern/components/emoji/nimble-emoji', () => jest.fn(({ emoji }) => ), ); const handleReactionMock = jest.fn(); -const loveEmojiTestId = 'emoji-love'; +// const loveEmojiTestId = 'emoji-love'; const renderComponent = ({ reaction_counts = {}, themeVersion = '1', ...props }) => { - const reactions = Object.entries(reaction_counts) - .map(([type, count]) => - Array(count) - .fill() - .map(() => generateReaction({ type })), - ) - .flat(); + const reactions = Object.entries(reaction_counts).flatMap(([type, count]) => + Array(count) + .fill() + .map((_, i) => generateReaction({ type, user: { id: `${USER_ID}-${i}` } })), + ); return { ...render(+ +, + - - + ++ -+ -
+
+
+`;
+
+exports[`SimpleReactionsList v2 should handle custom reaction options 1`] = ``;
+
+exports[`SimpleReactionsList v2 should render an emoji for each type of reaction 1`] = `
+
+
+
+`;
diff --git a/src/components/Reactions/hooks/useProcessReactions.tsx b/src/components/Reactions/hooks/useProcessReactions.tsx
index d253ebba1..bb935a726 100644
--- a/src/components/Reactions/hooks/useProcessReactions.tsx
+++ b/src/components/Reactions/hooks/useProcessReactions.tsx
@@ -1,19 +1,17 @@
import { useCallback, useMemo } from 'react';
-import { getStrippedEmojiData, ReactionEmoji } from '../../Channel/emojiData';
-import type { EmojiContextValue } from '../../../context/EmojiContext';
+
+import { useComponentContext, useMessageContext } from '../../../context';
+
import type { ReactionsListProps } from '../ReactionsList';
-import { useMessageContext } from '../../../context';
import type { DefaultStreamChatGenerics } from '../../../types/types';
type SharedReactionListProps =
- | 'additionalEmojiProps'
| 'own_reactions'
| 'reaction_counts'
| 'reactionOptions'
| 'reactions';
-type UseProcessReactionsParams = Pick