Cleanup Editor console errors!

Components/Alignment.js

@@ -31,14 +31,14 @@ export default class Alignment extends React.Component {
 	render() {
 		let iconStyle = styles.iconStyle;
 		return ([
-			<View style={styles.container}>
+			<View style={styles.container} key={'align'}>
 				<Icon name="format-align-left" iconStyle={iconStyle} onClick={() => this.set(0)}/>
 				<Icon name="format-align-center" iconStyle={iconStyle} onClick={() => this.set(1)}/>
 				<Icon name="format-align-right" iconStyle={iconStyle} onClick={() => this.set(2)}/>
 				<Icon name="format-align-justify" iconStyle={iconStyle} onClick={() => this.set(3)}/>
 			</View>,
 
-			<View style={styles.container}>
+			<View style={styles.container} key={'justify'}>
 				<Icon name="vertical-align-top" iconStyle={iconStyle} onClick={() => this.justify(0)}/>
 				<Icon name="vertical-align-center" iconStyle={iconStyle} onClick={() => this.justify(1)}/>
 				<Icon name="vertical-align-bottom" iconStyle={iconStyle} onClick={() => this.justify(2)}/>

Components/BoolEditor.js

@@ -3,7 +3,7 @@ import {View , Text, StyleSheet} from 'react-native';
 import { CheckBox } from 'native-base'
 
 export default function BoolEditor(props) {
-	let [checked, setChecked] = useState(props.checked || '');
+	let [checked, setChecked] = useState(props.checked || false);
 	let title = props.title || "Input";
 	return (
 			<View style={styles.container}>

Systems/Gui.js

@@ -196,7 +196,7 @@ export default class Gui extends BaseSystem {
         let background = view === currentView ?  PageButtons.activePage :(null)
         let textColor = view === currentView ?  PageButtons.selectedText :(null)
         return (
-          <View style={[PageButtons.page , background ] } onClick = {(e) => {
+          <View key={route} style={[PageButtons.page , background ] } onClick = {(e) => {
             console.log(e);
             this.CoreSystem.goto(route);
             this.forceUpdate()
@@ -220,14 +220,10 @@ export default class Gui extends BaseSystem {
 
     return (
       <View style={PageButtons.container}>
-       <View style={{borderRightWidth:"1px",
+        <View style={{borderRightWidth:"1px",
                       borderColor:"#B4b4b4",
-                      background:'white', paddingTop: 4}}>
-         <Button
-          color="white"
-          title={<Icon name='filter' color="#36BBAD" />
-            }
-          />
+                      backgroundColor:'white', paddingTop: 4}}>
+         <Icon name='filter' color="#36BBAD" />
         </View>
         {pages}
 
@@ -253,8 +249,7 @@ const PageButtons = StyleSheet.create({
     width:40
   },
   activePage:{
-    backgroundColor:"#36BBAD",
-    color:"white"
+    backgroundColor:"#36BBAD"
   },
   text:{
     fontSize:14,
@@ -271,7 +266,6 @@ const PageButtons = StyleSheet.create({
 		borderColor:"#B4b4b4",
     backgroundColor:"#F8F8F8",
     cursor:'pointer',
-    textAlign:"center",
     overflow:'hidden',
     width:160,
     height:48,

Systems/ModuleBar.js

@@ -102,7 +102,7 @@ const ModPrev = StyleSheet.create({
 		cursor: 'pointer'
 	},
 	NamespaceName: {
-		fontWeight: 700
+		fontWeight: 'bold'
 	},
 	name:{
 		textAlign:'left',

Systems/SideBar.js

@@ -98,7 +98,7 @@ export default class SideBar extends BaseSystem {
 				editorProps.number = viewNodeProps[key];
 				break;
 			case DataTypes.Types.Boolean:
-				editorProps.checked = viewNodeProps[key];
+				editorProps.checked = viewNodeProps[key] === 'true' || viewNodeProps[key] == true;
 				break;
 			case DataTypes.Types.Text:
 				editorProps.text = viewNodeProps[key];
@@ -162,18 +162,18 @@ export default class SideBar extends BaseSystem {
   			<View>
   				{this.ContainerNode ? 
   				[
-  				<Alignment onSelect={(style) => this.editNodeStyle(selectedNode, style)} />,
-  				<ContainerEditor structure={Structure} 
+  				<Alignment key={'Alignment'} onSelect={(style) => this.editNodeStyle(selectedNode, style)} />,
+  				<ContainerEditor key={'ContainerEditor'} structure={Structure} 
   					nodeProps={nodeProps} 
   					key={this.ContainerNode.id}
   					onChange={(k,v) => this.editNode(selectedNode, v, k)}/>,
 
-  				<View style={PropertiesContainer.container}>
+  				<View style={PropertiesContainer.container} key={'ContentData'}>
   			 		{contentData}
   			 	</View>,
 
-  				<View style={SideBarStyle.title}>
-  					<Text style={{cursor: 'pointer'}} onClick={() => this.toggleAll()}>Show All</Text>
+  				<View key={'ShowAll'}>
+  					<Text style={SideBarStyle.title} onClick={() => this.toggleAll()}>Show All</Text>
   				</View>
   				]
   				: <Text style={{padding: 24}}>Click on elements</Text>}
@@ -201,7 +201,7 @@ export default class SideBar extends BaseSystem {
   							alert("Not working");
   						}}/>
   						<Image  name='near me'
-		  				style={{width: 20, height: 20 , color:'#606060'}}
+		  				style={{width: 20, height: 20}}
 		  				source= {require('../assets/icon.png')}
 		  				containerStyle={{}}
 		  				onClick={() => this.removeNode(this.ContainerNode)}
@@ -255,7 +255,8 @@ const SideBarStyle = StyleSheet.create({
 		fontSize: 12,
 		letterSpacing: 0.5,
 		color: "#BFBFBF",
-		opacity: 1
+		opacity: 1,
+		cursor: 'pointer'
 	},
 	body:{
 		paddingLeft:5,

Systems/ToolBox.js

@@ -67,7 +67,7 @@ export default class ToolBox extends BaseSystem {
 					toolStyle = styles.activeTool;
 				}
 			}
-			return(<View onClick={() => this.selectTool(key) }  style={toolStyle} >
+			return(<View onClick={() => this.selectTool(key) }  style={toolStyle} key={key}>
 				{this.tools[key].render()}
 			</View>)
 		});

Systems/mouse.js

@@ -36,7 +36,6 @@ export default class Mouse extends EventSystem{
 
 	cancel(e) { e.preventDefault();	}
 	listen(){
-		console.log(this)
 		this.container.addEventListener('mousedown', this.handler.bind(this));
 		if(this.isDroppable) {
 			this.container.addEventListener('dragover', this.cancel);

Tools/add.js

@@ -62,16 +62,11 @@ export default class Add extends Tool{
 		}
 
 		return(	
-			<View >
-				<Button 
-				color="#F1F1F1"
-				title={<Icon  name='add'
-				color="#606060"
-				containerStyle={selectStyle}
+			<View>
+				<Icon  name='add'
+					color="#606060"
+					containerStyle={selectStyle}
 	  				/>
-				}
-				/>
-			
 			</View>
 			)
 	}

Tools/select.js

@@ -4,8 +4,8 @@ import React from 'react';
 //import { Icon } from 'react-native-elements'
 import Icon from "react-native-vector-icons/MaterialIcons";
 import Library from 'trapilib/dist/lib';
-console.log("@@@@@@@@@@@@@@@")
-console.log(Icon)
+
+
 let {
 	CoreSystem,
 	ViewSystem,
@@ -70,14 +70,11 @@ export default class Select extends Tool{
 		
 		return(
 			<View>
-				<Button 
-					color="#f1f1f1"
-					title={<Image  name='near me'
-	  				style={{width: 20, height: 20 , color:'#606060'}}
+				<Image  name='near me'
+	  				style={{width: 20, height: 20}}
 	  				source= {this.active ? require('../assets/select.svg') : require('../assets/outline.svg')}
 	  				containerStyle={selectStyle}
-	  				/>}
-	  				/>
+  				/>
 			</View>
 		)
 	}

package.json

@@ -19,7 +19,7 @@
     "react-native-svg": "^9.7.0",
     "react-native-vector-icons": "^6.6.0",
     "react-native-web": "^0.11.4",
-    "trapilib": "http://git.onarbooks.com/Klapi/TrapiLib.git"
+    "trapilib": "file:.yalc/trapilib"
   },
   "devDependencies": {
     "babel-preset-expo": "^5.1.1"

yalc.lock

@@ -2,7 +2,7 @@
   "version": "v1",
   "packages": {
     "trapilib": {
-      "signature": "2832dac8a068f7faecd681dc8e77eb7c",
+      "signature": "c3acdd3366a2db9e98b144423d6bec77",
       "file": true,
       "replaced": "http://git.onarbooks.com/Klapi/TrapiLib.git"
     }