verdnatura-mirror
/
verdnatura-chat
forked from verdnatura-mirror/Rocket.Chat.ReactNative
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Chore: Evaluate Markdown - TypeScript (#3948)

This commit is contained in:
Reinaldo Neto 2022-03-25 14:20:09 -03:00 committed by GitHub
parent d5ac663199
commit 6418803517
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
30 changed files with 60 additions and 59 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
app/containers/markdown/AtMention.tsx
View File

@ -1,18 +1,19 @@
import React from 'react'; import React from 'react';
import { Text } from 'react-native'; import { StyleProp, Text, TextStyle } from 'react-native';
import { useTheme } from '../../theme'; import { useTheme } from '../../theme';
import { themes } from '../../constants/colors'; import { themes } from '../../constants/colors';
import styles from './styles'; import styles from './styles';
import { events, logEvent } from '../../utils/log'; import { events, logEvent } from '../../utils/log';
import { IUserMention } from './interfaces';
interface IAtMention { interface IAtMention {
mention: string; mention: string;
username?: string; username?: string;
navToRoomInfo?: Function; navToRoomInfo?: Function;
style?: any; style?: StyleProp<TextStyle>[];
useRealName?: boolean; useRealName?: boolean;
mentions: any; mentions?: IUserMention[];
} }
const AtMention = React.memo(({ mention, mentions, username, navToRoomInfo, style = [], useRealName }: IAtMention) => { const AtMention = React.memo(({ mention, mentions, username, navToRoomInfo, style = [], useRealName }: IAtMention) => {
@ -23,7 +24,7 @@ const AtMention = React.memo(({ mention, mentions, username, navToRoomInfo, styl
style={[ style={[
styles.mention, styles.mention,
{ {
color: themes[theme!].mentionGroupColor color: themes[theme].mentionGroupColor
}, },
...style ...style
]}> ]}>
@ -35,11 +36,11 @@ const AtMention = React.memo(({ mention, mentions, username, navToRoomInfo, styl
let mentionStyle = {}; let mentionStyle = {};
if (mention === username) { if (mention === username) {
mentionStyle = { mentionStyle = {
color: themes[theme!].mentionMeColor color: themes[theme].mentionMeColor
}; };
} else { } else {
mentionStyle = { mentionStyle = {
color: themes[theme!].mentionOtherColor color: themes[theme].mentionOtherColor
}; };
} }
@ -64,7 +65,7 @@ const AtMention = React.memo(({ mention, mentions, username, navToRoomInfo, styl
); );
} }
return <Text style={[styles.text, { color: themes[theme!].bodyText }, ...style]}>{`@${mention}`}</Text>; return <Text style={[styles.text, { color: themes[theme].bodyText }, ...style]}>{`@${mention}`}</Text>;
}); });
export default AtMention; export default AtMention;

2
app/containers/markdown/BlockQuote.tsx
View File

@ -5,7 +5,7 @@ import { themes } from '../../constants/colors';
import styles from './styles'; import styles from './styles';
interface IBlockQuote { interface IBlockQuote {
children: JSX.Element; children: React.ReactElement | null;
theme: string; theme: string;
} }

6
app/containers/markdown/Hashtag.tsx
View File

@ -1,5 +1,5 @@
import React from 'react'; import React from 'react';
import { Text, TextStyle, StyleProp } from 'react-native'; import { StyleProp, Text, TextStyle } from 'react-native';
import { themes } from '../../constants/colors'; import { themes } from '../../constants/colors';
import { useTheme } from '../../theme'; import { useTheme } from '../../theme';
@ -33,7 +33,7 @@ const Hashtag = React.memo(({ hashtag, channels, navToRoomInfo, style = [] }: IH
style={[ style={[
styles.mention, styles.mention,
{ {
color: themes[theme!].mentionOtherColor color: themes[theme].mentionOtherColor
}, },
...style ...style
]} ]}
@ -42,7 +42,7 @@ const Hashtag = React.memo(({ hashtag, channels, navToRoomInfo, style = [] }: IH
</Text> </Text>
); );
} }
return <Text style={[styles.text, { color: themes[theme!].bodyText }, ...style]}>{`#${hashtag}`}</Text>; return <Text style={[styles.text, { color: themes[theme].bodyText }, ...style]}>{`#${hashtag}`}</Text>;
}); });
export default Hashtag; export default Hashtag;

2
app/containers/markdown/Link.tsx
View File

@ -10,7 +10,7 @@ import openLink from '../../utils/openLink';
import { TOnLinkPress } from './interfaces'; import { TOnLinkPress } from './interfaces';
interface ILink { interface ILink {
children: JSX.Element; children: React.ReactElement | null;
link: string; link: string;
theme: string; theme: string;
onLinkPress?: TOnLinkPress; onLinkPress?: TOnLinkPress;

7
app/containers/markdown/List.tsx
View File

@ -1,7 +1,7 @@
import React from 'react'; import React from 'react';
interface IList { interface IList {
children: JSX.Element; children: React.ReactElement[] | null;
ordered: boolean; ordered: boolean;
start: number; start: number;
tight: boolean; tight: boolean;
@ -11,9 +11,8 @@ interface IList {
const List = React.memo(({ children, ordered, tight, start = 1, numberOfLines = 0 }: IList) => { const List = React.memo(({ children, ordered, tight, start = 1, numberOfLines = 0 }: IList) => {
let bulletWidth = 15; let bulletWidth = 15;
if (ordered) { if (ordered && children) {
// @ts-ignore const lastNumber = start + children?.length - 1;
const lastNumber = start + children.length - 1;
bulletWidth = 9 * lastNumber.toString().length + 7; bulletWidth = 9 * lastNumber.toString().length + 7;
} }

2
app/containers/markdown/ListItem.tsx
View File

@ -18,7 +18,7 @@ const style = StyleSheet.create({
}); });
interface IListItem { interface IListItem {
children: JSX.Element; children: React.ReactElement | null;
bulletWidth: number; bulletWidth: number;
level: number; level: number;
ordered: boolean; ordered: boolean;

6
app/containers/markdown/Preview.tsx
View File

@ -1,5 +1,5 @@
import React from 'react'; import React from 'react';
import { StyleProp, Text, TextStyle } from 'react-native'; import { Text, TextStyle } from 'react-native';
import removeMarkdown from 'remove-markdown'; import removeMarkdown from 'remove-markdown';
import shortnameToUnicode from '../../utils/shortnameToUnicode'; import shortnameToUnicode from '../../utils/shortnameToUnicode';
@ -13,10 +13,10 @@ interface IMarkdownPreview {
msg?: string; msg?: string;
numberOfLines?: number; numberOfLines?: number;
testID?: string; testID?: string;
style?: StyleProp<TextStyle>[]; style?: TextStyle[];
} }
const MarkdownPreview = ({ msg, numberOfLines = 1, testID, style = [] }: IMarkdownPreview): React.ReactElement | null => { const MarkdownPreview = ({ msg, numberOfLines = 1, testID, style = [] }: IMarkdownPreview) => {
if (!msg) { if (!msg) {
return null; return null;
} }

2
app/containers/markdown/Table.tsx
View File

@ -8,7 +8,7 @@ import I18n from '../../i18n';
import { themes } from '../../constants/colors'; import { themes } from '../../constants/colors';
interface ITable { interface ITable {
children: JSX.Element; children: React.ReactElement | null;
numColumns: number; numColumns: number;
theme: string; theme: string;
} }

2
app/containers/markdown/TableCell.tsx
View File

@ -6,7 +6,7 @@ import styles from './styles';
interface ITableCell { interface ITableCell {
align: '' | 'left' | 'center' | 'right'; align: '' | 'left' | 'center' | 'right';
children: JSX.Element; children: React.ReactElement | null;
isLastCell: boolean; isLastCell: boolean;
theme: string; theme: string;
} }

4
app/containers/markdown/TableRow.tsx
View File

@ -5,7 +5,7 @@ import { themes } from '../../constants/colors';
import styles from './styles'; import styles from './styles';
interface ITableRow { interface ITableRow {
children: JSX.Element; children: React.ReactElement | null;
isLastRow: boolean; isLastRow: boolean;
theme: string; theme: string;
} }
@ -16,7 +16,7 @@ const TableRow = React.memo(({ isLastRow, children: _children, theme }: ITableRo
rowStyle.push(styles.rowBottomBorder); rowStyle.push(styles.rowBottomBorder);
} }
const children: any = React.Children.toArray(_children); const children = React.Children.toArray(_children) as React.ReactElement[];
children[children.length - 1] = React.cloneElement(children[children.length - 1], { children[children.length - 1] = React.cloneElement(children[children.length - 1], {
isLastCell: true isLastCell: true
}); });

1
app/containers/markdown/interfaces.ts
View File

@ -2,6 +2,7 @@ export interface IUserMention {
_id: string; _id: string;
username: string; username: string;
name?: string; name?: string;
type?: string;
} }
export interface IUserChannel { export interface IUserChannel {

2
app/containers/markdown/new/BigEmoji.tsx
View File

@ -14,7 +14,7 @@ const styles = StyleSheet.create({
} }
}); });
const BigEmoji = ({ value }: IBigEmojiProps): JSX.Element => ( const BigEmoji = ({ value }: IBigEmojiProps) => (
<View style={styles.container}> <View style={styles.container}>
{value.map(block => ( {value.map(block => (
<Emoji value={block.value} isBigEmoji /> <Emoji value={block.value} isBigEmoji />

2
app/containers/markdown/new/Bold.tsx
View File

@ -18,7 +18,7 @@ const styles = StyleSheet.create({
} }
}); });
const Bold = ({ value }: IBoldProps): JSX.Element => ( const Bold = ({ value }: IBoldProps) => (
<Text style={styles.text}> <Text style={styles.text}>
{value.map(block => { {value.map(block => {
switch (block.type) { switch (block.type) {

8
app/containers/markdown/new/Code.tsx
View File

@ -11,7 +11,7 @@ interface ICodeProps {
value: CodeProps['value']; value: CodeProps['value'];
} }
const Code = ({ value }: ICodeProps): JSX.Element => { const Code = ({ value }: ICodeProps) => {
const { theme } = useTheme(); const { theme } = useTheme();
return ( return (
@ -19,9 +19,9 @@ const Code = ({ value }: ICodeProps): JSX.Element => {
style={[ style={[
styles.codeBlock, styles.codeBlock,
{ {
color: themes[theme!].bodyText, color: themes[theme].bodyText,
backgroundColor: themes[theme!].bannerBackground, backgroundColor: themes[theme].bannerBackground,
borderColor: themes[theme!].borderColor borderColor: themes[theme].borderColor
} }
]}> ]}>
{value.map(block => { {value.map(block => {

2
app/containers/markdown/new/CodeLine.tsx
View File

@ -6,7 +6,7 @@ interface ICodeLineProps {
value: CodeLineProps['value']; value: CodeLineProps['value'];
} }
const CodeLine = ({ value }: ICodeLineProps): JSX.Element | null => { const CodeLine = ({ value }: ICodeLineProps) => {
if (value.type !== 'PLAIN_TEXT') { if (value.type !== 'PLAIN_TEXT') {
return null; return null;
} }

4
app/containers/markdown/new/Emoji.tsx
View File

@ -14,7 +14,7 @@ interface IEmojiProps {
isBigEmoji?: boolean; isBigEmoji?: boolean;
} }
const Emoji = ({ value, isBigEmoji }: IEmojiProps): JSX.Element => { const Emoji = ({ value, isBigEmoji }: IEmojiProps) => {
const { theme } = useTheme(); const { theme } = useTheme();
const { baseUrl, getCustomEmoji } = useContext(MarkdownContext); const { baseUrl, getCustomEmoji } = useContext(MarkdownContext);
const emojiUnicode = shortnameToUnicode(`:${value.value}:`); const emojiUnicode = shortnameToUnicode(`:${value.value}:`);
@ -23,7 +23,7 @@ const Emoji = ({ value, isBigEmoji }: IEmojiProps): JSX.Element => {
if (emoji) { if (emoji) {
return <CustomEmoji baseUrl={baseUrl} style={[isBigEmoji ? styles.customEmojiBig : styles.customEmoji]} emoji={emoji} />; return <CustomEmoji baseUrl={baseUrl} style={[isBigEmoji ? styles.customEmojiBig : styles.customEmoji]} emoji={emoji} />;
} }
return <Text style={[{ color: themes[theme!].bodyText }, isBigEmoji ? styles.textBig : styles.text]}>{emojiUnicode}</Text>; return <Text style={[{ color: themes[theme].bodyText }, isBigEmoji ? styles.textBig : styles.text]}>{emojiUnicode}</Text>;
}; };
export default Emoji; export default Emoji;

4
app/containers/markdown/new/Heading.tsx
View File

@ -11,12 +11,12 @@ interface IHeadingProps {
level: HeadingProps['level']; level: HeadingProps['level'];
} }
const Heading = ({ value, level }: IHeadingProps): JSX.Element => { const Heading = ({ value, level }: IHeadingProps) => {
const { theme } = useTheme(); const { theme } = useTheme();
const textStyle = styles[`heading${level}`]; const textStyle = styles[`heading${level}`];
return ( return (
<Text style={[textStyle, { color: themes[theme!].bodyText }]}> <Text style={[textStyle, { color: themes[theme].bodyText }]}>
{value.map(block => { {value.map(block => {
switch (block.type) { switch (block.type) {
case 'PLAIN_TEXT': case 'PLAIN_TEXT':

4
app/containers/markdown/new/Image.tsx
View File

@ -31,11 +31,11 @@ const MessageImage = ({ img, theme }: TMessageImage) => (
/> />
); );
const Image = ({ value }: IImageProps): JSX.Element => { const Image = ({ value }: IImageProps) => {
const { theme } = useTheme(); const { theme } = useTheme();
const { src } = value; const { src } = value;
return <MessageImage img={src.value} theme={theme!} />; return <MessageImage img={src.value} theme={theme} />;
}; };
export default Image; export default Image;

2
app/containers/markdown/new/Inline.tsx
View File

@ -19,7 +19,7 @@ interface IParagraphProps {
value: ParagraphProps['value']; value: ParagraphProps['value'];
} }
const Inline = ({ value }: IParagraphProps): JSX.Element => { const Inline = ({ value }: IParagraphProps) => {
const { useRealName, username, navToRoomInfo, mentions, channels } = useContext(MarkdownContext); const { useRealName, username, navToRoomInfo, mentions, channels } = useContext(MarkdownContext);
return ( return (
<Text style={styles.inline}> <Text style={styles.inline}>

8
app/containers/markdown/new/InlineCode.tsx
View File

@ -10,7 +10,7 @@ interface IInlineCodeProps {
value: InlineCodeProps['value']; value: InlineCodeProps['value'];
} }
const InlineCode = ({ value }: IInlineCodeProps): JSX.Element => { const InlineCode = ({ value }: IInlineCodeProps) => {
const { theme } = useTheme(); const { theme } = useTheme();
return ( return (
@ -18,9 +18,9 @@ const InlineCode = ({ value }: IInlineCodeProps): JSX.Element => {
style={[ style={[
styles.codeInline, styles.codeInline,
{ {
color: themes[theme!].bodyText, color: themes[theme].bodyText,
backgroundColor: themes[theme!].bannerBackground, backgroundColor: themes[theme].bannerBackground,
borderColor: themes[theme!].borderColor borderColor: themes[theme].borderColor
} }
]}> ]}>
{(block => { {(block => {

2
app/containers/markdown/new/Italic.tsx
View File

@ -17,7 +17,7 @@ const styles = StyleSheet.create({
} }
}); });
const Italic = ({ value }: IItalicProps): JSX.Element => ( const Italic = ({ value }: IItalicProps) => (
<Text style={styles.text}> <Text style={styles.text}>
{value.map(block => { {value.map(block => {
switch (block.type) { switch (block.type) {

4
app/containers/markdown/new/Link.tsx
View File

@ -18,7 +18,7 @@ interface ILinkProps {
value: LinkProps['value']; value: LinkProps['value'];
} }
const Link = ({ value }: ILinkProps): JSX.Element => { const Link = ({ value }: ILinkProps) => {
const { theme } = useTheme(); const { theme } = useTheme();
const { onLinkPress } = useContext(MarkdownContext); const { onLinkPress } = useContext(MarkdownContext);
const { src, label } = value; const { src, label } = value;
@ -38,7 +38,7 @@ const Link = ({ value }: ILinkProps): JSX.Element => {
}; };
return ( return (
<Text onPress={handlePress} onLongPress={onLongPress} style={[styles.link, { color: themes[theme!].actionTintColor }]}> <Text onPress={handlePress} onLongPress={onLongPress} style={[styles.link, { color: themes[theme].actionTintColor }]}>
{(block => { {(block => {
switch (block.type) { switch (block.type) {
case 'PLAIN_TEXT': case 'PLAIN_TEXT':

4
app/containers/markdown/new/OrderedList.tsx
View File

@ -11,13 +11,13 @@ interface IOrderedListProps {
value: OrderedListProps['value']; value: OrderedListProps['value'];
} }
const OrderedList = ({ value }: IOrderedListProps): JSX.Element => { const OrderedList = ({ value }: IOrderedListProps) => {
const { theme } = useTheme(); const { theme } = useTheme();
return ( return (
<View> <View>
{value.map((item, index) => ( {value.map((item, index) => (
<View style={styles.row}> <View style={styles.row}>
<Text style={[styles.text, { color: themes[theme!].bodyText }]}>{index + 1}. </Text> <Text style={[styles.text, { color: themes[theme].bodyText }]}>{index + 1}. </Text>
<Inline value={item.value} /> <Inline value={item.value} />
</View> </View>
))} ))}

4
app/containers/markdown/new/Paragraph.tsx
View File

@ -11,10 +11,10 @@ interface IParagraphProps {
value: ParagraphProps['value']; value: ParagraphProps['value'];
} }
const Paragraph = ({ value }: IParagraphProps): JSX.Element => { const Paragraph = ({ value }: IParagraphProps) => {
const { theme } = useTheme(); const { theme } = useTheme();
return ( return (
<Text style={[styles.text, { color: themes[theme!].bodyText }]}> <Text style={[styles.text, { color: themes[theme].bodyText }]}>
<Inline value={value} /> <Inline value={value} />
</Text> </Text>
); );

4
app/containers/markdown/new/Plain.tsx
View File

@ -10,10 +10,10 @@ interface IPlainProps {
value: PlainProps['value']; value: PlainProps['value'];
} }
const Plain = ({ value }: IPlainProps): JSX.Element => { const Plain = ({ value }: IPlainProps) => {
const { theme } = useTheme(); const { theme } = useTheme();
return ( return (
<Text accessibilityLabel={value} style={[styles.plainText, { color: themes[theme!].bodyText }]}> <Text accessibilityLabel={value} style={[styles.plainText, { color: themes[theme].bodyText }]}>
{value} {value}
</Text> </Text>
); );

4
app/containers/markdown/new/Quote.tsx
View File

@ -11,11 +11,11 @@ interface IQuoteProps {
value: QuoteProps['value']; value: QuoteProps['value'];
} }
const Quote = ({ value }: IQuoteProps): JSX.Element => { const Quote = ({ value }: IQuoteProps) => {
const { theme } = useTheme(); const { theme } = useTheme();
return ( return (
<View style={styles.container}> <View style={styles.container}>
<View style={[styles.quote, { backgroundColor: themes[theme!].borderColor }]} /> <View style={[styles.quote, { backgroundColor: themes[theme].borderColor }]} />
<View style={styles.childContainer}> <View style={styles.childContainer}>
{value.map(item => ( {value.map(item => (
<Paragraph value={item.value} /> <Paragraph value={item.value} />

2
app/containers/markdown/new/Strike.tsx
View File

@ -17,7 +17,7 @@ const styles = StyleSheet.create({
} }
}); });
const Strike = ({ value }: IStrikeProps): JSX.Element => ( const Strike = ({ value }: IStrikeProps) => (
<Text style={styles.text}> <Text style={styles.text}>
{value.map(block => { {value.map(block => {
switch (block.type) { switch (block.type) {

4
app/containers/markdown/new/TaskList.tsx
View File

@ -11,13 +11,13 @@ interface ITasksProps {
value: TasksProps['value']; value: TasksProps['value'];
} }
const TaskList = ({ value = [] }: ITasksProps): JSX.Element => { const TaskList = ({ value = [] }: ITasksProps) => {
const { theme } = useTheme(); const { theme } = useTheme();
return ( return (
<View> <View>
{value.map(item => ( {value.map(item => (
<View style={styles.row}> <View style={styles.row}>
<Text style={[styles.text, { color: themes[theme!].bodyText }]}>{item.status ? '- [x] ' : '- [ ] '}</Text> <Text style={[styles.text, { color: themes[theme].bodyText }]}>{item.status ? '- [x] ' : '- [ ] '}</Text>
<Inline value={item.value} /> <Inline value={item.value} />
</View> </View>
))} ))}

4
app/containers/markdown/new/UnorderedList.tsx
View File

@ -11,13 +11,13 @@ interface IUnorderedListProps {
value: UnorderedListProps['value']; value: UnorderedListProps['value'];
} }
const UnorderedList = ({ value }: IUnorderedListProps): JSX.Element => { const UnorderedList = ({ value }: IUnorderedListProps) => {
const { theme } = useTheme(); const { theme } = useTheme();
return ( return (
<View> <View>
{value.map(item => ( {value.map(item => (
<View style={styles.row}> <View style={styles.row}>
<Text style={[styles.text, { color: themes[theme!].bodyText }]}>- </Text> <Text style={[styles.text, { color: themes[theme].bodyText }]}>- </Text>
<Inline value={item.value} /> <Inline value={item.value} />
</View> </View>
))} ))}

2
app/containers/markdown/new/index.tsx
View File

@ -35,7 +35,7 @@ const Body = ({
getCustomEmoji, getCustomEmoji,
baseUrl, baseUrl,
onLinkPress onLinkPress
}: IBodyProps): React.ReactElement | null => { }: IBodyProps) => {
if (isEmpty(tokens)) { if (isEmpty(tokens)) {
return null; return null;
} }