mobile / YH_RNComponent · Commits

Go to a project

Authored by shixiang
Commit fe726261e664d5e2b1f18df441f52103c3616d41 1 parent 02114908

添加 分类全部品类逻辑 

review 于良
Inline Side-by-side
Showing 4 changed files with 203 additions and 22 deletions
'use strict';
import React, {Component} from 'react';
import {getSlicedUrl} from '../../utils/Utils';
import ReactNative, {
View,
Text,
... ... @@ -20,6 +22,7 @@ export default class CategoryList extends Component {
super(props);
this.renderRow = this.renderRow.bind(this);
this.renderSeparator=this.renderSeparator.bind(this);
this.subRenderSeparator=this.subRenderSeparator.bind(this);
this._pressLeftRow=this._pressLeftRow.bind(this);
this.dataSource = new ListView.DataSource({rowHasChanged: (r1, r2) => !immutable.is(r1, r2)});
this.subRenderRow=this.subRenderRow.bind(this);
... ... @@ -54,7 +57,7 @@ export default class CategoryList extends Component {
return (
<TouchableOpacity onPress={() => this.props.pressSubCateRow(rowData.toJS())}>
<View style={styles.subRow} >
<Text style={styles.title} numberOfLines={1}>
<Text style={styles.subTitle} numberOfLines={1}>
{selectText}
</Text>
</View>
... ... @@ -64,12 +67,19 @@ export default class CategoryList extends Component {
renderRow(rowData, sectionID, rowID, highlightRow) {
let selectText = rowData.get('category_name');
let newSrc = getSlicedUrl(rowData.get("sort_ico"), 27, 27, 2);
return (
<TouchableOpacity onPress={() => this._pressLeftRow(rowData.toJS(),rowID)}>
<View style={styles.row} >
<Image style={styles.logo_icon} source={{uri: newSrc}} />
<Text style={styles.title} numberOfLines={1}>
{selectText}
</Text>
{
this.props.currentCateId==rowID&&this.state.offsetx<0?
<Image style={styles.select_icon} source={require('../../images/category_select_icon.png')}/> :null
}
<Image style={styles.arrow} source={require('../../images/shared_enterbuttom_normal.png')}/>
</View>
</TouchableOpacity>
... ... @@ -83,6 +93,12 @@ export default class CategoryList extends Component {
</View>
);
}
subRenderSeparator(sectionID, rowID, adjacentRowHighlighted) {
return (
<View key={'sep' + rowID} style={styles.subSeparator}>
</View>
);
}
render() {
let {categoryList} = this.props;
... ... @@ -91,8 +107,9 @@ export default class CategoryList extends Component {
if(categoryList.get(this.props.currentChannelId)){
cateList=categoryList.get(this.props.currentChannelId).toArray();
}
if(cateList[0]){
subCateList=categoryList.get(this.props.currentChannelId).get(this.props.currentCateId).get('sub').toArray();
if(categoryList.get(this.props.currentChannelId).get(this.props.currentCateId)){
let currentCate=categoryList.get(this.props.currentChannelId).get(this.props.currentCateId);
subCateList=currentCate.get('sub').toArray();
}
return (
<View style={styles.container}>
... ... @@ -109,7 +126,7 @@ export default class CategoryList extends Component {
dataSource={this.dataSource.cloneWithRows(subCateList)}
enableEmptySections={true}
renderRow={this.subRenderRow}
renderSeparator={this.renderSeparator}
renderSeparator={this.subRenderSeparator}
scrollsToTop={false}
/>
</View>
... ... @@ -118,7 +135,8 @@ export default class CategoryList extends Component {
}
let {width, height} = Dimensions.get('window');
let rowHeight=70;
let subRowHeight=60;
let styles = StyleSheet.create({
container: {
flex: 1,
... ... @@ -128,12 +146,12 @@ let styles = StyleSheet.create({
backgroundColor: 'white',
},
contentContainer: {
backgroundColor: '#f4f4f4',
backgroundColor: 'white',
width: width,
},
subContentContainer: {
// position: 'absolute',
backgroundColor: '#e0e0e0',
backgroundColor: '#f4f4f4',
width: width/2,
height: height - 37,
... ... @@ -141,18 +159,18 @@ let styles = StyleSheet.create({
row: {
flexDirection: 'row',
alignItems: 'center',
height: 50,
height: rowHeight,
width: width,
paddingLeft: 15,
backgroundColor: '#f4f4f4',
backgroundColor: 'white',
},
subRow: {
flexDirection: 'row',
alignItems: 'center',
height: 40,
height: subRowHeight,
width: width,
paddingLeft: 15,
backgroundColor: '#e0e0e0',
backgroundColor: '#f4f4f4',
},
separator: {
width: width,
... ... @@ -160,11 +178,35 @@ let styles = StyleSheet.create({
height: 1,
backgroundColor: '#e5e5e5',
},
subSeparator:{
width: width,
height: 1,
backgroundColor: '#e4e4e4',
},
title: {
flex: 1,
fontSize: 17,
color: '#444444',
},
subTitle: {
flex: 1,
fontSize: 17,
color: '#e0e0e0',
},
logo_icon:{
marginLeft:4,
marginRight:8,
width: 27,
height: 27,
},
select_icon: {
position: 'absolute',
left: width/2-6,
top:rowHeight/2-6,
width: 6,
height: 12,
},
arrow: {
marginRight: 8,
width: 12,
... ...
... ... @@ -28,19 +28,23 @@ export default class ChannelFliter extends React.Component {
this.state = {
filters: [
{
name: 'boy',
name: 'Boy',
value:'boy',
isSelect: false,
},
{
name: 'girl',
name: 'Girl',
value:'girl',
isSelect: false,
},
{
name: 'kids',
name: 'Kids',
value:'kids',
isSelect: false,
},
{
name: 'lifestyle',
name: 'Lifestyle',
value:'lifestyle',
isSelect: false,
},
],
... ... @@ -66,7 +70,7 @@ export default class ChannelFliter extends React.Component {
selectedIndex: rowID,
filters,
});
this.props.onChannelPressFliter && this.props.onChannelPressFliter(rowData.name);
this.props.onChannelPressFliter && this.props.onChannelPressFliter(rowData.value);
}}>
<View key={'row' + rowID} style={styles.rowContainer}>
<Text style={[styles.name, colorStyle]}>{rowData.name}</Text>
... ... @@ -108,7 +112,7 @@ let styles = StyleSheet.create({
container: {
marginLeft: -1,
width: width + 2,
height: 37,
height: 50,
borderTopColor: 'transparent',
borderBottomColor: '#e5e5e5',
borderWidth: 0.5,
... ... @@ -122,7 +126,7 @@ let styles = StyleSheet.create({
justifyContent: 'center',
alignItems: 'center',
width: Math.ceil(width / 4),
height: 37,
height: 50,
backgroundColor:'white',
},
name: {
... ... @@ -130,8 +134,8 @@ let styles = StyleSheet.create({
},
separator: {
width: 0.5,
top: 37 / 4,
height: 37 / 2,
top: 50 / 4,
height: 50 / 2,
backgroundColor: '#e5e5e5',
},
});
... ...
... ... @@ -2,7 +2,7 @@
import ReactNative from 'react-native';
import CategoryService from '../../services/CategoryService';
import Immutable, {Map} from 'immutable';
const {
SET_TYPE,
... ... @@ -23,7 +23,8 @@ export function getCategory() {
dispatch(getCategoryRequest());
return new CategoryService(app.host).getCategoryList('0')
.then(json => {
dispatch(getCategorySuccess(json));
let payload=parseCategoryList(json);
dispatch(getCategorySuccess(payload));
})
.catch(error => {
dispatch(getCategoryFailure(error));
... ... @@ -31,6 +32,140 @@ export function getCategory() {
};
}
function parseCategoryList(json) {
if(!json){
return;
}
let boy = json && json.boy ? json.boy : [];
let girl = json && json.girl ? json.girl : [];
let kids = json && json.kids ? json.kids : [];
let lifestyle = json && json.lifestyle ? json.lifestyle : [];
let newBoy=[];
let newGirl=[];
let newKids=[];
let newLifestyle=[];
//男
// for (let i in boy)
boy.map((item, i) => {
// let item=boy[i];
let newBoySub=[];
let all={
category_name: '全部'+item.category_name,
category_id: item.category_id,
parent_id: item.parent_id,
relation_parameter:item.relation_parameter,
node_count:item.node_count,
};
if(item.sub){
newBoySub=[all,...item.sub];
}else{
newBoySub.push(all);
}
newBoy.push({
sub:newBoySub,
category_name:item.category_name,
category_id:item.category_id,
parent_id:item.parent_id,
relation_parameter:item.relation_parameter,
sort_ico:item.sort_ico,
node_count:item.node_count,
});
});
//女
girl.map((item, i) => {
let newGirlSub=[];
let all={
category_name: '全部'+item.category_name,
category_id: item.category_id,
parent_id: item.parent_id,
relation_parameter:item.relation_parameter,
node_count:item.node_count,
};
if(item.sub){
newGirlSub=[all,...item.sub];
}else{
newGirlSub.push(all);
}
newGirl.push({
sub:newGirlSub,
category_name:item.category_name,
category_id:item.category_id,
parent_id:item.parent_id,
relation_parameter:item.relation_parameter,
sort_ico:item.sort_ico,
node_count:item.node_count,
});
});
//kid
kids.map((item, i) => {
let newKidsSub=[];
let all={
category_name: '全部'+item.category_name,
category_id: item.category_id,
parent_id: item.parent_id,
relation_parameter:item.relation_parameter,
node_count:item.node_count,
};
if(item.sub){
newKidsSub=[all,...item.sub];
}else{
newKidsSub.push(all);
}
newKids.push({
sub:newKidsSub,
category_name:item.category_name,
category_id:item.category_id,
parent_id:item.parent_id,
relation_parameter:item.relation_parameter,
sort_ico:item.sort_ico,
node_count:item.node_count,
});
});
//家居
lifestyle.map((item, i) => {
let newLifestyleSub=[];
let all={
category_name: '全部'+item.category_name,
category_id: item.category_id,
parent_id: item.parent_id,
relation_parameter:item.relation_parameter,
node_count:item.node_count,
};
if(item.sub){
newLifestyleSub=[all,...item.sub];
}else{
newLifestyleSub.push(all);
}
newLifestyle.push({
sub:newLifestyleSub,
category_name:item.category_name,
category_id:item.category_id,
parent_id:item.parent_id,
relation_parameter:item.relation_parameter,
sort_ico:item.sort_ico,
node_count:item.node_count,
});
});
return {
boy:newBoy,
girl:newGirl,
kids:newKids,
lifestyle:newLifestyle,
};
}
export function getCategoryRequest() {
return {
type: GET_CATEGORY_REQUEST,
... ...