mobile / YH_RNComponent · Commits

Go to a project

Authored by 孙凯
Commit 4f54a055bb64efc0420b4ee746a475a783420a9c 1 parent 8aa6b56d

全球购 product list UI review by zhanglixia

Inline Side-by-side
Showing 4 changed files with 204 additions and 49 deletions
... ... @@ -17,6 +17,7 @@ import GlobalHomeSwiper from './GlobalHomeSwiper';
import RecommendContentTwo from './RecommendContentTwo';
import RecommendContentFive from './RecommendContentFive';
import RecommendContentOne from './RecommendContentOne';
import ProductFliter from './ProductFliter';
import SmallPic from './SmallPic';
import {getSlicedUrl} from '../../../classify/utils/Utils';
... ... @@ -29,9 +30,11 @@ export default class Home extends Component {
this._onEndReached = this._onEndReached.bind(this);
this._renderFooter = this._renderFooter.bind(this);
this.trigggePullToRefresh = this.trigggePullToRefresh.bind(this);
this.renderSectionHeader = this.renderSectionHeader.bind(this);
this.dataSource = new ListView.DataSource({
rowHasChanged: (r1, r2) => !Immutable.is(r1, r2),
sectionHeaderHasChanged: (s1, s2) => !Immutable.is(s1, s2),
});
}
... ... @@ -56,54 +59,73 @@ export default class Home extends Component {
}
_renderRow(rowData: object, sectionID: number, rowID: number) {
// console.log(rowData.toJS());
if (rowData.get('template_name') == 'focus') {
return (
<GlobalHomeSwiper resource={rowData}/>
);
}else if (rowData.get('template_name') == 'recommend_content_two') {
return (
<RecommendContentTwo resource={rowData}/>
);
}else if (rowData.get('template_name') == 'recommend_content_five') {
return (
<RecommendContentFive
resource={rowData}
// onPressRecommendItem={this.props.onPressRecommendItem}
/>
);
}else if (rowData.get('template_name') == 'recommend_content_one') {
return (
<RecommendContentOne
resource={rowData}
// onPressRecommendItem={this.props.onPressRecommendItem}
/>
);
}else if (rowData.get('template_name') == 'divideImage') {
let data = rowData.get('data').toJS();
let divideImage = getSlicedUrl(data[0].src, width, 20, 2);
if (!divideImage) {return null;}
return (
<Image
source={{uri: divideImage}}
style={{width: width,height: 20}}
resizeMode={'cover'}
></Image>
);
}else if (rowData.get('template_name') == 'small_pic') {
if (sectionID == 'topHeader') {
if (rowData.get('template_name') == 'focus') {
return (
<GlobalHomeSwiper resource={rowData}/>
);
}else if (rowData.get('template_name') == 'recommend_content_two') {
return (
<RecommendContentTwo resource={rowData}/>
);
}else if (rowData.get('template_name') == 'recommend_content_five') {
return (
<RecommendContentFive
resource={rowData}
// onPressRecommendItem={this.props.onPressRecommendItem}
/>
);
}else if (rowData.get('template_name') == 'recommend_content_one') {
return (
<RecommendContentOne
resource={rowData}
// onPressRecommendItem={this.props.onPressRecommendItem}
/>
);
}else if (rowData.get('template_name') == 'divideImage') {
let data = rowData.get('data').toJS();
let divideImage = getSlicedUrl(data[0].src, width, 20, 2);
if (!divideImage) {return null;}
return (
<Image
source={{uri: divideImage}}
style={{width: width,height: 20}}
resizeMode={'cover'}
></Image>
);
}else if (rowData.get('template_name') == 'small_pic') {
return (
<SmallPic
resource={rowData}
// onPressRecommendItem={this.props.onPressRecommendItem}
/>
);
}else if (rowData.get('template_name') == 'paramsGroup') {
let data = rowData.get('data');
return (
<View style={styles.title}>
<Text style={styles.text}>{data.get('title')}</Text>
</View>
);
}
}
return null;
}
renderSectionHeader(sectionData, sectionID) {
if (sectionID == 'productList') {
let {groupInfo} = this.props.data;
return (
<SmallPic
resource={rowData}
<ProductFliter
resource={groupInfo}
// onPressRecommendItem={this.props.onPressRecommendItem}
/>
);
}else if (rowData.get('template_name') == 'paramsGroup') {
let data = rowData.get('data');
return (
<View style={styles.title}>
<Text style={styles.text}>{data.get('title')}</Text>
</View>
);
}
return null;
}
... ... @@ -117,10 +139,13 @@ export default class Home extends Component {
}
render() {
let {list, ptr, isFetching, endReached} = this.props.data;
let dataSource = list.toArray();
let {list, ptr, isFetching, endReached,groupInfo} = this.props.data;
let isPullToRefresh = ptr && isFetching;
let isLoadingMore = dataSource.size != 0 && !ptr && isFetching;
let dataSource = {
topHeader: list.toArray(),
productList: groupInfo,
};
let isLoadingMore = list.toArray().size != 0 && !ptr && isFetching;
return (
<View style={styles.container}>
... ... @@ -129,9 +154,10 @@ export default class Home extends Component {
this.listView = c;
}}
contentContainerStyle={styles.contentContainer}
dataSource={this.dataSource.cloneWithRows(dataSource)}
dataSource={this.dataSource.cloneWithRowsAndSections(dataSource)}
renderRow={this._renderRow}
enableEmptySections={true}
renderSectionHeader={this.renderSectionHeader}
enablePullToRefresh={true}
isOnPullToRefresh={isPullToRefresh}
onRefreshData={() => {
... ... @@ -160,7 +186,7 @@ let styles = StyleSheet.create({
justifyContent: 'center',
height: 39,
width:width,
backgroundColor: 'white',
backgroundColor: '#f0f0f0',
},
text: {
textAlign: 'center',
... ...
'use strict';
import React from 'react';
import ReactNative from 'react-native';
import Immutable, {Map} from 'immutable';
const {
View,
Text,
ListView,
TouchableOpacity,
Dimensions,
StyleSheet,
} = ReactNative;
export default class ProductFliter extends React.Component {
constructor(props) {
super (props);
this._renderRow = this._renderRow.bind(this);
this._renderSeparator = this._renderSeparator.bind(this);
this.dataSource = new ListView.DataSource({
rowHasChanged: (r1, r2) => r1.key != r2.key,
});
this.state = {
selectedIndex: this.props.resource.fliter,
};
}
shouldComponentUpdate(nextProps){
if (Immutable.is(nextProps.resource, this.props.resource) && Immutable.is(nextProps.selectID, this.props.selectID)) {
return false;
} else {
return true;
}
}
_renderRow(rowData, sectionID, rowID) {
let colorStyle = rowID == this.state.selectedIndex ? {color: '#444444'} : {color: '#b0b0b0'};
return (
<TouchableOpacity
activeOpacity={1}
onPress={() => {
this.setState({
selectedIndex: rowID,
});
// this.props.onPressFilter && this.props.onPressFilter(rowID);
}}>
<View key={'row' + rowID} style={styles.rowContainer}>
<Text style={[styles.name, colorStyle]}>{rowData.title}</Text>
</View>
</TouchableOpacity>
);
}
_renderSeparator(sectionID, rowID, adjacentRowHighlighted) {
return (
<View key={'sep' + rowID} style={styles.separator}>
</View>
);
}
render() {
let {resource} = this.props;
let res = resource.list.toJS();
if (res.length == 0 || !res) {
return null;
}
return (
<View style={styles.container}>
<ListView
contentContainerStyle={styles.contentContainer}
enableEmptySections={true}
dataSource={this.dataSource.cloneWithRows(res)}
renderRow={this._renderRow}
renderSeparator={this._renderSeparator}
scrollsToTop={false}
horizontal={true}
showsHorizontalScrollIndicator ={false}
/>
</View>
);
}
}
let {width, height} = Dimensions.get('window');
let styles = StyleSheet.create({
container: {
marginLeft: -1,
width: width + 2,
height: 37,
borderTopColor: 'transparent',
borderBottomColor: '#e5e5e5',
borderWidth: 0.5,
backgroundColor:'white',
},
contentContainer: {
flexDirection: 'row',
},
rowContainer: {
flexDirection: 'row',
justifyContent: 'center',
alignItems: 'center',
width: Math.ceil(width / 5),
height: 37,
backgroundColor:'white',
},
name: {
color: '#b0b0b0',
},
separator: {
width: 0.5,
top: 37 / 4,
height: 37 / 2,
backgroundColor: '#e5e5e5',
},
});
... ...
... ... @@ -66,7 +66,7 @@ function parseProductList(json) {
for (var i = 0; i < list_0.length; i++) {
list.push(list_0[i]);
if (list_0[i].template_name == 'paramsGroup') {
groupInfo = list_0[i];
groupInfo = list_0[i].data.list;
}
}
... ...
... ... @@ -36,6 +36,7 @@ export default function homeReducer(state=initialState, action) {
total,
total_page,
content_code,
groupInfo,
} = action.payload;
let newState = state.set('isFetching', false)
... ... @@ -45,6 +46,7 @@ export default function homeReducer(state=initialState, action) {
.set('content_code', content_code)
.set('total_page', total_page)
.set('total', total)
.setIn(['groupInfo', 'list'], Immutable.fromJS(groupInfo))
return newState;
}
... ...