Skip to content

Commit

Permalink
Merge pull request #51225 from ChavdaSachin/fix-51053
Browse files Browse the repository at this point in the history
  • Loading branch information
dangrous authored Oct 24, 2024
2 parents 642fd97 + 4eaf05f commit 4ef00ef
Show file tree
Hide file tree
Showing 9 changed files with 98 additions and 83 deletions.
6 changes: 4 additions & 2 deletions src/components/SelectionList/ListItemRightCaretWithLabel.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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';

Expand All @@ -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 (
<View style={styles.flexRow}>
{!!labelText && <Text style={[styles.alignSelfCenter, styles.textSupporting, styles.pl2, styles.label]}>{labelText}</Text>}
<View style={[StyleUtils.getMinimumWidth(60)]}>{!!labelText && <Text style={[styles.textAlignCenter, styles.textSupporting, styles.label]}>{labelText}</Text>}</View>
{shouldShowCaret && (
<View style={[styles.pl2]}>
<Icon
Expand Down
40 changes: 40 additions & 0 deletions src/components/SelectionListWithModal/CustomListHeader.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,40 @@
import React from 'react';
import {View} from 'react-native';
import Text from '@components/Text';
import useStyleUtils from '@hooks/useStyleUtils';
import useThemeStyles from '@hooks/useThemeStyles';

type CustomListHeaderProps = {
canSelectMultiple: boolean | undefined;
leftHeaderText?: string | undefined;
rightHeaderText?: string | undefined;
};

function CustomListHeader({canSelectMultiple, leftHeaderText = '', rightHeaderText = ''}: CustomListHeaderProps) {
const styles = useThemeStyles();
const StyleUtils = useStyleUtils();

const header = (
<View
style={[
styles.flex1,
styles.flexRow,
styles.justifyContentBetween,
// Required padding accounting for the checkbox in multi-select mode
canSelectMultiple && styles.pl3,
]}
>
<Text style={styles.searchInputStyle}>{leftHeaderText}</Text>
<View style={[StyleUtils.getMinimumWidth(60)]}>
<Text style={[styles.searchInputStyle, styles.textAlignCenter]}>{rightHeaderText}</Text>
</View>
</View>
);

if (canSelectMultiple) {
return header;
}
return <View style={[styles.flexRow, styles.ph9, styles.pv3, styles.pb5]}>{header}</View>;
}

export default CustomListHeader;
22 changes: 7 additions & 15 deletions src/pages/workspace/WorkspaceMembersPage.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand All @@ -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';
Expand Down Expand Up @@ -68,7 +68,6 @@ type MemberOption = Omit<ListItem, 'accountID'> & {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<number[]>([]);
const [removeMembersConfirmModalVisible, setRemoveMembersConfirmModalVisible] = useState(false);
const [errors, setErrors] = useState({});
Expand Down Expand Up @@ -452,20 +451,13 @@ function WorkspaceMembersPage({personalDetails, route, policy, currentUserPerson
}, [setSelectedEmployees, selectionMode?.isEnabled]);

const getCustomListHeader = () => {
const header = (
<View style={[styles.flex1, styles.flexRow, styles.justifyContentBetween]}>
<View>
<Text style={[styles.searchInputStyle, canSelectMultiple ? styles.ml3 : styles.ml0]}>{translate('common.member')}</Text>
</View>
<View style={[StyleUtils.getMinimumWidth(60)]}>
<Text style={[styles.searchInputStyle, styles.textAlignCenter]}>{translate('common.role')}</Text>
</View>
</View>
return (
<CustomListHeader
canSelectMultiple={canSelectMultiple}
leftHeaderText={translate('common.member')}
rightHeaderText={translate('common.role')}
/>
);
if (canSelectMultiple) {
return header;
}
return <View style={[styles.peopleRow, styles.userSelectNone, styles.ph9, styles.pv3, styles.pb5]}>{header}</View>;
};

const changeUserRole = (role: ValueOf<typeof CONST.POLICY.ROLE>) => {
Expand Down
16 changes: 10 additions & 6 deletions src/pages/workspace/categories/WorkspaceCategoriesPage.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down Expand Up @@ -139,12 +140,15 @@ function WorkspaceCategoriesPage({route}: WorkspaceCategoriesPageProps) {
setSelectedCategories(isAllSelected ? {} : Object.fromEntries(availableCategories.map((item) => [item.keyForList, true])));
};

const getCustomListHeader = () => (
<View style={[styles.flex1, styles.flexRow, styles.justifyContentBetween, styles.pl3, styles.pr8, !canSelectMultiple && styles.m5]}>
<Text style={styles.searchInputStyle}>{translate('common.name')}</Text>
<Text style={[styles.searchInputStyle, styles.textAlignCenter]}>{translate('statusPage.status')}</Text>
</View>
);
const getCustomListHeader = () => {
return (
<CustomListHeader
canSelectMultiple={canSelectMultiple}
leftHeaderText={translate('common.name')}
rightHeaderText={translate('statusPage.status')}
/>
);
};

const navigateToCategorySettings = (category: PolicyOption) => {
Navigation.navigate(
Expand Down
16 changes: 10 additions & 6 deletions src/pages/workspace/distanceRates/PolicyDistanceRatesPage.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down Expand Up @@ -191,12 +192,15 @@ function PolicyDistanceRatesPage({
}
};

const getCustomListHeader = () => (
<View style={[styles.flex1, styles.flexRow, styles.justifyContentBetween, styles.pl3, styles.pr8, !canSelectMultiple && styles.m5]}>
<Text style={styles.searchInputStyle}>{translate('workspace.distanceRates.rate')}</Text>
<Text style={[styles.searchInputStyle, styles.textAlignCenter]}>{translate('statusPage.status')}</Text>
</View>
);
const getCustomListHeader = () => {
return (
<CustomListHeader
canSelectMultiple={canSelectMultiple}
leftHeaderText={translate('workspace.distanceRates.rate')}
rightHeaderText={translate('statusPage.status')}
/>
);
};

const getBulkActionsButtonOptions = () => {
const options: Array<DropdownOption<WorkspaceDistanceRatesBulkActionType>> = [
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -98,12 +98,7 @@ function ReportFieldsListValuesPage({
keyForList: value,
isSelected: selectedValues[value] && canSelectMultiple,
enabled: !disabledListValues.at(index) ?? true,
rightElement: (
<ListItemRightCaretWithLabel
shouldShowCaret={false}
labelText={disabledListValues.at(index) ? translate('workspace.common.disabled') : translate('workspace.common.enabled')}
/>
),
rightElement: <ListItemRightCaretWithLabel labelText={disabledListValues.at(index) ? translate('workspace.common.disabled') : translate('workspace.common.enabled')} />,
}))
.sort((a, b) => localeCompare(a.value, b.value));
return [{data, isDisabled: false}];
Expand Down Expand Up @@ -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,
]}
>
Expand Down
31 changes: 8 additions & 23 deletions src/pages/workspace/reportFields/WorkspaceReportFieldsPage.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down Expand Up @@ -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: (
<ListItemRightCaretWithLabel
shouldShowCaret={false}
labelText={Str.recapitalize(translate(WorkspaceReportFieldUtils.getReportFieldTypeTranslationKey(reportField.type)))}
/>
),
rightElement: <ListItemRightCaretWithLabel labelText={Str.recapitalize(translate(WorkspaceReportFieldUtils.getReportFieldTypeTranslationKey(reportField.type)))} />,
})),
isDisabled: false,
},
Expand Down Expand Up @@ -206,24 +202,13 @@ function WorkspaceReportFieldsPage({
};

const getCustomListHeader = () => {
const header = (
<View
style={[
styles.flex1,
styles.flexRow,
styles.justifyContentBetween,
// Required padding accounting for the checkbox and the right arrow in multi-select mode
canSelectMultiple && styles.pl3,
]}
>
<Text style={styles.searchInputStyle}>{translate('common.name')}</Text>
<Text style={[styles.searchInputStyle, styles.textAlignCenter]}>{translate('common.type')}</Text>
</View>
return (
<CustomListHeader
canSelectMultiple={canSelectMultiple}
leftHeaderText={translate('common.name')}
rightHeaderText={translate('common.type')}
/>
);
if (canSelectMultiple) {
return header;
}
return <View style={[styles.flexRow, styles.ph9, styles.pv3, styles.pb5]}>{header}</View>;
};

const getHeaderText = () => (
Expand Down
25 changes: 7 additions & 18 deletions src/pages/workspace/tags/WorkspaceTagsPage.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down Expand Up @@ -116,7 +117,6 @@ function WorkspaceTagsPage({route}: WorkspaceTagsPageProps) {
rightElement: (
<ListItemRightCaretWithLabel
labelText={policyTagList.required && !!Object.values(policyTagList?.tags ?? {}).some((tag) => tag.enabled) ? translate('common.required') : undefined}
shouldShowCaret={false}
/>
),
}));
Expand Down Expand Up @@ -158,24 +158,13 @@ function WorkspaceTagsPage({route}: WorkspaceTagsPageProps) {
};

const getCustomListHeader = () => {
const header = (
<View
style={[
styles.flex1,
styles.flexRow,
styles.justifyContentBetween,
// Required padding accounting for the checkbox and the right arrow in multi-select mode
canSelectMultiple && [styles.pl3, styles.pr8],
]}
>
<Text style={styles.searchInputStyle}>{translate('common.name')}</Text>
<Text style={[styles.searchInputStyle, styles.textAlignCenter]}>{translate('statusPage.status')}</Text>
</View>
return (
<CustomListHeader
canSelectMultiple={canSelectMultiple}
leftHeaderText={translate('common.name')}
rightHeaderText={translate('statusPage.status')}
/>
);
if (canSelectMultiple) {
return header;
}
return <View style={[styles.flexRow, styles.ph9, styles.pv3, styles.pb5]}>{header}</View>;
};

const navigateToTagsSettings = () => {
Expand Down
16 changes: 10 additions & 6 deletions src/pages/workspace/taxes/WorkspaceTaxesPage.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down Expand Up @@ -154,12 +155,15 @@ function WorkspaceTaxesPage({
});
};

const getCustomListHeader = () => (
<View style={[styles.flex1, styles.flexRow, styles.justifyContentBetween, styles.pl3, styles.pr8, !canSelectMultiple && styles.m5]}>
<Text style={styles.searchInputStyle}>{translate('common.name')}</Text>
<Text style={[styles.searchInputStyle, styles.textAlignCenter]}>{translate('statusPage.status')}</Text>
</View>
);
const getCustomListHeader = () => {
return (
<CustomListHeader
canSelectMultiple={canSelectMultiple}
leftHeaderText={translate('common.name')}
rightHeaderText={translate('statusPage.status')}
/>
);
};

const deleteTaxes = useCallback(() => {
if (!policyID) {
Expand Down

0 comments on commit 4ef00ef

Please sign in to comment.