diff --git a/app/containers/markdown/index.tsx b/app/containers/markdown/index.tsx index 311887e0e..1105b905c 100644 --- a/app/containers/markdown/index.tsx +++ b/app/containers/markdown/index.tsx @@ -243,8 +243,8 @@ class Markdown extends PureComponent { }; renderHashtag = ({ hashtag }: { hashtag: string }) => { - const { channels, navToRoomInfo, style, theme } = this.props; - return ; + const { channels, navToRoomInfo, style } = this.props; + return ; }; renderAtMention = ({ mentionName }: { mentionName: string }) => { diff --git a/app/containers/markdown/new/CodeLine.tsx b/app/containers/markdown/new/CodeLine.tsx index b13266603..78ffe0ce8 100644 --- a/app/containers/markdown/new/CodeLine.tsx +++ b/app/containers/markdown/new/CodeLine.tsx @@ -6,6 +6,12 @@ interface ICodeLineProps { value: CodeLineProps['value']; } -const CodeLine: React.FC = ({ value }) => {value.type === 'PLAIN_TEXT' && value.value}; +const CodeLine: React.FC = ({ value }) => { + if (value.type !== 'PLAIN_TEXT') { + return null; + } + + return {value.value}; +}; export default CodeLine; diff --git a/app/containers/markdown/new/Emoji.tsx b/app/containers/markdown/new/Emoji.tsx index 0be33d420..d9a64342c 100644 --- a/app/containers/markdown/new/Emoji.tsx +++ b/app/containers/markdown/new/Emoji.tsx @@ -17,7 +17,7 @@ const Emoji: React.FC = ({ value, style, isBigEmoji }) => { const { theme } = useTheme(); const emojiUnicode = shortnameToUnicode(`:${value.value}:`); return ( - {emojiUnicode} + {emojiUnicode} ); }; diff --git a/app/containers/markdown/new/Inline.tsx b/app/containers/markdown/new/Inline.tsx index 2b03404b5..2e3de0b11 100644 --- a/app/containers/markdown/new/Inline.tsx +++ b/app/containers/markdown/new/Inline.tsx @@ -1,5 +1,5 @@ import React from 'react'; -import { StyleProp, Text, ViewStyle } from 'react-native'; +import { StyleProp, ViewStyle } from 'react-native'; import { Paragraph as ParagraphProps } from '@rocket.chat/message-parser'; import Hashtag from '../Hashtag'; @@ -11,28 +11,21 @@ import Italic from './Italic'; import Emoji from './Emoji'; import Mention from './Mention'; import InlineCode from './InlineCode'; - -interface IUser { - _id: string; - username: string; - name: string; -} - -type UserMention = Pick; +import { UserMention } from '../../message/interfaces'; interface IParagraphProps { value: ParagraphProps['value']; - mentions: UserMention[]; - channels: { + mentions?: UserMention[]; + channels?: { name: string; _id: number; }[]; - navToRoomInfo: Function; - style: StyleProp[]; + navToRoomInfo?: Function; + style?: StyleProp[]; } const Inline: React.FC = ({ value, mentions, channels, navToRoomInfo, style }) => ( - + <> {value.map(block => { switch (block.type) { case 'PLAIN_TEXT': @@ -57,7 +50,7 @@ const Inline: React.FC = ({ value, mentions, channels, navToRoo return null; } })} - + ); export default Inline; diff --git a/app/containers/markdown/new/Mention.tsx b/app/containers/markdown/new/Mention.tsx index 3a084be86..0c0c23590 100644 --- a/app/containers/markdown/new/Mention.tsx +++ b/app/containers/markdown/new/Mention.tsx @@ -6,14 +6,7 @@ import styles from '../styles'; import { events, logEvent } from '../../../utils/log'; import { useTheme } from '../../../theme'; import { themes } from '../../../constants/colors'; - -interface IUser { - _id: string; - username: string; - name: string; -} - -type UserMention = Pick; +import { UserMention } from '../../message/interfaces'; interface IMentionProps { value: UserMentionProps['value']; diff --git a/app/containers/markdown/new/OrderedList.tsx b/app/containers/markdown/new/OrderedList.tsx index 5896b649f..9b28398e2 100644 --- a/app/containers/markdown/new/OrderedList.tsx +++ b/app/containers/markdown/new/OrderedList.tsx @@ -1,6 +1,5 @@ -/* eslint-disable react/no-array-index-key */ import React from 'react'; -import { View, Text } from 'react-native'; +import { View, Text, StyleSheet } from 'react-native'; import { OrderedList as OrderedListProps } from '@rocket.chat/message-parser'; import Inline from './Inline'; @@ -9,10 +8,16 @@ interface IOrderedListProps { value: OrderedListProps['value']; } +const styles = StyleSheet.create({ + container: { + flexDirection: 'row' + } +}); + const OrderedList: React.FC = React.memo(({ value }) => ( <> {value.map((item, index) => ( - + {index + 1}. diff --git a/app/containers/markdown/new/Paragraph.tsx b/app/containers/markdown/new/Paragraph.tsx index ff2e409c2..cb44a7fda 100644 --- a/app/containers/markdown/new/Paragraph.tsx +++ b/app/containers/markdown/new/Paragraph.tsx @@ -1,30 +1,31 @@ import React from 'react'; -import { StyleProp, ViewStyle } from 'react-native'; +import { StyleProp, Text, ViewStyle } from 'react-native'; import { Paragraph as ParagraphProps } from '@rocket.chat/message-parser'; +import { UserMention } from '../../message/interfaces'; import Inline from './Inline'; - -interface IUser { - _id: string; - username: string; - name: string; -} - -type UserMention = Pick; +import styles from '../styles'; +import { useTheme } from '../../../theme'; +import { themes } from '../../../constants/colors'; interface IParagraphProps { value: ParagraphProps['value']; - mentions: UserMention[]; - channels: { + mentions?: UserMention[]; + channels?: { name: string; _id: number; }[]; - navToRoomInfo: Function; - style: StyleProp; + navToRoomInfo?: Function; + style?: StyleProp[]; } -const Paragraph: React.FC = ({ value, mentions, channels, navToRoomInfo, style }) => ( - -); +const Paragraph: React.FC = ({ value, mentions, channels, navToRoomInfo, style }) => { + const { theme } = useTheme(); + return ( + + + + ); +}; export default Paragraph; diff --git a/app/containers/markdown/new/Quote.tsx b/app/containers/markdown/new/Quote.tsx index 522bfb331..5d0e45a56 100644 --- a/app/containers/markdown/new/Quote.tsx +++ b/app/containers/markdown/new/Quote.tsx @@ -1,4 +1,3 @@ -/* eslint-disable react/no-array-index-key */ import React from 'react'; import { View } from 'react-native'; import { Quote as QuoteProps } from '@rocket.chat/message-parser'; diff --git a/app/containers/markdown/new/Strike.tsx b/app/containers/markdown/new/Strike.tsx index 61f25786c..100c92dc2 100644 --- a/app/containers/markdown/new/Strike.tsx +++ b/app/containers/markdown/new/Strike.tsx @@ -1,4 +1,3 @@ -/* eslint-disable react/no-array-index-key */ import React from 'react'; import { StyleSheet, Text } from 'react-native'; import { Strike as StrikeProps } from '@rocket.chat/message-parser'; diff --git a/app/containers/markdown/new/TaskList.tsx b/app/containers/markdown/new/TaskList.tsx new file mode 100644 index 000000000..33411be00 --- /dev/null +++ b/app/containers/markdown/new/TaskList.tsx @@ -0,0 +1,26 @@ +import React from 'react'; +import { Text } from 'react-native'; +import { Tasks as TasksProps } from '@rocket.chat/message-parser'; +import { Checkbox } from 'react-native-ui-lib'; + +import Inline from './Inline'; + +interface ITasksProps { + value: TasksProps['value']; +} + +const TaskList: React.FC = ({ value }) => ( + + {value.map(item => ( + <> + + + ))} + +); + +export default TaskList; diff --git a/app/containers/markdown/new/index.tsx b/app/containers/markdown/new/index.tsx index b6a043961..03c7d7981 100644 --- a/app/containers/markdown/new/index.tsx +++ b/app/containers/markdown/new/index.tsx @@ -9,14 +9,9 @@ import Code from './Code'; import BigEmoji from './BigEmoji'; import OrderedList from './OrderedList'; import UnorderedList from './UnorderedList'; +import { UserMention } from '../../message/interfaces'; +import TaskList from './TaskList'; -interface IUser { - _id: string; - username: string; - name: string; -} - -type UserMention = Pick; interface IBodyProps { tokens: MarkdownAST; mentions: UserMention[]; @@ -44,7 +39,7 @@ const Body: React.FC = ({ tokens, mentions, channels, navToRoomInfo, case 'ORDERED_LIST': return ; case 'TASKS': - return ; + return ; case 'QUOTE': return ; case 'PARAGRAPH': diff --git a/app/containers/message/interfaces.ts b/app/containers/message/interfaces.ts index 98a0b003f..6d0a15369 100644 --- a/app/containers/message/interfaces.ts +++ b/app/containers/message/interfaces.ts @@ -1,3 +1,5 @@ +import { MarkdownAST } from '@rocket.chat/message-parser'; + export interface IMessageAttachments { attachments: any; timeFormat: string; @@ -48,12 +50,21 @@ export interface IMessageCallButton { callJitsi: Function; } +export interface IUser { + _id: string; + username: string; + name: string; +} + +export type UserMention = Pick; + export interface IMessageContent { isTemp: boolean; isInfo: boolean; tmid: string; isThreadRoom: boolean; msg: string; + md: MarkdownAST; theme: string; isEdited: boolean; isEncrypted: boolean; @@ -62,7 +73,7 @@ export interface IMessageContent { name: string; _id: number; }[]; - mentions: object[]; + mentions: UserMention[]; navToRoomInfo: Function; useRealName: boolean; isIgnored: boolean;