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';
let {
	CoreSystem,
	ViewSystem,
	ViewNode
} = Library; 

export default class SideBar{
	constructor(CoreSystem){
		this.CoreSystem = CoreSystem;
	}

	onUpdate(fn){
		this.__onUpdate = fn
	}

	forceUpdate(props){
    	this.__onUpdate && this.__onUpdate(props);
  	}	

  	switchTools(toolName){
  		//will be a switch function
  	}
  	someFunction(){

  	}
  	getStyle(style) {
          if (typeof style === 'number') {
            return ReactNativePropRegistry.getByID(style);
          }
          return style;
     }


    editNode(text,key){
		this.viewNode.props[key] = text;
		this.forceUpdate();
    }
	render(){
		
		let tool = this.tool;
		let ModuleSystem = this.CoreSystem.ModuleSystem;
		let CurrentView = this.CoreSystem.getCurrentView();
		let Routing = this.CoreSystem.Routing;
		let Structure = {};
		if(tool){
			if(tool.selectedNode && tool.selectedNode.isCol)
			{
				this.ColNode = tool.selectedNode;
				this.RowNode = CurrentView.getParent(this.ColNode);
				//console.log("ROWNODE" , this.RowNode);
				//console.log("ColNode" , this.ColNode);
				//console.log("viewNode" , this.viewNode);

				if(tool.selectedNode.content && tool.selectedNode.content.value){
					this.viewNode = tool.selectedNode.content;				
					Structure = ModuleSystem.fromViewNode(this.viewNode).Inputs;
				}
			}	
		}
		console.log("###################")
		console.log(Structure)
		let data = Object.keys(Structure || {}).map((key) => {
			console.log("@@@@@@ from here")
			console.log(Structure[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)} />
				default:
					//Must create a generic Vuiew Component
					return (<View></View>)
			}

		})
		console.log("ROW NODE DATA DATA" , this.RowNode , this.RowNode && CurrentView.getColumns(this.RowNode).length);
		return (
  			<View>
  				<Text style={SideBarStyle.title}>Side Bar</Text>
  				<View>
  					<Text>Container style</Text>
  					{this.RowNode && <View>
  						<Text>Row</Text>
  						<TextEditor title="Inner Columns" 
  						text={this.RowNode && CurrentView.getColumns(this.RowNode).length +''} 
  						onChange={(cols) => {
  							console.log(cols, "COLS");
  							CurrentView.setColumns(this.RowNode, parseInt(cols))
  							this.forceUpdate();
  						}}/>
  					</View>}			
  					<View>
  						<Text>Col</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
	}
})