|
|
@@ -9,107 +9,108 @@ 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 BlogFeed extends Module {
|
|
|
|
|
|
+export default class BlogFeed extends Module{
|
|
|
constructor(props){
|
|
|
super(props)
|
|
|
- this.isTemplate = true;
|
|
|
-
|
|
|
- this.configure();
|
|
|
-
|
|
|
+ this.configure();
|
|
|
}
|
|
|
|
|
|
-
|
|
|
configure(){
|
|
|
if(this.props.CoreSystem){
|
|
|
let CurrentView = this.props.CoreSystem.getCurrentView();
|
|
|
let node = CurrentView.getNode(this.props.NodeID)
|
|
|
- let children = CurrentView.getChildren(node);
|
|
|
- let base1 = new Node("SS"+ Math.random(), {},new ViewNode("S"+Math.random(), "BaseContainer", {width:375,height:209}))
|
|
|
- let base2 = new Node("SS"+ Math.random(), {},new ViewNode("S"+Math.random(), "BaseContainer", {width:375,height:209}))
|
|
|
- let Image1 = new Node("SS"+ Math.random(), {},new ViewNode("S"+Math.random(), "Image"))
|
|
|
-
|
|
|
- let wrapper = new Node("SS"+ Math.random(), {flexDirection:"row",justifyContent:"space-between",alignItems:"flex-end",height:40},new ViewNode("S"+Math.random(), "BaseContainer", {}))
|
|
|
- let Title = new Node("SS"+ Math.random(), {},new ViewNode("S"+Math.random(), "Text", {text:"This is the post Title",color:"rgba(112, 112, 112, 1)",fontSize:17,fontFamily:"bold"}))
|
|
|
- let BookMark = new Node("SS"+ Math.random(), {},new ViewNode("S"+Math.random(), "Icon", {}))
|
|
|
-
|
|
|
- let subtitle = new Node("SS"+ Math.random(), {height:25},new ViewNode("S"+Math.random(), "Text", {text:"This is the subtitle",color:"rgba(112, 112, 112, 1)",fontSize:14,fontFamily:"thin"}))
|
|
|
- let MainText = new Node("SS"+ Math.random(), {},new ViewNode("S"+Math.random(), "Text", {text:defaultText,color:"rgba(112, 112, 112, 1)",fontSize:14}))
|
|
|
|
|
|
|
|
|
+ let NavContainer = NodeFactory({flexDirection:"row",justifyContent:"space-between",alignItems:'center'},'BaseContainer',{height:64,width:375,backgroundColor:'rgba(0, 84, 230, 1)'});
|
|
|
+ let TitleWrapper = NodeFactory({flexDirection:"row",justifyContent:'center',alignItems:'center'},'BaseContainer',{height:41,width:327});
|
|
|
+ let Title = NodeFactory({width:327},"Text",{fontSize:34,fontFamily:'bold',width:327,text:"Blog Feed"})
|
|
|
+ let PostCont1 = NodeFactory({flexDirection:'column',justifyContent:'center',alignItems:'center'},'BaseContainer',{height:236,width:327});
|
|
|
+ let PostCont2 = NodeFactory({flexDirection:'column',justifyContent:'center',alignItems:'center'},'BaseContainer',{height:236,width:327});
|
|
|
|
|
|
- let wrapperProfile = new Node("SS"+ Math.random(), {flexDirection:"row",height:40},new ViewNode("S"+Math.random(), "BaseContainer", {}))
|
|
|
-
|
|
|
- let ImageProfile = new Node("SS"+ Math.random(), {width:34,height:34},new ViewNode("S"+Math.random(), "Image",{source:require('../Image/assets/profile.png'),width:32,height:32}))
|
|
|
- let ImageWrapper = new Node("SS"+ Math.random(), {flexDirection:"row",justifyContent:"center",alignItems:'center',height:40},new ViewNode("S"+Math.random(), "BaseContainer", {}))
|
|
|
-
|
|
|
- let UserWrapper = new Node("SS"+ Math.random(), {flexDirection:"column",height:40,flexGrow:1},new ViewNode("S"+Math.random(), "BaseContainer", {}))
|
|
|
-
|
|
|
- let user = new Node("SS"+ Math.random(), {height:20},new ViewNode("S"+Math.random(), "Text", {text:"Alexandra papadopoulou ",color:"rgba(112, 112, 112, 1)",fontSize:14,fontFamily:"thin"}))
|
|
|
- let userjob = new Node("SS"+ Math.random(), {height:20},new ViewNode("S"+Math.random(), "Text", {text:"Market Analyst ",color:"rgba(112, 112, 112, 1)",fontSize:14,fontFamily:"thin"}))
|
|
|
-
|
|
|
+ //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 Image1 = new Node("SS"+ Math.random(), {},new ViewNode("S"+Math.random(), "Image"))
|
|
|
|
|
|
- if(!CurrentView.has(base1)) CurrentView.addViewNode(base1 , node );
|
|
|
+ //PostCont 1 Inputs
|
|
|
+ let image1 = NodeFactory({},'Image',{height:142,width:327});
|
|
|
|
|
|
- if(!CurrentView.has(base2.id)) CurrentView.addViewNode( base2 ,node);
|
|
|
- if(!CurrentView.has(Image1.id)) CurrentView.addViewNode(Image1,base1)
|
|
|
-
|
|
|
|
|
|
- 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);
|
|
|
+ let wrapper1 = NodeFactory({},'BaseContainer',{height:91,width:327});
|
|
|
|
|
|
+ let title1 = NodeFactory({},'Text',{text:"This is a titile ",fontFamily:"roboto-black",fontSize:18,color:"rgba(112, 112, 112, 1)"})
|
|
|
+ let subtitle1 = NodeFactory({},'Text',{text:"This is a subtitle",fontFamily:"roboto-black",fontSize:14,color:"rgba(193, 193, 193, 1)"})
|
|
|
+ //Text for now will be converted to date Picker
|
|
|
+ let date1 = NodeFactory({alignSelf:'flex-end'},'Text',{text:"OCTOBER 9, 2019",fontFamily:"roboto-black",fontSize:10,color:"rgba(112, 112, 112, 1)"})
|
|
|
|
|
|
|
|
|
- if(!CurrentView.has(subtitle.id)) {
|
|
|
- CurrentView.addViewNode(subtitle , base2);
|
|
|
-
|
|
|
- }
|
|
|
-
|
|
|
- // #######################
|
|
|
|
|
|
- if(!CurrentView.has(wrapperProfile.id)){
|
|
|
- CurrentView.addViewNode(wrapperProfile,base2);
|
|
|
+ //Post Cont 2 Inputs
|
|
|
+ let image2 = NodeFactory({},'Image',{height:142,width:327});
|
|
|
+
|
|
|
+ let wrapper2 = NodeFactory({},'BaseContainer',{height:91,width:327});
|
|
|
+
|
|
|
+ let title2 = NodeFactory({},'Text',{text:"Thi is a title ",fontFamily:"roboto-black",fontSize:18,color:"rgba(112, 112, 112, 1)"})
|
|
|
+ let subtitle2 = NodeFactory({},'Text',{text:"This is a subtitle ",fontFamily:"roboto-black",fontSize:14,color:"rgba(193, 193, 193, 1)"})
|
|
|
+ //Text for now will be converted to date Picker
|
|
|
+ let date2 = NodeFactory({alignSelf:'flex-end'},'Text',{text:"OCTOBER 9, 2019",fontFamily:"roboto-black",fontSize:10,color:"rgba(112, 112, 112, 1)"})
|
|
|
+
|
|
|
+ //adding Containers
|
|
|
+ if(!CurrentView.has(NavContainer)) CurrentView.addViewNode(NavContainer,node)
|
|
|
+ if(!CurrentView.has(TitleWrapper)) CurrentView.addViewNode(TitleWrapper,node)
|
|
|
+ if(!CurrentView.has(Title)) CurrentView.addViewNode(Title,TitleWrapper)
|
|
|
+ if(!CurrentView.has(PostCont1)) CurrentView.addViewNode(PostCont1,node)
|
|
|
+ if(!CurrentView.has(PostCont2)) {
|
|
|
+ CurrentView.addViewNode(PostCont2,node)
|
|
|
|
|
|
}
|
|
|
|
|
|
- if(!CurrentView.has(ImageWrapper)) CurrentView.addViewNode(ImageWrapper,wrapperProfile);
|
|
|
- if(!CurrentView.has(ImageProfile)) CurrentView.addViewNode(ImageProfile,ImageWrapper);
|
|
|
- if(!CurrentView.has(UserWrapper)) CurrentView.addViewNode(UserWrapper,wrapperProfile);
|
|
|
+ //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 -------------
|
|
|
+
|
|
|
+ // Start of Blog posts PostCont1
|
|
|
+ if(!CurrentView.has(image1)) CurrentView.addViewNode(image1,PostCont1)
|
|
|
+ if(!CurrentView.has(wrapper1)) CurrentView.addViewNode(wrapper1,PostCont1)
|
|
|
+ if(!CurrentView.has(title1)) CurrentView.addViewNode(title1,wrapper1)
|
|
|
+ if(!CurrentView.has(subtitle1)) CurrentView.addViewNode(subtitle1,wrapper1)
|
|
|
+ if(!CurrentView.has(date1)) CurrentView.addViewNode(date1,wrapper1)
|
|
|
+
|
|
|
+ //post Cont 2
|
|
|
+ if(!CurrentView.has(image2)) CurrentView.addViewNode(image2,PostCont2)
|
|
|
+ if(!CurrentView.has(wrapper2)) CurrentView.addViewNode(wrapper2,PostCont2)
|
|
|
+ if(!CurrentView.has(title2)) CurrentView.addViewNode(title2,wrapper2)
|
|
|
+ if(!CurrentView.has(subtitle2)) CurrentView.addViewNode(subtitle2,wrapper2)
|
|
|
+ if(!CurrentView.has(date2)){
|
|
|
+ CurrentView.addViewNode(date2,PostCont2)
|
|
|
+ this.props.CoreSystem.forceUpdate();
|
|
|
+ }
|
|
|
|
|
|
- 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(){
|
|
|
+ render(){
|
|
|
return(
|
|
|
- <View>
|
|
|
|
|
|
+ <View>
|
|
|
|
|
|
</View>
|
|
|
)
|
|
|
- }
|
|
|
+ }
|
|
|
}
|
|
|
|
|
|
-
|
|
|
BlogFeed.Inputs = {
|
|
|
+
|
|
|
+}
|
|
|
|
|
|
+var NodeFactory = function(containerStyle = {}, component, componentStyle = {}){
|
|
|
+ return new Node("SS"+ Math.random(), containerStyle,new ViewNode("S"+Math.random(), component, componentStyle));
|
|
|
}
|
sxoinas12