Skip to content

Commit 70dbd1c

Browse files
crazycodeboycrazycodeboy
committed
FavoritePage.js update to ES6
1 parent 0e40f93 commit 70dbd1c

File tree

2 files changed

+155
-163
lines changed

2 files changed

+155
-163
lines changed

‎app/FavoritePage.js

+155-162
Original file line numberDiff line numberDiff line change
@@ -3,171 +3,164 @@
33
* @flow
44
*/
55
'use strict';
6-
var React = require('react')
7-
var ReactNative = require('react-native')
8-
var {
9-
ActivityIndicator,
10-
ListView,
11-
Platform,
12-
StyleSheet,
13-
RefreshControl,
14-
Text,
15-
View,
16-
} = ReactNative;
17-
var RepositoryCell=require('./RepositoryCell')
18-
var dismissKeyboard=require('dismissKeyboard')
19-
var RepositoryDetail=require('./RepositoryDetail')
20-
var FavoriteDao=require('./dao/FavoriteDao')
21-
var ProjectModel=require('./model/ProjectModel')
22-
var NavigationBar=require('./NavigationBar')
23-
// var API_URL ='https://api.github.com/search/repositories?q=ios&sort=stars';
24-
var API_URL ='https://api.github.com/search/repositories?q=stars:>1&sort=stars'
6+
import React, {Component} from 'react'
7+
import {
8+
ListView,
9+
Platform,
10+
StyleSheet,
11+
RefreshControl,
12+
View,
13+
} from 'react-native'
14+
import RepositoryCell from './RepositoryCell'
15+
import RepositoryDetail from './RepositoryDetail'
16+
import FavoriteDao from './dao/FavoriteDao'
17+
import ProjectModel from './model/ProjectModel'
18+
import NavigationBar from './NavigationBar'
2519
var favoriteDao = new FavoriteDao()
26-
var FavoritePage=React.createClass({
27-
getInitialState: function(){
28-
return{
29-
isLoading:false,
30-
isLodingFail:false,
31-
dataSource:new ListView.DataSource({
32-
rowHasChanged:(row1,row2)=>row1!==row2,
33-
}),
34-
filter:'',
35-
};
36-
},
37-
componentDidMount:function(){
38-
this.loadData(true);
39-
},
40-
componentWillReceiveProps:function(nextProps:Object) {//当从当前页面切换走，再切换回来后
41-
this.loadData(false);
42-
},
43-
loadData:function(isShowLoading:boolean){
44-
if(isShowLoading)
45-
this.setState({
46-
isLoading:true,
47-
isLodingFail:false,
48-
});
49-
favoriteDao.getAllItems().then((items)=>{
50-
var resultData=[];
51-
for(var i=0,len=items.length;i<len;i++){
52-
resultData.push(new ProjectModel(items[i],true));
53-
}
54-
this.setState({
55-
isLoading:false,
56-
isLodingFail:false,
57-
dataSource:this.getDataSource(resultData),
58-
});
59-
}).catch((error)=>{
60-
this.setState({
61-
isLoading:false,
62-
isLodingFail:true,
63-
});
64-
});
65-
},
66-
onRefresh :function() {
67-
this.loadData(true);
68-
},
69-
getDataSource:function(items:Array<any>):ListView.DataSource{
70-
return this.state.dataSource.cloneWithRows(items);
71-
},
72-
onSelectRepository:function(projectModel:Object) {
73-
var belongNavigator=this.props.homeComponent.refs.navFavorite;
74-
var item=projectModel.item;
75-
belongNavigator.push({
76-
title:item.full_name,
77-
component:RepositoryDetail,
78-
params:{
79-
projectModel:projectModel,
80-
},
81-
});
82-
},
83-
onFavorite(item:Object,isFavorite:boolean){
84-
if(isFavorite){
85-
favoriteDao.saveFavoriteItem(item.id.toString(),JSON.stringify(item));
86-
}else {
87-
favoriteDao.removeFavoriteItem(item.id.toString());
20+
export default class FavoritePage extends Component {
21+
constructor(propos) {
22+
super(propos);
23+
this.state = {
24+
isLoading: false,
25+
isLodingFail: false,
26+
dataSource: new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2}),
27+
filter: ''
28+
};
8829
}
89-
},
90-
renderRow:function(
91-
projectModel:Object,
92-
sectionID:number|string,
93-
rowID:number|string,
94-
){
95-
return(
96-
<RepositoryCell
97-
key={projectModel.item.id}
98-
onFavorite={this.onFavorite}
99-
isFavorite={true}
100-
onSelect={()=>this.onSelectRepository(projectModel)}
101-
projectModel={projectModel}/>
102-
);
103-
},
104-
renderSeparator: function(
105-
sectionID: number | string,
106-
rowID: number | string,
107-
adjacentRowHighlighted: boolean
108-
) {
109-
var style = styles.rowSeparator;
110-
if (adjacentRowHighlighted) {
111-
style = [style, styles.rowSeparatorHide];
30+
31+
componentDidMount() {
32+
this.loadData(true);
11233
}
113-
return (
114-
<View key={'SEP_' + sectionID + '_' + rowID} style={style}/>
115-
);
116-
},
11734

118-
render() {
119-
var content=
120-
<ListView
121-
ref="listView"
122-
style={styles.listView}
123-
renderRow={this.renderRow}
124-
enableEmptySections={true}
125-
//renderSeparator={this.renderSeparator}
126-
dataSource={this.state.dataSource}
127-
refreshControl={
128-
<RefreshControl
129-
//style={{paddingTop:64}}
130-
refreshing={this.state.isLoading}
131-
onRefresh={()=>this.onRefresh()}
132-
tintColor="#ff0000"
133-
title="Loading..."
134-
titleColor="#00ff00"
135-
colors={['#ff0000', '#00ff00', '#0000ff']}
136-
progressBackgroundColor="#ffff00"
137-
/>}
138-
/>;
139-
var navigationBar=Platform.OS==="android"?
140-
<NavigationBar
141-
leftButtonIcon={require('../res/images/ic_menu_white_24dp.png')}
142-
onLeftButtonClick={()=>this.props.drawer.openDrawer()}
143-
title='Favorite'/>:
144-
<NavigationBar
145-
title='Favorite'/>;
146-
return (
147-
<View style={styles.container} >
148-
{navigationBar}
149-
{content}
150-
</View>
151-
);
152-
}
153-
});
35+
componentWillReceiveProps(nextProps) {//当从当前页面切换走，再切换回来后
36+
this.loadData(false);
37+
}
38+
39+
loadData(isShowLoading) {
40+
if (isShowLoading)
41+
this.setState({
42+
isLoading: true,
43+
isLodingFail: false,
44+
});
45+
favoriteDao.getAllItems().then((items)=> {
46+
var resultData = [];
47+
for (var i = 0, len = items.length; i < len; i++) {
48+
resultData.push(new ProjectModel(items[i], true));
49+
}
50+
this.setState({
51+
isLoading: false,
52+
isLodingFail: false,
53+
dataSource: this.getDataSource(resultData),
54+
});
55+
}).catch((error)=> {
56+
this.setState({
57+
isLoading: false,
58+
isLodingFail: true,
59+
});
60+
});
61+
}
62+
63+
onRefresh() {
64+
this.loadData(true);
65+
}
66+
67+
getDataSource(items) {
68+
return this.state.dataSource.cloneWithRows(items);
69+
}
70+
71+
onSelectRepository(projectModel) {
72+
// var belongNavigator=this.props.homeComponent.refs.navFavorite;
73+
var item = projectModel.item;
74+
this.props.navigator.push({
75+
title: item.full_name,
76+
component: RepositoryDetail,
77+
params: {
78+
projectModel: projectModel,
79+
},
80+
});
81+
}
82+
83+
onFavorite(item, isFavorite) {
84+
if (isFavorite) {
85+
favoriteDao.saveFavoriteItem(item.id.toString(), JSON.stringify(item));
86+
} else {
87+
favoriteDao.removeFavoriteItem(item.id.toString());
88+
}
89+
}
90+
91+
renderRow(projectModel, sectionID, rowID) {
92+
return (
93+
<RepositoryCell
94+
key={projectModel.item.id}
95+
onFavorite={(e)=>this.onFavorite(e)}
96+
isFavorite={true}
97+
onSelect={()=>this.onSelectRepository(projectModel)}
98+
projectModel={projectModel}/>
99+
);
100+
}
101+
102+
renderSeparator(sectionID, rowID, adjacentRowHighlighted) {
103+
var style = styles.rowSeparator;
104+
if (adjacentRowHighlighted) {
105+
style = [style, styles.rowSeparatorHide];
106+
}
107+
return (
108+
<View key={'SEP_' + sectionID + '_' + rowID} style={style}/>
109+
);
110+
}
111+
112+
render() {
113+
var content =
114+
<ListView
115+
ref="listView"
116+
style={styles.listView}
117+
renderRow={(e)=>this.renderRow(e)}
118+
enableEmptySections={true}
119+
//renderSeparator={this.renderSeparator}
120+
dataSource={this.state.dataSource}
121+
refreshControl={
122+
<RefreshControl
123+
//style={{paddingTop:64}}
124+
refreshing={this.state.isLoading}
125+
onRefresh={()=>this.onRefresh()}
126+
tintColor="#ff0000"
127+
title="Loading..."
128+
titleColor="#00ff00"
129+
colors={['#ff0000', '#00ff00', '#0000ff']}
130+
progressBackgroundColor="#ffff00"
131+
/>}
132+
/>;
133+
var navigationBar = Platform.OS === "android" ?
134+
<NavigationBar
135+
leftButtonIcon={require('../res/images/ic_menu_white_24dp.png')}
136+
onLeftButtonClick={()=>this.props.drawer.openDrawer()}
137+
title='Favorite'/> :
138+
<NavigationBar
139+
title='Favorite'/>;
140+
return (
141+
<View style={styles.container}>
142+
{navigationBar}
143+
{content}
144+
</View>
145+
);
146+
}
147+
};
154148
var styles = StyleSheet.create({
155-
container: {
156-
flex:1,
157-
alignItems: 'stretch',
158-
// backgroundColor:'red'
159-
},
160-
listView:{
161-
marginTop:Platform.OS==="ios"?-20:0,
162-
},
163-
separator: {
164-
height: 1,
165-
backgroundColor: '#eeeeee',
166-
},
167-
rowSeparator: {
168-
backgroundColor: 'rgba(0, 0, 0, 0.1)',
169-
height: 1,
170-
marginLeft: 4,
171-
},
149+
container: {
150+
flex: 1,
151+
alignItems: 'stretch',
152+
// backgroundColor:'red'
153+
},
154+
listView: {
155+
marginTop: Platform.OS === "ios" ? -20 : 0,
156+
},
157+
separator: {
158+
height: 1,
159+
backgroundColor: '#eeeeee',
160+
},
161+
rowSeparator: {
162+
backgroundColor: 'rgba(0, 0, 0, 0.1)',
163+
height: 1,
164+
marginLeft: 4,
165+
},
172166
});
173-
module.exports=FavoritePage;

‎app/RepositoryCell.js

-1
Original file line numberDiff line numberDiff line change
@@ -47,7 +47,6 @@ var RespositoryCell = React.createClass({
4747
// }
4848
return (
4949
<TouchableElement
50-
ref='test'
5150
onPress={this.props.onSelect}
5251
onShowUnderlay={this.props.onHighlight}
5352
underlayColor='lightgreen'

0 commit comments

Comments
 (0)