Skip to content

Commit 230e1a7

Browse files
mientjanmientjan
committed
adding 6 examples to example app
1 parent 01f590d commit 230e1a7

File tree

4 files changed

+224
-26
lines changed

4 files changed

+224
-26
lines changed

‎example/App.js‎

Lines changed: 41 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -1,27 +1,34 @@
11
import React, { Component } from 'react';
22
import { StyleSheet, Text, View, ScrollView, Picker } from 'react-native';
33
import Markdown, {
4-
AstRenderer,
5-
styles,
6-
renderRules,
7-
getUniqueID,
4+
AstRenderer,
5+
styles,
6+
renderRules,
7+
getUniqueID, PluginContainer,
88
} from 'react-native-markdown-renderer';
9-
import copyAll from "./src/copyAll";
10-
import customMarkdownStyle from "./src/customMarkdownStyle";
9+
import markdownItCheckbox from 'markdown-it-checkbox';
10+
import copyAll from './src/copyAll';
11+
import customMarkdownStyle from './src/customMarkdownStyle';
12+
import copyAllCheckboxPlugin from "./src/copyAllCheckboxPlugin";
13+
import pluginRules from "./src/pluginRules";
14+
15+
const rules = {
16+
h1: (node, children, parents) => {
17+
return <Text key={getUniqueID()} style={{ backgroundColor: 'red' }}>{children}</Text>;
18+
},
19+
// added custom block element defined by plugin
20+
block: (node, children, parents) => {
21+
return <Text key={getUniqueID()} style={{ backgroundColor: 'green' }}>{children}</Text>;
22+
},
23+
};
1124

1225
/**
1326
* i'm overriding the default h1 render function.
1427
*/
1528
const renderer = new AstRenderer(
1629
{
1730
...renderRules,
18-
h1: (node, children, parents) => {
19-
return <Text key={getUniqueID()} style={{ backgroundColor: 'red' }}>{children}</Text>;
20-
},
21-
// added custom block element defined by plugin
22-
block: (node, children, parents) => {
23-
return <Text key={getUniqueID()} style={{ backgroundColor: 'green' }}>{children}</Text>;
24-
},
31+
...rules,
2532
},
2633
styles
2734
);
@@ -32,15 +39,17 @@ export default class App extends Component {
3239
};
3340

3441
list = [
35-
{ description: 'default' },
36-
{ description: 'custom renderer' },
37-
{ description: 'custom style sheet' }
38-
];
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)' },
48+
];
3949

4050
getView(value) {
41-
4251
switch (value) {
43-
case 0: {
52+
case 6: {
4453
return <Markdown children={copyAll} />;
4554
}
4655
case 1: {
@@ -49,25 +58,31 @@ export default class App extends Component {
4958
case 2: {
5059
return <Markdown style={customMarkdownStyle} children={copyAll} />;
5160
}
61+
case 3: {
62+
return <Markdown rules={rules} children={copyAll} />;
63+
}
64+
case 4: {
65+
return <Markdown rules={rules} style={customMarkdownStyle} children={copyAll} />;
66+
}
67+
case 0: {
68+
return <Markdown rules={pluginRules} plugins={[new PluginContainer(markdownItCheckbox, {divWrap: true})]} style={customMarkdownStyle} children={copyAllCheckboxPlugin} />;
69+
}
5270
default: {
53-
return (
54-
<Markdown># Text</Markdown>
55-
);
71+
return <Markdown># Text</Markdown>;
5672
}
5773
}
5874
}
5975

6076
render() {
61-
62-
63-
6477
return (
6578
<View style={styleSheet.container}>
6679
<Picker
6780
selectedValue={this.state.view}
6881
onValueChange={(itemValue, itemIndex) => this.setState({ view: itemIndex })}
6982
>
70-
{this.list.map((val, index) => <Picker.Item key={val.description} label={val.description} value={index} />)}
83+
{this.list.map((val, index) =>
84+
<Picker.Item key={val.description} label={val.description} value={index} />
85+
)}
7186
</Picker>
7287

7388
<ScrollView>

‎example/package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,7 @@
1515
},
1616
"dependencies": {
1717
"expo": "^18.0.3",
18+
"markdown-it-checkbox": "^1.1.0",
1819
"react": "16.0.0-alpha.12",
1920
"react-native": "^0.45.1",
2021
"react-native-markdown-renderer": "git+https://github.com/mientjan/react-native-markdown-renderer.git"

‎example/src/copyAllCheckboxPlugin.js‎

Lines changed: 165 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,165 @@
1+
const markdownText = `
2+
# Syntax Support
3+
4+
__Advertisement :)__
5+
6+
* [ ] unchecked
7+
* [x] checked
8+
9+
This is a text. Click [here](https://google.com) to open a link. Let's add some more text to see how this behaves.
10+
11+
- __[pica](https://nodeca.github.io/pica/demo/)__ - high quality and fast image
12+
resize in browser.
13+
- __[babelfish](https://github.com/nodeca/babelfish/)__ - developer friendly
14+
i18n with plurals support and easy syntax.
15+
16+
You will like those projects!
17+
18+
---
19+
20+
# h1 Heading 8-)
21+
## h2 Heading
22+
### h3 Heading
23+
#### h4 Heading
24+
##### h5 Heading
25+
###### h6 Heading
26+
27+
28+
### Horizontal Rules
29+
30+
___
31+
32+
---
33+
34+
35+
### Typographic replacements
36+
37+
Enable typographer option to see result.
38+
39+
(c) (C) (r) (R) (tm) (TM) (p) (P) +-
40+
41+
test.. test... test..... test?..... test!....
42+
43+
!!!!!! ???? ,, -- ---
44+
45+
"Smartypants, double quotes" and 'single quotes'
46+
47+
48+
## Emphasis
49+
50+
**This is bold text**
51+
52+
__This is bold text__
53+
54+
*This is italic text*
55+
56+
_This is italic text_
57+
58+
~~Strikethrough~~
59+
60+
61+
## Blockquotes
62+
63+
64+
> Blockquotes can also be nested...
65+
>> ...by using additional greater-than signs right next to each other...
66+
> > > ...or with spaces between arrows.
67+
68+
69+
## Lists
70+
71+
Unordered
72+
73+
+ Create a list by starting a line with \`+\`, \`-\`, or \`*\`
74+
+ Sub-lists are made by indenting 2 spaces:
75+
- Marker character change forces new list start:
76+
* Ac tristique libero volutpat at
77+
+ Facilisis in pretium nisl aliquet
78+
- Nulla volutpat aliquam velit
79+
+ Very easy!
80+
81+
Ordered
82+
83+
1. Lorem ipsum dolor sit amet
84+
2. Consectetur adipiscing elit
85+
3. Integer molestie lorem at massa
86+
87+
88+
1. You can use sequential numbers...
89+
1. ...or keep all the numbers as \`1.\`
90+
91+
Start numbering with offset:
92+
93+
57. foo
94+
1. bar
95+
96+
97+
## Code
98+
99+
Inline \`code\`
100+
101+
Indented code
102+
103+
// Some comments
104+
line 1 of code
105+
line 2 of code
106+
line 3 of code
107+
108+
109+
Block code "fences"
110+
111+
\`\`\`
112+
Sample text here...
113+
\`\`\`
114+
115+
Syntax highlighting
116+
117+
\`\`\` js
118+
var foo = function (bar) {
119+
return bar++;
120+
};
121+
122+
console.log(foo(5));
123+
\`\`\`
124+
125+
## Tables
126+
127+
| Option | Description |
128+
| ------ | ----------- |
129+
| data | path to data files to supply the data that will be passed into templates. |
130+
| engine | engine to be used for processing templates. Handlebars is the default. |
131+
| ext | extension to be used for dest files. |
132+
133+
Right aligned columns
134+
135+
| Option | Description |
136+
| ------:| -----------:|
137+
| data | path to data files to supply the data that will be passed into templates. |
138+
| engine | engine to be used for processing templates. Handlebars is the default. |
139+
| ext | extension to be used for dest files. |
140+
141+
142+
## Links
143+
144+
[link text](http://dev.nodeca.com)
145+
146+
[link with title](http://nodeca.github.io/pica/demo/ "title text!")
147+
148+
Autoconverted link https://github.com/nodeca/pica (enable linkify to see)
149+
150+
151+
## Images
152+
153+
![Minion](https://octodex.github.com/images/minion.png)
154+
![Stormtroopocat](https://octodex.github.com/images/stormtroopocat.jpg "The Stormtroopocat")
155+
156+
Like links, Images also have a footnote style syntax
157+
158+
![Alt text][id]
159+
160+
With a reference later in the document defining the URL location:
161+
162+
[id]: https://octodex.github.com/images/dojocat.jpg "The Dojocat"
163+
`;
164+
165+
export default markdownText;

‎example/src/pluginRules.js‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
import React from "react"
2+
import { StyleSheet, Text, View, ScrollView, Picker } from 'react-native';
3+
import {getUniqueID} from "react-native-markdown-renderer";
4+
5+
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>;
9+
},
10+
label: (node, children, parents) => {
11+
return <Text key={node.key}>{children}</Text>;
12+
},
13+
input: (node, children, parents) => {
14+
return <Text key={node.key}>[{node.attributes.checked ? 'x' : ' - '}]</Text>;
15+
},
16+
};
17+
export default rules;

0 commit comments

Comments
 (0)