Color picker

Components/ColorEditor.js

@@ -0,0 +1,40 @@
+import React, { useState } from 'react';
+import {View , Text, TextInput, Button,StyleSheet} from 'react-native';
+import { Icon } from 'react-native-elements'
+import SketchPicker   from 'react-color';
+export default function ColorEditor(props) {
+
+	/*let [number , setNumber] = useState(props.number || '')
+	let title = props.title || "Input";*/
+
+	let [color, setColor] = useState(props.color || '');
+	let title = props.title || "Input";
+	return(
+		<View style={styles.container}>
+			<Text> Color Picker </Text>
+	 		<SketchPicker 
+	 		color={color}
+	 		width="180px" onChangeComplete ={(color) =>{ 
+	 		props.onChange && props.onChange(color.hex);
+			setColor(color)
+				}}/>
+		 		
+		</View>
+		)
+
+}
+
+const styles = StyleSheet.create({
+	container:{
+		padding:10
+	},
+	defaultInput: {
+		marginTop:6,
+		borderWidth:1,
+		width:100
+	},
+	title: {
+
+	}
+})
+

Systems/SideBar.js

@@ -5,6 +5,13 @@ import { TextInput } from 'react-native';
 
 import TextEditor from '../Components/TextEditor';
 import Numbers from '../Components/Numbers';
+import ColorEditor from '../Components/ColorEditor';
+
+
+
+
+
+
 let {
 	CoreSystem,
 	ViewSystem,
@@ -43,33 +50,38 @@ export default class SideBar{
 		this.forceUpdate();
     }
 	render(){
-		
+		console.log("DO I EVER COME HEREEEEEEE")
 		let tool = this.tool;
 		let ModuleSystem = this.CoreSystem.ModuleSystem;
 		let CurrentView = this.CoreSystem.getCurrentView();
 		let Routing = this.CoreSystem.Routing;
 		let Structure = {};
 		if (tool) {
+			console.log(tool)
 			if (tool.selectedNode && tool.selectedNode.isCol && CurrentView.has(tool.selectedNode)) {
 				this.ColNode = tool.selectedNode;
 				this.RowNode = CurrentView.getParent(this.ColNode);
 
 				if(tool.selectedNode.content && tool.selectedNode.content.value) {
-					this.viewNode = tool.selectedNode.content;				
+					this.viewNode = tool.selectedNode.content;			
+					console.log("NEVERRRRRRRRRRRRRRRR")	
 					Structure = ModuleSystem.fromViewNode(this.viewNode).Inputs;
 				}
 			}	
 		}
-		console.log("###################")
-		console.log(Structure)
 		let data = Object.keys(Structure || {}).map((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)} />
+					if(key === 'color'){
+						return <ColorEditor title={key + ' Attributes'}  data = {this.viewNode.props}  onChange={(color) => this.editNode(color,key)}/>
+					}else{
+						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>)
@@ -99,6 +111,9 @@ export default class SideBar{
   				<View style={PropertiesContainer.container}>
   			 		{data}
   			 	</View>
+
+
+  			 	
   			</View>
   			)
 	}

package-lock.json

@@ -960,6 +960,11 @@
         "tiny-queue": "^0.2.1"
       }
     },
+    "@icons/material": {
+      "version": "0.2.4",
+      "resolved": "https://registry.npmjs.org/@icons/material/-/material-0.2.4.tgz",
+      "integrity": "sha512-QPcGmICAPbGLGb6F/yNf/KzKqvFx8z5qx3D1yFqVAjoFmXK35EgyW+cJ57Te3CNsmzblwtzakLGFqHPqrfb4Tw=="
+    },
     "@react-native-community/cli": {
       "version": "1.11.2",
       "resolved": "https://registry.npmjs.org/@react-native-community/cli/-/cli-1.11.2.tgz",
@@ -4342,6 +4347,11 @@
       "resolved": "https://registry.npmjs.org/markerwithlabel/-/markerwithlabel-2.0.2.tgz",
       "integrity": "sha512-C/cbm1A0h/u54gwHk5ZJNdUU3V3+1BbCpRPMsMyFA7vF4yL+aB4rWpxACz29TpQ+cTg6/iQroExh0PMSRGtQFg=="
     },
+    "material-colors": {
+      "version": "1.2.6",
+      "resolved": "https://registry.npmjs.org/material-colors/-/material-colors-1.2.6.tgz",
+      "integrity": "sha512-6qE4B9deFBIa9YSpOc9O0Sgc43zTeVYbgDT5veRKSlB2+ZuHNoVVxA1L/ckMUayV9Ay9y7Z/SZCLcGteW9i7bg=="
+    },
     "math-random": {
       "version": "1.0.4",
       "resolved": "https://registry.npmjs.org/math-random/-/math-random-1.0.4.tgz",
@@ -5552,6 +5562,19 @@
       "resolved": "https://registry.npmjs.org/react-clone-referenced-element/-/react-clone-referenced-element-1.1.0.tgz",
       "integrity": "sha512-FKOsfKbBkPxYE8576EM6uAfHC4rnMpLyH6/TJUL4WcHUEB3EUn8AxPjnnV/IiwSSzsClvHYK+sDELKN/EJ0WYg=="
     },
+    "react-color": {
+      "version": "2.17.3",
+      "resolved": "https://registry.npmjs.org/react-color/-/react-color-2.17.3.tgz",
+      "integrity": "sha512-1dtO8LqAVotPIChlmo6kLtFS1FP89ll8/OiA8EcFRDR+ntcK+0ukJgByuIQHRtzvigf26dV5HklnxDIvhON9VQ==",
+      "requires": {
+        "@icons/material": "^0.2.4",
+        "lodash": "^4.17.11",
+        "material-colors": "^1.2.1",
+        "prop-types": "^15.5.10",
+        "reactcss": "^1.2.0",
+        "tinycolor2": "^1.4.1"
+      }
+    },
     "react-deep-force-update": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/react-deep-force-update/-/react-deep-force-update-1.1.2.tgz",
@@ -5889,6 +5912,14 @@
         "react-proxy": "^1.1.7"
       }
     },
+    "reactcss": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/reactcss/-/reactcss-1.2.3.tgz",
+      "integrity": "sha512-KiwVUcFu1RErkI97ywr8nvx8dNOpT03rbnma0SSalTYjkrPYaEajR4a/MRt6DZ46K6arDRbWMNHF+xH7G7n/8A==",
+      "requires": {
+        "lodash": "^4.0.1"
+      }
+    },
     "read-pkg": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/read-pkg/-/read-pkg-2.0.0.tgz",
@@ -6948,6 +6979,11 @@
       "resolved": "https://registry.npmjs.org/tiny-queue/-/tiny-queue-0.2.1.tgz",
       "integrity": "sha1-JaZ/LG4lOyypQZd7XvdELvl6YEY="
     },
+    "tinycolor2": {
+      "version": "1.4.1",
+      "resolved": "https://registry.npmjs.org/tinycolor2/-/tinycolor2-1.4.1.tgz",
+      "integrity": "sha1-9PrTM0R7wLB9TcjpIJ2POaisd+g="
+    },
     "tmp": {
       "version": "0.0.33",
       "resolved": "https://registry.npmjs.org/tmp/-/tmp-0.0.33.tgz",
@@ -7010,7 +7046,7 @@
       "integrity": "sha512-yaOH/Pk/VEhBWWTlhI+qXxDFXlejDGcQipMlyxda9nthulaxLZUNcUqFxokp0vcYnvteJln5FNQDRrxj3YcbVw=="
     },
     "trapilib": {
-      "version": "git+http://git.onarbooks.com/Klapi/TrapiLib.git#da73d3ecb6954dc29181c8a001c86d605ea52d73",
+      "version": "git+http://git.onarbooks.com/Klapi/TrapiLib.git#954cc8b2733299f6f471d6221e5ec71740dc2ed6",
       "from": "git+http://git.onarbooks.com/Klapi/TrapiLib.git",
       "requires": {
         "expo": "^34.0.0-experiment.8",

package.json

@@ -11,6 +11,7 @@
     "expo": "^33.0.0",
     "prop-types": "^15.7.2",
     "react": "16.8.3",
+    "react-color": "^2.17.3",
     "react-dom": "^16.8.6",
     "react-native": "https://github.com/expo/react-native/archive/sdk-33.0.0.tar.gz",
     "react-native-elements": "^1.1.0",