mobile / YH_RNComponent · Commits

Go to a project

Authored by 孙凯
Commit 96b05096ba7693c465444b28fe9a237aa552c6d6 1 parent feef502b

add 侧滑删除 review by hongmo

Inline Side-by-side
Showing 5 changed files with 103 additions and 17 deletions
@@ -31,7 +31,7 @@ export default class GetPurchaseCell extends React.Component { @@ -31,7 +31,7 @@ export default class GetPurchaseCell extends React.Component {
31 render() { 31 render() {
32 let resource = this.props.resource; 32 let resource = this.props.resource;
33 let backgroundHeigt = resource == '0' ? 40 + 20 : 40; 33 let backgroundHeigt = resource == '0' ? 40 + 20 : 40;
34 - console.log(this.props); 34 +
35 return( 35 return(
36 <View style={{alignItems: 'center',justifyContent: 'center',height: backgroundHeigt,width:width,backgroundColor: 'white'}}> 36 <View style={{alignItems: 'center',justifyContent: 'center',height: backgroundHeigt,width:width,backgroundColor: 'white'}}>
37 <TouchableOpacity activeOpacity={0.5} onPress={() => { 37 <TouchableOpacity activeOpacity={0.5} onPress={() => {
@@ -7,6 +7,7 @@ import GetPurchaseCell from './GetPurchaseCell'; @@ -7,6 +7,7 @@ import GetPurchaseCell from './GetPurchaseCell';
7 import InvalidLimitCodeTitle from './InvalidLimitCodeTitle'; 7 import InvalidLimitCodeTitle from './InvalidLimitCodeTitle';
8 import LimitCodeProductsCell from './LimitCodeProductsCell'; 8 import LimitCodeProductsCell from './LimitCodeProductsCell';
9 import LoadingIndicator from '../../../common/components/LoadingIndicator'; 9 import LoadingIndicator from '../../../common/components/LoadingIndicator';
  10 +import Swipeable from 'react-native-swipeable';
10 11
11 import ReactNative, { 12 import ReactNative, {
12 View, 13 View,
@@ -29,11 +30,23 @@ export default class PurchaseCode extends Component { @@ -29,11 +30,23 @@ export default class PurchaseCode extends Component {
29 30
30 this.renderRow = this.renderRow.bind(this); 31 this.renderRow = this.renderRow.bind(this);
31 this.renderSectionHeader = this.renderSectionHeader.bind(this); 32 this.renderSectionHeader = this.renderSectionHeader.bind(this);
  33 + this.handleScroll = this.handleScroll.bind(this);
  34 + this.onOpen = this.onOpen.bind(this);
  35 + this.onClose = this.onClose.bind(this);
  36 + this.onPressDelete = this.onPressDelete.bind(this);
32 37
33 this.dataSource = new ListView.DataSource({ 38 this.dataSource = new ListView.DataSource({
34 rowHasChanged: (r1, r2) => !Immutable.is(r1, r2), 39 rowHasChanged: (r1, r2) => !Immutable.is(r1, r2),
35 sectionHeaderHasChanged: (s1, s2) => !Immutable.is(s1, s2), 40 sectionHeaderHasChanged: (s1, s2) => !Immutable.is(s1, s2),
36 }); 41 });
  42 +
  43 + this.state = {
  44 + currentlyOpenSwipeable: null,
  45 + isSwiping: false,
  46 + showFooter: false,
  47 + };
  48 +
  49 + this.swipeable = {};
37 } 50 }
38 51
39 shouldComponentUpdate(nextProps){ 52 shouldComponentUpdate(nextProps){
@@ -45,6 +58,54 @@ export default class PurchaseCode extends Component { @@ -45,6 +58,54 @@ export default class PurchaseCode extends Component {
45 } 58 }
46 } 59 }
47 60
  61 + componentWillReceiveProps(nextProps) {
  62 +
  63 + }
  64 +
  65 + handleScroll() {
  66 + const {currentlyOpenSwipeable} = this.state;
  67 +
  68 + if (currentlyOpenSwipeable) {
  69 + currentlyOpenSwipeable.recenter();
  70 + }
  71 + }
  72 +
  73 + onOpen(event, gestureState, swipeable) {
  74 + const {currentlyOpenSwipeable} = this.state;
  75 + if (currentlyOpenSwipeable && currentlyOpenSwipeable !== swipeable) {
  76 + currentlyOpenSwipeable.recenter();
  77 + }
  78 +
  79 + this.setState({currentlyOpenSwipeable: swipeable});
  80 + }
  81 +
  82 + onClose() {
  83 + this.setState({currentlyOpenSwipeable: null});
  84 + }
  85 +
  86 + rightButtons(rowData, rowID) {
  87 + const rightButtons = [
  88 + <TouchableOpacity activeOpacity={1}
  89 + style={{ width: width,height: Math.ceil((200 / 640) * width), justifyContent: 'center', backgroundColor: 'red'}}
  90 + onPress={() => {
  91 + this.onPressDelete && this.onPressDelete(rowData, rowID);
  92 + }}
  93 + >
  94 + <Text style={{color: 'white', fontSize: 17, paddingLeft: 20}}>删除</Text>
  95 + </TouchableOpacity>,
  96 + ];
  97 +
  98 + return rightButtons;
  99 + }
  100 +
  101 + onPressDelete(rowData, rowID) {
  102 + const {currentlyOpenSwipeable} = this.state;
  103 + if (currentlyOpenSwipeable) {
  104 + currentlyOpenSwipeable.recenter();
  105 + }
  106 + this.props.onPressDelete && this.props.onPressDelete(rowData, rowID);
  107 + }
  108 +
48 renderRow(rowData, sectionID, rowID, highlightRow) { 109 renderRow(rowData, sectionID, rowID, highlightRow) {
49 if (sectionID == 'howToGetCode') { 110 if (sectionID == 'howToGetCode') {
50 return( 111 return(
@@ -52,7 +113,7 @@ export default class PurchaseCode extends Component { @@ -52,7 +113,7 @@ export default class PurchaseCode extends Component {
52 ); 113 );
53 }else if (sectionID == 'limitCodeProducts') { 114 }else if (sectionID == 'limitCodeProducts') {
54 return( 115 return(
55 - <LimitCodeProductsCell resource={rowData} onPressLimitCodeProducts={this.props.onPressLimitCodeProducts}/> 116 + <LimitCodeProductsCell key={'row' + sectionID + rowID} resource={rowData} onPressLimitCodeProducts={this.props.onPressLimitCodeProducts}/>
56 ); 117 );
57 }else if (sectionID == 'invalidLimitCodeProductsTitle') { 118 }else if (sectionID == 'invalidLimitCodeProductsTitle') {
58 let {resource} = this.props; 119 let {resource} = this.props;
@@ -66,8 +127,18 @@ export default class PurchaseCode extends Component { @@ -66,8 +127,18 @@ export default class PurchaseCode extends Component {
66 <InvalidLimitCodeTitle /> 127 <InvalidLimitCodeTitle />
67 ); 128 );
68 }else if (sectionID == 'invalidLimitCodeProducts') { 129 }else if (sectionID == 'invalidLimitCodeProducts') {
  130 + let buttons = this.rightButtons(rowData?rowData.toJS():'', rowID);
69 return( 131 return(
70 - <LimitCodeProductsCell resource={rowData} onPressLimitCodeProducts={this.props.onPressLimitCodeProducts}/> 132 + <Swipeable
  133 + rightButtons={buttons}
  134 + rightButtonWidth={70}
  135 + onRightButtonsOpenRelease={this.onOpen}
  136 + onRightButtonsCloseRelease={this.onClose}
  137 + onSwipeStart={() => this.setState({isSwiping: true})}
  138 + onSwipeRelease={() => this.setState({isSwiping: false})}
  139 + >
  140 + <LimitCodeProductsCell key={'row' + sectionID + rowID} resource={rowData} onPressLimitCodeProducts={this.props.onPressLimitCodeProducts}/>
  141 + </Swipeable>
71 ); 142 );
72 } 143 }
73 return null; 144 return null;
@@ -100,11 +171,11 @@ export default class PurchaseCode extends Component { @@ -100,11 +171,11 @@ export default class PurchaseCode extends Component {
100 <View style={styles.container}> 171 <View style={styles.container}>
101 {showNoContent?<NoDataView onPressHowToGetCodeLink={this.props.onPressHowToGetCodeLink} onPressMore={this.props.onPressMore}/>:<ListView 172 {showNoContent?<NoDataView onPressHowToGetCodeLink={this.props.onPressHowToGetCodeLink} onPressMore={this.props.onPressMore}/>:<ListView
102 ref='PurchaseCode' 173 ref='PurchaseCode'
103 - contentContainerStyle={styles.contentContainer}  
104 enableEmptySections={true} 174 enableEmptySections={true}
105 dataSource={this.dataSource.cloneWithRowsAndSections(dataSource)} 175 dataSource={this.dataSource.cloneWithRowsAndSections(dataSource)}
106 renderRow={this.renderRow} 176 renderRow={this.renderRow}
107 renderSectionHeader={this.renderSectionHeader} 177 renderSectionHeader={this.renderSectionHeader}
  178 + onScroll={this.handleScroll}
108 />} 179 />}
109 <LoadingIndicator 180 <LoadingIndicator
110 isVisible={isFetching} 181 isVisible={isFetching}
@@ -121,8 +192,4 @@ let styles = StyleSheet.create({ @@ -121,8 +192,4 @@ let styles = StyleSheet.create({
121 flex: 1, 192 flex: 1,
122 backgroundColor: '#e5e5e5', 193 backgroundColor: '#e5e5e5',
123 }, 194 },
124 - contentContainer:{  
125 - flexDirection: 'row',  
126 - flexWrap: 'wrap',  
127 - },  
128 }); 195 });
@@ -47,6 +47,7 @@ class PurchaseCodeContainer extends Component { @@ -47,6 +47,7 @@ class PurchaseCodeContainer extends Component {
47 this._onPressHowToGetCodeLink = this._onPressHowToGetCodeLink.bind(this); 47 this._onPressHowToGetCodeLink = this._onPressHowToGetCodeLink.bind(this);
48 this._onPressMore = this._onPressMore.bind(this); 48 this._onPressMore = this._onPressMore.bind(this);
49 this._onPressLimitCodeProducts = this._onPressLimitCodeProducts.bind(this); 49 this._onPressLimitCodeProducts = this._onPressLimitCodeProducts.bind(this);
  50 + this._onPressDelete = this._onPressDelete.bind(this);
50 51
51 this.subscription = NativeAppEventEmitter.addListener( 52 this.subscription = NativeAppEventEmitter.addListener(
52 'purchaseListChange', 53 'purchaseListChange',
@@ -76,6 +77,10 @@ class PurchaseCodeContainer extends Component { @@ -76,6 +77,10 @@ class PurchaseCodeContainer extends Component {
76 ReactNative.NativeModules.YH_MyAssetsViewHelper.pushLimitPurchaseDetailVC(data.limitProductCode); 77 ReactNative.NativeModules.YH_MyAssetsViewHelper.pushLimitPurchaseDetailVC(data.limitProductCode);
77 } 78 }
78 79
  80 + _onPressDelete(data, index){
  81 + this.props.actions.deleteMinePurchaseCodeLimitCode(data);
  82 + }
  83 +
79 render() { 84 render() {
80 let {purchaseCode} = this.props; 85 let {purchaseCode} = this.props;
81 86
@@ -86,6 +91,7 @@ class PurchaseCodeContainer extends Component { @@ -86,6 +91,7 @@ class PurchaseCodeContainer extends Component {
86 onPressHowToGetCodeLink={this._onPressHowToGetCodeLink} 91 onPressHowToGetCodeLink={this._onPressHowToGetCodeLink}
87 onPressMore={this._onPressMore} 92 onPressMore={this._onPressMore}
88 onPressLimitCodeProducts={this._onPressLimitCodeProducts} 93 onPressLimitCodeProducts={this._onPressLimitCodeProducts}
  94 + onPressDelete={this._onPressDelete}
89 /> 95 />
90 </View> 96 </View>
91 ); 97 );
@@ -59,7 +59,7 @@ export function getMineLimitPurchaseList() { @@ -59,7 +59,7 @@ export function getMineLimitPurchaseList() {
59 }; 59 };
60 } 60 }
61 61
62 -export function fetchDeleteMinePurchaseCodeLimitCode() { 62 +export function DeleteMinePurchaseCodeLimitCodeRequest() {
63 return { 63 return {
64 type: DELETE_MINE_LIMIT_PURCHASE_REQUEST, 64 type: DELETE_MINE_LIMIT_PURCHASE_REQUEST,
65 }; 65 };
@@ -84,13 +84,12 @@ export function deleteMinePurchaseCodeLimitCode(data) { @@ -84,13 +84,12 @@ export function deleteMinePurchaseCodeLimitCode(data) {
84 let {app, purchaseCode} = getState(); 84 let {app, purchaseCode} = getState();
85 let limitCode = data.limitCode; 85 let limitCode = data.limitCode;
86 let fetchDeleteMinePurchaseCodeLimitCode = (uid) => { 86 let fetchDeleteMinePurchaseCodeLimitCode = (uid) => {
87 - dispatch(MineLimitPurchaseListRequest());  
88 - return new PurchaseCodeService(app.host).DeleteMinePurchaseCodeLimitCode(uid,limitCode) 87 + let res = parseMinePurchaseCodeLimitCode(data,purchaseCode?purchaseCode.toJS():'')
  88 + dispatch(DeleteMinePurchaseCodeLimitCodeSuccess(res));
  89 + return new PurchaseCodeService(app.host).deleteMinePurchaseCodeLimitCode(uid,limitCode)
89 .then(json => { 90 .then(json => {
90 - dispatch(DeleteMinePurchaseCodeLimitCodeSuccess(json));  
91 }) 91 })
92 .catch(error => { 92 .catch(error => {
93 - dispatch(DeleteMinePurchaseCodeLimitCodeFailure(error));  
94 }); 93 });
95 } 94 }
96 95
@@ -102,3 +101,18 @@ export function deleteMinePurchaseCodeLimitCode(data) { @@ -102,3 +101,18 @@ export function deleteMinePurchaseCodeLimitCode(data) {
102 }); 101 });
103 }; 102 };
104 } 103 }
  104 +
  105 +function parseMinePurchaseCodeLimitCode (data,purchaseCode) {
  106 + let invalidLimitCodeProducts = purchaseCode?purchaseCode.invalidLimitCodeProducts:[];
  107 + let index = -1;
  108 + for (var i = 0; i < invalidLimitCodeProducts.length; i++) {
  109 + let item = invalidLimitCodeProducts[i];
  110 + if (item.limitCode == data.limitCode) {
  111 + index = i;
  112 + }
  113 + }
  114 + if (index != -1) {
  115 + invalidLimitCodeProducts.splice( index, 1 );
  116 + }
  117 + return invalidLimitCodeProducts;
  118 +}
@@ -38,10 +38,9 @@ export default function detailReducer(state=initialState, action) { @@ -38,10 +38,9 @@ export default function detailReducer(state=initialState, action) {
38 .set('error', null); 38 .set('error', null);
39 } 39 }
40 case DELETE_MINE_LIMIT_PURCHASE_SUCCESS: { 40 case DELETE_MINE_LIMIT_PURCHASE_SUCCESS: {
41 - // return state.set('isFetching', false)  
42 - // .set('error', null)  
43 - // .set('invalidLimitCodeProducts', Immutable.fromJS(action.payload.invalidLimitCodeProducts))  
44 - // .set('limitCodeProducts', Immutable.fromJS(action.payload.limitCodeProducts)); 41 + return state.set('isFetching', false)
  42 + .set('error', null)
  43 + .set('invalidLimitCodeProducts', Immutable.fromJS(action.payload))
45 } 44 }
46 case DELETE_MINE_LIMIT_PURCHASE_FAILURE: { 45 case DELETE_MINE_LIMIT_PURCHASE_FAILURE: {
47 return state.set('isFetching', false) 46 return state.set('isFetching', false)