Skip to content

Commit 7138755

Browse files
mientjanmientjan
committed
converting to new rule names,
ul = bullet_list li = ordered_list a = link br = softbreak h1 <> h6 = heading1 <> heading6
1 parent bf5bf08 commit 7138755

File tree

1 file changed

+230
-6
lines changed

1 file changed

+230
-6
lines changed

‎lib/renderRules.js‎

Lines changed: 230 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
1-
import React, { Component, PropTypes } from 'react';
2-
import { Text, View } from 'react-native';
1+
import React, { Component, PropTypes } from "react";
2+
import { Text, View } from "react-native";
33

4-
import FitImage from 'react-native-fit-image';
5-
import getUniqueID from './util/getUniqueID';
6-
import openUrl from './util/openUrl';
7-
import hasParents from './util/hasParents';
4+
import FitImage from "react-native-fit-image";
5+
import getUniqueID from "./util/getUniqueID";
6+
import openUrl from "./util/openUrl";
7+
import hasParents from "./util/hasParents";
88

99
const renderRules = {
1010
// when unknown elements are introduced, so it wont break
@@ -15,6 +15,230 @@ const renderRules = {
1515
</View>
1616
);
1717
},
18+
19+
// `root` is a special case.
20+
root: children => <View key={getUniqueID()}>{children}</View>,
21+
22+
textgroup: (node, children, parent, styles) => {
23+
return <Text key={node.key}>{children}</Text>;
24+
},
25+
inline: (node, children, parent, styles) => {
26+
return <Text key={node.key}>{children}</Text>;
27+
},
28+
29+
text: (node, children, parent, styles) => {
30+
return (
31+
<Text key={node.key} style={styles.text}>
32+
{node.content}
33+
</Text>
34+
);
35+
},
36+
span: (node, children, parent, styles) => {
37+
return <Text key={node.key}>{children}</Text>;
38+
},
39+
40+
strong: (node, children, parent, styles) => {
41+
return (
42+
<Text key={node.key} style={styles.strong}>
43+
{children}
44+
</Text>
45+
);
46+
},
47+
48+
s: (node, children, parent, styles) => {
49+
return (
50+
<Text key={node.key} style={styles.strikethrough}>
51+
{children}
52+
</Text>
53+
);
54+
},
55+
// a
56+
link: (node, children, parent, styles) => {
57+
return (
58+
<Text
59+
key={node.key}
60+
style={styles.a}
61+
onPress={() => openUrl(node.attributes.href)}
62+
>
63+
{children}
64+
</Text>
65+
);
66+
},
67+
em: (node, children, parent, styles) => {
68+
return (
69+
<Text key={node.key} style={styles.em}>
70+
{children}
71+
</Text>
72+
);
73+
},
74+
75+
heading1: (node, children, parent, styles) => (
76+
<Text key={node.key} style={[styles.heading, styles.heading1]}>
77+
{children}
78+
</Text>
79+
),
80+
heading2: (node, children, parent, styles) => (
81+
<Text key={node.key} style={[styles.heading, styles.heading2]}>
82+
{children}
83+
</Text>
84+
),
85+
heading3: (node, children, parent, styles) => (
86+
<Text key={node.key} style={[styles.heading, styles.heading3]}>
87+
{children}
88+
</Text>
89+
),
90+
heading4: (node, children, parent, styles) => (
91+
<Text key={node.key} style={[styles.heading, styles.heading4]}>
92+
{children}
93+
</Text>
94+
),
95+
heading5: (node, children, parent, styles) => (
96+
<Text key={node.key} style={[styles.heading, styles.heading5]}>
97+
{children}
98+
</Text>
99+
),
100+
heading6: (node, children, parent, styles) => (
101+
<Text key={node.key} style={[styles.heading, styles.heading6]}>
102+
{children}
103+
</Text>
104+
),
105+
106+
paragraph: (node, children, parent, styles) => (
107+
<View key={node.key} style={styles.paragraph}>
108+
{children}
109+
</View>
110+
),
111+
112+
blockquote: (node, children, parent, styles) => (
113+
<View key={node.key} style={styles.blockquote}>
114+
{children}
115+
</View>
116+
),
117+
code: (node, children, parent, styles) => {
118+
switch (node.sourceType) {
119+
case "code_inline": {
120+
return (
121+
<Text key={node.key} style={styles.codeInline}>
122+
{node.content}
123+
</Text>
124+
);
125+
break;
126+
}
127+
case "code_block": {
128+
return (
129+
<Text key={node.key} style={styles.codeBlock}>
130+
{node.content}
131+
</Text>
132+
);
133+
break;
134+
}
135+
case "fence": {
136+
return (
137+
<Text key={node.key} style={styles.codeBlock}>
138+
{node.content}
139+
</Text>
140+
);
141+
break;
142+
}
143+
}
144+
145+
return (
146+
<View key={node.key} style={styles.codeInline}>
147+
{children}
148+
</View>
149+
);
150+
},
151+
pre: (node, children, parent, styles) => (
152+
<View key={node.key} style={styles.pre}>
153+
{children}
154+
</View>
155+
),
156+
// ul
157+
bullet_list: (node, children, parent, styles) => {
158+
return (
159+
<View key={node.key} style={[styles.list, styles.listUnordered]}>
160+
{children}
161+
</View>
162+
);
163+
},
164+
ordered_list: (node, children, parent, styles) => {
165+
return (
166+
<View key={node.key} style={[styles.list, styles.listOrdered]}>
167+
{children}
168+
</View>
169+
);
170+
},
171+
// li
172+
list_item: (node, children, parent, styles) => {
173+
if (hasParents(parent, "ul")) {
174+
return (
175+
<View key={node.key} style={styles.listUnorderedItem}>
176+
<Text style={styles.listUnorderedItemIcon}>{"\u00B7"}</Text>
177+
<View style={[styles.listItem]}>{children}</View>
178+
</View>
179+
);
180+
}
181+
182+
if (hasParents(parent, "ol")) {
183+
return (
184+
<View key={node.key} style={styles.listOrderedItem}>
185+
<Text style={styles.listOrderedItemIcon}>{node.index + 1}</Text>
186+
<View style={[styles.listItem]}>{children}</View>
187+
</View>
188+
);
189+
}
190+
191+
return (
192+
<View key={node.key} style={[styles.listItem]}>
193+
{children}
194+
</View>
195+
);
196+
},
197+
table: (node, children, parent, styles) => (
198+
<View key={node.key} style={[styles.table]}>
199+
{children}
200+
</View>
201+
),
202+
thead: (node, children, parent, styles) => (
203+
<View key={node.key} style={[styles.tableHeader]}>
204+
{children}
205+
</View>
206+
),
207+
tbody: (node, children, parent, styles) => (
208+
<View key={node.key}>{children}</View>
209+
),
210+
th: (node, children, parent, styles) => {
211+
return (
212+
<View key={node.key} style={[styles.tableHeaderCell]}>
213+
{children}
214+
</View>
215+
);
216+
},
217+
tr: (node, children, parent, styles) => {
218+
return (
219+
<View key={node.key} style={[styles.tableRow]}>
220+
{children}
221+
</View>
222+
);
223+
},
224+
td: (node, children, parent, styles) => {
225+
return (
226+
<View key={node.key} style={[styles.tableRowCell]}>
227+
{children}
228+
</View>
229+
);
230+
},
231+
hr: (node, children, parent, styles) => {
232+
return <View key={node.key} style={[styles.hr]} />;
233+
},
234+
235+
// br
236+
softbreak: (node, children, parent, styles) => (
237+
<Text key={node.key}>{"\n"}</Text>
238+
),
239+
image: (node, children, parent, styles) => {
240+
return <FitImage key={node.key} source={{ uri: node.attributes.src }} />;
241+
}
18242
};
19243

20244
export default renderRules;

0 commit comments

Comments
 (0)