|
|
|
'use strict';
|
|
|
|
|
|
|
|
import React, {Component} from 'react';
|
|
|
|
import ReactNative, {
|
|
|
|
View,
|
|
|
|
Text,
|
|
|
|
Image,
|
|
|
|
ListView,
|
|
|
|
StyleSheet,
|
|
|
|
Dimensions,
|
|
|
|
TouchableOpacity,
|
|
|
|
} from 'react-native';
|
|
|
|
|
|
|
|
import LoadingIndicator from '../../../common/components/LoadingIndicator';
|
|
|
|
import ProductCell from '../browse/ProductCell';
|
|
|
|
import CategorySelector from '../browse/CategorySelector';
|
|
|
|
import TabHeader from './TabHeader'
|
|
|
|
import NoDataView from './NoDataView'
|
|
|
|
import { SwipeListView } from 'react-native-swipe-list-view';
|
|
|
|
|
|
|
|
export default class Product extends Component {
|
|
|
|
|
|
|
|
constructor(props) {
|
|
|
|
super(props);
|
|
|
|
|
|
|
|
this.renderRow = this.renderRow.bind(this);
|
|
|
|
this.renderHeader = this.renderHeader.bind(this);
|
|
|
|
this.handleScroll = this.handleScroll.bind(this);
|
|
|
|
this.renderSectionHeader = this.renderSectionHeader.bind(this);
|
|
|
|
this.renderFooter = this.renderFooter.bind(this);
|
|
|
|
this.deleteRow = this.deleteRow.bind(this);
|
|
|
|
|
|
|
|
this.dataSource = new ListView.DataSource({
|
|
|
|
rowHasChanged: (r1, r2) => !Immutable.is(r1, r2),
|
|
|
|
});
|
|
|
|
this.state = {
|
|
|
|
isSwiping: false,
|
|
|
|
showFooter: false,
|
|
|
|
};
|
|
|
|
|
|
|
|
this.listView = null;
|
|
|
|
this.swipeable = {};
|
|
|
|
}
|
|
|
|
|
|
|
|
handleScroll() {
|
|
|
|
let {editing,commonProduct, globalProduct} = this.props.data;
|
|
|
|
|
|
|
|
if (editing &&(commonProduct.get('editedIndex') >= 0 || globalProduct.get('editedIndex') >= 0 )) {
|
|
|
|
this.props.setEditedIndex && this.props.setEditedIndex(-1);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
rightButtons(rowData, rowID) {
|
|
|
|
const rightButtons = [
|
|
|
|
<TouchableOpacity
|
|
|
|
activeOpacity={1}
|
|
|
|
style={{
|
|
|
|
flex: 1,
|
|
|
|
justifyContent: 'center',
|
|
|
|
backgroundColor: 'red',
|
|
|
|
}}
|
|
|
|
onPress={() => {
|
|
|
|
this.props.onPressDelete && this.props.onPressDelete(rowData, rowID);
|
|
|
|
}}
|
|
|
|
>
|
|
|
|
<Text style={{color: 'white', fontSize: 17, paddingLeft: 20}}>删除</Text>
|
|
|
|
</TouchableOpacity>,
|
|
|
|
];
|
|
|
|
|
|
|
|
return rightButtons;
|
|
|
|
}
|
|
|
|
|
|
|
|
renderRow(rowData, sectionID, rowID) {
|
|
|
|
let {
|
|
|
|
commonProduct,
|
|
|
|
globalProduct,
|
|
|
|
editing,
|
|
|
|
currentTab,
|
|
|
|
} = this.props.data;
|
|
|
|
|
|
|
|
let editedRow = -1;
|
|
|
|
if (currentTab == 'common') {
|
|
|
|
let {editedIndex} = commonProduct;
|
|
|
|
editedRow = editedIndex;
|
|
|
|
}
|
|
|
|
if (currentTab == 'global') {
|
|
|
|
let {editedIndex} = globalProduct;
|
|
|
|
editedRow = editedIndex;
|
|
|
|
}
|
|
|
|
|
|
|
|
let buttons = editing?null: this.rightButtons(rowData, rowID);
|
|
|
|
return (
|
|
|
|
<ProductCell
|
|
|
|
key={'row' + rowID}
|
|
|
|
data={rowData}
|
|
|
|
onPressProduct={this.props.onPressProduct}
|
|
|
|
onPressFindSimilar={this.props.onPressFindSimilar}
|
|
|
|
editing={editing}
|
|
|
|
editedRow={editedRow}
|
|
|
|
rowID={parseInt(rowID)}
|
|
|
|
setEditedIndex={this.props.setEditedIndex}
|
|
|
|
onPressDelete={this.props.onPressDelete}
|
|
|
|
currentTab={currentTab}
|
|
|
|
/>
|
|
|
|
);
|
|
|
|
}
|
|
|
|
|
|
|
|
deleteRow(data, secId, rowId, rowMap) {
|
|
|
|
rowMap[`${secId}${rowId}`].closeRow();
|
|
|
|
this.props.onPressDelete && this.props.onPressDelete(data, rowId);
|
|
|
|
}
|
|
|
|
|
|
|
|
renderFooter() {
|
|
|
|
let {
|
|
|
|
commonProduct,
|
|
|
|
currentTab,
|
|
|
|
} = this.props.data;
|
|
|
|
if (currentTab == 'common' && commonProduct.get('productList').size == 0) {
|
|
|
|
return (
|
|
|
|
<NoDataView type={'product'} onPressGuangGuang={this.props.onPressGuangGuang}/>
|
|
|
|
);
|
|
|
|
}
|
|
|
|
if (this.state.showFooter) {
|
|
|
|
return(
|
|
|
|
<View style={styles.footerContainer}>
|
|
|
|
<Image style={styles.footerImage} resizeMode={'contain'} source={require('../../images/product/shared_bottom.png')}/>
|
|
|
|
</View>
|
|
|
|
)
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
renderHeader() {
|
|
|
|
let {
|
|
|
|
commonProduct,
|
|
|
|
globalProduct,
|
|
|
|
editing,
|
|
|
|
currentTab,
|
|
|
|
} = this.props.data;
|
|
|
|
let {productList} = globalProduct;
|
|
|
|
if (productList.size == 0) {
|
|
|
|
return null;
|
|
|
|
}
|
|
|
|
return (<TabHeader
|
|
|
|
currentTab={currentTab}
|
|
|
|
onPressTab={(tab)=>{
|
|
|
|
if (tab == currentTab) {
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
this.props.onPressTab && this.props.onPressTab(tab);
|
|
|
|
}}
|
|
|
|
/>)
|
|
|
|
}
|
|
|
|
|
|
|
|
renderSectionHeader(sectionData, sectionID) {
|
|
|
|
let {
|
|
|
|
commonProduct,
|
|
|
|
globalProduct,
|
|
|
|
editing,
|
|
|
|
currentTab,
|
|
|
|
} = this.props.data;
|
|
|
|
|
|
|
|
if (currentTab == 'global') {
|
|
|
|
return null;
|
|
|
|
}
|
|
|
|
|
|
|
|
if (currentTab == 'common') {
|
|
|
|
let {isFetching, selectedProductList, categoryList, selectedCategoryIndex} = commonProduct;
|
|
|
|
if (selectedProductList.size == 0) {
|
|
|
|
return null;
|
|
|
|
}
|
|
|
|
return (
|
|
|
|
<CategorySelector
|
|
|
|
data={categoryList}
|
|
|
|
selectedCategoryIndex={selectedCategoryIndex}
|
|
|
|
onPressCategory={(rowData, rowID) => {
|
|
|
|
this.listView && this.listView.scrollTo({x: 0, y: 0, animated: false});
|
|
|
|
this.props.onPressCategory && this.props.onPressCategory(rowData, rowID);
|
|
|
|
}}
|
|
|
|
/>
|
|
|
|
);
|
|
|
|
}
|
|
|
|
return null;
|
|
|
|
}
|
|
|
|
|
|
|
|
render() {
|
|
|
|
|
|
|
|
let {
|
|
|
|
commonProduct,
|
|
|
|
globalProduct,
|
|
|
|
editing,
|
|
|
|
currentTab,
|
|
|
|
} = this.props.data;
|
|
|
|
|
|
|
|
let dataArray = [];
|
|
|
|
let isLoading = false;
|
|
|
|
let showList = (commonProduct.get('productList').size && !commonProduct.get('isFetching')) || (globalProduct.get('productList').size && !commonProduct.get('isFetching'));
|
|
|
|
let showEmpty = commonProduct.get('showEmpty') && globalProduct.get('showEmpty');
|
|
|
|
if (currentTab == 'common') {
|
|
|
|
let {isFetching, selectedProductList, categoryList, selectedCategoryIndex, isDeleting} = commonProduct;
|
|
|
|
isLoading = (selectedProductList.size == 0 && isFetching) || isDeleting;
|
|
|
|
dataArray = selectedProductList.toArray();
|
|
|
|
}
|
|
|
|
|
|
|
|
if (currentTab == 'global') {
|
|
|
|
let {isFetching, productList, isDeleting} = globalProduct;
|
|
|
|
isLoading = (productList.size == 0 && isFetching) || isDeleting;
|
|
|
|
dataArray = productList.toArray();
|
|
|
|
}
|
|
|
|
|
|
|
|
return (
|
|
|
|
<View style={styles.container}>
|
|
|
|
{showList ? <SwipeListView
|
|
|
|
listViewRef={ ref => this.listView = ref }
|
|
|
|
enableEmptySections={true}
|
|
|
|
dataSource={this.dataSource.cloneWithRows(dataArray)}
|
|
|
|
renderRow={this.renderRow}
|
|
|
|
renderHeader={this.renderHeader}
|
|
|
|
renderSectionHeader={this.renderSectionHeader}
|
|
|
|
onScroll={this.handleScroll}
|
|
|
|
disableRightSwipe={true}
|
|
|
|
renderFooter={this.renderFooter}
|
|
|
|
bounces={dataArray.length > 0}
|
|
|
|
scrollEnabled={!this.state.isSwiping}
|
|
|
|
onContentSizeChange={(contentWidth, contentHeight) => {
|
|
|
|
this.setState({showFooter: contentHeight >= height - 64})
|
|
|
|
}}
|
|
|
|
renderHiddenRow={ (data, secId, rowId, rowMap) => (
|
|
|
|
<View style={styles.rowBack}>
|
|
|
|
<Text></Text>
|
|
|
|
<Text>
|
|
|
|
<TouchableOpacity activeOpacity={1} style={styles.tailContainer} onPress={_ => this.deleteRow(data, secId, rowId, rowMap)}>
|
|
|
|
<Text style={styles.tailText}>删除</Text>
|
|
|
|
</TouchableOpacity>
|
|
|
|
</Text>
|
|
|
|
</View>
|
|
|
|
)}
|
|
|
|
rightOpenValue={-70}
|
|
|
|
|
|
|
|
|
|
|
|
/> : null}
|
|
|
|
{showEmpty ? <NoDataView type={'product'} onPressGuangGuang={this.props.onPressGuangGuang}/> : null}
|
|
|
|
<LoadingIndicator
|
|
|
|
isVisible={isLoading}
|
|
|
|
/>
|
|
|
|
</View>
|
|
|
|
);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
let {width, height} = Dimensions.get('window');
|
|
|
|
|
|
|
|
|
|
|
|
let styles = StyleSheet.create({
|
|
|
|
container: {
|
|
|
|
flex: 1,
|
|
|
|
backgroundColor:'#f0f0f0',
|
|
|
|
},
|
|
|
|
|
|
|
|
rowBack: {
|
|
|
|
alignItems: 'center',
|
|
|
|
backgroundColor: '#DDD',
|
|
|
|
flex: 1,
|
|
|
|
flexDirection: 'row',
|
|
|
|
justifyContent: 'space-between',
|
|
|
|
paddingLeft: 15,
|
|
|
|
},
|
|
|
|
tailContainer: {
|
|
|
|
width: 70,
|
|
|
|
height: 130,
|
|
|
|
alignItems: 'center',
|
|
|
|
justifyContent: 'center',
|
|
|
|
backgroundColor: 'red'
|
|
|
|
},
|
|
|
|
tailText: {
|
|
|
|
color: 'white',
|
|
|
|
fontSize: 17,
|
|
|
|
backgroundColor: 'red'
|
|
|
|
},
|
|
|
|
footerContainer: {
|
|
|
|
width: width,
|
|
|
|
height: 74,
|
|
|
|
alignItems: 'center',
|
|
|
|
justifyContent: 'center',
|
|
|
|
backgroundColor: '#f0f0f0',
|
|
|
|
},
|
|
|
|
footerImage: {
|
|
|
|
width: 200,
|
|
|
|
height: 44,
|
|
|
|
}
|
|
|
|
}); |
...
|
...
|
|
