From 41e696825344ae115c26ed03195a472383202607 Mon Sep 17 00:00:00 2001 From: Bartosz Grajdek Date: Wed, 4 Sep 2024 14:06:43 +0200 Subject: [PATCH] fix: scroll error --- src/components/CategoryPicker.tsx | 14 ++++---------- src/components/SelectionList/BaseSelectionList.tsx | 8 +++++++- src/components/SelectionList/types.ts | 3 +++ .../categories/SpendCategorySelectorListItem.tsx | 2 +- .../categories/WorkspaceCategoriesSettingsPage.tsx | 2 +- .../CategorySelector/CategorySelectorModal.tsx | 8 ++++---- .../distanceRates/CategorySelector/index.tsx | 8 ++++---- 7 files changed, 24 insertions(+), 21 deletions(-) diff --git a/src/components/CategoryPicker.tsx b/src/components/CategoryPicker.tsx index 7156ce537b41..7955e5993ba9 100644 --- a/src/components/CategoryPicker.tsx +++ b/src/components/CategoryPicker.tsx @@ -3,8 +3,6 @@ import {withOnyx} from 'react-native-onyx'; import type {OnyxEntry} from 'react-native-onyx'; import useDebouncedState from '@hooks/useDebouncedState'; import useLocalize from '@hooks/useLocalize'; -import useThemeStyles from '@hooks/useThemeStyles'; -import getPlatform from '@libs/getPlatform'; import * as OptionsListUtils from '@libs/OptionsListUtils'; import CONST from '@src/CONST'; import ONYXKEYS from '@src/ONYXKEYS'; @@ -27,17 +25,13 @@ type CategoryPickerProps = CategoryPickerOnyxProps & { selectedCategory?: string; onSubmit: (item: ListItem) => void; - /** Whether SectionList should have overflow: "auto" enabled */ - shouldAddOverflow?: boolean; + /** Whether SectionList should use custom ScrollView */ + shouldUseCustomScrollView?: boolean; }; -function CategoryPicker({selectedCategory, policyCategories, policyRecentlyUsedCategories, policyCategoriesDraft, onSubmit, shouldAddOverflow = false}: CategoryPickerProps) { - const styles = useThemeStyles(); - const isWeb = getPlatform() === CONST.PLATFORM.WEB; +function CategoryPicker({selectedCategory, policyCategories, policyRecentlyUsedCategories, policyCategoriesDraft, onSubmit, shouldUseCustomScrollView = false}: CategoryPickerProps) { const {translate} = useLocalize(); const [searchValue, debouncedSearchValue, setSearchValue] = useDebouncedState(''); - // Ensure scrolling works for the SectionList in a nested lists structure involving a Modal on the web. - const sectionListStyles = isWeb && shouldAddOverflow && [styles.overflowAuto, styles.flex1]; const selectedOptions = useMemo(() => { if (!selectedCategory) { @@ -93,7 +87,7 @@ function CategoryPicker({selectedCategory, policyCategories, policyRecentlyUsedC ListItem={RadioListItem} initiallyFocusedOptionKey={selectedOptionKey ?? undefined} isRowMultilineSupported - sectionListStyle={sectionListStyles} + shouldUseCustomScrollView={shouldUseCustomScrollView} /> ); } diff --git a/src/components/SelectionList/BaseSelectionList.tsx b/src/components/SelectionList/BaseSelectionList.tsx index 7d8f4c1738c8..ffeeb12150b1 100644 --- a/src/components/SelectionList/BaseSelectionList.tsx +++ b/src/components/SelectionList/BaseSelectionList.tsx @@ -2,7 +2,7 @@ import {useFocusEffect, useIsFocused} from '@react-navigation/native'; import isEmpty from 'lodash/isEmpty'; import type {ForwardedRef} from 'react'; import React, {forwardRef, useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState} from 'react'; -import type {LayoutChangeEvent, SectionList as RNSectionList, TextInput as RNTextInput, SectionListData, SectionListRenderItemInfo} from 'react-native'; +import type {LayoutChangeEvent, SectionList as RNSectionList, TextInput as RNTextInput, ScrollViewProps, SectionListData, SectionListRenderItemInfo} from 'react-native'; import {View} from 'react-native'; import Button from '@components/Button'; import Checkbox from '@components/Checkbox'; @@ -10,6 +10,7 @@ import FixedFooter from '@components/FixedFooter'; import OptionsListSkeletonView from '@components/OptionsListSkeletonView'; import {PressableWithFeedback} from '@components/Pressable'; import SafeAreaConsumer from '@components/SafeAreaConsumer'; +import ScrollView from '@components/ScrollView'; import SectionList from '@components/SectionList'; import ShowMoreButton from '@components/ShowMoreButton'; import Text from '@components/Text'; @@ -73,6 +74,7 @@ function BaseSelectionList( shouldStopPropagation = false, shouldShowTooltips = true, shouldUseDynamicMaxToRenderPerBatch = false, + shouldUseCustomScrollView = false, rightHandSideComponent, isLoadingNewOptions = false, onLayout, @@ -423,6 +425,9 @@ function BaseSelectionList( ); + // eslint-disable-next-line react/jsx-props-no-spreading + const scrollComponent = shouldUseCustomScrollView ? (props: ScrollViewProps) => : undefined; + const renderItem = ({item, index, section}: SectionListRenderItemInfo>) => { const normalizedIndex = index + (section?.indexOffset ?? 0); const isDisabled = !!section.isDisabled || item.isDisabled; @@ -701,6 +706,7 @@ function BaseSelectionList( {!listHeaderContent && header()} = Partial & { /** Whether to use dynamic maxToRenderPerBatch depending on the visible number of elements */ shouldUseDynamicMaxToRenderPerBatch?: boolean; + /** Whether SectionList should use custom ScrollView */ + shouldUseCustomScrollView?: boolean; + /** Whether keyboard shortcuts should be disabled */ disableKeyboardShortcuts?: boolean; diff --git a/src/pages/workspace/categories/SpendCategorySelectorListItem.tsx b/src/pages/workspace/categories/SpendCategorySelectorListItem.tsx index 77dede3cebbe..b52b7a4ec0be 100644 --- a/src/pages/workspace/categories/SpendCategorySelectorListItem.tsx +++ b/src/pages/workspace/categories/SpendCategorySelectorListItem.tsx @@ -46,7 +46,7 @@ function SpendCategorySelectorListItem({item, onSelectRo isPickerVisible={isCategoryPickerVisible} showPickerModal={() => setIsCategoryPickerVisible(true)} hidePickerModal={() => setIsCategoryPickerVisible(false)} - shouldAddOverflow + shouldUseCustomScrollView /> ); diff --git a/src/pages/workspace/categories/WorkspaceCategoriesSettingsPage.tsx b/src/pages/workspace/categories/WorkspaceCategoriesSettingsPage.tsx index 64c875b60cdb..927128a8953b 100644 --- a/src/pages/workspace/categories/WorkspaceCategoriesSettingsPage.tsx +++ b/src/pages/workspace/categories/WorkspaceCategoriesSettingsPage.tsx @@ -4,7 +4,6 @@ import {useOnyx} from 'react-native-onyx'; import HeaderWithBackButton from '@components/HeaderWithBackButton'; import ScreenWrapper from '@components/ScreenWrapper'; import SelectionList from '@components/SelectionList'; -import SpendCategorySelectorListItem from '@components/SelectionList/SpendCategorySelectorListItem'; import type {ListItem} from '@components/SelectionList/types'; import Text from '@components/Text'; import useLocalize from '@hooks/useLocalize'; @@ -19,6 +18,7 @@ import {setWorkspaceRequiresCategory} from '@userActions/Policy/Category'; import * as Policy from '@userActions/Policy/Policy'; import CONST from '@src/CONST'; import ONYXKEYS from '@src/ONYXKEYS'; +import SpendCategorySelectorListItem from './SpendCategorySelectorListItem'; type WorkspaceCategoriesSettingsPageProps = WithPolicyConnectionsProps; diff --git a/src/pages/workspace/distanceRates/CategorySelector/CategorySelectorModal.tsx b/src/pages/workspace/distanceRates/CategorySelector/CategorySelectorModal.tsx index b555441f1f73..ce40753a23fc 100644 --- a/src/pages/workspace/distanceRates/CategorySelector/CategorySelectorModal.tsx +++ b/src/pages/workspace/distanceRates/CategorySelector/CategorySelectorModal.tsx @@ -26,11 +26,11 @@ type CategorySelectorModalProps = { /** Label to display on field */ label: string; - /** Whether SectionList should have overflow: "auto" enabled */ - shouldAddOverflow: boolean; + /** Whether SectionList should use custom ScrollView */ + shouldUseCustomScrollView: boolean; }; -function CategorySelectorModal({policyID, isVisible, currentCategory, onCategorySelected, onClose, label, shouldAddOverflow}: CategorySelectorModalProps) { +function CategorySelectorModal({policyID, isVisible, currentCategory, onCategorySelected, onClose, label, shouldUseCustomScrollView}: CategorySelectorModalProps) { const styles = useThemeStyles(); return ( @@ -57,7 +57,7 @@ function CategorySelectorModal({policyID, isVisible, currentCategory, onCategory policyID={policyID} selectedCategory={currentCategory} onSubmit={onCategorySelected} - shouldAddOverflow={shouldAddOverflow} + shouldUseCustomScrollView={shouldUseCustomScrollView} /> diff --git a/src/pages/workspace/distanceRates/CategorySelector/index.tsx b/src/pages/workspace/distanceRates/CategorySelector/index.tsx index ef6e188bfda2..8628a4df0178 100644 --- a/src/pages/workspace/distanceRates/CategorySelector/index.tsx +++ b/src/pages/workspace/distanceRates/CategorySelector/index.tsx @@ -34,8 +34,8 @@ type CategorySelectorProps = { /** Callback to hide category picker */ hidePickerModal: () => void; - /** Whether SectionList should have overflow: "auto" enabled */ - shouldAddOverflow?: boolean; + /** Whether SectionList should use custom ScrollView */ + shouldUseCustomScrollView?: boolean; }; function CategorySelector({ @@ -48,7 +48,7 @@ function CategorySelector({ isPickerVisible, showPickerModal, hidePickerModal, - shouldAddOverflow = false, + shouldUseCustomScrollView = false, }: CategorySelectorProps) { const styles = useThemeStyles(); @@ -78,7 +78,7 @@ function CategorySelector({ onClose={hidePickerModal} onCategorySelected={updateCategoryInput} label={label} - shouldAddOverflow={shouldAddOverflow} + shouldUseCustomScrollView={shouldUseCustomScrollView} /> );