浏览记录 review by 草莓

@@ -40,6 +40,7 @@ export default class ShopRecommend extends Component{
     onClick(event: Event) {
         let type = event.nativeEvent.type;
         let index = event.nativeEvent.index;
+        let realIndex = 0;
         if (type == 'favorite') {
             let shopId = event.nativeEvent.shopId;
             this.props.onPressShopFavorite && this.props.onPressShopFavorite(shopId, index);
@@ -49,24 +50,28 @@ export default class ShopRecommend extends Component{
             let shopId = event.nativeEvent.shopId;
             let type = event.nativeEvent.type;
             let imageUrl = '';
-
+            
             for (var i = 0; i < list.length; i++) {
                 let shopItem = list[i];
                 if (shopId == shopItem.shopId) {
                     if (type == 'top') {
+                        realIndex = i * 4 + 1;
                         imageUrl = shopItem.src && SlicedImage.getSlicedUrl(shopItem.src, 240*DEVICE_WIDTH_RATIO, 116*DEVICE_WIDTH_RATIO, 2);
                     } else if (type == 'left') {
+                        realIndex = i * 4 + 2;
                         imageUrl = shopItem.goods0 && shopItem.goods0.src && SlicedImage.getSlicedUrl(shopItem.goods0.src, 80*DEVICE_WIDTH_RATIO, 106*DEVICE_WIDTH_RATIO, 2);
                     } else if (type == 'right') {
+                        realIndex = i * 4 + 4;
                         imageUrl = shopItem.goods2 && shopItem.goods2.src && SlicedImage.getSlicedUrl(shopItem.goods2.src, 80*DEVICE_WIDTH_RATIO, 106*DEVICE_WIDTH_RATIO, 2);
                     } else if (type == 'center') {
+                        realIndex = i * 4 + 3;
                         imageUrl = shopItem.goods1 && shopItem.goods1.src && SlicedImage.getSlicedUrl(shopItem.goods1.src, 80*DEVICE_WIDTH_RATIO, 106*DEVICE_WIDTH_RATIO, 2);
                     }
                     break;
                 }
             }
 
-            this.props.onPressShopRecommendItem && this.props.onPressShopRecommendItem(url, imageUrl, index);
+            this.props.onPressShopRecommendItem && this.props.onPressShopRecommendItem(url, imageUrl, realIndex);
         }
     }
 

@@ -13,20 +13,24 @@ import ReactNative, {
 
 import LoadingIndicator from '../../../common/components/LoadingIndicator';
 import ProductCell from './ProductCell';
+import CategorySelector from './CategorySelector';
 
 export default class Browse extends Component {
 
     constructor(props) {
         super(props);
 
-        this._renderRow = this._renderRow.bind(this);
+        this.renderRow = this.renderRow.bind(this);
+        this.renderHeader = this.renderHeader.bind(this);
 
         this.dataSource = new ListView.DataSource({
             rowHasChanged: (r1, r2) => !Immutable.is(r1, r2),
         });
+
+        this.listView = null;
     }
 
-    _renderRow(rowData, sectionID, rowID) {
+    renderRow(rowData, sectionID, rowID) {
 
         return (
             <ProductCell
@@ -38,18 +42,36 @@ export default class Browse extends Component {
         );
     }
 
+    renderHeader() {
+        let {isFetching, selectedProductList, categoryList, selectedCategoryIndex} = this.props.data;
+        return (
+            <CategorySelector
+                data={categoryList}
+                selectedCategoryIndex={selectedCategoryIndex} 
+                onPressCategory={(rowData, rowID) => {
+                    this.props.onPressCategory && this.props.onPressCategory(rowData, rowID);
+                    this.listView && this.listView.scrollTo({x: 0, y: 0, animated: true});
+                }}
+            />
+        );
+    }
+
     render() {
 
-        let {isFetching, productList, categoryList} = this.props.data;
+        let {isFetching, selectedProductList, categoryList, selectedCategoryIndex} = this.props.data;
         
-        let isLoading = productList.size == 0 && isFetching;
+        let isLoading = selectedProductList.size == 0 && isFetching;
 
         return (
             <View style={styles.container}>
                 <ListView
+                    ref={(c) => {
+                        this.listView = c;
+                    }}
                     enableEmptySections={true}
-                    dataSource={this.dataSource.cloneWithRows(productList.toArray())}
-                    renderRow={this._renderRow}
+                    dataSource={this.dataSource.cloneWithRows(selectedProductList.toArray())}
+                    renderRow={this.renderRow}
+                    renderHeader={this.renderHeader}
                 />
                 
                 <LoadingIndicator

+'use strict';
+
+import React, {Component} from 'react';
+import ReactNative, {
+    View,
+    Text,
+    Image,
+    ListView,
+    TouchableOpacity,
+    StyleSheet,
+    Dimensions,
+} from 'react-native';
+import Immutable, {Map, List} from 'immutable';
+
+import YH_Image from '../../../common/components/YH_Image';
+
+export default class CategorySelector extends Component {
+
+
+	constructor(props) {
+        super(props);
+
+        this.dataSource = new ListView.DataSource({
+          rowHasChanged: (r1, r2) => !Immutable.is(r1, r2),
+        });
+
+        this.renderRow = this.renderRow.bind(this);
+        this.scrollToCenter = this.scrollToCenter.bind(this);
+
+        this.listView = null;
+        this.scrollContentWidth = 0;
+        this.rowPosition = {};
+
+	}
+
+    scrollToCenter(rowID) {
+        if (!this.listView) {
+            return;
+        }
+
+        let rowLayout = this.rowPosition[rowID];
+        if (!rowLayout) {
+            return;
+        }
+
+        let rowX = rowLayout.x;
+        let rowWidth = rowLayout.width;
+        
+        // 位于列表头，且x坐标 < 屏幕x中心距离
+        if (rowX + rowWidth / 2 < width / 2) {
+            this.listView && this.listView.scrollTo({x: 0, y: 0, animated: true});
+            return;
+        }
+
+        // 位于列表尾，且（容器宽度-x坐标）< 屏幕x中心距离
+        if ((this.scrollContentWidth - rowX) < width / 2) {
+            this.listView && this.listView.scrollTo({x: this.scrollContentWidth - width, y: 0, animated: true});
+            return;
+        }
+
+        
+        let scrollX = rowX + rowWidth / 2 - width / 2;
+
+        this.listView && this.listView.scrollTo({x: scrollX, y: 0, animated: true});
+
+    }
+
+    renderRow(rowData, sectionID, rowID, highlightRow) {
+        let marginRight = rowID == (this.props.data.size - 1) ? 15 : 0;
+        let color = rowID == this.props.selectedCategoryIndex ? '#444444' : '#b0b0b0';
+        return (
+            <TouchableOpacity 
+                key={'row' + rowID}
+                activeOpacity={1} 
+                style={styles.rowContainer}
+                onPress={() => {
+                    this.props.onPressCategory && this.props.onPressCategory(rowData, rowID);
+                    this.scrollToCenter(rowID);
+                }}
+                onLayout={(event) => {
+                    this.rowPosition[rowID] = event.nativeEvent.layout;
+                }}
+            >
+                <View style={[styles.categoryContainer, {marginRight, borderColor: color}]}>
+                    <Text style={[styles.categoryName, {color}]} numberOfLines={1}>
+                        {rowData.get('category_name')}
+                    </Text>
+                </View>
+            </TouchableOpacity>
+        );
+    }
+
+	render() {
+
+        let data = this.props.data;
+        
+		return (
+            <View style={styles.container}>
+                <ListView
+                    ref={(c) => {
+                        this.listView = c;
+                    }}
+                    enableEmptySections={true}
+                    contentContainerStyle={styles.contentContainer}
+                    dataSource={this.dataSource.cloneWithRows(data.toArray())}
+                    renderRow={this.renderRow}
+                    horizontal={true}
+                    showsHorizontalScrollIndicator={false}
+                    onContentSizeChange={(contentWidth, contentHeight) => {
+                        this.scrollContentWidth = contentWidth;
+                    }}
+                />
+                {data.size > 0 ? <View style={styles.line} /> : null}
+            </View>
+        );
+	}
+};
+
+let {width} = Dimensions.get('window');
+const DEVICE_WIDTH_RATIO = width / 320;
+
+let imageWidth = Math.floor(width / 2);
+let imageHeight = Math.floor(imageWidth * 180 / 375);
+
+let selectorHeight = Math.ceil(45 * DEVICE_WIDTH_RATIO);
+
+selectorHeight = 45;
+
+let styles = StyleSheet.create({
+	container: {
+        flexDirection: 'row',
+        width,
+        height: selectorHeight,
+        backgroundColor: 'white',
+    },
+    contentContainer: {
+
+    },
+    rowContainer: {
+        justifyContent: 'center',
+
+    },
+    categoryContainer: {
+        borderWidth: 1,
+        borderColor: '#b0b0b0',
+        borderRadius: 3,
+        marginLeft: 15,
+    },
+    categoryName: {
+        fontSize: 12,
+        color: '#b0b0b0',
+        backgroundColor: 'transparent',
+        marginLeft: 10,
+        marginRight: 10,
+        marginTop: 6,
+        marginBottom: 6,
+    },
+    line: {
+        position: 'absolute',
+        width,
+        height: 1,
+        left: 0,
+        bottom: 0,
+        backgroundColor: '#e5e5e5',
+    },
+});

@@ -219,7 +219,7 @@ let styles = StyleSheet.create({
         width: 56,
         height: 25,
         right: 15,
-        bottom: 15,
+        bottom: 6,
     },
     separator: {
         position: 'absolute',

@@ -29,4 +29,6 @@ export default keyMirror({
     HISTORY_LIST_REQUEST: null,
     HISTORY_LIST_SUCCESS: null,
     HISTORY_LIST_FAILURE: null,
+
+    SET_SELECTED_CATEGORY: null,
 });

@@ -61,8 +61,9 @@ class BrowseContainer extends Component {
 
     }
 
-    onPressCategory(data) {
-
+    onPressCategory(data, index) {
+        console.log(data.get('category_id'))
+        this.props.actions.setSelectedCategory(data.get('category_id'), index);
     }
 
     onPressProduct(data) {

@@ -7,10 +7,32 @@ const {
 	HISTORY_LIST_REQUEST,
     HISTORY_LIST_SUCCESS,
     HISTORY_LIST_FAILURE,
-
+    SET_SELECTED_CATEGORY,
 } = require('../../constants/actionTypes').default;
 
 
+export function setSelectedCategory(catId, index) {
+	return (dispatch, getState) => {
+		let {app, browse} = getState();
+		let productList = browse.productList.toJS();
+		let newProductList = [];
+		if (catId == -1) {
+			newProductList = productList;
+		} else {
+			productList.map((item, i) => {
+				if (item.category_id == catId) {
+					newProductList.push(item);
+				}
+			});
+		}
+		
+		dispatch({
+			type: SET_SELECTED_CATEGORY,
+			payload: {productList: newProductList, index}
+		});
+	};
+}
+
 export function historyListRequest() {
     return {
         type: HISTORY_LIST_REQUEST,
@@ -79,6 +101,10 @@ function parseHistoryList(json) {
 	let productList = json && json.product_list ? json.product_list : [];
 	let categoryList = json && json.category_list ? json.category_list : [];
 
+	if (categoryList.length > 0) {
+		categoryList = [{category_id: -1, category_name: '全部'} , ...categoryList];
+	}
+
 	return {
 		categoryList,
 		productList,

@@ -9,6 +9,8 @@ let InitialState = Record({
 	productList: List(),
 	currentPage: 0,
 	pageSize: 100,
+	selectedCategoryIndex: 0,
+	selectedProductList: List(),
 });
 
 export default InitialState;

@@ -7,7 +7,7 @@ const {
 	HISTORY_LIST_REQUEST,
     HISTORY_LIST_SUCCESS,
     HISTORY_LIST_FAILURE,
-	
+	SET_SELECTED_CATEGORY,
 } = require('../../constants/actionTypes').default;
 
 const initialState = new InitialState;
@@ -30,6 +30,7 @@ export default function browseReducer(state=initialState, action) {
 			.set('error', null)
 			.set('categoryList', Immutable.fromJS(categoryList))
 			.set('productList', Immutable.fromJS(productList))
+			.set('selectedProductList', Immutable.fromJS(productList))
 			.set('currentPage', currentPage);
 
 			return newState;
@@ -39,6 +40,12 @@ export default function browseReducer(state=initialState, action) {
 			return state.set('isFetching', false)
 			.set('error', action.payload);
 		}
+
+		case SET_SELECTED_CATEGORY: {
+			let {productList, index} = action.payload;
+			return state.set('selectedCategoryIndex', index)
+			.set('selectedProductList', Immutable.fromJS(productList));
+		}
     }
 
     return state;