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 { Text } from 'react-native';
import { StyleProp, Text, TextStyle } from 'react-native';
import { useTheme } from '../../theme';
import { themes } from '../../constants/colors';
import styles from './styles';
import { events, logEvent } from '../../utils/log';
import { IUserMention } from './interfaces';
interface IAtMention {
mention: string;
username?: string;
navToRoomInfo?: Function;
style?: any;
style?: StyleProp<TextStyle>[];
useRealName?: boolean;
mentions: any;
mentions?: IUserMention[];
}
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={[
styles.mention,
{
color: themes[theme!].mentionGroupColor
color: themes[theme].mentionGroupColor
},
...style
]}>
@ -35,11 +36,11 @@ const AtMention = React.memo(({ mention, mentions, username, navToRoomInfo, styl
let mentionStyle = {};
if (mention === username) {
mentionStyle = {
color: themes[theme!].mentionMeColor
color: themes[theme].mentionMeColor
};
} else {
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;

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

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

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

@ -1,5 +1,5 @@
import React from 'react';
import { Text, TextStyle, StyleProp } from 'react-native';
import { StyleProp, Text, TextStyle } from 'react-native';
import { themes } from '../../constants/colors';
import { useTheme } from '../../theme';
@ -33,7 +33,7 @@ const Hashtag = React.memo(({ hashtag, channels, navToRoomInfo, style = [] }: IH
style={[
styles.mention,
{
color: themes[theme!].mentionOtherColor
color: themes[theme].mentionOtherColor
},
...style
]}
@ -42,7 +42,7 @@ const Hashtag = React.memo(({ hashtag, channels, navToRoomInfo, style = [] }: IH
</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;

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

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

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

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

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

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

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

@ -1,5 +1,5 @@
import React from 'react';
import { StyleProp, Text, TextStyle } from 'react-native';
import { Text, TextStyle } from 'react-native';
import removeMarkdown from 'remove-markdown';
import shortnameToUnicode from '../../utils/shortnameToUnicode';
@ -13,10 +13,10 @@ interface IMarkdownPreview {
msg?: string;
numberOfLines?: number;
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) {
return null;
}

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

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

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

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

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

@ -5,7 +5,7 @@ import { themes } from '../../constants/colors';
import styles from './styles';
interface ITableRow {
children: JSX.Element;
children: React.ReactElement | null;
isLastRow: boolean;
theme: string;
}
@ -16,7 +16,7 @@ const TableRow = React.memo(({ isLastRow, children: _children, theme }: ITableRo
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], {
isLastCell: true
});

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

@ -2,6 +2,7 @@ export interface IUserMention {
_id: string;
username: string;
name?: string;
type?: string;
}
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}>
{value.map(block => (
<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}>
{value.map(block => {
switch (block.type) {

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

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

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

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

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

@ -14,7 +14,7 @@ interface IEmojiProps {
isBigEmoji?: boolean;
}
const Emoji = ({ value, isBigEmoji }: IEmojiProps): JSX.Element => {
const Emoji = ({ value, isBigEmoji }: IEmojiProps) => {
const { theme } = useTheme();
const { baseUrl, getCustomEmoji } = useContext(MarkdownContext);
const emojiUnicode = shortnameToUnicode(`:${value.value}:`);
@ -23,7 +23,7 @@ const Emoji = ({ value, isBigEmoji }: IEmojiProps): JSX.Element => {
if (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;

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

@ -11,12 +11,12 @@ interface IHeadingProps {
level: HeadingProps['level'];
}
const Heading = ({ value, level }: IHeadingProps): JSX.Element => {
const Heading = ({ value, level }: IHeadingProps) => {
const { theme } = useTheme();
const textStyle = styles[`heading${level}`];
return (
<Text style={[textStyle, { color: themes[theme!].bodyText }]}>
<Text style={[textStyle, { color: themes[theme].bodyText }]}>
{value.map(block => {
switch (block.type) {
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 { src } = value;
return <MessageImage img={src.value} theme={theme!} />;
return <MessageImage img={src.value} theme={theme} />;
};
export default Image;

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

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

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

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

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

@ -18,7 +18,7 @@ interface ILinkProps {
value: LinkProps['value'];
}
const Link = ({ value }: ILinkProps): JSX.Element => {
const Link = ({ value }: ILinkProps) => {
const { theme } = useTheme();
const { onLinkPress } = useContext(MarkdownContext);
const { src, label } = value;
@ -38,7 +38,7 @@ const Link = ({ value }: ILinkProps): JSX.Element => {
};
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 => {
switch (block.type) {
case 'PLAIN_TEXT':

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

@ -11,13 +11,13 @@ interface IOrderedListProps {
value: OrderedListProps['value'];
}
const OrderedList = ({ value }: IOrderedListProps): JSX.Element => {
const OrderedList = ({ value }: IOrderedListProps) => {
const { theme } = useTheme();
return (
<View>
{value.map((item, index) => (
<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} />
</View>
))}

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

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

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

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

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

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

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

@ -11,13 +11,13 @@ interface ITasksProps {
value: TasksProps['value'];
}
const TaskList = ({ value = [] }: ITasksProps): JSX.Element => {
const TaskList = ({ value = [] }: ITasksProps) => {
const { theme } = useTheme();
return (
<View>
{value.map(item => (
<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} />
</View>
))}

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

@ -11,13 +11,13 @@ interface IUnorderedListProps {
value: UnorderedListProps['value'];
}
const UnorderedList = ({ value }: IUnorderedListProps): JSX.Element => {
const UnorderedList = ({ value }: IUnorderedListProps) => {
const { theme } = useTheme();
return (
<View>
{value.map(item => (
<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} />
</View>
))}

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

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