添加 index ListView UI review by zhanglixia

@@ -22,7 +22,7 @@ import AllBrandListCell from './AllBrandListCell';
 import NewHotBannerListCell from './NewHotBannerListCell';
 import NewHotBannerListCell from './NewHotBannerListCell';
 import BrandSearch from './BrandSearch';
 import BrandSearch from './BrandSearch';
 import LoadingIndicator from '../../../common/components/LoadingIndicator';
 import LoadingIndicator from '../../../common/components/LoadingIndicator';
-
+import IndexListView from './IndexListView';
 
 
 export default class Brand extends Component {
 export default class Brand extends Component {
     constructor(props) {
     constructor(props) {
@@ -68,18 +68,18 @@ export default class Brand extends Component {
 
 
         return (
         return (
             <View style={styles.header}>
             <View style={styles.header}>
-                <TouchableOpacity 
+                <TouchableOpacity
                     activeOpacity={1}
                     activeOpacity={1}
                     onPress={() => {
                     onPress={() => {
                         this.props.onPressSearch && this.props.onPressSearch();
                         this.props.onPressSearch && this.props.onPressSearch();
                         // this.searchBar && this.searchBar.focus();
                         // this.searchBar && this.searchBar.focus();
                     }}
                     }}
                 >
                 >
-                    <YH_SearchBar 
+                    <YH_SearchBar
                         ref={(c) => {
                         ref={(c) => {
                             this.searchBar = c;
                             this.searchBar = c;
                         }}
                         }}
-                        editable={false} 
+                        editable={false}
                     />
                     />
                 </TouchableOpacity>
                 </TouchableOpacity>
                 {banner?<BrandSwiper resource={banner} onPressSlideItem={this.props.onPressSlideItem}/>:null}
                 {banner?<BrandSwiper resource={banner} onPressSlideItem={this.props.onPressSlideItem}/>:null}
@@ -90,9 +90,13 @@ export default class Brand extends Component {
     }
     }
 
 
     renderSectionHeader(sectionData, sectionID) {
     renderSectionHeader(sectionData, sectionID) {
+        let title = sectionID;
+        if (sectionID == '0-9') {
+            title = '0';
+        }
         return (
         return (
             <View style={styles.sessionTitle}>
             <View style={styles.sessionTitle}>
-                <Text style={styles.sessionText}>{sectionID}</Text>
+                <Text style={styles.sessionText}>{title}</Text>
             </View>
             </View>
         );
         );
     }
     }
@@ -166,7 +170,7 @@ export default class Brand extends Component {
         return (
         return (
             <View style={styles.container}>
             <View style={styles.container}>
                 <ChannelFliter selectID={channelFliter} onChannelPressFliter={this.props.onChannelPressFliter}/>
                 <ChannelFliter selectID={channelFliter} onChannelPressFliter={this.props.onChannelPressFliter}/>
-               
+
                 <ListView
                 <ListView
                     contentContainerStyle={contentContainerStyle}
                     contentContainerStyle={contentContainerStyle}
                     enableEmptySections={true}
                     enableEmptySections={true}
@@ -177,10 +181,13 @@ export default class Brand extends Component {
                 />
                 />
 
 
                 {showSearch ? <BrandSearch
                 {showSearch ? <BrandSearch
-                    data={search} 
+                    data={search}
                     onTextChange={this.props.onTextChange}
                     onTextChange={this.props.onTextChange}
                     onClickCancel={this.props.onClickCancel} /> : null}
                     onClickCancel={this.props.onClickCancel} /> : null}
 
 
+                <IndexListView dataSource={list}/>
+                {showSearch ? <BrandSearch style={styles.search} data={search}/> : null}
+
                 <LoadingIndicator
                 <LoadingIndicator
                     isVisible={isFetching}
                     isVisible={isFetching}
                 />
                 />
@@ -220,4 +227,6 @@ let styles = StyleSheet.create({
 		width,
 		width,
 		backgroundColor: '#e5e5e5',
 		backgroundColor: '#e5e5e5',
     },
     },
+    search: {
+    },
 });
 });

+'use strict';
+
+import React from 'react';
+import ReactNative from 'react-native';
+import {isEmptyObject} from '../../utils/Utils';
+
+const {
+    View,
+    Image,
+    Text,
+    TouchableOpacity,
+    Dimensions,
+    StyleSheet,
+} = ReactNative;
+
+export default class IndexListView extends React.Component {
+
+    constructor(props) {
+        super (props);
+    }
+
+    render() {
+
+        let {dataSource} = this.props;
+
+		if (isEmptyObject(dataSource)) {
+			return null;
+		}
+
+ 		let keyData = [];
+		for(var k in dataSource) {
+			let name = k;
+			if (k == '0-9') {
+				name = '0';
+			}
+			keyData.push(<Text style={styles.text}>{name}</Text>);
+		}
+
+        return (
+            <View style={styles.container}>
+				{keyData.map((elem, index) => {return elem;})}
+            </View>
+        );
+    }
+}
+
+let {width, height} = Dimensions.get('window');
+let styles = StyleSheet.create({
+    container: {
+		position: 'absolute',
+		width: 10,
+		top: 35,
+		bottom : 1,
+		right: 1,
+		backgroundColor: 'rgba(255,255,255,0.2)',
+		justifyContent: 'center',
+    },
+	text: {
+		justifyContent: 'center',
+		textAlign: 'center',
+		fontSize: 10,
+		color: 'black',
+		fontWeight: 'bold',
+		backgroundColor: 'transparent',
+		marginTop: 2,
+	}
+});

@@ -2,6 +2,7 @@
 
 
 import ReactNative from 'react-native';
 import ReactNative from 'react-native';
 import BrandService from '../../services/BrandService';
 import BrandService from '../../services/BrandService';
+import {isEmptyObject} from '../../utils/Utils';
 
 
 const {
 const {
 	SET_TYPE,
 	SET_TYPE,
@@ -167,14 +168,17 @@ export function getBrandList(channel) {
 		}
 		}
 		return new BrandService(app.host).getBrandList(channel)
 		return new BrandService(app.host).getBrandList(channel)
         .then(json => {
         .then(json => {
+
+			let payload = parseListResources(json);
+
 			if (channel == 0) {
 			if (channel == 0) {
-				dispatch(getBrandListForBoySuccess(json));
+				dispatch(getBrandListForBoySuccess(payload));
 			}else if (channel == 1) {
 			}else if (channel == 1) {
-				dispatch(getBrandListForGirlSuccess(json));
+				dispatch(getBrandListForGirlSuccess(payload));
 			}else if (channel == 2) {
 			}else if (channel == 2) {
-				dispatch(getBrandListForKidSuccess(json));
+				dispatch(getBrandListForKidSuccess(payload));
 			}else if (channel == 3) {
 			}else if (channel == 3) {
-				dispatch(getBrandListForLifeStyleSuccess(json));
+				dispatch(getBrandListForLifeStyleSuccess(payload));
 			}
 			}
 		})
 		})
 		.catch(error => {
 		.catch(error => {
@@ -191,6 +195,36 @@ export function getBrandList(channel) {
 	};
 	};
 }
 }
 
 
+export function parseListResources(json) {
+	let all_list_old = json.all_list;
+	let hot_list = json.hot_list;
+	let new_list = json.new_list;
+
+	if (isEmptyObject(all_list_old)) {
+		return json;
+	}
+
+	let reg = /^[a-zA-Z]*$/;
+	let all_list = {};
+	let otherList = [];
+
+	for(let k in all_list_old) {
+
+		if (reg.test(k)) {
+			all_list[k] = all_list_old[k];
+		} else {
+			Array.prototype.push.apply(otherList, all_list_old[k]);
+		}
+	}
+	all_list['0-9'] = otherList;
+
+	return {
+		all_list,
+		hot_list,
+		new_list,
+    };
+}
+
 export function getBrandResourceForBoyRequest() {
 export function getBrandResourceForBoyRequest() {
     return {
     return {
         type: GET_BRAND_RESOURCE_FOR_BOY_REQUEST,
         type: GET_BRAND_RESOURCE_FOR_BOY_REQUEST,
@@ -357,7 +391,7 @@ export function searchHistory() {
 		    });
 		    });
 		})
 		})
 		.catch(error => {
 		.catch(error => {
-			
+
 		});
 		});
 	};
 	};
 }
 }
@@ -372,7 +406,7 @@ export function insertSearchHistory(keyword) {
 		    });
 		    });
 		})
 		})
 		.catch(error => {
 		.catch(error => {
-			
+
 		});
 		});
 	};
 	};
 }
 }
@@ -387,7 +421,7 @@ export function clearSearchHistory() {
 		    });
 		    });
 		})
 		})
 		.catch(error => {
 		.catch(error => {
-			
+
 		});
 		});
 	};
 	};
 }
 }
@@ -478,7 +512,7 @@ export function filteBrandForKeyword(text) {
 		let {app, brand} = getState();
 		let {app, brand} = getState();
 		let {search} = brand;
 		let {search} = brand;
 
 
-		
+
 
 
 	};
 	};
-}
+}

@@ -21,3 +21,10 @@ export function getSlicedUrl(src, width, height, mode = 1) {
 	}
 	}
 	return newSrc;
 	return newSrc;
 }
 }
+
+export function isEmptyObject(obj) {
+  for (var key in obj) {
+    return false;
+  }
+  return true;
+}