Editor/Systems/Environment.js

import React from 'react';

import { Button , View, Text, StyleSheet } from 'react-native';
import {Icon} from 'react-native-elements';
import BaseSystem from './System';
import {Node} from 'trapilib/dist/lib/systems/ViewSystem'


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

  addRow(){
    let View = this.CoreSystem.getCurrentView();
    let container = View.getDefaultContainer();
    let node = new Node(Math.random()+ Math.random(), {selected: true})
    console.log(node)
    View.addViewNode(node, container);
    this.forceUpdate();  
  }

  selectRow(row) {
    this.ToolBox.selectNode(row);
    this.forceUpdate();
  }
  selectCol(col) {
    this.ToolBox.selectNode(col);
    this.forceUpdate();
  }

  rowHolders(Rows) {
    return Rows.map((row, index) => {
      let dom = '',
          ref = null;
      try {
        ref = this.CoreSystem.ModuleSystem.getRef(row.id);
        dom = ref.current._reactInternalFiber.child.child.stateNode;
      } catch(e) {}
      console.log("DOM", ref, dom,dom.clientHeight);
      return <View 
          style={[{height: dom.clientHeight}, styles.rowHolderContainer]} 
          onClick={(e) => this.selectRow(row)}>
          <View style={styles.rowHolder}>
            <Text style={styles.rowButton}>{index}</Text>
          </View>
      </View>;
    })
  }

  colHolders(Cols) {
    return Cols.map((col, index) => {
      let dom = '',
          ref = null;
      try {
        ref = this.CoreSystem.ModuleSystem.getRef(col.id);
        dom = ref.current._reactInternalFiber.child.child.stateNode;
      } catch(e) {}
      console.log("DOM", ref, dom,dom.clientHeight);
      return <View 
          style={[{width: dom.clientWidth}, styles.colHolderContainer]} 
          onClick={(e) => this.selectCol(col)}>
          <View style={styles.colHolder}>
            <Text style={styles.colButton}>{index}</Text>
          </View>
      </View>;
    })
  }

	render() {
		let CurrentView = this.CoreSystem.getCurrentView();
		let defaultContainer = CurrentView.getDefaultContainer();
		let Rows = []; //CurrentView.getRows(defaultContainer);
    let Cols = [];
    // Check if selection is Row or Col and find ROW to getColumns
    if(this.ToolBox.selectedNode){
      // let selectedRowNode = this.ToolBox.selectedNode.isRow ? 
      // this.ToolBox.selectedNode : 
      // CurrentView.getParent(this.ToolBox.selectedNode);
      // Cols = CurrentView.getColumns(selectedRowNode);
    }

		return <View style={styles.container}>
          	<View style={styles.row}>
              
            </View>
            <View style={[styles.row, styles.colHolders]}>
              {
              //this.colHolders(Cols)
              }
            </View>
			      <View style={styles.row}>
	          	<View style={[styles.col, styles.rowHolders]}>
	          		{
                  //this.rowHolders(Rows)
                }
	          	</View>
	          	<div ref={this.phoneRef} style={{margin: 'auto'}}>
	          		<View style={[styles.mobileView]}>
	         			  {this.CoreSystem.render()}
	         		  </View>
	          	</div>
	          </View>
          	<View style={[styles.row,styles.button]}>
	          	<View style={{width:150,height:38,background: "#F9F9F9",borderRadius:8,alignItems:'center',justifyContent:'center',marginTop:10 }}>
             
                <Icon  name='add'
                  color="#FFFFFF"
                  containerStyle={{height:27,width:30,background:'#36BBAD',borderRadius:22}}
                   onPress={() => this.addRow()}
                />
              </View>
          	</View>
		</View>
	}
}


const styles = StyleSheet.create({
  container: {
    flex: 1,
    flexDirection: "column"
  },
  mobileView: {
    backgroundColor: 'white',
    flex:1,
    alignSelf: 'stretch'
  },

  row: {
  	flexDirection: "row",
  	//borderWidth: 1
  },
  col: {
  	flexDirection: "column",
  	//borderWidth: 1
  },
  button:{
    flex:1,
    justifyContent:'center',


  },
  rowHolders: {
    padding:4
  },
  colHolders: {
    padding:4,
    justifyContent: 'flex-end'
  },
  rowHolderContainer: {
    justifyContent: 'center'
  },
  colHolderContainer: {
    justifyContent: 'center'
  },
  rowHolder: {
    height: 50,
    width:100,
    backgroundColor: 'green',
    textAlign: 'center'
  },
  colHolder: {
    width:100,
    height: 50,
    backgroundColor: 'purple',
    textAlign: 'center'
  }
});