Migrate ConversationListItem to Storybook
This commit is contained in:
Sidney Keese
Josh Perez
parent
de72a2f6c6
commit
db7aa6223f
3 changed files with 261 additions and 623 deletions
|
|
@ -1,615 +0,0 @@
|
||||||
#### With name and profile
|
|
||||||
|
|
||||||
```jsx
|
|
||||||
<util.LeftPaneContext theme={util.theme}>
|
|
||||||
<ConversationListItem
|
|
||||||
id="conversationId1"
|
|
||||||
isAccepted
|
|
||||||
title="Someone 🔥 Somewhere"
|
|
||||||
name="Someone 🔥 Somewhere"
|
|
||||||
type={'direct'}
|
|
||||||
phoneNumber="(202) 555-0011"
|
|
||||||
avatarPath={util.gifObjectUrl}
|
|
||||||
lastUpdated={Date.now() - 5 * 60 * 1000}
|
|
||||||
lastMessage={{
|
|
||||||
text: "What's going on?",
|
|
||||||
status: 'sent',
|
|
||||||
}}
|
|
||||||
onClick={result => console.log('onClick', result)}
|
|
||||||
i18n={util.i18n}
|
|
||||||
/>
|
|
||||||
</util.LeftPaneContext>
|
|
||||||
```
|
|
||||||
|
|
||||||
#### Profile, with name, no avatar
|
|
||||||
|
|
||||||
```jsx
|
|
||||||
<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}
|
|
||||||
lastMessage={{
|
|
||||||
text: 'Just a second',
|
|
||||||
status: 'read',
|
|
||||||
}}
|
|
||||||
onClick={result => console.log('onClick', result)}
|
|
||||||
i18n={util.i18n}
|
|
||||||
/>
|
|
||||||
</util.LeftPaneContext>
|
|
||||||
```
|
|
||||||
|
|
||||||
#### Conversation with yourself
|
|
||||||
|
|
||||||
```jsx
|
|
||||||
<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}
|
|
||||||
lastMessage={{
|
|
||||||
text: 'Just a second',
|
|
||||||
status: 'read',
|
|
||||||
}}
|
|
||||||
onClick={result => console.log('onClick', result)}
|
|
||||||
i18n={util.i18n}
|
|
||||||
/>
|
|
||||||
</util.LeftPaneContext>
|
|
||||||
```
|
|
||||||
|
|
||||||
#### All types of status
|
|
||||||
|
|
||||||
```jsx
|
|
||||||
<util.LeftPaneContext theme={util.theme}>
|
|
||||||
<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}
|
|
||||||
lastMessage={{
|
|
||||||
text: 'Sending',
|
|
||||||
status: 'sending',
|
|
||||||
}}
|
|
||||||
onClick={result => console.log('onClick', result)}
|
|
||||||
i18n={util.i18n}
|
|
||||||
/>
|
|
||||||
<ConversationListItem
|
|
||||||
id="conversationId2"
|
|
||||||
isAccepted
|
|
||||||
phoneNumber="(202) 555-0011"
|
|
||||||
type={'direct'}
|
|
||||||
title="Mr. Fire🔥"
|
|
||||||
name="Mr. Fire🔥"
|
|
||||||
color="green"
|
|
||||||
lastUpdated={Date.now() - 5 * 60 * 1000}
|
|
||||||
lastMessage={{
|
|
||||||
text: 'Sent',
|
|
||||||
status: 'sent',
|
|
||||||
}}
|
|
||||||
onClick={result => console.log('onClick', result)}
|
|
||||||
i18n={util.i18n}
|
|
||||||
/>
|
|
||||||
<ConversationListItem
|
|
||||||
id="conversationId3"
|
|
||||||
isAccepted
|
|
||||||
phoneNumber="(202) 555-0011"
|
|
||||||
type={'direct'}
|
|
||||||
title="Mr. Fire🔥"
|
|
||||||
name="Mr. Fire🔥"
|
|
||||||
color="green"
|
|
||||||
lastUpdated={Date.now() - 5 * 60 * 1000}
|
|
||||||
lastMessage={{
|
|
||||||
text: 'Delivered',
|
|
||||||
status: 'delivered',
|
|
||||||
}}
|
|
||||||
onClick={result => console.log('onClick', result)}
|
|
||||||
i18n={util.i18n}
|
|
||||||
/>
|
|
||||||
<ConversationListItem
|
|
||||||
id="conversationId4"
|
|
||||||
isAccepted
|
|
||||||
phoneNumber="(202) 555-0011"
|
|
||||||
type={'direct'}
|
|
||||||
title="Mr. Fire🔥"
|
|
||||||
name="Mr. Fire🔥"
|
|
||||||
color="green"
|
|
||||||
lastUpdated={Date.now() - 5 * 60 * 1000}
|
|
||||||
lastMessage={{
|
|
||||||
text: 'Read',
|
|
||||||
status: 'read',
|
|
||||||
}}
|
|
||||||
onClick={result => console.log('onClick', result)}
|
|
||||||
i18n={util.i18n}
|
|
||||||
/>
|
|
||||||
<ConversationListItem
|
|
||||||
id="conversationId5"
|
|
||||||
isAccepted
|
|
||||||
phoneNumber="(202) 555-0011"
|
|
||||||
type={'direct'}
|
|
||||||
title="Mr. Fire🔥"
|
|
||||||
name="Mr. Fire🔥"
|
|
||||||
color="green"
|
|
||||||
lastUpdated={Date.now() - 5 * 60 * 1000}
|
|
||||||
lastMessage={{
|
|
||||||
text: 'Error',
|
|
||||||
status: 'error',
|
|
||||||
}}
|
|
||||||
onClick={result => console.log('onClick', result)}
|
|
||||||
i18n={util.i18n}
|
|
||||||
/>
|
|
||||||
<ConversationListItem
|
|
||||||
id="conversationId5"
|
|
||||||
phoneNumber="(202) 555-0011"
|
|
||||||
type={'direct'}
|
|
||||||
name="Mr. Fire🔥"
|
|
||||||
color="green"
|
|
||||||
lastUpdated={Date.now() - 5 * 60 * 1000}
|
|
||||||
lastMessage={{
|
|
||||||
text: 'Partially Sent',
|
|
||||||
status: 'partial-sent',
|
|
||||||
}}
|
|
||||||
onClick={result => console.log('onClick', result)}
|
|
||||||
i18n={util.i18n}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</util.LeftPaneContext>
|
|
||||||
```
|
|
||||||
|
|
||||||
#### Is typing
|
|
||||||
|
|
||||||
```jsx
|
|
||||||
<util.LeftPaneContext theme={util.theme}>
|
|
||||||
<div>
|
|
||||||
<ConversationListItem
|
|
||||||
id="conversationId1"
|
|
||||||
isAccepted
|
|
||||||
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
|
|
||||||
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}
|
|
||||||
typingContact={{
|
|
||||||
name: 'Someone Here',
|
|
||||||
}}
|
|
||||||
lastMessage={{
|
|
||||||
status: 'read',
|
|
||||||
}}
|
|
||||||
onClick={result => console.log('onClick', result)}
|
|
||||||
i18n={util.i18n}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</util.LeftPaneContext>
|
|
||||||
```
|
|
||||||
|
|
||||||
#### Selected
|
|
||||||
|
|
||||||
#### With unread
|
|
||||||
|
|
||||||
```jsx
|
|
||||||
<util.LeftPaneContext theme={util.theme}>
|
|
||||||
<div>
|
|
||||||
<ConversationListItem
|
|
||||||
id="conversationId1"
|
|
||||||
isAccepted
|
|
||||||
phoneNumber="(202) 555-0011"
|
|
||||||
title="(202) 555-0011"
|
|
||||||
type={'direct'}
|
|
||||||
unreadCount={4}
|
|
||||||
lastUpdated={Date.now() - 5 * 60 * 1000}
|
|
||||||
lastMessage={{
|
|
||||||
text: 'Hey there!',
|
|
||||||
}}
|
|
||||||
onClick={result => console.log('onClick', result)}
|
|
||||||
i18n={util.i18n}
|
|
||||||
/>
|
|
||||||
<ConversationListItem
|
|
||||||
id="conversationId2"
|
|
||||||
isAccepted
|
|
||||||
phoneNumber="(202) 555-0011"
|
|
||||||
title="(202) 555-0011"
|
|
||||||
type={'direct'}
|
|
||||||
unreadCount={10}
|
|
||||||
lastUpdated={Date.now() - 5 * 60 * 1000}
|
|
||||||
lastMessage={{
|
|
||||||
text: 'Hey there!',
|
|
||||||
}}
|
|
||||||
onClick={result => console.log('onClick', result)}
|
|
||||||
i18n={util.i18n}
|
|
||||||
/>
|
|
||||||
<ConversationListItem
|
|
||||||
id="conversationId3"
|
|
||||||
isAccepted
|
|
||||||
phoneNumber="(202) 555-0011"
|
|
||||||
title="(202) 555-0011"
|
|
||||||
type={'direct'}
|
|
||||||
unreadCount={250}
|
|
||||||
lastUpdated={Date.now() - 5 * 60 * 1000}
|
|
||||||
lastMessage={{
|
|
||||||
text: 'Hey there!',
|
|
||||||
}}
|
|
||||||
onClick={result => console.log('onClick', result)}
|
|
||||||
i18n={util.i18n}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</util.LeftPaneContext>
|
|
||||||
```
|
|
||||||
|
|
||||||
#### Selected
|
|
||||||
|
|
||||||
```jsx
|
|
||||||
<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}
|
|
||||||
lastMessage={{
|
|
||||||
text: 'Hey there!',
|
|
||||||
}}
|
|
||||||
onClick={result => console.log('onClick', result)}
|
|
||||||
i18n={util.i18n}
|
|
||||||
/>
|
|
||||||
</util.LeftPaneContext>
|
|
||||||
```
|
|
||||||
|
|
||||||
#### With emoji/links in message, no status
|
|
||||||
|
|
||||||
We don't want Jumbomoji or links.
|
|
||||||
|
|
||||||
```jsx
|
|
||||||
<util.LeftPaneContext theme={util.theme}>
|
|
||||||
<div>
|
|
||||||
<ConversationListItem
|
|
||||||
id="conversationId1"
|
|
||||||
isAccepted
|
|
||||||
phoneNumber="(202) 555-0011"
|
|
||||||
title="(202) 555-0011"
|
|
||||||
type={'direct'}
|
|
||||||
lastUpdated={Date.now() - 5 * 60 * 1000}
|
|
||||||
lastMessage={{
|
|
||||||
text: 'Download at http://signal.org',
|
|
||||||
}}
|
|
||||||
onClick={result => console.log('onClick', result)}
|
|
||||||
i18n={util.i18n}
|
|
||||||
/>
|
|
||||||
<ConversationListItem
|
|
||||||
id="conversationId2"
|
|
||||||
isAccepted
|
|
||||||
phoneNumber="(202) 555-0011"
|
|
||||||
title="(202) 555-0011"
|
|
||||||
type={'direct'}
|
|
||||||
lastUpdated={Date.now() - 5 * 60 * 1000}
|
|
||||||
lastMessage={{
|
|
||||||
text: '🔥',
|
|
||||||
}}
|
|
||||||
onClick={result => console.log('onClick', result)}
|
|
||||||
i18n={util.i18n}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</util.LeftPaneContext>
|
|
||||||
```
|
|
||||||
|
|
||||||
#### Long content
|
|
||||||
|
|
||||||
We only show one line.
|
|
||||||
|
|
||||||
```jsx
|
|
||||||
<util.LeftPaneContext theme={util.theme}>
|
|
||||||
<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}
|
|
||||||
lastMessage={{
|
|
||||||
text: 'Normal message',
|
|
||||||
}}
|
|
||||||
onClick={result => console.log('onClick', result)}
|
|
||||||
i18n={util.i18n}
|
|
||||||
/>
|
|
||||||
<ConversationListItem
|
|
||||||
id="conversationId2"
|
|
||||||
isAccepted
|
|
||||||
phoneNumber="(202) 555-0011"
|
|
||||||
title="(202) 555-0011"
|
|
||||||
type={'direct'}
|
|
||||||
lastUpdated={Date.now() - 5 * 60 * 1000}
|
|
||||||
lastMessage={{
|
|
||||||
text:
|
|
||||||
"Long line. This is a really really really long line. Really really long. Because that's just how it is",
|
|
||||||
}}
|
|
||||||
onClick={result => console.log('onClick', result)}
|
|
||||||
i18n={util.i18n}
|
|
||||||
/>
|
|
||||||
<ConversationListItem
|
|
||||||
id="conversationId3"
|
|
||||||
isAccepted
|
|
||||||
phoneNumber="(202) 555-0011"
|
|
||||||
title="(202) 555-0011"
|
|
||||||
type={'direct'}
|
|
||||||
lastUpdated={Date.now() - 5 * 60 * 1000}
|
|
||||||
lastMessage={{
|
|
||||||
text:
|
|
||||||
"Long line. This is a really really really long line. Really really long. Because that's just how it is",
|
|
||||||
status: 'read',
|
|
||||||
}}
|
|
||||||
onClick={result => console.log('onClick', result)}
|
|
||||||
i18n={util.i18n}
|
|
||||||
/>
|
|
||||||
|
|
||||||
<ConversationListItem
|
|
||||||
id="conversationId4"
|
|
||||||
isAccepted
|
|
||||||
phoneNumber="(202) 555-0011"
|
|
||||||
title="(202) 555-0011"
|
|
||||||
type={'direct'}
|
|
||||||
lastUpdated={Date.now() - 5 * 60 * 1000}
|
|
||||||
unreadCount={8}
|
|
||||||
lastMessage={{
|
|
||||||
text:
|
|
||||||
"Long line. This is a really really really long line. Really really long. Because that's just how it is",
|
|
||||||
}}
|
|
||||||
onClick={result => console.log('onClick', result)}
|
|
||||||
i18n={util.i18n}
|
|
||||||
/>
|
|
||||||
<ConversationListItem
|
|
||||||
id="conversationId5"
|
|
||||||
isAccepted
|
|
||||||
phoneNumber="(202) 555-0011"
|
|
||||||
title="(202) 555-0011"
|
|
||||||
type={'direct'}
|
|
||||||
lastUpdated={Date.now() - 5 * 60 * 1000}
|
|
||||||
lastMessage={{
|
|
||||||
text:
|
|
||||||
"Many lines. This is a many-line message.\nLine 2 is really exciting but it shouldn't be seen.\nLine three is even better.\nLine 4, well.",
|
|
||||||
}}
|
|
||||||
onClick={result => console.log('onClick', result)}
|
|
||||||
i18n={util.i18n}
|
|
||||||
/>
|
|
||||||
<ConversationListItem
|
|
||||||
id="conversationId6"
|
|
||||||
isAccepted
|
|
||||||
phoneNumber="(202) 555-0011"
|
|
||||||
title="(202) 555-0011"
|
|
||||||
type={'direct'}
|
|
||||||
lastUpdated={Date.now() - 5 * 60 * 1000}
|
|
||||||
lastMessage={{
|
|
||||||
text:
|
|
||||||
"Many lines. This is a many-line message.\nLine 2 is really exciting but it shouldn't be seen.\nLine three is even better.\nLine 4, well.",
|
|
||||||
status: 'delivered',
|
|
||||||
}}
|
|
||||||
onClick={result => console.log('onClick', result)}
|
|
||||||
i18n={util.i18n}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</util.LeftPaneContext>
|
|
||||||
```
|
|
||||||
|
|
||||||
#### More narrow
|
|
||||||
|
|
||||||
On platforms that show scrollbars all the time, this is true all the time.
|
|
||||||
|
|
||||||
```jsx
|
|
||||||
<util.LeftPaneContext theme={util.theme}>
|
|
||||||
<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}
|
|
||||||
lastMessage={{
|
|
||||||
text: 'Normal message',
|
|
||||||
}}
|
|
||||||
onClick={result => console.log('onClick', result)}
|
|
||||||
i18n={util.i18n}
|
|
||||||
/>
|
|
||||||
<ConversationListItem
|
|
||||||
id="conversationId2"
|
|
||||||
isAccepted
|
|
||||||
phoneNumber="(202) 555-0011"
|
|
||||||
title="(202) 555-0011"
|
|
||||||
type={'direct'}
|
|
||||||
lastUpdated={Date.now() - 5 * 60 * 1000}
|
|
||||||
lastMessage={{
|
|
||||||
text:
|
|
||||||
"Long line. This is a really really really long line. Really really long. Because that's just how it is",
|
|
||||||
}}
|
|
||||||
onClick={result => console.log('onClick', result)}
|
|
||||||
i18n={util.i18n}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</util.LeftPaneContext>
|
|
||||||
```
|
|
||||||
|
|
||||||
#### With various ages
|
|
||||||
|
|
||||||
```jsx
|
|
||||||
<util.LeftPaneContext theme={util.theme}>
|
|
||||||
<div>
|
|
||||||
<ConversationListItem
|
|
||||||
id="conversationId1"
|
|
||||||
isAccepted
|
|
||||||
phoneNumber="(202) 555-0011"
|
|
||||||
title="(202) 555-0011"
|
|
||||||
type={'direct'}
|
|
||||||
lastUpdated={Date.now() - 5 * 60 * 60 * 1000}
|
|
||||||
lastMessage={{
|
|
||||||
text: 'Five hours ago',
|
|
||||||
}}
|
|
||||||
onClick={result => console.log('onClick', result)}
|
|
||||||
i18n={util.i18n}
|
|
||||||
/>
|
|
||||||
<ConversationListItem
|
|
||||||
id="conversationId2"
|
|
||||||
isAccepted
|
|
||||||
phoneNumber="(202) 555-0011"
|
|
||||||
title="(202) 555-0011"
|
|
||||||
type={'direct'}
|
|
||||||
lastUpdated={Date.now() - 24 * 60 * 60 * 1000}
|
|
||||||
lastMessage={{
|
|
||||||
text: 'One day ago',
|
|
||||||
}}
|
|
||||||
onClick={result => console.log('onClick', result)}
|
|
||||||
i18n={util.i18n}
|
|
||||||
/>
|
|
||||||
<ConversationListItem
|
|
||||||
id="conversationId3"
|
|
||||||
isAccepted
|
|
||||||
phoneNumber="(202) 555-0011"
|
|
||||||
title="(202) 555-0011"
|
|
||||||
type={'direct'}
|
|
||||||
lastUpdated={Date.now() - 7 * 24 * 60 * 60 * 1000}
|
|
||||||
lastMessage={{
|
|
||||||
text: 'One week ago',
|
|
||||||
}}
|
|
||||||
onClick={result => console.log('onClick', result)}
|
|
||||||
i18n={util.i18n}
|
|
||||||
/>
|
|
||||||
<ConversationListItem
|
|
||||||
id="conversationId4"
|
|
||||||
isAccepted
|
|
||||||
phoneNumber="(202) 555-0011"
|
|
||||||
title="(202) 555-0011"
|
|
||||||
type={'direct'}
|
|
||||||
lastUpdated={Date.now() - 365 * 24 * 60 * 60 * 1000}
|
|
||||||
lastMessage={{
|
|
||||||
text: 'One year ago',
|
|
||||||
}}
|
|
||||||
onClick={result => console.log('onClick', result)}
|
|
||||||
i18n={util.i18n}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</util.LeftPaneContext>
|
|
||||||
```
|
|
||||||
|
|
||||||
#### Missing data
|
|
||||||
|
|
||||||
```jsx
|
|
||||||
<util.LeftPaneContext theme={util.theme}>
|
|
||||||
<div>
|
|
||||||
<ConversationListItem
|
|
||||||
id="conversationId1"
|
|
||||||
isAccepted
|
|
||||||
name="John"
|
|
||||||
title="John"
|
|
||||||
type={'direct'}
|
|
||||||
lastUpdated={null}
|
|
||||||
lastMessage={{
|
|
||||||
text: 'Missing last updated',
|
|
||||||
}}
|
|
||||||
onClick={result => console.log('onClick', result)}
|
|
||||||
i18n={util.i18n}
|
|
||||||
/>
|
|
||||||
<ConversationListItem
|
|
||||||
id="conversationId2"
|
|
||||||
isAccepted
|
|
||||||
name="Missing message"
|
|
||||||
title="Missing message"
|
|
||||||
type={'direct'}
|
|
||||||
lastUpdated={Date.now() - 5 * 60 * 1000}
|
|
||||||
lastMessage={{
|
|
||||||
text: null,
|
|
||||||
}}
|
|
||||||
onClick={result => console.log('onClick', result)}
|
|
||||||
i18n={util.i18n}
|
|
||||||
/>
|
|
||||||
<ConversationListItem
|
|
||||||
id="conversationId3"
|
|
||||||
isAccepted
|
|
||||||
phoneNumber="(202) 555-0011"
|
|
||||||
title="(202) 555-0011"
|
|
||||||
type={'direct'}
|
|
||||||
lastUpdated={Date.now() - 5 * 60 * 1000}
|
|
||||||
lastMessage={{
|
|
||||||
text: null,
|
|
||||||
status: 'sent',
|
|
||||||
}}
|
|
||||||
onClick={result => console.log('onClick', result)}
|
|
||||||
i18n={util.i18n}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</util.LeftPaneContext>
|
|
||||||
```
|
|
||||||
248
ts/components/ConversationListItem.stories.tsx
Normal file
248
ts/components/ConversationListItem.stories.tsx
Normal file
|
|
@ -0,0 +1,248 @@
|
||||||
|
import * as React from 'react';
|
||||||
|
import { storiesOf } from '@storybook/react';
|
||||||
|
|
||||||
|
import {
|
||||||
|
ConversationListItem,
|
||||||
|
MessageStatuses,
|
||||||
|
Props,
|
||||||
|
} from './ConversationListItem';
|
||||||
|
|
||||||
|
// tslint:disable-next-line
|
||||||
|
import 'draft-js/dist/Draft.css';
|
||||||
|
|
||||||
|
// @ts-ignore
|
||||||
|
import { setup as setupI18n } from '../../js/modules/i18n';
|
||||||
|
|
||||||
|
// @ts-ignore
|
||||||
|
import enMessages from '../../_locales/en/messages.json';
|
||||||
|
import { action } from '@storybook/addon-actions';
|
||||||
|
import { boolean, date, select, text } from '@storybook/addon-knobs';
|
||||||
|
|
||||||
|
const i18n = setupI18n('en', enMessages);
|
||||||
|
|
||||||
|
const story = storiesOf('Components/ConversationListItem', module);
|
||||||
|
|
||||||
|
story.addDecorator(storyFn => (
|
||||||
|
<div style={{ width: '300px' }}>{storyFn()}</div>
|
||||||
|
));
|
||||||
|
|
||||||
|
const createProps = (overrideProps: Partial<Props> = {}): Props => ({
|
||||||
|
...overrideProps,
|
||||||
|
i18n,
|
||||||
|
isAccepted: boolean(
|
||||||
|
'isAccepted',
|
||||||
|
overrideProps.isAccepted !== undefined ? overrideProps.isAccepted : true
|
||||||
|
),
|
||||||
|
isMe: boolean('isMe', overrideProps.isMe || false),
|
||||||
|
avatarPath: text('avatarPath', overrideProps.avatarPath || ''),
|
||||||
|
id: overrideProps.id || '',
|
||||||
|
isSelected: boolean('isSelected', overrideProps.isSelected || false),
|
||||||
|
title: text('title', overrideProps.title || 'Some Person'),
|
||||||
|
name: overrideProps.name || 'Some Person',
|
||||||
|
type: overrideProps.type || 'direct',
|
||||||
|
onClick: action('onClick'),
|
||||||
|
lastMessage: overrideProps.lastMessage || {
|
||||||
|
text: text('lastMessage.text', 'Hi there!'),
|
||||||
|
status: select(
|
||||||
|
'status',
|
||||||
|
MessageStatuses.reduce((m, s) => ({ ...m, [s]: s }), {}),
|
||||||
|
'read'
|
||||||
|
),
|
||||||
|
},
|
||||||
|
lastUpdated: date(
|
||||||
|
'lastUpdated',
|
||||||
|
new Date(overrideProps.lastUpdated || Date.now() - 5 * 60 * 1000)
|
||||||
|
),
|
||||||
|
});
|
||||||
|
|
||||||
|
story.add('Name', () => {
|
||||||
|
const props = createProps();
|
||||||
|
|
||||||
|
return <ConversationListItem {...props} />;
|
||||||
|
});
|
||||||
|
|
||||||
|
story.add('Name and Avatar', () => {
|
||||||
|
const props = createProps({
|
||||||
|
avatarPath: '/fixtures/kitten-1-64-64.jpg',
|
||||||
|
});
|
||||||
|
|
||||||
|
return <ConversationListItem {...props} />;
|
||||||
|
});
|
||||||
|
|
||||||
|
story.add('Conversation with Yourself', () => {
|
||||||
|
const props = createProps({
|
||||||
|
lastMessage: {
|
||||||
|
text: 'Just a second',
|
||||||
|
status: 'read',
|
||||||
|
},
|
||||||
|
name: 'Myself',
|
||||||
|
title: 'Myself',
|
||||||
|
isMe: true,
|
||||||
|
});
|
||||||
|
|
||||||
|
return <ConversationListItem {...props} />;
|
||||||
|
});
|
||||||
|
|
||||||
|
story.add('Message Statuses', () => {
|
||||||
|
return MessageStatuses.map(status => {
|
||||||
|
const props = createProps({
|
||||||
|
lastMessage: {
|
||||||
|
text: status,
|
||||||
|
status,
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
return <ConversationListItem key={status} {...props} />;
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
story.add('Typing Status', () => {
|
||||||
|
const props = createProps({
|
||||||
|
typingContact: {
|
||||||
|
name: 'Someone Here',
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
return <ConversationListItem {...props} />;
|
||||||
|
});
|
||||||
|
|
||||||
|
story.add('Message Request', () => {
|
||||||
|
const props = createProps({
|
||||||
|
isAccepted: false,
|
||||||
|
lastMessage: {
|
||||||
|
text: 'A Message',
|
||||||
|
status: 'delivered',
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
return <ConversationListItem {...props} />;
|
||||||
|
});
|
||||||
|
|
||||||
|
story.add('Unread', () => {
|
||||||
|
const counts = [4, 10, 250];
|
||||||
|
|
||||||
|
return counts.map(unreadCount => {
|
||||||
|
const props = createProps({
|
||||||
|
lastMessage: {
|
||||||
|
text: 'Hey there!',
|
||||||
|
status: 'delivered',
|
||||||
|
},
|
||||||
|
unreadCount,
|
||||||
|
});
|
||||||
|
|
||||||
|
return <ConversationListItem key={unreadCount} {...props} />;
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
story.add('Selected', () => {
|
||||||
|
const props = createProps({
|
||||||
|
lastMessage: {
|
||||||
|
text: 'Hey there!',
|
||||||
|
status: 'read',
|
||||||
|
},
|
||||||
|
isSelected: true,
|
||||||
|
});
|
||||||
|
|
||||||
|
return <ConversationListItem {...props} />;
|
||||||
|
});
|
||||||
|
|
||||||
|
story.add('Emoji in Message', () => {
|
||||||
|
const props = createProps({
|
||||||
|
lastMessage: {
|
||||||
|
text: '🔥',
|
||||||
|
status: 'read',
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
return <ConversationListItem {...props} />;
|
||||||
|
});
|
||||||
|
|
||||||
|
story.add('Link in Message', () => {
|
||||||
|
const props = createProps({
|
||||||
|
lastMessage: {
|
||||||
|
text: 'Download at http://signal.org',
|
||||||
|
status: 'read',
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
return <ConversationListItem {...props} />;
|
||||||
|
});
|
||||||
|
|
||||||
|
story.add('Long Name', () => {
|
||||||
|
const name =
|
||||||
|
'Long contact name. Esquire. The third. And stuff. And more! And more!';
|
||||||
|
|
||||||
|
const props = createProps({
|
||||||
|
name,
|
||||||
|
title: name,
|
||||||
|
});
|
||||||
|
|
||||||
|
return <ConversationListItem {...props} />;
|
||||||
|
});
|
||||||
|
|
||||||
|
story.add('Long Message', () => {
|
||||||
|
const messages = [
|
||||||
|
"Long line. This is a really really really long line. Really really long. Because that's just how it is",
|
||||||
|
`Many lines. This is a many-line message.
|
||||||
|
Line 2 is really exciting but it shouldn't be seen.
|
||||||
|
Line three is even better.
|
||||||
|
Line 4, well.`,
|
||||||
|
];
|
||||||
|
|
||||||
|
return messages.map(message => {
|
||||||
|
const props = createProps({
|
||||||
|
name,
|
||||||
|
lastMessage: {
|
||||||
|
text: message,
|
||||||
|
status: 'read',
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
return <ConversationListItem key={message.length} {...props} />;
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
story.add('Various Times', () => {
|
||||||
|
const times: Array<[number, string]> = [
|
||||||
|
[Date.now() - 5 * 60 * 60 * 1000, 'Five hours ago'],
|
||||||
|
[Date.now() - 24 * 60 * 60 * 1000, 'One day ago'],
|
||||||
|
[Date.now() - 7 * 24 * 60 * 60 * 1000, 'One week ago'],
|
||||||
|
[Date.now() - 365 * 24 * 60 * 60 * 1000, 'One year ago'],
|
||||||
|
];
|
||||||
|
|
||||||
|
return times.map(([lastUpdated, messageText]) => {
|
||||||
|
const props = createProps({
|
||||||
|
name,
|
||||||
|
lastUpdated,
|
||||||
|
lastMessage: {
|
||||||
|
text: messageText,
|
||||||
|
status: 'read',
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
return <ConversationListItem key={lastUpdated} {...props} />;
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
story.add('Missing Date', () => {
|
||||||
|
const props = createProps();
|
||||||
|
|
||||||
|
return <ConversationListItem {...props} lastUpdated={undefined as any} />;
|
||||||
|
});
|
||||||
|
|
||||||
|
story.add('Missing Message', () => {
|
||||||
|
const props = createProps();
|
||||||
|
|
||||||
|
return <ConversationListItem {...props} lastMessage={undefined as any} />;
|
||||||
|
});
|
||||||
|
|
||||||
|
story.add('Missing Text', () => {
|
||||||
|
const props = createProps();
|
||||||
|
|
||||||
|
return (
|
||||||
|
<ConversationListItem
|
||||||
|
{...props}
|
||||||
|
lastMessage={{ text: undefined as any, status: 'sent' }}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
});
|
||||||
|
|
@ -12,6 +12,17 @@ import { cleanId } from './_util';
|
||||||
import { LocalizerType } from '../types/Util';
|
import { LocalizerType } from '../types/Util';
|
||||||
import { ColorType } from '../types/Colors';
|
import { ColorType } from '../types/Colors';
|
||||||
|
|
||||||
|
export const MessageStatuses = [
|
||||||
|
'sending',
|
||||||
|
'sent',
|
||||||
|
'delivered',
|
||||||
|
'read',
|
||||||
|
'error',
|
||||||
|
'partial-sent',
|
||||||
|
] as const;
|
||||||
|
|
||||||
|
export type MessageStatusType = typeof MessageStatuses[number];
|
||||||
|
|
||||||
export type PropsData = {
|
export type PropsData = {
|
||||||
id: string;
|
id: string;
|
||||||
phoneNumber?: string;
|
phoneNumber?: string;
|
||||||
|
|
@ -33,13 +44,7 @@ export type PropsData = {
|
||||||
|
|
||||||
typingContact?: Object;
|
typingContact?: Object;
|
||||||
lastMessage?: {
|
lastMessage?: {
|
||||||
status:
|
status: MessageStatusType;
|
||||||
| 'sending'
|
|
||||||
| 'sent'
|
|
||||||
| 'delivered'
|
|
||||||
| 'read'
|
|
||||||
| 'error'
|
|
||||||
| 'partial-sent';
|
|
||||||
text: string;
|
text: string;
|
||||||
deletedForEveryone?: boolean;
|
deletedForEveryone?: boolean;
|
||||||
};
|
};
|
||||||
|
|
@ -51,7 +56,7 @@ type PropsHousekeeping = {
|
||||||
onClick?: (id: string) => void;
|
onClick?: (id: string) => void;
|
||||||
};
|
};
|
||||||
|
|
||||||
type Props = PropsData & PropsHousekeeping;
|
export type Props = PropsData & PropsHousekeeping;
|
||||||
|
|
||||||
export class ConversationListItem extends React.PureComponent<Props> {
|
export class ConversationListItem extends React.PureComponent<Props> {
|
||||||
public renderAvatar() {
|
public renderAvatar() {
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue