Display user badges
This commit is contained in:
Evan Hahn
GitHub
parent
927c22ef73
commit
f647c4e053
95 changed files with 2891 additions and 424 deletions
|
|
@ -1,14 +1,14 @@
|
|||
// Copyright 2021 Signal Messenger, LLC
|
||||
// SPDX-License-Identifier: AGPL-3.0-only
|
||||
|
||||
import React from 'react';
|
||||
import React, { useContext } from 'react';
|
||||
import { times, omit } from 'lodash';
|
||||
|
||||
import { storiesOf } from '@storybook/react';
|
||||
import { action } from '@storybook/addon-actions';
|
||||
import { boolean, date, select, text } from '@storybook/addon-knobs';
|
||||
|
||||
import type { PropsType, Row } from './ConversationList';
|
||||
import type { Row } from './ConversationList';
|
||||
import { ConversationList, RowType } from './ConversationList';
|
||||
import { MessageSearchResult } from './conversationList/MessageSearchResult';
|
||||
import type { PropsData as ConversationListItemPropsType } from './conversationList/ConversationListItem';
|
||||
|
|
@ -17,6 +17,7 @@ import { ContactCheckboxDisabledReason } from './conversationList/ContactCheckbo
|
|||
import { getDefaultConversation } from '../test-both/helpers/getDefaultConversation';
|
||||
import { setupI18n } from '../util/setupI18n';
|
||||
import enMessages from '../../_locales/en/messages.json';
|
||||
import { StorybookThemeContext } from '../../.storybook/StorybookThemeContext';
|
||||
|
||||
const i18n = setupI18n('en', enMessages);
|
||||
|
||||
|
|
@ -46,52 +47,58 @@ const defaultConversations: Array<ConversationListItemPropsType> = [
|
|||
getDefaultConversation(),
|
||||
];
|
||||
|
||||
const createProps = (rows: ReadonlyArray<Row>): PropsType => ({
|
||||
dimensions: {
|
||||
width: 300,
|
||||
height: 350,
|
||||
},
|
||||
rowCount: rows.length,
|
||||
getRow: (index: number) => rows[index],
|
||||
shouldRecomputeRowHeights: false,
|
||||
i18n,
|
||||
onSelectConversation: action('onSelectConversation'),
|
||||
onClickArchiveButton: action('onClickArchiveButton'),
|
||||
onClickContactCheckbox: action('onClickContactCheckbox'),
|
||||
renderMessageSearchResult: (id: string) => (
|
||||
<MessageSearchResult
|
||||
body="Lorem ipsum wow"
|
||||
bodyRanges={[]}
|
||||
conversationId="marc-convo"
|
||||
from={defaultConversations[0]}
|
||||
const Wrapper = ({
|
||||
rows,
|
||||
scrollable,
|
||||
}: Readonly<{ rows: ReadonlyArray<Row>; scrollable?: boolean }>) => {
|
||||
const theme = useContext(StorybookThemeContext);
|
||||
|
||||
return (
|
||||
<ConversationList
|
||||
dimensions={{
|
||||
width: 300,
|
||||
height: 350,
|
||||
}}
|
||||
rowCount={rows.length}
|
||||
getRow={(index: number) => rows[index]}
|
||||
shouldRecomputeRowHeights={false}
|
||||
i18n={i18n}
|
||||
id={id}
|
||||
openConversationInternal={action('openConversationInternal')}
|
||||
sentAt={1587358800000}
|
||||
snippet="Lorem <<left>>ipsum<<right>> wow"
|
||||
to={defaultConversations[1]}
|
||||
onSelectConversation={action('onSelectConversation')}
|
||||
onClickArchiveButton={action('onClickArchiveButton')}
|
||||
onClickContactCheckbox={action('onClickContactCheckbox')}
|
||||
renderMessageSearchResult={(id: string) => (
|
||||
<MessageSearchResult
|
||||
body="Lorem ipsum wow"
|
||||
bodyRanges={[]}
|
||||
conversationId="marc-convo"
|
||||
from={defaultConversations[0]}
|
||||
i18n={i18n}
|
||||
id={id}
|
||||
openConversationInternal={action('openConversationInternal')}
|
||||
sentAt={1587358800000}
|
||||
snippet="Lorem <<left>>ipsum<<right>> wow"
|
||||
to={defaultConversations[1]}
|
||||
/>
|
||||
)}
|
||||
scrollable={scrollable}
|
||||
showChooseGroupMembers={action('showChooseGroupMembers')}
|
||||
startNewConversationFromPhoneNumber={action(
|
||||
'startNewConversationFromPhoneNumber'
|
||||
)}
|
||||
theme={theme}
|
||||
/>
|
||||
),
|
||||
showChooseGroupMembers: action('showChooseGroupMembers'),
|
||||
startNewConversationFromPhoneNumber: action(
|
||||
'startNewConversationFromPhoneNumber'
|
||||
),
|
||||
});
|
||||
);
|
||||
};
|
||||
|
||||
story.add('Archive button', () => (
|
||||
<ConversationList
|
||||
{...createProps([
|
||||
{
|
||||
type: RowType.ArchiveButton,
|
||||
archivedConversationsCount: 123,
|
||||
},
|
||||
])}
|
||||
<Wrapper
|
||||
rows={[{ type: RowType.ArchiveButton, archivedConversationsCount: 123 }]}
|
||||
/>
|
||||
));
|
||||
|
||||
story.add('Contact: note to self', () => (
|
||||
<ConversationList
|
||||
{...createProps([
|
||||
<Wrapper
|
||||
rows={[
|
||||
{
|
||||
type: RowType.Contact,
|
||||
contact: {
|
||||
|
|
@ -100,35 +107,30 @@ story.add('Contact: note to self', () => (
|
|||
about: '🤠 should be ignored',
|
||||
},
|
||||
},
|
||||
])}
|
||||
]}
|
||||
/>
|
||||
));
|
||||
|
||||
story.add('Contact: direct', () => (
|
||||
<ConversationList
|
||||
{...createProps([
|
||||
{
|
||||
type: RowType.Contact,
|
||||
contact: defaultConversations[0],
|
||||
},
|
||||
])}
|
||||
<Wrapper
|
||||
rows={[{ type: RowType.Contact, contact: defaultConversations[0] }]}
|
||||
/>
|
||||
));
|
||||
|
||||
story.add('Contact: direct with short about', () => (
|
||||
<ConversationList
|
||||
{...createProps([
|
||||
<Wrapper
|
||||
rows={[
|
||||
{
|
||||
type: RowType.Contact,
|
||||
contact: { ...defaultConversations[0], about: '🤠 yee haw' },
|
||||
},
|
||||
])}
|
||||
]}
|
||||
/>
|
||||
));
|
||||
|
||||
story.add('Contact: direct with long about', () => (
|
||||
<ConversationList
|
||||
{...createProps([
|
||||
<Wrapper
|
||||
rows={[
|
||||
{
|
||||
type: RowType.Contact,
|
||||
contact: {
|
||||
|
|
@ -137,24 +139,24 @@ story.add('Contact: direct with long about', () => (
|
|||
'🤠 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a diam lectus. Sed sit amet ipsum mauris. Maecenas congue ligula ac quam viverra nec consectetur ante hendrerit. Donec et mollis dolor. Praesent et diam eget libero egestas mattis sit amet vitae augue.',
|
||||
},
|
||||
},
|
||||
])}
|
||||
]}
|
||||
/>
|
||||
));
|
||||
|
||||
story.add('Contact: group', () => (
|
||||
<ConversationList
|
||||
{...createProps([
|
||||
<Wrapper
|
||||
rows={[
|
||||
{
|
||||
type: RowType.Contact,
|
||||
contact: { ...defaultConversations[0], type: 'group' },
|
||||
},
|
||||
])}
|
||||
]}
|
||||
/>
|
||||
));
|
||||
|
||||
story.add('Contact checkboxes', () => (
|
||||
<ConversationList
|
||||
{...createProps([
|
||||
<Wrapper
|
||||
rows={[
|
||||
{
|
||||
type: RowType.ContactCheckbox,
|
||||
contact: defaultConversations[0],
|
||||
|
|
@ -173,13 +175,13 @@ story.add('Contact checkboxes', () => (
|
|||
},
|
||||
isChecked: true,
|
||||
},
|
||||
])}
|
||||
]}
|
||||
/>
|
||||
));
|
||||
|
||||
story.add('Contact checkboxes: disabled', () => (
|
||||
<ConversationList
|
||||
{...createProps([
|
||||
<Wrapper
|
||||
rows={[
|
||||
{
|
||||
type: RowType.ContactCheckbox,
|
||||
contact: defaultConversations[0],
|
||||
|
|
@ -204,7 +206,7 @@ story.add('Contact checkboxes: disabled', () => (
|
|||
isChecked: true,
|
||||
disabledReason: ContactCheckboxDisabledReason.AlreadyAdded,
|
||||
},
|
||||
])}
|
||||
]}
|
||||
/>
|
||||
));
|
||||
|
||||
|
|
@ -219,6 +221,7 @@ story.add('Contact checkboxes: disabled', () => (
|
|||
? overrideProps.acceptedMessageRequest
|
||||
: true
|
||||
),
|
||||
badges: [],
|
||||
isMe: boolean('isMe', overrideProps.isMe || false),
|
||||
avatarPath: text('avatarPath', overrideProps.avatarPath || ''),
|
||||
id: overrideProps.id || '',
|
||||
|
|
@ -246,13 +249,13 @@ story.add('Contact checkboxes: disabled', () => (
|
|||
const renderConversation = (
|
||||
overrideProps: Partial<ConversationListItemPropsType> = {}
|
||||
) => (
|
||||
<ConversationList
|
||||
{...createProps([
|
||||
<Wrapper
|
||||
rows={[
|
||||
{
|
||||
type: RowType.Conversation,
|
||||
conversation: createConversation(overrideProps),
|
||||
},
|
||||
])}
|
||||
]}
|
||||
/>
|
||||
);
|
||||
|
||||
|
|
@ -278,15 +281,13 @@ story.add('Contact checkboxes: disabled', () => (
|
|||
);
|
||||
|
||||
story.add('Conversations: Message Statuses', () => (
|
||||
<ConversationList
|
||||
{...createProps(
|
||||
MessageStatuses.map(status => ({
|
||||
type: RowType.Conversation,
|
||||
conversation: createConversation({
|
||||
lastMessage: { text: status, status, deletedForEveryone: false },
|
||||
}),
|
||||
}))
|
||||
)}
|
||||
<Wrapper
|
||||
rows={MessageStatuses.map(status => ({
|
||||
type: RowType.Conversation,
|
||||
conversation: createConversation({
|
||||
lastMessage: { text: status, status, deletedForEveryone: false },
|
||||
}),
|
||||
}))}
|
||||
/>
|
||||
));
|
||||
|
||||
|
|
@ -324,20 +325,18 @@ story.add('Contact checkboxes: disabled', () => (
|
|||
);
|
||||
|
||||
story.add('Conversations: unread count', () => (
|
||||
<ConversationList
|
||||
{...createProps(
|
||||
[4, 10, 34, 250].map(unreadCount => ({
|
||||
type: RowType.Conversation,
|
||||
conversation: createConversation({
|
||||
lastMessage: {
|
||||
text: 'Hey there!',
|
||||
status: 'delivered',
|
||||
deletedForEveryone: false,
|
||||
},
|
||||
unreadCount,
|
||||
}),
|
||||
}))
|
||||
)}
|
||||
<Wrapper
|
||||
rows={[4, 10, 34, 250].map(unreadCount => ({
|
||||
type: RowType.Conversation,
|
||||
conversation: createConversation({
|
||||
lastMessage: {
|
||||
text: 'Hey there!',
|
||||
status: 'delivered',
|
||||
deletedForEveryone: false,
|
||||
},
|
||||
unreadCount,
|
||||
}),
|
||||
}))}
|
||||
/>
|
||||
));
|
||||
|
||||
|
|
@ -396,19 +395,17 @@ Line 4, well.`,
|
|||
];
|
||||
|
||||
return (
|
||||
<ConversationList
|
||||
{...createProps(
|
||||
messages.map(messageText => ({
|
||||
type: RowType.Conversation,
|
||||
conversation: createConversation({
|
||||
lastMessage: {
|
||||
text: messageText,
|
||||
status: 'read',
|
||||
deletedForEveryone: false,
|
||||
},
|
||||
}),
|
||||
}))
|
||||
)}
|
||||
<Wrapper
|
||||
rows={messages.map(messageText => ({
|
||||
type: RowType.Conversation,
|
||||
conversation: createConversation({
|
||||
lastMessage: {
|
||||
text: messageText,
|
||||
status: 'read',
|
||||
deletedForEveryone: false,
|
||||
},
|
||||
}),
|
||||
}))}
|
||||
/>
|
||||
);
|
||||
});
|
||||
|
|
@ -422,20 +419,18 @@ Line 4, well.`,
|
|||
];
|
||||
|
||||
return (
|
||||
<ConversationList
|
||||
{...createProps(
|
||||
pairs.map(([lastUpdated, messageText]) => ({
|
||||
type: RowType.Conversation,
|
||||
conversation: createConversation({
|
||||
lastUpdated,
|
||||
lastMessage: {
|
||||
text: messageText,
|
||||
status: 'read',
|
||||
deletedForEveryone: false,
|
||||
},
|
||||
}),
|
||||
}))
|
||||
)}
|
||||
<Wrapper
|
||||
rows={pairs.map(([lastUpdated, messageText]) => ({
|
||||
type: RowType.Conversation,
|
||||
conversation: createConversation({
|
||||
lastUpdated,
|
||||
lastMessage: {
|
||||
text: messageText,
|
||||
status: 'read',
|
||||
deletedForEveryone: false,
|
||||
},
|
||||
}),
|
||||
}))}
|
||||
/>
|
||||
);
|
||||
});
|
||||
|
|
@ -446,7 +441,7 @@ Line 4, well.`,
|
|||
conversation: omit(createConversation(), 'lastUpdated'),
|
||||
};
|
||||
|
||||
return <ConversationList {...createProps([row])} />;
|
||||
return <Wrapper rows={[row]} />;
|
||||
});
|
||||
|
||||
story.add('Conversation: Missing Message', () => {
|
||||
|
|
@ -455,7 +450,7 @@ Line 4, well.`,
|
|||
conversation: omit(createConversation(), 'lastMessage'),
|
||||
};
|
||||
|
||||
return <ConversationList {...createProps([row])} />;
|
||||
return <Wrapper rows={[row]} />;
|
||||
});
|
||||
|
||||
story.add('Conversation: Missing Text', () =>
|
||||
|
|
@ -488,8 +483,8 @@ Line 4, well.`,
|
|||
}
|
||||
|
||||
story.add('Headers', () => (
|
||||
<ConversationList
|
||||
{...createProps([
|
||||
<Wrapper
|
||||
rows={[
|
||||
{
|
||||
type: RowType.Header,
|
||||
i18nKey: 'conversationsHeader',
|
||||
|
|
@ -498,36 +493,36 @@ story.add('Headers', () => (
|
|||
type: RowType.Header,
|
||||
i18nKey: 'messagesHeader',
|
||||
},
|
||||
])}
|
||||
]}
|
||||
/>
|
||||
));
|
||||
|
||||
story.add('Start new conversation', () => (
|
||||
<ConversationList
|
||||
{...createProps([
|
||||
<Wrapper
|
||||
rows={[
|
||||
{
|
||||
type: RowType.StartNewConversation,
|
||||
phoneNumber: '+12345559876',
|
||||
},
|
||||
])}
|
||||
]}
|
||||
/>
|
||||
));
|
||||
|
||||
story.add('Search results loading skeleton', () => (
|
||||
<ConversationList
|
||||
<Wrapper
|
||||
scrollable={false}
|
||||
{...createProps([
|
||||
rows={[
|
||||
{ type: RowType.SearchResultsLoadingFakeHeader },
|
||||
...times(99, () => ({
|
||||
type: RowType.SearchResultsLoadingFakeRow as const,
|
||||
})),
|
||||
])}
|
||||
]}
|
||||
/>
|
||||
));
|
||||
|
||||
story.add('Kitchen sink', () => (
|
||||
<ConversationList
|
||||
{...createProps([
|
||||
<Wrapper
|
||||
rows={[
|
||||
{
|
||||
type: RowType.StartNewConversation,
|
||||
phoneNumber: '+12345559876',
|
||||
|
|
@ -552,6 +547,6 @@ story.add('Kitchen sink', () => (
|
|||
type: RowType.ArchiveButton,
|
||||
archivedConversationsCount: 123,
|
||||
},
|
||||
])}
|
||||
]}
|
||||
/>
|
||||
));
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue