Render incoming Reactions
This commit is contained in:
Ken Powers
Scott Nonnenberg
parent
b113eb19f0
commit
6cc0f2abce
25 changed files with 1411 additions and 134 deletions
|
|
@ -447,6 +447,374 @@ Note that timestamp and status can be hidden with the `collapseMetadata` boolean
|
|||
</util.ConversationContext>
|
||||
```
|
||||
|
||||
### Reactions
|
||||
|
||||
#### One Reaction
|
||||
|
||||
```jsx
|
||||
<util.ConversationContext theme={util.theme} ios={util.ios} mode={util.mode}>
|
||||
<div className="module-message-container">
|
||||
<Message
|
||||
direction="incoming"
|
||||
status="delivered"
|
||||
authorColor="red"
|
||||
timestamp={Date.now()}
|
||||
text="I'd like to order one large phone with extra phones please. cell phone, no no no rotary... and payphone on half."
|
||||
i18n={util.i18n}
|
||||
reactions={[
|
||||
{
|
||||
emoji: '👍',
|
||||
from: { id: '+14155552671', name: 'Amelia Briggs' },
|
||||
timestamp: 1,
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
<div className="module-message-container">
|
||||
<Message
|
||||
direction="outgoing"
|
||||
status="delivered"
|
||||
authorColor="red"
|
||||
timestamp={Date.now()}
|
||||
text="I'd like to order one large phone with extra phones please. cell phone, no no no rotary... and payphone on half."
|
||||
i18n={util.i18n}
|
||||
reactions={[
|
||||
{
|
||||
emoji: '👍',
|
||||
from: { id: '+14155552671', name: 'Amelia Briggs' },
|
||||
timestamp: 1,
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
</util.ConversationContext>
|
||||
```
|
||||
|
||||
#### One Reaction - Ours
|
||||
|
||||
```jsx
|
||||
<util.ConversationContext theme={util.theme} ios={util.ios} mode={util.mode}>
|
||||
<div className="module-message-container">
|
||||
<Message
|
||||
direction="incoming"
|
||||
status="delivered"
|
||||
authorColor="red"
|
||||
timestamp={Date.now()}
|
||||
text="I'd like to order one large phone with extra phones please. cell phone, no no no rotary... and payphone on half."
|
||||
i18n={util.i18n}
|
||||
reactions={[
|
||||
{
|
||||
emoji: '👍',
|
||||
from: { id: '+14155552671', isMe: true, name: 'Amelia Briggs' },
|
||||
timestamp: 1,
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
<div className="module-message-container">
|
||||
<Message
|
||||
direction="outgoing"
|
||||
status="delivered"
|
||||
authorColor="red"
|
||||
timestamp={Date.now()}
|
||||
text="I'd like to order one large phone with extra phones please. cell phone, no no no rotary... and payphone on half."
|
||||
i18n={util.i18n}
|
||||
reactions={[
|
||||
{
|
||||
emoji: '👍',
|
||||
from: { id: '+14155552671', isMe: true, name: 'Amelia Briggs' },
|
||||
timestamp: 1,
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
</util.ConversationContext>
|
||||
```
|
||||
|
||||
#### Multiple reactions, ordered by most common then most recent
|
||||
|
||||
```jsx
|
||||
<util.ConversationContext theme={util.theme} ios={util.ios} mode={util.mode}>
|
||||
<div className="module-message-container">
|
||||
<Message
|
||||
direction="incoming"
|
||||
status="delivered"
|
||||
authorColor="red"
|
||||
timestamp={Date.now()}
|
||||
text="I'd like to order one large phone with extra phones please. cell phone, no no no rotary... and payphone on half."
|
||||
i18n={util.i18n}
|
||||
reactions={[
|
||||
{
|
||||
emoji: '👍',
|
||||
from: { id: '+14155552671', name: 'Amelia Briggs' },
|
||||
timestamp: 1,
|
||||
},
|
||||
{
|
||||
emoji: '👍',
|
||||
from: { id: '+14155552671', name: 'Joel Ferrari' },
|
||||
timestamp: 1,
|
||||
},
|
||||
{
|
||||
emoji: '😡',
|
||||
from: { id: '+14155552671', name: 'Adam Burrell' },
|
||||
timestamp: 1,
|
||||
},
|
||||
{
|
||||
emoji: '😮',
|
||||
from: { id: '+14155552671', name: 'Rick Owens' },
|
||||
timestamp: 2,
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
<div className="module-message-container">
|
||||
<Message
|
||||
direction="outgoing"
|
||||
status="delivered"
|
||||
authorColor="red"
|
||||
timestamp={Date.now()}
|
||||
text="I'd like to order one large phone with extra phones please. cell phone, no no no rotary... and payphone on half."
|
||||
i18n={util.i18n}
|
||||
reactions={[
|
||||
{
|
||||
emoji: '👍',
|
||||
from: { id: '+14155552671', name: 'Amelia Briggs' },
|
||||
timestamp: 1,
|
||||
},
|
||||
{
|
||||
emoji: '👍',
|
||||
from: { id: '+14155552671', name: 'Joel Ferrari' },
|
||||
timestamp: 1,
|
||||
},
|
||||
{
|
||||
emoji: '😡',
|
||||
from: { id: '+14155552671', name: 'Adam Burrell' },
|
||||
timestamp: 1,
|
||||
},
|
||||
{
|
||||
emoji: '😮',
|
||||
from: { id: '+14155552671', name: 'Rick Owens' },
|
||||
timestamp: 2,
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
</util.ConversationContext>
|
||||
```
|
||||
|
||||
#### Multiple reactions, ours is most recent/common
|
||||
|
||||
```jsx
|
||||
<util.ConversationContext theme={util.theme} ios={util.ios} mode={util.mode}>
|
||||
<div className="module-message-container">
|
||||
<Message
|
||||
direction="incoming"
|
||||
status="delivered"
|
||||
authorColor="red"
|
||||
timestamp={Date.now()}
|
||||
text="I'd like to order one large phone with extra phones please. cell phone, no no no rotary... and payphone on half."
|
||||
i18n={util.i18n}
|
||||
reactions={[
|
||||
{
|
||||
emoji: '👍',
|
||||
from: { id: '+14155552671', isMe: true, name: 'Amelia Briggs' },
|
||||
timestamp: 1,
|
||||
},
|
||||
{
|
||||
emoji: '👍',
|
||||
from: { id: '+14155552671', name: 'Joel Ferrari' },
|
||||
timestamp: 1,
|
||||
},
|
||||
{
|
||||
emoji: '😡',
|
||||
from: { id: '+14155552671', name: 'Adam Burrell' },
|
||||
timestamp: 1,
|
||||
},
|
||||
{
|
||||
emoji: '😮',
|
||||
from: { id: '+14155552671', name: 'Rick Owens' },
|
||||
timestamp: 2,
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
<div className="module-message-container">
|
||||
<Message
|
||||
direction="outgoing"
|
||||
status="delivered"
|
||||
authorColor="red"
|
||||
timestamp={Date.now()}
|
||||
text="I'd like to order one large phone with extra phones please. cell phone, no no no rotary... and payphone on half."
|
||||
i18n={util.i18n}
|
||||
reactions={[
|
||||
{
|
||||
emoji: '👍',
|
||||
from: { id: '+14155552671', name: 'Amelia Briggs' },
|
||||
timestamp: 1,
|
||||
},
|
||||
{
|
||||
emoji: '👍',
|
||||
from: { id: '+14155552671', isMe: true, name: 'Joel Ferrari' },
|
||||
timestamp: 1,
|
||||
},
|
||||
{
|
||||
emoji: '😡',
|
||||
from: { id: '+14155552671', name: 'Adam Burrell' },
|
||||
timestamp: 1,
|
||||
},
|
||||
{
|
||||
emoji: '😮',
|
||||
from: { id: '+14155552671', name: 'Rick Owens' },
|
||||
timestamp: 2,
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
</util.ConversationContext>
|
||||
```
|
||||
|
||||
#### Multiple reactions, ours not on top
|
||||
|
||||
```jsx
|
||||
<util.ConversationContext theme={util.theme} ios={util.ios} mode={util.mode}>
|
||||
<div className="module-message-container">
|
||||
<Message
|
||||
direction="incoming"
|
||||
status="delivered"
|
||||
authorColor="red"
|
||||
timestamp={Date.now()}
|
||||
text="I'd like to order one large phone with extra phones please. cell phone, no no no rotary... and payphone on half."
|
||||
i18n={util.i18n}
|
||||
reactions={[
|
||||
{
|
||||
emoji: '👍',
|
||||
from: { id: '+14155552671', name: 'Amelia Briggs' },
|
||||
timestamp: 1,
|
||||
},
|
||||
{
|
||||
emoji: '👍',
|
||||
from: { id: '+14155552671', name: 'Joel Ferrari' },
|
||||
timestamp: 1,
|
||||
},
|
||||
{
|
||||
emoji: '😡',
|
||||
from: { id: '+14155552671', name: 'Adam Burrell' },
|
||||
timestamp: 1,
|
||||
},
|
||||
{
|
||||
emoji: '😮',
|
||||
from: { id: '+14155552671', isMe: true, name: 'Rick Owens' },
|
||||
timestamp: 2,
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
<div className="module-message-container">
|
||||
<Message
|
||||
direction="outgoing"
|
||||
status="delivered"
|
||||
authorColor="red"
|
||||
timestamp={Date.now()}
|
||||
text="I'd like to order one large phone with extra phones please. cell phone, no no no rotary... and payphone on half."
|
||||
i18n={util.i18n}
|
||||
reactions={[
|
||||
{
|
||||
emoji: '👍',
|
||||
from: { id: '+14155552671', name: 'Amelia Briggs' },
|
||||
timestamp: 1,
|
||||
},
|
||||
{
|
||||
emoji: '👍',
|
||||
from: { id: '+14155552671', name: 'Joel Ferrari' },
|
||||
timestamp: 1,
|
||||
},
|
||||
{
|
||||
emoji: '😡',
|
||||
from: { id: '+14155552671', name: 'Adam Burrell' },
|
||||
timestamp: 1,
|
||||
},
|
||||
{
|
||||
emoji: '😮',
|
||||
from: { id: '+14155552671', isMe: true, name: 'Rick Owens' },
|
||||
timestamp: 2,
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
</util.ConversationContext>
|
||||
```
|
||||
|
||||
#### Small message
|
||||
|
||||
```jsx
|
||||
<util.ConversationContext theme={util.theme} ios={util.ios} mode={util.mode}>
|
||||
<div className="module-message-container">
|
||||
<Message
|
||||
direction="incoming"
|
||||
status="delivered"
|
||||
authorColor="red"
|
||||
timestamp={Date.now()}
|
||||
text="Burgertime!"
|
||||
i18n={util.i18n}
|
||||
reactions={[
|
||||
{
|
||||
emoji: '👍',
|
||||
from: { id: '+14155552671', name: 'Amelia Briggs' },
|
||||
timestamp: 1,
|
||||
},
|
||||
{
|
||||
emoji: '👍',
|
||||
from: { id: '+14155552671', name: 'Joel Ferrari' },
|
||||
timestamp: 1,
|
||||
},
|
||||
{
|
||||
emoji: '😡',
|
||||
from: { id: '+14155552671', name: 'Adam Burrell' },
|
||||
timestamp: 1,
|
||||
},
|
||||
{
|
||||
emoji: '😮',
|
||||
from: { id: '+14155552671', name: 'Rick Owens' },
|
||||
timestamp: 2,
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
<div className="module-message-container">
|
||||
<Message
|
||||
direction="outgoing"
|
||||
status="delivered"
|
||||
authorColor="red"
|
||||
timestamp={Date.now()}
|
||||
text="Burgertime!"
|
||||
i18n={util.i18n}
|
||||
reactions={[
|
||||
{
|
||||
emoji: '👍',
|
||||
from: { id: '+14155552671', name: 'Amelia Briggs' },
|
||||
timestamp: 1,
|
||||
},
|
||||
{
|
||||
emoji: '👍',
|
||||
from: { id: '+14155552671', name: 'Joel Ferrari' },
|
||||
timestamp: 1,
|
||||
},
|
||||
{
|
||||
emoji: '😡',
|
||||
from: { id: '+14155552671', name: 'Adam Burrell' },
|
||||
timestamp: 1,
|
||||
},
|
||||
{
|
||||
emoji: '😮',
|
||||
from: { id: '+14155552671', name: 'Rick Owens' },
|
||||
timestamp: 2,
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
</util.ConversationContext>
|
||||
```
|
||||
|
||||
### Long data
|
||||
|
||||
```jsx
|
||||
|
|
|
|||
|
|
@ -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<Props, State> {
|
||||
public menuTriggerRef: Trigger | undefined;
|
||||
public focusRef: React.RefObject<HTMLDivElement> = React.createRef();
|
||||
public audioRef: React.RefObject<HTMLAudioElement> = React.createRef();
|
||||
public focusRef: React.RefObject<HTMLDivElement> = 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<Props, State> {
|
|||
|
||||
isSelected: props.isSelected,
|
||||
prevSelectedCounter: props.isSelectedCounter,
|
||||
|
||||
reactionsHeight: 0,
|
||||
reactionViewerRoot: null,
|
||||
};
|
||||
}
|
||||
|
||||
|
|
@ -271,6 +291,7 @@ export class Message extends React.PureComponent<Props, State> {
|
|||
if (this.expiredTimeout) {
|
||||
clearTimeout(this.expiredTimeout);
|
||||
}
|
||||
this.toggleReactionViewer(true);
|
||||
}
|
||||
|
||||
public componentDidUpdate(prevProps: Props) {
|
||||
|
|
@ -945,6 +966,9 @@ export class Message extends React.PureComponent<Props, State> {
|
|||
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<Props, State> {
|
|||
<div
|
||||
className={classNames(
|
||||
'module-message__buttons',
|
||||
`module-message__buttons--${direction}`
|
||||
`module-message__buttons--${direction}`,
|
||||
hasReactions ? 'module-message__buttons--has-reactions' : null
|
||||
)}
|
||||
>
|
||||
{first}
|
||||
|
|
@ -1289,6 +1314,165 @@ export class Message extends React.PureComponent<Props, State> {
|
|||
);
|
||||
}
|
||||
|
||||
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 (
|
||||
<Manager>
|
||||
<Reference>
|
||||
{({ ref: popperRef }) => (
|
||||
<Measure
|
||||
bounds={true}
|
||||
onResize={({ bounds = { height: 0 } }) => {
|
||||
this.setState({ reactionsHeight: bounds.height });
|
||||
}}
|
||||
>
|
||||
{({ measureRef }) => (
|
||||
<div
|
||||
ref={mergeRefs(
|
||||
this.reactionsContainerRef,
|
||||
measureRef,
|
||||
popperRef
|
||||
)}
|
||||
className={classNames(
|
||||
'module-message__reactions',
|
||||
outgoing
|
||||
? 'module-message__reactions--outgoing'
|
||||
: 'module-message__reactions--incoming'
|
||||
)}
|
||||
>
|
||||
{toRender.map((re, i) => (
|
||||
<button
|
||||
key={`${re.emoji}-${i}`}
|
||||
className={classNames(
|
||||
'module-message__reactions__reaction',
|
||||
outgoing
|
||||
? 'module-message__reactions__reaction--outgoing'
|
||||
: 'module-message__reactions__reaction--incoming',
|
||||
re.isMe
|
||||
? 'module-message__reactions__reaction--is-me'
|
||||
: null
|
||||
)}
|
||||
style={{
|
||||
top: `${i * offset}px`,
|
||||
}}
|
||||
onClick={e => {
|
||||
e.stopPropagation();
|
||||
this.toggleReactionViewer();
|
||||
}}
|
||||
onKeyDown={e => {
|
||||
// Prevent enter key from opening stickers/attachments
|
||||
if (e.key === 'Enter') {
|
||||
e.stopPropagation();
|
||||
}
|
||||
}}
|
||||
>
|
||||
<Emoji size={18} emoji={re.emoji} />
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</Measure>
|
||||
)}
|
||||
</Reference>
|
||||
{reactionViewerRoot &&
|
||||
createPortal(
|
||||
<Popper placement={popperPlacement}>
|
||||
{({ ref, style }) => (
|
||||
<ReactionViewer
|
||||
ref={ref}
|
||||
style={{
|
||||
...style,
|
||||
zIndex: 2,
|
||||
marginTop: -(height - reactionHeight * 0.75),
|
||||
...(outgoing
|
||||
? {
|
||||
marginRight: reactionHeight * -0.375,
|
||||
}
|
||||
: {
|
||||
marginLeft: reactionHeight * -0.375,
|
||||
}),
|
||||
}}
|
||||
reactions={reactions}
|
||||
i18n={i18n}
|
||||
onClose={this.toggleReactionViewer}
|
||||
/>
|
||||
)}
|
||||
</Popper>,
|
||||
reactionViewerRoot
|
||||
)}
|
||||
</Manager>
|
||||
);
|
||||
}
|
||||
|
||||
public renderContents() {
|
||||
const { isTapToView } = this.props;
|
||||
|
||||
|
|
@ -1564,6 +1748,7 @@ export class Message extends React.PureComponent<Props, State> {
|
|||
{this.renderError(direction === 'outgoing')}
|
||||
{this.renderMenu(direction === 'incoming', triggerId)}
|
||||
{this.renderContextMenu(triggerId)}
|
||||
{this.renderReactions(direction === 'outgoing')}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
118
ts/components/conversation/ReactionViewer.md
Normal file
118
ts/components/conversation/ReactionViewer.md
Normal file
|
|
@ -0,0 +1,118 @@
|
|||
### Reaction Viewer
|
||||
|
||||
#### Few Reactions
|
||||
|
||||
```jsx
|
||||
<util.ConversationContext theme={util.theme} ios={util.ios} mode={util.mode}>
|
||||
<ReactionViewer
|
||||
i18n={util.i18n}
|
||||
reactions={[
|
||||
{ emoji: '❤️', from: { id: '+14155552671', name: 'Amelia Briggs' } },
|
||||
{ emoji: '👍', from: { id: '+14155552671', name: 'Joel Ferrari' } },
|
||||
]}
|
||||
/>
|
||||
</util.ConversationContext>
|
||||
```
|
||||
|
||||
#### Many Reactions
|
||||
|
||||
```jsx
|
||||
<util.ConversationContext theme={util.theme} ios={util.ios} mode={util.mode}>
|
||||
<ReactionViewer
|
||||
i18n={util.i18n}
|
||||
reactions={[
|
||||
{
|
||||
emoji: '❤️',
|
||||
timestamp: 1,
|
||||
from: { id: '+14155552671', name: 'Ameila Briggs' },
|
||||
},
|
||||
{
|
||||
emoji: '❤️',
|
||||
timestamp: 2,
|
||||
from: { id: '+14155552672', name: 'Adam Burrel' },
|
||||
},
|
||||
{
|
||||
emoji: '❤️',
|
||||
timestamp: 3,
|
||||
from: { id: '+14155552673', name: 'Rick Owens' },
|
||||
},
|
||||
{
|
||||
emoji: '❤️',
|
||||
timestamp: 4,
|
||||
from: { id: '+14155552674', name: 'Bojack Horseman' },
|
||||
},
|
||||
{
|
||||
emoji: '❤️',
|
||||
timestamp: 4,
|
||||
from: { id: '+14155552675', name: 'Cayce Pollard' },
|
||||
},
|
||||
{
|
||||
emoji: '❤️',
|
||||
timestamp: 5,
|
||||
from: { id: '+14155552676', name: 'Foo McBarrington' },
|
||||
},
|
||||
{
|
||||
emoji: '❤️',
|
||||
timestamp: 6,
|
||||
from: { id: '+14155552677', name: 'Ameila Briggs' },
|
||||
},
|
||||
{
|
||||
emoji: '❤️',
|
||||
timestamp: 7,
|
||||
from: { id: '+14155552678', name: 'Adam Burrel' },
|
||||
},
|
||||
{
|
||||
emoji: '❤️',
|
||||
timestamp: 8,
|
||||
from: { id: '+14155552679', name: 'Rick Owens' },
|
||||
},
|
||||
{
|
||||
emoji: '👍',
|
||||
timestamp: 9,
|
||||
from: { id: '+14155552671', name: 'Adam Burrel' },
|
||||
},
|
||||
{
|
||||
emoji: '👎',
|
||||
timestamp: 10,
|
||||
from: { id: '+14155552671', name: 'Rick Owens' },
|
||||
},
|
||||
{
|
||||
emoji: '😂',
|
||||
timestamp: 11,
|
||||
from: { id: '+14155552671', name: 'Bojack Horseman' },
|
||||
},
|
||||
{
|
||||
emoji: '😮',
|
||||
timestamp: 12,
|
||||
from: { id: '+14155552671', name: 'Cayce Pollard' },
|
||||
},
|
||||
{
|
||||
emoji: '😢',
|
||||
timestamp: 13,
|
||||
from: { id: '+14155552671', name: 'Foo McBarrington' },
|
||||
},
|
||||
{
|
||||
emoji: '😡',
|
||||
timestamp: 14,
|
||||
from: { id: '+14155552671', name: 'Foo McBarrington' },
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</util.ConversationContext>
|
||||
```
|
||||
|
||||
#### Name Overflow
|
||||
|
||||
```jsx
|
||||
<util.ConversationContext theme={util.theme} ios={util.ios} mode={util.mode}>
|
||||
<ReactionViewer
|
||||
i18n={util.i18n}
|
||||
reactions={[
|
||||
{
|
||||
emoji: '❤️',
|
||||
from: { id: '+14155552671', name: 'Foo McBarringtonMcBazzingtonMcKay' },
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</util.ConversationContext>
|
||||
```
|
||||
113
ts/components/conversation/ReactionViewer.tsx
Normal file
113
ts/components/conversation/ReactionViewer.tsx
Normal file
|
|
@ -0,0 +1,113 @@
|
|||
import * as React from 'react';
|
||||
import { groupBy, mapValues, orderBy } from 'lodash';
|
||||
import classNames from 'classnames';
|
||||
import { Avatar, Props as AvatarProps } from '../Avatar';
|
||||
import { Emoji } from '../emoji/Emoji';
|
||||
import { useRestoreFocus } from '../hooks';
|
||||
|
||||
export type Reaction = {
|
||||
emoji: string;
|
||||
timestamp: number;
|
||||
from: {
|
||||
id: string;
|
||||
color?: string;
|
||||
profileName?: string;
|
||||
name?: string;
|
||||
isMe?: boolean;
|
||||
avatarPath?: string;
|
||||
};
|
||||
};
|
||||
|
||||
export type OwnProps = {
|
||||
reactions: Array<Reaction>;
|
||||
onClose?: () => unknown;
|
||||
};
|
||||
|
||||
export type Props = OwnProps &
|
||||
Pick<React.HTMLProps<HTMLDivElement>, 'style'> &
|
||||
Pick<AvatarProps, 'i18n'>;
|
||||
|
||||
const emojis = ['❤️', '👍', '👎', '😂', '😮', '😢', '😡'];
|
||||
|
||||
export const ReactionViewer = React.forwardRef<HTMLDivElement, Props>(
|
||||
({ i18n, reactions, onClose, ...rest }, ref) => {
|
||||
const grouped = mapValues(groupBy(reactions, 'emoji'), res =>
|
||||
orderBy(res, ['timestamp'], ['desc'])
|
||||
);
|
||||
const filtered = emojis.filter(e => Boolean(grouped[e]));
|
||||
const [selected, setSelected] = React.useState(filtered[0]);
|
||||
const focusRef = React.useRef<HTMLButtonElement>(null);
|
||||
|
||||
// Handle escape key
|
||||
React.useEffect(() => {
|
||||
const handler = (e: KeyboardEvent) => {
|
||||
if (onClose && e.key === 'Escape') {
|
||||
onClose();
|
||||
}
|
||||
};
|
||||
|
||||
document.addEventListener('keydown', handler);
|
||||
|
||||
return () => {
|
||||
document.removeEventListener('keydown', handler);
|
||||
};
|
||||
}, [onClose]);
|
||||
|
||||
// Focus first button and restore focus on unmount
|
||||
useRestoreFocus(focusRef);
|
||||
|
||||
return (
|
||||
<div {...rest} ref={ref} className="module-reaction-viewer">
|
||||
<header className="module-reaction-viewer__header">
|
||||
{emojis
|
||||
.filter(e => Boolean(grouped[e]))
|
||||
.map((e, index) => {
|
||||
const re = grouped[e];
|
||||
const maybeFocusRef = index === 0 ? focusRef : undefined;
|
||||
|
||||
return (
|
||||
<button
|
||||
key={e}
|
||||
ref={maybeFocusRef}
|
||||
className={classNames(
|
||||
'module-reaction-viewer__header__button',
|
||||
selected === e
|
||||
? 'module-reaction-viewer__header__button--selected'
|
||||
: null
|
||||
)}
|
||||
onClick={() => {
|
||||
setSelected(e);
|
||||
}}
|
||||
>
|
||||
<Emoji size={18} emoji={e} />
|
||||
<span className="module-reaction-viewer__header__button__count">
|
||||
{re.length}
|
||||
</span>
|
||||
</button>
|
||||
);
|
||||
})}
|
||||
</header>
|
||||
<main className="module-reaction-viewer__body">
|
||||
{grouped[selected].map(re => (
|
||||
<div
|
||||
key={`${re.from.id}-${re.emoji}`}
|
||||
className="module-reaction-viewer__body__row"
|
||||
>
|
||||
<div className="module-reaction-viewer__body__row__avatar">
|
||||
<Avatar
|
||||
avatarPath={re.from.avatarPath}
|
||||
conversationType="direct"
|
||||
size={32}
|
||||
i18n={i18n}
|
||||
/>
|
||||
</div>
|
||||
<span className="module-reaction-viewer__body__row__name">
|
||||
{re.from.name || re.from.profileName}
|
||||
</span>
|
||||
</div>
|
||||
))}
|
||||
</main>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
);
|
||||
|
|
@ -918,6 +918,17 @@ export class Timeline extends React.PureComponent<Props, State> {
|
|||
|
||||
// Thanks to https://gist.github.com/pstoica/4323d3e6e37e8a23dd59
|
||||
setTimeout(() => {
|
||||
// If focus moved to one of our portals, we do not clear the selected
|
||||
// message so that focus stays inside the portal. We need to be careful
|
||||
// to not create colliding keyboard shortcuts between selected messages
|
||||
// and our portals!
|
||||
const portals = Array.from(
|
||||
document.querySelectorAll('body > div:not(.inbox)')
|
||||
);
|
||||
if (portals.some(el => el.contains(document.activeElement))) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (!currentTarget.contains(document.activeElement)) {
|
||||
clearSelectedMessage();
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue