Skip to content

Commit 4803167

Browse files
crazycodeboycrazycodeboy
committed
RepositoryCell.js update to ES6
1 parent fa83e2f commit 4803167

File tree

2 files changed

+111
-112
lines changed

2 files changed

+111
-112
lines changed

‎app/PopularPage.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@ var {
1515
Alert,
1616
View,
1717
} = ReactNative;
18-
var RepositoryCell=require('./RepositoryCell')
18+
import RepositoryCell from './RepositoryCell'
1919
var dismissKeyboard=require('dismissKeyboard')
2020
import RepositoryDetail from './RepositoryDetail'
2121
var FavoriteDao=require('./dao/FavoriteDao')

‎app/RepositoryCell.js

+110-111
Original file line numberDiff line numberDiff line change
@@ -1,122 +1,121 @@
1-
/**
1+
/**
22
*
33
*
44
* @flow
55
*/
66
'use strict';
77

8-
var React = require('react');
9-
var ReactNative = require('react-native');
10-
var {
11-
Image,
12-
Platform,
13-
StyleSheet,
14-
Text,
15-
TouchableHighlight,
16-
TouchableNativeFeedback,
17-
View,
18-
Alert,
19-
} = ReactNative;
20-
var RespositoryCell = React.createClass({
21-
getInitialState(){
22-
return{
23-
isFavorite:this.props.projectModel.isFavorite,
24-
favoriteIcon:this.props.projectModel.isFavorite? require('../res/images/ic_star_border_green_24dp.png'):require('../res/images/ic_star_border_gray_24dp.png'),
25-
// favoritItems:this.props.favoritItems
26-
};
27-
},
28-
componentWillReceiveProps:function(nextProps:Object) {//当从当前页面切换走，再切换回来后
29-
this.setFavoriteState(nextProps.projectModel.isFavorite)
30-
},
31-
setFavoriteState(isFavorite:boolean){
32-
this.props.projectModel.isFavorite=isFavorite;
33-
this.setState({
34-
isFavorite:isFavorite,
35-
favoriteIcon:isFavorite? require('../res/images/ic_star_border_green_24dp.png'):require('../res/images/ic_star_border_gray_24dp.png')
36-
})
37-
},
38-
onPressFavorite(){
39-
this.setFavoriteState(!this.state.isFavorite)
40-
this.props.onFavorite(this.props.projectModel.item,!this.state.isFavorite)
41-
},
42-
render: function() {
43-
var item=this.props.projectModel.item;
44-
var TouchableElement = TouchableHighlight;
45-
// if (Platform.OS === 'android') {
46-
// TouchableElement = TouchableNativeFeedback;
47-
// }
48-
return (
49-
<TouchableElement
50-
onPress={this.props.onSelect}
51-
onShowUnderlay={this.props.onHighlight}
52-
underlayColor='lightgreen'
53-
onHideUnderlay={this.props.onUnhighlight}>
54-
<View style={styles.row}>
55-
<View style={{flexDirection:'row',justifyContent:'space-between'}}>
56-
<Text style={styles.title}>
57-
{item.full_name}
58-
</Text>
8+
import React, {Component} from 'react'
9+
import {
10+
Image,
11+
Platform,
12+
StyleSheet,
13+
Text,
14+
TouchableHighlight,
15+
TouchableNativeFeedback,
16+
View,
17+
Alert,
18+
} from 'react-native'
19+
export default class RespositoryCell extends Component {
20+
constructor(propos) {
21+
super(propos);
22+
this.state = {
23+
isFavorite: this.props.projectModel.isFavorite,
24+
favoriteIcon: this.props.projectModel.isFavorite ? require('../res/images/ic_star_border_green_24dp.png') : require('../res/images/ic_star_border_gray_24dp.png'),
25+
};
26+
}
5927

60-
</View>
61-
<Text style={styles.description}>
62-
{item.description}
63-
</Text>
64-
<View style={{flexDirection:'row',justifyContent:'space-between',}}>
65-
<View style={{flexDirection:'row',alignItems:'center'}}>
66-
<Text style={styles.author}>Author: </Text>
67-
<Image
68-
style={{width:22,height:22,}}
69-
source={{uri: item.owner.avatar_url}}
70-
/>
71-
</View>
72-
<View style={{flexDirection:'row',alignItems:'center'}}>
73-
<Text style={styles.author}>Stars: </Text>
74-
<Text style={styles.author}>
75-
{item.stargazers_count}
76-
</Text>
77-
</View>
78-
{/*<TouchableHighlight onPress={()=>this.props.onFavorite(this.props.item,true)}>*/}
79-
<TouchableHighlight onPress={this.onPressFavorite} underlayColor='transparent'>
80-
<Image
81-
ref='favoriteIcon'
82-
style={{width:26,height:26,}}
83-
source={this.state.favoriteIcon}/>
84-
</TouchableHighlight>
85-
</View>
86-
</View>
87-
</TouchableElement>
88-
);
89-
}
90-
});
28+
componentWillReceiveProps(nextProps) {//当从当前页面切换走，再切换回来后
29+
this.setFavoriteState(nextProps.projectModel.isFavorite)
30+
}
31+
32+
setFavoriteState(isFavorite) {
33+
this.props.projectModel.isFavorite = isFavorite;
34+
this.setState({
35+
isFavorite: isFavorite,
36+
favoriteIcon: isFavorite ? require('../res/images/ic_star_border_green_24dp.png') : require('../res/images/ic_star_border_gray_24dp.png')
37+
})
38+
}
39+
40+
onPressFavorite() {
41+
this.setFavoriteState(!this.state.isFavorite)
42+
this.props.onFavorite(this.props.projectModel.item, !this.state.isFavorite)
43+
}
44+
45+
render() {
46+
var item = this.props.projectModel.item;
47+
var TouchableElement = TouchableHighlight;
48+
return (
49+
<TouchableElement
50+
onPress={this.props.onSelect}
51+
onShowUnderlay={this.props.onHighlight}
52+
underlayColor='lightgreen'
53+
onHideUnderlay={this.props.onUnhighlight}>
54+
<View style={styles.row}>
55+
<View style={{flexDirection: 'row', justifyContent: 'space-between'}}>
56+
<Text style={styles.title}>
57+
{item.full_name}
58+
</Text>
59+
60+
</View>
61+
<Text style={styles.description}>
62+
{item.description}
63+
</Text>
64+
<View style={{flexDirection: 'row', justifyContent: 'space-between',}}>
65+
<View style={{flexDirection: 'row', alignItems: 'center'}}>
66+
<Text style={styles.author}>Author: </Text>
67+
<Image
68+
style={{width: 22, height: 22,}}
69+
source={{uri: item.owner.avatar_url}}
70+
/>
71+
</View>
72+
<View style={{flexDirection: 'row', alignItems: 'center'}}>
73+
<Text style={styles.author}>Stars: </Text>
74+
<Text style={styles.author}>
75+
{item.stargazers_count}
76+
</Text>
77+
</View>
78+
<TouchableHighlight onPress={()=>this.onPressFavorite()} underlayColor='transparent'>
79+
<Image
80+
ref='favoriteIcon'
81+
style={{width: 26, height: 26,}}
82+
source={this.state.favoriteIcon}/>
83+
</TouchableHighlight>
84+
</View>
85+
</View>
86+
</TouchableElement>
87+
);
88+
}
89+
}
90+
;
9191

9292
var styles = StyleSheet.create({
93-
title: {
94-
fontSize: 14,
95-
marginBottom: 2,
96-
color:'#212121'
97-
},
98-
description: {
99-
fontSize: 12,
100-
marginBottom: 2,
101-
color:'#757575'
102-
},
103-
author:{
104-
fontSize: 14,
105-
marginBottom: 2,
106-
color:'#757575'
107-
},
108-
row: {
109-
flex: 1,
110-
backgroundColor: 'white',
111-
padding: 10,
112-
marginLeft: 10,
113-
marginRight: 10,
114-
marginVertical: 5,
115-
borderColor: '#dddddd',
116-
borderStyle: null,
117-
borderWidth: 0.5,
118-
borderRadius: 2,
119-
},
93+
title: {
94+
fontSize: 14,
95+
marginBottom: 2,
96+
color: '#212121'
97+
},
98+
description: {
99+
fontSize: 12,
100+
marginBottom: 2,
101+
color: '#757575'
102+
},
103+
author: {
104+
fontSize: 14,
105+
marginBottom: 2,
106+
color: '#757575'
107+
},
108+
row: {
109+
flex: 1,
110+
backgroundColor: 'white',
111+
padding: 10,
112+
marginLeft: 10,
113+
marginRight: 10,
114+
marginVertical: 5,
115+
borderColor: '#dddddd',
116+
borderStyle: null,
117+
borderWidth: 0.5,
118+
borderRadius: 2,
119+
},
120120
});
121121

122-
module.exports = RespositoryCell;

0 commit comments

Comments
 (0)