全球购 product list UI review by zhanglixia

@@ -17,6 +17,7 @@ import GlobalHomeSwiper from './GlobalHomeSwiper';
 import RecommendContentTwo from './RecommendContentTwo';
 import RecommendContentFive from './RecommendContentFive';
 import RecommendContentOne from './RecommendContentOne';
+import ProductFliter from './ProductFliter';
 import SmallPic from './SmallPic';
 import {getSlicedUrl} from '../../../classify/utils/Utils';
 
@@ -29,9 +30,11 @@ export default class Home extends Component {
         this._onEndReached = this._onEndReached.bind(this);
         this._renderFooter = this._renderFooter.bind(this);
         this.trigggePullToRefresh = this.trigggePullToRefresh.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),
         });
     }
 
@@ -56,7 +59,11 @@ export default class Home extends Component {
     }
 
     _renderRow(rowData: object, sectionID: number, rowID: number) {
+
         // console.log(rowData.toJS());
+
+
+        if (sectionID == 'topHeader') {
             if (rowData.get('template_name') == 'focus') {
                 return (
                     <GlobalHomeSwiper resource={rowData}/>
@@ -105,6 +112,21 @@ export default class Home extends Component {
                     </View>
                 );
             }
+        }
+
+        return null;
+    }
+
+    renderSectionHeader(sectionData, sectionID) {
+        if (sectionID == 'productList') {
+            let {groupInfo} = this.props.data;
+            return (
+                <ProductFliter
+                    resource={groupInfo}
+                    // onPressRecommendItem={this.props.onPressRecommendItem}
+                />
+            );
+        }
         return null;
     }
 
@@ -117,10 +139,13 @@ export default class Home extends Component {
     }
 
     render() {
-        let {list, ptr, isFetching, endReached} = this.props.data;
-        let dataSource = list.toArray();
+        let {list, ptr, isFetching, endReached,groupInfo} = this.props.data;
         let isPullToRefresh = ptr && isFetching;
-        let isLoadingMore = dataSource.size != 0 && !ptr && isFetching;
+        let dataSource = {
+            topHeader: list.toArray(),
+            productList: groupInfo,
+        };
+        let isLoadingMore = list.toArray().size != 0 && !ptr && isFetching;
 
         return (
             <View style={styles.container}>
@@ -129,9 +154,10 @@ export default class Home extends Component {
                         this.listView = c;
                     }}
                     contentContainerStyle={styles.contentContainer}
-                    dataSource={this.dataSource.cloneWithRows(dataSource)}
+                    dataSource={this.dataSource.cloneWithRowsAndSections(dataSource)}
                     renderRow={this._renderRow}
                     enableEmptySections={true}
+                    renderSectionHeader={this.renderSectionHeader}
                     enablePullToRefresh={true}
                     isOnPullToRefresh={isPullToRefresh}
                     onRefreshData={() => {
@@ -160,7 +186,7 @@ let styles = StyleSheet.create({
 		justifyContent: 'center',
 		height: 39,
 		width:width,
-        backgroundColor: 'white',
+        backgroundColor: '#f0f0f0',
     },
 	text: {
 		textAlign: 'center',

+'use strict';
+
+import React from 'react';
+import ReactNative from 'react-native';
+import Immutable, {Map} from 'immutable';
+
+const {
+    View,
+    Text,
+    ListView,
+    TouchableOpacity,
+    Dimensions,
+    StyleSheet,
+} = ReactNative;
+
+
+export default class ProductFliter extends React.Component {
+
+    constructor(props) {
+        super (props);
+
+        this._renderRow = this._renderRow.bind(this);
+        this._renderSeparator = this._renderSeparator.bind(this);
+
+        this.dataSource = new ListView.DataSource({
+            rowHasChanged: (r1, r2) => r1.key != r2.key,
+        });
+		this.state = {
+            selectedIndex: this.props.resource.fliter,
+        };
+    }
+
+    shouldComponentUpdate(nextProps){
+
+        if (Immutable.is(nextProps.resource, this.props.resource) && Immutable.is(nextProps.selectID, this.props.selectID)) {
+            return false;
+        } else {
+            return true;
+        }
+    }
+
+    _renderRow(rowData, sectionID, rowID) {
+
+        let colorStyle = rowID == this.state.selectedIndex ? {color: '#444444'} : {color: '#b0b0b0'};
+
+        return (
+            <TouchableOpacity
+                activeOpacity={1}
+                onPress={() => {
+					this.setState({
+						selectedIndex: rowID,
+					});
+                // this.props.onPressFilter && this.props.onPressFilter(rowID);
+            }}>
+                <View key={'row' + rowID} style={styles.rowContainer}>
+                    <Text style={[styles.name, colorStyle]}>{rowData.title}</Text>
+                </View>
+            </TouchableOpacity>
+        );
+    }
+
+    _renderSeparator(sectionID, rowID, adjacentRowHighlighted) {
+        return (
+            <View key={'sep' + rowID} style={styles.separator}>
+            </View>
+        );
+    }
+
+    render() {
+
+        let {resource} = this.props;
+        let res = resource.list.toJS();
+
+		if (res.length == 0 || !res) {
+			return null;
+		}
+
+        return (
+            <View style={styles.container}>
+                <ListView
+                    contentContainerStyle={styles.contentContainer}
+                    enableEmptySections={true}
+                    dataSource={this.dataSource.cloneWithRows(res)}
+                    renderRow={this._renderRow}
+                    renderSeparator={this._renderSeparator}
+                    scrollsToTop={false}
+					horizontal={true}
+					showsHorizontalScrollIndicator ={false}
+                />
+            </View>
+        );
+    }
+}
+
+let {width, height} = Dimensions.get('window');
+
+let styles = StyleSheet.create({
+    container: {
+        marginLeft: -1,
+        width: width + 2,
+        height: 37,
+        borderTopColor: 'transparent',
+        borderBottomColor: '#e5e5e5',
+        borderWidth: 0.5,
+		backgroundColor:'white',
+    },
+    contentContainer: {
+        flexDirection: 'row',
+    },
+    rowContainer: {
+        flexDirection: 'row',
+        justifyContent: 'center',
+        alignItems: 'center',
+        width: Math.ceil(width / 5),
+        height: 37,
+		backgroundColor:'white',
+    },
+    name: {
+        color: '#b0b0b0',
+    },
+    separator: {
+        width: 0.5,
+        top: 37 / 4,
+        height: 37 / 2,
+        backgroundColor: '#e5e5e5',
+    },
+});

@@ -66,7 +66,7 @@ function parseProductList(json) {
 	for (var i = 0; i < list_0.length; i++) {
 		list.push(list_0[i]);
 		if (list_0[i].template_name == 'paramsGroup') {
-			groupInfo = list_0[i];
+			groupInfo = list_0[i].data.list;
 		}
 	}
 

@@ -36,6 +36,7 @@ export default function homeReducer(state=initialState, action) {
 				total,
 				total_page,
 				content_code,
+				groupInfo,
 			} = action.payload;
 
 			let newState = state.set('isFetching', false)
@@ -45,6 +46,7 @@ export default function homeReducer(state=initialState, action) {
 			.set('content_code', content_code)
 			.set('total_page', total_page)
 			.set('total', total)
+			.setIn(['groupInfo', 'list'], Immutable.fromJS(groupInfo))
 
 			return newState;
 		}