diff --git a/ts/components/CompositionInput.tsx b/ts/components/CompositionInput.tsx
index 718ce92533..14beb79296 100644
--- a/ts/components/CompositionInput.tsx
+++ b/ts/components/CompositionInput.tsx
@@ -1,6 +1,5 @@
import * as React from 'react';
import { createPortal } from 'react-dom';
-import { createSelector } from 'reselect';
import {
CompositeDecorator,
ContentBlock,
@@ -16,7 +15,7 @@ import {
} from 'draft-js';
import Measure, { ContentRect } from 'react-measure';
import { Manager, Popper, Reference } from 'react-popper';
-import { get, head, isFunction, noop, trimEnd } from 'lodash';
+import { get, head, noop, trimEnd } from 'lodash';
import classNames from 'classnames';
import emojiRegex from 'emoji-regex';
import { Emoji } from './emoji/Emoji';
@@ -28,6 +27,7 @@ import {
search,
} from './emoji/lib';
import { LocalizerType } from '../types/Util';
+import { mergeRefs } from './_util';
const MAX_LENGTH = 64 * 1024;
const colonsRegex = /(?:^|\s):[a-z0-9-_+]+:?/gi;
@@ -188,20 +188,6 @@ const compositeDecorator = new CompositeDecorator([
},
]);
-// A selector which combines multiple react refs into a single, referentially-equal functional ref.
-const combineRefs = createSelector(
- (r1: React.Ref
) => r1,
- (_r1: any, r2: React.Ref) => r2,
- (_r1: any, _r2: any, r3: React.MutableRefObject) => r3,
- (r1, r2, r3) => (el: HTMLDivElement) => {
- if (isFunction(r1) && isFunction(r2)) {
- r1(el);
- r2(el);
- }
- r3.current = el;
- }
-);
-
const getInitialEditorState = (startingText?: string) => {
if (!startingText) {
return EditorState.createEmpty(compositeDecorator);
@@ -771,7 +757,7 @@ export const CompositionInput = ({
{({ measureRef }) => (
{
const isMacOS = platform === 'darwin';
// Restore focus on teardown
- React.useEffect(() => {
- const lastFocused = document.activeElement as any;
- if (focusRef.current) {
- focusRef.current.focus();
- }
-
- return () => {
- if (lastFocused && lastFocused.focus) {
- lastFocused.focus();
- }
- };
- }, []);
+ useRestoreFocus(focusRef);
return (
diff --git a/ts/components/_util.ts b/ts/components/_util.ts
index b2346d3cfc..7f868b92f4 100644
--- a/ts/components/_util.ts
+++ b/ts/components/_util.ts
@@ -1,5 +1,21 @@
// A separate file so this doesn't get picked up by StyleGuidist over real components
+import { Ref } from 'react';
+import { isFunction } from 'lodash';
+
export function cleanId(id: string): string {
return id.replace(/[^\u0020-\u007e\u00a0-\u00ff]/g, '_');
}
+
+export function mergeRefs
(...refs: Array>) {
+ return (t: T) => {
+ refs.forEach(r => {
+ if (isFunction(r)) {
+ r(t);
+ } else if (r) {
+ // @ts-ignore: React's typings for ref objects is annoying
+ r.current = t;
+ }
+ });
+ };
+}
diff --git a/ts/components/conversation/Message.md b/ts/components/conversation/Message.md
index fc6347ca51..3c20cd4ccc 100644
--- a/ts/components/conversation/Message.md
+++ b/ts/components/conversation/Message.md
@@ -447,6 +447,374 @@ Note that timestamp and status can be hidden with the `collapseMetadata` boolean
```
+### Reactions
+
+#### One Reaction
+
+```jsx
+
+
+
+
+
+
+
+
+```
+
+#### One Reaction - Ours
+
+```jsx
+
+
+
+
+
+
+
+
+```
+
+#### Multiple reactions, ordered by most common then most recent
+
+```jsx
+
+
+
+
+
+
+
+
+```
+
+#### Multiple reactions, ours is most recent/common
+
+```jsx
+
+
+
+
+
+
+
+
+```
+
+#### Multiple reactions, ours not on top
+
+```jsx
+
+
+
+
+
+
+
+
+```
+
+#### Small message
+
+```jsx
+
+
+
+
+
+
+
+
+```
+
### Long data
```jsx
diff --git a/ts/components/conversation/Message.tsx b/ts/components/conversation/Message.tsx
index 646daa99c5..70807870ca 100644
--- a/ts/components/conversation/Message.tsx
+++ b/ts/components/conversation/Message.tsx
@@ -1,6 +1,9 @@
import React from 'react';
-import ReactDOM from 'react-dom';
+import ReactDOM, { createPortal } from 'react-dom';
import classNames from 'classnames';
+import Measure from 'react-measure';
+import { clamp, groupBy, orderBy, take } from 'lodash';
+import { Manager, Popper, Reference } from 'react-popper';
import { Avatar } from '../Avatar';
import { Spinner } from '../Spinner';
@@ -12,6 +15,11 @@ import { Timestamp } from './Timestamp';
import { ContactName } from './ContactName';
import { Quote, QuotedAttachmentType } from './Quote';
import { EmbeddedContact } from './EmbeddedContact';
+import {
+ OwnProps as ReactionViewerProps,
+ ReactionViewer,
+} from './ReactionViewer';
+import { Emoji } from '../emoji/Emoji';
import {
canDisplayImage,
@@ -31,6 +39,7 @@ import { ContactType } from '../../types/Contact';
import { getIncrement } from '../../util/timer';
import { isFileDangerous } from '../../util/isFileDangerous';
import { ColorType, LocalizerType } from '../../types/Util';
+import { mergeRefs } from '../_util';
import { ContextMenu, ContextMenuTrigger, MenuItem } from 'react-contextmenu';
interface Trigger {
@@ -92,6 +101,8 @@ export type PropsData = {
expirationLength?: number;
expirationTimestamp?: number;
+
+ reactions?: ReactionViewerProps['reactions'];
};
type PropsHousekeeping = {
@@ -143,6 +154,9 @@ interface State {
isSelected: boolean;
prevSelectedCounter: number;
+
+ reactionsHeight: number;
+ reactionViewerRoot: HTMLDivElement | null;
}
const EXPIRATION_CHECK_MINIMUM = 2000;
@@ -150,8 +164,11 @@ const EXPIRED_DELAY = 600;
export class Message extends React.PureComponent {
public menuTriggerRef: Trigger | undefined;
- public focusRef: React.RefObject = React.createRef();
public audioRef: React.RefObject = React.createRef();
+ public focusRef: React.RefObject = React.createRef();
+ public reactionsContainerRef: React.RefObject<
+ HTMLDivElement
+ > = React.createRef();
public expirationCheckInterval: any;
public expiredTimeout: any;
@@ -167,6 +184,9 @@ export class Message extends React.PureComponent {
isSelected: props.isSelected,
prevSelectedCounter: props.isSelectedCounter,
+
+ reactionsHeight: 0,
+ reactionViewerRoot: null,
};
}
@@ -271,6 +291,7 @@ export class Message extends React.PureComponent {
if (this.expiredTimeout) {
clearTimeout(this.expiredTimeout);
}
+ this.toggleReactionViewer(true);
}
public componentDidUpdate(prevProps: Props) {
@@ -945,6 +966,9 @@ export class Message extends React.PureComponent {
return null;
}
+ const { reactions } = this.props;
+ const hasReactions = reactions && reactions.length > 0;
+
const multipleAttachments = attachments && attachments.length > 1;
const firstAttachment = attachments && attachments[0];
@@ -1003,7 +1027,8 @@ export class Message extends React.PureComponent {
{first}
@@ -1289,6 +1314,165 @@ export class Message extends React.PureComponent
{
);
}
+ public toggleReactionViewer = (onlyRemove = false) => {
+ this.setState(({ reactionViewerRoot }) => {
+ if (reactionViewerRoot) {
+ document.body.removeChild(reactionViewerRoot);
+ document.body.removeEventListener(
+ 'click',
+ this.handleClickOutside,
+ true
+ );
+
+ return { reactionViewerRoot: null };
+ }
+
+ if (!onlyRemove) {
+ const root = document.createElement('div');
+ document.body.appendChild(root);
+ document.body.addEventListener('click', this.handleClickOutside, true);
+
+ return {
+ reactionViewerRoot: root,
+ };
+ }
+
+ return { reactionViewerRoot: null };
+ });
+ };
+
+ public handleClickOutside = (e: MouseEvent) => {
+ const { reactionViewerRoot } = this.state;
+ const { current: reactionsContainer } = this.reactionsContainerRef;
+ if (reactionViewerRoot && reactionsContainer) {
+ if (
+ !reactionViewerRoot.contains(e.target as HTMLElement) &&
+ !reactionsContainer.contains(e.target as HTMLElement)
+ ) {
+ this.toggleReactionViewer(true);
+ }
+ }
+ };
+
+ // tslint:disable-next-line max-func-body-length
+ public renderReactions(outgoing: boolean) {
+ const { reactions, i18n } = this.props;
+
+ if (!reactions || (reactions && reactions.length === 0)) {
+ return null;
+ }
+
+ // Group by emoji and order each group by timestamp descending
+ const grouped = Object.values(groupBy(reactions, 'emoji')).map(res =>
+ orderBy(res, ['timestamp'], ['desc'])
+ );
+ // Order groups by length and subsequently by most recent reaction
+ const ordered = orderBy(
+ grouped,
+ ['length', ([{ timestamp }]) => timestamp],
+ ['desc', 'desc']
+ );
+ // Take the first two groups for rendering
+ const toRender = take(ordered, 2).map(res => ({
+ emoji: res[0].emoji,
+ isMe: res.some(re => Boolean(re.from.isMe)),
+ }));
+
+ const reactionHeight = 32;
+ const { reactionsHeight: height, reactionViewerRoot } = this.state;
+
+ const offset = clamp((height - reactionHeight) / toRender.length, 4, 28);
+
+ const popperPlacement = outgoing ? 'bottom-end' : 'bottom-start';
+
+ return (
+
+
+ {({ ref: popperRef }) => (
+ {
+ this.setState({ reactionsHeight: bounds.height });
+ }}
+ >
+ {({ measureRef }) => (
+
+ {toRender.map((re, i) => (
+
+ ))}
+
+ )}
+
+ )}
+
+ {reactionViewerRoot &&
+ createPortal(
+
+ {({ ref, style }) => (
+
+ )}
+ ,
+ reactionViewerRoot
+ )}
+
+ );
+ }
+
public renderContents() {
const { isTapToView } = this.props;
@@ -1564,6 +1748,7 @@ export class Message extends React.PureComponent {
{this.renderError(direction === 'outgoing')}
{this.renderMenu(direction === 'incoming', triggerId)}
{this.renderContextMenu(triggerId)}
+ {this.renderReactions(direction === 'outgoing')}
+
+ {emojis
+ .filter(e => Boolean(grouped[e]))
+ .map((e, index) => {
+ const re = grouped[e];
+ const maybeFocusRef = index === 0 ? focusRef : undefined;
+
+ return (
+
+ );
+ })}
+
+
+ {grouped[selected].map(re => (
+
+
+
+ {re.from.name || re.from.profileName}
+
+
+