mobile / YH_RNComponent · Commits

Go to a project

Authored by 于良
Commit a192fcbc7d91228cfa837b3500c6b477e55993f9 1 parent 19013138

品牌品类顶部channel选择优化 review by 草莓

Inline Side-by-side
Showing 16 changed files with 102 additions and 226 deletions
@@ -32,9 +32,7 @@ export default class AllBrandListCell extends React.Component { @@ -32,9 +32,7 @@ export default class AllBrandListCell extends React.Component {
32 let name = data.get('brand_name'); 32 let name = data.get('brand_name');
33 let is_hot = data.get('is_hot'); 33 let is_hot = data.get('is_hot');
34 let is_show_new = data.get('is_show_new'); 34 let is_show_new = data.get('is_show_new');
35 - let shop_id = data.get('shop_id');  
36 - let shop_template_type = data.get('shop_template_type');  
37 - let url = `http://m.yohobuy.com?openby:yohobuy={"action":"go.shop","params":{"shop_id":"${shop_id}","shop_template_type":"${shop_template_type}","name":"${name}"}}`; 35 +
38 return ( 36 return (
39 <TouchableOpacity activeOpacity={0.5} onPress={() => { 37 <TouchableOpacity activeOpacity={0.5} onPress={() => {
40 this.props.onPressSlideItem && this.props.onPressSlideItem(this.props.rowData.toJS()); 38 this.props.onPressSlideItem && this.props.onPressSlideItem(this.props.rowData.toJS());
@@ -15,7 +15,7 @@ import { @@ -15,7 +15,7 @@ import {
15 import {Map} from 'immutable'; 15 import {Map} from 'immutable';
16 import BrandHeader from './BrandHeader'; 16 import BrandHeader from './BrandHeader';
17 import YH_SearchBar from '../../../common/components/YH_SearchBar'; 17 import YH_SearchBar from '../../../common/components/YH_SearchBar';
18 -import ChannelFliter from './ChannelFliter'; 18 +import ChannelSelector from '../../../common/components/ChannelSelector';
19 import AllBrandListCell from './AllBrandListCell'; 19 import AllBrandListCell from './AllBrandListCell';
20 import NewHotBannerListCell from './NewHotBannerListCell'; 20 import NewHotBannerListCell from './NewHotBannerListCell';
21 import BrandSearch from './search/BrandSearch'; 21 import BrandSearch from './search/BrandSearch';
@@ -43,7 +43,7 @@ export default class Brand extends Component { @@ -43,7 +43,7 @@ export default class Brand extends Component {
43 } 43 }
44 44
45 componentWillReceiveProps(nextProps) { 45 componentWillReceiveProps(nextProps) {
46 - if (this.props.brandChannelFliter != nextProps.brandChannelFliter) { 46 + if (this.props.selectedChannelId != nextProps.selectedChannelId) {
47 this.listView.scrollTo({x: 0, y: 0, animated: false}); 47 this.listView.scrollTo({x: 0, y: 0, animated: false});
48 } 48 }
49 } 49 }
@@ -55,7 +55,7 @@ export default class Brand extends Component { @@ -55,7 +55,7 @@ export default class Brand extends Component {
55 this.needScrollSection = sectionID; 55 this.needScrollSection = sectionID;
56 item.count = ScrollCount(sectionID,this.sectionData); 56 item.count = ScrollCount(sectionID,this.sectionData);
57 this.props.setInitialListSize && this.props.setInitialListSize(item.count); 57 this.props.setInitialListSize && this.props.setInitialListSize(item.count);
58 - this.props.setBrandData && this.props.setBrandData(this.sectionDataKey,this.props.brandChannelFliter); 58 + this.props.setBrandData && this.props.setBrandData(this.sectionDataKey, this.props.selectedChannelId);
59 } else { 59 } else {
60 this.listView.scrollTo({x: 0, y: item.y, animated: false}); 60 this.listView.scrollTo({x: 0, y: item.y, animated: false});
61 } 61 }
@@ -66,7 +66,7 @@ export default class Brand extends Component { @@ -66,7 +66,7 @@ export default class Brand extends Component {
66 let {y} = e.nativeEvent.layout; 66 let {y} = e.nativeEvent.layout;
67 if (this.sectionDataKey && this.sectionDataKey[sectionID].y != y) { 67 if (this.sectionDataKey && this.sectionDataKey[sectionID].y != y) {
68 this.sectionDataKey[sectionID].y = y; 68 this.sectionDataKey[sectionID].y = y;
69 - this.props.setBrandData && this.props.setBrandData(this.sectionDataKey,this.props.brandChannelFliter); 69 + this.props.setBrandData && this.props.setBrandData(this.sectionDataKey, this.props.selectedChannelId);
70 if (this.needScrollSection == sectionID) { 70 if (this.needScrollSection == sectionID) {
71 this.listView.scrollTo({x: 0, y, animated: false}); 71 this.listView.scrollTo({x: 0, y, animated: false});
72 } 72 }
@@ -91,7 +91,7 @@ export default class Brand extends Component { @@ -91,7 +91,7 @@ export default class Brand extends Component {
91 </TouchableOpacity> 91 </TouchableOpacity>
92 92
93 <BrandHeader 93 <BrandHeader
94 - brandChannelFliter= {this.props.brandChannelFliter} 94 + selectedChannelId= {this.props.selectedChannelId}
95 reourceForBoy= {this.props.reourceForBoy} 95 reourceForBoy= {this.props.reourceForBoy}
96 reourceForGirl={this.props.reourceForGirl} 96 reourceForGirl={this.props.reourceForGirl}
97 reourceForKid={this.props.reourceForKid} 97 reourceForKid={this.props.reourceForKid}
@@ -131,7 +131,7 @@ export default class Brand extends Component { @@ -131,7 +131,7 @@ export default class Brand extends Component {
131 showSearch, 131 showSearch,
132 isFetching, 132 isFetching,
133 brandFliter, 133 brandFliter,
134 - brandChannelFliter, 134 + selectedChannelId,
135 brandListForBoy, 135 brandListForBoy,
136 brandListForGirl, 136 brandListForGirl,
137 brandListForKid, 137 brandListForKid,
@@ -146,13 +146,13 @@ export default class Brand extends Component { @@ -146,13 +146,13 @@ export default class Brand extends Component {
146 146
147 let data; 147 let data;
148 148
149 - if (brandChannelFliter == 1) { 149 + if (selectedChannelId == 1) {
150 data = brandListForBoy; 150 data = brandListForBoy;
151 - } else if (brandChannelFliter == 2) { 151 + } else if (selectedChannelId == 2) {
152 data = brandListForGirl; 152 data = brandListForGirl;
153 - } else if (brandChannelFliter == 3) { 153 + } else if (selectedChannelId == 3) {
154 data = brandListForKid; 154 data = brandListForKid;
155 - } else if (brandChannelFliter == 4) { 155 + } else if (selectedChannelId == 4) {
156 data = brandListForLifeStyle; 156 data = brandListForLifeStyle;
157 } 157 }
158 158
@@ -192,7 +192,7 @@ export default class Brand extends Component { @@ -192,7 +192,7 @@ export default class Brand extends Component {
192 192
193 return ( 193 return (
194 <View style={styles.container}> 194 <View style={styles.container}>
195 - <ChannelFliter selectID={brandChannelFliter} onChannelPressFliter={this.props.onChannelPressFliter}/> 195 + <ChannelSelector selectedChannelId={selectedChannelId} onSelectChannel={this.props.onSelectChannel}/>
196 196
197 <ListView 197 <ListView
198 ref={(ref)=>this.listView=ref} 198 ref={(ref)=>this.listView=ref}
@@ -27,15 +27,15 @@ export default class BrandHeader extends React.Component { @@ -27,15 +27,15 @@ export default class BrandHeader extends React.Component {
27 27
28 let data = this.props.reourceForBoy; 28 let data = this.props.reourceForBoy;
29 let brandFliter = this.props.brandFliter; 29 let brandFliter = this.props.brandFliter;
30 - let brandChannelFliter = this.props.brandChannelFliter; 30 + let selectedChannelId = this.props.selectedChannelId;
31 31
32 - if (brandChannelFliter == 1) { 32 + if (selectedChannelId == 1) {
33 data = this.props.reourceForBoy; 33 data = this.props.reourceForBoy;
34 - } else if (brandChannelFliter == 2) { 34 + } else if (selectedChannelId == 2) {
35 data = this.props.reourceForGirl; 35 data = this.props.reourceForGirl;
36 - } else if (brandChannelFliter == 3) { 36 + } else if (selectedChannelId == 3) {
37 data = this.props.reourceForKid; 37 data = this.props.reourceForKid;
38 - } else if (brandChannelFliter == 4) { 38 + } else if (selectedChannelId == 4) {
39 data = this.props.reourceForLifeStyle; 39 data = this.props.reourceForLifeStyle;
40 } 40 }
41 41
@@ -33,8 +33,6 @@ export default class NewHotBannerListCell extends React.Component { @@ -33,8 +33,6 @@ export default class NewHotBannerListCell extends React.Component {
33 let rowData = this.props.rowData; 33 let rowData = this.props.rowData;
34 let newSrc = getSlicedUrl(rowData.get('brand_ico'), width, height, 2); 34 let newSrc = getSlicedUrl(rowData.get('brand_ico'), width, height, 2);
35 let name = rowData.get('brand_name'); 35 let name = rowData.get('brand_name');
36 - let shop_id = rowData.get('shop_id');  
37 - let shop_template_type = rowData.get('shop_template_type');  
38 36
39 return ( 37 return (
40 <TouchableOpacity activeOpacity={0.5} onPress={() => { 38 <TouchableOpacity activeOpacity={0.5} onPress={() => {
@@ -48,7 +46,7 @@ export default class NewHotBannerListCell extends React.Component { @@ -48,7 +46,7 @@ export default class NewHotBannerListCell extends React.Component {
48 > 46 >
49 </Image> 47 </Image>
50 <View style={styles.itemTitle}> 48 <View style={styles.itemTitle}>
51 - <Text style={styles.itemText} numberOfLines={1}>{rowData.get('brand_name')}</Text> 49 + <Text style={styles.itemText} numberOfLines={1}>{name}</Text>
52 </View> 50 </View>
53 </View> 51 </View>
54 </TouchableOpacity> 52 </TouchableOpacity>
@@ -51,7 +51,7 @@ export default class Brand extends Component { @@ -51,7 +51,7 @@ export default class Brand extends Component {
51 51
52 renderRow(rowData, sectionID, rowID, highlightRow) { 52 renderRow(rowData, sectionID, rowID, highlightRow) {
53 return ( 53 return (
54 - <AllBrandListCell rowData={rowData.toJS()} onPressSlideItem={(url) => { 54 + <AllBrandListCell rowData={rowData} onPressSlideItem={(url) => {
55 this.props.onPressBrandSearchItem 55 this.props.onPressBrandSearchItem
56 && this.props.onPressBrandSearchItem(url, rowData.get('brand_name', '')); 56 && this.props.onPressBrandSearchItem(url, rowData.get('brand_name', ''));
57 }}/> 57 }}/>
@@ -11,7 +11,7 @@ import ReactNative, { @@ -11,7 +11,7 @@ import ReactNative, {
11 TouchableOpacity, 11 TouchableOpacity,
12 } from 'react-native'; 12 } from 'react-native';
13 13
14 -import ChannelFliter from './ChannelFliter'; 14 +import ChannelSelector from '../../../common/components/ChannelSelector';
15 import CategoryList from './CategoryList'; 15 import CategoryList from './CategoryList';
16 16
17 17
@@ -25,13 +25,12 @@ export default class Category extends Component { @@ -25,13 +25,12 @@ export default class Category extends Component {
25 25
26 return ( 26 return (
27 <View style={styles.container}> 27 <View style={styles.container}>
28 - <ChannelFliter selectID={this.props.channelFliter} onChannelPressFliter={this.props.onChannelPressFliter}/> 28 + <ChannelSelector selectedChannelValue={this.props.currentChannelId} onSelectChannel={this.props.onSelectChannel} />
29 <CategoryList 29 <CategoryList
30 categoryList={this.props.categoryList} 30 categoryList={this.props.categoryList}
31 pressLeftRow={this.props.pressLeftRow} 31 pressLeftRow={this.props.pressLeftRow}
32 currentCateId={this.props.currentCateId} 32 currentCateId={this.props.currentCateId}
33 currentChannelId={this.props.currentChannelId} 33 currentChannelId={this.props.currentChannelId}
34 - channelFliter= {this.props.channelFliter}  
35 pressSubCateRow={this.props.pressSubCateRow} 34 pressSubCateRow={this.props.pressSubCateRow}
36 /> 35 />
37 </View> 36 </View>
@@ -21,11 +21,11 @@ export default class CategoryList extends Component { @@ -21,11 +21,11 @@ export default class CategoryList extends Component {
21 constructor(props) { 21 constructor(props) {
22 super(props); 22 super(props);
23 this.renderRow = this.renderRow.bind(this); 23 this.renderRow = this.renderRow.bind(this);
24 - this.renderSeparator=this.renderSeparator.bind(this);  
25 - this.subRenderSeparator=this.subRenderSeparator.bind(this);  
26 - this._pressLeftRow=this._pressLeftRow.bind(this); 24 + this.renderSeparator = this.renderSeparator.bind(this);
  25 + this.subRenderSeparator = this.subRenderSeparator.bind(this);
  26 + this._pressLeftRow = this._pressLeftRow.bind(this);
27 this.dataSource = new ListView.DataSource({rowHasChanged: (r1, r2) => !immutable.is(r1, r2)}); 27 this.dataSource = new ListView.DataSource({rowHasChanged: (r1, r2) => !immutable.is(r1, r2)});
28 - this.subRenderRow=this.subRenderRow.bind(this); 28 + this.subRenderRow = this.subRenderRow.bind(this);
29 this.state = { 29 this.state = {
30 offsetx: 0, 30 offsetx: 0,
31 }; 31 };
1 -'use strict';  
2 -  
3 -import React from 'react';  
4 -import ReactNative from 'react-native';  
5 -  
6 -const {  
7 - View,  
8 - Text,  
9 - ListView,  
10 - TouchableOpacity,  
11 - Dimensions,  
12 - StyleSheet,  
13 -} = ReactNative;  
14 -  
15 -  
16 -export default class ChannelFliter extends React.Component {  
17 -  
18 - constructor(props) {  
19 - super (props);  
20 -  
21 - this._renderRow = this._renderRow.bind(this);  
22 - this._renderSeparator = this._renderSeparator.bind(this);  
23 -  
24 - this.dataSource = new ListView.DataSource({  
25 - rowHasChanged: (r1, r2) => r1.key != r2.key,  
26 - });  
27 -  
28 - this.state = {  
29 - filters: [  
30 - {  
31 - name: 'Boy',  
32 - value:'boy',  
33 - isSelect: false,  
34 - },  
35 - {  
36 - name: 'Girl',  
37 - value:'girl',  
38 - isSelect: false,  
39 - },  
40 - {  
41 - name: 'Kids',  
42 - value:'kids',  
43 - isSelect: false,  
44 - },  
45 - {  
46 - name: 'Lifestyle',  
47 - value:'lifestyle',  
48 - isSelect: false,  
49 - },  
50 - ],  
51 - selectedIndex: this.props.selectID,  
52 - };  
53 - }  
54 -  
55 - _renderRow(rowData, sectionID, rowID) {  
56 -  
57 - let colorStyle = rowID == this.state.selectedIndex ? {color: '#444444'} : {color: '#b0b0b0'};  
58 -  
59 - return (  
60 - <TouchableOpacity onPress={() => {  
61 - let filters = this.state.filters;  
62 - let filter = this.state.filters[rowID];  
63 - if (this.state.selectedIndex == rowID) {  
64 - return;  
65 - }  
66 -  
67 - filter.isSelect = !filter.isSelect;  
68 - filters[rowID] = filter;  
69 - this.setState({  
70 - selectedIndex: rowID,  
71 - filters,  
72 - });  
73 - this.props.onChannelPressFliter && this.props.onChannelPressFliter(rowData.value);  
74 - }}>  
75 - <View key={'row' + rowID} style={styles.rowContainer}>  
76 - <Text style={[styles.name, colorStyle]}>{rowData.name}</Text>  
77 - </View>  
78 - </TouchableOpacity>  
79 - );  
80 - }  
81 -  
82 - _renderSeparator(sectionID, rowID, adjacentRowHighlighted) {  
83 - return (  
84 - <View key={'sep' + rowID} style={styles.separator}>  
85 - </View>  
86 - );  
87 - }  
88 -  
89 - render() {  
90 -  
91 - let {style} = this.props;  
92 -  
93 - return (  
94 - <View style={[styles.container, style]}>  
95 - <ListView  
96 - contentContainerStyle={[styles.contentContainer, style]}  
97 - enableEmptySections={true}  
98 - dataSource={this.dataSource.cloneWithRows(this.state.filters)}  
99 - renderRow={this._renderRow}  
100 - renderSeparator={this._renderSeparator}  
101 - scrollEnabled={false}  
102 - scrollsToTop={false}  
103 - />  
104 - </View>  
105 - );  
106 - }  
107 -}  
108 -  
109 -let {width, height} = Dimensions.get('window');  
110 -  
111 -let styles = StyleSheet.create({  
112 - container: {  
113 - marginLeft: -1,  
114 - width: width + 2,  
115 - height: 50,  
116 - borderTopColor: 'transparent',  
117 - borderBottomColor: '#e5e5e5',  
118 - borderWidth: 0.5,  
119 - backgroundColor:'white',  
120 - },  
121 - contentContainer: {  
122 - flexDirection: 'row',  
123 - },  
124 - rowContainer: {  
125 - flexDirection: 'row',  
126 - justifyContent: 'center',  
127 - alignItems: 'center',  
128 - width: Math.ceil(width / 4),  
129 - height: 50,  
130 - backgroundColor:'white',  
131 - },  
132 - name: {  
133 - color: '#b0b0b0',  
134 - },  
135 - separator: {  
136 - width: 0.5,  
137 - top: 50 / 4,  
138 - height: 50 / 2,  
139 - backgroundColor: '#e5e5e5',  
140 - },  
141 -});  
@@ -61,7 +61,7 @@ export default keyMirror({ @@ -61,7 +61,7 @@ export default keyMirror({
61 SET_BRAND_DATA_FOR_LIFESTYLE: null, 61 SET_BRAND_DATA_FOR_LIFESTYLE: null,
62 62
63 SET_BRAND_FILTER: null, 63 SET_BRAND_FILTER: null,
64 - SET_BRAND_CHANNEL_FILTER: null, 64 + SET_BRAND_SELECTED_CHANNEL: null,
65 65
66 BRAND_SHOW_SEARCH: null, 66 BRAND_SHOW_SEARCH: null,
67 FETCH_BRAND_SEARCH_HISTORY: null, 67 FETCH_BRAND_SEARCH_HISTORY: null,
@@ -49,7 +49,7 @@ class BrandContainer extends Component { @@ -49,7 +49,7 @@ class BrandContainer extends Component {
49 49
50 this._onPressSlideItem = this._onPressSlideItem.bind(this); 50 this._onPressSlideItem = this._onPressSlideItem.bind(this);
51 this._onPressFilter = this._onPressFilter.bind(this); 51 this._onPressFilter = this._onPressFilter.bind(this);
52 - this._onChannelPressFliter = this._onChannelPressFliter.bind(this); 52 + this._onSelectChannel = this._onSelectChannel.bind(this);
53 this._onPressSearch = this._onPressSearch.bind(this); 53 this._onPressSearch = this._onPressSearch.bind(this);
54 this._onPressClearHistory = this._onPressClearHistory.bind(this); 54 this._onPressClearHistory = this._onPressClearHistory.bind(this);
55 this._onClickCancelSearch = this._onClickCancelSearch.bind(this); 55 this._onClickCancelSearch = this._onClickCancelSearch.bind(this);
@@ -92,8 +92,7 @@ class BrandContainer extends Component { @@ -92,8 +92,7 @@ class BrandContainer extends Component {
92 this.props.actions.setInitialListSize(count); 92 this.props.actions.setInitialListSize(count);
93 } 93 }
94 94
95 - _onChannelPressFliter(value){  
96 - 95 + _onSelectChannel(channel){
97 let { 96 let {
98 brandListForBoy, 97 brandListForBoy,
99 brandListForGirl, 98 brandListForGirl,
@@ -105,30 +104,31 @@ class BrandContainer extends Component { @@ -105,30 +104,31 @@ class BrandContainer extends Component {
105 reourceForLifeStyle, 104 reourceForLifeStyle,
106 } = this.props.brand; 105 } = this.props.brand;
107 106
  107 + let channelId = channel.id;
108 let brandListNeedRequest; 108 let brandListNeedRequest;
109 let reourceNeedRequest; 109 let reourceNeedRequest;
110 - if (value == 1) { 110 + if (channelId == 1) {
111 brandListNeedRequest = brandListForBoy.get('hasSuccess'); 111 brandListNeedRequest = brandListForBoy.get('hasSuccess');
112 reourceNeedRequest = reourceForBoy.get('hasSuccess'); 112 reourceNeedRequest = reourceForBoy.get('hasSuccess');
113 - }else if (value == 2) { 113 + }else if (channelId == 2) {
114 brandListNeedRequest = brandListForGirl.get('hasSuccess'); 114 brandListNeedRequest = brandListForGirl.get('hasSuccess');
115 reourceNeedRequest = reourceForGirl.get('hasSuccess'); 115 reourceNeedRequest = reourceForGirl.get('hasSuccess');
116 - }else if (value == 3) { 116 + }else if (channelId == 3) {
117 brandListNeedRequest = brandListForKid.get('hasSuccess'); 117 brandListNeedRequest = brandListForKid.get('hasSuccess');
118 reourceNeedRequest = reourceForKid.get('hasSuccess'); 118 reourceNeedRequest = reourceForKid.get('hasSuccess');
119 - }else if (value == 4) { 119 + }else if (channelId == 4) {
120 brandListNeedRequest = brandListForLifeStyle.get('hasSuccess'); 120 brandListNeedRequest = brandListForLifeStyle.get('hasSuccess');
121 reourceNeedRequest = reourceForLifeStyle.get('hasSuccess'); 121 reourceNeedRequest = reourceForLifeStyle.get('hasSuccess');
122 } 122 }
123 123
124 if (!brandListNeedRequest) { 124 if (!brandListNeedRequest) {
125 - this.props.actions.getBrandList(value); 125 + this.props.actions.getBrandList(channelId);
126 } 126 }
127 if (!reourceNeedRequest) { 127 if (!reourceNeedRequest) {
128 - this.props.actions.getBrandResource(value); 128 + this.props.actions.getBrandResource(channelId);
129 } 129 }
130 this.props.actions.setInitialListSize(0); 130 this.props.actions.setInitialListSize(0);
131 - this.props.actions.setBrandChannelFilter(value); 131 + this.props.actions.setBrandSelectedChannel(channelId);
132 } 132 }
133 133
134 _onPressSearch() { 134 _onPressSearch() {
@@ -169,7 +169,7 @@ class BrandContainer extends Component { @@ -169,7 +169,7 @@ class BrandContainer extends Component {
169 showSearch, 169 showSearch,
170 initialListSize, 170 initialListSize,
171 isFetching, 171 isFetching,
172 - brandChannelFliter, 172 + selectedChannelId,
173 brandFliter, 173 brandFliter,
174 brandListForBoy, 174 brandListForBoy,
175 brandListForGirl, 175 brandListForGirl,
@@ -187,7 +187,7 @@ class BrandContainer extends Component { @@ -187,7 +187,7 @@ class BrandContainer extends Component {
187 <Brand 187 <Brand
188 isFetching={isFetching} 188 isFetching={isFetching}
189 initialListSize={initialListSize} 189 initialListSize={initialListSize}
190 - brandChannelFliter= {brandChannelFliter} 190 + selectedChannelId= {selectedChannelId}
191 brandFliter= {brandFliter} 191 brandFliter= {brandFliter}
192 brandListForBoy= {brandListForBoy} 192 brandListForBoy= {brandListForBoy}
193 brandListForGirl= {brandListForGirl} 193 brandListForGirl= {brandListForGirl}
@@ -199,7 +199,7 @@ class BrandContainer extends Component { @@ -199,7 +199,7 @@ class BrandContainer extends Component {
199 reourceForLifeStyle={reourceForLifeStyle} 199 reourceForLifeStyle={reourceForLifeStyle}
200 onPressFilter= {this._onPressFilter} 200 onPressFilter= {this._onPressFilter}
201 onPressSlideItem= {this._onPressSlideItem} 201 onPressSlideItem= {this._onPressSlideItem}
202 - onChannelPressFliter={this._onChannelPressFliter} 202 + onSelectChannel={this._onSelectChannel}
203 showSearch={showSearch} 203 showSearch={showSearch}
204 search={search} 204 search={search}
205 onPressSearch={this._onPressSearch} 205 onPressSearch={this._onPressSearch}
@@ -47,9 +47,9 @@ function mapDispatchToProps(dispatch) { @@ -47,9 +47,9 @@ function mapDispatchToProps(dispatch) {
47 class CategoryContainer extends Component { 47 class CategoryContainer extends Component {
48 constructor(props) { 48 constructor(props) {
49 super(props); 49 super(props);
50 - this._onChannelPressFliter = this._onChannelPressFliter.bind(this);  
51 - this._pressLeftRow=this._pressLeftRow.bind(this);  
52 - this._pressSubCateRow=this._pressSubCateRow.bind(this); 50 + this._onSelectChannel = this._onSelectChannel.bind(this);
  51 + this._pressLeftRow = this._pressLeftRow.bind(this);
  52 + this._pressSubCateRow = this._pressSubCateRow.bind(this);
53 } 53 }
54 54
55 componentDidMount() { 55 componentDidMount() {
@@ -59,21 +59,22 @@ class CategoryContainer extends Component { @@ -59,21 +59,22 @@ class CategoryContainer extends Component {
59 componentWillUnmount() { 59 componentWillUnmount() {
60 60
61 } 61 }
62 - _onChannelPressFliter(value){ 62 +
  63 + _onSelectChannel(channel) {
63 this.props.actions.setCurrentCateId(0); 64 this.props.actions.setCurrentCateId(0);
64 - this.props.actions.setCurrentChannelId(value); 65 + this.props.actions.setCurrentChannelId(channel.value);
65 } 66 }
66 - _pressLeftRow(value,rowID){ 67 +
  68 + _pressLeftRow(value,rowID) {
67 this.props.actions.setCurrentCateId(rowID); 69 this.props.actions.setCurrentCateId(rowID);
68 } 70 }
69 71
70 - _pressSubCateRow(value, index){ 72 + _pressSubCateRow(value, index) {
71 this.props.actions.jumpToCategory(value, index, this.props.category.channelFliter); 73 this.props.actions.jumpToCategory(value, index, this.props.category.channelFliter);
72 } 74 }
73 75
74 render() { 76 render() {
75 let { 77 let {
76 - channelFliter,  
77 categoryList, 78 categoryList,
78 currentChannelId, 79 currentChannelId,
79 currentCateId, 80 currentCateId,
@@ -85,9 +86,8 @@ class CategoryContainer extends Component { @@ -85,9 +86,8 @@ class CategoryContainer extends Component {
85 categoryList={categoryList} 86 categoryList={categoryList}
86 currentChannelId={currentChannelId} 87 currentChannelId={currentChannelId}
87 currentCateId={currentCateId} 88 currentCateId={currentCateId}
88 - channelFliter= {channelFliter}  
89 pressLeftRow={this._pressLeftRow} 89 pressLeftRow={this._pressLeftRow}
90 - onChannelPressFliter={this._onChannelPressFliter} 90 + onSelectChannel={this._onSelectChannel}
91 pressSubCateRow={this._pressSubCateRow} 91 pressSubCateRow={this._pressSubCateRow}
92 /> 92 />
93 </View> 93 </View>
@@ -10,7 +10,7 @@ const { @@ -10,7 +10,7 @@ const {
10 SET_TYPE, 10 SET_TYPE,
11 11
12 SET_BRAND_FILTER, 12 SET_BRAND_FILTER,
13 - SET_BRAND_CHANNEL_FILTER, 13 + SET_BRAND_SELECTED_CHANNEL,
14 SET_INITIALLISTSIZE, 14 SET_INITIALLISTSIZE,
15 GET_BRAND_LIST_FOR_BOY_REQUEST, 15 GET_BRAND_LIST_FOR_BOY_REQUEST,
16 GET_BRAND_LIST_FOR_BOY_SUCCESS, 16 GET_BRAND_LIST_FOR_BOY_SUCCESS,
@@ -69,10 +69,10 @@ export function setBrandFilter(filter) { @@ -69,10 +69,10 @@ export function setBrandFilter(filter) {
69 }; 69 };
70 } 70 }
71 71
72 -export function setBrandChannelFilter(filter) { 72 +export function setBrandSelectedChannel(channelId) {
73 return { 73 return {
74 - type: SET_BRAND_CHANNEL_FILTER,  
75 - payload: filter 74 + type: SET_BRAND_SELECTED_CHANNEL,
  75 + payload: channelId
76 }; 76 };
77 } 77 }
78 78
@@ -5,7 +5,7 @@ import {Record, List, Map} from 'immutable'; @@ -5,7 +5,7 @@ import {Record, List, Map} from 'immutable';
5 let InitialState = Record({ 5 let InitialState = Record({
6 isFetching: false, 6 isFetching: false,
7 brandFliter: 0, 7 brandFliter: 0,
8 - brandChannelFliter:1, 8 + selectedChannelId: 1,
9 initialListSize: 0, 9 initialListSize: 0,
10 brandListForBoy: new (Record({ 10 brandListForBoy: new (Record({
11 all_list: Map(), 11 all_list: Map(),
@@ -7,7 +7,7 @@ const { @@ -7,7 +7,7 @@ const {
7 SET_TYPE, 7 SET_TYPE,
8 8
9 SET_BRAND_FILTER, 9 SET_BRAND_FILTER,
10 - SET_BRAND_CHANNEL_FILTER, 10 + SET_BRAND_SELECTED_CHANNEL,
11 SET_INITIALLISTSIZE, 11 SET_INITIALLISTSIZE,
12 GET_BRAND_LIST_FOR_BOY_REQUEST, 12 GET_BRAND_LIST_FOR_BOY_REQUEST,
13 GET_BRAND_LIST_FOR_BOY_SUCCESS, 13 GET_BRAND_LIST_FOR_BOY_SUCCESS,
@@ -67,8 +67,8 @@ export default function brandReducer(state=initialState, action) { @@ -67,8 +67,8 @@ export default function brandReducer(state=initialState, action) {
67 67
68 } 68 }
69 69
70 - case SET_BRAND_CHANNEL_FILTER: {  
71 - return state.set('brandChannelFliter', action.payload); 70 + case SET_BRAND_SELECTED_CHANNEL: {
  71 + return state.set('selectedChannelId', action.payload);
72 } 72 }
73 73
74 case GET_BRAND_LIST_FOR_BOY_REQUEST: 74 case GET_BRAND_LIST_FOR_BOY_REQUEST:
@@ -3,9 +3,8 @@ @@ -3,9 +3,8 @@
3 import {Record, List, Map} from 'immutable'; 3 import {Record, List, Map} from 'immutable';
4 4
5 let InitialState = Record({ 5 let InitialState = Record({
6 - channelFliter:0,  
7 - currentChannelId:'boy',  
8 - currentCateId:'0', 6 + currentChannelId: 'boy',
  7 + currentCateId: '0',
9 categoryList: new (Record({ 8 categoryList: new (Record({
10 boy: List(), 9 boy: List(),
11 girl: List(), 10 girl: List(),
@@ -2,6 +2,7 @@ @@ -2,6 +2,7 @@
2 2
3 import React from 'react'; 3 import React from 'react';
4 import ReactNative from 'react-native'; 4 import ReactNative from 'react-native';
  5 +import Immutable, {Map} from 'immutable';
5 6
6 const { 7 const {
7 View, 8 View,
@@ -10,10 +11,11 @@ const { @@ -10,10 +11,11 @@ const {
10 TouchableOpacity, 11 TouchableOpacity,
11 Dimensions, 12 Dimensions,
12 StyleSheet, 13 StyleSheet,
  14 + Platform,
13 } = ReactNative; 15 } = ReactNative;
14 16
15 17
16 -export default class ChannelFliter extends React.Component { 18 +export default class ChannelSelector extends React.Component {
17 19
18 constructor(props) { 20 constructor(props) {
19 super (props); 21 super (props);
@@ -22,46 +24,65 @@ export default class ChannelFliter extends React.Component { @@ -22,46 +24,65 @@ export default class ChannelFliter extends React.Component {
22 this._renderSeparator = this._renderSeparator.bind(this); 24 this._renderSeparator = this._renderSeparator.bind(this);
23 25
24 this.dataSource = new ListView.DataSource({ 26 this.dataSource = new ListView.DataSource({
25 - rowHasChanged: (r1, r2) => r1.key != r2.key, 27 + rowHasChanged: (r1, r2) => r1.id != r2.id,
26 }); 28 });
27 29
28 - this.state = {  
29 - filters: [ 30 + this.channels = [
30 { 31 {
31 name: 'Boy', 32 name: 'Boy',
  33 + value: 'boy',
  34 + id: 1,
32 isSelect: false, 35 isSelect: false,
33 }, 36 },
34 { 37 {
35 name: 'Girl', 38 name: 'Girl',
  39 + value: 'girl',
  40 + id: 2,
36 isSelect: false, 41 isSelect: false,
37 }, 42 },
38 { 43 {
39 - name: 'Kid', 44 + name: 'Kids',
  45 + value: 'kids',
  46 + id: 3,
40 isSelect: false, 47 isSelect: false,
41 }, 48 },
42 { 49 {
43 name: 'Lifestyle', 50 name: 'Lifestyle',
  51 + value: 'lifestyle',
  52 + id: 4,
44 isSelect: false, 53 isSelect: false,
45 }, 54 },
46 - ],  
47 - selectedIndex: this.props.selectID,  
48 - }; 55 + ];
  56 + }
  57 +
  58 + shouldComponentUpdate(nextProps){
  59 + if ((nextProps.selectedChannelId == this.props.selectedChannelId)
  60 + && (nextProps.selectedChannelValue == this.props.selectedChannelValue)) {
  61 + return false;
  62 + } else {
  63 + return true;
  64 + }
49 } 65 }
50 66
51 _renderRow(rowData, sectionID, rowID) { 67 _renderRow(rowData, sectionID, rowID) {
52 - let colorStyle = rowID == this.props.selectID-1 ? {color: '#444444',fontFamily: 'HelveticaNeue',fontSize: 17} : {color: '#b0b0b0',fontFamily: 'HelveticaNeue-Bold',fontSize: 14,}; 68 + let isRowSelected = false;
  69 + if (this.props.selectedChannelId >= 1) {
  70 + isRowSelected = (rowID == this.props.selectedChannelId - 1);
  71 + } else {
  72 + isRowSelected = (rowData.value == this.props.selectedChannelValue);
  73 + }
  74 +
  75 + let colorStyle = isRowSelected ? {color: '#444444', fontFamily: 'HelveticaNeue', fontSize: 17} : {color: '#b0b0b0', fontFamily: 'HelveticaNeue-Bold', fontSize: 14,};
53 76
54 return ( 77 return (
55 <TouchableOpacity activeOpacity={1} onPress={() => { 78 <TouchableOpacity activeOpacity={1} onPress={() => {
56 - let filters = this.state.filters;  
57 - let filter = this.state.filters[rowID];  
58 - if (this.props.selectID-1 == rowID) { 79 + if (isRowSelected) {
59 return; 80 return;
60 } 81 }
61 82
62 - filter.isSelect = !(filter.isSelect-1);  
63 - filters[rowID] = filter;  
64 - this.props.onChannelPressFliter && this.props.onChannelPressFliter(Number(rowID)+1); 83 + let channel = this.channels[rowID];
  84 +
  85 + this.props.onSelectChannel && this.props.onSelectChannel(channel);
65 }}> 86 }}>
66 <View key={'row' + rowID} style={styles.rowContainer}> 87 <View key={'row' + rowID} style={styles.rowContainer}>
67 <Text style={[styles.name, colorStyle]}>{rowData.name}</Text> 88 <Text style={[styles.name, colorStyle]}>{rowData.name}</Text>
@@ -86,7 +107,7 @@ export default class ChannelFliter extends React.Component { @@ -86,7 +107,7 @@ export default class ChannelFliter extends React.Component {
86 <ListView 107 <ListView
87 contentContainerStyle={[styles.contentContainer, style]} 108 contentContainerStyle={[styles.contentContainer, style]}
88 enableEmptySections={true} 109 enableEmptySections={true}
89 - dataSource={this.dataSource.cloneWithRows(this.state.filters)} 110 + dataSource={this.dataSource.cloneWithRows(this.channels)}
90 renderRow={this._renderRow} 111 renderRow={this._renderRow}
91 renderSeparator={this._renderSeparator} 112 renderSeparator={this._renderSeparator}
92 scrollEnabled={false} 113 scrollEnabled={false}
@@ -99,11 +120,13 @@ export default class ChannelFliter extends React.Component { @@ -99,11 +120,13 @@ export default class ChannelFliter extends React.Component {
99 120
100 let {width, height} = Dimensions.get('window'); 121 let {width, height} = Dimensions.get('window');
101 122
  123 +let viewHeight = (Platform.OS === 'ios') ? 44 : 50;
  124 +
102 let styles = StyleSheet.create({ 125 let styles = StyleSheet.create({
103 container: { 126 container: {
104 marginLeft: -1, 127 marginLeft: -1,
105 width: width + 2, 128 width: width + 2,
106 - height: 44, 129 + height: viewHeight,
107 borderTopColor: 'transparent', 130 borderTopColor: 'transparent',
108 borderBottomColor: '#e5e5e5', 131 borderBottomColor: '#e5e5e5',
109 borderWidth: 0.5, 132 borderWidth: 0.5,
@@ -117,7 +140,7 @@ let styles = StyleSheet.create({ @@ -117,7 +140,7 @@ let styles = StyleSheet.create({
117 justifyContent: 'center', 140 justifyContent: 'center',
118 alignItems: 'center', 141 alignItems: 'center',
119 width: Math.ceil(width / 4), 142 width: Math.ceil(width / 4),
120 - height: 44, 143 + height: viewHeight,
121 backgroundColor:'white', 144 backgroundColor:'white',
122 }, 145 },
123 name: { 146 name: {
@@ -125,8 +148,8 @@ let styles = StyleSheet.create({ @@ -125,8 +148,8 @@ let styles = StyleSheet.create({
125 }, 148 },
126 separator: { 149 separator: {
127 width: 0.5, 150 width: 0.5,
128 - top: 44 / 4,  
129 - height: 44 / 2, 151 + top: viewHeight / 4,
  152 + height: viewHeight / 2,
130 backgroundColor: '#e5e5e5', 153 backgroundColor: '#e5e5e5',
131 }, 154 },
132 }); 155 });