From b54fc52e8e8d3a33153d1c264b4c8fae8d483caf Mon Sep 17 00:00:00 2001 From: Tareq El-Masri Date: Tue, 4 Dec 2018 18:23:44 +0200 Subject: [PATCH 1/6] Modify PanHandlers to ensure that a touchalbe element won't block the events --- src/index.js | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/src/index.js b/src/index.js index 93d72414..6037efb7 100644 --- a/src/index.js +++ b/src/index.js @@ -117,7 +117,7 @@ const Swipeout = createReactClass({ disabled: false, rowID: -1, sectionID: -1, - sensitivity: 50, + sensitivity: 0, }; }, @@ -131,6 +131,7 @@ const Swipeout = createReactClass({ contentPos: 0, contentWidth: 0, openedRight: false, + openedLeft: false, swiping: false, tweenDuration: 160, timeStart: null, @@ -145,11 +146,11 @@ const Swipeout = createReactClass({ onMoveShouldSetPanResponderCapture: (event, gestureState) => Math.abs(gestureState.dx) > this.props.sensitivity && Math.abs(gestureState.dy) <= this.props.sensitivity, - onPanResponderGrant: this._handlePanResponderGrant, + onPanResponderGrant: this._handlePanResponderGrant, onPanResponderMove: this._handlePanResponderMove, onPanResponderRelease: this._handlePanResponderEnd, onPanResponderTerminate: this._handlePanResponderEnd, - onShouldBlockNativeResponder: (event, gestureState) => false, + onShouldBlockNativeResponder: (event, gestureState) => true, onPanResponderTerminationRequest: () => false, }); }, From f41c9a45c28b7566d35ffdc52d8aef56fb3dc8a0 Mon Sep 17 00:00:00 2001 From: Tareq El-Masri Date: Tue, 4 Dec 2018 18:26:47 +0200 Subject: [PATCH 2/6] Add dist build for the new index.js --- dist/index.js | 21 +++++++++++++-------- 1 file changed, 13 insertions(+), 8 deletions(-) diff --git a/dist/index.js b/dist/index.js index d4a976c5..fb8309e8 100644 --- a/dist/index.js +++ b/dist/index.js @@ -134,7 +134,7 @@ var Swipeout = (0, _createReactClass2.default)({ disabled: false, rowID: -1, sectionID: -1, - sensitivity: 50 + sensitivity: 0 }; }, @@ -148,6 +148,7 @@ var Swipeout = (0, _createReactClass2.default)({ contentPos: 0, contentWidth: 0, openedRight: false, + openedLeft: false, swiping: false, tweenDuration: 160, timeStart: null @@ -172,7 +173,7 @@ var Swipeout = (0, _createReactClass2.default)({ onPanResponderRelease: this._handlePanResponderEnd, onPanResponderTerminate: this._handlePanResponderEnd, onShouldBlockNativeResponder: function onShouldBlockNativeResponder(event, gestureState) { - return false; + return true; }, onPanResponderTerminationRequest: function onPanResponderTerminationRequest() { return false; @@ -195,7 +196,7 @@ var Swipeout = (0, _createReactClass2.default)({ } else { this._callOnClose(); } - this.refs.swipeoutContent.measure(function (ox, oy, width, height) { + this.swipeoutContent.measure(function (ox, oy, width, height) { var buttonWidth = _this2.props.buttonWidth || width / 5; _this2.setState({ btnWidth: buttonWidth, @@ -337,7 +338,7 @@ var Swipeout = (0, _createReactClass2.default)({ _openRight: function _openRight() { var _this3 = this; - this.refs.swipeoutContent.measure(function (ox, oy, width, height) { + this.swipeoutContent.measure(function (ox, oy, width, height) { var btnWidth = _this3.props.buttonWidth || width / 5; _this3.setState({ @@ -359,7 +360,7 @@ var Swipeout = (0, _createReactClass2.default)({ _openLeft: function _openLeft() { var _this4 = this; - this.refs.swipeoutContent.measure(function (ox, oy, width, height) { + this.swipeoutContent.measure(function (ox, oy, width, height) { var btnWidth = _this4.props.buttonWidth || width / 5; _this4.setState({ @@ -379,6 +380,8 @@ var Swipeout = (0, _createReactClass2.default)({ }, render: function render() { + var _this5 = this; + var contentWidth = this.state.contentWidth; var posX = this.getTweeningValue('contentPos'); @@ -427,7 +430,9 @@ var Swipeout = (0, _createReactClass2.default)({ _react2.default.createElement( _reactNative.View, _extends({ - ref: 'swipeoutContent', + ref: function ref(node) { + return _this5.swipeoutContent = node; + }, style: styleContent, onLayout: this._onLayout }, this._panResponder.panHandlers), @@ -462,7 +467,7 @@ var Swipeout = (0, _createReactClass2.default)({ }, _renderButton: function _renderButton(btn, i) { - var _this5 = this; + var _this6 = this; return _react2.default.createElement(SwipeoutBtn, { backgroundColor: btn.backgroundColor, @@ -472,7 +477,7 @@ var Swipeout = (0, _createReactClass2.default)({ height: this.state.contentHeight, key: i, onPress: function onPress() { - return _this5._autoClose(btn); + return _this6._autoClose(btn); }, text: btn.text, type: btn.type, From 4096830cbca1e3cf107cdbb2fa7ef9cf886656b3 Mon Sep 17 00:00:00 2001 From: Tareq El-Masri Date: Thu, 6 Dec 2018 14:02:43 +0200 Subject: [PATCH 3/6] [FIX] Sensetivity in Android --- dist/index.js | 2 +- src/index.js | 3 ++- 2 files changed, 3 insertions(+), 2 deletions(-) diff --git a/dist/index.js b/dist/index.js index fb8309e8..a386c9e3 100644 --- a/dist/index.js +++ b/dist/index.js @@ -134,7 +134,7 @@ var Swipeout = (0, _createReactClass2.default)({ disabled: false, rowID: -1, sectionID: -1, - sensitivity: 0 + sensitivity: _reactNative.Platform.Select({ android: 50, ios: 0 }) }; }, diff --git a/src/index.js b/src/index.js index 6037efb7..1454c423 100644 --- a/src/index.js +++ b/src/index.js @@ -13,6 +13,7 @@ import { TouchableHighlight, StyleSheet, Text, + Platform, View, ViewPropTypes, } from 'react-native'; @@ -117,7 +118,7 @@ const Swipeout = createReactClass({ disabled: false, rowID: -1, sectionID: -1, - sensitivity: 0, + sensitivity: Platform.Select({ android: 50, ios: 0 }) }; }, From 6721737c0d63c57d9cf6e2bebf174064525ac3b3 Mon Sep 17 00:00:00 2001 From: Tareq El-Masri Date: Thu, 6 Dec 2018 14:05:43 +0200 Subject: [PATCH 4/6] [FIX] Sensetivity in Android --- dist/index.js | 2 +- src/index.js | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/dist/index.js b/dist/index.js index a386c9e3..794317cc 100644 --- a/dist/index.js +++ b/dist/index.js @@ -134,7 +134,7 @@ var Swipeout = (0, _createReactClass2.default)({ disabled: false, rowID: -1, sectionID: -1, - sensitivity: _reactNative.Platform.Select({ android: 50, ios: 0 }) + sensitivity: _reactNative.Platform.select({ android: 50, ios: 0 }) }; }, diff --git a/src/index.js b/src/index.js index 1454c423..bb0dfb79 100644 --- a/src/index.js +++ b/src/index.js @@ -118,7 +118,7 @@ const Swipeout = createReactClass({ disabled: false, rowID: -1, sectionID: -1, - sensitivity: Platform.Select({ android: 50, ios: 0 }) + sensitivity: Platform.select({ android: 50, ios: 0 }) }; }, From 22f090fed7a2e353ae3300a2498a14beedc38732 Mon Sep 17 00:00:00 2001 From: Tareq El-Masri Date: Thu, 6 Dec 2018 23:01:37 +0200 Subject: [PATCH 5/6] [ADD] OnPress directly on the Swipe --- dist/index.js | 19 +++++++++++++++---- index.d.ts | 1 + package.json | 1 + src/index.js | 6 ++++++ 4 files changed, 23 insertions(+), 4 deletions(-) diff --git a/dist/index.js b/dist/index.js index 794317cc..373a3221 100644 --- a/dist/index.js +++ b/dist/index.js @@ -34,6 +34,8 @@ var _reactNative = require('react-native'); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } +function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; } + var SwipeoutBtn = (0, _createReactClass2.default)({ displayName: 'SwipeoutBtn', @@ -130,16 +132,20 @@ var Swipeout = (0, _createReactClass2.default)({ }, getDefaultProps: function getDefaultProps() { - return { + var _ref; + + return _ref = { disabled: false, rowID: -1, - sectionID: -1, - sensitivity: _reactNative.Platform.select({ android: 50, ios: 0 }) - }; + sectionID: -1 + }, _defineProperty(_ref, 'disabled', false), _defineProperty(_ref, 'onPress', function onPress() { + return null; + }), _defineProperty(_ref, 'sensitivity', _reactNative.Platform.select({ android: 50, ios: 0 })), _ref; }, getInitialState: function getInitialState() { return { + hasMoved: false, autoClose: this.props.autoClose || false, btnWidth: 0, btnsLeftWidth: 0, @@ -210,6 +216,7 @@ var Swipeout = (0, _createReactClass2.default)({ _handlePanResponderMove: function _handlePanResponderMove(e, gestureState) { if (this.props.disabled) return; + this.setState({ hasMoved: true }); var posX = gestureState.dx; var posY = gestureState.dy; var leftWidth = this.state.btnsLeftWidth; @@ -267,6 +274,10 @@ var Swipeout = (0, _createReactClass2.default)({ } } + if (!this.state.swiping && !this.props.disabled) { + this.props.onPress(); + } + // Allow scroll if (this.props.scroll) this.props.scroll(true); }, diff --git a/index.d.ts b/index.d.ts index e8364b7b..824812c8 100644 --- a/index.d.ts +++ b/index.d.ts @@ -18,6 +18,7 @@ declare module 'react-native-swipeout' { close?: boolean; disabled?: boolean; left?: SwipeoutButtonProperties[]; + onPress?(): void; onOpen?(sectionId: number, rowId: number, direction: string): void; onClose?(sectionId: number, rowId: number, direction: string): void; right?: SwipeoutButtonProperties[]; diff --git a/package.json b/package.json index 1ad232a9..795f43ef 100644 --- a/package.json +++ b/package.json @@ -30,6 +30,7 @@ "dependencies": { "create-react-class": "^15.6.0", "prop-types": "^15.5.10", + "react-native-swipeout": "git+https://github.com/TareqElMasri/react-native-swipeout.git", "react-tween-state": "^0.1.5" }, "devDependencies": { diff --git a/src/index.js b/src/index.js index bb0dfb79..151d2051 100644 --- a/src/index.js +++ b/src/index.js @@ -118,6 +118,8 @@ const Swipeout = createReactClass({ disabled: false, rowID: -1, sectionID: -1, + disabled: false, + onPress: () => null, sensitivity: Platform.select({ android: 50, ios: 0 }) }; }, @@ -242,6 +244,10 @@ const Swipeout = createReactClass({ } } + if (this.state.contentPos === 0 && !this.props.disabled) { + this.props.onPress() + } + // Allow scroll if (this.props.scroll) this.props.scroll(true); }, From 39156bf9c501c0f3635db9189ec8604ee940c697 Mon Sep 17 00:00:00 2001 From: Tareq El-Masri Date: Thu, 6 Dec 2018 23:11:03 +0200 Subject: [PATCH 6/6] [ADD] OnPress directly on the Swipe --- dist/index.js | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/dist/index.js b/dist/index.js index 373a3221..901784e6 100644 --- a/dist/index.js +++ b/dist/index.js @@ -145,7 +145,6 @@ var Swipeout = (0, _createReactClass2.default)({ getInitialState: function getInitialState() { return { - hasMoved: false, autoClose: this.props.autoClose || false, btnWidth: 0, btnsLeftWidth: 0, @@ -216,7 +215,6 @@ var Swipeout = (0, _createReactClass2.default)({ _handlePanResponderMove: function _handlePanResponderMove(e, gestureState) { if (this.props.disabled) return; - this.setState({ hasMoved: true }); var posX = gestureState.dx; var posY = gestureState.dy; var leftWidth = this.state.btnsLeftWidth; @@ -274,7 +272,7 @@ var Swipeout = (0, _createReactClass2.default)({ } } - if (!this.state.swiping && !this.props.disabled) { + if (this.state.contentPos === 0 && !this.props.disabled) { this.props.onPress(); }