4582722700

Build Type

github

Committed by GitHub

Commit Message

<a href="https://github.com/gmsgowtham/react-native-marked/commit/<a class=hub.com/gmsgowtham/react-native-marked/commit/808b1107fcd7d135ca0c320d4fff961d1b2269c7">808b1107f<a href="https://github.com/gmsgowtham/react-native-marked/commit/808b1107fcd7d135ca0c320d4fff961d1b2269c7">">Merge </a><a class="double-link" href="https://github.com/gmsgowtham/react-native-marked/commit/<a class="double-link" href="https://github.com/gmsgowtham/react-native-marked/commit/f0123dee2cb78cacf800ef42bc923c99b551a596">f0123dee2</a>">f0123dee2</a><a href="https://github.com/gmsgowtham/react-native-marked/commit/808b1107fcd7d135ca0c320d4fff961d1b2269c7"> into d745af37b">d745af37b</a>

Pull Request Pull Request #253: __WIP__

Run Details

55 of 60 branches covered (91.67%)

Branch coverage included in aggregate %.

11 of 11 new or added lines in 2 files covered. (100.0%)

134 of 146 relevant lines covered (91.78%)

29.88 hits per line

Source File
Press 'n' to go to next uncovered line, 'b' for previous

90.63

/src/lib/Renderer.tsx

import React, { type ReactNode } from "react";
import {
        ScrollView,
        View,
        Text,
        TouchableHighlight,
        StyleSheet,
        type TextStyle,
        type ViewStyle,
        type ImageStyle,
} from "react-native";
import MarkedList from "@jsamr/react-native-li";
import Disc from "@jsamr/counter-style/presets/disc";
import Decimal from "@jsamr/counter-style/presets/decimal";
import { Slugger } from "marked";
import { Table, TableWrapper, Row, Cell } from "react-native-table-component";
import MDImage from "./../components/MDImage";
import { onLinkPress } from "../utils/handlers";
import type { RendererInterface } from "./types";

class Renderer implements RendererInterface {
        private slugPrefix = "react-native-marked-ele";
        private slugger: Slugger;
        constructor() {
                this.slugger = new Slugger();
        }

        paragraph(children: ReactNode[], styles?: ViewStyle): ReactNode {
                return this.getViewNode(children, styles);
        }

        blockquote(children: ReactNode[], styles?: ViewStyle): ReactNode {
                return this.getBlockquoteNode(children, styles);
        }

        heading(text: string | ReactNode[], styles?: TextStyle): ReactNode {
                return this.getTextNode(text, styles);
        }

        code(
                text: string,
                _language?: string,
                containerStyle?: ViewStyle,
                textStyle?: TextStyle,
        ): ReactNode {
                return (
                        <ScrollView
                                horizontal
                                key={this.getKey()}
                                contentContainerStyle={containerStyle}
                        >
                                <Text style={textStyle}>{text}</Text>
                        </ScrollView>
                );
        }

        hr(styles?: ViewStyle): ReactNode {
                return this.getViewNode(null, styles);
        }

        listItem(children: ReactNode[], styles?: ViewStyle): ReactNode {
                return this.getViewNode(children, styles);
        }

        list(
                ordered: boolean,
                li: ReactNode[],
                listStyle?: ViewStyle,
                textStyle?: TextStyle,
        ): ReactNode {
                return (
                        <MarkedList
                                counterRenderer={ordered ? Decimal : Disc}
                                markerTextStyle={textStyle}
                                markerBoxStyle={listStyle}
                                key={this.getKey()}
                        >
                                {li.map((node) => node)}
                        </MarkedList>
                );
        }

        escape(text: string, styles?: TextStyle): ReactNode {
                return this.getTextNode(text, styles);
        }

        link(
                children: string | ReactNode[],
                href: string,
                styles?: TextStyle,
        ): ReactNode {
                return (
                        <Text
                                accessibilityRole="link"
                                accessibilityHint="Opens in a new window"
                                key={this.getKey()}
                                onPress={onLinkPress(href)}
                                style={styles}
                        >
                                {children}
                        </Text>
                );
        }

        image(uri: string, alt?: string, style?: ImageStyle): ReactNode {
                return <MDImage key={this.getKey()} uri={uri} alt={alt} style={style} />;
        }

        strong(children: ReactNode[], styles?: TextStyle): ReactNode {
                return this.getTextNode(children, styles);
        }

        em(children: ReactNode[], styles?: TextStyle): ReactNode {
                return this.getTextNode(children, styles);
        }

        codespan(text: string, styles?: TextStyle): ReactNode {
                return this.getTextNode(text, styles);
        }

        br(): ReactNode {
                return this.getTextNode("\n", {});
        }

        del(children: ReactNode[], styles?: TextStyle): ReactNode {
                return this.getTextNode(children, styles);
        }

        text(text: string | ReactNode[], styles?: TextStyle): ReactNode {
                return this.getTextNode(text, styles);
        }

        html(text: string | ReactNode[], styles?: TextStyle): ReactNode {
                return this.getTextNode(text, styles);
        }

        linkImage(
                href: string,
                imageUrl: string,
                alt?: string,
                style?: ImageStyle,
        ): ReactNode {
                const imageNode = this.image(imageUrl, alt, style);
                return (
                        <TouchableHighlight
                                accessibilityRole="link"
                                accessibilityHint="Opens in a new window"
                                onPress={onLinkPress(href)}
                                key={this.getKey()}
                        >
                                {imageNode}
                        </TouchableHighlight>
                );
        }

        table(header: string[], rows: ReactNode[][]): React.ReactNode {
                return (
                        <View style={styles.container}>
                                <Table borderStyle={{ borderColor: "transparent" }}>
                                        <Row data={header} style={styles.head} />
                                        {rows.map((rowData, index) => (
                                                <TableWrapper key={`${index}`} style={styles.row}>
                                                        {rowData.map((cellData, cellIndex) => (
                                                                <Cell key={`${cellIndex}`} data={cellData} />
                                                        ))}
                                                </TableWrapper>
                                        ))}
                                </Table>
                        </View>
                );
        }

        getKey(): string {
                return this.slugger.slug(this.slugPrefix);
        }

        private getTextNode(
                children: string | ReactNode[],
                styles?: TextStyle,
        ): ReactNode {
                return (
                        <Text key={this.getKey()} style={styles}>
                                {children}
                        </Text>
                );
        }

        private getViewNode(
                children: ReactNode[] | null,
                styles?: ViewStyle,
        ): ReactNode {
                {
                        return (
                                <View key={this.getKey()} style={styles}>
                                        {children}
                                </View>
                        );
                }
        }

        private getBlockquoteNode(
                children: ReactNode[],
                styles?: ViewStyle,
        ): ReactNode {
                {
                        return (
                                <View key={this.getKey()} style={styles}>
                                        {children}
                                </View>
                        );
                }
        }
}

const styles = StyleSheet.create({
        container: { flex: 1 },
        head: { padding: 8, backgroundColor: "#FFF1C1" },
        row: { flexDirection: "row", backgroundColor: "#FFF1C1", padding: 8 },
});

export default Renderer;

1	import React, { type ReactNode } from "react";
2	import {
3	ScrollView,
4	View,
5	Text,
6	TouchableHighlight,
7	StyleSheet,
8	type TextStyle,
9	type ViewStyle,
10	type ImageStyle,
11	} from "react-native";
12	import MarkedList from "@jsamr/react-native-li";
13	import Disc from "@jsamr/counter-style/presets/disc";
14	import Decimal from "@jsamr/counter-style/presets/decimal";
15	import { Slugger } from "marked";
16	import { Table, TableWrapper, Row, Cell } from "react-native-table-component";
17	import MDImage from "./../components/MDImage";
18	import { onLinkPress } from "../utils/handlers";
19	import type { RendererInterface } from "./types";
20
21	class Renderer implements RendererInterface {
22	private slugPrefix = "react-native-marked-ele";	46✔
23	private slugger: Slugger;
24	constructor() {
25	this.slugger = new Slugger();	46✔
26	}
27
28	paragraph(children: ReactNode[], styles?: ViewStyle): ReactNode {
29	return this.getViewNode(children, styles);	33✔
30	}
31
32	blockquote(children: ReactNode[], styles?: ViewStyle): ReactNode {
33	return this.getBlockquoteNode(children, styles);	9✔
34	}
35
36	heading(text: string \| ReactNode[], styles?: TextStyle): ReactNode {
37	return this.getTextNode(text, styles);	10✔
38	}
39
40	code(
41	text: string,
42	_language?: string,
43	containerStyle?: ViewStyle,
44	textStyle?: TextStyle,
45	): ReactNode {
46	return (	6✔
47	<ScrollView
48	horizontal
49	key={this.getKey()}
50	contentContainerStyle={containerStyle}
51	>
52	<Text style={textStyle}>{text}</Text>
53	</ScrollView>
54	);
55	}
56
57	hr(styles?: ViewStyle): ReactNode {
58	return this.getViewNode(null, styles);	6✔
59	}
60
61	listItem(children: ReactNode[], styles?: ViewStyle): ReactNode {
62	return this.getViewNode(children, styles);	32✔
63	}
64
65	list(
66	ordered: boolean,
67	li: ReactNode[],
68	listStyle?: ViewStyle,
69	textStyle?: TextStyle,
70	): ReactNode {
71	return (	15✔
72	<MarkedList
73	counterRenderer={ordered ? Decimal : Disc}	15✔
74	markerTextStyle={textStyle}
75	markerBoxStyle={listStyle}
76	key={this.getKey()}
77	>
78	{li.map((node) => node)}	44✔
79	</MarkedList>
80	);
81	}
82
83	escape(text: string, styles?: TextStyle): ReactNode {
84	return this.getTextNode(text, styles);	1✔
85	}
86
87	link(
88	children: string \| ReactNode[],
89	href: string,
90	styles?: TextStyle,
91	): ReactNode {
92	return (	13✔
93	<Text
94	accessibilityRole="link"
95	accessibilityHint="Opens in a new window"
96	key={this.getKey()}
97	onPress={onLinkPress(href)}
98	style={styles}
99	>
100	{children}
101	</Text>
102	);
103	}
104
105	image(uri: string, alt?: string, style?: ImageStyle): ReactNode {
106	return <MDImage key={this.getKey()} uri={uri} alt={alt} style={style} />;	8✔
107	}
108
109	strong(children: ReactNode[], styles?: TextStyle): ReactNode {
110	return this.getTextNode(children, styles);	5✔
111	}
112
113	em(children: ReactNode[], styles?: TextStyle): ReactNode {
114	return this.getTextNode(children, styles);	4✔
115	}
116
117	codespan(text: string, styles?: TextStyle): ReactNode {
118	return this.getTextNode(text, styles);	2✔
119	}
120
121	br(): ReactNode {
122	return this.getTextNode("\n", {});	1✔
123	}
124
125	del(children: ReactNode[], styles?: TextStyle): ReactNode {
126	return this.getTextNode(children, styles);	1✔
127	}
128
129	text(text: string \| ReactNode[], styles?: TextStyle): ReactNode {
130	return this.getTextNode(text, styles);	188✔
131	}
132
133	html(text: string \| ReactNode[], styles?: TextStyle): ReactNode {
134	return this.getTextNode(text, styles);	2✔
135	}
136
137	linkImage(
138	href: string,
139	imageUrl: string,
140	alt?: string,
141	style?: ImageStyle,
142	): ReactNode {
143	const imageNode = this.image(imageUrl, alt, style);	3✔
144	return (	3✔
145	<TouchableHighlight
146	accessibilityRole="link"
147	accessibilityHint="Opens in a new window"
148	onPress={onLinkPress(href)}
149	key={this.getKey()}
150	>
151	{imageNode}
152	</TouchableHighlight>
153	);
154	}
155
156	table(header: string[], rows: ReactNode[][]): React.ReactNode {
157	return (	×
158	<View style={styles.container}>
159	<Table borderStyle={{ borderColor: "transparent" }}>
160	<Row data={header} style={styles.head} />
161	{rows.map((rowData, index) => (
162	<TableWrapper key={`${index}`} style={styles.row}>	×
163	{rowData.map((cellData, cellIndex) => (
164	<Cell key={`${cellIndex}`} data={cellData} />	×
165	))}
166	</TableWrapper>
167	))}
168	</Table>
169	</View>
170	);
171	}
172
173	getKey(): string {
174	return this.slugger.slug(this.slugPrefix);	339✔
175	}
176
177	private getTextNode(
178	children: string \| ReactNode[],
179	styles?: TextStyle,
180	): ReactNode {
181	return (	214✔
182	<Text key={this.getKey()} style={styles}>
183	{children}
184	</Text>
185	);
186	}
187
188	private getViewNode(
189	children: ReactNode[] \| null,
190	styles?: ViewStyle,
191	): ReactNode {
192	{
193	return (	71✔
194	<View key={this.getKey()} style={styles}>
195	{children}
196	</View>
197	);
198	}
199	}
200
201	private getBlockquoteNode(
202	children: ReactNode[],
203	styles?: ViewStyle,
204	): ReactNode {
205	{
206	return (	9✔
207	<View key={this.getKey()} style={styles}>
208	{children}
209	</View>
210	);
211	}
212	}
213	}
214
215	const styles = StyleSheet.create({	2✔
216	container: { flex: 1 },
217	head: { padding: 8, backgroundColor: "#FFF1C1" },
218	row: { flexDirection: "row", backgroundColor: "#FFF1C1", padding: 8 },
219	});
220
221	export default Renderer;

gmsgowtham / react-native-marked / 4582722700

Source File Press 'n' to go to next uncovered line, 'b' for previous

Source File
Press 'n' to go to next uncovered line, 'b' for previous