diff --git a/src/components/Search/index.tsx b/src/components/Search/index.tsx index e72498e64cd9..a0a823a9f1c7 100644 --- a/src/components/Search/index.tsx +++ b/src/components/Search/index.tsx @@ -11,6 +11,7 @@ import SelectionListWithModal from '@components/SelectionListWithModal'; import SearchRowSkeleton from '@components/Skeletons/SearchRowSkeleton'; import SearchStatusSkeleton from '@components/Skeletons/SearchStatusSkeleton'; import useLocalize from '@hooks/useLocalize'; +import useMobileSelectionMode from '@hooks/useMobileSelectionMode'; import useNetwork from '@hooks/useNetwork'; import usePrevious from '@hooks/usePrevious'; import useThemeStyles from '@hooks/useThemeStyles'; @@ -82,7 +83,7 @@ function Search({queryJSON, isCustomQuery}: SearchProps) { const navigation = useNavigation>(); const lastSearchResultsRef = useRef>(); const {setCurrentSearchHash, setSelectedTransactions, selectedTransactions, clearSelectedTransactions} = useSearchContext(); - const [selectionMode] = useOnyx(ONYXKEYS.MOBILE_SELECTION_MODE); + const {selectionMode} = useMobileSelectionMode(); const [offset, setOffset] = useState(0); const [offlineModalVisible, setOfflineModalVisible] = useState(false); diff --git a/src/components/SelectionListWithModal/index.tsx b/src/components/SelectionListWithModal/index.tsx index 907fd4f740a1..1f1a4522540d 100644 --- a/src/components/SelectionListWithModal/index.tsx +++ b/src/components/SelectionListWithModal/index.tsx @@ -1,16 +1,15 @@ -import React, {forwardRef, useEffect, useState} from 'react'; import type {ForwardedRef} from 'react'; -import {useOnyx} from 'react-native-onyx'; +import React, {forwardRef, useEffect, useState} from 'react'; import * as Expensicons from '@components/Icon/Expensicons'; import MenuItem from '@components/MenuItem'; import Modal from '@components/Modal'; import SelectionList from '@components/SelectionList'; import type {BaseSelectionListProps, ListItem, SelectionListHandle} from '@components/SelectionList/types'; import useLocalize from '@hooks/useLocalize'; +import useMobileSelectionMode from '@hooks/useMobileSelectionMode'; import useResponsiveLayout from '@hooks/useResponsiveLayout'; import {turnOffMobileSelectionMode, turnOnMobileSelectionMode} from '@libs/actions/MobileSelectionMode'; import CONST from '@src/CONST'; -import ONYXKEYS from '@src/ONYXKEYS'; type SelectionListWithModalProps = BaseSelectionListProps & { turnOnSelectionModeOnLongPress?: boolean; @@ -25,7 +24,7 @@ function SelectionListWithModal( const [longPressedItem, setLongPressedItem] = useState(null); const {translate} = useLocalize(); const {isSmallScreenWidth} = useResponsiveLayout(); - const [selectionMode] = useOnyx(ONYXKEYS.MOBILE_SELECTION_MODE); + const {selectionMode} = useMobileSelectionMode(true); useEffect(() => { // We can access 0 index safely as we are not displaying multiple sections in table view @@ -63,8 +62,6 @@ function SelectionListWithModal( } }; - useEffect(() => turnOffMobileSelectionMode(), []); - return ( <> { + if (!shouldAutoTurnOff) { + return; + } + turnOffMobileSelectionMode(); + }, [shouldAutoTurnOff]); + + return {selectionMode}; +} diff --git a/src/pages/ReportParticipantsPage.tsx b/src/pages/ReportParticipantsPage.tsx index 8280ead49525..62f2101ce1ba 100755 --- a/src/pages/ReportParticipantsPage.tsx +++ b/src/pages/ReportParticipantsPage.tsx @@ -18,6 +18,7 @@ import type {ListItem, SelectionListHandle} from '@components/SelectionList/type import SelectionListWithModal from '@components/SelectionListWithModal'; import Text from '@components/Text'; import useLocalize from '@hooks/useLocalize'; +import useMobileSelectionMode from '@hooks/useMobileSelectionMode'; import useResponsiveLayout from '@hooks/useResponsiveLayout'; import useStyleUtils from '@hooks/useStyleUtils'; import useThemeStyles from '@hooks/useThemeStyles'; @@ -44,7 +45,7 @@ function ReportParticipantsPage({report}: WithReportOrNotFoundProps) { const selectionListRef = useRef(null); const textInputRef = useRef(null); const [reportNameValuePairs] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT_NAME_VALUE_PAIRS}${report?.reportID ?? -1}`); - const [selectionMode] = useOnyx(ONYXKEYS.MOBILE_SELECTION_MODE); + const {selectionMode} = useMobileSelectionMode(); const [session] = useOnyx(ONYXKEYS.SESSION); const [personalDetails] = useOnyx(ONYXKEYS.PERSONAL_DETAILS_LIST); const currentUserAccountID = Number(session?.accountID); diff --git a/src/pages/workspace/WorkspaceMembersPage.tsx b/src/pages/workspace/WorkspaceMembersPage.tsx index 90a29601d2a0..ca982e85dd02 100644 --- a/src/pages/workspace/WorkspaceMembersPage.tsx +++ b/src/pages/workspace/WorkspaceMembersPage.tsx @@ -21,6 +21,7 @@ import Text from '@components/Text'; import type {WithCurrentUserPersonalDetailsProps} from '@components/withCurrentUserPersonalDetails'; import withCurrentUserPersonalDetails from '@components/withCurrentUserPersonalDetails'; import useLocalize from '@hooks/useLocalize'; +import useMobileSelectionMode from '@hooks/useMobileSelectionMode'; import useNetwork from '@hooks/useNetwork'; import usePrevious from '@hooks/usePrevious'; import useResponsiveLayout from '@hooks/useResponsiveLayout'; @@ -83,7 +84,7 @@ function WorkspaceMembersPage({personalDetails, route, policy, currentUserPerson ); const [invitedEmailsToAccountIDsDraft] = useOnyx(`${ONYXKEYS.COLLECTION.WORKSPACE_INVITE_MEMBERS_DRAFT}${route.params.policyID.toString()}`); - const [selectionMode] = useOnyx(ONYXKEYS.MOBILE_SELECTION_MODE); + const {selectionMode} = useMobileSelectionMode(); const [session] = useOnyx(ONYXKEYS.SESSION); const selectionListRef = useRef(null); const isFocused = useIsFocused(); diff --git a/src/pages/workspace/categories/WorkspaceCategoriesPage.tsx b/src/pages/workspace/categories/WorkspaceCategoriesPage.tsx index 05e48a8c8774..deb3d4ed3121 100644 --- a/src/pages/workspace/categories/WorkspaceCategoriesPage.tsx +++ b/src/pages/workspace/categories/WorkspaceCategoriesPage.tsx @@ -22,6 +22,7 @@ import Text from '@components/Text'; import TextLink from '@components/TextLink'; import useEnvironment from '@hooks/useEnvironment'; import useLocalize from '@hooks/useLocalize'; +import useMobileSelectionMode from '@hooks/useMobileSelectionMode'; import useNetwork from '@hooks/useNetwork'; import usePolicy from '@hooks/usePolicy'; import useResponsiveLayout from '@hooks/useResponsiveLayout'; @@ -62,8 +63,8 @@ function WorkspaceCategoriesPage({route}: WorkspaceCategoriesPageProps) { const policyId = route.params.policyID ?? '-1'; const backTo = route.params?.backTo; const policy = usePolicy(policyId); + const {selectionMode} = useMobileSelectionMode(); const [policyCategories] = useOnyx(`${ONYXKEYS.COLLECTION.POLICY_CATEGORIES}${policyId}`); - const [selectionMode] = useOnyx(ONYXKEYS.MOBILE_SELECTION_MODE); const isConnectedToAccounting = Object.keys(policy?.connections ?? {}).length > 0; const currentConnectionName = PolicyUtils.getCurrentConnectionName(policy); diff --git a/src/pages/workspace/distanceRates/PolicyDistanceRatesPage.tsx b/src/pages/workspace/distanceRates/PolicyDistanceRatesPage.tsx index 0b2e83f458ff..b37bc5b5ba7b 100644 --- a/src/pages/workspace/distanceRates/PolicyDistanceRatesPage.tsx +++ b/src/pages/workspace/distanceRates/PolicyDistanceRatesPage.tsx @@ -2,7 +2,6 @@ import {useFocusEffect, useIsFocused} from '@react-navigation/native'; import type {StackScreenProps} from '@react-navigation/stack'; import React, {useCallback, useEffect, useMemo, useState} from 'react'; import {ActivityIndicator, View} from 'react-native'; -import {useOnyx} from 'react-native-onyx'; import Button from '@components/Button'; import type {DropdownOption, WorkspaceDistanceRatesBulkActionType} from '@components/ButtonWithDropdownMenu/types'; import ConfirmModal from '@components/ConfirmModal'; @@ -16,6 +15,7 @@ import type {ListItem} from '@components/SelectionList/types'; import SelectionListWithModal from '@components/SelectionListWithModal'; import Text from '@components/Text'; import useLocalize from '@hooks/useLocalize'; +import useMobileSelectionMode from '@hooks/useMobileSelectionMode'; import useNetwork from '@hooks/useNetwork'; import usePolicy from '@hooks/usePolicy'; import useResponsiveLayout from '@hooks/useResponsiveLayout'; @@ -30,7 +30,6 @@ import AccessOrNotFoundWrapper from '@pages/workspace/AccessOrNotFoundWrapper'; import * as DistanceRate from '@userActions/Policy/DistanceRate'; import ButtonWithDropdownMenu from '@src/components/ButtonWithDropdownMenu'; import CONST from '@src/CONST'; -import ONYXKEYS from '@src/ONYXKEYS'; import ROUTES from '@src/ROUTES'; import type SCREENS from '@src/SCREENS'; import type {CustomUnit, Rate} from '@src/types/onyx/Policy'; @@ -53,7 +52,7 @@ function PolicyDistanceRatesPage({ const [isDeleteModalVisible, setIsDeleteModalVisible] = useState(false); const isFocused = useIsFocused(); const policy = usePolicy(policyID); - const [selectionMode] = useOnyx(ONYXKEYS.MOBILE_SELECTION_MODE); + const {selectionMode} = useMobileSelectionMode(); const canSelectMultiple = shouldUseNarrowLayout ? selectionMode?.isEnabled : true; diff --git a/src/pages/workspace/reportFields/ReportFieldsListValuesPage.tsx b/src/pages/workspace/reportFields/ReportFieldsListValuesPage.tsx index 686a32c69c6b..af14ac171a4f 100644 --- a/src/pages/workspace/reportFields/ReportFieldsListValuesPage.tsx +++ b/src/pages/workspace/reportFields/ReportFieldsListValuesPage.tsx @@ -18,6 +18,7 @@ import SelectionListWithModal from '@components/SelectionListWithModal'; import TableListItemSkeleton from '@components/Skeletons/TableRowSkeleton'; import Text from '@components/Text'; import useLocalize from '@hooks/useLocalize'; +import useMobileSelectionMode from '@hooks/useMobileSelectionMode'; import useResponsiveLayout from '@hooks/useResponsiveLayout'; import useThemeStyles from '@hooks/useThemeStyles'; import {turnOffMobileSelectionMode} from '@libs/actions/MobileSelectionMode'; @@ -60,7 +61,7 @@ function ReportFieldsListValuesPage({ const {translate} = useLocalize(); const {isSmallScreenWidth} = useResponsiveLayout(); const [formDraft] = useOnyx(ONYXKEYS.FORMS.WORKSPACE_REPORT_FIELDS_FORM_DRAFT); - const [selectionMode] = useOnyx(ONYXKEYS.MOBILE_SELECTION_MODE); + const {selectionMode} = useMobileSelectionMode(); const [selectedValues, setSelectedValues] = useState>({}); const [deleteValuesConfirmModalVisible, setDeleteValuesConfirmModalVisible] = useState(false); diff --git a/src/pages/workspace/reportFields/WorkspaceReportFieldsPage.tsx b/src/pages/workspace/reportFields/WorkspaceReportFieldsPage.tsx index 872946905974..62dee4fe340f 100644 --- a/src/pages/workspace/reportFields/WorkspaceReportFieldsPage.tsx +++ b/src/pages/workspace/reportFields/WorkspaceReportFieldsPage.tsx @@ -3,7 +3,6 @@ import type {StackScreenProps} from '@react-navigation/stack'; import {Str} from 'expensify-common'; import React, {useCallback, useEffect, useMemo, useState} from 'react'; import {ActivityIndicator, View} from 'react-native'; -import {useOnyx} from 'react-native-onyx'; import Button from '@components/Button'; import ButtonWithDropdownMenu from '@components/ButtonWithDropdownMenu'; import type {DropdownOption} from '@components/ButtonWithDropdownMenu/types'; @@ -22,6 +21,7 @@ import Text from '@components/Text'; import TextLink from '@components/TextLink'; import useEnvironment from '@hooks/useEnvironment'; import useLocalize from '@hooks/useLocalize'; +import useMobileSelectionMode from '@hooks/useMobileSelectionMode'; import useNetwork from '@hooks/useNetwork'; import usePolicy from '@hooks/usePolicy'; import useResponsiveLayout from '@hooks/useResponsiveLayout'; @@ -38,7 +38,6 @@ import * as WorkspaceReportFieldUtils from '@libs/WorkspaceReportFieldUtils'; import AccessOrNotFoundWrapper from '@pages/workspace/AccessOrNotFoundWrapper'; import * as ReportField from '@userActions/Policy/ReportField'; import CONST from '@src/CONST'; -import ONYXKEYS from '@src/ONYXKEYS'; import ROUTES from '@src/ROUTES'; import type SCREENS from '@src/SCREENS'; import type {PolicyReportField} from '@src/types/onyx/Policy'; @@ -64,7 +63,7 @@ function WorkspaceReportFieldsPage({ const isFocused = useIsFocused(); const {environmentURL} = useEnvironment(); const policy = usePolicy(policyID); - const [selectionMode] = useOnyx(ONYXKEYS.MOBILE_SELECTION_MODE); + const {selectionMode} = useMobileSelectionMode(); const filteredPolicyFieldList = useMemo(() => { if (!policy?.fieldList) { return {}; diff --git a/src/pages/workspace/tags/WorkspaceTagsPage.tsx b/src/pages/workspace/tags/WorkspaceTagsPage.tsx index adf200a99dd1..6ddcdcce80f0 100644 --- a/src/pages/workspace/tags/WorkspaceTagsPage.tsx +++ b/src/pages/workspace/tags/WorkspaceTagsPage.tsx @@ -21,6 +21,7 @@ import Text from '@components/Text'; import TextLink from '@components/TextLink'; import useEnvironment from '@hooks/useEnvironment'; import useLocalize from '@hooks/useLocalize'; +import useMobileSelectionMode from '@hooks/useMobileSelectionMode'; import useNetwork from '@hooks/useNetwork'; import usePolicy from '@hooks/usePolicy'; import useResponsiveLayout from '@hooks/useResponsiveLayout'; @@ -55,7 +56,7 @@ function WorkspaceTagsPage({route}: WorkspaceTagsPageProps) { const policyID = route.params.policyID ?? '-1'; const policy = usePolicy(policyID); const [policyTags] = useOnyx(`${ONYXKEYS.COLLECTION.POLICY_TAGS}${policyID}`); - const [selectionMode] = useOnyx(ONYXKEYS.MOBILE_SELECTION_MODE); + const {selectionMode} = useMobileSelectionMode(); const {environmentURL} = useEnvironment(); const isConnectedToAccounting = Object.keys(policy?.connections ?? {}).length > 0; const currentConnectionName = PolicyUtils.getCurrentConnectionName(policy); diff --git a/src/pages/workspace/tags/WorkspaceViewTagsPage.tsx b/src/pages/workspace/tags/WorkspaceViewTagsPage.tsx index 752da36394d0..b5c4bfa9d038 100644 --- a/src/pages/workspace/tags/WorkspaceViewTagsPage.tsx +++ b/src/pages/workspace/tags/WorkspaceViewTagsPage.tsx @@ -16,6 +16,7 @@ import TableListItem from '@components/SelectionList/TableListItem'; import SelectionListWithModal from '@components/SelectionListWithModal'; import Text from '@components/Text'; import useLocalize from '@hooks/useLocalize'; +import useMobileSelectionMode from '@hooks/useMobileSelectionMode'; import useNetwork from '@hooks/useNetwork'; import usePolicy from '@hooks/usePolicy'; import useResponsiveLayout from '@hooks/useResponsiveLayout'; @@ -54,7 +55,7 @@ function WorkspaceViewTagsPage({route}: WorkspaceViewTagsProps) { const policyID = route.params.policyID ?? '-1'; const policy = usePolicy(policyID); const [policyTags] = useOnyx(`${ONYXKEYS.COLLECTION.POLICY_TAGS}${policyID}`); - const [selectionMode] = useOnyx(ONYXKEYS.MOBILE_SELECTION_MODE); + const {selectionMode} = useMobileSelectionMode(); const currentTagListName = useMemo(() => PolicyUtils.getTagListName(policyTags, route.params.orderWeight), [policyTags, route.params.orderWeight]); const currentPolicyTag = policyTags?.[currentTagListName]; diff --git a/src/pages/workspace/taxes/WorkspaceTaxesPage.tsx b/src/pages/workspace/taxes/WorkspaceTaxesPage.tsx index 02d807ed63d1..92f361caf9f8 100644 --- a/src/pages/workspace/taxes/WorkspaceTaxesPage.tsx +++ b/src/pages/workspace/taxes/WorkspaceTaxesPage.tsx @@ -2,7 +2,6 @@ import {useFocusEffect, useIsFocused} from '@react-navigation/native'; import type {StackScreenProps} from '@react-navigation/stack'; import React, {useCallback, useEffect, useMemo, useState} from 'react'; import {ActivityIndicator, View} from 'react-native'; -import {useOnyx} from 'react-native-onyx'; import Button from '@components/Button'; import ButtonWithDropdownMenu from '@components/ButtonWithDropdownMenu'; import type {DropdownOption, WorkspaceTaxRatesBulkActionType} from '@components/ButtonWithDropdownMenu/types'; @@ -19,6 +18,7 @@ import Text from '@components/Text'; import TextLink from '@components/TextLink'; import useEnvironment from '@hooks/useEnvironment'; import useLocalize from '@hooks/useLocalize'; +import useMobileSelectionMode from '@hooks/useMobileSelectionMode'; import useNetwork from '@hooks/useNetwork'; import useResponsiveLayout from '@hooks/useResponsiveLayout'; import useTheme from '@hooks/useTheme'; @@ -31,11 +31,10 @@ import Navigation from '@libs/Navigation/Navigation'; import * as PolicyUtils from '@libs/PolicyUtils'; import type {FullScreenNavigatorParamList} from '@navigation/types'; import AccessOrNotFoundWrapper from '@pages/workspace/AccessOrNotFoundWrapper'; -import withPolicyAndFullscreenLoading from '@pages/workspace/withPolicyAndFullscreenLoading'; import type {WithPolicyAndFullscreenLoadingProps} from '@pages/workspace/withPolicyAndFullscreenLoading'; +import withPolicyAndFullscreenLoading from '@pages/workspace/withPolicyAndFullscreenLoading'; import {openPolicyTaxesPage} from '@userActions/Policy/Policy'; import CONST from '@src/CONST'; -import ONYXKEYS from '@src/ONYXKEYS'; import ROUTES from '@src/ROUTES'; import type SCREENS from '@src/SCREENS'; import type {TaxRate} from '@src/types/onyx'; @@ -55,7 +54,7 @@ function WorkspaceTaxesPage({ const {environmentURL} = useEnvironment(); const [selectedTaxesIDs, setSelectedTaxesIDs] = useState([]); const [isDeleteModalVisible, setIsDeleteModalVisible] = useState(false); - const [selectionMode] = useOnyx(ONYXKEYS.MOBILE_SELECTION_MODE); + const {selectionMode} = useMobileSelectionMode(); const defaultExternalID = policy?.taxRates?.defaultExternalID; const foreignTaxDefault = policy?.taxRates?.foreignTaxDefault; const isFocused = useIsFocused();