product list cell 移动到共用目录 review by 草莓

@@ -21,12 +21,12 @@ import OneRowTwoColImages from '../brandStore/brandStoreSubView/Cells/OneRowTwoC
 import Recommend from '../brandStore/brandStoreSubView/Cells/Recommend';
 import BrandProductFilter from '../brandStore/brandStoreSubView/Cells/BrandProductFilter';
 import BrandProductMoreFilter from '../brandStore/brandStoreSubView/Cells/BrandProductMoreFilter';
-import BrandProductListCell from '../brandStore/brandStoreSubView/Cells/BrandProductListCell';
 import BrandStoreFilter from '../brandStore/brandStoreSubView/Cells/BrandStoreFilter';
 import HotProducts from '../brandStore/brandStoreSubView/Cells/HotProducts';
+import ProductCategoryList from '../brandStore/brandStoreSubView/Cells/ProductCategoryList';
 import LoadingIndicator from '../../../common/components/LoadingIndicator';
 import LoadMoreIndicator from '../../../common/components/LoadMoreIndicator';
-import ProductCategoryList from '../brandStore/brandStoreSubView/Cells/ProductCategoryList';
+import BrandProductListCell from '../../../common/components/ListCell/ProductListCell';
 
 
 export default class BrandStore extends Component {

-'use strict';
-
-import React, {Component} from 'react';
-import ReactNative, {
-    View,
-    Text,
-    Image,
-    ListView,
-    StyleSheet,
-    Dimensions,
-    TouchableOpacity,
-} from 'react-native';
-
-import SlicedImage from '../../../../../common/components/SlicedImage';
-import LoadMoreIndicator from '../../../../../common/components/LoadMoreIndicator';
-import ProductListCell from './BrandProductListCell';
-import ProductFilter from './BrandProductFilter';
-
-
-export default class BrandProductList extends Component {
-
-    constructor(props) {
-        super(props);
-
-        this._renderRow = this._renderRow.bind(this);
-
-        this.dataSource = new ListView.DataSource({
-            rowHasChanged: (r1, r2) => !Immutable.is(r1, r2),
-            sectionHeaderHasChanged: (s1, s2) => !Immutable.is(s1, s2),
-        });
-    }
-
-    _renderRow(rowData, sectionID, rowID) {
-        switch (sectionID) {
-            case 'filter':
-             console.log('asdasdasdas');
-                return (
-                    // <ProductFilter
-                    //     style={styles.filterContainer}
-                    //     onPressFilter={this.props.onPressFilter}
-                    // />
-                    <Text >
-        The text should wrap if it goes on multiple lines. See, this is going to
-        the next line.
-      </Text>
-                );
-
-            // case 'list': 
-            //     let paddingLeft = rowID % 2 == 1 ? rowMarginHorizontal / 2 : rowMarginHorizontal;
-            //     let customStyle = rowID == 0 || rowID == 1 ? {paddingLeft, marginTop: 0} : {paddingLeft};
-            //     return (
-            //         <ProductListCell
-            //             style={[styles.listContainer, customStyle]}
-            //             key={'row' + rowID}
-            //             rowID={rowID}
-            //             data={rowData}
-            //         />
-            //     );
-            default:
-                return null;
-
-        }
-        
-    }
-
-    render() {
-        let {list, isFetching, isLoadingMore, endReached} = this.props;
-        let dataSource = {
-            filter: ['filter'],
-            // list: list.toArray(),
-        }
-
-        return (
-            <View style={styles.container}>    
-               <ListView
-                    contentContainerStyle={styles.contentContainer}
-                    enableEmptySections={true}
-                    dataSource={this.dataSource.cloneWithRowsAndSections(dataSource)}
-                    renderRow={this._renderRow}
-                    onEndReached={() => {
-                        this.props.onEndReached && this.props.onEndReached();
-                    }}
-                    renderFooter={()=>{
-                        if (endReached) {
-                            return <LoadMoreIndicator
-                                    isVisible={true}
-                                    text={'暂无更多'}
-                                />
-                        } else {
-                            return <LoadMoreIndicator
-                                    isVisible={isLoadingMore}
-                                    animating={isFetching}
-                                />
-                        }
-                    }}
-                />
-
-            </View>
-        );
-    }
-}
-
-let {width, height} = Dimensions.get('window');
-let rowWidth = Math.ceil(137.5 * width / 320);
-let rowHeight = Math.ceil(254 * width / 320);
-let rowMarginTop = Math.ceil(10 * width / 320);
-let rowMarginHorizontal = (width - rowWidth * 2) / 3;
-
-let styles = StyleSheet.create({
-    container: {
-        flex: 1,
-        backgroundColor: 'white',
-    },
-    contentContainer: {
-        flexDirection: 'row',
-        flexWrap: 'wrap',
-    },
-    filterContainer: {
-
-    },
-    listContainer: {
-        width: width / 2,
-    },
-    separator: {
-        width,
-        height: 16,
-        backgroundColor: '#f0f0f0',
-    },
-});

@@ -12,8 +12,9 @@ const {
 	ListView,
     TouchableOpacity,
 } = ReactNative;
+
 import {Map} from 'immutable';
-import BrandProductListCell from './BrandProductListCell';
+import BrandProductListCell from '../../../../../common/components/ListCell/ProductListCell';
 
 export default class HotProducts extends React.Component {
 

+'use strict';
+
+import React from 'react';
+import ReactNative from 'react-native';
+
+const {
+    View,
+    Image,
+    Text,
+    TouchableOpacity,
+    Dimensions,
+    StyleSheet,
+} = ReactNative;
+
+export default class GPTags extends React.Component {
+
+    constructor(props) {
+        super (props);
+
+    }
+
+    render() {
+        let {title, isLimit} = this.props;
+
+        let leftWidth = tagMaxWidth;
+        if (isLimit) {
+            leftWidth = tagMaxWidth - limitWidth - 2;
+        }
+
+        let textMaxWidth = leftWidth - iconWidth - 5 * 2;
+
+        return (
+            <View style={styles.container}>
+                <View style={[styles.leftContainer, {width: leftWidth}]}>
+                    <Image
+                        style={styles.icon}
+                        source={require('../../images/tag/globalpurchase_fly_smallicon.png')}
+                    />
+                    <Text numberOfLines={1} style={[styles.text, {maxWidth: textMaxWidth}]}>{title}</Text>
+                </View>
+
+                {isLimit ? <Image
+                    style={styles.limit}
+                    source={require('../../images/tag/gp_tip_xl_product.png')}
+                /> : null}
+                
+            </View>
+        );
+    }
+}
+
+let {width, height} = Dimensions.get('window');
+
+const DEVICE_WIDTH_RATIO = width / 320;
+let tagMaxWidth = Math.ceil(137.5 * DEVICE_WIDTH_RATIO);
+let tagHeight = Math.ceil(14 * DEVICE_WIDTH_RATIO);
+let iconWidth = Math.ceil(10 * DEVICE_WIDTH_RATIO);
+
+let limitWidth = Math.ceil(30 * DEVICE_WIDTH_RATIO);
+let limitHeight = Math.ceil(14 * DEVICE_WIDTH_RATIO);
+
+let styles = StyleSheet.create({
+    container: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        width: width,
+        height: tagHeight,
+    },
+    leftContainer: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        backgroundColor: '#462e3d',
+        height: tagHeight,
+    },
+    icon: {
+        marginLeft: 5,
+        width: iconWidth, 
+        height: iconWidth,
+        resizeMode: 'contain',
+    },
+    text: {
+        marginLeft: 5,
+        marginRight: 5,
+        color: 'white',
+        fontSize: 10,  
+        fontFamily: 'STHeitiSC-Light',      
+    },
+    limit: {
+        marginLeft: 2,
+        width: limitWidth, 
+        height: limitHeight,
+        resizeMode: 'contain',
+    },
+});

@@ -11,12 +11,12 @@ import ReactNative, {
     TouchableOpacity,
 } from 'react-native';
 
-import SlicedImage from '../../../../../common/components/SlicedImage';
-import Tags from '../../../../../search/components/search/Tags';
-import GPTags from '../../../../../search/components/search/GPTags';
+import SlicedImage from '../SlicedImage';
+import Tags from './Tags';
+import GPTags from './GPTags';
 
 
-export default class BrandProductListCell extends Component {
+export default class ProductListCell extends Component {
 
     constructor(props) {
         super(props);
@@ -60,16 +60,15 @@ export default class BrandProductListCell extends Component {
         let showGPLimitTag = isGlobalProduct && data.get('is_limited') && data.get('is_limited') == 'Y';    // 全球购限量商品
         let showGPSoldOut = isGlobalProduct && data.get('is_stock') && data.get('is_stock') == 'Y';    // 全球购售罄 
 
-        let showAlmostSoldOut = !isGlobalProduct && data.get('is_soon_sold_out') && data.get('is_soon_sold_out') == 'Y';    // 非全球购的即将售罄   
+        let showAlmostSoldOut = !isGlobalProduct && data.get('tags', []).indexOf('is_soon_sold_out') !== -1;    // 非全球购的即将售罄
         let showSoldOut = sourceType == 2 && data.get('storage_num') && data.get('storage_num') == 0;   // 数据源是奥莱才显示
 
         return (
             <View style={styles.imageContainer}>
                 <Image style={styles.image} source={{uri: url}}>
-                    {showAlmostSoldOut ? <Image style={styles.almostSoldOutImage} source={require('../../../../../search/images/tag/tip_jjsq.png')}/> : null}
-                    {showSoldOut ? <Image style={styles.soldOutImage} source={require('.../../../../../search/images/tag/outlet_sellout_bg.png')}/> : null}
-                    {showGPSoldOut ? <Image style={styles.gpSoldOutImage} source={require('../../../../../search/images/tag/gp_tip_SQ.png')}/> : null}
-
+                    {showAlmostSoldOut ? <Image style={styles.almostSoldOutImage} source={require('../../images/tag/tip_jjsq.png')}/> : null}
+                    {showSoldOut ? <Image style={styles.soldOutImage} source={require('../../images/tag/outlet_sellout_bg.png')}/> : null}
+                    {showGPSoldOut ? <Image style={styles.gpSoldOutImage} source={require('../../images/tag/gp_tip_SQ.png')}/> : null}
                 </Image>
             </View>
         );

+'use strict';
+
+import React from 'react';
+import ReactNative from 'react-native';
+
+const {
+    View,
+    Image,
+    Text,
+    ListView,
+    Dimensions,
+    StyleSheet,
+} = ReactNative;
+
+export default class Tags extends React.Component {
+
+    constructor(props) {
+        super (props);
+
+        this.config = {
+            is_discount: {
+                image: require('../../images/tag/tip_sale.png'),
+                width: 30,
+            },  // YH_ProductTagTypeSale
+            resale: {
+                image: require('../../images/tag/tip_zdz.png'),
+                width: 45,
+            },  // YH_ProductTagTypeReSale
+            'mid-year': {
+                image: require('../../images/tag/tip_nzrc.png'),
+                width: 45,
+            },  // YH_ProductTagTypeSaleMiddle
+            'year-end': {
+                image: require('../../images/tag/tip_nzdc.png'),
+                width: 45,
+            },  // YH_ProductTagTypeSaleHot
+            is_new: {
+                image: require('../../images/tag/tip_new.png'),
+                width: 30,
+            },  // YH_ProductTagTypeNew
+            is_yohood: {
+                image: require('../../images/tag/tip_xpj.png'),
+                width: 45,
+            },  // YH_ProductTagTypeYohood
+            is_limited: {
+                image: require('../../images/tag/tip_xl_product.png'),
+                width: 30,
+            },  // YH_ProductTagTypeLimited
+            is_in_stock: {
+                image: require('../../images/tag/tip_gnzf.png'),
+                width: 45,
+            },  // YH_ProductTagTypeInland
+            is_deposit_advance: {
+                image: require('../../images/tag/tip_advance.png'),
+                width: 30,
+            },  // YH_ProductTagTypeDeposit
+            default: {
+                image: '',
+                width: 45,
+            },
+        };
+
+        this._renderRow = this._renderRow.bind(this);
+
+        this.dataSource = new ListView.DataSource({
+            rowHasChanged: (r1, r2) => r1 != r2,
+        });
+    }
+
+    _renderRow(rowData, sectionID, rowID) {
+        let item = this.config[rowData];
+        if (!item) {
+            return null;
+        }
+
+        let width = Math.ceil(item.width * DEVICE_WIDTH_RATIO);
+        let marginLeft = rowID == 0 ? 0 : 2;
+        let iconStyle = {width, height: tagHeight, marginLeft};
+
+        return (
+            <Image style={[styles.icon, iconStyle]} source={item.image}/>
+        );
+    }
+
+    render() {
+
+        let {style, items} = this.props;
+        // let tags = ['is_discount', 'resale', ];
+        
+        return (
+            <View style={[styles.container]}>
+                <ListView
+                    style={[styles.container]}
+                    contentContainerStyle={[styles.contentContainer]}
+                    enableEmptySections={true}
+                    dataSource={this.dataSource.cloneWithRows(items.toArray())}
+                    renderRow={this._renderRow}
+                    scrollEnabled={false}
+                    scrollsToTop={false}
+                    horizontal={true}
+                    showsHorizontalScrollIndicator={false}
+                />
+            </View>
+        );
+    }
+}
+
+let {width, height} = Dimensions.get('window');
+
+const DEVICE_WIDTH_RATIO = width / 320;
+let tagHeight = Math.ceil(14 * DEVICE_WIDTH_RATIO);
+
+let styles = StyleSheet.create({
+    container: {
+
+    },
+    contentContainer: {
+        height: tagHeight,
+    },
+    icon: {
+        resizeMode: 'contain',
+    },
+});

@@ -60,7 +60,7 @@ export default class Search extends Component {
         let showGPLimitTag = isGlobalProduct && data.get('is_limited') && data.get('is_limited') == 'Y';    // 全球购限量商品
         let showGPSoldOut = isGlobalProduct && data.get('is_stock') && data.get('is_stock') == 'Y';    // 全球购售罄 
 
-        let showAlmostSoldOut = !isGlobalProduct && data.get('is_soon_sold_out') && data.get('is_soon_sold_out') == 'Y';    // 非全球购的即将售罄   
+        let showAlmostSoldOut = !isGlobalProduct && data.get('tags', []).indexOf('is_soon_sold_out') !== -1;    // 非全球购的即将售罄
         let showSoldOut = sourceType == 2 && data.get('storage_num') && data.get('storage_num') == 0;   // 数据源是奥莱才显示
 
         return (