Unverified Commit b2db7c8a authored by Diego Mello's avatar Diego Mello Committed by GitHub
Browse files

[FIX] Different token types inside list items (#3458)



* Fix different token types inside list items

* Fixing more styles

* Update tests
Co-authored-by: default avatarGerzon Z <gerzonc@icloud.com>
parent e0a0a312
import React, { useContext } from 'react';
import { Text } from 'react-native';
import { Paragraph as ParagraphProps } from '@rocket.chat/message-parser';
import Hashtag from '../Hashtag';
import AtMention from '../AtMention';
import styles from '../styles';
import Link from './Link';
import Plain from './Plain';
import Bold from './Bold';
......@@ -20,7 +22,7 @@ interface IParagraphProps {
const Inline = ({ value }: IParagraphProps): JSX.Element => {
const { useRealName, username, navToRoomInfo, mentions, channels } = useContext(MarkdownContext);
return (
<>
<Text style={styles.inline}>
{value.map(block => {
switch (block.type) {
case 'IMAGE':
......@@ -55,7 +57,7 @@ const Inline = ({ value }: IParagraphProps): JSX.Element => {
return null;
}
})}
</>
</Text>
);
};
......
......@@ -161,5 +161,8 @@ export default StyleSheet.create<any>({
},
alignRight: {
textAlign: 'right'
},
inline: {
flexShrink: 1
}
});
......@@ -5,6 +5,7 @@ import { storiesOf } from '@storybook/react-native';
import NewMarkdown from '../../app/containers/markdown/new';
import { themes } from '../../app/constants/colors';
import { longText } from '../utils';
const stories = storiesOf('NewMarkdown', module);
......@@ -49,8 +50,7 @@ const longTextMsg = [
value: [
{
type: 'PLAIN_TEXT',
value:
'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.'
value: longText
}
]
}
......@@ -108,43 +108,13 @@ const sequentialEmptySpacesMsg = [
}
];
const boldOrUnderscoreMsg = [
{
type: 'PARAGRAPH',
value: [
{
type: 'BOLD',
value: [
{
type: 'PLAIN_TEXT',
value: 'This is bold'
}
]
},
{
type: 'PLAIN_TEXT',
value: ' and '
},
{
type: 'ITALIC',
value: [
{
type: 'PLAIN_TEXT',
value: 'this is italic'
}
]
}
]
}
];
stories.add('Text', () => (
<View style={styles.container}>
<NewMarkdown tokens={simpleTextMsg} />
<NewMarkdown tokens={longTextMsg} />
<NewMarkdown tokens={lineBreakMsg} />
<NewMarkdown tokens={sequentialEmptySpacesMsg} />
<NewMarkdown tokens={boldOrUnderscoreMsg} />
<NewMarkdown tokens={[...simpleTextMsg, ...longTextMsg]} />
</View>
));
......@@ -375,6 +345,20 @@ const blockQuoteTokens = [
]
}
]
},
{
type: 'QUOTE',
value: [
{
type: 'PARAGRAPH',
value: [
{
type: 'PLAIN_TEXT',
value: longText
}
]
}
]
}
];
......@@ -546,14 +530,7 @@ const multilineCodeToken = [
type: 'CODE_LINE',
value: {
type: 'PLAIN_TEXT',
value: 'Multi line '
}
},
{
type: 'CODE_LINE',
value: {
type: 'PLAIN_TEXT',
value: 'Code'
value: 'Multi \nLine \nCode'
}
}
]
......@@ -567,53 +544,141 @@ stories.add('Code', () => (
</View>
));
const items = [
[
{
type: 'PLAIN_TEXT',
value: 'Plain text '
},
{
type: 'EMOJI',
value: {
type: 'PLAIN_TEXT',
value: 'bulb'
}
},
{
type: 'ITALIC',
value: [
{
type: 'PLAIN_TEXT',
value: ' italic '
}
]
},
{
type: 'BOLD',
value: [
{
type: 'PLAIN_TEXT',
value: ' bold '
}
]
},
{
type: 'STRIKE',
value: [
{
type: 'PLAIN_TEXT',
value: ' strike '
}
]
},
{
type: 'MENTION_CHANNEL',
value: {
type: 'PLAIN_TEXT',
value: 'general'
}
},
{
type: 'LINK',
value: {
src: {
type: 'PLAIN_TEXT',
value: 'https://google.com'
},
label: {
type: 'PLAIN_TEXT',
value: ' link '
}
}
},
{
type: 'MENTION_USER',
value: {
type: 'PLAIN_TEXT',
value: 'rocket.cat'
}
},
{
type: 'INLINE_CODE',
value: {
type: 'PLAIN_TEXT',
value: ' inline code'
}
}
],
[
{
type: 'PLAIN_TEXT',
value: longText
}
]
];
const listItems = [
{
type: 'LIST_ITEM',
value: items[0]
},
{
type: 'LIST_ITEM',
value: items[1]
}
];
const unorederedListToken = [
{
type: 'UNORDERED_LIST',
value: [
{
type: 'LIST_ITEM',
value: [
{
type: 'PLAIN_TEXT',
value: 'Open Source'
}
]
},
{
type: 'LIST_ITEM',
value: [
{
type: 'PLAIN_TEXT',
value: 'Rocket.Chat'
}
]
}
]
value: listItems
}
];
const orderedListToken = [
{
type: 'ORDERED_LIST',
value: listItems
}
];
const listMentions = [
{
_id: 'rocket.cat',
username: 'rocket.cat'
}
];
const listChannels = [
{
_id: 'general',
name: 'general'
}
];
const tasks = [
{
type: 'TASKS',
value: [
{
type: 'LIST_ITEM',
value: [
{
type: 'PLAIN_TEXT',
value: 'Open Source'
}
]
type: 'TASK',
status: true,
value: items[0]
},
{
type: 'LIST_ITEM',
value: [
{
type: 'PLAIN_TEXT',
value: 'Rocket.Chat'
}
]
type: 'TASK',
status: false,
value: items[1]
}
]
}
......@@ -621,7 +686,8 @@ const orderedListToken = [
stories.add('Lists', () => (
<View style={styles.container}>
<NewMarkdown tokens={unorederedListToken} />
<NewMarkdown tokens={orderedListToken} />
<NewMarkdown tokens={unorederedListToken} mentions={listMentions} channels={listChannels} />
<NewMarkdown tokens={orderedListToken} mentions={listMentions} channels={listChannels} />
<NewMarkdown tokens={tasks} mentions={listMentions} channels={listChannels} />
</View>
));
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment