add 品牌 列表 筛选 review by qiangbing

@@ -22,7 +22,7 @@ export default class ScreenSubCell extends React.Component {
     }
 
     render() {
-		let resource = this.props.resource?this.props.resource.toJS():null;
+		let resource = this.props.resource?this.props.resource:null;
         let keys = this.props.keys?this.props.keys:null;
 		if (!resource) {
 			return null;

@@ -66,7 +66,7 @@ export default class ScreenCategory extends Component {
         let {resource} = this.props;
         let key = resource?resource.get('key'):null;
         return(
-            <ScreenSubCell resource={rowData} keys={key} selectItem={this.selectItem}/>
+            <ScreenSubCell resource={rowData?rowData.toJS():''} keys={key} selectItem={this.selectItem}/>
         );
     }
 

@@ -3,7 +3,8 @@
 
 import React, {Component} from 'react';
 import ScreenSubCell from '../cell/ScreenSubCell';
-
+import Immutable, {Map} from 'immutable';
+import IndexListView from '../../../classify/components/brand/IndexListView'
 import ReactNative, {
     View,
     Text,
@@ -20,18 +21,33 @@ export default class ScreenSub extends Component {
 
     constructor(props) {
         super(props);
-
+        this.scrollToSection = this.scrollToSection.bind(this);
         this.renderRow = this.renderRow.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),
         });
 
     }
 
+    scrollToSection(index,sectionID){
+        console.log(sectionID);
+    }
+
+    renderSectionHeader(sectionData, sectionID) {
+        return(
+            <View style={styles.Header}>
+                <Text style={styles.HeaderText}>{sectionID}</Text>
+            </View>
+        );
+    }
+
     renderRow(rowData,sectionID,rowID,highlightRow) {
         let {resource} = this.props;
         let obj = resource&&resource.get('filterSub')?resource.get('filterSub'):null;
         let key = obj?obj.get('key'):null;
+
         return(
             <ScreenSubCell resource={rowData} keys={key} selectItem={this.props.selectItem}/>
         );
@@ -40,19 +56,42 @@ export default class ScreenSub extends Component {
 
     render() {
         let {resource} = this.props;
+
         let obj = resource&&resource.get('filterSub')?resource.get('filterSub'):null;
+        let key = obj?obj.get('key'):null;
         let list = obj?obj.get('list'):null;
+        if (key == 'brand') {
+            let dataSourceList =  list?list.toJS():{};
+            let keyList = list.keySeq()?list.keySeq().toJS():[];
+            keyList.shift();
+            keyList = Immutable.fromJS(keyList);
+            return (
+                <View style={styles.container}>
+                    <ListView
+                        ref='brandList'
+                        contentContainerStyle={styles.contentContainer}
+                        enableEmptySections={true}
+                        dataSource={this.dataSource.cloneWithRowsAndSections(dataSourceList)}
+                        renderRow={this.renderRow}
+                        renderSectionHeader={this.renderSectionHeader}
+                    />
+                    <IndexListView dataSource={keyList.toArray()} onLetterPress={this.scrollToSection}/>
+                </View>
+            );
+        }else {
+            let dataSourceList =  list?list.toJS():[];
             return (
                 <View style={styles.container}>
                     {list?<ListView
                         ref='ScreenSubList'
                         enableEmptySections={true}
-                    dataSource={this.dataSource.cloneWithRows(list.toArray())}
+                        dataSource={this.dataSource.cloneWithRows(dataSourceList)}
                         renderRow={this.renderRow}
                     />:null}
                 </View>
             );
         }
+    }
 }
 
 let {width, height} = Dimensions.get('window');
@@ -61,4 +100,15 @@ let styles = StyleSheet.create({
         flex: 1,
         backgroundColor: '#f4f4f4',
     },
+    HeaderText: {
+        marginLeft: 10,
+        fontSize: 18,
+        fontWeight: 'bold',
+        color: 'rgb(146, 146, 146)'
+    },
+    Header: {
+        justifyContent: 'center',
+        width: width,
+        height: 30,
+    }
 });

@@ -9,13 +9,17 @@ const {
 
 
 export function updateDataSource(data) {
+	let key = data?data.key:'';
+	let json = data;
+	if (key == 'brand') {
+		json = processData(data);
+	}
 	return {
         type: SET_DATASOURCE_SUB,
-		payload: data
+		payload: json
     };
 }
 
-
 export function setSelectItem(json) {
 	return {
         type: SET_SELECT_ITEM,
@@ -43,3 +47,17 @@ function parseList(data,filterSub) {
 	}
 	return list;
 }
+
+function processData(data){
+	let list = data?data.list:[];
+	let latterObject={};
+	list.forEach((item, i) => {
+		let key = item.brand_alif?item.brand_alif:item.name;
+		if (!latterObject[key]) {
+			latterObject[key] = [];
+		}
+		latterObject[key].push(item);
+	});
+	data.list = latterObject;
+	return data;
+}