refactor(*): clear code

LICENSE

@@ -1,6 +1,6 @@
 The MIT License (MIT)
 
-Copyright (c) 2015 Loch Wansbrough
+Copyright (c) 2016 Charles MANGWA
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal
@@ -19,4 +19,3 @@ AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
 LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
 OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
 SOFTWARE.
-

README.md

@@ -12,20 +12,17 @@ All you need is import the `react-native-simple-markdown` and then use the
 `<Markdown />` component.
 
 ```js
-import React, { Component } from 'react'
-import { AppRegistry } from 'react-native'
+import React from 'react'
 import Markdown from 'react-native-simple-markdown'
 
-class MyAwesomeApp extends Component {
-  render(){
-    return(
-      <Markdown style={styles}>
-        #Who is the best dev in town?
-        {'\n\n'}
-        Probably **the one** reading this lines 😏…
-      </Markdown>
-    )
-  }
+const MyAwesomeApp = () => {
+  return (
+    <Markdown styles={styles}>
+      #Who is the best dev in town?
+      {'\n\n'}
+      Probably **the one** reading this lines 😏…
+    </Markdown>    
+  )
 }
 
 const styles = {
@@ -42,21 +39,18 @@ const styles = {
     borderWidth: 1,
   },
 }
-
-AppRegistry.registerComponent('MyAwesomeApp', () => MyAwesomeApp);
 ```
 
 ## Properties
-
 #### `style`
 
-The Markdown will apply its style by default. However you can pass a `style` prop to customize it has you want.
+The Markdown will apply its styles by default. However you can pass a `styles` prop to customize it has you want.
 
 Example:
 
 ```js
 <Markdown
-  style={{
+  styles={{
     heading1: {
       fontSize: 20,
     },

index.js

@@ -1,141 +1,49 @@
+/* @flow */
+
 import React, { Component } from 'react'
 import { View } from 'react-native'
 import SimpleMarkdown from 'simple-markdown'
-import initialRules from './rules'
 import _ from 'lodash'
+import initialRules from './rules'
+import styles from './styles'
 
-const styles = {
-  view: {
-  },
-  codeBlock: {
-    fontFamily: 'Courier',
-    fontWeight: '500'
-  },
-  del: {
-    containerBackgroundColor: '#222222'
-  },
-  em: {
-    fontStyle: 'italic'
-  },
-  heading: {
-    fontWeight: '200'
-  },
-  heading1: {
-    fontSize: 32
-  },
-  heading2: {
-    fontSize: 24
-  },
-  heading3: {
-    fontSize: 18
-  },
-  heading4: {
-    fontSize: 16
-  },
-  heading5: {
-    fontSize: 13
-  },
-  heading6: {
-    fontSize: 11
-  },
-  hr: {
-    backgroundColor: '#cccccc',
-    height: 1
-  },
-  image: {
-    width: 300,
-    height: 300,
-  },
-  inlineCode: {
-    backgroundColor: '#eeeeee',
-    borderColor: '#dddddd',
-    borderRadius: 3,
-    borderWidth: 1,
-    fontFamily: 'Courier',
-    fontWeight: 'bold'
-  },
-  list: {
-  },
-  listItem: {
-    flexDirection: 'row'
-  },
-  listItemBullet: {
-    fontSize: 20,
-    lineHeight: 20,
-    marginTop: 6,
-  },
-  listItemNumber: {
-    fontWeight: 'bold'
-  },
-  paragraph: {
-    marginTop: 10,
-    marginBottom: 10,
-    flexWrap: 'wrap',
-    flexDirection: 'row',
-    alignItems: 'flex-start',
-    justifyContent: 'flex-start'
-  },
-  strong: {
-    fontWeight: 'bold'
-  },
-  table: {
-    borderWidth: 1,
-    borderColor: '#222222',
-    borderRadius: 3
-  },
-  tableHeader: {
-    backgroundColor: '#222222',
-    flexDirection: 'row',
-    justifyContent: 'space-around'
-  },
-  tableHeaderCell: {
-    color: '#ffffff',
-    fontWeight: 'bold',
-    padding: 5
-  },
-  tableRow: {
-    borderBottomWidth: 1,
-    borderColor: '#222222',
-    flexDirection: 'row',
-    justifyContent: 'space-around'
-  },
-  tableRowLast: {
-    borderColor: 'transparent'
-  },
-  tableRowCell: {
-    padding: 5
-  },
-  text: {
-    color: '#222222'
-  },
-  u: {
-    borderColor: '#222222',
-    borderBottomWidth: 1
-  }
+type Props = {
+  styles: any,
+  children?: string,
+}
+
+type DefaultProps = Props & {
+  children: string,
 }
 
 class Markdown extends Component {
-  static defaultProps = {
-    style: styles
+
+  props: Props
+
+  static defaultProps: DefaultProps = {
+    styles: styles,
+    children: '',
   }
-  componentWillMount() {
-    const mergedStyles = _.merge({}, styles, this.props.style)
-    let rules = initialRules(mergedStyles)
-    rules = _.merge({}, SimpleMarkdown.defaultRules, rules)
 
-    const parser = SimpleMarkdown.parserFor(rules)
-    this.parse = (source) => {
-      const blockSource = source + '\n\n'
-      return parser(blockSource, { inline: false })
-    }
-    this.renderer = SimpleMarkdown.reactFor(SimpleMarkdown.ruleOutput(rules, 'react'))
+  renderContent = (children: string) => {
+    const mergedStyles = Object.assign(styles, this.props.styles)
+    const rules = _.merge({}, SimpleMarkdown.defaultRules, initialRules(mergedStyles))
+    const child = Array.isArray(this.props.children)
+      ? this.props.children.join('')
+      : this.props.children
+    const blockSource = child + '\n\n'
+    const tree = SimpleMarkdown.parserFor(rules)(blockSource, { inline: false })
+    return SimpleMarkdown.reactFor(SimpleMarkdown.ruleOutput(rules, 'react'))(tree)
   }
+
   render() {
-    const child = _.isArray(this.props.children)
-      ? this.props.children.join('') : this.props.children
-    const tree = this.parse(child)
-    return <View style={[styles.view, this.props.style.view]}>{this.renderer(tree)}</View>
+    return (
+      <View style={[styles.view, this.props.styles.view]}>
+        {this.renderContent(this.props.children)}
+      </View>
+    )
   }
+
 }
 
 export default Markdown

package.json

@@ -4,7 +4,7 @@
     "type": "git",
     "url": "https://github.com/CharlesMangwa/react-native-simple-markdown.git"
   },
-  "version": "1.0.52",
+  "version": "1.0.53",
   "description": "A component for rendering Markdown in React Native with native components.",
   "main": "index.js",
   "author": "Charles Mangwa <charlesmangwa@gmail.com> (http://charlesmangwa.surge.sh)",

styles.js

@@ -0,0 +1,111 @@
+/* @flow */
+
+const styles = {
+  view: {},
+  codeBlock: {
+    fontFamily: 'Courier',
+    fontWeight: '500',
+  },
+  del: {
+    containerBackgroundColor: '#222222',
+  },
+  em: {
+    fontStyle: 'italic',
+  },
+  heading: {
+    fontWeight: '200',
+  },
+  heading1: {
+    fontSize: 32,
+  },
+  heading2: {
+    fontSize: 24,
+  },
+  heading3: {
+    fontSize: 18,
+  },
+  heading4: {
+    fontSize: 16,
+  },
+  heading5: {
+    fontSize: 13,
+  },
+  heading6: {
+    fontSize: 11,
+  },
+  hr: {
+    backgroundColor: '#cccccc',
+    height: 1,
+  },
+  image: {
+    width: 300,
+    height: 300,
+  },
+  inlineCode: {
+    backgroundColor: '#eeeeee',
+    borderColor: '#dddddd',
+    borderRadius: 3,
+    borderWidth: 1,
+    fontFamily: 'Courier',
+    fontWeight: 'bold',
+  },
+  list: {},
+  listItem: {
+    flexDirection: 'row',
+  },
+  listItemBullet: {
+    fontSize: 20,
+    lineHeight: 20,
+    marginTop: 6,
+  },
+  listItemNumber: {
+    fontWeight: 'bold',
+  },
+  paragraph: {
+    marginTop: 10,
+    marginBottom: 10,
+    flexWrap: 'wrap',
+    flexDirection: 'row',
+    alignItems: 'flex-start',
+    justifyContent: 'flex-start',
+  },
+  strong: {
+    fontWeight: 'bold',
+  },
+  table: {
+    borderWidth: 1,
+    borderColor: '#222222',
+    borderRadius: 3,
+  },
+  tableHeader: {
+    backgroundColor: '#222222',
+    flexDirection: 'row',
+    justifyContent: 'space-around',
+  },
+  tableHeaderCell: {
+    color: '#ffffff',
+    fontWeight: 'bold',
+    padding: 5,
+  },
+  tableRow: {
+    borderBottomWidth: 1,
+    borderColor: '#222222',
+    flexDirection: 'row',
+    justifyContent: 'space-around',
+  },
+  tableRowLast: {
+    borderColor: 'transparent',
+  },
+  tableRowCell: {
+    padding: 5,
+  },
+  text: {
+    color: '#222222',
+  },
+  u: {
+    borderColor: '#222222',
+    borderBottomWidth: 1,
+  },
+}
+
+export default styles