From b777a071a0e7a7facd2f16c9ba1cc66a7e10ccc2 Mon Sep 17 00:00:00 2001 From: Wildan M Date: Mon, 18 Nov 2024 17:05:42 +0700 Subject: [PATCH 1/4] Fix export dropdown overlap --- src/components/ReportActionItem/ExportWithDropdownMenu.tsx | 6 +++++- src/components/ReportActionItem/ReportPreview.tsx | 1 + 2 files changed, 6 insertions(+), 1 deletion(-) diff --git a/src/components/ReportActionItem/ExportWithDropdownMenu.tsx b/src/components/ReportActionItem/ExportWithDropdownMenu.tsx index 50e753b25755..9bad3244e3b6 100644 --- a/src/components/ReportActionItem/ExportWithDropdownMenu.tsx +++ b/src/components/ReportActionItem/ExportWithDropdownMenu.tsx @@ -18,6 +18,7 @@ import ONYXKEYS from '@src/ONYXKEYS'; import type {Policy, Report} from '@src/types/onyx'; import type {ConnectionName} from '@src/types/onyx/Policy'; import type AnchorAlignment from '@src/types/utils/AnchorAlignment'; +import { StyleProp, ViewStyle } from 'react-native'; type ExportWithDropdownMenuProps = { policy: OnyxEntry; @@ -27,6 +28,8 @@ type ExportWithDropdownMenuProps = { connectionName: ConnectionName; dropdownAnchorAlignment?: AnchorAlignment; + + wrapperStyle?: StyleProp; }; function ExportWithDropdownMenu({ @@ -37,6 +40,7 @@ function ExportWithDropdownMenu({ horizontal: CONST.MODAL.ANCHOR_ORIGIN_HORIZONTAL.RIGHT, vertical: CONST.MODAL.ANCHOR_ORIGIN_VERTICAL.TOP, }, + wrapperStyle, }: ExportWithDropdownMenuProps) { const reportID = report?.reportID; const styles = useThemeStyles(); @@ -124,7 +128,7 @@ function ExportWithDropdownMenu({ onOptionSelected={({value}) => savePreferredExportMethod(value)} options={dropdownOptions} style={[shouldUseNarrowLayout && styles.flexGrow1]} - wrapperStyle={styles.flex1} + wrapperStyle={[styles.flex1, wrapperStyle]} buttonSize={CONST.DROPDOWN_BUTTON_SIZE.MEDIUM} /> Date: Mon, 6 Jan 2025 08:39:46 +0700 Subject: [PATCH 2/4] Fix lint --- src/components/ReportActionItem/ExportWithDropdownMenu.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/ReportActionItem/ExportWithDropdownMenu.tsx b/src/components/ReportActionItem/ExportWithDropdownMenu.tsx index 9bad3244e3b6..3559487072fd 100644 --- a/src/components/ReportActionItem/ExportWithDropdownMenu.tsx +++ b/src/components/ReportActionItem/ExportWithDropdownMenu.tsx @@ -1,4 +1,5 @@ import React, {useCallback, useMemo, useState} from 'react'; +import type {StyleProp, ViewStyle} from 'react-native'; import {useOnyx} from 'react-native-onyx'; import type {OnyxEntry} from 'react-native-onyx'; import ButtonWithDropdownMenu from '@components/ButtonWithDropdownMenu'; @@ -18,7 +19,6 @@ import ONYXKEYS from '@src/ONYXKEYS'; import type {Policy, Report} from '@src/types/onyx'; import type {ConnectionName} from '@src/types/onyx/Policy'; import type AnchorAlignment from '@src/types/utils/AnchorAlignment'; -import { StyleProp, ViewStyle } from 'react-native'; type ExportWithDropdownMenuProps = { policy: OnyxEntry; @@ -76,7 +76,7 @@ function ExportWithDropdownMenu({ ...optionTemplate, }, ]; - const exportMethod = exportMethods?.[report?.policyID ?? ''] ?? null; + const exportMethod = report?.policyID && exportMethods ? exportMethods[report.policyID] : null; if (exportMethod) { options.sort((method) => (method.value === exportMethod ? -1 : 0)); } From 948a393df301a085827490efc1ba804d34522129 Mon Sep 17 00:00:00 2001 From: Wildan Muhlis Date: Tue, 7 Jan 2025 14:06:16 +0700 Subject: [PATCH 3/4] flatten wrapper style --- src/components/ReportActionItem/ExportWithDropdownMenu.tsx | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/src/components/ReportActionItem/ExportWithDropdownMenu.tsx b/src/components/ReportActionItem/ExportWithDropdownMenu.tsx index 3559487072fd..33d4dfc6d4d0 100644 --- a/src/components/ReportActionItem/ExportWithDropdownMenu.tsx +++ b/src/components/ReportActionItem/ExportWithDropdownMenu.tsx @@ -1,4 +1,5 @@ import React, {useCallback, useMemo, useState} from 'react'; +import {StyleSheet} from 'react-native'; import type {StyleProp, ViewStyle} from 'react-native'; import {useOnyx} from 'react-native-onyx'; import type {OnyxEntry} from 'react-native-onyx'; @@ -54,6 +55,7 @@ function ExportWithDropdownMenu({ const canBeExported = ReportUtils.canBeExported(report); const isExported = ReportUtils.isExported(reportActions); const hasIntegrationAutoSync = PolicyUtils.hasIntegrationAutoSync(policy, connectionName); + const flattenedWrapperStyle = StyleSheet.flatten([styles.flex1, wrapperStyle]); const dropdownOptions: Array> = useMemo(() => { const optionTemplate = { @@ -128,7 +130,7 @@ function ExportWithDropdownMenu({ onOptionSelected={({value}) => savePreferredExportMethod(value)} options={dropdownOptions} style={[shouldUseNarrowLayout && styles.flexGrow1]} - wrapperStyle={[styles.flex1, wrapperStyle]} + wrapperStyle={flattenedWrapperStyle} buttonSize={CONST.DROPDOWN_BUTTON_SIZE.MEDIUM} /> Date: Tue, 7 Jan 2025 14:13:17 +0700 Subject: [PATCH 4/4] Update src/components/ReportActionItem/ExportWithDropdownMenu.tsx Co-authored-by: Rajat --- src/components/ReportActionItem/ExportWithDropdownMenu.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/ReportActionItem/ExportWithDropdownMenu.tsx b/src/components/ReportActionItem/ExportWithDropdownMenu.tsx index 33d4dfc6d4d0..b676c581da98 100644 --- a/src/components/ReportActionItem/ExportWithDropdownMenu.tsx +++ b/src/components/ReportActionItem/ExportWithDropdownMenu.tsx @@ -78,7 +78,7 @@ function ExportWithDropdownMenu({ ...optionTemplate, }, ]; - const exportMethod = report?.policyID && exportMethods ? exportMethods[report.policyID] : null; + const exportMethod = report?.policyID ? exportMethods?.[report.policyID] : null; if (exportMethod) { options.sort((method) => (method.value === exportMethod ? -1 : 0)); }