comment add page

Author: breitning

source/component/bar/blink.js

@@ -25,7 +25,7 @@ class BlinkBar extends Component {
 		let { blink, router, category, id } = this.props;
 		if (router && category && id) {
 			router.toCommentAdd({
-				title: blink.Title,
+				data: blink,
 				category: category,
 				id: id
 			});

source/component/bar/postComment.js

@@ -25,8 +25,8 @@ class PostCommentBar extends Component {
 	onCommentPress(){
 		let { post, router, category, id } = this.props;
 		if (router && category && id) {
-			router.toPostComment({
-				post: post,
+			router.toCommentAdd({
+				data: post,
 				blogger: post.blogger,
 				category: category,
 				id: id

source/component/bar/question.js

@@ -20,7 +20,7 @@ class QuestionBar extends Component {
 		let { question, router, category, id } = this.props;
 		if (router && category && id) {
 			router.toCommentAdd({
-				title: question.Title,
+				data: question,
 				category: category,
 				id: id
 			});

source/component/listview/postList.js

@@ -34,8 +34,6 @@ class PostList extends Component {
 	}
 
 	renderListFooter() {
-		console.info("renderListFooter");
-		console.info(this.props.ui);
 		let { ui } = this.props;
 		if (ui.pagePending) {
 			return <Spinner/>;

source/style/index.js

@@ -55,6 +55,7 @@ export const StyleConfig = {
 	border_width: 0.5,
 	border_radius: 2,
 	border_color: 'rgba(0, 0, 0, 0.05)',
+	panel_bg_color: 'rgba(0, 0, 0, 0.02)',
 	touchable_press_color: 'rgba(0, 0, 0, 0.05)',
 
 	screen_width: width,
@@ -226,7 +227,12 @@ export const ComponentStyles = StyleSheet.create({
 
 	btn_sm:{
 		paddingVertical: StyleConfig.space_1,
-		paddingHorizontal: StyleConfig.space_1
+		paddingHorizontal: StyleConfig.space_1,
+		width: 60
+	},
+
+	btn_icon: {
+		width: StyleConfig.icon_size * 2 
 	},
 
 	btn_block:{
@@ -407,7 +413,7 @@ export const ComponentStyles = StyleSheet.create({
 	},
 
 	panel_container:{
-		backgroundColor: 'rgba(0,0,0,0.02)',
+		backgroundColor: StyleConfig.panel_bg_color,
 		paddingVertical: StyleConfig.space_2,
 		paddingHorizontal: StyleConfig.space_3,
 		flexDirection:'row',
@@ -458,6 +464,10 @@ export const ComponentStyles = StyleSheet.create({
 		fontSize: StyleConfig.font_sm,
 		fontStyle: 'italic',
 		fontWeight:'bold'
+	},
+
+	panel_bg:{
+		backgroundColor: StyleConfig.panel_bg_color
 	}
 });
 

source/view/commentAdd.js

@@ -5,7 +5,7 @@ import {
   Image,
   TextInput,
   StyleSheet,
-  TouchableHighlight
+  TouchableOpacity
 } from 'react-native';
 
 import { bindActionCreators } from 'redux';
@@ -32,17 +32,51 @@ class CommentAddPage extends Component {
   }
 
   onCommentSendPress(){
-
+    this.props.router.pop();
   }
 
   renderNavbar(){
     return (
       <Navbar
         title={ navTitle }
         leftIconName = { "ios-arrow-round-back" }
-        leftIconOnPress={ ()=>this.props.router.pop() }
-        rightIconName = "ios-send-outline"
-        rightIconOnPress={ ()=>this.onCommentSendPress() }/>
+        leftIconOnPress={ ()=>this.props.router.pop() }/>
+    )
+  }
+
+  renderSourceAuthor(data){
+    return (
+      <View style={[ CommonStyles.flexRow, CommonStyles.flexItemsMiddle, CommonStyles.m_b_2]}>
+        <Image ref={view => this.imgView=view}
+          style={ [ ComponentStyles.avatar_mini, CommonStyles.m_r_2] }
+          source={ {uri:data.Avatar} }>
+        </Image>
+        <Text style={ [ CommonStyles.text_gray, CommonStyles.font_xs ] }>
+          { data.Author }
+        </Text>
+      </View>
+    )
+  }
+
+
+  renderSourceContent(data){
+    let sourceContent = data.Title || data.Content;
+    return (
+      <View>
+          <Text style={[ CommonStyles.text_black, CommonStyles.font_sm, CommonStyles.line_height_sm ]}>
+            { sourceContent }
+          </Text>
+      </View>
+    )
+  }
+
+  renderSource(){
+    let { data } = this.props; 
+    return (
+      <View style={[ CommonStyles.p_a_3, ComponentStyles.panel_bg ]}>
+        { this.renderSourceAuthor(data) }
+        { this.renderSourceContent(data) }
+      </View>
     )
   }
 
@@ -63,11 +97,60 @@ class CommentAddPage extends Component {
       )
   }
 
+  renderUserInfo(){
+    return (
+         <View style={[ CommonStyles.flexRow, CommonStyles.flexItemsMiddle ]}>
+            <Image ref={view => this.imgView=view}
+              style={ [ ComponentStyles.avatar_mini, CommonStyles.m_r_2] }
+              source={ {uri: 'http://123.56.135.166/cnblog/public/img/common/author.jpg' } }>
+            </Image>
+            <Text style={ [ CommonStyles.text_gray, CommonStyles.font_xs ] }>
+              愤怒的晃晃
+            </Text>
+        </View>
+    )
+  }
+
+
+  renderSendButton(){
+    return (
+      <TouchableOpacity
+            style={[ ComponentStyles.btn, ComponentStyles.btn_sm, ComponentStyles.btn_danger_outline ]}
+            onPress={()=>this.onCommentSendPress()}>
+            <Text style={[ComponentStyles.btn_text, CommonStyles.text_danger, CommonStyles.font_xs]}>
+              提交
+            </Text>
+        </TouchableOpacity>
+    )
+  }
+
+  renderCommentOp(){
+    return (
+        <View style={[ CommonStyles.flexRow, CommonStyles.flexItemsMiddle, CommonStyles.flexItemsBetween, CommonStyles.p_a_3, ComponentStyles.panel_bg ]}>
+          { this.renderUserInfo() }
+          { this.renderSendButton() }
+        </View>
+    )
+  }
+
+  renderCommentMessage(){
+    return (
+      <View style={[CommonStyles.p_a_4]}>
+        <Text style={[ CommonStyles.font_xs, CommonStyles.text_gray, CommonStyles.text_center ]}>
+          请输入评论内容
+        </Text>
+      </View>
+    )
+  }
+
   render() {
     return (
       <View style={ ComponentStyles.container }>
         { this.renderNavbar() }
+        { this.renderSource() }
         { this.renderCommentInput() }
+        { this.renderCommentOp() }
+        { this.renderCommentMessage() }
       </View>
     );
   }
@@ -76,7 +159,7 @@ class CommentAddPage extends Component {
 const styles = StyleSheet.create({
   input:{
     width: StyleConfig.screen_width - ( StyleConfig.space_3 * 2 ),
-    height: StyleConfig.screen_height / 3,
+    height: StyleConfig.screen_height / 5,
     textAlign: "left", 
     textAlignVertical: "top"
   }