Skip to content

Commit d65e1f8

Browse files
breitningbreitning
committed
update some pages render.
1 parent 294dd8e commit d65e1f8

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

61 files changed

+1196
-623
lines changed

‎source/action/author.js

Lines changed: 23 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -27,28 +27,41 @@ export const getAuthorsByKey = createAction(
2727

2828
export const getAuthorDetail = createAction(
2929
types.FETCH_AUTHOR_DETAIL,
30-
async(name, params)=> {
31-
return await authorService.getAuthorDetail(name, {
30+
async(blogger)=> {
31+
return await authorService.getAuthorDetail(blogger);
32+
},
33+
(blogger)=> {
34+
return {
35+
pending: true,
36+
blogger
37+
}
38+
}
39+
);
40+
41+
export const getAuthorPosts = createAction(
42+
types.FETCH_AUTHOR_POSTS,
43+
async(blogger)=> {
44+
return await authorService.getAuthorPosts(blogger, {
3245
pageIndex: 1
3346
});
3447
},
35-
(name)=> {
48+
(blogger)=> {
3649
return {
3750
pending: true,
38-
name
51+
blogger
3952
}
4053
}
4154
);
4255

43-
export const getAuthorDetailWithPage = createAction(
44-
types.FETCH_AUTHOR_DETAIL_WITHPAGE,
45-
async(name, params)=> {
46-
return await authorService.getAuthorDetail(name, params);
56+
export const getAuthorPostsWithPage = createAction(
57+
types.FETCH_AUTHOR_POSTS_WITHPAGE,
58+
async(blogger, params)=> {
59+
return await authorService.getAuthorPosts(blogger, params);
4760
},
48-
(name)=> {
61+
(blogger)=> {
4962
return {
5063
pending: true,
51-
name
64+
blogger
5265
}
5366
}
5467
);

‎source/action/comment.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -32,3 +32,4 @@ export const getCommentsByPostWithPage = createAction(
3232
}
3333
}
3434
);
35+

‎source/common/index.js

Lines changed: 22 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11

22
import React, {
3-
NetInfo
3+
NetInfo,
4+
Linking
45
} from 'react-native';
56

67
import _ from 'lodash';
@@ -40,6 +41,15 @@ export function getBloggerAvatar(avatarUri){
4041
return avatarResult;
4142
}
4243

44+
export function getBloggerHdpiAvatar(avatarUri){
45+
if (avatarUri && !_.endsWith(avatarUri, ".gif")) {
46+
avatarUri = avatarUri.replace(/face/, 'avatar');
47+
avatarUri = avatarUri.replace(/avatar\/u/, 'avatar\/a');
48+
return { uri: avatarUri };
49+
}
50+
return defaultAvatar;
51+
}
52+
4353
export function filterCodeSnippet(codeText) {
4454
if (codeText && codeText.length) {
4555
codeText = _.trim(codeText);
@@ -85,4 +95,15 @@ export function splitStrToArray(str, char = ',', count = 3){
8595
export function numberValidator(str){
8696
let patten = /^[1-9]*[1-9][0-9]*$/;
8797
return patten.test(str);
98+
}
99+
100+
export function openLink(uri){
101+
Linking.canOpenURL(uri).then(supported=> {
102+
if (supported) {
103+
return Linking.openURL(uri)
104+
}
105+
})
106+
.catch(err=> {
107+
console.warn('cannot open uri: '+ uri);
108+
})
88109
}

‎source/component/button/post.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@ import { ComponentStyles, StyleConfig } from '../../style';
1111

1212
const buttons = [{
1313
title:'评论',
14-
icon: 'ios-chatboxes-outline',
14+
icon: 'ios-text-outline',
1515
action:'onCommentPress',
1616
color: StyleConfig.color_primary
1717
},{

‎source/component/button/single.js

Lines changed: 11 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@ class SingleButton extends Component {
1616
}
1717

1818
renderButtonIcon(){
19-
let { icon = 'ios-menu' } = this.props;
19+
let { icon = 'ios-return-left-outline' } = this.props;
2020
return (
2121
<Icon
2222
name={ icon }
@@ -26,11 +26,18 @@ class SingleButton extends Component {
2626
}
2727

2828
render() {
29-
let { onPress = ()=>null, color = StyleConfig.action_color_primary, position ='left' } = this.props;
29+
let {
30+
onPress = ()=>null,
31+
color = StyleConfig.action_color_primary,
32+
position ='left',
33+
offsetX = StyleConfig.action_offset_x,
34+
offsetY = StyleConfig.action_offset_y
35+
} = this.props;
36+
3037
return (
3138
<ActionButton
32-
offsetY = { StyleConfig.action_offset_y }
33-
offsetX = { StyleConfig.action_offset_x }
39+
offsetY = { offsetY }
40+
offsetX = { offsetX }
3441
size = { StyleConfig.action_size }
3542
position={ position }
3643
buttonColor = { color }

‎source/component/drawerPanel.js

Lines changed: 10 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@ import drawerItems from '../config/drawer';
1818
import { getImageSource } from '../common';
1919
import { CommonStyles, ComponentStyles, StyleConfig } from '../style';
2020

21-
const backgroundImageSource = getImageSource(0);
21+
const backgroundImageSource = getImageSource(1);
2222

2323
class DrawerPanel extends Component {
2424

@@ -53,6 +53,14 @@ class DrawerPanel extends Component {
5353
this.onItemPress(pressItem);
5454
}
5555

56+
onAboutPress(){
57+
let pressItem = {
58+
action: "toAbout",
59+
flag:"about"
60+
};
61+
this.onItemPress(pressItem);
62+
}
63+
5664
componentWillUnmount() {
5765
TimerMixin.clearTimeout(this.timer);
5866
}
@@ -185,7 +193,7 @@ class DrawerPanel extends Component {
185193
<TouchableHighlight
186194
underlayColor ={ StyleConfig.touchable_press_color }
187195
style={[ CommonStyles.p_a_3, styles.border ]}
188-
onPress={ ()=> this.props.router.toAbout() }>
196+
onPress={ ()=> this.onAboutPress() }>
189197
<View style={ [ CommonStyles.flexRow, CommonStyles.flexItemsMiddle ] }>
190198
<View style={ [ CommonStyles.flexRow, CommonStyles.flexItemsCenter, CommonStyles.m_r_3, styles.list_icon] }>
191199
<Icon name={ 'ios-code-outline' }

‎source/component/header/author.js

Lines changed: 68 additions & 75 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ import {
55
Text,
66
Dimensions,
77
ScrollView,
8+
StyleSheet,
89
TouchableOpacity
910
} from 'react-native';
1011

@@ -17,15 +18,13 @@ import { CommonStyles, ComponentStyles, StyleConfig } from '../../style';
1718
import { getImageSource, getBloggerAvatar, decodeHTML } from '../../common';
1819
import Navbar from '../navbar';
1920

20-
2121
class AuthorRender extends Component {
2222

2323
constructor(props) {
2424
super(props);
2525
this.state = {
2626
cover: null
2727
};
28-
2928
this.shouldComponentUpdate = PureRenderMixin.shouldComponentUpdate.bind(this);
3029
}
3130

@@ -55,23 +54,10 @@ class AuthorRender extends Component {
5554
}
5655
}
5756

58-
getAuthorInfo(){
59-
const { author = {} } = this.props;
60-
let authorInfo = {};
61-
if (author && author.id) {
62-
authorInfo.id = author.id;
63-
authorInfo.authorName = decodeHTML(author.author.name);
64-
authorInfo.logo = author.logo;
65-
authorInfo.postcount = author.postcount;
66-
authorInfo.authorAvatar = getBloggerAvatar(author.logo);
67-
authorInfo.updated = moment(author.updated).startOf('minute').fromNow();
68-
}
69-
return authorInfo;
70-
}
71-
7257
renderParallaxScrollComponent(){
7358
return (
7459
<ScrollView
60+
refreshControl = { this.props.refreshControl }
7561
showsVerticalScrollIndicator = {false}
7662
showsHorizontalScrollIndicator = {false}>
7763
</ScrollView>
@@ -80,85 +66,80 @@ class AuthorRender extends Component {
8066

8167
renderParallaxBackground(authorInfo){
8268
return (
83-
<View style={ CommonStyles.headerBackground }>
84-
<Animatable.Image
69+
<View>
70+
<Image
8571
resizeMode="cover"
86-
style={ CommonStyles.headerBackgroundImage }
87-
source={ this.state.cover }
88-
ref={(view)=>{parallaxBackground = view}} >
89-
</Animatable.Image>
90-
<View style={ CommonStyles.headerBackgroundMask }/>
72+
style={ [ComponentStyles.header_img ] }
73+
source={ this.state.cover }>
74+
</Image>
75+
<View style={ [ ComponentStyles.header_backdrop ] }/>
9176
</View>
9277
)
9378
}
9479

95-
renderParallaxForeground(authorInfo){
80+
renderAuthorInfo(){
81+
let { author, avatar } = this.props;
82+
return (
83+
<View style={[ CommonStyles.flexColumn, CommonStyles.flexItemsMiddle, CommonStyles.flexItemsCenter, CommonStyles.m_b_4 ]}>
84+
<Image
85+
style={ [ComponentStyles.avatar, CommonStyles.m_b_2] }
86+
source={ avatar }/>
87+
<Text style={[ CommonStyles.font_md, CommonStyles.text_white, CommonStyles.m_b_2 ]}>
88+
{ author.title }
89+
</Text>
90+
</View>
91+
)
92+
}
93+
94+
renderAuthorMeta(){
95+
let { author, avatar } = this.props;
96+
return (
97+
<View style={ [ ComponentStyles.pos_absolute, CommonStyles.p_x_3, CommonStyles.p_y_2, CommonStyles.flexRow, CommonStyles.flexItemsMiddle, CommonStyles.flexItemsBetween, styles.foreground_meta ] }>
98+
<Text style={ [CommonStyles.text_light, CommonStyles.font_xs] }>
99+
博文数：{ author.postCount }
100+
</Text>
101+
</View>
102+
)
103+
}
104+
105+
renderParallaxForeground(){
106+
let { author } = this.props;
96107

97-
if (authorInfo && authorInfo.id) {
108+
if (author && author.title) {
98109
return (
99-
<Animatable.View
100-
ref={(view)=>{ this.parallaxForeground = view}}
101-
style={ ComponentStyles.headerContainer } >
102-
{
103-
authorInfo.logo?
104-
<Image
105-
style={ ComponentStyles.headerAvatar }
106-
source={ {uri:authorInfo.authorAvatar} }/>
107-
: null
108-
}
109-
110-
<Text style={ ComponentStyles.headerTitleText }>
111-
{ authorInfo.authorName }
112-
</Text>
113-
114-
<View style={ ComponentStyles.headerMetas}>
115-
{
116-
authorInfo.updated?
117-
<Text style={ ComponentStyles.headerMetaText }>
118-
最近：{ authorInfo.updated }
119-
</Text>
120-
:null
121-
}
122-
{
123-
authorInfo.postcount?
124-
<Text style={ ComponentStyles.headerMetaText }>
125-
博文数：{ authorInfo.postcount }
126-
</Text>
127-
:null
128-
}
129-
</View>
130-
</Animatable.View>
110+
<View style = { [ CommonStyles.flexColumn, CommonStyles.flexItemsMiddle, CommonStyles.flexItemsCenter, styles.foreground ] }>
111+
{ this.renderAuthorInfo() }
112+
{ this.renderAuthorMeta() }
113+
</View>
131114
)
132115
}
133-
134-
return null;
135116
}
136117

137-
renderParallaxStickyHeader(authorInfo){
138-
return (
139-
<Navbar
140-
backgroundImage = { this.state.cover }
141-
leftIconName = { "ios-arrow-round-back" }
142-
leftIconOnPress={ ()=>this.props.router.pop() }
143-
title={ authorInfo.authorName||"返回" }/>
144-
);
118+
renderParallaxStickyHeader(){
119+
let { author, avatar } = this.props;
120+
if (author && author.title) {
121+
return (
122+
<Navbar
123+
backgroundImage = { this.state.cover }
124+
leftIconName = { avatar }
125+
leftIconOnPress={ ()=>this.props.router.pop() }
126+
title={ author.title }/>
127+
);
128+
}
145129
}
146130

147131
render() {
148-
149-
let authorInfo = this.getAuthorInfo();
150132

151133
return (
152134
<ParallaxScrollView
153135
headerBackgroundColor="#111"
154-
ref={(view)=>{this.parallaxView = view}}
155136
onScroll={(e) => this.onParallaxViewScroll(e) }
156-
stickyHeaderHeight={ StyleConfig.navbarHeight }
157-
parallaxHeaderHeight={ StyleConfig.parallaxHeaderHeight }
137+
stickyHeaderHeight={ StyleConfig.navbar_height }
138+
parallaxHeaderHeight={ StyleConfig.header_height }
158139
renderScrollComponent={()=> this.renderParallaxScrollComponent()}
159-
renderBackground={() => this.renderParallaxBackground(authorInfo)}
160-
renderForeground={() => this.renderParallaxForeground(authorInfo)}
161-
renderStickyHeader={() => this.renderParallaxStickyHeader(authorInfo)}>
140+
renderBackground={() => this.renderParallaxBackground()}
141+
renderForeground={() => this.renderParallaxForeground()}
142+
renderStickyHeader={() => this.renderParallaxStickyHeader()}>
162143

163144
{ this.props.children }
164145

@@ -167,4 +148,16 @@ class AuthorRender extends Component {
167148
}
168149
}
169150

151+
152+
const styles = StyleSheet.create({
153+
foreground:{
154+
height: StyleConfig.header_height,
155+
paddingTop: StyleConfig.space_4
156+
},
157+
foreground_meta:{
158+
bottom: 0,
159+
backgroundColor:'rgba(0,0,0,0.1)'
160+
}
161+
});
162+
170163
export default AuthorRender;

0 commit comments

Comments
 (0)