Skip to content

Commit 49b290f

Browse files
mientjanmientjan
committed
updating example code base
1 parent 7e690d9 commit 49b290f

File tree

4 files changed

+87
-47
lines changed

4 files changed

+87
-47
lines changed

‎example/App.js‎

Lines changed: 70 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -1,25 +1,43 @@
1-
import React, { Component } from 'react';
2-
import { StyleSheet, Text, View, ScrollView, Picker } from 'react-native';
1+
import React, { Component } from "react";
2+
import { StyleSheet, Text, View, ScrollView, Picker } from "react-native";
33
import Markdown, {
4-
AstRenderer,
5-
styles,
6-
renderRules,
7-
getUniqueID, PluginContainer,
8-
} from 'react-native-markdown-renderer';
9-
import markdownItCheckbox from 'markdown-it-checkbox';
10-
import copyAll from './src/copyAll';
11-
import customMarkdownStyle from './src/customMarkdownStyle';
4+
AstRenderer,
5+
styles,
6+
renderRules,
7+
getUniqueID,
8+
PluginContainer
9+
} from "./react-native-markdown-renderer";
10+
11+
import markdownItCheckbox from "markdown-it-checkbox";
12+
import copyAll from "./src/copyAll";
13+
import customMarkdownStyle from "./src/customMarkdownStyle";
1214
import copyAllCheckboxPlugin from "./src/copyAllCheckboxPlugin";
1315
import pluginRules from "./src/pluginRules";
1416

1517
const rules = {
16-
h1: (node, children, parents) => {
17-
return <Text key={getUniqueID()} style={{ backgroundColor: 'red' }}>{children}</Text>;
18+
header1: (node, children, parents, style) => {
19+
return (
20+
<Text key={getUniqueID()} style={{ backgroundColor: "red" }}>
21+
{children}
22+
</Text>
23+
);
1824
},
1925
// added custom block element defined by plugin
20-
block: (node, children, parents) => {
21-
return <Text key={getUniqueID()} style={{ backgroundColor: 'green' }}>{children}</Text>;
26+
block: (node, children, parents, style) => {
27+
return (
28+
<Text key={getUniqueID()} style={{ backgroundColor: "green" }}>
29+
{children}
30+
</Text>
31+
);
2232
},
33+
34+
checkbox: (node, children, parents, style) => {
35+
return (
36+
<Text key={getUniqueID()} style={{ backgroundColor: "green" }}>
37+
{children}
38+
</Text>
39+
);
40+
}
2341
};
2442

2543
/**
@@ -28,23 +46,23 @@ const rules = {
2846
const renderer = new AstRenderer(
2947
{
3048
...renderRules,
31-
...rules,
49+
...rules
3250
},
3351
styles
3452
);
3553

3654
export default class App extends Component {
3755
state = {
38-
view: 5,
56+
view: 5
3957
};
4058

4159
list = [
42-
{ description: 'default' },
43-
{ description: 'custom renderer' },
44-
{ description: 'custom style sheet' },
45-
{ description: 'custom rules' },
46-
{ description: 'custom rules & styles' },
47-
{ description: 'plugins (checkbox)' },
60+
{ description: "default" },
61+
{ description: "custom renderer" },
62+
{ description: "custom style sheet" },
63+
{ description: "custom rules" },
64+
{ description: "custom rules & styles" },
65+
{ description: "plugins (checkbox)" }
4866
];
4967

5068
getView(value) {
@@ -62,10 +80,25 @@ export default class App extends Component {
6280
return <Markdown rules={rules} children={copyAll} />;
6381
}
6482
case 4: {
65-
return <Markdown rules={rules} style={customMarkdownStyle} children={copyAll} />;
83+
return (
84+
<Markdown
85+
rules={rules}
86+
style={customMarkdownStyle}
87+
children={copyAll}
88+
/>
89+
);
6690
}
6791
case 5: {
68-
return <Markdown rules={pluginRules} plugins={[new PluginContainer(markdownItCheckbox, {divWrap: true})]} style={customMarkdownStyle} children={copyAllCheckboxPlugin} />;
92+
return (
93+
<Markdown
94+
rules={pluginRules}
95+
plugins={[
96+
new PluginContainer(markdownItCheckbox, { divWrap: true })
97+
]}
98+
style={customMarkdownStyle}
99+
children={copyAllCheckboxPlugin}
100+
/>
101+
);
69102
}
70103
default: {
71104
return <Markdown># Text</Markdown>;
@@ -78,16 +111,20 @@ export default class App extends Component {
78111
<View style={styleSheet.container}>
79112
<Picker
80113
selectedValue={this.state.view}
81-
onValueChange={(itemValue, itemIndex) => this.setState({ view: itemIndex })}
114+
onValueChange={(itemValue, itemIndex) =>
115+
this.setState({ view: itemIndex })
116+
}
82117
>
83-
{this.list.map((val, index) =>
84-
<Picker.Item key={val.description} label={val.description} value={index} />
85-
)}
118+
{this.list.map((val, index) => (
119+
<Picker.Item
120+
key={val.description}
121+
label={val.description}
122+
value={index}
123+
/>
124+
))}
86125
</Picker>
87126

88-
<ScrollView>
89-
{this.getView(this.state.view)}
90-
</ScrollView>
127+
<ScrollView>{this.getView(this.state.view)}</ScrollView>
91128
</View>
92129
);
93130
}
@@ -96,6 +133,6 @@ export default class App extends Component {
96133
const styleSheet = StyleSheet.create({
97134
container: {
98135
flex: 1,
99-
marginTop: 20,
100-
},
136+
marginTop: 20
137+
}
101138
});

‎example/app.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
{
22
"expo": {
3-
"sdkVersion": "18.0.0"
3+
"sdkVersion": "23.0.0"
44
}
55
}

‎example/package.json‎

Lines changed: 7 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -14,15 +14,17 @@
1414
"preset": "jest-expo"
1515
},
1616
"dependencies": {
17-
"expo": "^18.0.3",
17+
"expo": "^24.0.2",
1818
"markdown-it-checkbox": "^1.1.0",
19-
"react": "16.0.0-alpha.12",
20-
"react-native": "^0.45.1",
21-
"react-native-markdown-renderer": "git+https://github.com/mientjan/react-native-markdown-renderer.git#release/2.1.0"
19+
"react": "^16.2.0",
20+
"react-native": "^0.50.4"
2221
},
2322
"devDependencies": {
2423
"jest-expo": "~18.0.0",
2524
"react-native-scripts": "0.0.50",
26-
"react-test-renderer": "16.0.0-alpha.12"
25+
"react-test-renderer": "16.0.0-alpha.12",
26+
"markdown-it": "^8.4.0",
27+
"prop-types": "^15.5.10",
28+
"react-native-fit-image": "^1.5.2"
2729
}
2830
}

‎example/src/pluginRules.js‎

Lines changed: 9 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,18 @@
11
import React from "react"
22
import { StyleSheet, Text, View, ScrollView, Picker } from 'react-native';
3-
import {getUniqueID} from "react-native-markdown-renderer";
43

54
const rules = {
6-
div: (node, children, parents) => {
7-
console.log('node', node);
8-
return <View key={node.key}style={{ backgroundColor: 'green', flex: 1, flexDirection: 'row'}}>{children}</View>;
5+
checkbox: (node, children, parents, style) => {
6+
return <View style={{flexDirection: 'row', borderWidth: 1, borderColor: '#000000'}} key={node.key}>
7+
{children}
8+
</View>;
99
},
10-
label: (node, children, parents) => {
11-
return <Text key={node.key}>{children}</Text>;
10+
checkbox_input: (node, children, parents, style) => {
11+
return <View key={node.key} style={{borderRadius: 20, backgroundColor: 'blue', width: 20, height: 20, marginRight:10}}></View>;
1212
},
13-
input: (node, children, parents) => {
14-
return <Text key={node.key}>[{node.attributes.checked ? 'x' : ' - '}]</Text>;
13+
label: (node, children, parents, style) => {
14+
return <Text key={node.key}>{children}</Text>;
1515
},
16+
1617
};
1718
export default rules;

0 commit comments

Comments
 (0)