Reactions: skin tone support

This commit is contained in:
Sidney Keese 2020-10-02 13:05:09 -07:00 committed by Josh Perez
parent 6a7d45b6fc
commit c3ddedfde1
13 changed files with 307 additions and 141 deletions

View file

@ -20,7 +20,7 @@ import {
OwnProps as ReactionViewerProps,
ReactionViewer,
} from './ReactionViewer';
import { Props as ReactionPickerProps, ReactionPicker } from './ReactionPicker';
import { Props as ReactionPickerProps } from './ReactionPicker';
import { Emoji } from '../emoji/Emoji';
import { LinkPreviewDate } from './LinkPreviewDate';
@ -44,6 +44,8 @@ import { isFileDangerous } from '../../util/isFileDangerous';
import { BodyRangesType, LocalizerType } from '../../types/Util';
import { ColorType } from '../../types/Colors';
import { createRefMerger } from '../_util';
import { emojiToData } from '../emoji/lib';
import { SmartReactionPicker } from '../../state/smart/ReactionPicker';
interface Trigger {
handleContextClick: (event: React.MouseEvent<HTMLDivElement>) => void;
@ -1297,8 +1299,7 @@ export class Message extends React.PureComponent<Props, State> {
// eslint-disable-next-line consistent-return
<Popper placement="top">
{({ ref, style }) => (
<ReactionPicker
i18n={i18n}
<SmartReactionPicker
ref={ref}
style={style}
selected={selectedReaction}
@ -1726,13 +1727,24 @@ export class Message extends React.PureComponent<Props, State> {
return null;
}
const reactionsWithEmojiData = reactions.map(reaction => ({
...reaction,
...emojiToData(reaction.emoji),
}));
// Group by emoji and order each group by timestamp descending
const grouped = Object.values(groupBy(reactions, 'emoji')).map(res =>
orderBy(res, ['timestamp'], ['desc'])
const groupedAndSortedReactions = Object.values(
groupBy(reactionsWithEmojiData, 'short_name')
).map(groupedReactions =>
orderBy(
groupedReactions,
[reaction => reaction.from.isMe, 'timestamp'],
['desc', 'desc']
)
);
// Order groups by length and subsequently by most recent reaction
const ordered = orderBy(
grouped,
groupedAndSortedReactions,
['length', ([{ timestamp }]) => timestamp],
['desc', 'desc']
);