Add tables

Author: easafe

src/Flame/Native/Attribute/Internal.purs

@@ -90,9 +90,6 @@ caseify name'
 id ∷ ToStringAttribute
 id = createProperty "id"
 
-innerHtml ∷ ToStringAttribute
-innerHtml = createProperty "innerHTML"
-
 alt ∷ ToStringAttribute
 alt = createProperty "alt"
 

src/Flame/Native/Element.js

@@ -1,17 +1,28 @@
-import React, {createElement } from 'react';
+import  {createElement } from 'react';
 import { View, Text, Button, TextInput, StyleSheet, Image } from 'react-native';
 
-let textNode = 1,
-    elementNode = 2,
-    svgNode = 3,
-    lazyNode = 5,
-    managedNode = 6;
 let styleData = 1,
     classData = 2,
     propertyData = 3,
     attributeData = 4,
     keyData = 7;
 
+let initialStyles = StyleSheet.create({
+    hr: {
+        borderBottomColor: 'black',
+        borderBottomWidth: StyleSheet.hairlineWidth,
+    },
+    table : {
+        flexDirection: 'column'
+    },
+    tr : {
+        flexDirection: 'row',
+        justifyContent: 'space-between'
+    },
+    b: {
+        fontWeight: 'bold'
+   }
+});
 
 export function createViewNode(nodeData) {
     return function (children) {
@@ -24,28 +35,52 @@ export function createViewNode(nodeData) {
 export function createButtonNode(nodeData) {
     return function(children) {
         let props = fromNodeData(nodeData)
+        props.title = children[0] ;
 
-        return createElement(Button, { title: children[0], ...props });
+        return createElement(Button, props);
     }
 }
 
-let initialHrStyle = {
-    borderBottomColor: 'black',
-    borderBottomWidth: StyleSheet.hairlineWidth,
-};
-
 export function createHrNode(nodeData) {
     let props = fromNodeData(nodeData);
 
     if (props.style === undefined)
-        props.style = { ...initialHrStyle};
+        props.style = [initialStyles.hr];
     else {
-        props.style = { ...initialHrStyle, ...props.style };
+        props.style = [initialStyles.hr, props.style];
     }
 
     return createViewNode(nodeData)(undefined);
 }
 
+export function createTableNode(nodeData) {
+    return function(children) {
+        let props = fromNodeData(nodeData);
+
+        if (props.style === undefined)
+            props.style = [initialStyles.table];
+        else {
+            props.style = [initialStyles.table, props.style];
+        }
+
+        return createElement(View, props, ...children);
+    }
+}
+
+export function createTrNode(nodeData) {
+    return function(children) {
+        let props = fromNodeData(nodeData);
+
+        if (props.style === undefined)
+            props.style = [initialStyles.tr];
+        else {
+            props.style = [initialStyles.tr, props.style];
+        }
+
+        return createElement(View, props, ...children);
+    }
+}
+
 export function createLabelNode(nodeData) {
     return function(children) {
         let props = fromNodeData(nodeData),
@@ -95,18 +130,14 @@ export function createANode(nodeData) {
     }
 }
 
-let initialBStyle = {
-     fontWeight: 'bold'
-};
-
 export function createBNode(nodeData) {
     return function(children) {
         let props = fromNodeData(nodeData);
 
         if (props.style === undefined)
-            props.style = { ...initialBStyle};
+            props.style = [initialStyles.b];
         else {
-            props.style = { ...initialBStyle, ...props.style };
+            props.style = [initialStyles.b, props.style];
         }
 
         let propedChildren = [];
@@ -133,11 +164,9 @@ export function text(value) {
 }
 
 function fromNodeData(allData) {
-    let nodeData;
-
-    if (allData !== undefined) {
-        nodeData = {};
+    let nodeData = {};
 
+    if (allData !== undefined)
         for (let data of allData) {
             let dataOne = data[1];
             //[0] also always contain the data type
@@ -162,7 +191,6 @@ function fromNodeData(allData) {
                     nodeData[dataOne] = data[2];
             }
         }
-    }
 
     return nodeData;
 }

src/Flame/Native/Element.purs

@@ -54,6 +54,10 @@ foreign import createBNode :: forall message. Array (NodeData message) -> Array
 
 foreign import createLabelNode :: forall message. Array (NodeData message) -> Array (Html message) -> Html message
 
+foreign import createTableNode :: forall message. Array (NodeData message) -> Array (Html message) -> Html message
+
+foreign import createTrNode :: forall message. Array (NodeData message) -> Array (Html message) -> Html message
+
 -- | Creates a text node
 foreign import text ∷ ∀ message. String → Html message
 
@@ -117,6 +121,33 @@ div' nodeData = createViewNode (toNode nodeData) []
 img ∷ ∀ a h. ToHtml' a h
 img nodeData = createImageNode (toNode nodeData)
 
+table :: forall a b h. ToHtml a b h
+table nodeData children = createTableNode (toNode nodeData) $ toNode children
+
+table_ :: forall  b h. ToHtml_ b h
+table_ children = createTableNode [] $ toNode children
+
+table' :: forall a h. ToHtml' a h
+table' nodeData = createTableNode (toNode nodeData) []
+
+tr :: forall a b h. ToHtml a b h
+tr nodeData children = createTrNode (toNode nodeData) $ toNode children
+
+tr_ :: forall  b h. ToHtml_ b h
+tr_ children = createTrNode [] $ toNode children
+
+tr' :: forall a h. ToHtml' a h
+tr' nodeData = createTrNode (toNode nodeData) []
+
+td :: forall a b h. ToHtml a b h
+td nodeData children = createViewNode (toNode nodeData) $ toNode children
+
+td_ :: forall  b h. ToHtml_ b h
+td_ children = createViewNode [] $ toNode children
+
+td' :: forall a h. ToHtml' a h
+td' nodeData = createViewNode (toNode nodeData) []
+
 -- h1 ∷ ∀ a b h. ToHtml a b h
 -- h1 = createElement "h1"