From 38e1566a2891815d30c8cdd0c47725af1291a7db Mon Sep 17 00:00:00 2001 From: Rajat Parashar Date: Wed, 23 Jun 2021 22:17:10 +0530 Subject: [PATCH] fix: swipe on composer --- src/CONST.js | 2 ++ src/components/SwipeableView/index.native.js | 12 ++++++++++-- src/components/TextInputFocusable/index.android.js | 3 ++- src/components/TextInputFocusable/index.ios.js | 3 ++- 4 files changed, 16 insertions(+), 4 deletions(-) diff --git a/src/CONST.js b/src/CONST.js index 4e21d5b5dcb7..7ae106e60056 100755 --- a/src/CONST.js +++ b/src/CONST.js @@ -223,6 +223,8 @@ const CONST = { EMOJI_PICKER_ITEM_HEIGHT: 40, EMOJI_PICKER_HEADER_HEIGHT: 38, + COMPOSER_MAX_HEIGHT: 116, + EMAIL: { CHRONOS: 'chronos@expensify.com', CONCIERGE: 'concierge@expensify.com', diff --git a/src/components/SwipeableView/index.native.js b/src/components/SwipeableView/index.native.js index 05edd1bb5773..c4a1adc9d66f 100644 --- a/src/components/SwipeableView/index.native.js +++ b/src/components/SwipeableView/index.native.js @@ -1,6 +1,7 @@ import React, {PureComponent} from 'react'; import {PanResponder, View} from 'react-native'; import PropTypes from 'prop-types'; +import CONST from '../../CONST'; const propTypes = { children: PropTypes.element.isRequired, @@ -13,12 +14,19 @@ class SwipeableView extends PureComponent { constructor(props) { super(props); - const minimumPixelDistance = 3; + const minimumPixelDistance = CONST.COMPOSER_MAX_HEIGHT; + this.oldY = 0; this.panResponder = PanResponder.create({ // The PanResponder gets focus only when the y-axis movement is over minimumPixelDistance + // & swip direction is downwards onMoveShouldSetPanResponderCapture: - (_event, gestureState) => gestureState.dy > minimumPixelDistance, + (_event, gestureState) => { + if ((gestureState.dy - this.oldY) > 0 && gestureState.dy > minimumPixelDistance) { + return true; + } + this.oldY = gestureState.dy; + }, // Calls the callback when the swipe down is released; after the completion of the gesture onPanResponderRelease: this.props.onSwipeDown, diff --git a/src/components/TextInputFocusable/index.android.js b/src/components/TextInputFocusable/index.android.js index b8f40a6bcc46..3e520adceaee 100644 --- a/src/components/TextInputFocusable/index.android.js +++ b/src/components/TextInputFocusable/index.android.js @@ -3,6 +3,7 @@ import {TextInput} from 'react-native'; import PropTypes from 'prop-types'; import _ from 'underscore'; import themeColors from '../../styles/themes/default'; +import CONST from '../../CONST'; /** * On native layers we like to have the Text Input not focused so the user can read new chats without they keyboard in @@ -61,7 +62,7 @@ class TextInputFocusable extends React.Component { this.textInput = el} - maxHeight={116} + maxHeight={CONST.COMPOSER_MAX_HEIGHT} rejectResponderTermination={false} editable={!this.props.isDisabled} /* eslint-disable-next-line react/jsx-props-no-spreading */ diff --git a/src/components/TextInputFocusable/index.ios.js b/src/components/TextInputFocusable/index.ios.js index a0b9967d4086..72c53a8ff8cd 100644 --- a/src/components/TextInputFocusable/index.ios.js +++ b/src/components/TextInputFocusable/index.ios.js @@ -3,6 +3,7 @@ import {TextInput} from 'react-native'; import PropTypes from 'prop-types'; import _ from 'underscore'; import themeColors from '../../styles/themes/default'; +import CONST from '../../CONST'; /** * On native layers we like to have the Text Input not focused so the user can read new chats without they keyboard in @@ -73,7 +74,7 @@ class TextInputFocusable extends React.Component { this.textInput = el} - maxHeight={116} + maxHeight={CONST.COMPOSER_MAX_HEIGHT} rejectResponderTermination={false} editable={!this.props.isDisabled} /* eslint-disable-next-line react/jsx-props-no-spreading */