From c984d7073f28983d28c56ca9c4679c0e1c2dcc29 Mon Sep 17 00:00:00 2001 From: Akinwale Ariwodola Date: Tue, 26 Sep 2023 09:06:18 +0100 Subject: [PATCH 1/4] add swipe intercept pan responder for text inputs within swipeable tabs --- src/components/MapView/responder/index.ts | 9 ++------- src/components/OptionsSelector/BaseOptionsSelector.js | 1 + src/components/RoomNameInput/index.js | 1 + src/components/SwipeInterceptPanResponder.js | 8 ++++++++ src/components/TextInput/BaseTextInput.js | 7 ++++++- src/components/TextInput/baseTextInputPropTypes.js | 4 ++++ 6 files changed, 22 insertions(+), 8 deletions(-) create mode 100644 src/components/SwipeInterceptPanResponder.js diff --git a/src/components/MapView/responder/index.ts b/src/components/MapView/responder/index.ts index 422d6c1b4963..c4c325444f70 100644 --- a/src/components/MapView/responder/index.ts +++ b/src/components/MapView/responder/index.ts @@ -1,8 +1,3 @@ -import {PanResponder} from 'react-native'; +import SwipeInterceptPanResponder from '../../SwipeInterceptPanResponder'; -const responder = PanResponder.create({ - onMoveShouldSetPanResponder: () => true, - onPanResponderTerminationRequest: () => false, -}); - -export default responder; +export default SwipeInterceptPanResponder; diff --git a/src/components/OptionsSelector/BaseOptionsSelector.js b/src/components/OptionsSelector/BaseOptionsSelector.js index aa02701b1c98..223d51261afa 100755 --- a/src/components/OptionsSelector/BaseOptionsSelector.js +++ b/src/components/OptionsSelector/BaseOptionsSelector.js @@ -364,6 +364,7 @@ class BaseOptionsSelector extends Component { selectTextOnFocus blurOnSubmit={Boolean(this.state.allOptions.length)} spellCheck={false} + interceptSwipe /> ); const optionsList = ( diff --git a/src/components/RoomNameInput/index.js b/src/components/RoomNameInput/index.js index 4546e83ef769..ca455b4200f2 100644 --- a/src/components/RoomNameInput/index.js +++ b/src/components/RoomNameInput/index.js @@ -62,6 +62,7 @@ function RoomNameInput({isFocused, autoFocus, disabled, errorText, forwardedRef, autoFocus={isFocused && autoFocus} maxLength={CONST.REPORT.MAX_ROOM_NAME_LENGTH} spellCheck={false} + interceptSwipe /> ); } diff --git a/src/components/SwipeInterceptPanResponder.js b/src/components/SwipeInterceptPanResponder.js new file mode 100644 index 000000000000..fe1545d2f14b --- /dev/null +++ b/src/components/SwipeInterceptPanResponder.js @@ -0,0 +1,8 @@ +import {PanResponder} from 'react-native'; + +const SwipeInterceptPanResponder = PanResponder.create({ + onMoveShouldSetPanResponder: () => true, + onPanResponderTerminationRequest: () => false, +}); + +export default SwipeInterceptPanResponder; diff --git a/src/components/TextInput/BaseTextInput.js b/src/components/TextInput/BaseTextInput.js index b469f39c7037..92e9c725f6d5 100644 --- a/src/components/TextInput/BaseTextInput.js +++ b/src/components/TextInput/BaseTextInput.js @@ -22,6 +22,7 @@ import PressableWithoutFeedback from '../Pressable/PressableWithoutFeedback'; import withLocalize from '../withLocalize'; import useNativeDriver from '../../libs/useNativeDriver'; import * as Browser from '../../libs/Browser'; +import SwipeInterceptPanResponder from '../SwipeInterceptPanResponder'; function BaseTextInput(props) { const inputValue = props.value || props.defaultValue || ''; @@ -257,7 +258,11 @@ function BaseTextInput(props) { return ( <> - + Date: Tue, 26 Sep 2023 09:53:13 +0100 Subject: [PATCH 2/4] rename prop interceptSwipe -> canInterceptSwipe --- src/components/OptionsSelector/BaseOptionsSelector.js | 2 +- src/components/RoomNameInput/index.js | 2 +- src/components/TextInput/BaseTextInput.js | 2 +- src/components/TextInput/baseTextInputPropTypes.js | 4 ++-- 4 files changed, 5 insertions(+), 5 deletions(-) diff --git a/src/components/OptionsSelector/BaseOptionsSelector.js b/src/components/OptionsSelector/BaseOptionsSelector.js index 223d51261afa..8d88792d7a3f 100755 --- a/src/components/OptionsSelector/BaseOptionsSelector.js +++ b/src/components/OptionsSelector/BaseOptionsSelector.js @@ -364,7 +364,7 @@ class BaseOptionsSelector extends Component { selectTextOnFocus blurOnSubmit={Boolean(this.state.allOptions.length)} spellCheck={false} - interceptSwipe + canInterceptSwipe /> ); const optionsList = ( diff --git a/src/components/RoomNameInput/index.js b/src/components/RoomNameInput/index.js index ca455b4200f2..0d6677a868a5 100644 --- a/src/components/RoomNameInput/index.js +++ b/src/components/RoomNameInput/index.js @@ -62,7 +62,7 @@ function RoomNameInput({isFocused, autoFocus, disabled, errorText, forwardedRef, autoFocus={isFocused && autoFocus} maxLength={CONST.REPORT.MAX_ROOM_NAME_LENGTH} spellCheck={false} - interceptSwipe + canInterceptSwipe /> ); } diff --git a/src/components/TextInput/BaseTextInput.js b/src/components/TextInput/BaseTextInput.js index 92e9c725f6d5..6063ab8267b9 100644 --- a/src/components/TextInput/BaseTextInput.js +++ b/src/components/TextInput/BaseTextInput.js @@ -261,7 +261,7 @@ function BaseTextInput(props) { Date: Tue, 26 Sep 2023 14:31:08 +0100 Subject: [PATCH 3/4] rename prop canInterceptSwipe -> shouldInterceptSwipe --- src/components/OptionsSelector/BaseOptionsSelector.js | 2 +- src/components/RoomNameInput/index.js | 2 +- src/components/TextInput/BaseTextInput.js | 2 +- src/components/TextInput/baseTextInputPropTypes.js | 4 ++-- 4 files changed, 5 insertions(+), 5 deletions(-) diff --git a/src/components/OptionsSelector/BaseOptionsSelector.js b/src/components/OptionsSelector/BaseOptionsSelector.js index 8d88792d7a3f..74fc4701042f 100755 --- a/src/components/OptionsSelector/BaseOptionsSelector.js +++ b/src/components/OptionsSelector/BaseOptionsSelector.js @@ -364,7 +364,7 @@ class BaseOptionsSelector extends Component { selectTextOnFocus blurOnSubmit={Boolean(this.state.allOptions.length)} spellCheck={false} - canInterceptSwipe + shouldInterceptSwipe /> ); const optionsList = ( diff --git a/src/components/RoomNameInput/index.js b/src/components/RoomNameInput/index.js index 0d6677a868a5..37d131108e9e 100644 --- a/src/components/RoomNameInput/index.js +++ b/src/components/RoomNameInput/index.js @@ -62,7 +62,7 @@ function RoomNameInput({isFocused, autoFocus, disabled, errorText, forwardedRef, autoFocus={isFocused && autoFocus} maxLength={CONST.REPORT.MAX_ROOM_NAME_LENGTH} spellCheck={false} - canInterceptSwipe + shouldInterceptSwipe /> ); } diff --git a/src/components/TextInput/BaseTextInput.js b/src/components/TextInput/BaseTextInput.js index 6063ab8267b9..b91fa20c2295 100644 --- a/src/components/TextInput/BaseTextInput.js +++ b/src/components/TextInput/BaseTextInput.js @@ -261,7 +261,7 @@ function BaseTextInput(props) { Date: Fri, 29 Sep 2023 15:19:32 +0100 Subject: [PATCH 4/4] on Android, do not intercept swipe in BaseOptionSelector --- src/components/OptionsSelector/BaseOptionsSelector.js | 2 +- src/components/OptionsSelector/index.js | 1 + src/components/OptionsSelector/optionsSelectorPropTypes.js | 4 ++++ 3 files changed, 6 insertions(+), 1 deletion(-) diff --git a/src/components/OptionsSelector/BaseOptionsSelector.js b/src/components/OptionsSelector/BaseOptionsSelector.js index 74fc4701042f..dee568f2cdf2 100755 --- a/src/components/OptionsSelector/BaseOptionsSelector.js +++ b/src/components/OptionsSelector/BaseOptionsSelector.js @@ -364,7 +364,7 @@ class BaseOptionsSelector extends Component { selectTextOnFocus blurOnSubmit={Boolean(this.state.allOptions.length)} spellCheck={false} - shouldInterceptSwipe + shouldInterceptSwipe={this.props.shouldTextInputInterceptSwipe} /> ); const optionsList = ( diff --git a/src/components/OptionsSelector/index.js b/src/components/OptionsSelector/index.js index 9f7c924e427f..eba3e656bc29 100644 --- a/src/components/OptionsSelector/index.js +++ b/src/components/OptionsSelector/index.js @@ -6,6 +6,7 @@ const OptionsSelector = forwardRef((props, ref) => ( // eslint-disable-next-line react/jsx-props-no-spreading {...props} ref={ref} + shouldTextInputInterceptSwipe /> )); diff --git a/src/components/OptionsSelector/optionsSelectorPropTypes.js b/src/components/OptionsSelector/optionsSelectorPropTypes.js index ca336c324673..8a7158092967 100644 --- a/src/components/OptionsSelector/optionsSelectorPropTypes.js +++ b/src/components/OptionsSelector/optionsSelectorPropTypes.js @@ -124,6 +124,9 @@ const propTypes = { /** Initial focused index value */ initialFocusedIndex: PropTypes.number, + + /** Whether the text input should intercept swipes or not */ + shouldTextInputInterceptSwipe: PropTypes.bool, }; const defaultProps = { @@ -160,6 +163,7 @@ const defaultProps = { shouldUseStyleForChildren: true, isRowMultilineSupported: false, initialFocusedIndex: undefined, + shouldTextInputInterceptSwipe: false, }; export {propTypes, defaultProps};