From 479efd67a4e634d34d391f0c489690be517152f5 Mon Sep 17 00:00:00 2001 From: Filip Solecki Date: Fri, 5 Apr 2024 15:01:07 +0200 Subject: [PATCH 1/5] Remove OptionsSelector part 1 --- src/components/SelectionList/BaseListItem.tsx | 9 ++++ .../SelectionList/BaseSelectionList.tsx | 25 +++++++--- src/components/SelectionList/types.ts | 19 +++++-- src/components/TagPicker/index.tsx | 22 +++------ src/libs/OptionsListUtils.ts | 15 +++--- src/pages/EditReportFieldDropdownPage.tsx | 29 +++++------ src/pages/WorkspaceSwitcherPage.tsx | 49 ++++++------------- .../ShareLogList/BaseShareLogList.tsx | 49 +++++++++---------- tests/unit/OptionsListUtilsTest.js | 13 +++++ 9 files changed, 121 insertions(+), 109 deletions(-) diff --git a/src/components/SelectionList/BaseListItem.tsx b/src/components/SelectionList/BaseListItem.tsx index cd1a40b5ef5d..038a1dbcec8d 100644 --- a/src/components/SelectionList/BaseListItem.tsx +++ b/src/components/SelectionList/BaseListItem.tsx @@ -81,6 +81,15 @@ function BaseListItem({ )} + {!item.isSelected && !!item.brickRoadIndicator && ( + + + + )} + {rightHandSideComponentRender()} {FooterComponent} diff --git a/src/components/SelectionList/BaseSelectionList.tsx b/src/components/SelectionList/BaseSelectionList.tsx index 8dd7577de779..80d6ce122719 100644 --- a/src/components/SelectionList/BaseSelectionList.tsx +++ b/src/components/SelectionList/BaseSelectionList.tsx @@ -71,6 +71,9 @@ function BaseSelectionList( textInputRef, headerMessageStyle, shouldHideListOnInitialRender = true, + textInputIconLeft, + sectionTitleStyles, + textInputAutoFocus = true, }: BaseSelectionListProps, ref: ForwardedRef, ) { @@ -79,7 +82,7 @@ function BaseSelectionList( const listRef = useRef>>(null); const innerTextInputRef = useRef(null); const focusTimeoutRef = useRef(null); - const shouldShowTextInput = !!textInputLabel; + const shouldShowTextInput = !!textInputLabel || !!textInputIconLeft; const shouldShowSelectAll = !!onSelectAll; const activeElementRole = useActiveElementRole(); const isFocused = useIsFocused(); @@ -310,7 +313,7 @@ function BaseSelectionList( // We do this so that we can reference the height in `getItemLayout` – // we need to know the heights of all list items up-front in order to synchronously compute the layout of any given list item. // So be aware that if you adjust the content of the section header (for example, change the font size), you may need to adjust this explicit height as well. - + {section.title} ); @@ -377,6 +380,9 @@ function BaseSelectionList( /** Focuses the text input when the component comes into focus and after any navigation animations finish. */ useFocusEffect( useCallback(() => { + if (!textInputAutoFocus) { + return; + } if (shouldShowTextInput) { focusTimeoutRef.current = setTimeout(() => { if (!innerTextInputRef.current) { @@ -391,7 +397,7 @@ function BaseSelectionList( } clearTimeout(focusTimeoutRef.current); }; - }, [shouldShowTextInput]), + }, [shouldShowTextInput, textInputAutoFocus]), ); const prevTextInputValue = usePrevious(textInputValue); @@ -494,8 +500,12 @@ function BaseSelectionList( return; } - // eslint-disable-next-line no-param-reassign - textInputRef.current = element as RNTextInput; + if (typeof textInputRef === 'function') { + textInputRef(element as RNTextInput); + } else { + // eslint-disable-next-line no-param-reassign + textInputRef.current = element as RNTextInput; + } }} label={textInputLabel} accessibilityLabel={textInputLabel} @@ -508,6 +518,7 @@ function BaseSelectionList( inputMode={inputMode} selectTextOnFocus spellCheck={false} + iconLeft={textInputIconLeft} onSubmitEditing={selectFocusedOption} blurOnSubmit={!!flattenedSections.allOptions.length} isLoading={isLoadingNewOptions} @@ -515,7 +526,9 @@ function BaseSelectionList( /> )} - {!!headerMessage && ( + {/* If we are loading new options we will avoid showing any header message. This is mostly because one of the header messages says there are no options. */} + {/* This is misleading because we might be in the process of loading fresh options from the server. */} + {!isLoadingNewOptions && !!headerMessage && ( {headerMessage} diff --git a/src/components/SelectionList/types.ts b/src/components/SelectionList/types.ts index e401dd5456b2..f4b1b990811f 100644 --- a/src/components/SelectionList/types.ts +++ b/src/components/SelectionList/types.ts @@ -1,10 +1,12 @@ import type {MutableRefObject, ReactElement, ReactNode} from 'react'; import type {GestureResponderEvent, InputModeOptions, LayoutChangeEvent, SectionListData, StyleProp, TextInput, TextStyle, ViewStyle} from 'react-native'; import type {MaybePhraseKey} from '@libs/Localize'; +import type {BrickRoad} from '@libs/WorkspacesSettingsUtils'; import type CONST from '@src/CONST'; import type {Errors, Icon, PendingAction} from '@src/types/onyx/OnyxCommon'; import type {ReceiptErrors} from '@src/types/onyx/Transaction'; import type ChildrenProps from '@src/types/utils/ChildrenProps'; +import type IconAsset from '@src/types/utils/IconAsset'; import type InviteMemberListItem from './InviteMemberListItem'; import type RadioListItem from './RadioListItem'; import type TableListItem from './TableListItem'; @@ -110,6 +112,8 @@ type ListItem = { /** The search value from the selection list */ searchText?: string | null; + + brickRoadIndicator?: BrickRoad | '' | null; }; type ListItemProps = CommonListItemProps & { @@ -214,6 +218,12 @@ type BaseSelectionListProps = Partial & { /** Max length for the text input */ textInputMaxLength?: number; + /** Icon to display on the left side of TextInput */ + textInputIconLeft?: IconAsset; + + /** Whether text input should be focused */ + textInputAutoFocus?: boolean; + /** Callback to fire when the text input changes */ onChangeText?: (text: string) => void; @@ -221,7 +231,7 @@ type BaseSelectionListProps = Partial & { inputMode?: InputModeOptions; /** Item `keyForList` to focus initially */ - initiallyFocusedOptionKey?: string; + initiallyFocusedOptionKey?: string | null; /** Callback to fire when the list is scrolled */ onScroll?: () => void; @@ -272,7 +282,7 @@ type BaseSelectionListProps = Partial & { disableKeyboardShortcuts?: boolean; /** Styles to apply to SelectionList container */ - containerStyle?: ViewStyle; + containerStyle?: StyleProp; /** Whether keyboard is visible on the screen */ isKeyboardShown?: boolean; @@ -296,7 +306,10 @@ type BaseSelectionListProps = Partial & { isRowMultilineSupported?: boolean; /** Ref for textInput */ - textInputRef?: MutableRefObject; + textInputRef?: MutableRefObject | ((ref: TextInput | null) => void); + + /** Styles for the section title */ + sectionTitleStyles?: StyleProp; /** * When true, the list won't be visible until the list layout is measured. This prevents the list from "blinking" as it's scrolled to the bottom which is recommended for large lists. diff --git a/src/components/TagPicker/index.tsx b/src/components/TagPicker/index.tsx index 54ad016173b7..cd462dbe3f2e 100644 --- a/src/components/TagPicker/index.tsx +++ b/src/components/TagPicker/index.tsx @@ -2,7 +2,8 @@ import React, {useMemo, useState} from 'react'; import type {OnyxEntry} from 'react-native-onyx'; import {withOnyx} from 'react-native-onyx'; import type {EdgeInsets} from 'react-native-safe-area-context'; -import OptionsSelector from '@components/OptionsSelector'; +import SelectionList from '@components/SelectionList'; +import RadioListItem from '@components/SelectionList/RadioListItem'; import useLocalize from '@hooks/useLocalize'; import useStyleUtils from '@hooks/useStyleUtils'; import useThemeStyles from '@hooks/useThemeStyles'; @@ -100,22 +101,15 @@ function TagPicker({selectedTag, tagListName, policyTags, tagListIndex, policyRe const selectedOptionKey = sections[0]?.data?.filter((policyTag) => policyTag.searchText === selectedTag)?.[0]?.keyForList; return ( - >): Option[] { +function getTagsOptions(tags: Array>, selectedOptions?: SelectedTagOption[]): Option[] { return tags.map((tag) => { // This is to remove unnecessary escaping backslash in tag name sent from backend. const cleanedName = PolicyUtils.getCleanedTagName(tag.name); @@ -1115,6 +1115,7 @@ function getTagsOptions(tags: Array>): Optio searchText: tag.name, tooltipText: cleanedName, isDisabled: !tag.enabled, + isSelected: selectedOptions?.some((selectedTag) => selectedTag.name === tag.name), }; }); } @@ -1146,7 +1147,7 @@ function getTagListSections( // "Selected" section title: '', shouldShow: false, - data: getTagsOptions(selectedTagOptions), + data: getTagsOptions(selectedTagOptions, selectedOptions), }); return tagSections; @@ -1159,7 +1160,7 @@ function getTagListSections( // "Search" section title: '', shouldShow: true, - data: getTagsOptions(searchTags), + data: getTagsOptions(searchTags, selectedOptions), }); return tagSections; @@ -1170,7 +1171,7 @@ function getTagListSections( // "All" section when items amount less than the threshold title: '', shouldShow: false, - data: getTagsOptions(enabledTags), + data: getTagsOptions(enabledTags, selectedOptions), }); return tagSections; @@ -1195,7 +1196,7 @@ function getTagListSections( // "Selected" section title: '', shouldShow: true, - data: getTagsOptions(selectedTagOptions), + data: getTagsOptions(selectedTagOptions, selectedOptions), }); } @@ -1206,7 +1207,7 @@ function getTagListSections( // "Recent" section title: Localize.translateLocal('common.recent'), shouldShow: true, - data: getTagsOptions(cutRecentlyUsedTags), + data: getTagsOptions(cutRecentlyUsedTags, selectedOptions), }); } @@ -1214,7 +1215,7 @@ function getTagListSections( // "All" section when items amount more than the threshold title: Localize.translateLocal('common.all'), shouldShow: true, - data: getTagsOptions(filteredTags), + data: getTagsOptions(filteredTags, selectedOptions), }); return tagSections; diff --git a/src/pages/EditReportFieldDropdownPage.tsx b/src/pages/EditReportFieldDropdownPage.tsx index e887860ae155..75c2a9c5be26 100644 --- a/src/pages/EditReportFieldDropdownPage.tsx +++ b/src/pages/EditReportFieldDropdownPage.tsx @@ -2,8 +2,9 @@ import React, {useMemo, useState} from 'react'; import {withOnyx} from 'react-native-onyx'; import type {OnyxEntry} from 'react-native-onyx'; import HeaderWithBackButton from '@components/HeaderWithBackButton'; -import OptionsSelector from '@components/OptionsSelector'; import ScreenWrapper from '@components/ScreenWrapper'; +import SelectionList from '@components/SelectionList'; +import RadioListItem from '@components/SelectionList/RadioListItem'; import useLocalize from '@hooks/useLocalize'; import useStyleUtils from '@hooks/useStyleUtils'; import useThemeStyles from '@hooks/useThemeStyles'; @@ -42,6 +43,7 @@ type ReportFieldDropdownData = { keyForList: string; searchText: string; tooltipText: string; + isSelected?: boolean; }; type ReportFieldDropdownSectionItem = { @@ -71,6 +73,7 @@ function EditReportFieldDropdownPage({fieldName, onSubmit, fieldKey, fieldValue, keyForList: option, searchText: option, tooltipText: option, + isSelected: option === fieldValue, })), }); } else { @@ -84,6 +87,7 @@ function EditReportFieldDropdownPage({fieldName, onSubmit, fieldKey, fieldValue, keyForList: selectedValue, searchText: selectedValue, tooltipText: selectedValue, + isSelected: true, }, ], }); @@ -130,27 +134,18 @@ function EditReportFieldDropdownPage({fieldName, onSubmit, fieldKey, fieldValue, {({insets}) => ( <> - ) => - onSubmit({ - [fieldKey]: fieldValue === option.text ? '' : option.text, - }) - } + sectionTitleStyles={styles.mt5} + textInputValue={searchValue} + onSelectRow={(option) => onSubmit({[fieldKey]: fieldValue === option.text ? '' : option.text})} onChangeText={setSearchValue} - highlightSelectedOptions isRowMultilineSupported headerMessage={headerMessage} + initiallyFocusedOptionKey={fieldValue} /> )} diff --git a/src/pages/WorkspaceSwitcherPage.tsx b/src/pages/WorkspaceSwitcherPage.tsx index 6f077f764474..631d377e34cd 100644 --- a/src/pages/WorkspaceSwitcherPage.tsx +++ b/src/pages/WorkspaceSwitcherPage.tsx @@ -1,4 +1,4 @@ -import React, {useCallback, useEffect, useMemo, useState} from 'react'; +import React, {useCallback, useMemo, useState} from 'react'; import {View} from 'react-native'; import type {OnyxCollection} from 'react-native-onyx'; import {withOnyx} from 'react-native-onyx'; @@ -7,9 +7,10 @@ import Icon from '@components/Icon'; import * as Expensicons from '@components/Icon/Expensicons'; import {MagnifyingGlass} from '@components/Icon/Expensicons'; import OptionRow from '@components/OptionRow'; -import OptionsSelector from '@components/OptionsSelector'; import PressableWithFeedback from '@components/Pressable/PressableWithFeedback'; import ScreenWrapper from '@components/ScreenWrapper'; +import SelectionList from '@components/SelectionList'; +import UserListItem from '@components/SelectionList/UserListItem'; import Text from '@components/Text'; import Tooltip from '@components/Tooltip'; import useActiveWorkspace from '@hooks/useActiveWorkspace'; @@ -57,7 +58,6 @@ function WorkspaceSwitcherPage({policies}: WorkspaceSwitcherPageProps) { const theme = useTheme(); const styles = useThemeStyles(); const {isOffline} = useNetwork(); - const [selectedOption, setSelectedOption] = useState(); const [searchTerm, setSearchTerm] = useState(''); const {inputCallbackRef} = useAutoFocusInput(); const {translate} = useLocalize(); @@ -105,11 +105,6 @@ function WorkspaceSwitcherPage({policies}: WorkspaceSwitcherPageProps) { const {policyID} = option; - if (policyID) { - setSelectedOption(option); - } else { - setSelectedOption(undefined); - } setActiveWorkspaceID(policyID); Navigation.goBack(); if (policyID !== activeWorkspaceID) { @@ -141,8 +136,9 @@ function WorkspaceSwitcherPage({policies}: WorkspaceSwitcherPageProps) { boldStyle: hasUnreadData(policy?.id), keyForList: policy?.id, isPolicyAdmin: PolicyUtils.isPolicyAdmin(policy), + isSelected: policy?.id === activeWorkspaceID, })); - }, [policies, getIndicatorTypeForPolicy, hasUnreadData, isOffline]); + }, [policies, getIndicatorTypeForPolicy, hasUnreadData, isOffline, activeWorkspaceID]); const filteredAndSortedUserWorkspaces = useMemo( () => @@ -236,28 +232,20 @@ function WorkspaceSwitcherPage({policies}: WorkspaceSwitcherPageProps) { {usersWorkspaces.length > 0 ? ( - = CONST.WORKSPACE_SWITCHER.MINIMUM_WORKSPACES_TO_SHOW_SEARCH} + textInputValue={searchTerm} onChangeText={setSearchTerm} - selectedOptions={selectedOption ? [selectedOption] : []} onSelectRow={selectPolicy} shouldPreventDefaultFocusOnSelectRow headerMessage={headerMessage} - highlightSelectedOptions - shouldShowOptions - autoFocus={false} - canSelectMultipleOptions={false} - shouldShowSubscript={false} - showTitleTooltip={false} - contentContainerStyles={[styles.pt0, styles.mt0]} - textIconLeft={MagnifyingGlass} - // Null is to avoid selecting unfocused option when Global selected, undefined is to focus selected workspace - initiallyFocusedOptionKey={!activeWorkspaceID ? null : undefined} + containerStyle={[styles.pt0, styles.mt0]} + textInputIconLeft={usersWorkspaces.length >= CONST.WORKSPACE_SWITCHER.MINIMUM_WORKSPACES_TO_SHOW_SEARCH ? MagnifyingGlass : undefined} + initiallyFocusedOptionKey={activeWorkspaceID} + textInputAutoFocus={false} /> ) : ( @@ -269,7 +257,6 @@ function WorkspaceSwitcherPage({policies}: WorkspaceSwitcherPageProps) { setSearchTerm, searchTerm, selectPolicy, - selectedOption, styles, theme.textSupporting, translate, @@ -281,14 +268,6 @@ function WorkspaceSwitcherPage({policies}: WorkspaceSwitcherPageProps) { ], ); - useEffect(() => { - if (!activeWorkspaceID) { - return; - } - const optionToSet = usersWorkspaces.find((option) => option.policyID === activeWorkspaceID); - setSelectedOption(optionToSet); - }, [activeWorkspaceID, usersWorkspaces]); - return ( { + const attachLogToReport = (option: ListItem) => { if (!option.reportID) { return; } @@ -110,30 +111,24 @@ function BaseShareLogList({betas, onAttachLogToReport}: BaseShareLogListProps) { testID={BaseShareLogList.displayName} includeSafeAreaPaddingBottom={false} > - {({safeAreaPaddingBottomStyle}) => ( - <> - Navigation.goBack(ROUTES.SETTINGS_CONSOLE)} - /> - - - - - )} + Navigation.goBack(ROUTES.SETTINGS_CONSOLE)} + /> + + + ); } diff --git a/tests/unit/OptionsListUtilsTest.js b/tests/unit/OptionsListUtilsTest.js index d590236e5256..8fb7d4f23691 100644 --- a/tests/unit/OptionsListUtilsTest.js +++ b/tests/unit/OptionsListUtilsTest.js @@ -1130,6 +1130,7 @@ describe('OptionsListUtils', () => { searchText: 'Accounting', tooltipText: 'Accounting', isDisabled: false, + isSelected: false, }, { text: 'HR', @@ -1137,6 +1138,7 @@ describe('OptionsListUtils', () => { searchText: 'HR', tooltipText: 'HR', isDisabled: false, + isSelected: false, }, { text: 'Medical', @@ -1144,6 +1146,7 @@ describe('OptionsListUtils', () => { searchText: 'Medical', tooltipText: 'Medical', isDisabled: false, + isSelected: false, }, ], }, @@ -1159,6 +1162,7 @@ describe('OptionsListUtils', () => { searchText: 'Accounting', tooltipText: 'Accounting', isDisabled: false, + isSelected: false, }, ], }, @@ -1227,6 +1231,7 @@ describe('OptionsListUtils', () => { searchText: 'Medical', tooltipText: 'Medical', isDisabled: false, + isSelected: true, }, ], }, @@ -1240,6 +1245,7 @@ describe('OptionsListUtils', () => { searchText: 'HR', tooltipText: 'HR', isDisabled: false, + isSelected: false, }, ], }, @@ -1254,6 +1260,7 @@ describe('OptionsListUtils', () => { searchText: 'Accounting', tooltipText: 'Accounting', isDisabled: false, + isSelected: false, }, { text: 'Benefits', @@ -1261,6 +1268,7 @@ describe('OptionsListUtils', () => { searchText: 'Benefits', tooltipText: 'Benefits', isDisabled: false, + isSelected: false, }, { text: 'Cleaning', @@ -1268,6 +1276,7 @@ describe('OptionsListUtils', () => { searchText: 'Cleaning', tooltipText: 'Cleaning', isDisabled: false, + isSelected: false, }, { text: 'Food', @@ -1275,6 +1284,7 @@ describe('OptionsListUtils', () => { searchText: 'Food', tooltipText: 'Food', isDisabled: false, + isSelected: false, }, { text: 'HR', @@ -1282,6 +1292,7 @@ describe('OptionsListUtils', () => { searchText: 'HR', tooltipText: 'HR', isDisabled: false, + isSelected: false, }, { text: 'Software', @@ -1289,6 +1300,7 @@ describe('OptionsListUtils', () => { searchText: 'Software', tooltipText: 'Software', isDisabled: false, + isSelected: false, }, { text: 'Taxes', @@ -1296,6 +1308,7 @@ describe('OptionsListUtils', () => { searchText: 'Taxes', tooltipText: 'Taxes', isDisabled: false, + isSelected: false, }, ], }, From 826bf95f4fbe7327daeeb435f92536c26f7dd517 Mon Sep 17 00:00:00 2001 From: Filip Solecki Date: Fri, 5 Apr 2024 15:10:50 +0200 Subject: [PATCH 2/5] Fix tests --- tests/unit/OptionsListUtilsTest.js | 2 ++ 1 file changed, 2 insertions(+) diff --git a/tests/unit/OptionsListUtilsTest.js b/tests/unit/OptionsListUtilsTest.js index 8fb7d4f23691..981f5285c88d 100644 --- a/tests/unit/OptionsListUtilsTest.js +++ b/tests/unit/OptionsListUtilsTest.js @@ -1324,6 +1324,7 @@ describe('OptionsListUtils', () => { searchText: 'Accounting', tooltipText: 'Accounting', isDisabled: false, + isSelected: false, }, { text: 'Cleaning', @@ -1331,6 +1332,7 @@ describe('OptionsListUtils', () => { searchText: 'Cleaning', tooltipText: 'Cleaning', isDisabled: false, + isSelected: false, }, ], }, From 2e2d426dc612c24ffeff46ad74044c8c0dbd79c4 Mon Sep 17 00:00:00 2001 From: Filip Solecki Date: Fri, 5 Apr 2024 15:34:53 +0200 Subject: [PATCH 3/5] Revert EditReportFieldDropdownPage --- src/pages/EditReportFieldDropdownPage.tsx | 29 +++++++++++++---------- 1 file changed, 17 insertions(+), 12 deletions(-) diff --git a/src/pages/EditReportFieldDropdownPage.tsx b/src/pages/EditReportFieldDropdownPage.tsx index 75c2a9c5be26..e887860ae155 100644 --- a/src/pages/EditReportFieldDropdownPage.tsx +++ b/src/pages/EditReportFieldDropdownPage.tsx @@ -2,9 +2,8 @@ import React, {useMemo, useState} from 'react'; import {withOnyx} from 'react-native-onyx'; import type {OnyxEntry} from 'react-native-onyx'; import HeaderWithBackButton from '@components/HeaderWithBackButton'; +import OptionsSelector from '@components/OptionsSelector'; import ScreenWrapper from '@components/ScreenWrapper'; -import SelectionList from '@components/SelectionList'; -import RadioListItem from '@components/SelectionList/RadioListItem'; import useLocalize from '@hooks/useLocalize'; import useStyleUtils from '@hooks/useStyleUtils'; import useThemeStyles from '@hooks/useThemeStyles'; @@ -43,7 +42,6 @@ type ReportFieldDropdownData = { keyForList: string; searchText: string; tooltipText: string; - isSelected?: boolean; }; type ReportFieldDropdownSectionItem = { @@ -73,7 +71,6 @@ function EditReportFieldDropdownPage({fieldName, onSubmit, fieldKey, fieldValue, keyForList: option, searchText: option, tooltipText: option, - isSelected: option === fieldValue, })), }); } else { @@ -87,7 +84,6 @@ function EditReportFieldDropdownPage({fieldName, onSubmit, fieldKey, fieldValue, keyForList: selectedValue, searchText: selectedValue, tooltipText: selectedValue, - isSelected: true, }, ], }); @@ -134,18 +130,27 @@ function EditReportFieldDropdownPage({fieldName, onSubmit, fieldKey, fieldValue, {({insets}) => ( <> - onSubmit({[fieldKey]: fieldValue === option.text ? '' : option.text})} + // Focus the first option when searching + focusedIndex={0} + value={searchValue} + onSelectRow={(option: Record) => + onSubmit({ + [fieldKey]: fieldValue === option.text ? '' : option.text, + }) + } onChangeText={setSearchValue} + highlightSelectedOptions isRowMultilineSupported headerMessage={headerMessage} - initiallyFocusedOptionKey={fieldValue} /> )} From e2b98a311375cd8ef9c1e85d060bf5c2a72c2ea7 Mon Sep 17 00:00:00 2001 From: Filip Solecki Date: Fri, 5 Apr 2024 21:08:54 +0200 Subject: [PATCH 4/5] CR fix --- src/components/TagPicker/index.tsx | 12 +----------- 1 file changed, 1 insertion(+), 11 deletions(-) diff --git a/src/components/TagPicker/index.tsx b/src/components/TagPicker/index.tsx index cd462dbe3f2e..b9d2d61efa7d 100644 --- a/src/components/TagPicker/index.tsx +++ b/src/components/TagPicker/index.tsx @@ -1,11 +1,9 @@ import React, {useMemo, useState} from 'react'; import type {OnyxEntry} from 'react-native-onyx'; import {withOnyx} from 'react-native-onyx'; -import type {EdgeInsets} from 'react-native-safe-area-context'; import SelectionList from '@components/SelectionList'; import RadioListItem from '@components/SelectionList/RadioListItem'; import useLocalize from '@hooks/useLocalize'; -import useStyleUtils from '@hooks/useStyleUtils'; import useThemeStyles from '@hooks/useThemeStyles'; import * as OptionsListUtils from '@libs/OptionsListUtils'; import * as PolicyUtils from '@libs/PolicyUtils'; @@ -42,12 +40,6 @@ type TagPickerProps = TagPickerOnyxProps & { /** Callback to submit the selected tag */ onSubmit: () => void; - /** - * Safe area insets required for reflecting the portion of the view, - * that is not covered by navigation bars, tab bars, toolbars, and other ancestor views. - */ - insets: EdgeInsets; - /** Should show the selected option that is disabled? */ shouldShowDisabledAndSelectedOption?: boolean; @@ -55,9 +47,8 @@ type TagPickerProps = TagPickerOnyxProps & { tagListIndex: number; }; -function TagPicker({selectedTag, tagListName, policyTags, tagListIndex, policyRecentlyUsedTags, shouldShowDisabledAndSelectedOption = false, insets, onSubmit}: TagPickerProps) { +function TagPicker({selectedTag, tagListName, policyTags, tagListIndex, policyRecentlyUsedTags, shouldShowDisabledAndSelectedOption = false, onSubmit}: TagPickerProps) { const styles = useThemeStyles(); - const StyleUtils = useStyleUtils(); const {translate} = useLocalize(); const [searchValue, setSearchValue] = useState(''); @@ -103,7 +94,6 @@ function TagPicker({selectedTag, tagListName, policyTags, tagListIndex, policyRe return ( Date: Mon, 8 Apr 2024 08:53:41 +0200 Subject: [PATCH 5/5] CR fixes --- src/pages/EditRequestTagPage.js | 31 ++++++++----------- .../iou/request/step/IOURequestStepTag.js | 21 +++++-------- 2 files changed, 21 insertions(+), 31 deletions(-) diff --git a/src/pages/EditRequestTagPage.js b/src/pages/EditRequestTagPage.js index 1aead9ee1f6e..fd9064f8b6fc 100644 --- a/src/pages/EditRequestTagPage.js +++ b/src/pages/EditRequestTagPage.js @@ -43,24 +43,19 @@ function EditRequestTagPage({defaultTag, policyID, tagListName, tagListIndex, on shouldEnableMaxHeight testID={EditRequestTagPage.displayName} > - {({insets}) => ( - <> - - {translate('iou.tagSelection')} - - - )} + + {translate('iou.tagSelection')} + ); } diff --git a/src/pages/iou/request/step/IOURequestStepTag.js b/src/pages/iou/request/step/IOURequestStepTag.js index ed55628ecaa9..3693e1cf9449 100644 --- a/src/pages/iou/request/step/IOURequestStepTag.js +++ b/src/pages/iou/request/step/IOURequestStepTag.js @@ -142,19 +142,14 @@ function IOURequestStepTag({ testID={IOURequestStepTag.displayName} shouldShowNotFoundPage={shouldShowNotFoundPage} > - {({insets}) => ( - <> - {translate('iou.tagSelection')} - - - )} + {translate('iou.tagSelection')} + ); }