From 7cd1b7c7e799ebbd5c9947e67440f9a4957dce69 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?L=C3=A9o=20LE=20BRAS?= Date: Fri, 5 Aug 2016 11:27:17 +0200 Subject: [PATCH] refactor(*): clear code --- LICENSE | 3 +- README.md | 28 ++++----- index.js | 158 +++++++++++---------------------------------------- package.json | 2 +- styles.js | 111 ++++++++++++++++++++++++++++++++++++ 5 files changed, 157 insertions(+), 145 deletions(-) create mode 100644 styles.js diff --git a/LICENSE b/LICENSE index 8b2e1ab..2d1f228 100644 --- a/LICENSE +++ b/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. - diff --git a/README.md b/README.md index 2050346..27b3efb 100644 --- a/README.md +++ b/README.md @@ -12,20 +12,17 @@ All you need is import the `react-native-simple-markdown` and then use the `` 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( - - #Who is the best dev in town? - {'\n\n'} - Probably **the one** reading this lines 😏… - - ) - } +const MyAwesomeApp = () => { + return ( + + #Who is the best dev in town? + {'\n\n'} + Probably **the one** reading this lines 😏… + + ) } 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 { - 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 {this.renderer(tree)} + return ( + + {this.renderContent(this.props.children)} + + ) } + } export default Markdown diff --git a/package.json b/package.json index e21c70b..e94c321 100644 --- a/package.json +++ b/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 (http://charlesmangwa.surge.sh)", diff --git a/styles.js b/styles.js new file mode 100644 index 0000000..ca22507 --- /dev/null +++ b/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