添加 indexListView 逻辑 review by 张丽霞

@@ -23,6 +23,7 @@ import NewHotBannerListCell from './NewHotBannerListCell';
 import BrandSearch from './search/BrandSearch';
 import BrandSearch from './search/BrandSearch';
 import LoadingIndicator from '../../../common/components/LoadingIndicator';
 import LoadingIndicator from '../../../common/components/LoadingIndicator';
 import IndexListView from './IndexListView';
 import IndexListView from './IndexListView';
+import {ScrollToIndex} from '../../utils/Utils';
 
 
 export default class Brand extends Component {
 export default class Brand extends Component {
     constructor(props) {
     constructor(props) {
@@ -31,7 +32,8 @@ export default class Brand extends Component {
         this.renderSectionHeader = this.renderSectionHeader.bind(this);
         this.renderSectionHeader = this.renderSectionHeader.bind(this);
         this.renderRow = this.renderRow.bind(this);
         this.renderRow = this.renderRow.bind(this);
         this.renderHeader = this.renderHeader.bind(this);
         this.renderHeader = this.renderHeader.bind(this);
-
+        this.scrollToSection = this.scrollToSection.bind(this);
+        this.scrollData = [];
         this.dataSource = new ListView.DataSource({
         this.dataSource = new ListView.DataSource({
             rowHasChanged: (r1, r2) => !Immutable.is(r1, r2),
             rowHasChanged: (r1, r2) => !Immutable.is(r1, r2),
             sectionHeaderHasChanged: (s1, s2) => !Immutable.is(s1, s2),
             sectionHeaderHasChanged: (s1, s2) => !Immutable.is(s1, s2),
@@ -47,6 +49,11 @@ export default class Brand extends Component {
 
 
     }
     }
 
 
+    scrollToSection(sessionID){
+        let newSrc = ScrollToIndex(sessionID,this.scrollData);
+        this.listView.scrollTo({x: 0, y:443+newSrc , animated: false});
+    }
+
     renderHeader(){
     renderHeader(){
         let data = this.props.reourceForBoy;
         let data = this.props.reourceForBoy;
         let brandFliter = this.props.brandFliter;
         let brandFliter = this.props.brandFliter;
@@ -146,12 +153,14 @@ export default class Brand extends Component {
         let listDataSource;
         let listDataSource;
         let contentContainerStyle;
         let contentContainerStyle;
         let renderSectionHeader = null;
         let renderSectionHeader = null;
+        let showIndexForListView = false;
 
 
         if (brandFliter == 0) {
         if (brandFliter == 0) {
             list = data?data.all_list:null;
             list = data?data.all_list:null;
             listDataSource =  list?this.dataSource.cloneWithRowsAndSections(list):null;
             listDataSource =  list?this.dataSource.cloneWithRowsAndSections(list):null;
             contentContainerStyle = styles.contentContainerOne;
             contentContainerStyle = styles.contentContainerOne;
             renderSectionHeader = this.renderSectionHeader;
             renderSectionHeader = this.renderSectionHeader;
+            showIndexForListView = true;
         } else if (brandFliter == 1) {
         } else if (brandFliter == 1) {
             list = data?data.new_list:null;
             list = data?data.new_list:null;
             listDataSource =  list?this.dataSource.cloneWithRows(list):null;
             listDataSource =  list?this.dataSource.cloneWithRows(list):null;
@@ -165,12 +174,14 @@ export default class Brand extends Component {
         if (!list) {
         if (!list) {
             return null;
             return null;
         }
         }
+        this.scrollData = list;
 
 
         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
+                    ref={(ref)=>this.listView=ref}
                     contentContainerStyle={contentContainerStyle}
                     contentContainerStyle={contentContainerStyle}
                     enableEmptySections={true}
                     enableEmptySections={true}
                     dataSource={listDataSource}
                     dataSource={listDataSource}
@@ -180,6 +191,8 @@ export default class Brand extends Component {
                 />
                 />
 
 
                 <IndexListView dataSource={list}/>
                 <IndexListView dataSource={list}/>
+                {showIndexForListView?<IndexListView dataSource={list} onLetterPress={this.scrollToSection}/>: null}
+                {showSearch ? <BrandSearch style={styles.search} data={search}/> : null}
 
 
                 <LoadingIndicator
                 <LoadingIndicator
                     isVisible={isFetching}
                     isVisible={isFetching}

@@ -3,6 +3,7 @@
 import React from 'react';
 import React from 'react';
 import ReactNative from 'react-native';
 import ReactNative from 'react-native';
 import {isEmptyObject} from '../../utils/Utils';
 import {isEmptyObject} from '../../utils/Utils';
+import Immutable, {Map} from 'immutable';
 
 
 const {
 const {
     View,
     View,
@@ -17,8 +18,30 @@ export default class IndexListView extends React.Component {
 
 
     constructor(props) {
     constructor(props) {
         super (props);
         super (props);
+        this.onTouchMove = this.onTouchMove.bind(this);
     }
     }
 
 
+    onTouchMove(e) {
+        let {dataSource} = this.props;
+        let data = Immutable.fromJS(dataSource)
+        let Y =  e.nativeEvent.pageY - Math.ceil((viewHeight - data.size * (itemHeight+2))/2);
+        var index = Math.ceil(Y/(itemHeight+2));
+
+        let i = 0;
+        let sessionID = [];
+        for(var k in dataSource) {
+			let name = k;
+            i++;
+            if (i == index) {
+                sessionID = name;
+                break;
+            }
+		}
+
+        this.props.onLetterPress && this.props.onLetterPress(sessionID);
+    }
+
+
     render() {
     render() {
 
 
         let {dataSource} = this.props;
         let {dataSource} = this.props;
@@ -39,7 +62,7 @@ export default class IndexListView extends React.Component {
 		}
 		}
 
 
         return (
         return (
-            <View style={styles.container}>
+            <View style={styles.container} onTouchStart={this.onTouchMove} onTouchMove={this.onTouchMove} >
 				{keyData.map((elem, index) => {return elem;})}
 				{keyData.map((elem, index) => {return elem;})}
             </View>
             </View>
         );
         );
@@ -47,11 +70,14 @@ export default class IndexListView extends React.Component {
 }
 }
 
 
 let {width, height} = Dimensions.get('window');
 let {width, height} = Dimensions.get('window');
+let itemHeight = 12;
+let viewHeight = height - 112;
+
 let styles = StyleSheet.create({
 let styles = StyleSheet.create({
     container: {
     container: {
 		position: 'absolute',
 		position: 'absolute',
 		width: 10,
 		width: 10,
-		top: 35,
+        height: viewHeight,
 		bottom : 1,
 		bottom : 1,
 		right: 1,
 		right: 1,
 		backgroundColor: 'rgba(255,255,255,0.2)',
 		backgroundColor: 'rgba(255,255,255,0.2)',

@@ -28,3 +28,16 @@ export function isEmptyObject(obj) {
   }
   }
   return true;
   return true;
 }
 }
+
+export function ScrollToIndex(sessionID,list) {
+
+    let index = 0;
+    for(var k in list) {
+        let name = k;
+        if (name == sessionID) {
+            break;
+        }
+        index += 20 + list[k].length * 44;
+    }
+    return index;
+}