719 lines
16 KiB
JavaScript
719 lines
16 KiB
JavaScript
import React from 'react';
|
|
import { ScrollView, StyleSheet } from 'react-native';
|
|
// import moment from 'moment';
|
|
|
|
import MessageComponent from '../../app/containers/message/Message';
|
|
import StoriesSeparator from './StoriesSeparator';
|
|
import messagesStatus from '../../app/constants/messagesStatus';
|
|
import MessageSeparator from '../../app/views/RoomView/Separator';
|
|
|
|
const styles = StyleSheet.create({
|
|
separator: {
|
|
marginTop: 30,
|
|
marginBottom: 0
|
|
}
|
|
});
|
|
|
|
const user = {
|
|
id: 'y8bd77ptZswPj3EW8',
|
|
username: 'diego.mello',
|
|
token: '79q6lH40W4ZRGLOshDiDiVlQaCc4f_lU9HNdHLAzuHz'
|
|
};
|
|
const author = {
|
|
_id: 'userid',
|
|
username: 'diego.mello'
|
|
};
|
|
const baseUrl = 'https://open.rocket.chat';
|
|
const date = new Date(2017, 10, 10, 10);
|
|
const longText = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.';
|
|
|
|
const getCustomEmoji = (content) => {
|
|
const customEmoji = {
|
|
marioparty: { name: content, extension: 'gif' },
|
|
react_rocket: { name: content, extension: 'png' },
|
|
nyan_rocket: { name: content, extension: 'png' }
|
|
}[content];
|
|
return customEmoji;
|
|
};
|
|
|
|
const Message = props => (
|
|
<MessageComponent
|
|
baseUrl={baseUrl}
|
|
user={user}
|
|
author={author}
|
|
ts={date}
|
|
timeFormat='LT'
|
|
isHeader
|
|
getCustomEmoji={getCustomEmoji}
|
|
{...props}
|
|
/>
|
|
);
|
|
|
|
// eslint-disable-next-line react/prop-types
|
|
const Separator = ({ title }) => <StoriesSeparator title={title} style={styles.separator} />;
|
|
|
|
export default (
|
|
<ScrollView style={{ flex: 1 }} contentContainerStyle={{ marginVertical: 30 }}>
|
|
|
|
<Separator title='Simple' />
|
|
<Message msg='Message' />
|
|
|
|
<Separator title='Long message' />
|
|
<Message msg={longText} />
|
|
|
|
<Separator title='Grouped messages' />
|
|
<Message msg='...' />
|
|
<Message
|
|
msg='Different user'
|
|
author={{
|
|
...author,
|
|
username: longText
|
|
}}
|
|
/>
|
|
<Message msg='This is the third message' isHeader={false} />
|
|
<Message msg='This is the second message' isHeader={false} />
|
|
<Message msg='This is the first message' />
|
|
|
|
<Separator title='Without header' />
|
|
<Message msg='Message' isHeader={false} />
|
|
|
|
<Separator title='With alias' />
|
|
<Message msg='Message' alias='Diego Mello' />
|
|
<Message
|
|
msg='Message'
|
|
author={{
|
|
...author,
|
|
username: longText
|
|
}}
|
|
alias='Diego Mello'
|
|
/>
|
|
|
|
<Separator title='Edited' />
|
|
<Message msg='Message' edited />
|
|
|
|
<Separator title='Static avatar' />
|
|
<Message
|
|
msg='Message'
|
|
avatar='https://pbs.twimg.com/profile_images/1016397063649660929/14EIApTi_400x400.jpg'
|
|
/>
|
|
|
|
<Separator title='Full name' />
|
|
<Message
|
|
msg='Message'
|
|
author={{
|
|
...author,
|
|
username: 'diego.mello',
|
|
name: 'Diego Mello'
|
|
}}
|
|
useRealName
|
|
/>
|
|
|
|
<Separator title='Mentions' />
|
|
<Message
|
|
msg='@rocket.cat @diego.mello @all @here #general'
|
|
mentions={[{
|
|
username: 'rocket.cat'
|
|
}, {
|
|
username: 'diego.mello'
|
|
}, {
|
|
username: 'all'
|
|
}, {
|
|
username: 'here'
|
|
}]}
|
|
channels={[{
|
|
name: 'general'
|
|
}]}
|
|
/>
|
|
|
|
<Separator title='Emojis' />
|
|
<Message msg='👊🤙👏' />
|
|
|
|
<Separator title='Custom Emojis' />
|
|
<Message msg=':react_rocket: :nyan_rocket: :marioparty:' />
|
|
|
|
<Separator title='Time format' />
|
|
<Message msg='Testing' timeFormat='DD MMMM YYYY' />
|
|
|
|
<Separator title='Reactions' />
|
|
<Message
|
|
msg='Reactions'
|
|
reactions={[{
|
|
emoji: ':joy:',
|
|
usernames: [{ value: 'username' }, { value: 'rocket.cat' }, { value: 'diego.mello' }]
|
|
}, {
|
|
emoji: ':marioparty:',
|
|
usernames: [{ value: 'username' }, { value: 'rocket.cat' }, { value: 'diego.mello' }, { value: 'user1' }, { value: 'user1' }, { value: 'user1' }, { value: 'user1' }, { value: 'user1' }, { value: 'user1' }, { value: 'user1' }, { value: 'user1' }, { value: 'user1' }, { value: 'user1' }]
|
|
}, {
|
|
emoji: ':thinking:',
|
|
usernames: [{ value: 'username' }]
|
|
}]}
|
|
onReactionPress={() => {}}
|
|
/>
|
|
|
|
<Separator title='Multiple reactions' />
|
|
<Message
|
|
msg='Multiple Reactions'
|
|
reactions={[{
|
|
emoji: ':marioparty:',
|
|
usernames: [{ value: 'username' }]
|
|
}, {
|
|
emoji: ':react_rocket:',
|
|
usernames: [{ value: 'username' }]
|
|
}, {
|
|
emoji: ':nyan_rocket:',
|
|
usernames: [{ value: 'username' }]
|
|
}, {
|
|
emoji: ':heart:',
|
|
usernames: [{ value: 'username' }]
|
|
}, {
|
|
emoji: ':dog:',
|
|
usernames: [{ value: 'username' }]
|
|
}, {
|
|
emoji: ':grinning:',
|
|
usernames: [{ value: 'username' }]
|
|
}, {
|
|
emoji: ':grimacing:',
|
|
usernames: [{ value: 'username' }]
|
|
}, {
|
|
emoji: ':grin:',
|
|
usernames: [{ value: 'username' }]
|
|
}]}
|
|
onReactionPress={() => {}}
|
|
/>
|
|
|
|
<Separator title='Intercalated users' />
|
|
<Message
|
|
msg='Fourth message'
|
|
author={{
|
|
...author,
|
|
username: 'rocket.cat'
|
|
}}
|
|
/>
|
|
<Message msg='Third message' />
|
|
<Message
|
|
msg='Second message'
|
|
author={{
|
|
...author,
|
|
username: 'rocket.cat'
|
|
}}
|
|
/>
|
|
<Message msg='First message' />
|
|
|
|
<Separator title='Date and Unread separators' />
|
|
<Message
|
|
msg='Fourth message'
|
|
author={{
|
|
...author,
|
|
username: 'rocket.cat'
|
|
}}
|
|
/>
|
|
<MessageSeparator ts={date} unread />
|
|
<Message msg='Third message' />
|
|
<MessageSeparator unread />
|
|
<Message
|
|
msg='Second message'
|
|
author={{
|
|
...author,
|
|
username: 'rocket.cat'
|
|
}}
|
|
isHeader={false}
|
|
/>
|
|
<Message
|
|
msg='Second message'
|
|
author={{
|
|
...author,
|
|
username: 'rocket.cat'
|
|
}}
|
|
/>
|
|
<MessageSeparator ts={date} />
|
|
<Message msg='First message' />
|
|
|
|
<Separator title='With image' />
|
|
<Message
|
|
attachments={[{
|
|
title: 'This is a title',
|
|
description: 'This is a description',
|
|
image_url: '/file-upload/2ZrxuwcGeTrsoh376/Clipboard%20-%20September%205,%202018%204:10%20PM'
|
|
}]}
|
|
/>
|
|
<Message
|
|
attachments={[{
|
|
title: 'This is a title',
|
|
description: 'This is a description :nyan_rocket:',
|
|
image_url: '/file-upload/sxLXBzjwuqxMnebyP/Clipboard%20-%2029%20de%20Agosto%20de%202018%20%C3%A0s%2018:10'
|
|
}]}
|
|
/>
|
|
|
|
<Separator title='With video' />
|
|
<Message
|
|
attachments={[{
|
|
title: 'This is a title',
|
|
description: 'This is a description :nyan_rocket:',
|
|
video_url: '/file-upload/cqnKqb6kdajky5Rxj/WhatsApp%20Video%202018-08-22%20at%2019.09.55.mp4'
|
|
}]}
|
|
/>
|
|
<Message
|
|
attachments={[{
|
|
title: 'This is a title',
|
|
video_url: '/file-upload/cqnKqb6kdajky5Rxj/WhatsApp%20Video%202018-08-22%20at%2019.09.55.mp4'
|
|
}]}
|
|
/>
|
|
|
|
<Separator title='With audio' />
|
|
<Message
|
|
attachments={[{
|
|
title: 'This is a title',
|
|
description: 'This is a description :nyan_rocket:',
|
|
audio_url: '/file-upload/c4wcNhrbXJLBvAJtN/1535569819516.aac'
|
|
}]}
|
|
/>
|
|
<Message msg='First message' isHeader={false} />
|
|
<Message
|
|
attachments={[{
|
|
title: 'This is a title',
|
|
description: 'This is a description',
|
|
audio_url: '/file-upload/c4wcNhrbXJLBvAJtN/1535569819516.aac'
|
|
}]}
|
|
isHeader={false}
|
|
/>
|
|
<Message
|
|
attachments={[{
|
|
title: 'This is a title',
|
|
audio_url: '/file-upload/c4wcNhrbXJLBvAJtN/1535569819516.aac'
|
|
}]}
|
|
isHeader={false}
|
|
/>
|
|
<Message
|
|
attachments={[{
|
|
title: 'This is a title',
|
|
audio_url: '/file-upload/c4wcNhrbXJLBvAJtN/1535569819516.aac'
|
|
}]}
|
|
isHeader={false}
|
|
/>
|
|
|
|
<Separator title='Message with reply' />
|
|
<Message
|
|
msg="I'm fine!"
|
|
attachments={[{
|
|
author_name: 'I\'m a very long long title and I\'ll break',
|
|
ts: date,
|
|
timeFormat: 'LT',
|
|
text: 'How are you?'
|
|
}]}
|
|
/>
|
|
<Message
|
|
msg="I'm fine!"
|
|
attachments={[{
|
|
author_name: 'rocket.cat',
|
|
ts: date,
|
|
timeFormat: 'LT',
|
|
text: 'How are you? :nyan_rocket:'
|
|
}]}
|
|
/>
|
|
|
|
<Separator title='Message with thread' />
|
|
<Message
|
|
msg='How are you?'
|
|
tcount={1}
|
|
tlm={date}
|
|
/>
|
|
<Message
|
|
msg='How are you?'
|
|
tcount={9999}
|
|
tlm={date}
|
|
/>
|
|
<Message
|
|
msg="I'm fine!"
|
|
tmid='1'
|
|
tmsg='How are you?'
|
|
isThreadReply
|
|
/>
|
|
<Message
|
|
msg="I'm fine!"
|
|
tmid='1'
|
|
tmsg='Thread with emoji :) :joy:'
|
|
isThreadReply
|
|
/>
|
|
<Message
|
|
msg="I'm fine!"
|
|
tmid='1'
|
|
tmsg='Markdown: [link](http://www.google.com/) ```block code```'
|
|
isThreadReply
|
|
/>
|
|
<Message
|
|
msg="I'm fine!"
|
|
tmid='1'
|
|
tmsg={longText}
|
|
isThreadReply
|
|
/>
|
|
<Message
|
|
msg={longText}
|
|
tmid='1'
|
|
tmsg='How are you?'
|
|
isThreadReply
|
|
/>
|
|
<Message
|
|
msg={longText}
|
|
tmid='1'
|
|
tmsg={longText}
|
|
isThreadReply
|
|
/>
|
|
<Message
|
|
tmid='1'
|
|
tmsg='Thread with attachment'
|
|
attachments={[{
|
|
title: 'This is a title',
|
|
description: 'This is a description :nyan_rocket:',
|
|
audio_url: '/file-upload/c4wcNhrbXJLBvAJtN/1535569819516.aac'
|
|
}]}
|
|
isThreadReply
|
|
/>
|
|
|
|
<Separator title='Sequential thread messages following thread button' />
|
|
<Message
|
|
msg='How are you?'
|
|
tcount={1}
|
|
tlm={date}
|
|
/>
|
|
<Message
|
|
msg="I'm fine!"
|
|
tmid='1'
|
|
isThreadSequential
|
|
/>
|
|
<Message
|
|
msg={longText}
|
|
tmid='1'
|
|
isThreadSequential
|
|
/>
|
|
<Message
|
|
attachments={[{
|
|
title: 'This is a title',
|
|
description: 'This is a description',
|
|
audio_url: '/file-upload/c4wcNhrbXJLBvAJtN/1535569819516.aac'
|
|
}]}
|
|
tmid='1'
|
|
isThreadSequential
|
|
/>
|
|
|
|
<Separator title='Sequential thread messages following thread reply' />
|
|
<Message
|
|
msg="I'm fine!"
|
|
tmid='1'
|
|
tmsg='How are you?'
|
|
isThreadReply
|
|
/>
|
|
<Message
|
|
msg='Cool!'
|
|
tmid='1'
|
|
isThreadSequential
|
|
/>
|
|
<Message
|
|
msg={longText}
|
|
tmid='1'
|
|
isThreadSequential
|
|
/>
|
|
<Message
|
|
attachments={[{
|
|
title: 'This is a title',
|
|
description: 'This is a description',
|
|
audio_url: '/file-upload/c4wcNhrbXJLBvAJtN/1535569819516.aac'
|
|
}]}
|
|
tmid='1'
|
|
isThreadSequential
|
|
/>
|
|
|
|
{/* <Message
|
|
msg='How are you?'
|
|
tcount={9999}
|
|
tlm={moment().subtract(1, 'hour')}
|
|
/>
|
|
<Message
|
|
msg='How are you?'
|
|
tcount={9999}
|
|
tlm={moment().subtract(1, 'day')}
|
|
/>
|
|
<Message
|
|
msg='How are you?'
|
|
tcount={9999}
|
|
tlm={moment().subtract(5, 'day')}
|
|
/>
|
|
<Message
|
|
msg='How are you?'
|
|
tcount={9999}
|
|
tlm={moment().subtract(30, 'day')}
|
|
/> */}
|
|
|
|
<Separator title='Discussion' />
|
|
<Message
|
|
type='discussion-created'
|
|
drid='aisduhasidhs'
|
|
dcount={null}
|
|
dlm={null}
|
|
msg='This is a discussion'
|
|
/>
|
|
<Message
|
|
type='discussion-created'
|
|
drid='aisduhasidhs'
|
|
dcount={1}
|
|
dlm={date}
|
|
msg='This is a discussion'
|
|
/>
|
|
<Message
|
|
type='discussion-created'
|
|
drid='aisduhasidhs'
|
|
dcount={10}
|
|
dlm={date}
|
|
msg={longText}
|
|
/>
|
|
<Message
|
|
type='discussion-created'
|
|
drid='aisduhasidhs'
|
|
dcount={1000}
|
|
dlm={date}
|
|
msg='This is a discussion'
|
|
/>
|
|
{/* <Message
|
|
type='discussion-created'
|
|
drid='aisduhasidhs'
|
|
dcount={1000}
|
|
dlm={moment().subtract(1, 'hour')}
|
|
msg='This is a discussion'
|
|
/>
|
|
<Message
|
|
type='discussion-created'
|
|
drid='aisduhasidhs'
|
|
dcount={1000}
|
|
dlm={moment().subtract(1, 'day')}
|
|
msg='This is a discussion'
|
|
/>
|
|
<Message
|
|
type='discussion-created'
|
|
drid='aisduhasidhs'
|
|
dcount={1000}
|
|
dlm={moment().subtract(5, 'day')}
|
|
msg='This is a discussion'
|
|
/>
|
|
<Message
|
|
type='discussion-created'
|
|
drid='aisduhasidhs'
|
|
dcount={1000}
|
|
dlm={moment().subtract(30, 'day')}
|
|
msg='This is a discussion'
|
|
/> */}
|
|
|
|
|
|
<Separator title='URL' />
|
|
<Message
|
|
urls={[{
|
|
url: 'https://rocket.chat',
|
|
image: 'https://rocket.chat/images/blog/post.jpg',
|
|
title: 'Rocket.Chat - Free, Open Source, Enterprise Team Chat',
|
|
description: 'Rocket.Chat is the leading open source team chat software solution. Free, unlimited and completely customizable with on-premises and SaaS cloud hosting.'
|
|
}, {
|
|
url: 'https://google.com',
|
|
title: 'Google',
|
|
description: 'Search the world\'s information, including webpages, images, videos and more. Google has many special features to help you find exactly what you\'re looking for.'
|
|
}]}
|
|
/>
|
|
<Message
|
|
urls={[{
|
|
url: 'https://google.com',
|
|
title: 'Google',
|
|
description: 'Search the world\'s information, including webpages, images, videos and more. Google has many special features to help you find exactly what you\'re looking for.'
|
|
}]}
|
|
msg='Message :nyan_rocket:'
|
|
/>
|
|
<Message
|
|
urls={[{
|
|
url: 'https://google.com',
|
|
title: 'Google',
|
|
description: 'Search the world\'s information, including webpages, images, videos and more. Google has many special features to help you find exactly what you\'re looking for.'
|
|
}]}
|
|
isHeader={false}
|
|
/>
|
|
|
|
<Separator title='Custom fields' />
|
|
<Message
|
|
msg='Message'
|
|
attachments={[{
|
|
author_name: 'rocket.cat',
|
|
ts: date,
|
|
timeFormat: 'LT',
|
|
text: 'Custom fields',
|
|
fields: [{
|
|
title: 'Field 1',
|
|
value: 'Value 1'
|
|
}, {
|
|
title: 'Field 2',
|
|
value: 'Value 2'
|
|
}, {
|
|
title: 'Field 3',
|
|
value: 'Value 3'
|
|
}, {
|
|
title: 'Field 4',
|
|
value: 'Value 4'
|
|
}, {
|
|
title: 'Field 5',
|
|
value: 'Value 5'
|
|
}]
|
|
}]}
|
|
/>
|
|
|
|
<Separator title='Two short custom fields' />
|
|
<Message
|
|
msg='Message'
|
|
attachments={[{
|
|
author_name: 'rocket.cat',
|
|
ts: date,
|
|
timeFormat: 'LT',
|
|
text: 'Custom fields',
|
|
fields: [{
|
|
title: 'Field 1',
|
|
value: 'Value 1',
|
|
short: true
|
|
}, {
|
|
title: 'Field 2',
|
|
value: 'Value 2',
|
|
short: true
|
|
}]
|
|
}, {
|
|
author_name: 'rocket.cat',
|
|
ts: date,
|
|
timeFormat: 'LT',
|
|
text: 'Custom fields 2',
|
|
fields: [{
|
|
title: 'Field 1',
|
|
value: 'Value 1',
|
|
short: true
|
|
}, {
|
|
title: 'Field 2',
|
|
value: 'Value 2',
|
|
short: true
|
|
}]
|
|
}]}
|
|
/>
|
|
|
|
<Separator title='Broadcast' />
|
|
<Message msg='Broadcasted message' broadcast replyBroadcast={() => alert('broadcast!')} />
|
|
|
|
<Separator title='Archived' />
|
|
<Message msg='This message is inside an archived room' archived />
|
|
|
|
<Separator title='Error' />
|
|
<Message hasError msg='This message has error' status={messagesStatus.ERROR} onErrorPress={() => alert('Error pressed')} />
|
|
<Message hasError msg='This message has error too' status={messagesStatus.ERROR} onErrorPress={() => alert('Error pressed')} isHeader={false} />
|
|
|
|
<Separator title='Temp' />
|
|
<Message msg='Temp message' status={messagesStatus.TEMP} isTemp />
|
|
|
|
<Separator title='Editing' />
|
|
<Message msg='Message being edited' editing />
|
|
|
|
<Separator title='Removed' />
|
|
<Message type='rm' isInfo />
|
|
|
|
<Separator title='Joined' />
|
|
<Message type='uj' isInfo />
|
|
|
|
<Separator title='Room name changed' />
|
|
<Message msg='New name' type='r' isInfo />
|
|
|
|
<Separator title='Message pinned' />
|
|
<Message
|
|
msg='New name'
|
|
type='message_pinned'
|
|
isInfo
|
|
attachments={[{
|
|
author_name: 'rocket.cat',
|
|
ts: date,
|
|
timeFormat: 'LT',
|
|
text: 'First message'
|
|
}]}
|
|
/>
|
|
|
|
<Separator title='Has left the channel' />
|
|
<Message type='ul' isInfo />
|
|
|
|
<Separator title='User removed' />
|
|
<Message msg='rocket.cat' type='ru' isInfo />
|
|
|
|
<Separator title='User added' />
|
|
<Message msg='rocket.cat' type='au' isInfo />
|
|
|
|
<Separator title='User muted' />
|
|
<Message msg='rocket.cat' type='user-muted' isInfo />
|
|
|
|
<Separator title='User unmuted' />
|
|
<Message msg='rocket.cat' type='user-unmuted' isInfo />
|
|
|
|
<Separator title='Role added' />
|
|
<Message
|
|
msg='rocket.cat'
|
|
role='admin' // eslint-disable-line
|
|
type='subscription-role-added'
|
|
isInfo
|
|
/>
|
|
|
|
<Separator title='Role removed' />
|
|
<Message
|
|
msg='rocket.cat'
|
|
role='admin' // eslint-disable-line
|
|
type='subscription-role-removed'
|
|
isInfo
|
|
/>
|
|
|
|
<Separator title='Changed description' />
|
|
<Message msg='new description' type='room_changed_description' isInfo />
|
|
|
|
<Separator title='Changed announcement' />
|
|
<Message msg='new announcement' type='room_changed_announcement' isInfo />
|
|
|
|
<Separator title='Changed topic' />
|
|
<Message msg='new topic' type='room_changed_topic' isInfo />
|
|
|
|
<Separator title='Changed type' />
|
|
<Message msg='public' type='room_changed_privacy' isInfo />
|
|
|
|
<Separator title='Custom style' />
|
|
<Message msg='Message' style={[styles.normalize, { backgroundColor: '#ddd' }]} />
|
|
|
|
<Separator title='Markdown emphasis' />
|
|
<Message msg='Italic with *asterisks* or _underscores_. Bold with **asterisks** or __underscores__. ~~Strikethrough~~' />
|
|
|
|
<Separator title='Markdown headers' />
|
|
<Message
|
|
msg='# H1
|
|
## H2
|
|
### H3
|
|
#### H4
|
|
##### H5
|
|
###### H6'
|
|
/>
|
|
|
|
<Separator title='Markdown links' />
|
|
<Message msg='Support <http://google.com|Google> [I`m an inline-style link](https://www.google.com) https://google.com' />
|
|
|
|
<Separator title='Markdown image' />
|
|
<Message msg='' />
|
|
|
|
<Separator title='Markdown code' />
|
|
<Message
|
|
msg='Inline `code` has `back-ticks around` it.
|
|
```
|
|
Code block
|
|
```'
|
|
/>
|
|
|
|
<Separator title='Markdown quote' />
|
|
<Message msg='> Quote' />
|
|
|
|
<Separator title='Markdown table' />
|
|
<Message
|
|
msg='First Header | Second Header
|
|
------------ | -------------
|
|
Content from cell 1 | Content from cell 2
|
|
Content in the first column | Content in the second column'
|
|
/>
|
|
</ScrollView>
|
|
);
|