Fix color & DataTypes

Components/ColorEditor.js

@@ -2,22 +2,36 @@ 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';
+
+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 [color, setColor] = useState(props.color || '');
+	let matches = rgbaTemplate.exec(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";
 	return(
 		<View style={styles.container}>
 			<Text> Color Picker </Text>
 	 		<SketchPicker 
 	 		color={color}
-	 		width="180px" onChangeComplete ={(color) =>{ 
-	 		props.onChange && props.onChange(color.hex);
-			setColor(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>
 		)

Components/TypeHandler.js

@@ -0,0 +1,17 @@
+import Library from 'trapilib/dist/lib';
+
+import Editors from './index.js';
+
+let Types = Library.DataTypes.Types;
+export default function(Type) {
+	switch(Type.type) {
+		case Types.Text:
+			if(Type.isColor) 
+				return Editors.ColorEditor;
+			return Editors.TextEditor;
+		case Types.Number: 
+			return Editors.Numbers;
+		default: 
+			return Editors.TextEditor;
+	}
+}

Components/index.js

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

Systems/SideBar.js

@@ -4,9 +4,9 @@ import Library from 'trapilib/dist/lib';
 import { TextInput } from 'react-native';
 
 import TextEditor from '../Components/TextEditor';
-import Numbers from '../Components/Numbers';
-import ColorEditor from '../Components/ColorEditor';
-
+// import Numbers from '../Components/Numbers';
+// import ColorEditor from '../Components/ColorEditor';
+import TypeHandler from '../Components/TypeHandler.js';
 
 
 
@@ -15,7 +15,8 @@ import ColorEditor from '../Components/ColorEditor';
 let {
 	CoreSystem,
 	ViewSystem,
-	ViewNode
+	ViewNode,
+	DataTypes
 } = Library; 
 
 export default class SideBar{
@@ -70,23 +71,24 @@ export default class SideBar{
 			}	
 		}
 		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':
-					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)} />
-					}
+			let Editor = TypeHandler(Structure[key]);
+			let editorProps = {
+				title: key,
+				onChange: (value) => this.editNode(value, key)
+			};
+			console.log(DataTypes)
+			switch(Structure[key].type){
+				case DataTypes.Types.Integer:
+					editorProps.number = this.viewNode.props[key];
+					break;
+				case DataTypes.Types.Text:
+					editorProps.text = this.viewNode.props[key];
+					break;
 				default:
 					//Must create a generic Vuiew Component
 					return (<View></View>)
 			}
-
+			return <Editor {...editorProps}/>
 		})
 		return (
   			<View>

yarn.lock

@@ -857,6 +857,11 @@
     pouchdb-collections "^1.0.1"
     tiny-queue "^0.2.1"
 
+"@icons/material@^0.2.4":
+  version "0.2.4"
+  resolved "https://registry.yarnpkg.com/@icons/material/-/material-0.2.4.tgz#e90c9f71768b3736e76d7dd6783fc6c2afa88bc8"
+  integrity sha512-QPcGmICAPbGLGb6F/yNf/KzKqvFx8z5qx3D1yFqVAjoFmXK35EgyW+cJ57Te3CNsmzblwtzakLGFqHPqrfb4Tw==
+
 "@react-native-community/cli@^1.2.1":
   version "1.11.2"
   resolved "https://registry.yarnpkg.com/@react-native-community/cli/-/cli-1.11.2.tgz#b14967f24a389f5a16889a747345cf0e5757a2f1"
@@ -1883,9 +1888,9 @@ [email protected]:
   integrity sha1-WQxhFWsK4vTwJVcyoViyZrxWsh0=
 
 electron-to-chromium@^1.3.191:
-  version "1.3.234"
-  resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.3.234.tgz#38c7daca042de7c0f9ffe9882e98faf8e1ea2420"
-  integrity sha512-SVXY503NJLFAqBx8VdJaO47G+qUQggHgRjZnyjH9/SZ1w0CJpeBrEssNPk71TeKU8OGHdYjjNNHeJ6v+TJoCBg==
+  version "1.3.235"
+  resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.3.235.tgz#8d0d52c9ec76d12189f2f2d265a17d57f41d20dc"
+  integrity sha512-xNabEDbMIKPLQd6xgv4nyyeMaWXIKSJr6G51ZhUemHhbz6kjZAYcygA8CvfEcMF+Mt5eLmDWaLmfSOWdQxzBVQ==
 
 encodeurl@~1.0.2:
   version "1.0.2"
@@ -3490,7 +3495,7 @@ lodash.throttle@^4.1.1:
   resolved "https://registry.yarnpkg.com/lodash.throttle/-/lodash.throttle-4.1.1.tgz#c23e91b710242ac70c37f1e1cda9274cc39bf2f4"
   integrity sha1-wj6RtxAkKscMN/HhzaknTMOb8vQ=
 
-lodash@^4.16.2, lodash@^4.17.11, lodash@^4.17.13, lodash@^4.17.14, lodash@^4.17.4, lodash@^4.17.5, lodash@^4.3.0, lodash@^4.5.0, lodash@^4.6.0, lodash@^4.6.1:
+lodash@^4.0.1, lodash@^4.16.2, lodash@^4.17.11, lodash@^4.17.13, lodash@^4.17.14, lodash@^4.17.4, lodash@^4.17.5, lodash@^4.3.0, lodash@^4.5.0, lodash@^4.6.0, lodash@^4.6.1:
   version "4.17.15"
   resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.15.tgz#b447f6670a0455bbfeedd11392eff330ea097548"
   integrity sha512-8xOcRHvCjnocdS5cpwXQXVzmmh5e5+saE2QGoeQmbKmRS6J3VQppPOIt0MnmE+4xlZoumy0GPG0D0MVIQbNA1A==
@@ -3562,6 +3567,11 @@ markerwithlabel@^2.0.1:
   resolved "https://registry.yarnpkg.com/markerwithlabel/-/markerwithlabel-2.0.2.tgz#fa6aee4abb0ee553e24e2b708226858f58b8729e"
   integrity sha512-C/cbm1A0h/u54gwHk5ZJNdUU3V3+1BbCpRPMsMyFA7vF4yL+aB4rWpxACz29TpQ+cTg6/iQroExh0PMSRGtQFg==
 
+material-colors@^1.2.1:
+  version "1.2.6"
+  resolved "https://registry.yarnpkg.com/material-colors/-/material-colors-1.2.6.tgz#6d1958871126992ceecc72f4bcc4d8f010865f46"
+  integrity sha512-6qE4B9deFBIa9YSpOc9O0Sgc43zTeVYbgDT5veRKSlB2+ZuHNoVVxA1L/ckMUayV9Ay9y7Z/SZCLcGteW9i7bg==
+
 math-random@^1.0.1:
   version "1.0.4"
   resolved "https://registry.yarnpkg.com/math-random/-/math-random-1.0.4.tgz#5dd6943c938548267016d4e34f057583080c514c"
@@ -4622,6 +4632,18 @@ react-clone-referenced-element@^1.0.1:
   resolved "https://registry.yarnpkg.com/react-clone-referenced-element/-/react-clone-referenced-element-1.1.0.tgz#9cdda7f2aeb54fea791f3ab8c6ab96c7a77d0158"
   integrity sha512-FKOsfKbBkPxYE8576EM6uAfHC4rnMpLyH6/TJUL4WcHUEB3EUn8AxPjnnV/IiwSSzsClvHYK+sDELKN/EJ0WYg==
 
+react-color@^2.17.3:
+  version "2.17.3"
+  resolved "https://registry.yarnpkg.com/react-color/-/react-color-2.17.3.tgz#b8556d744f95193468c7061d2aa19180118d4a48"
+  integrity sha512-1dtO8LqAVotPIChlmo6kLtFS1FP89ll8/OiA8EcFRDR+ntcK+0ukJgByuIQHRtzvigf26dV5HklnxDIvhON9VQ==
+  dependencies:
+    "@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@^1.0.0:
   version "1.1.2"
   resolved "https://registry.yarnpkg.com/react-deep-force-update/-/react-deep-force-update-1.1.2.tgz#3d2ae45c2c9040cbb1772be52f8ea1ade6ca2ee1"
@@ -4854,6 +4876,13 @@ [email protected]:
     prop-types "^15.6.2"
     scheduler "^0.13.3"
 
+reactcss@^1.2.0:
+  version "1.2.3"
+  resolved "https://registry.yarnpkg.com/reactcss/-/reactcss-1.2.3.tgz#c00013875e557b1cf0dfd9a368a1c3dab3b548dd"
+  integrity sha512-KiwVUcFu1RErkI97ywr8nvx8dNOpT03rbnma0SSalTYjkrPYaEajR4a/MRt6DZ46K6arDRbWMNHF+xH7G7n/8A==
+  dependencies:
+    lodash "^4.0.1"
+
 read-pkg-up@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/read-pkg-up/-/read-pkg-up-2.0.0.tgz#6b72a8048984e0c41e79510fd5e9fa99b3b549be"
@@ -5536,6 +5565,11 @@ tiny-queue@^0.2.1:
   resolved "https://registry.yarnpkg.com/tiny-queue/-/tiny-queue-0.2.1.tgz#25a67f2c6e253b2ca941977b5ef7442ef97a6046"
   integrity sha1-JaZ/LG4lOyypQZd7XvdELvl6YEY=
 
+tinycolor2@^1.4.1:
+  version "1.4.1"
+  resolved "https://registry.yarnpkg.com/tinycolor2/-/tinycolor2-1.4.1.tgz#f4fad333447bc0b07d4dc8e9209d8f39a8ac77e8"
+  integrity sha1-9PrTM0R7wLB9TcjpIJ2POaisd+g=
+
 tmp@^0.0.33:
   version "0.0.33"
   resolved "https://registry.yarnpkg.com/tmp/-/tmp-0.0.33.tgz#6d34335889768d21b2bcda0aa277ced3b1bfadf9"
@@ -5585,7 +5619,7 @@ [email protected]:
 
 "trapilib@git+http://git.onarbooks.com/Klapi/TrapiLib.git":
   version "1.0.7"
-  resolved "git+http://git.onarbooks.com/Klapi/TrapiLib.git#d014c941f51eee158490633ca8942c2b3657d47e"
+  resolved "git+http://git.onarbooks.com/Klapi/TrapiLib.git#3287924baba9643107b341190305d1a0ca060391"
   dependencies:
     expo "^34.0.0-experiment.8"
     prop-types "^15.7.2"