mobile / YH_RNComponent · Commits

Go to a project

Authored by 孙凯
Commit f09c777f895fcda88426bbf4761549b60efebdde 1 parent f69369ae

add 新品到着 改用 sessionList review by hongmo

Inline Side-by-side
Showing 2 changed files with 117 additions and 130 deletions
... ... @@ -5,12 +5,12 @@ import ReactNative, {
View,
Text,
Image,
ListView,
StyleSheet,
Dimensions,
TouchableOpacity,
TouchableHighlight,
InteractionManager,
SectionList,
Platform,
} from 'react-native';
import LoadingIndicator from '../../../common/components/LoadingIndicator';
... ... @@ -24,20 +24,21 @@ import ShopCell from './ShopCell'
import ArticleCell from './ArticleCell'
import NewArrivalHeader from './NewArrivalHeader';
export default class NewArrival extends Component {
const VIEWABILITY_CONFIG = {
minimumViewTime: 3000,
viewAreaCoveragePercentThreshold: 100,
waitForInteraction: true,
};
export default class NewArrival extends React.PureComponent {
constructor(props) {
super(props);
this._renderRow = this._renderRow.bind(this);
this._renderSectionHeader = this._renderSectionHeader.bind(this);
this.renderSectionHeader = this.renderSectionHeader.bind(this);
this._onPressProductFilter = this._onPressProductFilter.bind(this);
this._renderHeader = this._renderHeader.bind(this);
this.dataSource = new ListView.DataSource({
rowHasChanged: (r1, r2) => !Immutable.is(r1, r2),
sectionHeaderHasChanged: (s1, s2) => !Immutable.is(s1, s2),
});
this.renderItem = this.renderItem.bind(this);
this.state = {
showBackToTopButton: false,
... ... @@ -51,10 +52,10 @@ export default class NewArrival extends Component {
_onPressProductFilter(value){
if(value === 'filter'){
this.listView && this.listView.scrollTo({x: 0, y: yPosition, animated: false});
this.sectionList && this.sectionList.scrollToLocation({itemIndex: 0, animated: false});
}
if(value==='default'){
this.listView && this.listView.scrollTo({x: 0, y: yPosition, animated: false});
this.sectionList && this.sectionList.scrollToLocation({itemIndex: 0, animated: false});
}
this.props.onPressProductFilter && this.props.onPressProductFilter(value);
... ... @@ -78,112 +79,100 @@ export default class NewArrival extends Component {
);
}
_renderRow(rowData, sectionID, rowID) {
switch (sectionID) {
case 'latest': {
if (this.props.topPart.isFetching||!rowData) {
return null;
}
let recommend_type = rowData.get('recommend_type');
let data = rowData.get('data');
let yh_exposureDataList = rowData.get('yh_exposureDataList');
let paddingLeft = rowID % 2 == 1 ? rowMarginHorizontal / 2 : rowMarginHorizontal;
let customStyle = rowID == 0 || rowID == 1 ? {paddingLeft} : {paddingLeft};
if (recommend_type == 'hotSearchTerm' || recommend_type == 'seasonSort') {
return (
<TagsCell
style={[styles.listContainer, customStyle]}
recommend_type={recommend_type}
data={data}
yh_exposureDataList={yh_exposureDataList}
index={rowID}
onPressCategory={this.props.onPressCategory}
onPressHotSearch={this.props.onPressHotSearch}
/>
)
}
renderItem(item) {
let rowData = item.item;
let index = item.index;
if (recommend_type == 'hotShop') {
return (
<ShopCell style={[styles.listContainer, customStyle]} data={data} rowID={rowID} onPressShop={this.props.onPressProductListShop}/>
)
}
if (recommend_type == 'fashionArticle') {
return (
<ArticleCell index={rowID} style={[styles.listContainer, customStyle]} data={data} onPressArticle={this.props.onPressArticle}/>
)
}
if (!recommend_type) {
let {
productList,
} = this.props;
let similarIndex = productList.get('similarIndex');
return (
<BrandProductListCell
style={[styles.listContainer, customStyle]}
key={'row' + rowID}
rowID={rowID}
data={rowData}
similarIndex={similarIndex}
onPressProduct={this.props.onPressProductListProduct}
onLongPressProduct={this.props.onLongPressProduct}
onPressFindSimilar={this.props.onPressFindSimilar}
/>
);
}
if (this.props.topPart.isFetching||!rowData) {
return null;
}
}
break;
default:
let recommend_type = rowData.get('recommend_type');
let data = rowData.get('data');
let yh_exposureDataList = rowData.get('yh_exposureDataList');
let paddingLeft = index % 2 == 1 ? rowMarginHorizontal / 2 : rowMarginHorizontal;
let customStyle = index == 0 || index == 1 ? {paddingLeft} : {paddingLeft};
if (recommend_type == 'hotSearchTerm' || recommend_type == 'seasonSort') {
return (
<TagsCell
style={[styles.listContainer, customStyle]}
key={'TagsCell' + index}
recommend_type={recommend_type}
data={data}
yh_exposureDataList={yh_exposureDataList}
index={index}
onPressCategory={this.props.onPressCategory}
onPressHotSearch={this.props.onPressHotSearch}
/>
)
}
if (recommend_type == 'hotShop') {
return (
<ShopCell style={[styles.listContainer, customStyle]} data={data} rowID={index} onPressShop={this.props.onPressProductListShop}/>
)
}
if (recommend_type == 'fashionArticle') {
return (
<ArticleCell index={index} style={[styles.listContainer, customStyle]} data={data} onPressArticle={this.props.onPressArticle}/>
)
}
if (!recommend_type) {
let {
productList,
} = this.props;
let similarIndex = productList.get('similarIndex');
return (
<BrandProductListCell
style={[styles.listContainer, customStyle]}
key={'row' + index}
rowID={index}
data={rowData}
similarIndex={similarIndex}
onPressProduct={this.props.onPressProductListProduct}
onLongPressProduct={this.props.onLongPressProduct}
onPressFindSimilar={this.props.onPressFindSimilar}
/>
);
}
return null;
}
_renderSectionHeader(sectionData, sectionID) {
switch (sectionID) {
case 'latest': {
let noFilterValue = true;
this.props.filterFactors.map((value, key) => {
if (value) {
noFilterValue = false;
}
});
let productListIsEmpty = !this.props.productList
|| !this.props.productList.list
||(this.props.productList.list&& this.props.productList.list.size == 0)
||this.props.topPart.isFetching;
if (productListIsEmpty && noFilterValue) {
return null;
}
return (
<View
style={styles.brandFilterContainer}
onLayout={(evt) => {
yPosition = evt.nativeEvent.layout.y;
}}
>
<NewArrivalFilter
onPressFilter={this._onPressProductFilter}
lastSelected={this.props.productList.isFilter}
moreFilter={this.props.productList.isMoreFilter}
selectOrder={this.props.productList.order}
/>
</View>
)
}
break;
default:
renderSectionHeader(section) {
if (section.section.key == 'latest') {
let noFilterValue = true;
this.props.filterFactors.map((value, key) => {
if (value) {
noFilterValue = false;
}
});
let productListIsEmpty = !this.props.productList
|| !this.props.productList.list
||(this.props.productList.list&& this.props.productList.list.size == 0)
||this.props.topPart.isFetching;
if (productListIsEmpty && noFilterValue) {
return null;
}
return (
<View
style={styles.brandFilterContainer}
onLayout={(evt) => {
yPosition = evt.nativeEvent.layout.y;
}}
>
<NewArrivalFilter
onPressFilter={this._onPressProductFilter}
lastSelected={this.props.productList.isFilter}
moreFilter={this.props.productList.isMoreFilter}
selectOrder={this.props.productList.order}
/>
</View>
)
}
return null;
}
render() {
... ... @@ -198,7 +187,7 @@ export default class NewArrival extends Component {
recommendForYou,
} = this.props;
let latest = productList.get('list')&&productList.get('list').size?productList.get('list').toArray():[0];
let latest = productList.get('list')&&productList.get('list').size?productList.get('list').toArray():[];
let dataSource = {
latest,
... ... @@ -208,35 +197,36 @@ export default class NewArrival extends Component {
return (
<View style={styles.container}>
<ListView
<SectionList
ref={(c) => {
this.listView = c;
this.sectionList = c;
}}
yh_viewVisible = {true}
contentContainerStyle={styles.contentContainer}
dataSource={this.dataSource.cloneWithRowsAndSections(dataSource)}
renderRow={this._renderRow}
enableEmptySections={true}
renderSectionHeader={this._renderSectionHeader}
renderHeader={this._renderHeader}
removeClippedSubviews={true}
renderFooter={()=>{
ListHeaderComponent={this._renderHeader}
renderSectionHeader={this.renderSectionHeader}
ListFooterComponent={()=>{
if (endReached) {
return <View style={styles.placeholder} />;
} else {
return <LoadMoreIndicator
isVisible={isLoadingMore}
animating={true}
/>;
/>;
}
}}
enableVirtualization={true}
debug={true}
disableVirtualization={true}
refreshing={false}
renderItem={this.renderItem}
sections={[{data: latest, key: 'latest'}]}
viewabilityConfig={VIEWABILITY_CONFIG}
keyExtractor={(item,index) => 'index'+index}
onEndReached={() => {
if (productList && productList.list && productList.list.size > 0) {
this.props.onEndReached && this.props.onEndReached();
}
}}
initialListSize={30}
pageSize={30}
onScrollEndDrag={(event) => {
if (this.state.showBackToTopButton && event.nativeEvent.contentOffset.y < height) {
this.setState({showBackToTopButton: false});
... ... @@ -266,11 +256,11 @@ export default class NewArrival extends Component {
activeOpacity={1}
delayLongPress={1000000}
onPress={() =>{
this.listView && this.listView.scrollTo({x: 0, y: 0, animated: true});
this.sectionList && this.sectionList.scrollToLocation({itemIndex: 0, animated: true});
this.setState({showBackToTopButton: false});
}}
onLongPress={() =>{
this.listView && this.listView.scrollTo({x: 0, y: 0, animated: true});
this.sectionList && this.sectionList.scrollToLocation({itemIndex: 0, animated: true});
this.setState({showBackToTopButton: false});
}}
>
... ... @@ -287,9 +277,6 @@ export default class NewArrival extends Component {
}
let {width, height} = Dimensions.get('window');
width = Math.ceil(width);
height = Math.ceil(height);
let yPosition = 0;
let rowWidth = Math.ceil(137.5 * width / 320);
let rowHeight = Math.ceil(254 * width / 320);
... ...
... ... @@ -129,6 +129,7 @@ let rowWidth = Math.ceil(width / 2);
let styles = StyleSheet.create({
allcontainer:{
flex: 1,
position: 'absolute',
flexDirection: 'column',
left: 0,
width: width,
... ... @@ -145,10 +146,9 @@ let styles = StyleSheet.create({
container:{
flex: 1,
flexDirection: 'row',
position: 'absolute',
left: 0,
width: width,
height: height - 40 - 44 - 64,
height: height - 40 - 64,
backgroundColor: '#ffffff',
borderTopWidth: 0,
borderLeftWidth: 0,
... ...