trying to add ability to add block elements to a header. Related to i…

…ssue #14
mientjan · Jan 23, 2018 · 94a4ea5 · 94a4ea5
1 parent 7aa9753
commit 94a4ea5
Show file tree

Hide file tree

Showing 9 changed files with 220 additions and 119 deletions.
diff --git a/example/App.js b/example/App.js
@@ -15,13 +15,6 @@ import copyAllCheckboxPlugin from "./src/copyAllCheckboxPlugin";
 import pluginRules from "./src/pluginRules";
 
 const rules = {
-  header1: (node, children, parents, style) => {
-    return (
-      <Text key={getUniqueID()} style={{ backgroundColor: "red" }}>
-        {children}
-      </Text>
-    );
-  },
   // added custom block element defined by plugin
   block: (node, children, parents, style) => {
     return (

diff --git a/example/src/copyAllCheckboxPlugin.js b/example/src/copyAllCheckboxPlugin.js
@@ -1,5 +1,5 @@
 const markdownText = `
-## Images
+## ![loading](https://www.hippomundo.com/images/loading.gif) Images 
 
 ![Minion](https://octodex.github.com/images/minion.png)
 ![Stormtroopocat](https://octodex.github.com/images/stormtroopocat.jpg "The Stormtroopocat")
@@ -12,4 +12,4 @@ __Advertisement :)__
 * [x] checked 
 `;
 
-export default markdownText;
+export default markdownText;
diff --git a/example/src/customMarkdownStyle.js b/example/src/customMarkdownStyle.js
@@ -1,38 +1,34 @@
-import { StyleSheet } from 'react-native';
+import { StyleSheet } from "react-native";
 
 /**
  *
  */
 const customMarkdownStyle = StyleSheet.create({
-	view: {},
-	codeBlock: {
-		fontFamily: 'Courier',
-		fontWeight: '500',
-	},
-	del: {
-		backgroundColor: '#000000',
-	},
-	em: {
-		fontStyle: 'italic',
-	},
-	heading: {},
-	heading1: {
+  view: {},
+  codeBlock: {
+    fontFamily: "Courier",
+    fontWeight: "500"
+  },
+  del: {
+    backgroundColor: "#000000"
+  },
+  em: {
+    fontStyle: "italic"
+  },
 
-		backgroundColor: "#FFCC00"
-	},
-	text: {fontSize: 20,},
-	strikethrough: {
-		textDecorationLine: 'line-through',
-		color: '#FF0000'
-	},
-	a: {
-		textDecorationLine: 'underline',
-		color: '#FF0000'
-	},
-	u: {
-		borderColor: '#000000',
-		borderBottomWidth: 1,
-	},
+  text: { fontSize: 20 },
+  strikethrough: {
+    textDecorationLine: "line-through",
+    color: "#FF0000"
+  },
+  a: {
+    textDecorationLine: "underline",
+    color: "#FF0000"
+  },
+  u: {
+    borderColor: "#000000",
+    borderBottomWidth: 1
+  }
 });
 
-export default customMarkdownStyle;
+export default customMarkdownStyle;
diff --git a/example/src/pluginRules.js b/example/src/pluginRules.js
@@ -1,18 +1,33 @@
-import React from "react"
-import { StyleSheet, Text, View, ScrollView, Picker } from 'react-native';
+import React from "react";
+import { StyleSheet, Text, View, ScrollView, Picker } from "react-native";
 
 const rules = {
-	checkbox: (node, children, parents, style) => {
-		return <View style={{flexDirection: 'row', borderWidth: 1, borderColor: '#000000'}} key={node.key}>
-			{children}
-		</View>;
-	},
-	checkbox_input: (node, children, parents, style) => {
-		return <View key={node.key} style={{borderRadius: 20, backgroundColor: 'blue', width: 20, height: 20, marginRight:10}}></View>;
-	},
-	label: (node, children, parents, style) => {
-		return <Text key={node.key}>{children}</Text>;
-	},
-
+  checkbox: (node, children, parents, style) => {
+    return (
+      <View
+        style={{ flexDirection: "row", borderWidth: 1, borderColor: "#000000" }}
+        key={node.key}
+      >
+        {children}
+      </View>
+    );
+  },
+  checkbox_input: (node, children, parents, style) => {
+    return (
+      <View
+        key={node.key}
+        style={{
+          borderRadius: 20,
+          backgroundColor: "blue",
+          width: 20,
+          height: 20,
+          marginRight: 10
+        }}
+      />
+    );
+  },
+  label: (node, children, parents, style) => {
+    return <Text key={node.key}>{children}</Text>;
+  }
 };
-export default rules;
+export default rules;
diff --git a/src/lib/ImageComponent.js b/src/lib/ImageComponent.js
@@ -0,0 +1,45 @@
+import React, { PureComponent } from "react";
+import { Image } from "react-native";
+import PropTypes from "prop-types";
+import MarkdownIt from "markdown-it";
+import PluginContainer from "./plugin/PluginContainer";
+import AstRenderer from "./AstRenderer";
+
+export default class ImageComponent extends PureComponent {
+  static propTypes = {
+    scaling: PropTypes.oneOf(["strict"]).isRequired,
+    uri: PropTypes.string.isRequired
+  };
+
+  /**
+   * Default Props
+   */
+  static defaultProps = {};
+
+  ref = null;
+
+  constructor(props) {
+    super(props);
+
+    this.state = {};
+  }
+
+  onLoad = () => {
+    console.log(this.ref);
+  };
+  onLoadStart = () => {};
+
+  render() {
+    return (
+      <Image
+        ref={ref => (this.ref = ref)}
+        onLoad={this.onLoad}
+        onLoadStart={this.onLoadStart}
+        style={{ width: 50, height: 50 }}
+        source={{
+          uri: this.props.uri
+        }}
+      />
+    );
+  }
+}
diff --git a/src/lib/renderRules.js b/src/lib/renderRules.js
@@ -5,6 +5,8 @@ import FitImage from "react-native-fit-image";
 import getUniqueID from "./util/getUniqueID";
 import openUrl from "./util/openUrl";
 import hasParents from "./util/hasParents";
+import applyStyle from "./util/applyStyle";
+import ImageComponent from "./ImageComponent";
 
 const renderRules = {
   // when unknown elements are introduced, so it wont break
@@ -69,34 +71,45 @@ const renderRules = {
     );
   },
 
-  heading1: (node, children, parent, styles) => (
-    <View key={node.key} style={[styles.heading, styles.heading1]}>
-	    {children}
-    </View>
-  ),
-  heading2: (node, children, parent, styles) => (
-    <View key={node.key} style={[styles.heading, styles.heading2]}>
-      {children}
-    </View>
-  ),
+  heading1: (node, children, parent, styles) => {
+    return (
+      <View key={node.key} style={styles.headingContainer}>
+        {applyStyle(children, [styles.heading, styles.heading1], "Text")}
+      </View>
+    );
+  },
+
+  heading2: (node, children, parent, styles) => {
+
+    children = applyStyle(children, [styles.heading, styles.heading2], "Text");
+
+    console.log(children);
+
+
+    return (
+      <View key={node.key} style={styles.headingContainer}>
+        {children}
+      </View>
+    );
+  },
   heading3: (node, children, parent, styles) => (
-    <View key={node.key} style={[styles.heading, styles.heading3]}>
-      {children}
+    <View key={node.key} style={styles.headingContainer}>
+      {applyStyle(children, [styles.heading, styles.heading3], "Text")}
     </View>
   ),
   heading4: (node, children, parent, styles) => (
-    <View key={node.key} style={[styles.heading, styles.heading4]}>
-      {children}
+    <View key={node.key} style={styles.headingContainer}>
+      {applyStyle(children, [styles.heading, styles.heading4], "Text")}
     </View>
   ),
   heading5: (node, children, parent, styles) => (
-    <View key={node.key} style={[styles.heading, styles.heading5]}>
-      {children}
+    <View key={node.key} style={styles.headingContainer}>
+      {applyStyle(children, [styles.heading, styles.heading5], "Text")}
     </View>
   ),
   heading6: (node, children, parent, styles) => (
-    <View key={node.key} style={[styles.heading, styles.heading6]}>
-      {children}
+    <View key={node.key} style={styles.headingContainer}>
+      {applyStyle(children, [styles.heading, styles.heading6], "Text")}
     </View>
   ),
 
@@ -222,10 +235,10 @@ const renderRules = {
   ),
   image: (node, children, parent, styles) => {
     return (
-      <FitImage
+      <ImageComponent
         key={node.key}
-        style={{ margin: 1 }}
-        source={{ uri: node.attributes.src }}
+        style={styles.image}
+        uri={node.attributes.src}
       />
     );
   }