Sec

Components/Numbers.js

@@ -0,0 +1,37 @@
+import React, { useState } from 'react';
+import {View , Text, TextInput, Button,StyleSheet} from 'react-native';
+import { Icon } from 'react-native-elements'
+
+export default function Numbers(props) {
+
+	let [number , setNumber] = useState(props.number || '')
+	let title = props.title || "Input";
+	return(
+		<View style={styles.container}>
+			<Text style={styles.title}>{title}</Text>
+			<TextInput style={styles.defaultInput} 
+					onChangeText={(number) => {
+						props.onChange && props.onChange(number);
+						setNumber(number);
+					}}
+					keyboardType={'numeric'}
+    				value={number.toString()}/>
+		</View>
+		)
+
+}
+
+const styles = StyleSheet.create({
+	container:{
+		padding:10
+	},
+	defaultInput: {
+		marginTop:6,
+		borderWidth:1,
+		width:100
+	},
+	title: {
+
+	}
+})
+

Components/TextEditor.js

@@ -20,14 +20,29 @@ export default function TextEditor(props) {
 
 const styles = StyleSheet.create({
 	container:{
-		padding:0,
-		borderWidth:1
+		padding:10
 	},
 	defaultInput: {
-
+		marginTop:6,
+		borderWidth:1,
+		width:200
 	},
 	title: {
 
 	}
 })
 
+/*
+
+<View style={SideBarStyle.body}>
+					<Text>{key}</Text>
+					<TextInput
+			        style={{height: 40, borderColor: 'gray', borderWidth: 1}}
+			        onChangeText={(text) => this.editNode(text, key, Structure[key])}
+			        value={this.viewNode.props[key]}
+			        keyboardType={Structure[key].constructor.name === 'Interger' ? 'numeric':null}
+			     	 />
+						
+				</View>
+
+*/

Systems/SideBar.js

@@ -4,7 +4,7 @@ import Library from 'trapilib/dist/lib';
 import { TextInput } from 'react-native';
 
 import TextEditor from '../Components/TextEditor';
-
+import Numbers from '../Components/Numbers';
 let {
 	CoreSystem,
 	ViewSystem,
@@ -39,15 +39,12 @@ export default class SideBar{
 
 
     editNode(text,key){
-    	console.log(text,key);
-    	this.viewNode.props[key] = text;
-    	this.forceUpdate();
+		this.viewNode.props[key] = text;
+		this.forceUpdate();
     }
-    //TODO Change everything :P
 	render(){
+		
 		let tool = this.tool;
-		console.log("@@@@@@@@@@@@@")
-		console.log(tool)
 		let ModuleSystem = this.CoreSystem.ModuleSystem;
 		let CurrentView = this.CoreSystem.getCurrentView();
 		let Routing = this.CoreSystem.Routing;
@@ -57,9 +54,9 @@ export default class SideBar{
 			{
 				this.ColNode = tool.selectedNode;
 				this.RowNode = CurrentView.getParent(this.ColNode);
-				console.log("ROWNODE" , this.RowNode);
-				console.log("ColNode" , this.ColNode);
-				console.log("viewNode" , this.viewNode);
+				//console.log("ROWNODE" , this.RowNode);
+				//console.log("ColNode" , this.ColNode);
+				//console.log("viewNode" , this.viewNode);
 
 				if(tool.selectedNode.content && tool.selectedNode.content.value){
 					this.viewNode = tool.selectedNode.content;				
@@ -67,19 +64,23 @@ export default class SideBar{
 				}
 			}	
 		}
+		console.log("###################")
+		console.log(Structure)
 		let data = Object.keys(Structure || {}).map((key) => {
-			return(
-				<View style={SideBarStyle.body}>
-					<Text>{key}</Text>
-					{key === 'text' ? (
-							<TextInput
-					        style={{height: 40, borderColor: 'gray', borderWidth: 1}}
-					        onChangeText={(text) => this.editNode(text, key)}
-					        value={this.viewNode.props[key]}
-					     	 />
-						):(null)}
-				</View>
-			)
+			console.log("@@@@@@ from here")
+			console.log(Structure[key])
+
+			switch(Structure[key].constructor.name){
+				case 'Integer':
+					return <Numbers title={key} number={2}
+					  onChange={(number) => this.editNode(number, key)}
+					  />
+				case 'Text':
+					return <TextEditor title={key} text = {this.viewNode.props[key]} onChange={(text) => this.editNode(text,key)} />
+				default:
+					//Must create a generic Vuiew Component
+					return (<View></View>)
+			}
 
 		})
 		console.log("ROW NODE DATA DATA" , this.RowNode , this.RowNode && CurrentView.getColumns(this.RowNode).length);
@@ -102,7 +103,11 @@ export default class SideBar{
   						<Text>Col</Text>
   					</View>
   				</View>
-  			 	{data}
+
+
+  				<View style={PropertiesContainer.container}>
+  			 		{data}
+  			 	</View>
   			</View>
   			)
 	}
@@ -121,6 +126,17 @@ const SelectedStyle = StyleSheet.create({
 
 
 
+const PropertiesContainer = StyleSheet.create({
+	container:{
+		marginTop:20,
+		borderTopWidth:0.8,
+		borderColor:'#D0D0D0'
+	},
+	child:{
+		padding:10
+	}
+})
+
 const SideBarStyle = StyleSheet.create({
 	container:{
 		padding:1,

package-lock.json

@@ -7010,7 +7010,7 @@
       "integrity": "sha512-yaOH/Pk/VEhBWWTlhI+qXxDFXlejDGcQipMlyxda9nthulaxLZUNcUqFxokp0vcYnvteJln5FNQDRrxj3YcbVw=="
     },
     "trapilib": {
-      "version": "git+http://git.onarbooks.com/Klapi/TrapiLib.git#4b3fbd8cfb5361f72250aa6444355aba2267f7e7",
+      "version": "git+http://git.onarbooks.com/Klapi/TrapiLib.git#683bf9a9e4e3224c4558dfd52b6304b223165c2e",
       "from": "git+http://git.onarbooks.com/Klapi/TrapiLib.git",
       "requires": {
         "expo": "^34.0.0-experiment.8",