Fix Sidebar hide all

App.css

@@ -6,6 +6,9 @@
   top: 0;
   width: 100%;
 }*/
+* {
+    font-family: thin;
+}
 .main {
   flex-direction: column;
   width: 100vw;

Components/Alignment.js

@@ -2,7 +2,7 @@ import React, { useState } from 'react';
 import {View , Text, TextInput, Button,StyleSheet} from 'react-native';
 import { Icon } from 'react-native-elements'
 
-export default class TextEditor extends React.Component {
+export default class Alignment extends React.Component {
 	constructor(props) {
 		super(props);
 	}

Components/ContainerEditor.js

@@ -0,0 +1,90 @@
+import React, { useState } from 'react';
+import {View , Text, TextInput, Button,StyleSheet} from 'react-native';
+import { Icon } from 'react-native-elements'
+
+import TypeHandler from './TypeHandler.js';
+import Library from 'trapilib/dist/lib';
+
+let { DataTypes } = Library;
+export default class ContainerEditor extends React.Component {
+	constructor(props) {
+		super(props);
+	}
+
+    createHandler(Structure, viewNodeProps, key, onChange, title) {
+    	let Editor = TypeHandler(Structure);
+		let editorProps = {
+			title: title || key,
+			onChange: (value) => {
+				onChange && onChange(value, key)
+			}
+		};
+
+
+		switch(Structure.type){
+			case DataTypes.Types.Array:
+				editorProps.value = viewNodeProps[key];
+				break;
+			case DataTypes.Types.Integer:
+			case DataTypes.Types.Real:
+			case DataTypes.Types.Bool:
+				editorProps.number = viewNodeProps[key];
+				break;
+			case DataTypes.Types.Text:
+				editorProps.text = viewNodeProps[key];
+				break;
+			default:
+				//Must create a generic Vuiew Component
+				return (<View></View>)
+		}
+
+		return <Editor {...editorProps} key={key}/>
+    }
+    
+    update(key, val) {
+    	this.props.onChange && this.props.onChange(key, val);
+    }
+
+	render() {
+		let {
+			structure,
+			nodeProps
+		} = this.props;
+		return (
+			<View style={styles.container}>
+				<View style={styles.row}>
+					{this.createHandler(structure, nodeProps, 'width', (val) => this.update('width', val), 'W')}
+					{this.createHandler(structure, nodeProps, 'height', (val) => this.update('height', val), 'H')}
+				</View>
+			</View>
+		);
+	}
+}
+
+const styles = StyleSheet.create({
+	container:{
+		padding:15,
+		flexDirection: 'column',
+		justifyContent: 'space-around',
+		borderBottomColor: '#B4B4B4',
+        borderBottomWidth: 1
+	},
+	row: {
+		flexDirection: 'row',
+		justifyContent: 'space-around'
+	},
+
+	defaultInput: {
+		marginTop:6,
+		borderWidth:1,
+		width:200
+	},
+	title: {
+
+	},
+	iconStyle: {
+		fontSize: 18,
+		opacity: 0.6,
+		cursor: 'pointer'
+	}
+})

Components/Numbers.js

@@ -10,10 +10,6 @@ export default function Numbers(props) {
 		<View style={styles.container}>
 			<Text style={styles.title}>{title}</Text>
 			<TextInput 
-
-
-				
-					
 					onChangeText={(number) => {
 						try{
 							number = parseInt(number);
@@ -26,7 +22,7 @@ export default function Numbers(props) {
 					}}
 					keyboardType={'numeric'}
     				value={number.toString()}
-    				style={[{outline:'none',background:"#FFFFFF"},styles.defaultInput]} 
+    				style={[styles.defaultInput]} 
 
     				/>
 		</View>
@@ -35,27 +31,22 @@ export default function Numbers(props) {
 }
 
 
-/*
-
-width: 62px;
-height: 21px;
-background: #FFFFFF 0% 0% no-repeat padding-box;
-border-radius: 14px;
-opacity: 1;
-*/
-
 const styles = StyleSheet.create({
 	container:{
 		padding:10,
 		flex:1,
-		
+		flexDirection: 'row',
+		justifyContent:'space-between',
 		opacity:1
 	},
 	defaultInput: {
 		width:62,
 		height:21,
 		borderWidth:1,
+		borderColor: '#00000030',
 		borderRadius:14,
+		paddingLeft: 10,
+		paddingRight: 10
 											
 	}
 })

Systems/Environment.js

@@ -105,11 +105,11 @@ export default class Environment extends BaseSystem {
 	          	</div>
 	          </View>
           	<View style={[styles.row,styles.button]}>
-	          	<View style={{width:150,height:38,background: "#F9F9F9",borderRadius:8,alignItems:'center',justifyContent:'center',marginTop:10 }}>
+	          	<View style={{width:150,height:38,backgroundColor: "#F9F9F9",borderRadius:8,alignItems:'center',justifyContent:'center',marginTop:10 }}>
              
                 <Icon  name='add'
                   color="#FFFFFF"
-                  containerStyle={{height:27,width:30,background:'#36BBAD',borderRadius:22}}
+                  containerStyle={{height:27,width:30,backgroundColor:'#36BBAD',borderRadius:22}}
                    onPress={() => this.addRow()}
                 />
               </View>

Systems/Gui.js

@@ -256,8 +256,6 @@ const PageButtons = StyleSheet.create({
     height:48,
   },
   addNew:{
-
-    color:"white",
     backgroundColor:"#D6D6D6",
     cursor:'pointer',
     width:160,

Systems/SideBar.js

@@ -5,6 +5,7 @@ import { TextInput, Image, Button } from 'react-native';
 
 import TextEditor from '../Components/TextEditor';
 import Alignment from '../Components/Alignment';
+import ContainerEditor from '../Components/ContainerEditor';
 
 // import Numbers from '../Components/Numbers';
 // import ColorEditor from '../Components/ColorEditor';
@@ -38,8 +39,12 @@ export default class SideBar extends BaseSystem {
 		super();
 		this.CoreSystem = CoreSystem;
 		this.ToolBox = ToolBox;
+		this.showAllData = false;
+	}
+	toggleAll() {
+		this.showAllData = !this.showAllData;
+		this.forceUpdate();
 	}
-
 	import() {
 		let CurrentView = this.CoreSystem.getCurrentView();
 		let text = window.prompt("Feed me plz");
@@ -120,7 +125,6 @@ export default class SideBar extends BaseSystem {
 			this.ContainerNode = selectedNode;
 			if(selectedNode.content && selectedNode.content.value) {
 				let ctor = ModuleSystem.fromViewNode(selectedNode.content);
-				
 				styles = ctor.Styles;
 				viewNodeProps = ModuleSystem.validateProps(ctor, selectedNode.content.props);
 				Structure = ctor.Inputs;
@@ -154,9 +158,27 @@ export default class SideBar extends BaseSystem {
 
 		return (
   			<View>
-  				<Alignment onSelect={(style) => this.editNodeStyle(selectedNode, style)} />
+  				{this.ContainerNode ? 
+  				[
+  				<Alignment onSelect={(style) => this.editNodeStyle(selectedNode, style)} />,
+  				<ContainerEditor structure={Structure} 
+  					nodeProps={nodeProps} 
+  					key={this.ContainerNode.id}
+  					onChange={(k,v) => this.editNode(selectedNode, v, k)}/>,
 
+  				<View style={PropertiesContainer.container}>
+  			 		{contentData}
+  			 	</View>,
+
+  				<View style={SideBarStyle.title}>
+  					<Text style={{cursor: 'pointer'}} onClick={() => this.toggleAll()}>Show All</Text>
+  				</View>
 
+  				]
+  				: <Text>Click on elements</Text>}
+
+  				{this.showAllData ?
+  				<View>
   				{StyleData.length > 0 ? (
   				<View key={Math.random()}>
   					<select onChange={(event) => {
@@ -191,8 +213,8 @@ export default class SideBar extends BaseSystem {
   				<View style={PropertiesContainer.container}>
   			 		{contentData}
   			 	</View>
-
-
+  			 	</View>
+  			 	: null}
   			 	
   			</View>
   			)
@@ -211,7 +233,6 @@ const SelectedStyle = StyleSheet.create({
 })
 
 
-
 const PropertiesContainer = StyleSheet.create({
 	container:{
 		marginTop:20,
@@ -229,13 +250,12 @@ const SideBarStyle = StyleSheet.create({
 		flex:1,
 		flexDirection:'row',
 	},
-	title:{
-		fontSize:20,
-		textAlign:'center',
-		fontFamily:'halvetica',
-		color:'black',
-		borderBottomWidth:1,
-		borderBottomColor:'black'
+	title: {
+		padding: 24,
+		fontSize: 12,
+		letterSpacing: 0.5,
+		color: "#BFBFBF",
+		opacity: 1
 	},
 	body:{
 		paddingLeft:5,

yalc.lock

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

yarn.lock

@@ -5717,7 +5717,7 @@ [email protected]:
   integrity sha512-yaOH/Pk/VEhBWWTlhI+qXxDFXlejDGcQipMlyxda9nthulaxLZUNcUqFxokp0vcYnvteJln5FNQDRrxj3YcbVw==
 
 "trapilib@file:.yalc/trapilib":
-  version "1.1.1-91bcddc5"
+  version "1.1.1-ce5781e3"
   dependencies:
     expo "^34.0.0-experiment.8"
     prop-types "^15.7.2"
@@ -5729,7 +5729,7 @@ [email protected]:
 
 "trapilib@http://git.onarbooks.com/Klapi/TrapiLib.git":
   version "1.1.1"
-  resolved "http://git.onarbooks.com/Klapi/TrapiLib.git#012e5e20b494eb5bf997fc930c15605187f04bf2"
+  resolved "http://git.onarbooks.com/Klapi/TrapiLib.git#2483ec815cc353814029997cf029820293bbd0c9"
   dependencies:
     expo "^34.0.0-experiment.8"
     prop-types "^15.7.2"