Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fix LHN popover showing in Report screen #28614

Merged
merged 5 commits into from
Oct 4, 2023
Merged

Fix LHN popover showing in Report screen #28614

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
b9d803d
fix: left hand navigation row opens modal in wrong screen
redpanda-bit Sep 13, 2023
341ef32
test: add useFocusEffect to navigation mock
redpanda-bit Sep 20, 2023
a00e349
refactor: use hook instead of HOC for useWindowDimensions
redpanda-bit Sep 21, 2023
876f810
fix: use isSmallScreenWidth inside longpress callback instead of useF…
redpanda-bit Sep 22, 2023
1acc828
fix: eslint rule no conditional hooks OptioRowLHN
redpanda-bit Sep 28, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
18 changes: 17 additions & 1 deletion src/components/LHNOptionsList/OptionRowLHN.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,9 @@
import _ from 'underscore';
import React, {useState, useRef} from 'react';
import React, {useState, useRef, useCallback} from 'react';
import PropTypes from 'prop-types';
import {View, StyleSheet} from 'react-native';
import lodashGet from 'lodash/get';
import {useFocusEffect} from '@react-navigation/native';
import * as optionRowStyles from '../../styles/optionRowStyles';
import styles from '../../styles/styles';
import * as StyleUtils from '../../styles/StyleUtils';
Expand All @@ -25,6 +26,7 @@ import * as ReportUtils from '../../libs/ReportUtils';
import useLocalize from '../../hooks/useLocalize';
import Permissions from '../../libs/Permissions';
import Tooltip from '../Tooltip';
import useWindowDimensions from '../../hooks/useWindowDimensions';

const propTypes = {
/** Style for hovered state */
Expand Down Expand Up @@ -65,12 +67,23 @@ const defaultProps = {

function OptionRowLHN(props) {
const popoverAnchor = useRef(null);
const isFocusedRef = useRef(true);
const {isSmallScreenWidth} = useWindowDimensions();

const {translate} = useLocalize();

const optionItem = props.optionItem;
const [isContextMenuActive, setIsContextMenuActive] = useState(false);

useFocusEffect(
useCallback(() => {
isFocusedRef.current = true;
return () => {
isFocusedRef.current = false;
};
}, []),
);

if (!optionItem) {
return null;
}
Expand Down Expand Up @@ -110,6 +123,9 @@ function OptionRowLHN(props) {
* @param {Object} [event] - A press event.
*/
const showPopover = (event) => {
if (!isFocusedRef.current && isSmallScreenWidth) {
return;
}
setIsContextMenuActive(true);
ReportActionContextMenu.showContextMenu(
ContextMenuActions.CONTEXT_MENU_TYPES.REPORT,
Expand Down
1 change: 1 addition & 0 deletions tests/utils/LHNTestUtils.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,7 @@ jest.mock('@react-navigation/native', () => {
const actualNav = jest.requireActual('@react-navigation/native');
return {
...actualNav,
useFocusEffect: jest.fn(),
useIsFocused: () => ({
navigate: mockedNavigate,
}),
Expand Down
Loading