verdnatura-chat/storybook/stories/Message.js

861 lines
19 KiB
JavaScript
Raw Normal View History

/* eslint-disable import/no-extraneous-dependencies */
import React from 'react';
import { ScrollView, StyleSheet } from 'react-native';
import { Provider } from 'react-redux';
import { storiesOf } from '@storybook/react-native';
import MessageComponent from '../../app/containers/message/Message';
import { messagesStatus, themes } from '../../app/lib/constants';
import MessageSeparator from '../../app/views/RoomView/Separator';
import MessageContext from '../../app/containers/message/Context';
import { store } from './index';
2019-12-04 16:39:53 +00:00
const _theme = 'light';
2019-12-04 16:39:53 +00:00
const styles = StyleSheet.create({});
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;
};
[NEW] Jump to message (#3099) * Scrolling * Add loadMore button at the end of loadMessagesForRoom * Delete dummy item on tap * Only insert loadMore dummy if there's more data * load surrounding messages * fixes and load next * First dummy and dummy-next * Save load next messages * Check if message exists before fetching surroundings * Refactoring List * Jumping to message :) * Showing blocking loader while scrolling/fetching message * Check if message exists on local db before inserting dummy * Delete dummies automatically when the message sent to updateMessages again * Minor cleanup * Fix scroll * Highlight message * Jump to bottom * Load more on scroll * Adding stories to LoadMore * Refactoring * Add loading indicator to LoadMore * Small refactor * Add LoadMore to threads * getMoreMessages * chat.getThreadMessages -> getThreadMessages * Start jumping to threads * Add jumpToMessageId on RoomView * Nav to correct channel * Fix PK issue on thread_messages * Disable jump to thread from another room * Fix nav to thread params * Add navToRoom * Refactor styles * Test notch * Fix Android border * Fix thread message on title * Fix NavBottomFAB on threads * Minor cleanup * Workaround for readThreads being called too often * Lint * Update tests * Jump from search * Go to threads from search * Remove getItemLayout and rely on viewable items * Fix load older * stash working * Fix infinite loading * Lower itemVisiblePercentThreshhold to 10, so very long messages behave as viewable * Add generateLoadMoreId util * Minor cleanup * Jump to message from notification/deep linking * Add getMessageInfo * Nav to threads from other rooms * getThreadName * Unnecessary logic * getRoomInfo * Colocate getMessageInfo closer to RoomView * Minor cleanup * Remove search from RoomActionsView * Minor fix for search on not joined public channels * Jump to any link * Fix tablets * Jump to message from MessagesView and other bug fixes * Fix issue on Urls * Adds race condition to cancel jump to message if it's stuck or after 5 seconds * Jump from message search quote * lint * Stop onPress * Small refactor on load methods * Minor fixes for loadThreadMessages * Minor typo * LoadMore i18n * Minor cleanup
2021-05-26 17:24:54 +00:00
export const MessageDecorator = story => (
<MessageContext.Provider
value={{
user,
baseUrl,
onPress: () => {},
onLongPress: () => {},
reactionInit: () => {},
onErrorPress: () => {},
replyBroadcast: () => {},
onReactionPress: () => {},
onDiscussionPress: () => {},
onReactionLongPress: () => {},
threadBadgeColor: themes.light.tunreadColor
}}>
{story()}
</MessageContext.Provider>
);
[NEW] Jump to message (#3099) * Scrolling * Add loadMore button at the end of loadMessagesForRoom * Delete dummy item on tap * Only insert loadMore dummy if there's more data * load surrounding messages * fixes and load next * First dummy and dummy-next * Save load next messages * Check if message exists before fetching surroundings * Refactoring List * Jumping to message :) * Showing blocking loader while scrolling/fetching message * Check if message exists on local db before inserting dummy * Delete dummies automatically when the message sent to updateMessages again * Minor cleanup * Fix scroll * Highlight message * Jump to bottom * Load more on scroll * Adding stories to LoadMore * Refactoring * Add loading indicator to LoadMore * Small refactor * Add LoadMore to threads * getMoreMessages * chat.getThreadMessages -> getThreadMessages * Start jumping to threads * Add jumpToMessageId on RoomView * Nav to correct channel * Fix PK issue on thread_messages * Disable jump to thread from another room * Fix nav to thread params * Add navToRoom * Refactor styles * Test notch * Fix Android border * Fix thread message on title * Fix NavBottomFAB on threads * Minor cleanup * Workaround for readThreads being called too often * Lint * Update tests * Jump from search * Go to threads from search * Remove getItemLayout and rely on viewable items * Fix load older * stash working * Fix infinite loading * Lower itemVisiblePercentThreshhold to 10, so very long messages behave as viewable * Add generateLoadMoreId util * Minor cleanup * Jump to message from notification/deep linking * Add getMessageInfo * Nav to threads from other rooms * getThreadName * Unnecessary logic * getRoomInfo * Colocate getMessageInfo closer to RoomView * Minor cleanup * Remove search from RoomActionsView * Minor fix for search on not joined public channels * Jump to any link * Fix tablets * Jump to message from MessagesView and other bug fixes * Fix issue on Urls * Adds race condition to cancel jump to message if it's stuck or after 5 seconds * Jump from message search quote * lint * Stop onPress * Small refactor on load methods * Minor fixes for loadThreadMessages * Minor typo * LoadMore i18n * Minor cleanup
2021-05-26 17:24:54 +00:00
export const Message = props => (
<MessageComponent
baseUrl={baseUrl}
user={user}
author={author}
ts={date}
timeFormat='LT'
isHeader
getCustomEmoji={getCustomEmoji}
theme={_theme}
{...props}
/>
);
[NEW] Jump to message (#3099) * Scrolling * Add loadMore button at the end of loadMessagesForRoom * Delete dummy item on tap * Only insert loadMore dummy if there's more data * load surrounding messages * fixes and load next * First dummy and dummy-next * Save load next messages * Check if message exists before fetching surroundings * Refactoring List * Jumping to message :) * Showing blocking loader while scrolling/fetching message * Check if message exists on local db before inserting dummy * Delete dummies automatically when the message sent to updateMessages again * Minor cleanup * Fix scroll * Highlight message * Jump to bottom * Load more on scroll * Adding stories to LoadMore * Refactoring * Add loading indicator to LoadMore * Small refactor * Add LoadMore to threads * getMoreMessages * chat.getThreadMessages -> getThreadMessages * Start jumping to threads * Add jumpToMessageId on RoomView * Nav to correct channel * Fix PK issue on thread_messages * Disable jump to thread from another room * Fix nav to thread params * Add navToRoom * Refactor styles * Test notch * Fix Android border * Fix thread message on title * Fix NavBottomFAB on threads * Minor cleanup * Workaround for readThreads being called too often * Lint * Update tests * Jump from search * Go to threads from search * Remove getItemLayout and rely on viewable items * Fix load older * stash working * Fix infinite loading * Lower itemVisiblePercentThreshhold to 10, so very long messages behave as viewable * Add generateLoadMoreId util * Minor cleanup * Jump to message from notification/deep linking * Add getMessageInfo * Nav to threads from other rooms * getThreadName * Unnecessary logic * getRoomInfo * Colocate getMessageInfo closer to RoomView * Minor cleanup * Remove search from RoomActionsView * Minor fix for search on not joined public channels * Jump to any link * Fix tablets * Jump to message from MessagesView and other bug fixes * Fix issue on Urls * Adds race condition to cancel jump to message if it's stuck or after 5 seconds * Jump from message search quote * lint * Stop onPress * Small refactor on load methods * Minor fixes for loadThreadMessages * Minor typo * LoadMore i18n * Minor cleanup
2021-05-26 17:24:54 +00:00
export const StoryProvider = story => <Provider store={store}>{story()}</Provider>;
2019-12-04 16:39:53 +00:00
[NEW] Jump to message (#3099) * Scrolling * Add loadMore button at the end of loadMessagesForRoom * Delete dummy item on tap * Only insert loadMore dummy if there's more data * load surrounding messages * fixes and load next * First dummy and dummy-next * Save load next messages * Check if message exists before fetching surroundings * Refactoring List * Jumping to message :) * Showing blocking loader while scrolling/fetching message * Check if message exists on local db before inserting dummy * Delete dummies automatically when the message sent to updateMessages again * Minor cleanup * Fix scroll * Highlight message * Jump to bottom * Load more on scroll * Adding stories to LoadMore * Refactoring * Add loading indicator to LoadMore * Small refactor * Add LoadMore to threads * getMoreMessages * chat.getThreadMessages -> getThreadMessages * Start jumping to threads * Add jumpToMessageId on RoomView * Nav to correct channel * Fix PK issue on thread_messages * Disable jump to thread from another room * Fix nav to thread params * Add navToRoom * Refactor styles * Test notch * Fix Android border * Fix thread message on title * Fix NavBottomFAB on threads * Minor cleanup * Workaround for readThreads being called too often * Lint * Update tests * Jump from search * Go to threads from search * Remove getItemLayout and rely on viewable items * Fix load older * stash working * Fix infinite loading * Lower itemVisiblePercentThreshhold to 10, so very long messages behave as viewable * Add generateLoadMoreId util * Minor cleanup * Jump to message from notification/deep linking * Add getMessageInfo * Nav to threads from other rooms * getThreadName * Unnecessary logic * getRoomInfo * Colocate getMessageInfo closer to RoomView * Minor cleanup * Remove search from RoomActionsView * Minor fix for search on not joined public channels * Jump to any link * Fix tablets * Jump to message from MessagesView and other bug fixes * Fix issue on Urls * Adds race condition to cancel jump to message if it's stuck or after 5 seconds * Jump from message search quote * lint * Stop onPress * Small refactor on load methods * Minor fixes for loadThreadMessages * Minor typo * LoadMore i18n * Minor cleanup
2021-05-26 17:24:54 +00:00
const MessageScrollView = story => <ScrollView style={{ backgroundColor: themes[_theme].backgroundColor }}>{story()}</ScrollView>;
2019-12-04 16:39:53 +00:00
const stories = storiesOf('Message', module)
[NEW] Jump to message (#3099) * Scrolling * Add loadMore button at the end of loadMessagesForRoom * Delete dummy item on tap * Only insert loadMore dummy if there's more data * load surrounding messages * fixes and load next * First dummy and dummy-next * Save load next messages * Check if message exists before fetching surroundings * Refactoring List * Jumping to message :) * Showing blocking loader while scrolling/fetching message * Check if message exists on local db before inserting dummy * Delete dummies automatically when the message sent to updateMessages again * Minor cleanup * Fix scroll * Highlight message * Jump to bottom * Load more on scroll * Adding stories to LoadMore * Refactoring * Add loading indicator to LoadMore * Small refactor * Add LoadMore to threads * getMoreMessages * chat.getThreadMessages -> getThreadMessages * Start jumping to threads * Add jumpToMessageId on RoomView * Nav to correct channel * Fix PK issue on thread_messages * Disable jump to thread from another room * Fix nav to thread params * Add navToRoom * Refactor styles * Test notch * Fix Android border * Fix thread message on title * Fix NavBottomFAB on threads * Minor cleanup * Workaround for readThreads being called too often * Lint * Update tests * Jump from search * Go to threads from search * Remove getItemLayout and rely on viewable items * Fix load older * stash working * Fix infinite loading * Lower itemVisiblePercentThreshhold to 10, so very long messages behave as viewable * Add generateLoadMoreId util * Minor cleanup * Jump to message from notification/deep linking * Add getMessageInfo * Nav to threads from other rooms * getThreadName * Unnecessary logic * getRoomInfo * Colocate getMessageInfo closer to RoomView * Minor cleanup * Remove search from RoomActionsView * Minor fix for search on not joined public channels * Jump to any link * Fix tablets * Jump to message from MessagesView and other bug fixes * Fix issue on Urls * Adds race condition to cancel jump to message if it's stuck or after 5 seconds * Jump from message search quote * lint * Stop onPress * Small refactor on load methods * Minor fixes for loadThreadMessages * Minor typo * LoadMore i18n * Minor cleanup
2021-05-26 17:24:54 +00:00
.addDecorator(StoryProvider)
.addDecorator(MessageScrollView)
.addDecorator(MessageDecorator);
stories.add('Basic', () => (
<>
<Message msg='Message' />
<Message msg={longText} />
</>
));
stories.add('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' />
</>
));
stories.add('Without header', () => <Message msg='Message' isHeader={false} />);
stories.add('With alias', () => (
<>
<Message msg='Message' alias='Diego Mello' />
<Message
msg='Message'
author={{
...author,
username: longText
}}
alias='Diego Mello'
/>
</>
));
stories.add('Edited', () => <Message msg='Message' edited />);
stories.add('Encrypted', () => (
<>
<Message msg='Message' type='e2e' />
<Message msg='Message Encrypted without Header' isHeader={false} type='e2e' />
<Message
msg='Message Encrypted with Reactions'
reactions={[
{
emoji: ':joy:',
usernames: [user.username]
},
{
emoji: ':marioparty:',
usernames: [user.username]
},
{
emoji: ':thinking:',
usernames: [user.username]
}
]}
onReactionPress={() => {}}
type='e2e'
/>
<Message msg='Thread reply encrypted' tmid='1' tmsg='Thread with emoji :) :joy:' isThreadReply type='e2e' />
<Message msg='Temp message encrypted' status={messagesStatus.TEMP} isTemp type='e2e' />
<Message msg='Message Edited encrypted' edited type='e2e' />
<Message
hasError
msg='This message has error and is encrypted'
status={messagesStatus.ERROR}
onErrorPress={() => alert('Error pressed')}
type='e2e'
/>
<Message msg='Read Receipt encrypted with Header' isReadReceiptEnabled read type='e2e' />
<Message msg='Read Receipt encrypted without Header' isReadReceiptEnabled read isHeader={false} type='e2e' />
</>
));
stories.add('Block Quote', () => (
<>
<Message msg='> Testing block quote' />
<Message msg={'> Testing block quote\nTesting block quote'} />
</>
));
stories.add('Lists', () => (
<>
<Message msg={'* Dogs\n * cats\n - cats'} />
<Message msg={'1. Dogs \n 2. Cats'} />
<Message msg='1. Dogs' />
<Message msg='2. Cats' isHeader={false} />
</>
));
stories.add('Static avatar', () => (
<Message msg='Message' avatar='https://pbs.twimg.com/profile_images/1016397063649660929/14EIApTi_400x400.jpg' />
));
stories.add('Full name', () => (
<Message
msg='Message'
author={{
...author,
username: 'diego.mello',
name: 'Diego Mello'
}}
useRealName
/>
));
stories.add('Mentions', () => (
<>
<Message
msg='@rocket.cat @diego.mello @all @here #general'
mentions={[
{
username: 'rocket.cat'
},
{
username: 'diego.mello'
},
{
username: 'all'
},
{
username: 'here'
}
]}
channels={[
{
name: 'general'
}
]}
/>
<Message
msg='@rocket.cat Lorem ipsum dolor @diego.mello sit amet, @all consectetur adipiscing @here elit, sed do eiusmod tempor #general incididunt ut labore et dolore magna aliqua.'
mentions={[
{
username: 'rocket.cat'
},
{
username: 'diego.mello'
},
{
username: 'all'
},
{
username: 'here'
}
]}
channels={[
{
name: 'general'
}
]}
/>
</>
));
stories.add('Emojis', () => (
<>
<Message msg='👊🤙👏' />
<Message msg='👏' />
<Message msg=':react_rocket: :nyan_rocket: :marioparty:' />
<Message msg=':react_rocket:' />
<Message msg='🤙:react_rocket:' />
<Message msg='🤙:react_rocket:🤙🤙' />
</>
));
stories.add('Time format', () => <Message msg='Testing' timeFormat='DD MMMM YYYY' />);
stories.add('Reactions', () => (
<>
<Message
msg='Reactions'
reactions={[
{
emoji: ':joy:',
usernames: [user.username]
},
{
emoji: ':marioparty:',
usernames: new Array(99)
},
{
emoji: ':thinking:',
usernames: new Array(999)
},
{
emoji: ':thinking:',
usernames: new Array(9999)
}
]}
onReactionPress={() => {}}
/>
<Message
msg='Multiple Reactions'
reactions={[
{
emoji: ':marioparty:',
usernames: [user.username]
},
{
emoji: ':react_rocket:',
usernames: [user.username]
},
{
emoji: ':nyan_rocket:',
usernames: [user.username]
},
{
emoji: ':heart:',
usernames: [user.username]
},
{
emoji: ':dog:',
usernames: [user.username]
},
{
emoji: ':grinning:',
usernames: [user.username]
},
{
emoji: ':grimacing:',
usernames: [user.username]
},
{
emoji: ':grin:',
usernames: [user.username]
}
]}
onReactionPress={() => {}}
/>
</>
));
stories.add('Date and Unread separators', () => (
<>
<Message
msg='Fourth message'
author={{
...author,
username: 'rocket.cat'
}}
/>
<MessageSeparator ts={date} unread theme={_theme} />
<Message msg='Third message' />
<MessageSeparator unread theme={_theme} />
<Message
msg='Second message'
author={{
...author,
username: 'rocket.cat'
}}
isHeader={false}
/>
<Message
msg='Second message'
author={{
...author,
username: 'rocket.cat'
}}
/>
<MessageSeparator ts={date} theme={_theme} />
<Message msg='First message' />
</>
));
stories.add('With image', () => (
<>
<Message
attachments={[
{
title: 'This is a title',
description: 'This is a description',
image_url: '/dummypath'
}
]}
/>
<Message
attachments={[
{
title: 'This is a title',
description: 'This is a description :nyan_rocket:',
image_url: '/dummypath'
}
]}
/>
</>
));
stories.add('With video', () => (
<>
<Message
attachments={[
{
title: 'This is a title',
description: 'This is a description :nyan_rocket:',
video_url: '/dummypath'
}
]}
/>
<Message
attachments={[
{
title: 'This is a title',
video_url: '/dummypath'
}
]}
/>
</>
));
stories.add('With audio', () => (
<>
<Message
attachments={[
{
title: 'This is a title',
description: 'This is a description :nyan_rocket:',
audio_url: '/dummypath'
}
]}
/>
<Message msg='First message' isHeader={false} />
<Message
attachments={[
{
title: 'This is a title',
description: 'This is a description',
audio_url: '/dummypath'
}
]}
isHeader={false}
/>
<Message
attachments={[
{
title: 'This is a title',
audio_url: '/dummypath'
}
]}
isHeader={false}
/>
<Message
attachments={[
{
title: 'This is a title',
audio_url: '/dummypath'
}
]}
isHeader={false}
/>
</>
));
stories.add('With file', () => (
<>
<Message
attachments={[
{
text: 'File.pdf',
description: 'This is a description :nyan_rocket:'
}
]}
/>
<Message
attachments={[
{
text: 'File.pdf',
description: 'This is a description :nyan_rocket:'
}
]}
isHeader={false}
/>
</>
));
stories.add('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:'
}
]}
/>
2022-03-21 20:44:06 +00:00
<Message
msg='Looks cool!'
attachments={[
{
author_name: 'rocket.cat',
attachments: [
{
author_name: 'rocket.cat',
ts: date,
timeFormat: 'LT',
description: 'What you think about this one?',
image_url: 'https://octodex.github.com/images/yaktocat.png'
}
],
text: ''
}
]}
/>
</>
));
stories.add('Message with read receipt', () => (
<>
<Message msg="I'm fine!" isReadReceiptEnabled unread />
<Message msg="I'm fine!" isReadReceiptEnabled unread isHeader={false} />
<Message msg="I'm fine!" isReadReceiptEnabled read />
<Message msg="I'm fine!" isReadReceiptEnabled read isHeader={false} />
</>
));
stories.add('Message with thread', () => (
<>
<Message msg='How are you?' tcount={1} 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={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
/>
</>
));
stories.add('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
/>
</>
));
stories.add('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
/>
</>
));
stories.add('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' />
</>
));
stories.add('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}
/>
</>
));
stories.add('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'
}
]
}
]}
/>
</>
));
stories.add('Two short custom fields with markdown', () => (
<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](https://google.com/)',
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
}
]
}
]}
/>
));
stories.add('Colored attachments', () => (
<Message
attachments={[
{
color: 'red',
fields: [
{
title: 'Field 1',
value: 'Value 1',
short: true
},
{
title: 'Field 2',
value: 'Value 2',
short: true
}
]
},
{
color: 'green',
fields: [
{
title: 'Field 1',
value: 'Value 1',
short: true
},
{
title: 'Field 2',
value: 'Value 2',
short: true
}
]
},
{
color: 'blue',
fields: [
{
title: 'Field 1',
value: 'Value 1',
short: true
},
{
title: 'Field 2',
value: 'Value 2',
short: true
}
]
}
]}
/>
));
stories.add('Broadcast', () => <Message msg='Broadcasted message' broadcast replyBroadcast={() => alert('broadcast!')} />);
stories.add('Archived', () => <Message msg='This message is inside an archived room' archived />);
stories.add('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}
/>
</>
));
stories.add('Temp', () => <Message msg='Temp message' status={messagesStatus.TEMP} isTemp />);
stories.add('Editing', () => <Message msg='Message being edited' editing />);
stories.add('System messages', () => (
<>
<Message type='rm' isInfo />
<Message type='uj' isInfo />
<Message
msg='New name'
type='message_pinned'
isInfo
attachments={[
{
author_name: 'rocket.cat',
ts: date,
timeFormat: 'LT',
text: 'First message'
}
]}
/>
<Message type='ul' isInfo />
<Message msg='rocket.cat' type='ru' isInfo />
<Message msg='rocket.cat' type='au' isInfo />
<Message msg='rocket.cat' type='user-muted' isInfo />
<Message msg='rocket.cat' type='user-unmuted' isInfo />
<Message msg='rocket.cat' role='admin' type='subscription-role-added' isInfo />
<Message msg='rocket.cat' role='admin' type='subscription-role-removed' isInfo />
<Message msg='New name' type='r' isInfo />
<Message msg='new description' type='room_changed_description' isInfo />
<Message msg='new announcement' type='room_changed_announcement' isInfo />
<Message msg='new topic' type='room_changed_topic' isInfo />
<Message msg='public' type='room_changed_privacy' isInfo />
<Message type='room_e2e_disabled' isInfo />
<Message type='room_e2e_enabled' isInfo />
<Message type='removed-user-from-team' isInfo />
<Message type='added-user-to-team' isInfo />
<Message type='user-added-room-to-team' isInfo msg='channel-name' />
<Message type='user-converted-to-team' isInfo msg='channel-name' />
<Message type='user-converted-to-channel' isInfo msg='channel-name' />
<Message type='user-deleted-room-from-team' isInfo msg='channel-name' />
<Message type='user-removed-room-from-team' isInfo msg='channel-name' />
</>
));
stories.add('Ignored', () => <Message isIgnored />);
stories.add('Custom style', () => <Message msg='Message' style={[styles.normalize, { backgroundColor: '#ddd' }]} />);
stories.add('Show a button as attachment', () => (
<Message
attachments={[
{
text: 'Test Button',
actions: [
{
type: 'button',
text: 'Text button',
msg: 'Response message',
msg_in_chat_window: true
}
]
}
]}
/>
));
stories.add('Thumbnail from server', () => (
<Message
msg='this is a thumbnail'
attachments={[
{
text: 'Image text',
thumb_url: 'https://images-na.ssl-images-amazon.com/images/I/71jKxPAMFbL._AC_SL1500_.jpg',
title: 'Title',
title_link: 'https://github.com/RocketChat/Rocket.Chat.ReactNative/pull/2975'
}
]}
/>
));