Fix

.gitignore

@@ -7,4 +7,5 @@ npm-debug.*
 *.mobileprovision
 *.orig.*
 web-build/
-web-report/
+web-report/
+.yalc/

Components/ColorEditor.js

@@ -4,38 +4,59 @@ import { Icon } from 'react-native-elements'
 import SketchPicker   from 'react-color';
 
 let rgbaTemplate = /rgba\([ ]*([0-9.]+)[ ]*,[ ]*([0-9.]+)[ ]*,[ ]*([0-9.]+)[ ]*,[ ]*([0-9.]+)[ ]*\)/;
-export default function ColorEditor(props) {
-
-
-	/*let [number , setNumber] = useState(props.number || '')
-	let title = props.title || "Input";*/
-
-	let matches = rgbaTemplate.exec(props.text || '');
+export default class ColorEditor extends React.Component {
+	constructor(props){
+		super(props)
+		this.state = {
+			open:false
+		}
+	}
+	
+	render(){
+	let matches = rgbaTemplate.exec(this.props.text || '');
 	let defaultColor = {
 		r: matches && parseFloat(matches[1]) || 0,
 		g: matches && parseFloat(matches)[2] || 0,
 		b: matches && parseFloat(matches)[3] || 0,
 		a: matches && parseFloat(matches)[4] || 1
 	};
-	console.log(matches);
-	console.log(defaultColor);
 
-	let [color, setColor] = useState(defaultColor);
-	let title = props.title || "Input";
+	let color = this.state.color || defaultColor;
+	let title = this.props.title || "Input";
+
+	let open = this.state.open ? (
+			<View style={styles.container}>
+				<View style={styles.prevCont}>
+					<Text> Color Fill </Text>
+		 			<View onClick = {(e) => this.setState({open:false})} style={[{backgroundColor:this.props.text},styles.preview]}></View>
+		 		</View>
+		 		<SketchPicker 
+		 		color={color}
+		 		width="180px" onChangeComplete ={(newColor) => {
+			 		this.props.onChange && this.props.onChange(`rgba(${newColor.rgb.r},${newColor.rgb.g},${newColor.rgb.b},${newColor.rgb.a})`);
+					this.setState({color:newColor.rgb});
+				}}
+				/>
+			</View>
+			):(
+			<View key={Math.random()} style={styles.prevCont}>
+				<Text>Color Fill</Text>
+				<View onClick = {(e) => this.setState({open:true})} style={[{backgroundColor:this.props.text},styles.preview]}></View>
+			</View>
+			)
 	return(
-		<View style={styles.container}>
-			<Text> Color Picker </Text>
-	 		<SketchPicker 
-	 		color={color}
-	 		width="180px" onChangeComplete ={(newColor) => {
-		 		props.onChange && props.onChange(`rgba(${newColor.rgb.r},${newColor.rgb.g},${newColor.rgb.b},${newColor.rgb.a})`);
-				setColor(newColor.rgb);
-			}}
-			/>
-		 		
-		</View>
+			<View>
+			<Text>{this.props.title}</Text>
+			{open}
+			</View>
+			
 		)
 
+
+		
+		
+		
+	}
 }
 
 const styles = StyleSheet.create({
@@ -47,8 +68,17 @@ const styles = StyleSheet.create({
 		borderWidth:1,
 		width:100
 	},
-	title: {
-
+	prevCont:{
+		flex:1,
+		flexDirection:'row'	
+	},
+	preview:{
+		width: 43,
+		height: 19,
+		boxShadow: '0px 3px 6px #00000029',
+		border: '1px solid #FFFFFF',
+		borderRadius: 14,
+		opacity: 1
 	}
 })
 

Components/FormEditor.js

@@ -0,0 +1,63 @@
+import React from 'react';
+import {View , Text, TextInput,StyleSheet , Button} from 'react-native';
+//Inputs Structure For Library
+/*
+const Inp = [
+		{
+		textContentType :"username",
+		placeholder:"username"
+		},
+		{
+		textContentType :"password",
+		placeholder:"password"
+		}]
+*/
+
+export default class FormEditor extends React.Component {
+	constructor(props){
+		super(props)
+	}
+
+	addInput(e){
+		console.log("Will add Input")
+	}
+
+	render(){
+	let inputs =  this.props.value.map((item) => {
+		return (
+				<View key= {Math.random()}>
+					
+					<TextInput 
+					style={styles.defaultInput} 
+					onChangeText={(text) => {						
+						props.onChange && props.onChange(text);
+					}}
+					 placeholder={item.placeholder}
+    				/>
+    			</View>
+    				)
+	})
+	return(
+		<View styles={{height:100,width:100}}>
+			<Text>Missing Functionality on Form </Text>
+			
+			{/*<Button
+			  onPress = {(e) => this.addInput(e)}
+			  title={"Add"}
+			/>*/}
+		</View>
+		)
+	}
+		
+
+}
+const styles = StyleSheet.create({
+	container:{
+		padding:10
+	},
+	defaultInput: {
+		marginTop:6,
+		borderWidth:1,
+		width:200
+	}
+})

Components/Numbers.js

@@ -9,7 +9,11 @@ export default function Numbers(props) {
 	return(
 		<View style={styles.container}>
 			<Text style={styles.title}>{title}</Text>
-			<TextInput style={styles.defaultInput} 
+			<TextInput 
+
+
+				
+					
 					onChangeText={(number) => {
 						try{
 							number = parseInt(number);
@@ -18,25 +22,41 @@ export default function Numbers(props) {
 						}
 						props.onChange && props.onChange(number);
 						setNumber(number);
+						
 					}}
 					keyboardType={'numeric'}
-    				value={number.toString()}/>
+    				value={number.toString()}
+    				style={[{outline:'none',background:"#FFFFFF"},styles.defaultInput]} 
+
+    				/>
 		</View>
 		)
 
 }
 
+
+/*
+
+width: 62px;
+height: 21px;
+background: #FFFFFF 0% 0% no-repeat padding-box;
+border-radius: 14px;
+opacity: 1;
+*/
+
 const styles = StyleSheet.create({
 	container:{
-		padding:10
+		padding:10,
+		flex:1,
+		
+		opacity:1
 	},
 	defaultInput: {
-		marginTop:6,
+		width:62,
+		height:21,
 		borderWidth:1,
-		width:100
-	},
-	title: {
-
+		borderRadius:14,
+											
 	}
 })
 

Components/TypeHandler.js

@@ -5,6 +5,8 @@ import Editors from './index.js';
 let Types = Library.DataTypes.Types;
 export default function(Type) {
 	switch(Type.type) {
+		case Types.Array:
+			return Editors.FormEditor;
 		case Types.Text:
 			if(Type.isColor) 
 				return Editors.ColorEditor;

Components/index.js

@@ -1,7 +1,8 @@
 export default [
 	"TextEditor",
 	"ColorEditor",
-	"Numbers"
+	"Numbers",
+	"FormEditor"
 ].reduce((acc, item) => {
 	acc[item] = require('./' + item).default;
 	return acc;

Systems/ModuleBar.js

@@ -44,7 +44,7 @@ export default class ModuleBar {
 							ctor: name
 						})}>
 							<View style={{minWidth: 50, minHeight:50, backgroundColor: 'rgba(0,0,0,0.2)'}}>
-								{React.createElement(list[key][name])}
+								{this.CoreSystem.ModuleSystem.createElementCtor(list[key][name])}
 							</View>
 						</Text>
 						

Systems/SideBar.js

@@ -70,11 +70,15 @@ export default class SideBar extends BaseSystem {
 		let editorProps = {
 			title: key,
 			onChange: (value) => {
-				console.log(typeof value);
 				onChange && onChange(value, key)
 			}
 		};
+
+
 		switch(Structure.type){
+			case DataTypes.Types.Array:
+				editorProps.value = viewNodeProps[key];
+				break;
 			case DataTypes.Types.Integer:
 			case DataTypes.Types.Bool:
 				editorProps.number = viewNodeProps[key];
@@ -86,6 +90,7 @@ export default class SideBar extends BaseSystem {
 				//Must create a generic Vuiew Component
 				return (<View></View>)
 		}
+
 		return <Editor {...editorProps} key={key}/>
     }
 
@@ -94,7 +99,7 @@ export default class SideBar extends BaseSystem {
 		let CurrentView = this.CoreSystem.getCurrentView();
 		
 		let selectedNode = this.ToolBox.selectedNode;
-		console.log("TOOLBOX" , this.ToolBox);
+		
 		let Structure = {},
 			nodeStructure = {};
 		let viewNodeProps = {},

package-lock.json

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

yalc.lock

@@ -1,10 +0,0 @@
-{
-  "version": "v1",
-  "packages": {
-    "trapilib": {
-      "signature": "e923c3aad64bd3df3bc0a585473e5b3a",
-      "file": true,
-      "replaced": "git+http://git.onarbooks.com/Klapi/TrapiLib.git"
-    }
-  }
-}