stream-chat-react
Version:
React components to create chat conversations or livestream style chat
40 lines (39 loc) • 3.88 kB
JavaScript
import React, { useMemo } from 'react';
import clsx from 'clsx';
import { Modal as DefaultModal } from '../Modal';
import { useFetchReactions } from './hooks/useFetchReactions';
import { LoadingIndicator } from '../Loading';
import { Avatar } from '../Avatar';
import { useComponentContext, useMessageContext } from '../../context';
const defaultReactionDetailsSort = { created_at: -1 };
export function ReactionsListModal({ handleFetchReactions, onSelectedReactionTypeChange, reactionDetailsSort: propReactionDetailsSort, reactions, selectedReactionType, sortReactionDetails: propSortReactionDetails, ...modalProps }) {
const { Modal = DefaultModal } = useComponentContext();
const selectedReaction = reactions.find(({ reactionType }) => reactionType === selectedReactionType);
const SelectedEmojiComponent = selectedReaction?.EmojiComponent ?? null;
const { reactionDetailsSort: contextReactionDetailsSort, sortReactionDetails: contextSortReactionDetails, } = useMessageContext('ReactionsListModal');
const legacySortReactionDetails = propSortReactionDetails ?? contextSortReactionDetails;
const reactionDetailsSort = propReactionDetailsSort ?? contextReactionDetailsSort ?? defaultReactionDetailsSort;
const { isLoading: areReactionsLoading, reactions: reactionDetails } = useFetchReactions({
handleFetchReactions,
reactionType: selectedReactionType,
shouldFetch: modalProps.open,
sort: reactionDetailsSort,
});
const reactionDetailsWithLegacyFallback = useMemo(() => legacySortReactionDetails
? [...reactionDetails].sort(legacySortReactionDetails)
: reactionDetails, [legacySortReactionDetails, reactionDetails]);
return (React.createElement(Modal, { ...modalProps, className: clsx('str-chat__message-reactions-details-modal', modalProps.className) },
React.createElement("div", { className: 'str-chat__message-reactions-details', "data-testid": 'reactions-list-modal' },
React.createElement("div", { className: 'str-chat__message-reactions-details-reaction-types' }, reactions.map(({ EmojiComponent, reactionCount, reactionType }) => EmojiComponent && (React.createElement("div", { className: clsx('str-chat__message-reactions-details-reaction-type', {
'str-chat__message-reactions-details-reaction-type--selected': selectedReactionType === reactionType,
}), "data-testid": `reaction-details-selector-${reactionType}`, key: reactionType, onClick: () => onSelectedReactionTypeChange?.(reactionType) },
React.createElement("span", { className: 'str-chat__message-reaction-emoji str-chat__message-reaction-emoji--with-fallback' },
React.createElement(EmojiComponent, null)),
"\u00A0",
React.createElement("span", { className: 'str-chat__message-reaction-count' }, reactionCount))))),
SelectedEmojiComponent && (React.createElement("div", { className: 'str-chat__message-reaction-emoji str-chat__message-reaction-emoji--with-fallback str-chat__message-reaction-emoji-big' },
React.createElement(SelectedEmojiComponent, null))),
React.createElement("div", { className: 'str-chat__message-reactions-details-reacting-users', "data-testid": 'all-reacting-users' }, areReactionsLoading ? (React.createElement(LoadingIndicator, null)) : (reactionDetailsWithLegacyFallback.map(({ user }) => (React.createElement("div", { className: 'str-chat__message-reactions-details-reacting-user', key: user?.id },
React.createElement(Avatar, { className: 'stream-chat__avatar--reaction', "data-testid": 'avatar', image: user?.image, name: user?.name || user?.id }),
React.createElement("span", { className: 'str-chat__user-item--name', "data-testid": 'reaction-user-username' }, user?.name || user?.id)))))))));
}