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.

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

[WIP] Fix LHN flickers and scroll position restoring #55486

Draft
wants to merge 1 commit into
base: main
Choose a base branch
from
Draft
Changes from all commits
Commits
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
7 changes: 7 additions & 0 deletions src/components/LHNOptionsList/LHNOptionsList.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -16,10 +16,11 @@
import useResponsiveLayout from '@hooks/useResponsiveLayout';
import useTheme from '@hooks/useTheme';
import useThemeStyles from '@hooks/useThemeStyles';
import useWindowDimensions from '@hooks/useWindowDimensions';
import * as DraftCommentUtils from '@libs/DraftCommentUtils';

Check failure on line 20 in src/components/LHNOptionsList/LHNOptionsList.tsx

View workflow job for this annotation

GitHub Actions / Changed files ESLint check

Namespace imports from @libs are not allowed. Use named imports instead. Example: import { method } from "@libs/module"
import * as OptionsListUtils from '@libs/OptionsListUtils';

Check failure on line 21 in src/components/LHNOptionsList/LHNOptionsList.tsx

View workflow job for this annotation

GitHub Actions / Changed files ESLint check

Namespace imports from @libs are not allowed. Use named imports instead. Example: import { method } from "@libs/module"
import * as ReportActionsUtils from '@libs/ReportActionsUtils';

Check failure on line 22 in src/components/LHNOptionsList/LHNOptionsList.tsx

View workflow job for this annotation

GitHub Actions / Changed files ESLint check

Namespace imports from @libs are not allowed. Use named imports instead. Example: import { method } from "@libs/module"
import * as ReportUtils from '@libs/ReportUtils';

Check failure on line 23 in src/components/LHNOptionsList/LHNOptionsList.tsx

View workflow job for this annotation

GitHub Actions / Changed files ESLint check

Namespace imports from @libs are not allowed. Use named imports instead. Example: import { method } from "@libs/module"
import variables from '@styles/variables';
import CONST from '@src/CONST';
import ONYXKEYS from '@src/ONYXKEYS';
Expand Down Expand Up @@ -47,6 +48,8 @@
const styles = useThemeStyles();
const {translate, preferredLocale} = useLocalize();
const {shouldUseNarrowLayout} = useResponsiveLayout();
const {windowHeight, windowWidth} = useWindowDimensions();
const listHeight = windowHeight - variables.bottomTabHeight;
const shouldShowEmptyLHN = shouldUseNarrowLayout && data.length === 0;

// When the first item renders we want to call the onFirstItemRendered callback.
Expand Down Expand Up @@ -117,10 +120,10 @@
const renderItem = useCallback(
({item: reportID}: RenderItemProps): ReactElement => {
const itemFullReport = reports?.[`${ONYXKEYS.COLLECTION.REPORT}${reportID}`];
const itemParentReport = reports?.[`${ONYXKEYS.COLLECTION.REPORT}${itemFullReport?.parentReportID ?? '-1'}`];

Check failure on line 123 in src/components/LHNOptionsList/LHNOptionsList.tsx

View workflow job for this annotation

GitHub Actions / Changed files ESLint check

const itemReportActions = reportActions?.[`${ONYXKEYS.COLLECTION.REPORT_ACTIONS}${reportID}`];
const itemParentReportActions = reportActions?.[`${ONYXKEYS.COLLECTION.REPORT_ACTIONS}${itemFullReport?.parentReportID}`];
const itemParentReportAction = itemParentReportActions?.[itemFullReport?.parentReportActionID ?? '-1'];

Check failure on line 126 in src/components/LHNOptionsList/LHNOptionsList.tsx

View workflow job for this annotation

GitHub Actions / Changed files ESLint check


let invoiceReceiverPolicyID = '-1';
if (itemFullReport?.invoiceReceiver && 'policyID' in itemFullReport.invoiceReceiver) {
Expand All @@ -136,8 +139,8 @@

const itemPolicy = policy?.[`${ONYXKEYS.COLLECTION.POLICY}${itemFullReport?.policyID}`];
const transactionID = ReportActionsUtils.isMoneyRequestAction(itemParentReportAction)
? ReportActionsUtils.getOriginalMessage(itemParentReportAction)?.IOUTransactionID ?? '-1'

Check failure on line 142 in src/components/LHNOptionsList/LHNOptionsList.tsx

View workflow job for this annotation

GitHub Actions / Changed files ESLint check

: '-1';

Check failure on line 143 in src/components/LHNOptionsList/LHNOptionsList.tsx

View workflow job for this annotation

GitHub Actions / Changed files ESLint check

const itemTransaction = transactions?.[`${ONYXKEYS.COLLECTION.TRANSACTION}${transactionID}`];
const hasDraftComment = DraftCommentUtils.isValidDraftComment(draftComments?.[`${ONYXKEYS.COLLECTION.REPORT_DRAFT_COMMENT}${reportID}`]);

Expand All @@ -149,7 +152,7 @@
let lastReportActionTransactionID = '';

if (ReportActionsUtils.isMoneyRequestAction(lastReportAction)) {
lastReportActionTransactionID = ReportActionsUtils.getOriginalMessage(lastReportAction)?.IOUTransactionID ?? '-1';

Check failure on line 155 in src/components/LHNOptionsList/LHNOptionsList.tsx

View workflow job for this annotation

GitHub Actions / Changed files ESLint check

}
const lastReportActionTransaction = transactions?.[`${ONYXKEYS.COLLECTION.TRANSACTION}${lastReportActionTransactionID}`];

Expand Down Expand Up @@ -282,6 +285,10 @@
showsVerticalScrollIndicator={false}
onLayout={onLayout}
onScroll={onScroll}
estimatedListSize={{
height: listHeight,
width: windowWidth,
}}
/>
)}
</View>
Expand Down
Loading