Authored by 孙凯

add 侧滑删除 review by hongmo

... ... @@ -31,7 +31,7 @@ export default class GetPurchaseCell extends React.Component {
render() {
let resource = this.props.resource;
let backgroundHeigt = resource == '0' ? 40 + 20 : 40;
console.log(this.props);
return(
<View style={{alignItems: 'center',justifyContent: 'center',height: backgroundHeigt,width:width,backgroundColor: 'white'}}>
<TouchableOpacity activeOpacity={0.5} onPress={() => {
... ...
... ... @@ -7,6 +7,7 @@ import GetPurchaseCell from './GetPurchaseCell';
import InvalidLimitCodeTitle from './InvalidLimitCodeTitle';
import LimitCodeProductsCell from './LimitCodeProductsCell';
import LoadingIndicator from '../../../common/components/LoadingIndicator';
import Swipeable from 'react-native-swipeable';
import ReactNative, {
View,
... ... @@ -29,11 +30,23 @@ export default class PurchaseCode extends Component {
this.renderRow = this.renderRow.bind(this);
this.renderSectionHeader = this.renderSectionHeader.bind(this);
this.handleScroll = this.handleScroll.bind(this);
this.onOpen = this.onOpen.bind(this);
this.onClose = this.onClose.bind(this);
this.onPressDelete = this.onPressDelete.bind(this);
this.dataSource = new ListView.DataSource({
rowHasChanged: (r1, r2) => !Immutable.is(r1, r2),
sectionHeaderHasChanged: (s1, s2) => !Immutable.is(s1, s2),
});
this.state = {
currentlyOpenSwipeable: null,
isSwiping: false,
showFooter: false,
};
this.swipeable = {};
}
shouldComponentUpdate(nextProps){
... ... @@ -45,6 +58,54 @@ export default class PurchaseCode extends Component {
}
}
componentWillReceiveProps(nextProps) {
}
handleScroll() {
const {currentlyOpenSwipeable} = this.state;
if (currentlyOpenSwipeable) {
currentlyOpenSwipeable.recenter();
}
}
onOpen(event, gestureState, swipeable) {
const {currentlyOpenSwipeable} = this.state;
if (currentlyOpenSwipeable && currentlyOpenSwipeable !== swipeable) {
currentlyOpenSwipeable.recenter();
}
this.setState({currentlyOpenSwipeable: swipeable});
}
onClose() {
this.setState({currentlyOpenSwipeable: null});
}
rightButtons(rowData, rowID) {
const rightButtons = [
<TouchableOpacity activeOpacity={1}
style={{ width: width,height: Math.ceil((200 / 640) * width), justifyContent: 'center', backgroundColor: 'red'}}
onPress={() => {
this.onPressDelete && this.onPressDelete(rowData, rowID);
}}
>
<Text style={{color: 'white', fontSize: 17, paddingLeft: 20}}>删除</Text>
</TouchableOpacity>,
];
return rightButtons;
}
onPressDelete(rowData, rowID) {
const {currentlyOpenSwipeable} = this.state;
if (currentlyOpenSwipeable) {
currentlyOpenSwipeable.recenter();
}
this.props.onPressDelete && this.props.onPressDelete(rowData, rowID);
}
renderRow(rowData, sectionID, rowID, highlightRow) {
if (sectionID == 'howToGetCode') {
return(
... ... @@ -52,7 +113,7 @@ export default class PurchaseCode extends Component {
);
}else if (sectionID == 'limitCodeProducts') {
return(
<LimitCodeProductsCell resource={rowData} onPressLimitCodeProducts={this.props.onPressLimitCodeProducts}/>
<LimitCodeProductsCell key={'row' + sectionID + rowID} resource={rowData} onPressLimitCodeProducts={this.props.onPressLimitCodeProducts}/>
);
}else if (sectionID == 'invalidLimitCodeProductsTitle') {
let {resource} = this.props;
... ... @@ -66,8 +127,18 @@ export default class PurchaseCode extends Component {
<InvalidLimitCodeTitle />
);
}else if (sectionID == 'invalidLimitCodeProducts') {
let buttons = this.rightButtons(rowData?rowData.toJS():'', rowID);
return(
<LimitCodeProductsCell resource={rowData} onPressLimitCodeProducts={this.props.onPressLimitCodeProducts}/>
<Swipeable
rightButtons={buttons}
rightButtonWidth={70}
onRightButtonsOpenRelease={this.onOpen}
onRightButtonsCloseRelease={this.onClose}
onSwipeStart={() => this.setState({isSwiping: true})}
onSwipeRelease={() => this.setState({isSwiping: false})}
>
<LimitCodeProductsCell key={'row' + sectionID + rowID} resource={rowData} onPressLimitCodeProducts={this.props.onPressLimitCodeProducts}/>
</Swipeable>
);
}
return null;
... ... @@ -100,11 +171,11 @@ export default class PurchaseCode extends Component {
<View style={styles.container}>
{showNoContent?<NoDataView onPressHowToGetCodeLink={this.props.onPressHowToGetCodeLink} onPressMore={this.props.onPressMore}/>:<ListView
ref='PurchaseCode'
contentContainerStyle={styles.contentContainer}
enableEmptySections={true}
dataSource={this.dataSource.cloneWithRowsAndSections(dataSource)}
renderRow={this.renderRow}
renderSectionHeader={this.renderSectionHeader}
onScroll={this.handleScroll}
/>}
<LoadingIndicator
isVisible={isFetching}
... ... @@ -121,8 +192,4 @@ let styles = StyleSheet.create({
flex: 1,
backgroundColor: '#e5e5e5',
},
contentContainer:{
flexDirection: 'row',
flexWrap: 'wrap',
},
});
... ...
... ... @@ -47,6 +47,7 @@ class PurchaseCodeContainer extends Component {
this._onPressHowToGetCodeLink = this._onPressHowToGetCodeLink.bind(this);
this._onPressMore = this._onPressMore.bind(this);
this._onPressLimitCodeProducts = this._onPressLimitCodeProducts.bind(this);
this._onPressDelete = this._onPressDelete.bind(this);
this.subscription = NativeAppEventEmitter.addListener(
'purchaseListChange',
... ... @@ -76,6 +77,10 @@ class PurchaseCodeContainer extends Component {
ReactNative.NativeModules.YH_MyAssetsViewHelper.pushLimitPurchaseDetailVC(data.limitProductCode);
}
_onPressDelete(data, index){
this.props.actions.deleteMinePurchaseCodeLimitCode(data);
}
render() {
let {purchaseCode} = this.props;
... ... @@ -86,6 +91,7 @@ class PurchaseCodeContainer extends Component {
onPressHowToGetCodeLink={this._onPressHowToGetCodeLink}
onPressMore={this._onPressMore}
onPressLimitCodeProducts={this._onPressLimitCodeProducts}
onPressDelete={this._onPressDelete}
/>
</View>
);
... ...
... ... @@ -59,7 +59,7 @@ export function getMineLimitPurchaseList() {
};
}
export function fetchDeleteMinePurchaseCodeLimitCode() {
export function DeleteMinePurchaseCodeLimitCodeRequest() {
return {
type: DELETE_MINE_LIMIT_PURCHASE_REQUEST,
};
... ... @@ -84,13 +84,12 @@ export function deleteMinePurchaseCodeLimitCode(data) {
let {app, purchaseCode} = getState();
let limitCode = data.limitCode;
let fetchDeleteMinePurchaseCodeLimitCode = (uid) => {
dispatch(MineLimitPurchaseListRequest());
return new PurchaseCodeService(app.host).DeleteMinePurchaseCodeLimitCode(uid,limitCode)
let res = parseMinePurchaseCodeLimitCode(data,purchaseCode?purchaseCode.toJS():'')
dispatch(DeleteMinePurchaseCodeLimitCodeSuccess(res));
return new PurchaseCodeService(app.host).deleteMinePurchaseCodeLimitCode(uid,limitCode)
.then(json => {
dispatch(DeleteMinePurchaseCodeLimitCodeSuccess(json));
})
.catch(error => {
dispatch(DeleteMinePurchaseCodeLimitCodeFailure(error));
});
}
... ... @@ -102,3 +101,18 @@ export function deleteMinePurchaseCodeLimitCode(data) {
});
};
}
function parseMinePurchaseCodeLimitCode (data,purchaseCode) {
let invalidLimitCodeProducts = purchaseCode?purchaseCode.invalidLimitCodeProducts:[];
let index = -1;
for (var i = 0; i < invalidLimitCodeProducts.length; i++) {
let item = invalidLimitCodeProducts[i];
if (item.limitCode == data.limitCode) {
index = i;
}
}
if (index != -1) {
invalidLimitCodeProducts.splice( index, 1 );
}
return invalidLimitCodeProducts;
}
... ...
... ... @@ -38,10 +38,9 @@ export default function detailReducer(state=initialState, action) {
.set('error', null);
}
case DELETE_MINE_LIMIT_PURCHASE_SUCCESS: {
// return state.set('isFetching', false)
// .set('error', null)
// .set('invalidLimitCodeProducts', Immutable.fromJS(action.payload.invalidLimitCodeProducts))
// .set('limitCodeProducts', Immutable.fromJS(action.payload.limitCodeProducts));
return state.set('isFetching', false)
.set('error', null)
.set('invalidLimitCodeProducts', Immutable.fromJS(action.payload))
}
case DELETE_MINE_LIMIT_PURCHASE_FAILURE: {
return state.set('isFetching', false)
... ...