From 72923df7bbc64f038cd5f0536d4445e421000f96 Mon Sep 17 00:00:00 2001 From: AHMED Date: Sat, 5 Mar 2022 09:41:30 +0200 Subject: [PATCH 1/8] add LongPressGestureHandler --- .../index.native.js | 28 ++++++++++++------- 1 file changed, 18 insertions(+), 10 deletions(-) diff --git a/src/components/PressableWithSecondaryInteraction/index.native.js b/src/components/PressableWithSecondaryInteraction/index.native.js index 650333e2c460..efb68e52eb79 100644 --- a/src/components/PressableWithSecondaryInteraction/index.native.js +++ b/src/components/PressableWithSecondaryInteraction/index.native.js @@ -1,6 +1,7 @@ import _ from 'underscore'; import React, {forwardRef} from 'react'; import {Pressable} from 'react-native'; +import {LongPressGestureHandler, State} from 'react-native-gesture-handler'; import * as pressableWithSecondaryInteractionPropTypes from './pressableWithSecondaryInteractionPropTypes'; import Text from '../Text'; import HapticFeedback from '../../libs/HapticFeedback'; @@ -15,21 +16,28 @@ const PressableWithSecondaryInteraction = (props) => { // Use Text node for inline mode to prevent content overflow. const Node = props.inline ? Text : Pressable; return ( - { + { + if (e.nativeEvent.state !== State.ACTIVE) { + return; + } e.preventDefault(); HapticFeedback.trigger(); props.onSecondaryInteraction(e); }} - onPressOut={props.onPressOut} - // eslint-disable-next-line react/jsx-props-no-spreading - {...(_.omit(props, 'onLongPress'))} > - {props.children} - + + {props.children} + + + ); }; From 9e8ee3ccce50bdf30473767fb136c05f43acfeda Mon Sep 17 00:00:00 2001 From: AHMED Date: Sat, 5 Mar 2022 09:41:59 +0200 Subject: [PATCH 2/8] stop show copy on attachment --- src/pages/home/report/ContextMenu/ContextMenuActions.js | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/src/pages/home/report/ContextMenu/ContextMenuActions.js b/src/pages/home/report/ContextMenu/ContextMenuActions.js index 7d23894e613d..34ca78008e41 100644 --- a/src/pages/home/report/ContextMenu/ContextMenuActions.js +++ b/src/pages/home/report/ContextMenu/ContextMenuActions.js @@ -42,7 +42,9 @@ export default [ icon: Expensicons.Clipboard, successTextTranslateKey: 'reportActionContextMenu.copied', successIcon: Expensicons.Checkmark, - shouldShow: (type, reportAction) => (type === CONTEXT_MENU_TYPES.REPORT_ACTION && reportAction.actionName !== CONST.REPORT.ACTIONS.TYPE.IOU), + shouldShow: (type, reportAction) => (type === CONTEXT_MENU_TYPES.REPORT_ACTION + && reportAction.actionName !== CONST.REPORT.ACTIONS.TYPE.IOU + && !ReportUtils.isReportMessageAttachment(lodashGet(reportAction, ['message', 0, 'text'], ''))), // If return value is true, we switch the `text` and `icon` on // `ContextMenuItem` with `successText` and `successIcon` which will fallback to From 984c3a7ff34902be4bace4969b91f9561233248e Mon Sep 17 00:00:00 2001 From: AHMED Date: Sat, 5 Mar 2022 10:51:18 +0200 Subject: [PATCH 3/8] add LongPressGestureHandler to web --- .../index.js | 47 ++++++++++++++----- 1 file changed, 35 insertions(+), 12 deletions(-) diff --git a/src/components/PressableWithSecondaryInteraction/index.js b/src/components/PressableWithSecondaryInteraction/index.js index 78434ae65476..5ba66b709901 100644 --- a/src/components/PressableWithSecondaryInteraction/index.js +++ b/src/components/PressableWithSecondaryInteraction/index.js @@ -1,6 +1,7 @@ import _ from 'underscore'; import React, {Component} from 'react'; import {Pressable} from 'react-native'; +import {LongPressGestureHandler, State} from 'react-native-gesture-handler'; import SelectionScraper from '../../libs/SelectionScraper'; import * as pressableWithSecondaryInteractionPropTypes from './pressableWithSecondaryInteractionPropTypes'; import styles from '../../styles/styles'; @@ -11,7 +12,7 @@ import styles from '../../styles/styles'; class PressableWithSecondaryInteraction extends Component { constructor(props) { super(props); - + this.onLongPressGestureHandlerStateChange = this.onLongPressGestureHandlerStateChange.bind(this); this.executeSecondaryInteractionOnContextMenu = this.executeSecondaryInteractionOnContextMenu.bind(this); } @@ -26,6 +27,27 @@ class PressableWithSecondaryInteraction extends Component { this.pressableRef.removeEventListener('contextmenu', this.executeSecondaryInteractionOnContextMenu); } + /** + * @param {Object} e + */ + onLongPressGestureHandlerStateChange(e) { + if (e.nativeEvent.state !== State.ACTIVE) { + return; + } + + // map gesture event to normal ResponderEvent event + const { + absoluteX, absoluteY, locationX, locationY, + } = e.nativeEvent; + const mapEvent = { + ...e, + nativeEvent: { + ...e.nativeEvent, pageX: absoluteX, pageY: absoluteY, x: locationX, y: locationY, + }, + }; + this.props.onSecondaryInteraction(mapEvent); + } + /** * @param {contextmenu} e - A right-click MouseEvent. * https://developer.mozilla.org/en-US/docs/Web/API/Element/contextmenu_event @@ -44,18 +66,19 @@ class PressableWithSecondaryInteraction extends Component { // On Web, Text does not support LongPress events thus manage inline mode with styling instead of using Text. return ( - this.pressableRef = el} + + this.pressableRef = el} // eslint-disable-next-line react/jsx-props-no-spreading - {...defaultPressableProps} - > - {this.props.children} - + {...defaultPressableProps} + > + {this.props.children} + + ); } } From 77d3f49d5600a46ba0e5debf4b677850e0f1caff Mon Sep 17 00:00:00 2001 From: AHMED Date: Sat, 5 Mar 2022 11:10:40 +0200 Subject: [PATCH 4/8] update comment --- src/components/PressableWithSecondaryInteraction/index.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/PressableWithSecondaryInteraction/index.js b/src/components/PressableWithSecondaryInteraction/index.js index 5ba66b709901..255544c95c42 100644 --- a/src/components/PressableWithSecondaryInteraction/index.js +++ b/src/components/PressableWithSecondaryInteraction/index.js @@ -35,7 +35,7 @@ class PressableWithSecondaryInteraction extends Component { return; } - // map gesture event to normal ResponderEvent event + // Map gesture event to normal Responder event const { absoluteX, absoluteY, locationX, locationY, } = e.nativeEvent; From e8ed4f08e305e3ddd4fea933619c14d70979a356 Mon Sep 17 00:00:00 2001 From: AHMED SHERIF Date: Mon, 7 Mar 2022 19:06:10 +0200 Subject: [PATCH 5/8] Update src/components/PressableWithSecondaryInteraction/index.js Co-authored-by: Rajat Parashar --- src/components/PressableWithSecondaryInteraction/index.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/PressableWithSecondaryInteraction/index.js b/src/components/PressableWithSecondaryInteraction/index.js index 255544c95c42..a2c14f485e08 100644 --- a/src/components/PressableWithSecondaryInteraction/index.js +++ b/src/components/PressableWithSecondaryInteraction/index.js @@ -30,7 +30,7 @@ class PressableWithSecondaryInteraction extends Component { /** * @param {Object} e */ - onLongPressGestureHandlerStateChange(e) { + callSecondaryInteractionWithMappedEvent(e) { if (e.nativeEvent.state !== State.ACTIVE) { return; } From 6a9648a053ce51bffa0c0a4e43893c08a0d16795 Mon Sep 17 00:00:00 2001 From: AHMED SHERIF Date: Mon, 7 Mar 2022 19:06:17 +0200 Subject: [PATCH 6/8] Update src/components/PressableWithSecondaryInteraction/index.js Co-authored-by: Rajat Parashar --- src/components/PressableWithSecondaryInteraction/index.js | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/src/components/PressableWithSecondaryInteraction/index.js b/src/components/PressableWithSecondaryInteraction/index.js index a2c14f485e08..5e628eb228c2 100644 --- a/src/components/PressableWithSecondaryInteraction/index.js +++ b/src/components/PressableWithSecondaryInteraction/index.js @@ -36,9 +36,7 @@ class PressableWithSecondaryInteraction extends Component { } // Map gesture event to normal Responder event - const { - absoluteX, absoluteY, locationX, locationY, - } = e.nativeEvent; + const {absoluteX, absoluteY, locationX, locationY} = e.nativeEvent; const mapEvent = { ...e, nativeEvent: { From 8c0f6bc1575ab02c42e1c456e51b9604dda7922d Mon Sep 17 00:00:00 2001 From: AHMED SHERIF Date: Mon, 7 Mar 2022 19:07:49 +0200 Subject: [PATCH 7/8] change to callSecondaryInteractionWithMappedEvent --- src/components/PressableWithSecondaryInteraction/index.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/PressableWithSecondaryInteraction/index.js b/src/components/PressableWithSecondaryInteraction/index.js index 5e628eb228c2..48b038f71e41 100644 --- a/src/components/PressableWithSecondaryInteraction/index.js +++ b/src/components/PressableWithSecondaryInteraction/index.js @@ -12,7 +12,7 @@ import styles from '../../styles/styles'; class PressableWithSecondaryInteraction extends Component { constructor(props) { super(props); - this.onLongPressGestureHandlerStateChange = this.onLongPressGestureHandlerStateChange.bind(this); + this.callSecondaryInteractionWithMappedEvent = this.callSecondaryInteractionWithMappedEvent.bind(this); this.executeSecondaryInteractionOnContextMenu = this.executeSecondaryInteractionOnContextMenu.bind(this); } @@ -64,7 +64,7 @@ class PressableWithSecondaryInteraction extends Component { // On Web, Text does not support LongPress events thus manage inline mode with styling instead of using Text. return ( - + Date: Mon, 7 Mar 2022 19:31:10 +0200 Subject: [PATCH 8/8] lintinh --- src/components/PressableWithSecondaryInteraction/index.js | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/src/components/PressableWithSecondaryInteraction/index.js b/src/components/PressableWithSecondaryInteraction/index.js index 48b038f71e41..b29216f34c45 100644 --- a/src/components/PressableWithSecondaryInteraction/index.js +++ b/src/components/PressableWithSecondaryInteraction/index.js @@ -36,7 +36,9 @@ class PressableWithSecondaryInteraction extends Component { } // Map gesture event to normal Responder event - const {absoluteX, absoluteY, locationX, locationY} = e.nativeEvent; + const { + absoluteX, absoluteY, locationX, locationY, + } = e.nativeEvent; const mapEvent = { ...e, nativeEvent: {