diff --git a/src/components/SelectionList/ListItemRightCaretWithLabel.tsx b/src/components/SelectionList/ListItemRightCaretWithLabel.tsx index f20c4179f0fe..74c519333a28 100644 --- a/src/components/SelectionList/ListItemRightCaretWithLabel.tsx +++ b/src/components/SelectionList/ListItemRightCaretWithLabel.tsx @@ -3,6 +3,7 @@ import {View} from 'react-native'; import Icon from '@components/Icon'; import * as Expensicons from '@components/Icon/Expensicons'; import Text from '@components/Text'; +import useStyleUtils from '@hooks/useStyleUtils'; import useTheme from '@hooks/useTheme'; import useThemeStyles from '@hooks/useThemeStyles'; @@ -11,13 +12,14 @@ type ListItemRightCaretWithLabelProps = { shouldShowCaret?: boolean; }; -function ListItemRightCaretWithLabel({labelText, shouldShowCaret = true}: ListItemRightCaretWithLabelProps) { +function ListItemRightCaretWithLabel({labelText, shouldShowCaret = false}: ListItemRightCaretWithLabelProps) { const styles = useThemeStyles(); const theme = useTheme(); + const StyleUtils = useStyleUtils(); return ( - {!!labelText && {labelText}} + {!!labelText && {labelText}} {shouldShowCaret && ( + {leftHeaderText} + + {rightHeaderText} + + + ); + + if (canSelectMultiple) { + return header; + } + return {header}; +} + +export default CustomListHeader; diff --git a/src/pages/workspace/WorkspaceMembersPage.tsx b/src/pages/workspace/WorkspaceMembersPage.tsx index 77f3b7a1a4b0..96b6d31e5a2e 100644 --- a/src/pages/workspace/WorkspaceMembersPage.tsx +++ b/src/pages/workspace/WorkspaceMembersPage.tsx @@ -19,6 +19,7 @@ import MessagesRow from '@components/MessagesRow'; import TableListItem from '@components/SelectionList/TableListItem'; import type {ListItem, SelectionListHandle} from '@components/SelectionList/types'; import SelectionListWithModal from '@components/SelectionListWithModal'; +import CustomListHeader from '@components/SelectionListWithModal/CustomListHeader'; import Text from '@components/Text'; import type {WithCurrentUserPersonalDetailsProps} from '@components/withCurrentUserPersonalDetails'; import withCurrentUserPersonalDetails from '@components/withCurrentUserPersonalDetails'; @@ -27,7 +28,6 @@ import useMobileSelectionMode from '@hooks/useMobileSelectionMode'; import useNetwork from '@hooks/useNetwork'; import usePrevious from '@hooks/usePrevious'; import useResponsiveLayout from '@hooks/useResponsiveLayout'; -import useStyleUtils from '@hooks/useStyleUtils'; import useThemeStyles from '@hooks/useThemeStyles'; import useWindowDimensions from '@hooks/useWindowDimensions'; import {turnOffMobileSelectionMode} from '@libs/actions/MobileSelectionMode'; @@ -68,7 +68,6 @@ type MemberOption = Omit & {accountID: number}; function WorkspaceMembersPage({personalDetails, route, policy, currentUserPersonalDetails}: WorkspaceMembersPageProps) { const policyMemberEmailsToAccountIDs = useMemo(() => PolicyUtils.getMemberAccountIDsForWorkspace(policy?.employeeList, true), [policy?.employeeList]); const styles = useThemeStyles(); - const StyleUtils = useStyleUtils(); const [selectedEmployees, setSelectedEmployees] = useState([]); const [removeMembersConfirmModalVisible, setRemoveMembersConfirmModalVisible] = useState(false); const [errors, setErrors] = useState({}); @@ -452,20 +451,13 @@ function WorkspaceMembersPage({personalDetails, route, policy, currentUserPerson }, [setSelectedEmployees, selectionMode?.isEnabled]); const getCustomListHeader = () => { - const header = ( - - - {translate('common.member')} - - - {translate('common.role')} - - + return ( + ); - if (canSelectMultiple) { - return header; - } - return {header}; }; const changeUserRole = (role: ValueOf) => { diff --git a/src/pages/workspace/categories/WorkspaceCategoriesPage.tsx b/src/pages/workspace/categories/WorkspaceCategoriesPage.tsx index 750e72289ee5..e53ca99ddc40 100644 --- a/src/pages/workspace/categories/WorkspaceCategoriesPage.tsx +++ b/src/pages/workspace/categories/WorkspaceCategoriesPage.tsx @@ -19,6 +19,7 @@ import ListItemRightCaretWithLabel from '@components/SelectionList/ListItemRight import TableListItem from '@components/SelectionList/TableListItem'; import type {ListItem} from '@components/SelectionList/types'; import SelectionListWithModal from '@components/SelectionListWithModal'; +import CustomListHeader from '@components/SelectionListWithModal/CustomListHeader'; import TableListItemSkeleton from '@components/Skeletons/TableRowSkeleton'; import Text from '@components/Text'; import TextLink from '@components/TextLink'; @@ -138,12 +139,15 @@ function WorkspaceCategoriesPage({route}: WorkspaceCategoriesPageProps) { setSelectedCategories(isAllSelected ? {} : Object.fromEntries(availableCategories.map((item) => [item.keyForList, true]))); }; - const getCustomListHeader = () => ( - - {translate('common.name')} - {translate('statusPage.status')} - - ); + const getCustomListHeader = () => { + return ( + + ); + }; const navigateToCategorySettings = (category: PolicyOption) => { if (backTo) { diff --git a/src/pages/workspace/distanceRates/PolicyDistanceRatesPage.tsx b/src/pages/workspace/distanceRates/PolicyDistanceRatesPage.tsx index 661388a1657d..dcb5f574282e 100644 --- a/src/pages/workspace/distanceRates/PolicyDistanceRatesPage.tsx +++ b/src/pages/workspace/distanceRates/PolicyDistanceRatesPage.tsx @@ -13,6 +13,7 @@ import ListItemRightCaretWithLabel from '@components/SelectionList/ListItemRight import TableListItem from '@components/SelectionList/TableListItem'; import type {ListItem} from '@components/SelectionList/types'; import SelectionListWithModal from '@components/SelectionListWithModal'; +import CustomListHeader from '@components/SelectionListWithModal/CustomListHeader'; import Text from '@components/Text'; import useLocalize from '@hooks/useLocalize'; import useMobileSelectionMode from '@hooks/useMobileSelectionMode'; @@ -193,12 +194,15 @@ function PolicyDistanceRatesPage({ } }; - const getCustomListHeader = () => ( - - {translate('workspace.distanceRates.rate')} - {translate('statusPage.status')} - - ); + const getCustomListHeader = () => { + return ( + + ); + }; const getBulkActionsButtonOptions = () => { const options: Array> = [ diff --git a/src/pages/workspace/reportFields/ReportFieldsListValuesPage.tsx b/src/pages/workspace/reportFields/ReportFieldsListValuesPage.tsx index 49c8f391c700..381d50350326 100644 --- a/src/pages/workspace/reportFields/ReportFieldsListValuesPage.tsx +++ b/src/pages/workspace/reportFields/ReportFieldsListValuesPage.tsx @@ -98,12 +98,7 @@ function ReportFieldsListValuesPage({ keyForList: value, isSelected: selectedValues[value] && canSelectMultiple, enabled: !disabledListValues.at(index) ?? true, - rightElement: ( - - ), + rightElement: , })) .sort((a, b) => localeCompare(a.value, b.value)); return [{data, isDisabled: false}]; @@ -164,7 +159,7 @@ function ReportFieldsListValuesPage({ styles.flex1, styles.flexRow, styles.justifyContentBetween, - // Required padding accounting for the checkbox and the right arrow in multi-select mode + // Required padding accounting for the checkbox in multi-select mode canSelectMultiple && styles.pl3, ]} > diff --git a/src/pages/workspace/reportFields/WorkspaceReportFieldsPage.tsx b/src/pages/workspace/reportFields/WorkspaceReportFieldsPage.tsx index fbcaede370f5..a6b7dd8fa48a 100644 --- a/src/pages/workspace/reportFields/WorkspaceReportFieldsPage.tsx +++ b/src/pages/workspace/reportFields/WorkspaceReportFieldsPage.tsx @@ -18,6 +18,7 @@ import ListItemRightCaretWithLabel from '@components/SelectionList/ListItemRight import TableListItem from '@components/SelectionList/TableListItem'; import type {ListItem} from '@components/SelectionList/types'; import SelectionListWithModal from '@components/SelectionListWithModal'; +import CustomListHeader from '@components/SelectionListWithModal/CustomListHeader'; import TableListItemSkeleton from '@components/Skeletons/TableRowSkeleton'; import Text from '@components/Text'; import TextLink from '@components/TextLink'; @@ -124,12 +125,7 @@ function WorkspaceReportFieldsPage({ isSelected: selectedReportFields.find((selectedReportField) => selectedReportField.name === reportField.name) !== undefined && canSelectMultiple, isDisabled: reportField.pendingAction === CONST.RED_BRICK_ROAD_PENDING_ACTION.DELETE, text: reportField.name, - rightElement: ( - - ), + rightElement: , })), isDisabled: false, }, @@ -206,24 +202,13 @@ function WorkspaceReportFieldsPage({ }; const getCustomListHeader = () => { - const header = ( - - {translate('common.name')} - {translate('common.type')} - + return ( + ); - if (canSelectMultiple) { - return header; - } - return {header}; }; const getHeaderText = () => ( diff --git a/src/pages/workspace/tags/WorkspaceTagsPage.tsx b/src/pages/workspace/tags/WorkspaceTagsPage.tsx index c798d5096614..a719da348021 100644 --- a/src/pages/workspace/tags/WorkspaceTagsPage.tsx +++ b/src/pages/workspace/tags/WorkspaceTagsPage.tsx @@ -19,6 +19,7 @@ import ScreenWrapper from '@components/ScreenWrapper'; import ListItemRightCaretWithLabel from '@components/SelectionList/ListItemRightCaretWithLabel'; import TableListItem from '@components/SelectionList/TableListItem'; import SelectionListWithModal from '@components/SelectionListWithModal'; +import CustomListHeader from '@components/SelectionListWithModal/CustomListHeader'; import TableListItemSkeleton from '@components/Skeletons/TableRowSkeleton'; import Text from '@components/Text'; import TextLink from '@components/TextLink'; @@ -115,7 +116,6 @@ function WorkspaceTagsPage({route}: WorkspaceTagsPageProps) { rightElement: ( tag.enabled) ? translate('common.required') : undefined} - shouldShowCaret={false} /> ), })); @@ -157,24 +157,13 @@ function WorkspaceTagsPage({route}: WorkspaceTagsPageProps) { }; const getCustomListHeader = () => { - const header = ( - - {translate('common.name')} - {translate('statusPage.status')} - + return ( + ); - if (canSelectMultiple) { - return header; - } - return {header}; }; const navigateToTagsSettings = () => { diff --git a/src/pages/workspace/taxes/WorkspaceTaxesPage.tsx b/src/pages/workspace/taxes/WorkspaceTaxesPage.tsx index 44919dd09324..43f5a522e641 100644 --- a/src/pages/workspace/taxes/WorkspaceTaxesPage.tsx +++ b/src/pages/workspace/taxes/WorkspaceTaxesPage.tsx @@ -15,6 +15,7 @@ import ListItemRightCaretWithLabel from '@components/SelectionList/ListItemRight import TableListItem from '@components/SelectionList/TableListItem'; import type {ListItem} from '@components/SelectionList/types'; import SelectionListWithModal from '@components/SelectionListWithModal'; +import CustomListHeader from '@components/SelectionListWithModal/CustomListHeader'; import Text from '@components/Text'; import TextLink from '@components/TextLink'; import useEnvironment from '@hooks/useEnvironment'; @@ -154,12 +155,15 @@ function WorkspaceTaxesPage({ }); }; - const getCustomListHeader = () => ( - - {translate('common.name')} - {translate('statusPage.status')} - - ); + const getCustomListHeader = () => { + return ( + + ); + }; const deleteTaxes = useCallback(() => { if (!policyID) {