Message Requests improvements
This commit is contained in:
Scott Nonnenberg
GitHub
parent
b63291507a
commit
81cb7730a5
21 changed files with 302 additions and 263 deletions
|
|
@ -4,6 +4,8 @@
|
|||
<util.LeftPaneContext theme={util.theme}>
|
||||
<ConversationListItem
|
||||
id="conversationId1"
|
||||
isAccepted
|
||||
title="Someone 🔥 Somewhere"
|
||||
name="Someone 🔥 Somewhere"
|
||||
type={'direct'}
|
||||
phoneNumber="(202) 555-0011"
|
||||
|
|
@ -25,8 +27,10 @@
|
|||
<util.LeftPaneContext theme={util.theme}>
|
||||
<ConversationListItem
|
||||
id="conversationId1"
|
||||
isAccepted
|
||||
phoneNumber="(202) 555-0011"
|
||||
type={'direct'}
|
||||
title="Mr. Fire🔥"
|
||||
name="Mr. Fire🔥"
|
||||
color="green"
|
||||
lastUpdated={Date.now() - 5 * 60 * 1000}
|
||||
|
|
@ -46,9 +50,11 @@
|
|||
<util.LeftPaneContext theme={util.theme}>
|
||||
<ConversationListItem
|
||||
id="conversationId1"
|
||||
isAccepted
|
||||
isMe={true}
|
||||
phoneNumber="(202) 555-0011"
|
||||
type={'direct'}
|
||||
title="Mr. Fire🔥"
|
||||
name="Mr. Fire🔥"
|
||||
color="green"
|
||||
lastUpdated={Date.now() - 5 * 60 * 1000}
|
||||
|
|
@ -69,8 +75,10 @@
|
|||
<div>
|
||||
<ConversationListItem
|
||||
id="conversationId1"
|
||||
isAccepted
|
||||
phoneNumber="(202) 555-0011"
|
||||
type={'direct'}
|
||||
title="Mr. Fire🔥"
|
||||
name="Mr. Fire🔥"
|
||||
color="green"
|
||||
lastUpdated={Date.now() - 5 * 60 * 1000}
|
||||
|
|
@ -83,8 +91,10 @@
|
|||
/>
|
||||
<ConversationListItem
|
||||
id="conversationId2"
|
||||
isAccepted
|
||||
phoneNumber="(202) 555-0011"
|
||||
type={'direct'}
|
||||
title="Mr. Fire🔥"
|
||||
name="Mr. Fire🔥"
|
||||
color="green"
|
||||
lastUpdated={Date.now() - 5 * 60 * 1000}
|
||||
|
|
@ -97,8 +107,10 @@
|
|||
/>
|
||||
<ConversationListItem
|
||||
id="conversationId3"
|
||||
isAccepted
|
||||
phoneNumber="(202) 555-0011"
|
||||
type={'direct'}
|
||||
title="Mr. Fire🔥"
|
||||
name="Mr. Fire🔥"
|
||||
color="green"
|
||||
lastUpdated={Date.now() - 5 * 60 * 1000}
|
||||
|
|
@ -111,8 +123,10 @@
|
|||
/>
|
||||
<ConversationListItem
|
||||
id="conversationId4"
|
||||
isAccepted
|
||||
phoneNumber="(202) 555-0011"
|
||||
type={'direct'}
|
||||
title="Mr. Fire🔥"
|
||||
name="Mr. Fire🔥"
|
||||
color="green"
|
||||
lastUpdated={Date.now() - 5 * 60 * 1000}
|
||||
|
|
@ -125,8 +139,10 @@
|
|||
/>
|
||||
<ConversationListItem
|
||||
id="conversationId5"
|
||||
isAccepted
|
||||
phoneNumber="(202) 555-0011"
|
||||
type={'direct'}
|
||||
title="Mr. Fire🔥"
|
||||
name="Mr. Fire🔥"
|
||||
color="green"
|
||||
lastUpdated={Date.now() - 5 * 60 * 1000}
|
||||
|
|
@ -148,7 +164,9 @@
|
|||
<div>
|
||||
<ConversationListItem
|
||||
id="conversationId1"
|
||||
isAccepted
|
||||
phoneNumber="(202) 555-0011"
|
||||
title="(202) 555-0011"
|
||||
type={'direct'}
|
||||
unreadCount={4}
|
||||
lastUpdated={Date.now() - 5 * 60 * 1000}
|
||||
|
|
@ -162,7 +180,51 @@
|
|||
<div>
|
||||
<ConversationListItem
|
||||
id="conversationId2"
|
||||
isAccepted
|
||||
phoneNumber="(202) 555-0011"
|
||||
title="(202) 555-0011"
|
||||
type={'direct'}
|
||||
unreadCount={4}
|
||||
lastUpdated={Date.now() - 5 * 60 * 1000}
|
||||
typingContact={{
|
||||
name: 'Someone Here',
|
||||
}}
|
||||
lastMessage={{
|
||||
status: 'read',
|
||||
}}
|
||||
onClick={result => console.log('onClick', result)}
|
||||
i18n={util.i18n}
|
||||
/>
|
||||
</div>
|
||||
</util.LeftPaneContext>
|
||||
```
|
||||
|
||||
#### Message Request
|
||||
|
||||
```jsx
|
||||
<util.LeftPaneContext theme={util.theme}>
|
||||
<div>
|
||||
<ConversationListItem
|
||||
id="conversationId1"
|
||||
isAccepted={false}
|
||||
phoneNumber="(202) 555-0011"
|
||||
title="(202) 555-0011"
|
||||
type={'direct'}
|
||||
unreadCount={4}
|
||||
lastUpdated={Date.now() - 5 * 60 * 1000}
|
||||
typingContact={{
|
||||
name: 'Someone Here',
|
||||
}}
|
||||
onClick={result => console.log('onClick', result)}
|
||||
i18n={util.i18n}
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<ConversationListItem
|
||||
id="conversationId2"
|
||||
isAccepted={false}
|
||||
phoneNumber="(202) 555-0011"
|
||||
title="(202) 555-0011"
|
||||
type={'direct'}
|
||||
unreadCount={4}
|
||||
lastUpdated={Date.now() - 5 * 60 * 1000}
|
||||
|
|
@ -188,7 +250,9 @@
|
|||
<div>
|
||||
<ConversationListItem
|
||||
id="conversationId1"
|
||||
isAccepted
|
||||
phoneNumber="(202) 555-0011"
|
||||
title="(202) 555-0011"
|
||||
type={'direct'}
|
||||
unreadCount={4}
|
||||
lastUpdated={Date.now() - 5 * 60 * 1000}
|
||||
|
|
@ -200,7 +264,9 @@
|
|||
/>
|
||||
<ConversationListItem
|
||||
id="conversationId2"
|
||||
isAccepted
|
||||
phoneNumber="(202) 555-0011"
|
||||
title="(202) 555-0011"
|
||||
type={'direct'}
|
||||
unreadCount={10}
|
||||
lastUpdated={Date.now() - 5 * 60 * 1000}
|
||||
|
|
@ -212,7 +278,9 @@
|
|||
/>
|
||||
<ConversationListItem
|
||||
id="conversationId3"
|
||||
isAccepted
|
||||
phoneNumber="(202) 555-0011"
|
||||
title="(202) 555-0011"
|
||||
type={'direct'}
|
||||
unreadCount={250}
|
||||
lastUpdated={Date.now() - 5 * 60 * 1000}
|
||||
|
|
@ -232,7 +300,9 @@
|
|||
<util.LeftPaneContext theme={util.theme}>
|
||||
<ConversationListItem
|
||||
id="conversationId1"
|
||||
isAccepted
|
||||
phoneNumber="(202) 555-0011"
|
||||
title="(202) 555-0011"
|
||||
type={'direct'}
|
||||
isSelected={true}
|
||||
lastUpdated={Date.now() - 5 * 60 * 1000}
|
||||
|
|
@ -254,7 +324,9 @@ We don't want Jumbomoji or links.
|
|||
<div>
|
||||
<ConversationListItem
|
||||
id="conversationId1"
|
||||
isAccepted
|
||||
phoneNumber="(202) 555-0011"
|
||||
title="(202) 555-0011"
|
||||
type={'direct'}
|
||||
lastUpdated={Date.now() - 5 * 60 * 1000}
|
||||
lastMessage={{
|
||||
|
|
@ -265,7 +337,9 @@ We don't want Jumbomoji or links.
|
|||
/>
|
||||
<ConversationListItem
|
||||
id="conversationId2"
|
||||
isAccepted
|
||||
phoneNumber="(202) 555-0011"
|
||||
title="(202) 555-0011"
|
||||
type={'direct'}
|
||||
lastUpdated={Date.now() - 5 * 60 * 1000}
|
||||
lastMessage={{
|
||||
|
|
@ -287,7 +361,9 @@ We only show one line.
|
|||
<div>
|
||||
<ConversationListItem
|
||||
id="conversationId1"
|
||||
isAccepted
|
||||
phoneNumber="(202) 555-0011"
|
||||
title="(202) 555-0011"
|
||||
type={'direct'}
|
||||
name="Long contact name. Esquire. The third. And stuff. And more! And more!"
|
||||
lastUpdated={Date.now() - 5 * 60 * 1000}
|
||||
|
|
@ -299,7 +375,9 @@ We only show one line.
|
|||
/>
|
||||
<ConversationListItem
|
||||
id="conversationId2"
|
||||
isAccepted
|
||||
phoneNumber="(202) 555-0011"
|
||||
title="(202) 555-0011"
|
||||
type={'direct'}
|
||||
lastUpdated={Date.now() - 5 * 60 * 1000}
|
||||
lastMessage={{
|
||||
|
|
@ -311,7 +389,9 @@ We only show one line.
|
|||
/>
|
||||
<ConversationListItem
|
||||
id="conversationId3"
|
||||
isAccepted
|
||||
phoneNumber="(202) 555-0011"
|
||||
title="(202) 555-0011"
|
||||
type={'direct'}
|
||||
lastUpdated={Date.now() - 5 * 60 * 1000}
|
||||
lastMessage={{
|
||||
|
|
@ -325,7 +405,9 @@ We only show one line.
|
|||
|
||||
<ConversationListItem
|
||||
id="conversationId4"
|
||||
isAccepted
|
||||
phoneNumber="(202) 555-0011"
|
||||
title="(202) 555-0011"
|
||||
type={'direct'}
|
||||
lastUpdated={Date.now() - 5 * 60 * 1000}
|
||||
unreadCount={8}
|
||||
|
|
@ -338,7 +420,9 @@ We only show one line.
|
|||
/>
|
||||
<ConversationListItem
|
||||
id="conversationId5"
|
||||
isAccepted
|
||||
phoneNumber="(202) 555-0011"
|
||||
title="(202) 555-0011"
|
||||
type={'direct'}
|
||||
lastUpdated={Date.now() - 5 * 60 * 1000}
|
||||
lastMessage={{
|
||||
|
|
@ -350,7 +434,9 @@ We only show one line.
|
|||
/>
|
||||
<ConversationListItem
|
||||
id="conversationId6"
|
||||
isAccepted
|
||||
phoneNumber="(202) 555-0011"
|
||||
title="(202) 555-0011"
|
||||
type={'direct'}
|
||||
lastUpdated={Date.now() - 5 * 60 * 1000}
|
||||
lastMessage={{
|
||||
|
|
@ -374,7 +460,9 @@ On platforms that show scrollbars all the time, this is true all the time.
|
|||
<div style={{ width: '280px' }}>
|
||||
<ConversationListItem
|
||||
id="conversationId1"
|
||||
isAccepted
|
||||
phoneNumber="(202) 555-0011"
|
||||
title="(202) 555-0011"
|
||||
type={'direct'}
|
||||
name="Long contact name. Esquire. The third. And stuff. And more! And more!"
|
||||
lastUpdated={Date.now() - 5 * 60 * 1000}
|
||||
|
|
@ -386,7 +474,9 @@ On platforms that show scrollbars all the time, this is true all the time.
|
|||
/>
|
||||
<ConversationListItem
|
||||
id="conversationId2"
|
||||
isAccepted
|
||||
phoneNumber="(202) 555-0011"
|
||||
title="(202) 555-0011"
|
||||
type={'direct'}
|
||||
lastUpdated={Date.now() - 5 * 60 * 1000}
|
||||
lastMessage={{
|
||||
|
|
@ -407,7 +497,9 @@ On platforms that show scrollbars all the time, this is true all the time.
|
|||
<div>
|
||||
<ConversationListItem
|
||||
id="conversationId1"
|
||||
isAccepted
|
||||
phoneNumber="(202) 555-0011"
|
||||
title="(202) 555-0011"
|
||||
type={'direct'}
|
||||
lastUpdated={Date.now() - 5 * 60 * 60 * 1000}
|
||||
lastMessage={{
|
||||
|
|
@ -418,7 +510,9 @@ On platforms that show scrollbars all the time, this is true all the time.
|
|||
/>
|
||||
<ConversationListItem
|
||||
id="conversationId2"
|
||||
isAccepted
|
||||
phoneNumber="(202) 555-0011"
|
||||
title="(202) 555-0011"
|
||||
type={'direct'}
|
||||
lastUpdated={Date.now() - 24 * 60 * 60 * 1000}
|
||||
lastMessage={{
|
||||
|
|
@ -429,7 +523,9 @@ On platforms that show scrollbars all the time, this is true all the time.
|
|||
/>
|
||||
<ConversationListItem
|
||||
id="conversationId3"
|
||||
isAccepted
|
||||
phoneNumber="(202) 555-0011"
|
||||
title="(202) 555-0011"
|
||||
type={'direct'}
|
||||
lastUpdated={Date.now() - 7 * 24 * 60 * 60 * 1000}
|
||||
lastMessage={{
|
||||
|
|
@ -440,7 +536,9 @@ On platforms that show scrollbars all the time, this is true all the time.
|
|||
/>
|
||||
<ConversationListItem
|
||||
id="conversationId4"
|
||||
isAccepted
|
||||
phoneNumber="(202) 555-0011"
|
||||
title="(202) 555-0011"
|
||||
type={'direct'}
|
||||
lastUpdated={Date.now() - 365 * 24 * 60 * 60 * 1000}
|
||||
lastMessage={{
|
||||
|
|
@ -460,7 +558,9 @@ On platforms that show scrollbars all the time, this is true all the time.
|
|||
<div>
|
||||
<ConversationListItem
|
||||
id="conversationId1"
|
||||
isAccepted
|
||||
name="John"
|
||||
title="John"
|
||||
type={'direct'}
|
||||
lastUpdated={null}
|
||||
lastMessage={{
|
||||
|
|
@ -471,7 +571,9 @@ On platforms that show scrollbars all the time, this is true all the time.
|
|||
/>
|
||||
<ConversationListItem
|
||||
id="conversationId2"
|
||||
isAccepted
|
||||
name="Missing message"
|
||||
title="Missing message"
|
||||
type={'direct'}
|
||||
lastUpdated={Date.now() - 5 * 60 * 1000}
|
||||
lastMessage={{
|
||||
|
|
@ -482,7 +584,9 @@ On platforms that show scrollbars all the time, this is true all the time.
|
|||
/>
|
||||
<ConversationListItem
|
||||
id="conversationId3"
|
||||
isAccepted
|
||||
phoneNumber="(202) 555-0011"
|
||||
title="(202) 555-0011"
|
||||
type={'direct'}
|
||||
lastUpdated={Date.now() - 5 * 60 * 1000}
|
||||
lastMessage={{
|
||||
|
|
|
|||
|
|
@ -26,6 +26,7 @@ export type PropsData = {
|
|||
unreadCount?: number;
|
||||
isSelected: boolean;
|
||||
|
||||
isAccepted?: boolean;
|
||||
draftPreview?: string;
|
||||
shouldShowDraft?: boolean;
|
||||
|
||||
|
|
@ -152,6 +153,7 @@ export class ConversationListItem extends React.PureComponent<Props> {
|
|||
const {
|
||||
draftPreview,
|
||||
i18n,
|
||||
isAccepted,
|
||||
lastMessage,
|
||||
shouldShowDraft,
|
||||
typingContact,
|
||||
|
|
@ -187,7 +189,11 @@ export class ConversationListItem extends React.PureComponent<Props> {
|
|||
: null
|
||||
)}
|
||||
>
|
||||
{typingContact ? (
|
||||
{!isAccepted ? (
|
||||
<span className="module-conversation-list-item__message-request">
|
||||
{i18n('ConversationListItem--message-request')}
|
||||
</span>
|
||||
) : typingContact ? (
|
||||
<TypingAnimation i18n={i18n} />
|
||||
) : (
|
||||
<>
|
||||
|
|
|
|||
|
|
@ -13,6 +13,7 @@ export type Props = {
|
|||
membersCount?: number;
|
||||
phoneNumber?: string;
|
||||
onHeightChange?: () => unknown;
|
||||
updateSharedGroups?: () => unknown;
|
||||
} & Omit<AvatarProps, 'onClick' | 'size' | 'noteToSelf'>;
|
||||
|
||||
const renderMembershipRow = ({
|
||||
|
|
@ -113,6 +114,7 @@ export const ConversationHero = ({
|
|||
profileName,
|
||||
title,
|
||||
onHeightChange,
|
||||
updateSharedGroups,
|
||||
}: Props) => {
|
||||
const firstRenderRef = React.useRef(true);
|
||||
|
||||
|
|
@ -121,6 +123,11 @@ export const ConversationHero = ({
|
|||
// component may have changed. The cleanup function notifies listeners of
|
||||
// any potential height changes.
|
||||
return () => {
|
||||
// Kick off the expensive hydration of the current sharedGroupNames
|
||||
if (updateSharedGroups) {
|
||||
updateSharedGroups();
|
||||
}
|
||||
|
||||
if (onHeightChange && !firstRenderRef.current) {
|
||||
onHeightChange();
|
||||
} else {
|
||||
|
|
@ -135,7 +142,7 @@ export const ConversationHero = ({
|
|||
`mc-${membersCount}`,
|
||||
`n-${name}`,
|
||||
`pn-${profileName}`,
|
||||
...sharedGroupNames.map(g => `g-${g}`),
|
||||
sharedGroupNames.map(g => `g-${g}`).join(' '),
|
||||
]);
|
||||
|
||||
const phoneNumberOnly = Boolean(
|
||||
|
|
|
|||
|
|
@ -50,7 +50,11 @@ type PropsHousekeepingType = {
|
|||
actions: Object
|
||||
) => JSX.Element;
|
||||
renderLastSeenIndicator: (id: string) => JSX.Element;
|
||||
renderHeroRow: (id: string, resizeHeroRow: () => unknown) => JSX.Element;
|
||||
renderHeroRow: (
|
||||
id: string,
|
||||
resizeHeroRow: () => unknown,
|
||||
updateSharedGroups: () => unknown
|
||||
) => JSX.Element;
|
||||
renderLoadingRow: (id: string) => JSX.Element;
|
||||
renderTypingBubble: (id: string) => JSX.Element;
|
||||
};
|
||||
|
|
@ -70,6 +74,7 @@ type PropsActionsType = {
|
|||
markMessageRead: (messageId: string) => unknown;
|
||||
selectMessage: (messageId: string, conversationId: string) => unknown;
|
||||
clearSelectedMessage: () => unknown;
|
||||
updateSharedGroups: () => unknown;
|
||||
} & MessageActionsType &
|
||||
SafetyNumberActionsType;
|
||||
|
||||
|
|
@ -510,6 +515,7 @@ export class Timeline extends React.PureComponent<Props, State> {
|
|||
renderLoadingRow,
|
||||
renderLastSeenIndicator,
|
||||
renderTypingBubble,
|
||||
updateSharedGroups,
|
||||
} = this.props;
|
||||
|
||||
const styleWithWidth = {
|
||||
|
|
@ -524,7 +530,7 @@ export class Timeline extends React.PureComponent<Props, State> {
|
|||
if (haveOldest && row === 0) {
|
||||
rowContents = (
|
||||
<div data-row={row} style={styleWithWidth} role="row">
|
||||
{renderHeroRow(id, this.resizeHeroRow)}
|
||||
{renderHeroRow(id, this.resizeHeroRow, updateSharedGroups)}
|
||||
</div>
|
||||
);
|
||||
} else if (!haveOldest && row === 0) {
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue