Merge branch 'brand_store' into classify

@@ -23,7 +23,6 @@ export default class ProductCategoryList extends React.Component {
 
         this.leftRenderRow = this.leftRenderRow.bind(this);
         this.rightRenderRow = this.rightRenderRow.bind(this);
-        this.rightRenderSeparator = this.rightRenderSeparator.bind(this);
         this._pressLeftRow = this._pressLeftRow.bind(this);
         this._pressRightRow = this._pressRightRow.bind(this);
 
@@ -46,40 +45,42 @@ export default class ProductCategoryList extends React.Component {
   	}
 
     leftRenderRow(rowData, sectionID, rowID, highlightRow) {
-        let colorStyle = rowData.get('isSelect') ? {backgroundColor: 'white'} : {backgroundColor: '#f4f4f4'};
-        let selectText = this.props.filterNameFactors.get(rowData.get('key'));
+        let arrow = rowData.get('isSelect') ? <Image style={styles.arrow} source={require('../../../../image/filter_category_select_icon.png')}/> : null;
 
         return (
             <TouchableOpacity onPress={() => this._pressLeftRow(rowData.toJS())}>
-                <View style={[styles.leftRow, colorStyle]} >
-                    <Text style={styles.title} numberOfLines={1}>
-                        {rowData.get('name')}:{'  ' + selectText}
-                    </Text>
+                <View style={[styles.leftRow]} >
+
+                    <View style={styles.leftRowText} >
+                        <Text style={styles.title} numberOfLines={1}>
+                            {rowData.get('name')}
+                        </Text>
+                        {arrow}
+                    </View>
+                    <View style={[styles.underline]}></View>
+
                 </View>             
             </TouchableOpacity>
         );
     }
 
     rightRenderRow(rowData, sectionID, rowID, highlightRow) {
+
+        let colorStyle = rowData.get('isSelect') ? {backgroundColor: '#DBDBDB'} : {backgroundColor: '#f4f4f4'};
+
         return (
             <TouchableOpacity onPress={() => this._pressRightRow(rowData.toJS())}>
-                <View style={styles.rightRow}>
+                <View style={[styles.rightRow, colorStyle]}>
                     <Text style={styles.subtitle} numberOfLines={1}>
                         {rowData.get('name')}
                     </Text>
-                    {rowData.get('isSelect') ? <Image style={styles.image} source={require('../../../../image/sprite.cart.png')}/> : null}
+                    <View style={[styles.underline]}></View>
+
                 </View>
             </TouchableOpacity>
         );
     }
 
-    rightRenderSeparator(sectionID, rowID, adjacentRowHighlighted) {
-        return (
-            <View key={'sep' + rowID} style={styles.separator}>
-            </View>
-        );
-    }
-	
     render() {
         let {categoryFilterList, filterCategoryDetailFilterList, filterNameFactors} = this.props;
         let subList = [];
@@ -103,7 +104,6 @@ export default class ProductCategoryList extends React.Component {
                 <ListView 
                     dataSource={this.dataSourceR.cloneWithRows(subList.toArray())}
                     renderRow={this.rightRenderRow}
-                    renderSeparator={this.rightRenderSeparator}
                     scrollsToTop={false}
                 />
             </View>  
@@ -120,45 +120,60 @@ let styles = StyleSheet.create({
         flex: 1,
         flexDirection: 'row',
         position: 'absolute',
-        top: 37,
+        top: 40,
         left: 0,
         width: width,
-        height: height - 37 - 44 - 64,
-        backgroundColor: 'white',
+        height: height - 40 - 44 - 64,
+        backgroundColor: '#f4f4f4',
+        borderTopColor: '#e0e0e0',
+        borderWidth: 0.5,
     },
     leftContentContainer: {
-        backgroundColor: '#f4f4f4',
+        backgroundColor: '#ffffff',
     },
     leftRow: {
         justifyContent: 'center',
-        // alignItems: 'center',
         height: 50,
         width: rowWidth,
         paddingLeft: 15,
-        backgroundColor: '#f4f4f4',
+        backgroundColor: '#ffffff',
     },
-    rightRow: {
+    leftRowText: {
         flexDirection: 'row',
-        // justifyContent: 'center',
         alignItems: 'center',
+        height: 49.5,
+        width: rowWidth,
+    },
+    rightRow: {
+        flexDirection: 'column',
+        justifyContent: 'center',
         height: 50,
         width: rowWidth,
-        marginLeft: 15,
-        backgroundColor: 'white',
-        
+        paddingLeft: 15,       
+    },
+    underline:{
+        width: rowWidth,
+        height: 0.5,
+        backgroundColor:'#e0e0e0',
+        position: 'absolute',
+        bottom: 0,
+
     },
     title: {
         fontSize: 17,
         color: '#444444',
+        width: rowWidth - 21,
+        //flex: 1,
+
     },
     subtitle: {
         fontSize: 14,
         color: '#b0b0b0',
     },
-    image: {
-        // marginTop: 2,
-        marginLeft: 5,
-        width: 12,
+    arrow: {
+        justifyContent: 'flex-end',
+        alignItems: 'center',
+        width: 6,
         height: 12,
     },
     separator: {