From 5edbfe65b6c75aab5513238e50f4c9c718a19976 Mon Sep 17 00:00:00 2001 From: Gerzon Z Date: Wed, 22 Sep 2021 19:09:26 -0400 Subject: [PATCH] Migrate components to TypeScript and fix styling --- app/containers/markdown/Hashtag.tsx | 5 +- app/containers/markdown/index.tsx | 17 +++-- app/containers/markdown/new/BigEmoji.tsx | 6 +- app/containers/markdown/new/Bold.tsx | 8 +-- .../markdown/new/{Code.js => Code.tsx} | 21 +++--- app/containers/markdown/new/CodeLine.js | 11 --- app/containers/markdown/new/CodeLine.tsx | 11 +++ app/containers/markdown/new/Emoji.js | 24 ------- app/containers/markdown/new/Emoji.tsx | 24 +++++++ .../markdown/new/{Heading.js => Heading.tsx} | 15 ++-- .../markdown/new/{Inline.js => Inline.tsx} | 37 ++++++---- .../new/{InlineCode.js => InlineCode.tsx} | 16 ++--- app/containers/markdown/new/Italic.tsx | 13 ++-- .../markdown/new/{Link.js => Link.tsx} | 16 ++--- app/containers/markdown/new/Mention.js | 63 ---------------- app/containers/markdown/new/Mention.tsx | 66 +++++++++++++++++ .../new/{OrderedList.js => OrderedList.tsx} | 14 ++-- app/containers/markdown/new/Paragraph.js | 18 ----- app/containers/markdown/new/Paragraph.tsx | 30 ++++++++ app/containers/markdown/new/Plain.tsx | 4 +- .../markdown/new/{Quote.js => Quote.tsx} | 17 ++--- app/containers/markdown/new/Strike.tsx | 4 +- app/containers/markdown/new/UnorderedList.js | 18 ----- app/containers/markdown/new/UnorderedList.tsx | 18 +++++ app/containers/markdown/new/index.js | 67 ----------------- app/containers/markdown/new/index.tsx | 72 +++++++++++++++++++ app/containers/message/Content.tsx | 3 + app/i18n/locales/en.json | 3 +- 28 files changed, 326 insertions(+), 295 deletions(-) rename app/containers/markdown/new/{Code.js => Code.tsx} (63%) delete mode 100644 app/containers/markdown/new/CodeLine.js create mode 100644 app/containers/markdown/new/CodeLine.tsx delete mode 100644 app/containers/markdown/new/Emoji.js create mode 100644 app/containers/markdown/new/Emoji.tsx rename app/containers/markdown/new/{Heading.js => Heading.tsx} (70%) rename app/containers/markdown/new/{Inline.js => Inline.tsx} (65%) rename app/containers/markdown/new/{InlineCode.js => InlineCode.tsx} (66%) rename app/containers/markdown/new/{Link.js => Link.tsx} (88%) delete mode 100644 app/containers/markdown/new/Mention.js create mode 100644 app/containers/markdown/new/Mention.tsx rename app/containers/markdown/new/{OrderedList.js => OrderedList.tsx} (55%) delete mode 100644 app/containers/markdown/new/Paragraph.js create mode 100644 app/containers/markdown/new/Paragraph.tsx rename app/containers/markdown/new/{Quote.js => Quote.tsx} (68%) delete mode 100644 app/containers/markdown/new/UnorderedList.js create mode 100644 app/containers/markdown/new/UnorderedList.tsx delete mode 100644 app/containers/markdown/new/index.js create mode 100644 app/containers/markdown/new/index.tsx diff --git a/app/containers/markdown/Hashtag.tsx b/app/containers/markdown/Hashtag.tsx index e3ddf13b2..e4b5f8f0b 100644 --- a/app/containers/markdown/Hashtag.tsx +++ b/app/containers/markdown/Hashtag.tsx @@ -1,5 +1,5 @@ import React from 'react'; -import { Text } from 'react-native'; +import { StyleProp, Text, TextStyle } from 'react-native'; import { themes } from '../../constants/colors'; import { useTheme } from '../../theme'; @@ -8,8 +8,7 @@ import styles from './styles'; interface IHashtag { hashtag: string; navToRoomInfo: Function; - style: []; - theme: string; + style: StyleProp; channels: { name: string; _id: number; diff --git a/app/containers/markdown/index.tsx b/app/containers/markdown/index.tsx index 4a8ddbb82..311887e0e 100644 --- a/app/containers/markdown/index.tsx +++ b/app/containers/markdown/index.tsx @@ -25,14 +25,18 @@ import { isValidURL } from '../../utils/url'; import { getUserSelector } from '../../selectors/login'; import NewMarkdown from './new'; +interface IUser { + _id: string; + username: string; + name: string; +} + +type UserMention = Pick; + interface IMarkdownProps { msg: string; - md: [ - { - tokens: MarkdownAST; - mentions: object[]; - } - ]; + md: MarkdownAST; + mentions: UserMention[]; getCustomEmoji: Function; baseUrl: string; username: string; @@ -45,7 +49,6 @@ interface IMarkdownProps { name: string; _id: number; }[]; - mentions: object[]; user: { enableMessageParserEarlyAdoption: boolean; }; diff --git a/app/containers/markdown/new/BigEmoji.tsx b/app/containers/markdown/new/BigEmoji.tsx index a29543eb3..c62c89a4e 100644 --- a/app/containers/markdown/new/BigEmoji.tsx +++ b/app/containers/markdown/new/BigEmoji.tsx @@ -1,4 +1,4 @@ -import React, { FC } from 'react'; +import React from 'react'; import { StyleSheet, View } from 'react-native'; import { BigEmoji as BigEmojiProps } from '@rocket.chat/message-parser'; @@ -14,10 +14,10 @@ const styles = StyleSheet.create({ } }); -const BigEmoji: FC = ({ value }) => ( +const BigEmoji: React.FC = ({ value }) => ( {value.map(block => ( - + ))} ); diff --git a/app/containers/markdown/new/Bold.tsx b/app/containers/markdown/new/Bold.tsx index 840e3ee38..e8e5a9705 100644 --- a/app/containers/markdown/new/Bold.tsx +++ b/app/containers/markdown/new/Bold.tsx @@ -1,8 +1,8 @@ -/* eslint-disable react/no-array-index-key */ -import React, { FC } from 'react'; +import React from 'react'; import { StyleSheet, Text } from 'react-native'; import { Bold as BoldProps } from '@rocket.chat/message-parser'; +import sharedStyles from '../../../views/Styles'; import Strike from './Strike'; import Italic from './Italic'; import Plain from './Plain'; @@ -13,11 +13,11 @@ interface IBoldProps { const styles = StyleSheet.create({ text: { - fontWeight: 'bold' + ...sharedStyles.textBold } }); -const Bold: FC = ({ value }) => ( +const Bold: React.FC = ({ value }) => ( {value.map(block => { switch (block.type) { diff --git a/app/containers/markdown/new/Code.js b/app/containers/markdown/new/Code.tsx similarity index 63% rename from app/containers/markdown/new/Code.js rename to app/containers/markdown/new/Code.tsx index 02b34ed7c..e0fd06710 100644 --- a/app/containers/markdown/new/Code.js +++ b/app/containers/markdown/new/Code.tsx @@ -1,14 +1,18 @@ -/* eslint-disable react/no-array-index-key */ import React from 'react'; -import { Text } from 'react-native'; -import PropTypes from 'prop-types'; +import { StyleProp, Text, TextStyle } from 'react-native'; +import { Code as CodeProps } from '@rocket.chat/message-parser'; import styles from '../styles'; import { themes } from '../../../constants/colors'; import { useTheme } from '../../../theme'; import CodeLine from './CodeLine'; -const Code = ({ value, style }) => { +interface ICodeProps { + value: CodeProps['value']; + style: StyleProp[]; +} + +const Code: React.FC = ({ value, style }) => { const { theme } = useTheme(); return ( @@ -22,10 +26,10 @@ const Code = ({ value, style }) => { }, ...style ]}> - {value.map((block, index) => { + {value.map(block => { switch (block.type) { case 'CODE_LINE': - return ; + return ; default: return null; } @@ -34,9 +38,4 @@ const Code = ({ value, style }) => { ); }; -Code.propTypes = { - value: PropTypes.array, - style: PropTypes.object -}; - export default Code; diff --git a/app/containers/markdown/new/CodeLine.js b/app/containers/markdown/new/CodeLine.js deleted file mode 100644 index 34c6872d3..000000000 --- a/app/containers/markdown/new/CodeLine.js +++ /dev/null @@ -1,11 +0,0 @@ -import React from 'react'; -import { Text } from 'react-native'; -import PropTypes from 'prop-types'; - -const CodeLine = ({ value }) => {value.type === 'PLAIN_TEXT' && value.value}; - -CodeLine.propTypes = { - value: PropTypes.object -}; - -export default CodeLine; diff --git a/app/containers/markdown/new/CodeLine.tsx b/app/containers/markdown/new/CodeLine.tsx new file mode 100644 index 000000000..b13266603 --- /dev/null +++ b/app/containers/markdown/new/CodeLine.tsx @@ -0,0 +1,11 @@ +import React from 'react'; +import { Text } from 'react-native'; +import { CodeLine as CodeLineProps } from '@rocket.chat/message-parser'; + +interface ICodeLineProps { + value: CodeLineProps['value']; +} + +const CodeLine: React.FC = ({ value }) => {value.type === 'PLAIN_TEXT' && value.value}; + +export default CodeLine; diff --git a/app/containers/markdown/new/Emoji.js b/app/containers/markdown/new/Emoji.js deleted file mode 100644 index 3fcea2a2c..000000000 --- a/app/containers/markdown/new/Emoji.js +++ /dev/null @@ -1,24 +0,0 @@ -import React from 'react'; -import { Text } from 'react-native'; -import PropTypes from 'prop-types'; - -import shortnameToUnicode from '../../../utils/shortnameToUnicode'; -import { themes } from '../../../constants/colors'; -import { useTheme } from '../../../theme'; -import styles from '../styles'; - -const Emoji = ({ emojiHandle, style, isBigEmoji }) => { - const { theme } = useTheme(); - const emojiUnicode = shortnameToUnicode(emojiHandle); - return ( - {emojiUnicode} - ); -}; - -Emoji.propTypes = { - emojiHandle: PropTypes.string, - style: PropTypes.object, - isBigEmoji: PropTypes.bool -}; - -export default Emoji; diff --git a/app/containers/markdown/new/Emoji.tsx b/app/containers/markdown/new/Emoji.tsx new file mode 100644 index 000000000..0be33d420 --- /dev/null +++ b/app/containers/markdown/new/Emoji.tsx @@ -0,0 +1,24 @@ +import React from 'react'; +import { StyleProp, Text, TextStyle } from 'react-native'; +import { Emoji as EmojiProps } from '@rocket.chat/message-parser'; + +import shortnameToUnicode from '../../../utils/shortnameToUnicode'; +import { themes } from '../../../constants/colors'; +import { useTheme } from '../../../theme'; +import styles from '../styles'; + +interface IEmojiProps { + value: EmojiProps['value']; + style?: StyleProp; + isBigEmoji?: boolean; +} + +const Emoji: React.FC = ({ value, style, isBigEmoji }) => { + const { theme } = useTheme(); + const emojiUnicode = shortnameToUnicode(`:${value.value}:`); + return ( + {emojiUnicode} + ); +}; + +export default Emoji; diff --git a/app/containers/markdown/new/Heading.js b/app/containers/markdown/new/Heading.tsx similarity index 70% rename from app/containers/markdown/new/Heading.js rename to app/containers/markdown/new/Heading.tsx index cd578a5e4..09f1a7f0d 100644 --- a/app/containers/markdown/new/Heading.js +++ b/app/containers/markdown/new/Heading.tsx @@ -1,11 +1,17 @@ import React from 'react'; import { Text } from 'react-native'; -import PropTypes from 'prop-types'; +import { Heading as HeadingProps } from '@rocket.chat/message-parser'; + import { themes } from '../../../constants/colors'; import styles from '../styles'; import { useTheme } from '../../../theme'; -const Heading = ({ value, level }) => { +interface IHeadingProps { + value: HeadingProps['value']; + level: HeadingProps['level']; +} + +const Heading: React.FC = ({ value, level }) => { const { theme } = useTheme(); const textStyle = styles[`heading${level}`]; @@ -23,9 +29,4 @@ const Heading = ({ value, level }) => { ); }; -Heading.propTypes = { - value: PropTypes.string, - level: PropTypes.number -}; - export default Heading; diff --git a/app/containers/markdown/new/Inline.js b/app/containers/markdown/new/Inline.tsx similarity index 65% rename from app/containers/markdown/new/Inline.js rename to app/containers/markdown/new/Inline.tsx index 5fed842fe..2b03404b5 100644 --- a/app/containers/markdown/new/Inline.js +++ b/app/containers/markdown/new/Inline.tsx @@ -1,9 +1,8 @@ import React from 'react'; -import { Text } from 'react-native'; -import PropTypes from 'prop-types'; +import { StyleProp, Text, ViewStyle } from 'react-native'; +import { Paragraph as ParagraphProps } from '@rocket.chat/message-parser'; import Hashtag from '../Hashtag'; - import Link from './Link'; import Plain from './Plain'; import Bold from './Bold'; @@ -13,7 +12,26 @@ import Emoji from './Emoji'; import Mention from './Mention'; import InlineCode from './InlineCode'; -const Inline = ({ value, mentions, channels, navToRoomInfo, style }) => ( +interface IUser { + _id: string; + username: string; + name: string; +} + +type UserMention = Pick; + +interface IParagraphProps { + value: ParagraphProps['value']; + mentions: UserMention[]; + channels: { + name: string; + _id: number; + }[]; + navToRoomInfo: Function; + style: StyleProp[]; +} + +const Inline: React.FC = ({ value, mentions, channels, navToRoomInfo, style }) => ( {value.map(block => { switch (block.type) { @@ -26,12 +44,11 @@ const Inline = ({ value, mentions, channels, navToRoomInfo, style }) => ( case 'ITALIC': return ; case 'LINK': - // eslint-disable-next-line jsx-a11y/anchor-is-valid return ; case 'MENTION_USER': return ; case 'EMOJI': - return ; + return ; case 'MENTION_CHANNEL': return ; case 'INLINE_CODE': @@ -43,12 +60,4 @@ const Inline = ({ value, mentions, channels, navToRoomInfo, style }) => ( ); -Inline.propTypes = { - value: PropTypes.object, - mentions: PropTypes.array, - channels: PropTypes.array, - navToRoomInfo: PropTypes.func, - style: PropTypes.oneOfType([PropTypes.array, PropTypes.object]) -}; - export default Inline; diff --git a/app/containers/markdown/new/InlineCode.js b/app/containers/markdown/new/InlineCode.tsx similarity index 66% rename from app/containers/markdown/new/InlineCode.js rename to app/containers/markdown/new/InlineCode.tsx index a4fdf6101..ccec7c464 100644 --- a/app/containers/markdown/new/InlineCode.js +++ b/app/containers/markdown/new/InlineCode.tsx @@ -1,12 +1,17 @@ import React from 'react'; -import { Text } from 'react-native'; -import PropTypes from 'prop-types'; +import { StyleProp, Text, TextStyle } from 'react-native'; +import { InlineCode as InlineCodeProps } from '@rocket.chat/message-parser'; import styles from '../styles'; import { themes } from '../../../constants/colors'; import { useTheme } from '../../../theme'; -const InlineCode = ({ value, style }) => { +interface IInlineCodeProps { + value: InlineCodeProps['value']; + style: StyleProp[]; +} + +const InlineCode: React.FC = ({ value, style }) => { const { theme } = useTheme(); return ( @@ -32,9 +37,4 @@ const InlineCode = ({ value, style }) => { ); }; -InlineCode.propTypes = { - value: PropTypes.object, - style: PropTypes.oneOfType([PropTypes.array, PropTypes.object]) -}; - export default InlineCode; diff --git a/app/containers/markdown/new/Italic.tsx b/app/containers/markdown/new/Italic.tsx index e26525f6e..c7391dcb9 100644 --- a/app/containers/markdown/new/Italic.tsx +++ b/app/containers/markdown/new/Italic.tsx @@ -1,5 +1,4 @@ -/* eslint-disable react/no-array-index-key */ -import React, { FC } from 'react'; +import React from 'react'; import { StyleSheet, Text } from 'react-native'; import { Italic as ItalicProps } from '@rocket.chat/message-parser'; @@ -17,16 +16,16 @@ const styles = StyleSheet.create({ } }); -const Italic: FC = ({ value }) => ( +const Italic: React.FC = ({ value }) => ( - {value.map((block, index) => { + {value.map(block => { switch (block.type) { case 'PLAIN_TEXT': - return ; + return ; case 'STRIKE': - return ; + return ; case 'BOLD': - return ; + return ; default: return null; } diff --git a/app/containers/markdown/new/Link.js b/app/containers/markdown/new/Link.tsx similarity index 88% rename from app/containers/markdown/new/Link.js rename to app/containers/markdown/new/Link.tsx index 2f5abc043..11aa31940 100644 --- a/app/containers/markdown/new/Link.js +++ b/app/containers/markdown/new/Link.tsx @@ -1,6 +1,6 @@ import React from 'react'; import { Text, Clipboard } from 'react-native'; -import PropTypes from 'prop-types'; +import { Link as LinkProps } from '@rocket.chat/message-parser'; import styles from '../styles'; import I18n from '../../../i18n'; @@ -9,12 +9,15 @@ import { useTheme } from '../../../theme'; import openLink from '../../../utils/openLink'; import EventEmitter from '../../../utils/events'; import { themes } from '../../../constants/colors'; - import Strike from './Strike'; import Italic from './Italic'; import Bold from './Bold'; -const Link = ({ value }) => { +interface ILinkProps { + value: LinkProps['value']; +} + +const Link: React.FC = ({ value }) => { const { theme } = useTheme(); const { src, label } = value; const handlePress = () => { @@ -49,11 +52,4 @@ const Link = ({ value }) => { ); }; -Link.propTypes = { - value: { - src: PropTypes.string, - label: PropTypes.string - } -}; - export default Link; diff --git a/app/containers/markdown/new/Mention.js b/app/containers/markdown/new/Mention.js deleted file mode 100644 index 2db987d69..000000000 --- a/app/containers/markdown/new/Mention.js +++ /dev/null @@ -1,63 +0,0 @@ -import React from 'react'; -import { Text } from 'react-native'; -import PropTypes from 'prop-types'; - -import styles from '../styles'; -import { events, logEvent } from '../../../utils/log'; -import { useTheme } from '../../../theme'; -import { themes } from '../../../constants/colors'; - -const Mention = ({ value: mention, mentions, navToRoomInfo, style }) => { - const { theme } = useTheme(); - let mentionStyle = []; - const notMentionedStyle = [styles.text, { color: themes[theme].bodyText }, ...style]; - const mentionedUser = mentions.find(mentioned => mentioned.username === mention.value); - - if (mention === 'all' || mention === 'here') { - mentionStyle = [ - { - color: themes[theme].mentionGroupColor - }, - ...style - ]; - } else if (mention === mentionedUser) { - mentionStyle = { - color: themes[theme].mentionMeColor - }; - } else { - mentionStyle = { - color: themes[theme].mentionOtherColor - }; - } - - const handlePress = () => { - logEvent(events.ROOM_MENTION_GO_USER_INFO); - const navParam = { - t: 'd', - rid: mentionedUser && mentionedUser._id - }; - navToRoomInfo(navParam); - }; - - return ( - - {mentionedUser ? mentionedUser.name || mention.value : `@{${mention}}`} - - ); -}; - -Mention.propTypes = { - value: PropTypes.string, - mentions: PropTypes.array, - navToRoomInfo: PropTypes.func, - style: PropTypes.oneOfType([PropTypes.array, PropTypes.object]) -}; - -export default Mention; diff --git a/app/containers/markdown/new/Mention.tsx b/app/containers/markdown/new/Mention.tsx new file mode 100644 index 000000000..3a084be86 --- /dev/null +++ b/app/containers/markdown/new/Mention.tsx @@ -0,0 +1,66 @@ +import React from 'react'; +import { StyleProp, Text, TextStyle, ViewStyle } from 'react-native'; +import { UserMention as UserMentionProps } from '@rocket.chat/message-parser'; + +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; + +interface IMentionProps { + value: UserMentionProps['value']; + mentions: UserMention[]; + navToRoomInfo: Function; + style: StyleProp[]; +} + +const Mention: React.FC = ({ value: { value: mention }, mentions, navToRoomInfo, style }) => { + const { theme } = useTheme(); + let mentionStyle: StyleProp; + const notMentionedStyle = [styles.text, { color: themes[theme].bodyText }, ...style]; + const mentioned = mentions.find(mentioned => mentioned.username === mention); + + if (mention === 'all' || mention === 'here') { + mentionStyle = [ + { + color: themes[theme].mentionGroupColor + }, + ...style + ]; + } else if (mentioned) { + mentionStyle = { + color: themes[theme].mentionMeColor + }; + } else { + mentionStyle = { + color: themes[theme].mentionOtherColor + }; + } + + const handlePress = () => { + logEvent(events.ROOM_MENTION_GO_USER_INFO); + const navParam = { + t: 'd', + rid: mentioned && mentioned._id + }; + navToRoomInfo(navParam); + }; + + return ( + + {mentioned ? mentioned.name || mention : `@{${mention}}`} + + ); +}; + +export default Mention; diff --git a/app/containers/markdown/new/OrderedList.js b/app/containers/markdown/new/OrderedList.tsx similarity index 55% rename from app/containers/markdown/new/OrderedList.js rename to app/containers/markdown/new/OrderedList.tsx index f5a4f19d3..5896b649f 100644 --- a/app/containers/markdown/new/OrderedList.js +++ b/app/containers/markdown/new/OrderedList.tsx @@ -1,23 +1,23 @@ /* eslint-disable react/no-array-index-key */ import React from 'react'; import { View, Text } from 'react-native'; -import PropTypes from 'prop-types'; +import { OrderedList as OrderedListProps } from '@rocket.chat/message-parser'; import Inline from './Inline'; -const OrderedList = React.memo(({ value }) => ( +interface IOrderedListProps { + value: OrderedListProps['value']; +} + +const OrderedList: React.FC = React.memo(({ value }) => ( <> {value.map((item, index) => ( {index + 1}. - + ))} )); -OrderedList.propTypes = { - value: PropTypes.array -}; - export default OrderedList; diff --git a/app/containers/markdown/new/Paragraph.js b/app/containers/markdown/new/Paragraph.js deleted file mode 100644 index dcc9b8fb2..000000000 --- a/app/containers/markdown/new/Paragraph.js +++ /dev/null @@ -1,18 +0,0 @@ -import React from 'react'; -import PropTypes from 'prop-types'; - -import Inline from './Inline'; - -const Paragraph = ({ value, mentions, channels, navToRoomInfo, style }) => ( - -); - -Paragraph.propTypes = { - value: PropTypes.string, - mentions: PropTypes.array, - channels: PropTypes.array, - navToRoomInfo: PropTypes.func, - style: PropTypes.oneOfType([PropTypes.array, PropTypes.object]) -}; - -export default Paragraph; diff --git a/app/containers/markdown/new/Paragraph.tsx b/app/containers/markdown/new/Paragraph.tsx new file mode 100644 index 000000000..ff2e409c2 --- /dev/null +++ b/app/containers/markdown/new/Paragraph.tsx @@ -0,0 +1,30 @@ +import React from 'react'; +import { StyleProp, ViewStyle } from 'react-native'; +import { Paragraph as ParagraphProps } from '@rocket.chat/message-parser'; + +import Inline from './Inline'; + +interface IUser { + _id: string; + username: string; + name: string; +} + +type UserMention = Pick; + +interface IParagraphProps { + value: ParagraphProps['value']; + mentions: UserMention[]; + channels: { + name: string; + _id: number; + }[]; + navToRoomInfo: Function; + style: StyleProp; +} + +const Paragraph: React.FC = ({ value, mentions, channels, navToRoomInfo, style }) => ( + +); + +export default Paragraph; diff --git a/app/containers/markdown/new/Plain.tsx b/app/containers/markdown/new/Plain.tsx index 9e3e93804..6a8dfa219 100644 --- a/app/containers/markdown/new/Plain.tsx +++ b/app/containers/markdown/new/Plain.tsx @@ -1,4 +1,4 @@ -import React, { FC } from 'react'; +import React from 'react'; import { Text } from 'react-native'; import { Plain as PlainProps } from '@rocket.chat/message-parser'; @@ -6,6 +6,6 @@ interface IPlainProps { value: PlainProps['value']; } -const Plain: FC = ({ value }) => {value}; +const Plain: React.FC = ({ value }) => {value}; export default Plain; diff --git a/app/containers/markdown/new/Quote.js b/app/containers/markdown/new/Quote.tsx similarity index 68% rename from app/containers/markdown/new/Quote.js rename to app/containers/markdown/new/Quote.tsx index 6c75de1b7..522bfb331 100644 --- a/app/containers/markdown/new/Quote.js +++ b/app/containers/markdown/new/Quote.tsx @@ -1,21 +1,26 @@ /* eslint-disable react/no-array-index-key */ import React from 'react'; import { View } from 'react-native'; -import PropTypes from 'prop-types'; +import { Quote as QuoteProps } from '@rocket.chat/message-parser'; + import { themes } from '../../../constants/colors'; import { useTheme } from '../../../theme'; import styles from '../styles'; import Paragraph from './Paragraph'; -const Quote = ({ value }) => { +interface IQuoteProps { + value: QuoteProps['value']; +} + +const Quote: React.FC = ({ value }) => { const { theme } = useTheme(); return ( <> - {value.map((item, index) => ( - + {value.map(item => ( + ))} @@ -23,8 +28,4 @@ const Quote = ({ value }) => { ); }; -Quote.propTypes = { - value: PropTypes.string -}; - export default Quote; diff --git a/app/containers/markdown/new/Strike.tsx b/app/containers/markdown/new/Strike.tsx index 75c4880c4..61f25786c 100644 --- a/app/containers/markdown/new/Strike.tsx +++ b/app/containers/markdown/new/Strike.tsx @@ -1,5 +1,5 @@ /* eslint-disable react/no-array-index-key */ -import React, { FC } from 'react'; +import React from 'react'; import { StyleSheet, Text } from 'react-native'; import { Strike as StrikeProps } from '@rocket.chat/message-parser'; @@ -17,7 +17,7 @@ const styles = StyleSheet.create({ } }); -const Strike: FC = ({ value }) => ( +const Strike: React.FC = ({ value }) => ( {value.map(block => { switch (block.type) { diff --git a/app/containers/markdown/new/UnorderedList.js b/app/containers/markdown/new/UnorderedList.js deleted file mode 100644 index c5c0fd3d2..000000000 --- a/app/containers/markdown/new/UnorderedList.js +++ /dev/null @@ -1,18 +0,0 @@ -/* eslint-disable react/no-array-index-key */ -import React from 'react'; -import PropTypes from 'prop-types'; -import Inline from './Inline'; - -const UnorderedList = React.memo(({ value }) => ( - <> - {value.map((item, index) => ( - - ))} - -)); - -UnorderedList.propTypes = { - value: PropTypes.array -}; - -export default UnorderedList; diff --git a/app/containers/markdown/new/UnorderedList.tsx b/app/containers/markdown/new/UnorderedList.tsx new file mode 100644 index 000000000..f980b382e --- /dev/null +++ b/app/containers/markdown/new/UnorderedList.tsx @@ -0,0 +1,18 @@ +import React from 'react'; +import { UnorderedList as UnorderedListProps } from '@rocket.chat/message-parser'; + +import Inline from './Inline'; + +interface IUnorderedListProps { + value: UnorderedListProps['value']; +} + +const UnorderedList: React.FC = ({ value }) => ( + <> + {value.map(item => ( + + ))} + +); + +export default UnorderedList; diff --git a/app/containers/markdown/new/index.js b/app/containers/markdown/new/index.js deleted file mode 100644 index cb1a3c9a1..000000000 --- a/app/containers/markdown/new/index.js +++ /dev/null @@ -1,67 +0,0 @@ -/* eslint-disable react/no-array-index-key */ -import React from 'react'; -import PropTypes from 'prop-types'; - -import Quote from './Quote'; -import Paragraph from './Paragraph'; -import Heading from './Heading'; -import Code from './Code'; -import Link from './Link'; -import BigEmoji from './BigEmoji'; -import OrderedList from './OrderedList'; -import UnorderedList from './UnorderedList'; - -const isBigEmoji = tokens => tokens.length === 1 && tokens[0].type === 'BIG_EMOJI'; - -const Body = ({ tokens, mentions, channels, navToRoomInfo, style }) => { - if (isBigEmoji(tokens)) { - return ; - } - - return ( - <> - {tokens.map((block, index) => { - switch (block.type) { - case 'UNORDERED_LIST': - return ; - case 'ORDERED_LIST': - return ; - case 'TASK': - return ; - case 'QUOTE': - return ; - case 'PARAGRAPH': - return ( - - ); - case 'CODE': - return ; - case 'LINK': - // eslint-disable-next-line jsx-a11y/anchor-is-valid - return ; - case 'HEADING': - return ; - default: - return null; - } - })} - - ); -}; - -Body.propTypes = { - tokens: PropTypes.array, - mentions: PropTypes.array, - channels: PropTypes.array, - navToRoomInfo: PropTypes.func, - style: PropTypes.oneOfType([PropTypes.array, PropTypes.object]) -}; - -export default Body; diff --git a/app/containers/markdown/new/index.tsx b/app/containers/markdown/new/index.tsx new file mode 100644 index 000000000..b6a043961 --- /dev/null +++ b/app/containers/markdown/new/index.tsx @@ -0,0 +1,72 @@ +import React from 'react'; +import { StyleProp, ViewStyle } from 'react-native'; +import { MarkdownAST, BigEmoji as BigEmojiProps } from '@rocket.chat/message-parser'; + +import Quote from './Quote'; +import Paragraph from './Paragraph'; +import Heading from './Heading'; +import Code from './Code'; +import BigEmoji from './BigEmoji'; +import OrderedList from './OrderedList'; +import UnorderedList from './UnorderedList'; + +interface IUser { + _id: string; + username: string; + name: string; +} + +type UserMention = Pick; +interface IBodyProps { + tokens: MarkdownAST; + mentions: UserMention[]; + channels: { + name: string; + _id: number; + }[]; + navToRoomInfo: Function; + style: StyleProp[]; +} + +const isBigEmoji = (tokens: MarkdownAST): tokens is [BigEmojiProps] => tokens.length === 1 && tokens[0].type === 'BIG_EMOJI'; + +const Body: React.FC = ({ tokens, mentions, channels, navToRoomInfo, style }) => { + if (isBigEmoji(tokens)) { + return ; + } + + return ( + <> + {tokens.map(block => { + switch (block.type) { + case 'UNORDERED_LIST': + return ; + case 'ORDERED_LIST': + return ; + case 'TASKS': + return ; + case 'QUOTE': + return ; + case 'PARAGRAPH': + return ( + + ); + case 'CODE': + return ; + case 'HEADING': + return ; + default: + return null; + } + })} + + ); +}; + +export default Body; diff --git a/app/containers/message/Content.tsx b/app/containers/message/Content.tsx index ee3b8c931..c90301471 100644 --- a/app/containers/message/Content.tsx +++ b/app/containers/message/Content.tsx @@ -103,6 +103,9 @@ const Content = React.memo( if (prevProps.isIgnored !== nextProps.isIgnored) { return false; } + if (!dequal(prevProps.md, nextProps.md)) { + return false; + } if (!dequal(prevProps.mentions, nextProps.mentions)) { return false; } diff --git a/app/i18n/locales/en.json b/app/i18n/locales/en.json index 8eb259f24..089da9d61 100644 --- a/app/i18n/locales/en.json +++ b/app/i18n/locales/en.json @@ -772,5 +772,6 @@ "Converting_Team_To_Channel": "Converting Team to Channel", "Select_Team_Channels_To_Delete": "Select the Team’s Channels you would like to delete, the ones you do not select will be moved to the Workspace. \n\nNotice that public Channels will be public and visible to everyone.", "You_are_converting_the_team": "You are converting this Team to a Channel", - "creating_discussion": "creating discussion" + "creating_discussion": "creating discussion", + "Enable_Message_Parser": "Enable Message Parser" }