Editor/Systems/SideBar.js

import React from 'react';
import {StyleSheet, View, Text} from 'react-native';
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 TypeHandler from '../Components/TypeHandler.js';

import BaseSystem from './System';




let {
	CoreSystem,
	ViewSystem,
	ViewNode,
	DataTypes
} = Library; 

export default class SideBar extends BaseSystem {
	constructor(CoreSystem, ToolBox){
		super();
		this.CoreSystem = CoreSystem;
		this.ToolBox = ToolBox;
	}


    editNode(text,key){
		this.viewNode.props[key] = text;
		this.forceUpdate();
    }
	render(){
		let ModuleSystem = this.CoreSystem.ModuleSystem;
		let CurrentView = this.CoreSystem.getCurrentView();
		
		let selectedNode = this.ToolBox.selectedNode;
		console.log("TOOLBOX" , this.ToolBox);
		let Structure = {};
		let viewNodeProps = {};

		if (selectedNode) {
			if (selectedNode.isCol && CurrentView.has(selectedNode)) {
				this.ColNode = selectedNode;
				this.RowNode = CurrentView.getParent(this.ColNode);
				if(selectedNode.content && selectedNode.content.value) {
					this.viewNode = selectedNode.content;
					let ctor = ModuleSystem.fromViewNode(this.viewNode);
					viewNodeProps = ModuleSystem.validateProps(ctor, this.viewNode.props);
					Structure = ctor.Inputs;
				}
			} else if(selectedNode.isRow) {
				this.RowNode = selectedNode;
				console.log("SELECTTTTT", selectedNode)
			}
		}
		let data = Object.keys(Structure || {}).map((key,index) => {
			let Editor = TypeHandler(Structure[key]);
			let editorProps = {
				title: key,
				onChange: (value) => {
					console.log(typeof value);
					this.editNode(value, key);
				}
			};
			switch(Structure[key].type){
				case DataTypes.Types.Integer:
					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={index + key + this.ColNode.id}/>
		})
		return (
  			<View>
  				<Text style={SideBarStyle.title}>Side Bar</Text>
  				<View>
  					{this.RowNode && <View key={this.RowNode.id}>
  						<Text>Row</Text>
  						<TextEditor title="Inner Columns" 
  						text={this.RowNode && CurrentView.getColumns(this.RowNode).length +''} 
  						onChange={(cols) => {
  							CurrentView.setColumns(this.RowNode, parseInt(cols))
  							this.forceUpdate();
  						}}/>
  					</View>}			
  					{this.ColNode && <View key={this.ColNode.id}>
  						<Text>Col</Text>
  						<Text>Nothing Yet</Text>
  					</View>}
  				</View>


  				<View style={PropertiesContainer.container}>
  			 		{data}
  			 	</View>


  			 	
  			</View>
  			)
	}
}




const SelectedStyle = StyleSheet.create({
	container:{
		padding:5,
		borderWidth:2,
		borderColor:'green'
	}
})



const PropertiesContainer = StyleSheet.create({
	container:{
		marginTop:20,
		borderTopWidth:0.8,
		borderColor:'#D0D0D0'
	},
	child:{
		padding:10
	}
})

const SideBarStyle = StyleSheet.create({
	container:{
		padding:1,
		flex:1,
		flexDirection:'row'
	},
	title:{
		fontSize:20,
		textAlign:'center',
		fontFamily:'halvetica',
		color:'black',
		borderBottomWidth:1,
		borderBottomColor:'black'
	},
	body:{
		paddingLeft:5,
		paddingRight:5
	}
})