TrapiLib/modules/BlogPost/index.js

import React from 'react';
import Module from '../../lib/Module';
import { View , StyleSheet , Text} from 'react-native';
import Types from '../../lib/Types';

import BaseContainer from '../BaseContainer/index';
import ImageComp from '../Image/index';
import TextComp from '../Text/index';

import { ViewNode, Node } from '../../lib/systems/ViewSystem';

/*let base1 = new Node("SS"+ Math.random(), {},new ViewNode("S"+Math.random(), "BaseContainer",  {width:320,height:209}))
let base2 = new Node("SS"+ Math.random(), {},new ViewNode("S"+Math.random(), "BaseContainer",  {width:320,height:209}))
let Image1 = new Node("SS"+ Math.random(), {},new ViewNode("S"+Math.random(), "Image",  {width:320,height:209}))
let Text1 = new Node("SS"+ Math.random(), {},new ViewNode("S"+Math.random(), "Text", {text:"hi there"}))*/
const defaultText = "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla eget sapien justo. Nunc justo nunc, tristique sollicitudin sodales et, rhoncus vel augue. Mauris vel elit turpis. Vivamus hendrerit faucibus tortor, eget molestie turpis mattis vel. Cras maximus nibh vitae euismod lobortis. Sed iaculis quis lectus non rhoncus. Quisque non purus vel risus venenatis convallis eu at turpis. Cras accumsan quam eu dolor dignissim accumsan. Vestibulum sed orci facilisis, lacinia nibh vitae, egestas massa. Integer sit amet dui velit. Suspendisse ut nibh massa. Fusce condimentum semper odio, et hendrerit nisi venenatis consequat. Nam sed nibh eros. Nulla facilisi."

export default class BlogPost extends Module {

	constructor(props){
		super(props)
		this.isTemplate = true;
		
		this.id = props.ModuleID;
		this.nextNumber = (function* () {
			let i = 0;
			do{
				i++;
				yield i;
			}while(true);
		})();
		this.NodeFactory = NodeFactory.bind(this);
		
		this.configure();	
	}


	configure(){
		if(this.props.CoreSystem){
			let CurrentView = this.props.View; // this.props.CoreSystem.getCurrentView();
		 	let node = CurrentView.getNode(this.props.NodeID)
		 	let children = CurrentView.getChildren(node);

		 	// let NavContainer = NodeFactory({flexDirection:"row",justifyContent:"space-between",alignItems:'center'},'BaseContainer',{height:64,width:375,backgroundColor:'rgba(0, 84, 230, 1)'});

		 	//NavContainer Inputs
		 	// let navIcon = NodeFactory({},'Icon',{name:"reorder",color:'rgba(255, 255, 255, 1)'})
		 	// let navTitle = NodeFactory({},'Text',{text:"XDi",color:'rgba(255, 255, 255, 1)',fontSize:25})
		 	// let navProfile =  NodeFactory({},'Icon',{name:"perm-identity",color:'rgba(255, 255, 255, 1)'})
		 	/////////////////////////
		 	let BackIcon = this.NodeFactory({},'Icon',{name:"keyboard-backspace",color:'rgba(255, 255, 255, 1)'});
		 	let IconContainer = this.NodeFactory({justifyContent:'flex-end', height: 48, width: 58},'BaseContainer',{});


			let base1 = new Node("SS"+ this.nextNumber.next().value, {})
			let base2 = new Node("SS"+ this.nextNumber.next().value, {flex: 1, paddingTop: 24, paddingBottom: 24})
			let Image1 = new Node("SS"+ this.nextNumber.next().value, {alignItems:'flex-start'},new ViewNode("S"+this.nextNumber.next().value, "Image"))
			
			let wrapper = new Node("SS"+ this.nextNumber.next().value, { marginLeft:24, marginRight:24,flexDirection:"row",justifyContent:"space-between",alignItems:"flex-end"})
			let Title = new Node("SS"+ this.nextNumber.next().value, {},new ViewNode("S"+this.nextNumber.next().value, "Text", {text:"This is the post Title",color:"rgba(112, 112, 112, 1)",fontSize:24,fontFamily:"roboto-regular"}))
		 	let BookMark = new Node("SS"+ this.nextNumber.next().value, {},new ViewNode("S"+this.nextNumber.next().value, "Icon", {}))

		 	let subtitle = new Node("SS"+ this.nextNumber.next().value, {marginLeft:24, marginRight:24},new ViewNode("S"+this.nextNumber.next().value, "Text", {text:"This is the subtitle",color:"rgba(193,193,193,1)", fontSize:14,fontFamily:"roboto-medium"}))
		 	let MainText = new Node("SS"+ this.nextNumber.next().value, {marginLeft:24, marginRight:24},new ViewNode("S"+this.nextNumber.next().value, "Text", {text:defaultText, color:"rgba(112, 112, 112, 1)", fontSize:14, fontFamily: 'roboto-regular'}))
		 	


		 	let wrapperProfile = new Node("SS"+ this.nextNumber.next().value, {marginLeft:24, marginRight:24, flexDirection:"row", paddingTop:24, paddingBottom: 24})
			
		 	let ImageWrapper = new Node("SS"+ this.nextNumber.next().value, {flexDirection:"row",justifyContent:"flex-end"}, new ViewNode("S"+this.nextNumber.next().value, "BaseContainer",  {width:34}))
		 	let ImageProfile = new Node("SS"+ this.nextNumber.next().value, {},new ViewNode("S"+this.nextNumber.next().value, "Image",{source:require('../Image/assets/profile.png'),width:32,height:32}))
			
		 	let UserWrapper = new Node("SS"+ this.nextNumber.next().value, {marginLeft:4,flexDirection:"column",height:40,flexGrow:1})
			
		 	let user = new Node("SS"+ this.nextNumber.next().value, {height:20},new ViewNode("S"+this.nextNumber.next().value, "Text", {text:"Alexandra papadopoulou ",color:"rgba(112, 112, 112, 1)",fontSize:12,fontFamily:"roboto-regular"}))
		 	let userjob = new Node("SS"+ this.nextNumber.next().value, {height:20},new ViewNode("S"+this.nextNumber.next().value, "Text", {text:"MARKET ANALYST",color:"rgba(112, 112, 112, 1)",fontSize:10,fontFamily:"roboto-light", letterSpacing: 1.5}))
		 	

		 // 	if(!CurrentView.has(NavContainer)) CurrentView.addViewNode(NavContainer,node);
			// //adding Children To NavContainer
		
		 // 	if(!CurrentView.has(navIcon))  CurrentView.addViewNode(navIcon,NavContainer)
		 // 	if(!CurrentView.has(navTitle))  CurrentView.addViewNode(navTitle,NavContainer)
		 // 	if(!CurrentView.has(navProfile))  CurrentView.addViewNode(navProfile,NavContainer)
		 		

		 	// --------------------- This is the end of Top Nav -------------

		 	console.log("MATCHCHECK ", CurrentView.has(base1))
		 	if(!CurrentView.has(base1)) CurrentView.addViewNode(base1, node);
		 	
		 	if(!CurrentView.has(base2.id)) CurrentView.addViewNode(base2, node);
		 	if(!CurrentView.has(Image1.id)) CurrentView.addViewNode(Image1, base1);

		 	if(!CurrentView.has(IconContainer.id)) CurrentView.addViewNode(IconContainer, Image1)
		 	if(!CurrentView.has(BackIcon.id)) CurrentView.addViewNode(BackIcon, IconContainer)
			

			if(!CurrentView.has(wrapper.id)) CurrentView.addViewNode(wrapper, base2);
		 		
		 	if(!CurrentView.has(Title.id)) CurrentView.addViewNode(Title, wrapper);
		 	if(!CurrentView.has(BookMark.id)) CurrentView.addViewNode(BookMark, wrapper);



		 	if(!CurrentView.has(subtitle.id)) {
				CurrentView.addViewNode(subtitle , base2);
		 		
		 	}

		 	// #######################

		 	if(!CurrentView.has(wrapperProfile.id)){
		 		CurrentView.addViewNode(wrapperProfile,base2);
		 		
		 	}

		 	if(!CurrentView.has(ImageWrapper)) CurrentView.addViewNode(ImageWrapper,wrapperProfile);
			if(!CurrentView.has(ImageProfile)) CurrentView.addViewNode(ImageProfile,ImageWrapper);
			if(!CurrentView.has(UserWrapper)) CurrentView.addViewNode(UserWrapper,wrapperProfile);


		 	if(!CurrentView.has(user)) CurrentView.addViewNode(user,UserWrapper)
		 	if(!CurrentView.has(userjob)) {
		 		CurrentView.addViewNode(userjob,UserWrapper)
				this.props.CoreSystem.forceUpdate();
		 	};
		 	

		 	if(!CurrentView.has(MainText.id)){
		 		CurrentView.addViewNode(MainText , base2);
		 		this.props.CoreSystem.forceUpdate();
		 	}	
	 	}
	}

	display(){
		return(
			<View>

				
			</View>
			)
	}
}


BlogPost.Inputs = {

}


var NodeFactory = function(containerStyle = {}, component, componentStyle = {}){
	return new Node("SS"+ this.nextNumber.next().value, containerStyle,new ViewNode("S"+this.nextNumber.next().value, component, componentStyle));
}