mobile / YH_RNComponent · Commits

Go to a project

Authored by 于良
Commit b4c7dabda930a85ea8b8f9a80ace3cf7cdcda386 1 parent 35e9dba4

红人店铺代码优化 review by 草莓

Inline Side-by-side
Showing 3 changed files with 140 additions and 58 deletions
... ... @@ -22,8 +22,8 @@ export default class ProductListRow extends React.PureComponent {
shouldComponentUpdate(nextProps){
if (Immutable.is(nextProps.left, this.props.left)
&& Immutable.is(nextProps.right, this.props.right)
&& nextProps.index, this.props.index
&& nextProps.similarIndex, this.props.similarIndex) {
&& nextProps.index == this.props.index
&& nextProps.similarIndex == this.props.similarIndex) {
return false;
} else {
return true;
... ...
... ... @@ -62,7 +62,7 @@ export default class RedBrand extends Component {
let {fliter} = this.props;
let sectionIndex = 1;
if (fliter != 0) {
let height = Math.ceil((234/750)*width) + 84; //header
let height = headerHeight + 84; //header
this.refs.redBrandList && this.refs.redBrandList.scrollToLocation({itemIndex: 0,sectionIndex: 1, viewPosition: height, animated: false});
} else {
this.refs.redBrandList && this.refs.redBrandList.scrollToLocation({itemIndex: 0,sectionIndex: 2, viewPosition: 0, animated: false});
... ... @@ -71,7 +71,7 @@ export default class RedBrand extends Component {
}
_onPressFilter(value){
let height = Math.ceil((234/750)*width) + 44; //header
let height = headerHeight + 44; //header
this.refs.redBrandList && this.refs.redBrandList.scrollToLocation({itemIndex: 0,sectionIndex: 1, viewPosition: height, animated: false});
this.props.onPressProductFilter && this.props.onPressStoreFilter(value);
}
... ... @@ -84,24 +84,24 @@ export default class RedBrand extends Component {
shopsdecorator,
fliter,
} = this.props;
let result ={
let result = {
length: 0,
offset: 0,
}
};
let realContainerHeight = 0;
let countNumb = 0;
for (var i = 0; i < dataSource.length; i++) {
for (let i = 0; i < dataSource.length; i++) {
let item = dataSource[i];
if (item.key == 'ShopBanner') {
if (!shopsdecorator || shopsdecorator.template_type != '1') {
result.length = Math.ceil((234/750)*width); //header
result.length = headerHeight; //header
if (countNumb == layoutIndex) {
this.layoutLenghtOffesetForIndex['fliter' + fliter + 'row' + countNumb] = result;
return result;
}
realContainerHeight += Math.ceil((234/750)*width); //header
realContainerHeight += headerHeight; //header
}
}else if(item.key == 'brandReource') {
} else if (item.key == 'brandReource') {
realContainerHeight += 44; //height of RedBrandStoreFilter
countNumb++;
if (countNumb == layoutIndex) {
... ... @@ -116,7 +116,7 @@ export default class RedBrand extends Component {
result.length = 0;
return result;
}
for (var i = 0; i < sectionDataSource.length; i++) {
for (let i = 0; i < sectionDataSource.length; i++) {
let shopsdecoratorItem = sectionDataSource[i];
let validFloorData = false;
result.offset = realContainerHeight;
... ... @@ -126,22 +126,22 @@ export default class RedBrand extends Component {
result.length = 90;
realContainerHeight += 90; //height for coupon
}
}else if (shopsdecoratorItem.get('module_type') == 'CarouselImage') {
} else if (shopsdecoratorItem.get('module_type') == 'CarouselImage') {
let swiperHeight = Math.ceil((234 / 750) * width);
let properties = shopsdecoratorItem.get('module_data').get('properties').toJS();
let isModuleMargin = properties.isModuleMargin;
let backgroundHeight =isModuleMargin=='1'?(swiperHeight+10):swiperHeight;
let backgroundHeight = isModuleMargin=='1'?(swiperHeight+10):swiperHeight;
validFloorData = true;
result.length = backgroundHeight;
realContainerHeight += backgroundHeight; //height for RedBrandSwiper
}else if (shopsdecoratorItem.get('module_type') == 'Title') {
} else if (shopsdecoratorItem.get('module_type') == 'Title') {
let properties = shopsdecoratorItem.get('module_data').get('properties').toJS();
let isModuleMargin = properties.isModuleMargin;
let heightDiff = isModuleMargin=='1'?40+10:40;
validFloorData = true;
result.length = heightDiff;
realContainerHeight += heightDiff; //height for title
}else if (shopsdecoratorItem.get('module_type') == 'SingleImage') {
} else if (shopsdecoratorItem.get('module_type') == 'SingleImage') {
let properties = shopsdecoratorItem.get('module_data').get('properties').toJS();
let imageW = properties.width;
let imageH = properties.height;
... ... @@ -149,18 +149,18 @@ export default class RedBrand extends Component {
imageH = imageH ? imageH : 400
let isModuleMargin = properties.isModuleMargin;
let imageHeight = (imageH*width)/(imageW==0?1:imageW);//根据返回信息计算出高度
let backgroundHeight =isModuleMargin=='1'?(imageHeight+10):imageHeight;
let backgroundHeight = isModuleMargin=='1'?(imageHeight+10):imageHeight;
validFloorData = true;
result.length = backgroundHeight;
realContainerHeight += backgroundHeight;
}else if (shopsdecoratorItem.get('module_type') == 'DoubleImage') {
} else if (shopsdecoratorItem.get('module_type') == 'DoubleImage') {
let properties = shopsdecoratorItem.get('module_data').get('properties').toJS();
let isModuleMargin = properties.isModuleMargin;
let backgroundHeight =isModuleMargin=='1'?(width/2+10):width/2;
let backgroundHeight = isModuleMargin=='1'?(width/2+10):width/2;
validFloorData = true;
result.length = backgroundHeight;
realContainerHeight += backgroundHeight;
}else if (shopsdecoratorItem.get('module_type') == 'Video') {
} else if (shopsdecoratorItem.get('module_type') == 'Video') {
let properties = shopsdecoratorItem.get('module_data').get('properties').toJS();
let isModuleMargin = properties.isModuleMargin;
let backgroundHeight = Math.ceil(((363+190)/750)*width);
... ... @@ -168,25 +168,25 @@ export default class RedBrand extends Component {
validFloorData = true;
result.length = backgroundHeight;
realContainerHeight += backgroundHeight;
}else if (shopsdecoratorItem.get('module_type') == 'TripleImage') {
} else if (shopsdecoratorItem.get('module_type') == 'TripleImage') {
let properties = shopsdecoratorItem.get('module_data').get('properties').toJS();
let isModuleMargin = properties.isModuleMargin;
let displayType = properties.displayType;
let nullHeigth = 10;
let heightDiff = 0;
switch (displayType) {
case '1':{
case '1': {
let containerHeigth = Math.ceil((333/750)*width);
heightDiff = isModuleMargin=='1'?containerHeigth+nullHeigth:containerHeigth;
}
break;
case '2':{
case '2': {
let containerHeigth = Math.ceil(width/3);
heightDiff = isModuleMargin=='1'?containerHeigth+nullHeigth:containerHeigth;
}
break;
case '3':
case '4':{
case '4': {
let containerHeigth = Math.ceil((468/750)*width);
heightDiff = isModuleMargin=='1'?containerHeigth+nullHeigth:containerHeigth;
}
... ... @@ -198,7 +198,7 @@ export default class RedBrand extends Component {
result.length = heightDiff;
realContainerHeight += heightDiff;
}else if (shopsdecoratorItem.get('module_type') == 'FourImage') {
} else if (shopsdecoratorItem.get('module_type') == 'FourImage') {
let list = shopsdecoratorItem.get('module_data').get('data').toArray();
let properties = shopsdecoratorItem.get('module_data').get('properties').toJS();
... ... @@ -206,7 +206,7 @@ export default class RedBrand extends Component {
if (list && list.length > 0) {
let itemWidth = (width - 4)/4;
let rowHeightArray = [];
for (var i = 0; i < Math.ceil(list.length / 4); i++) {
for (let i = 0; i < Math.ceil(list.length / 4); i++) {
rowHeightArray.push(itemWidth);
}
list.map((item, i) => {
... ... @@ -217,7 +217,7 @@ export default class RedBrand extends Component {
let backgroundWidth = width;
let backgroundHeight = 0;
for (var i = 0; i < rowHeightArray.length; i++) {
for (let i = 0; i < rowHeightArray.length; i++) {
backgroundHeight += rowHeightArray[i];
}
if (isModuleMargin == '1') {
... ... @@ -227,7 +227,7 @@ export default class RedBrand extends Component {
result.length = backgroundHeight;
realContainerHeight += backgroundHeight;
}
}else if (shopsdecoratorItem.get('module_type') == 'AppRecommendProduct') {
} else if (shopsdecoratorItem.get('module_type') == 'AppRecommendProduct') {
let properties = shopsdecoratorItem.get('module_data').get('properties').toJS();
let isModuleMargin = properties.isModuleMargin;
... ... @@ -253,7 +253,7 @@ export default class RedBrand extends Component {
}
}
}else if (item.key == 'productList') {
} else if (item.key == 'productList') {
let brandFilterContainerHeight = this.props.fliter == '2' ? 84 : 40;
countNumb++; // filter
if (countNumb == layoutIndex) {
... ... @@ -263,7 +263,7 @@ export default class RedBrand extends Component {
};
this.layoutLenghtOffesetForIndex['fliter' + fliter + 'row' + countNumb] = result;
return result;
}else if (layoutIndex > countNumb) {
} else if (layoutIndex > countNumb) {
let rowHeight = Math.ceil(254 * width / 320);
let rowMarginTop = Math.ceil(10 * DEVICE_WIDTH_RATIO);
let rowMarginBottom = Math.ceil(4 * DEVICE_WIDTH_RATIO);
... ... @@ -282,7 +282,7 @@ export default class RedBrand extends Component {
}
getItemLayout(data, index){
getItemLayout(data, index) {
let {fliter} = this.props;
let key = key = 'fliter' + fliter + 'row' + index;
let sectionInfo = {
... ... @@ -358,8 +358,16 @@ export default class RedBrand extends Component {
if (sectionID == 'ShopBanner') {
let {launchProfile, shopsdecorator} = this.props;
let resList = shopsdecorator.modules?shopsdecorator.modules.toArray():[];
return(<Header resource={rowData} launchProfile={launchProfile} onPressLaunchProfile={this._onPressLaunchProfile} onPressCollection={this.props.onPressCollection} onPressLink={this.props.onPressLink}/>);
} else if(sectionID == 'brandReource'){
return (
<Header
resource={rowData}
launchProfile={launchProfile}
onPressLaunchProfile={this._onPressLaunchProfile}
onPressCollection={this.props.onPressCollection}
onPressLink={this.props.onPressLink}
/>
);
} else if (sectionID == 'brandReource') {
let params = {
P_NAME : pageName,
F_ID : rowID,
... ... @@ -370,25 +378,84 @@ export default class RedBrand extends Component {
exposureEnd : 1,
};
if (rowData.get('module_type') == 'coupon') {
return(<CouponCell yh_exposureData={params} resource={rowData} onPressCoupon={this.props.onPressCoupon}/>);
}else if (rowData.get('module_type') == 'CarouselImage') {
return(<RedBrandSwiper yh_exposureData={params} resource={rowData} onPressSlideItem={this.props.onPressProduct}/>);
}else if (rowData.get('module_type') == 'Title') {
return(<Title yh_exposureData={params} resource={rowData} onPressProduct={this.props.onPressProduct}/>);
}else if (rowData.get('module_type') == 'SingleImage') {
return(<SingleImage yh_exposureData={params} resource={rowData} onPressProduct={this.props.onPressProduct}/>);
}else if (rowData.get('module_type') == 'DoubleImage') {
return(<DoubleImage yh_exposureData={params} resource={rowData} onPressProduct={this.props.onPressProduct}/>);
}else if (rowData.get('module_type') == 'Video') {
return(<Video yh_exposureData={params} resource={rowData} videoCounts={videoCounts} onPressVideo={this.props.onPressVideo}/>);
}else if (rowData.get('module_type') == 'TripleImage') {
return(<TripleImage yh_exposureData={params} resource={rowData} onPressProduct={this.props.onPressProduct}/>);
}else if (rowData.get('module_type') == 'FourImage') {
return(<FourImages yh_exposureData={params} resource={rowData} onPressProduct={this.props.onPressProduct}/>);
}else if (rowData.get('module_type') == 'AppRecommendProduct') {
return(<GoodsGroupList yh_exposureData={params} resource={rowData} onPressProductRecommend={this.props.onPressProductRecommend}/>);
}else {
return (<View style={{height:0,width:width,backgroundColor:'red'}}/>);
return (
<CouponCell
yh_exposureData={params}
resource={rowData}
onPressCoupon={this.props.onPressCoupon}
/>
);
} else if (rowData.get('module_type') == 'CarouselImage') {
return (
<RedBrandSwiper
yh_exposureData={params}
resource={rowData}
onPressSlideItem={this.props.onPressProduct}
/>
);
} else if (rowData.get('module_type') == 'Title') {
return (
<Title
yh_exposureData={params}
resource={rowData}
onPressProduct={this.props.onPressProduct}
/>
);
} else if (rowData.get('module_type') == 'SingleImage') {
return (
<SingleImage
yh_exposureData={params}
resource={rowData}
onPressProduct={this.props.onPressProduct}
/>
);
} else if (rowData.get('module_type') == 'DoubleImage') {
return (
<DoubleImage
yh_exposureData={params}
resource={rowData}
onPressProduct={this.props.onPressProduct}
/>
);
} else if (rowData.get('module_type') == 'Video') {
return (
<Video
yh_exposureData={params}
resource={rowData}
videoCounts={videoCounts}
onPressVideo={this.props.onPressVideo}
/>
);
} else if (rowData.get('module_type') == 'TripleImage') {
return (
<TripleImage
yh_exposureData={params}
resource={rowData}
onPressProduct={this.props.onPressProduct}
/>
);
} else if (rowData.get('module_type') == 'FourImage') {
return (
<FourImages
yh_exposureData={params}
resource={rowData}
onPressProduct={this.props.onPressProduct}
/>
);
} else if (rowData.get('module_type') == 'AppRecommendProduct') {
return (
<GoodsGroupList
yh_exposureData={params}
resource={rowData}
onPressProductRecommend={this.props.onPressProductRecommend}
/>
);
} else {
return (
<View
style={{height:0,width:width,backgroundColor:'red'}}
/>
);
}
} else if (sectionID == 'productList' || sectionID == 'newProductList') {
... ... @@ -397,7 +464,7 @@ export default class RedBrand extends Component {
left={rowData.left}
right={rowData.right}
key={'row'+ sectionID + rowID}
rowID={rowID}
index={rowID}
onPressProduct={this.props.onPressProductCell}
/>
);
... ... @@ -484,8 +551,7 @@ export default class RedBrand extends Component {
let needShowToast = this.props.receiveCouponResult.isNeedShow;
let showToastMessage = this.props.receiveCouponResult.showMessage;
const DEVICE_WIDTH_RATIO = width / 320;
let rowHeight = Math.ceil(254 * DEVICE_WIDTH_RATIO);
return (
<View style={styles.container}>
<SectionList
... ... @@ -500,7 +566,9 @@ export default class RedBrand extends Component {
renderItem={this.renderItem}
renderSectionHeader={this.renderSectionHeader}
ListFooterComponent={()=>{
if (fliter == 0) {return <View style={styles.placeholder} />;}
if (fliter == 0) {
return <View style={styles.placeholder} />;
}
if (endReached) {
return <View style={styles.placeholder} />;
} else {
... ... @@ -544,6 +612,9 @@ export default class RedBrand extends Component {
}
}
let {width, height} = Dimensions.get('window');
let headerHeight = Math.ceil((234/750)*width);
let rowWidth = Math.ceil(137.5 * width / 320);
let rowHeight = Math.ceil(254 * width / 320);
let rowMarginTop = Math.ceil(10 * width / 320);
... ...
... ... @@ -23,22 +23,33 @@ export default class RedBrandTwoProductCell extends Component {
super(props);
}
shouldComponentUpdate(nextProps){
if (Immutable.is(nextProps.left, this.props.left)
&& Immutable.is(nextProps.right, this.props.right)
&& nextProps.index == this.props.index) {
return false;
} else {
return true;
}
}
render() {
let {left, right, index, similarIndex} = this.props;
let {left, right, index} = this.props;
return (
<View style={styles.container}>
<View style={styles.subContainer}>
{left ? <BrandProductListCell
style={[styles.listContainer, {paddingLeft: rowMarginHorizontal / 2 }]}
data={left}
onPressProduct={this.props.onPressProductCell}
onPressProduct={this.props.onPressProduct}
rowID={index * 2}
/> : null}
{right ? <BrandProductListCell
style={[styles.listContainer, {paddingLeft: rowMarginHorizontal}]}
data={right}
rowID={index * 2 + 1}
onPressProduct={this.props.onPressProductCell}
onPressProduct={this.props.onPressProduct}
/> : null}
</View>
</View>
... ...