Skip to content

Commit a8f4d42

Browse files
mientjanmientjan
committed
unique id's are now made when a token is converted to a ast node.
1 parent e917e17 commit a8f4d42

File tree

3 files changed

+46
-54
lines changed

3 files changed

+46
-54
lines changed

‎example/App.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -203,7 +203,7 @@ export default class App extends Component {
203203
console.warn(value);
204204
switch (value) {
205205
case 0: {
206-
return <Markdown plugins={[]} renderer={renderer.render} children={markdownText} />;
206+
return <Markdown renderer={renderer.render} children={markdownText} />;
207207
}
208208
default: {
209209
return (
@@ -223,7 +223,7 @@ export default class App extends Component {
223223
selectedValue={this.state.view}
224224
onValueChange={(itemValue, itemIndex) => this.setState({ view: itemIndex })}
225225
>
226-
{this.list.map((val, index) => <Picker.Item label={val.description} value={index} />)}
226+
{this.list.map((val, index) => <Picker.Item key={val.description} label={val.description} value={index} />)}
227227
</Picker>
228228

229229
<ScrollView>

‎lib/renderRules.js‎

Lines changed: 41 additions & 52 deletions
Original file line numberDiff line numberDiff line change
@@ -2,17 +2,16 @@ import React, { Component, PropTypes } from 'react';
22
import { Text, View } from 'react-native';
33

44
import FitImage from 'react-native-fit-image';
5-
import AstRenderer from './AstRenderer';
6-
import getUniqueID from "./util/getUniqueID";
7-
import openUrl from "./util/openUrl";
8-
import hasParents from "./util/hasParents";
5+
import getUniqueID from './util/getUniqueID';
6+
import openUrl from './util/openUrl';
7+
import hasParents from './util/hasParents';
98

109
const renderRules = {
1110
// when unknown elements are introduced, so it wont break
1211
unknown: (node, children, parent, styles) => {
1312
return (
14-
<View key={getUniqueID()}>
15-
<Text>Unknown Node: {node.type}</Text> {children}
13+
<View key={node.key}>
14+
<Text>unknown {node.type}</Text> {children}
1615
</View>
1716
);
1817
},
@@ -24,127 +23,117 @@ const renderRules = {
2423
</View>,
2524

2625
textgroup: (node, children, parent, styles) => {
27-
return <Text key={getUniqueID()}>{children}</Text>;
26+
return <Text key={node.key}>{children}</Text>;
2827
},
2928
inline: (node, children, parent, styles) => {
30-
return <Text key={getUniqueID()}>{children}</Text>;
29+
return <Text key={node.key}>{children}</Text>;
3130
},
3231

3332
text: (node, children, parent, styles) => {
3433
return (
35-
<Text key={getUniqueID()} style={styles.text}>
34+
<Text key={node.key} style={styles.text}>
3635
{node.content}
3736
</Text>
3837
);
3938
},
4039
span: (node, children, parent, styles) => {
41-
return (
42-
<Text key={getUniqueID()}>
43-
{children}
44-
</Text>
45-
)
40+
return (
41+
<Text key={node.key}>
42+
{children}
43+
</Text>
44+
);
4645
},
4746

4847
strong: (node, children, parent, styles) => {
4948
return (
50-
<Text key={getUniqueID()} style={styles.strong}>
49+
<Text key={node.key} style={styles.strong}>
5150
{children}
5251
</Text>
5352
);
5453
},
5554

5655
s: (node, children, parent, styles) => {
5756
return (
58-
<Text key={getUniqueID()} style={styles.strikethrough}>
57+
<Text key={node.key} style={styles.strikethrough}>
5958
{children}
6059
</Text>
6160
);
6261
},
6362
a: (node, children, parent, styles) => {
6463
return (
65-
<Text
66-
key={getUniqueID()}
67-
style={styles.a}
68-
onPress={() => openUrl(node.attributes.href)}
69-
>
64+
<Text key={node.key} style={styles.a} onPress={() => openUrl(node.attributes.href)}>
7065
{children}
7166
</Text>
7267
);
7368
},
7469
em: (node, children, parent, styles) => {
7570
return (
76-
<Text key={getUniqueID()} style={styles.em}>
71+
<Text key={node.key} style={styles.em}>
7772
{children}
7873
</Text>
7974
);
8075
},
8176

8277
h1: (node, children, parent, styles) =>
83-
<Text key={getUniqueID()} style={[styles.heading, styles.heading1]}>
78+
<Text key={node.key} style={[styles.heading, styles.heading1]}>
8479
{children}
8580
</Text>,
8681
h2: (node, children, parent, styles) =>
87-
<Text key={getUniqueID()} style={[styles.heading, styles.heading2]}>
82+
<Text key={node.key} style={[styles.heading, styles.heading2]}>
8883
{children}
8984
</Text>,
9085
h3: (node, children, parent, styles) =>
91-
<Text key={getUniqueID()} style={[styles.heading, styles.heading3]}>
86+
<Text key={node.key} style={[styles.heading, styles.heading3]}>
9287
{children}
9388
</Text>,
9489
h4: (node, children, parent, styles) =>
95-
<Text key={getUniqueID()} style={[styles.heading, styles.heading4]}>
90+
<Text key={node.key} style={[styles.heading, styles.heading4]}>
9691
{children}
9792
</Text>,
9893
h5: (node, children, parent, styles) =>
99-
<Text key={getUniqueID()} style={[styles.heading, styles.heading5]}>
94+
<Text key={node.key} style={[styles.heading, styles.heading5]}>
10095
{children}
10196
</Text>,
10297
h6: (node, children, parent, styles) =>
103-
<Text key={getUniqueID()} style={[styles.heading, styles.heading6]}>
98+
<Text key={node.key} style={[styles.heading, styles.heading6]}>
10499
{children}
105100
</Text>,
106101

107102
p: (node, children, parent, styles) =>
108-
<View key={getUniqueID()} style={styles.paragraph}>
103+
<View key={node.key} style={styles.paragraph}>
109104
{children}
110105
</View>,
111106

112107
blockquote: (node, children, parent, styles) =>
113-
<View key={getUniqueID()} style={styles.blockquote}>
108+
<View key={node.key} style={styles.blockquote}>
114109
{children}
115110
</View>,
116111
code: (node, children, parent, styles) =>
117-
<View key={getUniqueID()} style={styles.code}>
112+
<View key={node.key} style={styles.code}>
118113
{children}
119114
</View>,
120115
pre: (node, children, parent, styles) =>
121-
<View key={getUniqueID()} style={styles.pre}>
116+
<View key={node.key} style={styles.pre}>
122117
{children}
123118
</View>,
124119
ul: (node, children, parent, styles) => {
125120
return (
126-
<View
127-
key={getUniqueID()}
128-
style={[styles.list, styles.listUnordered]}
129-
>
121+
<View key={node.key} style={[styles.list, styles.listUnordered]}>
130122
{children}
131123
</View>
132124
);
133125
},
134126
ol: (node, children, parent, styles) => {
135127
return (
136-
<View
137-
key={getUniqueID()}
138-
style={[styles.list, styles.listOrdered]}
139-
>
128+
<View key={node.key} style={[styles.list, styles.listOrdered]}>
140129
{children}
141130
</View>
142131
);
143132
},
144133
li: (node, children, parent, styles) => {
145134
if (hasParents(parent, 'ul')) {
146135
return (
147-
<View key={getUniqueID()} style={styles.listUnorderedItem}>
136+
<View key={node.key} style={styles.listUnorderedItem}>
148137
<Text style={styles.listUnorderedItemIcon}>
149138
{'\u00B7'}
150139
</Text>
@@ -157,7 +146,7 @@ const renderRules = {
157146

158147
if (hasParents(parent, 'ol')) {
159148
return (
160-
<View key={getUniqueID()} style={styles.listOrderedItem}>
149+
<View key={node.key} style={styles.listOrderedItem}>
161150
<Text style={styles.listOrderedItemIcon}>
162151
{node.index + 1}
163152
</Text>
@@ -169,53 +158,53 @@ const renderRules = {
169158
}
170159

171160
return (
172-
<View key={getUniqueID()} style={[styles.listItem]}>
161+
<View key={node.key} style={[styles.listItem]}>
173162
{children}
174163
</View>
175164
);
176165
},
177166
table: (node, children, parent, styles) =>
178-
<View key={getUniqueID()} style={[styles.table]}>
167+
<View key={node.key} style={[styles.table]}>
179168
{children}
180169
</View>,
181170
thead: (node, children, parent, styles) =>
182-
<View key={getUniqueID()} style={[styles.tableHeader]}>
171+
<View key={node.key} style={[styles.tableHeader]}>
183172
{children}
184173
</View>,
185174
tbody: (node, children, parent, styles) =>
186-
<View key={getUniqueID()}>
175+
<View key={node.key}>
187176
{children}
188177
</View>,
189178
th: (node, children, parent, styles) => {
190179
return (
191-
<View key={getUniqueID()} style={[styles.tableHeaderCell]}>
180+
<View key={node.key} style={[styles.tableHeaderCell]}>
192181
{children}
193182
</View>
194183
);
195184
},
196185
tr: (node, children, parent, styles) => {
197186
return (
198-
<View key={getUniqueID()} style={[styles.tableRow]}>
187+
<View key={node.key} style={[styles.tableRow]}>
199188
{children}
200189
</View>
201190
);
202191
},
203192
td: (node, children, parent, styles) => {
204193
return (
205-
<View key={getUniqueID()} style={[styles.tableRowCell]}>
194+
<View key={node.key} style={[styles.tableRowCell]}>
206195
{children}
207196
</View>
208197
);
209198
},
210199
hr: (node, children, parent, styles) => {
211-
return <View key={getUniqueID()} style={[styles.hr]} />;
200+
return <View key={node.key} style={[styles.hr]} />;
212201
},
213202
br: (node, children, parent, styles) =>
214-
<Text key={getUniqueID()}>
203+
<Text key={node.key}>
215204
{'\n'}
216205
</Text>,
217206
img: (node, children, parent, styles) => {
218-
return <FitImage key={getUniqueID()} source={{ uri: node.attributes.src }} />;
207+
return <FitImage key={node.key} source={{ uri: node.attributes.src }} />;
219208
},
220209
};
221210

‎lib/util/tokensToAST.js‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,5 @@
1+
import getUniqueID from './getUniqueID';
2+
13
/**
24
*
35
* @param {{type: string, tag:string, content: string, children: *, attrs: Array}} token
@@ -27,6 +29,7 @@ function createNode(token, tokenIndex) {
2729

2830
return {
2931
type,
32+
key: getUniqueID(),
3033
content,
3134
tokenIndex,
3235
index: 0,

0 commit comments

Comments
 (0)