|
|
|
'use strict';
|
|
|
|
|
|
|
|
import React from 'react';
|
|
|
|
import ReactNative from 'react-native';
|
|
|
|
import ScrollableTabView from 'react-native-scrollable-tab-view';
|
|
|
|
import ImmutablePropTypes from 'react-immutable-proptypes';
|
|
|
|
|
|
|
|
import UserCenterTop from '../user/UserCenterTop';
|
|
|
|
import ListCell from '../home/ListCell';
|
|
|
|
import LoadMoreIndicator from '../../../common/components/LoadMoreIndicator';
|
|
|
|
import UserNavBar from '../user/UserNavBar';
|
|
|
|
|
|
|
|
const {
|
|
|
|
View,
|
|
|
|
Text,
|
|
|
|
ListView,
|
|
|
|
Platform,
|
|
|
|
Dimensions,
|
|
|
|
StyleSheet,
|
|
|
|
Animated,
|
|
|
|
} = ReactNative;
|
|
|
|
|
|
|
|
export default class UserThatNotMe extends React.Component {
|
|
|
|
|
|
|
|
static propTypes = {
|
|
|
|
user: ImmutablePropTypes.contains({
|
|
|
|
avatar: React.PropTypes.string,
|
|
|
|
backgroundImage: React.PropTypes.string,
|
|
|
|
nickName: React.PropTypes.string.isRequired,
|
|
|
|
sign: React.PropTypes.string,
|
|
|
|
}),
|
|
|
|
posts: ImmutablePropTypes.listOf(
|
|
|
|
ImmutablePropTypes.contains({
|
|
|
|
author: ImmutablePropTypes.contains({
|
|
|
|
avatar: React.PropTypes.string,
|
|
|
|
uid: React.PropTypes.number,
|
|
|
|
name: React.PropTypes.string,
|
|
|
|
}),
|
|
|
|
timeago: React.PropTypes.string.isRequired,
|
|
|
|
isOwner: React.PropTypes.bool,
|
|
|
|
isTop: React.PropTypes.bool,
|
|
|
|
isLike: React.PropTypes.bool,
|
|
|
|
title: React.PropTypes.string,
|
|
|
|
desc: React.PropTypes.string,
|
|
|
|
thumbs: ImmutablePropTypes.listOf(
|
|
|
|
ImmutablePropTypes.contains({
|
|
|
|
src: React.PropTypes.string,
|
|
|
|
})
|
|
|
|
),
|
|
|
|
section: ImmutablePropTypes.contains({
|
|
|
|
id: React.PropTypes.number,
|
|
|
|
name: React.PropTypes.string,
|
|
|
|
}),
|
|
|
|
commentCount: React.PropTypes.number,
|
|
|
|
likeCount: React.PropTypes.number,
|
|
|
|
}),
|
|
|
|
),
|
|
|
|
onPressUserAvatar: React.PropTypes.func,
|
|
|
|
onPressComment: React.PropTypes.func,
|
|
|
|
onPressLike: React.PropTypes.func,
|
|
|
|
onPressPosts: React.PropTypes.func,
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
|
|
constructor(props) {
|
|
|
|
super (props);
|
|
|
|
|
|
|
|
this._renderHeader = this._renderHeader.bind(this);
|
|
|
|
this._renderRow = this._renderRow.bind(this);
|
|
|
|
this._renderSectionHeader = this._renderSectionHeader.bind(this);
|
|
|
|
this._renderSeparator = this._renderSeparator.bind(this);
|
|
|
|
this._updateScrollValue = this._updateScrollValue.bind(this);
|
|
|
|
this.dataSource = new ListView.DataSource({
|
|
|
|
rowHasChanged: (r1, r2) => !Immutable.is(r1, r2),
|
|
|
|
sectionHeaderHasChanged: (s1, s2) => !Immutable.is(s1, s2),
|
|
|
|
});
|
|
|
|
|
|
|
|
this.state = {
|
|
|
|
scrollValue: new Animated.Value(0),
|
|
|
|
};
|
|
|
|
}
|
|
|
|
|
|
|
|
componentDidMount() {
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
_renderHeader() {
|
|
|
|
return (
|
|
|
|
<UserCenterTop
|
|
|
|
userInfo={this.props.user}
|
|
|
|
onPressUserAvatar={this.props.onPressUserAvatar}
|
|
|
|
onPressBackgroundImg={this.props.onPressBackgroundImg}
|
|
|
|
/>
|
|
|
|
);
|
|
|
|
}
|
|
|
|
|
|
|
|
_renderSectionHeader(sectionData, sectionID) {
|
|
|
|
switch (sectionID) {
|
|
|
|
case 'posts':
|
|
|
|
return (
|
|
|
|
<View style={styles.sectionHeader}>
|
|
|
|
<Text style={styles.sectionHeaderText}>TA的发布</Text>
|
|
|
|
<View style={styles.sectionHeaderLine}/>
|
|
|
|
</View>
|
|
|
|
);
|
|
|
|
|
|
|
|
default:
|
|
|
|
return null;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
_renderSeparator(sectionID, rowID, adjacentRowHighlighted) {
|
|
|
|
return (
|
|
|
|
<View key={'separator' + sectionID + rowID} style={styles.separator}/>
|
|
|
|
);
|
|
|
|
}
|
|
|
|
|
|
|
|
_renderRow(rowData, sectionID, rowID, highlightRow) {
|
|
|
|
switch (sectionID) {
|
|
|
|
case 'posts':
|
|
|
|
return (
|
|
|
|
<ListCell
|
|
|
|
key={sectionID + rowID}
|
|
|
|
data={rowData}
|
|
|
|
onPressPost={(url) => {
|
|
|
|
this.props.onPressPost && this.props.onPressPost(url);
|
|
|
|
}}
|
|
|
|
onPressAvatar={(url) => {
|
|
|
|
this.props.onPressAvatar && this.props.onPressAvatar(url);
|
|
|
|
}}
|
|
|
|
onPressSectionTag={() => {
|
|
|
|
this.props.onPressSectionTag && this.props.onPressSectionTag(rowData.get('section').toJS());
|
|
|
|
}}
|
|
|
|
onPressComment={(url) => {
|
|
|
|
this.props.onPressComment && this.props.onPressComment(url);
|
|
|
|
}}
|
|
|
|
onPressLike={() => {
|
|
|
|
this.props.onPressLike && this.props.onPressLike(rowData);
|
|
|
|
}}
|
|
|
|
/>
|
|
|
|
);
|
|
|
|
default:
|
|
|
|
return null;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
_updateScrollValue(value) {
|
|
|
|
this.state.scrollValue.setValue(value);
|
|
|
|
}
|
|
|
|
|
|
|
|
render() {
|
|
|
|
let {posts, endReached, isRefreshing, isLoadingMore, isFetching, navigationState} = this.props;
|
|
|
|
let dataSource = {
|
|
|
|
posts: posts.toArray(),
|
|
|
|
}
|
|
|
|
|
|
|
|
return (
|
|
|
|
<View style={styles.container}>
|
|
|
|
<ListView
|
|
|
|
ref={(c) => {
|
|
|
|
this.listView = c;
|
|
|
|
}}
|
|
|
|
onScroll={(e) => {
|
|
|
|
const offsetY = e.nativeEvent.contentOffset.y;
|
|
|
|
this._updateScrollValue(offsetY / 150);
|
|
|
|
}}
|
|
|
|
dataSource={this.dataSource.cloneWithRowsAndSections(dataSource)}
|
|
|
|
renderHeader={this._renderHeader}
|
|
|
|
renderRow={this._renderRow}
|
|
|
|
renderSectionHeader={this._renderSectionHeader}
|
|
|
|
renderSeparator={this._renderSeparator}
|
|
|
|
enableEmptySections={true}
|
|
|
|
enablePullToRefresh={false}
|
|
|
|
onEndReached={() => {
|
|
|
|
this.props.onEndReached && this.props.onEndReached();
|
|
|
|
}}
|
|
|
|
renderFooter={()=>{
|
|
|
|
if (endReached) {
|
|
|
|
return <LoadMoreIndicator
|
|
|
|
isVisible={true}
|
|
|
|
text={'没有更多啦'}
|
|
|
|
/>
|
|
|
|
} else {
|
|
|
|
return <LoadMoreIndicator
|
|
|
|
isVisible={isLoadingMore}
|
|
|
|
animating={isFetching}
|
|
|
|
/>
|
|
|
|
}
|
|
|
|
}}
|
|
|
|
/>
|
|
|
|
|
|
|
|
<UserNavBar scrollValue={this.state.scrollValue} channel={this.props.channel}/>
|
|
|
|
|
|
|
|
</View>
|
|
|
|
)
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
let {width, height} = Dimensions.get('window');
|
|
|
|
|
|
|
|
let styles = StyleSheet.create({
|
|
|
|
container: {
|
|
|
|
flex: 1,
|
|
|
|
},
|
|
|
|
sectionHeader: {
|
|
|
|
flexDirection: 'row',
|
|
|
|
height: 46,
|
|
|
|
alignItems: 'center',
|
|
|
|
backgroundColor: 'white',
|
|
|
|
borderTopWidth: 0.5,
|
|
|
|
borderTopColor: '#e0e0e0',
|
|
|
|
},
|
|
|
|
sectionHeaderText: {
|
|
|
|
fontSize: 18,
|
|
|
|
marginLeft: 17,
|
|
|
|
fontFamily: 'Helvetica Light',
|
|
|
|
},
|
|
|
|
sectionHeaderLine: {
|
|
|
|
position: 'absolute',
|
|
|
|
left: 17,
|
|
|
|
bottom: 0,
|
|
|
|
width: width,
|
|
|
|
height: 0.5,
|
|
|
|
backgroundColor: '#e0e0e0',
|
|
|
|
},
|
|
|
|
separator: {
|
|
|
|
height: 0.5,
|
|
|
|
backgroundColor: '#e0e0e0',
|
|
|
|
},
|
|
|
|
fly: {
|
|
|
|
position: 'absolute',
|
|
|
|
right: 20,
|
|
|
|
bottom: 20,
|
|
|
|
},
|
|
|
|
}); |
...
|
...
|
|
