538 lines
14 KiB
JavaScript
538 lines
14 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 customEmojis = { react_rocket: 'png', nyan_rocket: 'png', marioparty: 'gif' };
|
|
const date = new Date(2017, 10, 10, 10);
|
|
|
|
const Message = props => (
|
|
<MessageComponent
|
|
baseUrl={baseUrl}
|
|
customEmojis={customEmojis}
|
|
user={user}
|
|
author={author}
|
|
ts={date}
|
|
timeFormat='LT'
|
|
header
|
|
{...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='Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum' />
|
|
|
|
<Separator title='Grouped messages' />
|
|
<Message msg='...' />
|
|
<Message
|
|
msg='Different user'
|
|
author={{
|
|
...author,
|
|
username: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum'
|
|
}}
|
|
/>
|
|
<Message msg='This is the third message' header={false} />
|
|
<Message msg='This is the second message' header={false} />
|
|
<Message msg='This is the first message' />
|
|
|
|
<Separator title='Without header' />
|
|
<Message msg='Message' header={false} />
|
|
|
|
<Separator title='With alias' />
|
|
<Message msg='Message' alias='Diego Mello' />
|
|
<Message
|
|
msg='Message'
|
|
author={{
|
|
...author,
|
|
username: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum'
|
|
}}
|
|
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' />
|
|
|
|
<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'
|
|
}}
|
|
header={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',
|
|
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',
|
|
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',
|
|
audio_url: '/file-upload/c4wcNhrbXJLBvAJtN/1535569819516.aac'
|
|
}]}
|
|
/>
|
|
<Message msg='First message' header={false} />
|
|
<Message
|
|
attachments={[{
|
|
title: 'This is a title',
|
|
description: 'This is a description',
|
|
audio_url: '/file-upload/c4wcNhrbXJLBvAJtN/1535569819516.aac'
|
|
}]}
|
|
header={false}
|
|
/>
|
|
<Message
|
|
attachments={[{
|
|
title: 'This is a title',
|
|
audio_url: '/file-upload/c4wcNhrbXJLBvAJtN/1535569819516.aac'
|
|
}]}
|
|
header={false}
|
|
/>
|
|
<Message
|
|
attachments={[{
|
|
title: 'This is a title',
|
|
audio_url: '/file-upload/c4wcNhrbXJLBvAJtN/1535569819516.aac'
|
|
}]}
|
|
header={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?'
|
|
}]}
|
|
/>
|
|
|
|
<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.'
|
|
}]}
|
|
/>
|
|
|
|
<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='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='Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.'
|
|
/>
|
|
<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='Archived' />
|
|
<Message msg='This message is inside an archived room' archived />
|
|
|
|
<Separator title='Error' />
|
|
<Message msg='This message has error too' status={messagesStatus.ERROR} onErrorPress={() => alert('Error pressed')} header={false} />
|
|
<Message msg='This message has error' status={messagesStatus.ERROR} onErrorPress={() => alert('Error pressed')} />
|
|
|
|
<Separator title='Temp' />
|
|
<Message msg='Temp message' status={messagesStatus.TEMP} />
|
|
|
|
<Separator title='Editing' />
|
|
<Message msg='Message being edited' editing />
|
|
|
|
<Separator title='Removed' />
|
|
<Message type='rm' />
|
|
|
|
<Separator title='Joined' />
|
|
<Message type='uj' />
|
|
|
|
<Separator title='Room name changed' />
|
|
<Message msg='New name' type='r' />
|
|
|
|
<Separator title='Message pinned' />
|
|
<Message
|
|
msg='New name'
|
|
type='message_pinned'
|
|
attachments={[{
|
|
author_name: 'rocket.cat',
|
|
ts: date,
|
|
timeFormat: 'LT',
|
|
text: 'First message'
|
|
}]}
|
|
/>
|
|
|
|
<Separator title='Has left the channel' />
|
|
<Message type='ul' />
|
|
|
|
<Separator title='User removed' />
|
|
<Message msg='rocket.cat' type='ru' />
|
|
|
|
<Separator title='User added' />
|
|
<Message msg='rocket.cat' type='au' />
|
|
|
|
<Separator title='User muted' />
|
|
<Message msg='rocket.cat' type='user-muted' />
|
|
|
|
<Separator title='User unmuted' />
|
|
<Message msg='rocket.cat' type='user-unmuted' />
|
|
|
|
<Separator title='Role added' />
|
|
<Message
|
|
msg='rocket.cat'
|
|
role='admin' // eslint-disable-line
|
|
type='subscription-role-added'
|
|
/>
|
|
|
|
<Separator title='Role removed' />
|
|
<Message
|
|
msg='rocket.cat'
|
|
role='admin' // eslint-disable-line
|
|
type='subscription-role-removed'
|
|
/>
|
|
|
|
<Separator title='Changed description' />
|
|
<Message msg='new description' type='room_changed_description' />
|
|
|
|
<Separator title='Changed announcement' />
|
|
<Message msg='new announcement' type='room_changed_announcement' />
|
|
|
|
<Separator title='Changed topic' />
|
|
<Message msg='new topic' type='room_changed_topic' />
|
|
|
|
<Separator title='Changed type' />
|
|
<Message msg='public' type='room_changed_privacy' />
|
|
|
|
<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>
|
|
);
|