|
|
@@ -1,7 +1,7 @@
|
|
|
import React from 'react';
|
|
|
import {StyleSheet, View, Text} from 'react-native';
|
|
|
import Library from 'trapilib/dist/lib';
|
|
|
-import { TextInput } from 'react-native';
|
|
|
+import { TextInput, Image } from 'react-native';
|
|
|
|
|
|
import TextEditor from '../Components/TextEditor';
|
|
|
// import Numbers from '../Components/Numbers';
|
|
|
@@ -27,79 +27,102 @@ export default class SideBar extends BaseSystem {
|
|
|
this.ToolBox = ToolBox;
|
|
|
}
|
|
|
|
|
|
+ removeNode(node) {
|
|
|
+ let CurrentView = this.CoreSystem.getCurrentView();
|
|
|
+ console.log(node)
|
|
|
+ if (CurrentView.has(node)) {
|
|
|
+ CurrentView.remove(node);
|
|
|
+ }
|
|
|
+ this.forceUpdate();
|
|
|
+ }
|
|
|
|
|
|
- editNode(text,key){
|
|
|
- this.viewNode.props[key] = text;
|
|
|
+ editNode(node, text,key){
|
|
|
+ node.props[key] = text;
|
|
|
this.forceUpdate();
|
|
|
}
|
|
|
+
|
|
|
+ createHandler(Structure, viewNodeProps, key, onChange) {
|
|
|
+ let Editor = TypeHandler(Structure);
|
|
|
+ let editorProps = {
|
|
|
+ title: key,
|
|
|
+ onChange: (value) => {
|
|
|
+ console.log(typeof value);
|
|
|
+ onChange && onChange(value, key)
|
|
|
+ }
|
|
|
+ };
|
|
|
+ switch(Structure.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={key}/>
|
|
|
+ }
|
|
|
+
|
|
|
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 Structure = {},
|
|
|
+ nodeStructure = {};
|
|
|
+ let viewNodeProps = {},
|
|
|
+ nodeProps = {};
|
|
|
+
|
|
|
+ if (selectedNode && CurrentView.has(selectedNode)) {
|
|
|
+ this.ContainerNode = selectedNode;
|
|
|
+ if(selectedNode.content && selectedNode.content.value) {
|
|
|
+ let ctor = ModuleSystem.fromViewNode(selectedNode.content);
|
|
|
+ viewNodeProps = ModuleSystem.validateProps(ctor, selectedNode.content.props);
|
|
|
+ Structure = ctor.Inputs;
|
|
|
}
|
|
|
+ nodeProps = ModuleSystem.validateProps(selectedNode.ctor, selectedNode.props);
|
|
|
+ nodeStructure = selectedNode.ctor.Inputs;
|
|
|
+ } else {
|
|
|
+ this.ContainerNode = null;
|
|
|
}
|
|
|
- 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}/>
|
|
|
- })
|
|
|
+ let contentData = Object.keys(Structure || {}).map((key,index) =>
|
|
|
+ <View key={selectedNode.id + key}>
|
|
|
+ {this.createHandler(Structure[key], viewNodeProps, key, (v, f) =>
|
|
|
+ this.editNode(selectedNode.content, v,f))}
|
|
|
+ </View>
|
|
|
+ )
|
|
|
+ let containerData =Object.keys(nodeStructure || {}).map((key, index) =>
|
|
|
+ <View key={selectedNode.id + key}>
|
|
|
+ {this.createHandler(nodeStructure[key], nodeProps, key, (v,f) =>
|
|
|
+ this.editNode(selectedNode, v, f))}
|
|
|
+ </View>
|
|
|
+ );
|
|
|
return (
|
|
|
<View>
|
|
|
<Text style={SideBarStyle.title}>Side Bar</Text>
|
|
|
<View>
|
|
|
- {this.RowNode && <View key={this.RowNode.id}>
|
|
|
- <Text>Row</Text>
|
|
|
+ {this.ContainerNode && <View key={this.ContainerNode.id}>
|
|
|
+ <Text>Container</Text>
|
|
|
<TextEditor title="Inner Columns"
|
|
|
- text={this.RowNode && CurrentView.getColumns(this.RowNode).length +''}
|
|
|
+ text={this.ContainerNode && CurrentView.getChildren(this.ContainerNode).length +''}
|
|
|
onChange={(cols) => {
|
|
|
- CurrentView.setColumns(this.RowNode, parseInt(cols))
|
|
|
- this.forceUpdate();
|
|
|
+ alert("Not working");
|
|
|
}}/>
|
|
|
- </View>}
|
|
|
- {this.ColNode && <View key={this.ColNode.id}>
|
|
|
- <Text>Col</Text>
|
|
|
- <Text>Nothing Yet</Text>
|
|
|
+ <Image name='near me'
|
|
|
+ style={{width: 20, height: 20 , color:'#606060'}}
|
|
|
+ source= {require('../assets/icon.png')}
|
|
|
+ containerStyle={{}}
|
|
|
+ onClick={() => this.removeNode(this.ContainerNode)}
|
|
|
+ />
|
|
|
</View>}
|
|
|
+ {containerData}
|
|
|
</View>
|
|
|
|
|
|
|
|
|
<View style={PropertiesContainer.container}>
|
|
|
- {data}
|
|
|
+ {contentData}
|
|
|
</View>
|
|
|
|
|
|
|
