react-native-markdown-syntax/Markdown.js at master · Liroo/react-native-markdown-syntax · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
import React, { Component, PropTypes } from 'react';
import {
  View,
} from 'react-native';
import { markdown } from './lib/index';

type Props = {
  style: any;
  mdStyle: any,
  childre?: any;
};

export default class Markdown extends Component {
  props: Props;

  static propTypes = {
    style: View.propTypes.style,
    mdStyle: PropTypes.any,
  };

  componentDidMount() {
    if (this.props.mdStyle) {
      mdStyle = _.merge({}, this.props.mdStyle, mdStyle);
    }
  }

  render() {
    let text;
    if (typeof this.props.children === 'string') {
      text = this.props.children;
    } else if (typeof this.props.children === 'object') {
      text = this.props.children.join('');
    } else {
      throw 'Not supported type of text: ' + typeof this.props.children;
    }
    return (
      <View style={[{ flexDirection: 'column' }, this.props.style]}>
        {markdown.toReact(text)}
      </View>
    )
  }
}

// Here is the default style for markdown
let mdStyle = {
  h: {
    fontWeight: '200',
  },
  h1: {
    fontSize: 32,
  },
  h2: {
    fontSize: 24,
  },
  h3: {
    fontSize: 18,
  },
  h4: {
    fontSize: 16,
  },
  h5: {
    fontSize: 13,
  },
  h6: {
    fontSize: 11,
  },
  code: {
    backgroundColor: '#f7f7f7',
  },
  boxPre: {
    backgroundColor: '#f7f7f7',
  },
  pre: {
  },
  a: {
    color: 'blue',
  },
  blockquote: {
    fontFamily: 'Courier',
    fontWeight: '500',
    color: 'grey',
  },
  blockQuotePipe: {
    height: 25,
    width: 3,
    marginHorizontal: 10,
    backgroundColor: '#dddddd',
  },
  del: {
    containerBackgroundColor: '#222222',
  },
  em: {
    fontStyle: 'italic',
  },
  strong: {
    fontWeight: 'bold',
  },
  li: {

  },
  liPoint: {
    height: 5,
    width: 5,
    borderRadius: 50,
    margin: 5,
    backgroundColor: 'black',
  },
  liOrder: {
    fontWeight: 'bold',
    paddingLeft: 5,
  },
  p: {
    marginTop: 10,
    marginBottom: 10,
    flexWrap: 'wrap',
    flexDirection: 'row',
    alignItems: 'flex-start',
    justifyContent: 'flex-start',
  },
};
export { mdStyle };