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.

Sign up for GitHub

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

Jump to bottom

Fix checkmark show briefly when selecting item #47034

Merged
merged 1 commit into from
Aug 12, 2024
Merged

Fix checkmark show briefly when selecting item #47034

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
18 changes: 9 additions & 9 deletions src/components/Search/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -49,17 +49,17 @@ function mapTransactionItemToSelectedEntry(item: TransactionListItemType): [stri
return [item.keyForList, {isSelected: true, canDelete: item.canDelete, canHold: item.canHold, canUnhold: item.canUnhold, action: item.action}];
}

function mapToTransactionItemWithSelectionInfo(item: TransactionListItemType, selectedTransactions: SelectedTransactions) {
return {...item, isSelected: selectedTransactions[item.keyForList]?.isSelected};
function mapToTransactionItemWithSelectionInfo(item: TransactionListItemType, selectedTransactions: SelectedTransactions, canSelectMultiple: boolean) {
return {...item, isSelected: selectedTransactions[item.keyForList]?.isSelected && canSelectMultiple};
}

function mapToItemWithSelectionInfo(item: TransactionListItemType | ReportListItemType, selectedTransactions: SelectedTransactions) {
function mapToItemWithSelectionInfo(item: TransactionListItemType | ReportListItemType, selectedTransactions: SelectedTransactions, canSelectMultiple: boolean) {
return SearchUtils.isTransactionListItemType(item)
? mapToTransactionItemWithSelectionInfo(item, selectedTransactions)
? mapToTransactionItemWithSelectionInfo(item, selectedTransactions, canSelectMultiple)
: {
...item,
transactions: item.transactions?.map((transaction) => mapToTransactionItemWithSelectionInfo(transaction, selectedTransactions)),
isSelected: item.transactions.every((transaction) => selectedTransactions[transaction.keyForList]?.isSelected),
transactions: item.transactions?.map((transaction) => mapToTransactionItemWithSelectionInfo(transaction, selectedTransactions, canSelectMultiple)),
isSelected: item.transactions.every((transaction) => selectedTransactions[transaction.keyForList]?.isSelected && canSelectMultiple),
};
}

Expand Down Expand Up @@ -92,6 +92,8 @@ function Search({queryJSON, policyIDs, isCustomQuery}: SearchProps) {

const [currentSearchResults] = useOnyx(`${ONYXKEYS.COLLECTION.SNAPSHOT}${hash}`);

const canSelectMultiple = isSmallScreenWidth ? !!selectionMode?.isEnabled : true;

useEffect(() => {
clearSelectedTransactions(hash);
setCurrentSearchHash(hash);
Expand Down Expand Up @@ -211,7 +213,7 @@ function Search({queryJSON, policyIDs, isCustomQuery}: SearchProps) {
const ListItem = SearchUtils.getListItem(type);
const data = SearchUtils.getSections(searchResults.data, searchResults.search, type);
const sortedData = SearchUtils.getSortedSections(type, data, sortBy, sortOrder);
const sortedSelectedData = sortedData.map((item) => mapToItemWithSelectionInfo(item, selectedTransactions));
const sortedSelectedData = sortedData.map((item) => mapToItemWithSelectionInfo(item, selectedTransactions, canSelectMultiple));

const shouldShowEmptyState = !isDataLoaded || data.length === 0;

Expand Down Expand Up @@ -305,8 +307,6 @@ function Search({queryJSON, policyIDs, isCustomQuery}: SearchProps) {
const shouldShowYear = SearchUtils.shouldShowYear(searchResults?.data);
const shouldShowSorting = sortableSearchStatuses.includes(status);

const canSelectMultiple = isSmallScreenWidth ? selectionMode?.isEnabled : true;

return (
<>
<SearchPageHeader
Expand Down
4 changes: 2 additions & 2 deletions src/pages/ReportParticipantsPage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -75,7 +75,7 @@ function ReportParticipantsPage({report}: WithReportOrNotFoundProps) {
}

const pendingChatMember = report?.pendingChatMembers?.findLast((member) => member.accountID === accountID.toString());
const isSelected = selectedMembers.includes(accountID);
const isSelected = selectedMembers.includes(accountID) && canSelectMultiple;
const isAdmin = role === CONST.REPORT.ROLE.ADMIN;
let roleBadge = null;
if (isAdmin) {
Expand Down Expand Up @@ -107,7 +107,7 @@ function ReportParticipantsPage({report}: WithReportOrNotFoundProps) {

result = result.sort((a, b) => (a.text ?? '').toLowerCase().localeCompare((b.text ?? '').toLowerCase()));
return result;
}, [formatPhoneNumber, personalDetails, report, selectedMembers, currentUserAccountID, translate, isGroupChat, isIOUReport]);
}, [formatPhoneNumber, personalDetails, report, selectedMembers, currentUserAccountID, translate, isGroupChat, isIOUReport, canSelectMultiple]);

const participants = useMemo(() => getUsers(), [getUsers]);

Expand Down
3 changes: 2 additions & 1 deletion src/pages/workspace/WorkspaceMembersPage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -331,7 +331,7 @@ function WorkspaceMembersPage({personalDetails, route, policy, currentUserPerson
}
}

const isSelected = selectedEmployees.includes(accountID);
const isSelected = selectedEmployees.includes(accountID) && canSelectMultiple;

const isOwner = policy?.owner === details.login;
const isAdmin = policyEmployee.role === CONST.POLICY.ROLE.ADMIN;
Expand Down Expand Up @@ -384,6 +384,7 @@ function WorkspaceMembersPage({personalDetails, route, policy, currentUserPerson
session?.accountID,
translate,
styles.cursorDefault,
canSelectMultiple,
]);

const data = useMemo(() => getUsers(), [getUsers]);
Expand Down
4 changes: 2 additions & 2 deletions src/pages/workspace/categories/WorkspaceCategoriesPage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -94,14 +94,14 @@ function WorkspaceCategoriesPage({route}: WorkspaceCategoriesPageProps) {
return {
text: value.name,
keyForList: value.name,
isSelected: !!selectedCategories[value.name],
isSelected: !!selectedCategories[value.name] && canSelectMultiple,
isDisabled,
pendingAction: value.pendingAction,
errors: value.errors ?? undefined,
rightElement: <ListItemRightCaretWithLabel labelText={value.enabled ? translate('workspace.common.enabled') : translate('workspace.common.disabled')} />,
};
}),
[policyCategories, selectedCategories, translate],
[policyCategories, selectedCategories, canSelectMultiple, translate],
);

const toggleCategory = useCallback((category: PolicyOption) => {
Expand Down
4 changes: 2 additions & 2 deletions src/pages/workspace/distanceRates/PolicyDistanceRatesPage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -109,7 +109,7 @@ function PolicyDistanceRatesPage({
`common.${customUnit?.attributes?.unit ?? CONST.CUSTOM_UNITS.DISTANCE_UNIT_MILES}`,
)}`,
keyForList: value.customUnitRateID ?? '',
isSelected: selectedDistanceRates.find((rate) => rate.customUnitRateID === value.customUnitRateID) !== undefined,
isSelected: selectedDistanceRates.find((rate) => rate.customUnitRateID === value.customUnitRateID) !== undefined && canSelectMultiple,
isDisabled: value.pendingAction === CONST.RED_BRICK_ROAD_PENDING_ACTION.DELETE,
pendingAction:
value.pendingAction ??
Expand All @@ -120,7 +120,7 @@ function PolicyDistanceRatesPage({
errors: value.errors ?? undefined,
rightElement: <ListItemRightCaretWithLabel labelText={value.enabled ? translate('workspace.common.enabled') : translate('workspace.common.disabled')} />,
})),
[customUnit?.attributes?.unit, customUnitRates, selectedDistanceRates, translate, policy?.pendingAction],
[customUnit?.attributes?.unit, customUnitRates, selectedDistanceRates, translate, policy?.pendingAction, canSelectMultiple],
);

const addRate = () => {
Expand Down
4 changes: 2 additions & 2 deletions src/pages/workspace/reportFields/ReportFieldsListValuesPage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -92,7 +92,7 @@ function ReportFieldsListValuesPage({
index,
text: value,
keyForList: value,
isSelected: selectedValues[value],
isSelected: selectedValues[value] && canSelectMultiple,
enabled: !disabledListValues[index] ?? true,
pendingAction: reportFieldID ? policy?.fieldList?.[ReportUtils.getReportFieldKey(reportFieldID)]?.pendingAction : null,
rightElement: (
Expand All @@ -104,7 +104,7 @@ function ReportFieldsListValuesPage({
}))
.sort((a, b) => localeCompare(a.value, b.value));
return [{data, isDisabled: false}];
}, [disabledListValues, listValues, policy?.fieldList, reportFieldID, selectedValues, translate]);
}, [disabledListValues, listValues, policy?.fieldList, reportFieldID, selectedValues, canSelectMultiple, translate]);

const shouldShowEmptyState = Object.values(listValues ?? {}).length <= 0;
const selectedValuesArray = Object.keys(selectedValues).filter((key) => selectedValues[key]);
Expand Down
4 changes: 2 additions & 2 deletions src/pages/workspace/reportFields/WorkspaceReportFieldsPage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -109,7 +109,7 @@ function WorkspaceReportFieldsPage({
keyForList: String(reportField.fieldID),
orderWeight: reportField.orderWeight,
pendingAction: reportField.pendingAction,
isSelected: selectedReportFields.find((selectedReportField) => selectedReportField.name === reportField.name) !== undefined,
isSelected: selectedReportFields.find((selectedReportField) => selectedReportField.name === reportField.name) !== undefined && canSelectMultiple,
isDisabled: reportField.pendingAction === CONST.RED_BRICK_ROAD_PENDING_ACTION.DELETE,
text: reportField.name,
rightElement: (
Expand All @@ -122,7 +122,7 @@ function WorkspaceReportFieldsPage({
isDisabled: false,
},
];
}, [filteredPolicyFieldList, policy, selectedReportFields, translate]);
}, [filteredPolicyFieldList, policy, selectedReportFields, canSelectMultiple, translate]);

const updateSelectedReportFields = (item: ReportFieldForList) => {
const fieldKey = ReportUtils.getReportFieldKey(item.fieldID);
Expand Down
6 changes: 3 additions & 3 deletions src/pages/workspace/tags/WorkspaceTagsPage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -92,7 +92,7 @@ function WorkspaceTagsPage({route}: WorkspaceTagsPageProps) {
orderWeight: policyTagList.orderWeight,
text: PolicyUtils.getCleanedTagName(policyTagList.name),
keyForList: String(policyTagList.orderWeight),
isSelected: selectedTags[policyTagList.name],
isSelected: selectedTags[policyTagList.name] && canSelectMultiple,
pendingAction: getPendingAction(policyTagList),
enabled: true,
required: policyTagList.required,
Expand All @@ -109,14 +109,14 @@ function WorkspaceTagsPage({route}: WorkspaceTagsPageProps) {
value: tag.name,
text: PolicyUtils.getCleanedTagName(tag.name),
keyForList: tag.name,
isSelected: selectedTags[tag.name],
isSelected: selectedTags[tag.name] && canSelectMultiple,
pendingAction: tag.pendingAction,
errors: tag.errors ?? undefined,
enabled: tag.enabled,
isDisabled: tag.pendingAction === CONST.RED_BRICK_ROAD_PENDING_ACTION.DELETE,
rightElement: <ListItemRightCaretWithLabel labelText={tag.enabled ? translate('workspace.common.enabled') : translate('workspace.common.disabled')} />,
}));
}, [isMultiLevelTags, policyTagLists, selectedTags, translate]);
}, [isMultiLevelTags, policyTagLists, selectedTags, canSelectMultiple, translate]);

const tagListKeyedByName = useMemo(
() =>
Expand Down
4 changes: 2 additions & 2 deletions src/pages/workspace/tags/WorkspaceViewTagsPage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -79,14 +79,14 @@ function WorkspaceViewTagsPage({route}: WorkspaceViewTagsProps) {
value: tag.name,
text: PolicyUtils.getCleanedTagName(tag.name),
keyForList: tag.name,
isSelected: selectedTags[tag.name],
isSelected: selectedTags[tag.name] && canSelectMultiple,
pendingAction: tag.pendingAction,
errors: tag.errors ?? undefined,
enabled: tag.enabled,
isDisabled: tag.pendingAction === CONST.RED_BRICK_ROAD_PENDING_ACTION.DELETE,
rightElement: <ListItemRightCaretWithLabel labelText={tag.enabled ? translate('workspace.common.enabled') : translate('workspace.common.disabled')} />,
})),
[currentPolicyTag, selectedTags, translate],
[currentPolicyTag, selectedTags, canSelectMultiple, translate],
);

const hasDependentTags = useMemo(() => PolicyUtils.hasDependentTags(policy, policyTags), [policy, policyTags]);
Expand Down
4 changes: 2 additions & 2 deletions src/pages/workspace/taxes/WorkspaceTaxesPage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -111,15 +111,15 @@ function WorkspaceTaxesPage({
text: value.name,
alternateText: textForDefault(key, value),
keyForList: key,
isSelected: !!selectedTaxesIDs.includes(key),
isSelected: !!selectedTaxesIDs.includes(key) && canSelectMultiple,
isDisabledCheckbox: !PolicyUtils.canEditTaxRate(policy, key),
isDisabled: value.pendingAction === CONST.RED_BRICK_ROAD_PENDING_ACTION.DELETE,
pendingAction: value.pendingAction ?? (Object.keys(value.pendingFields ?? {}).length > 0 ? CONST.RED_BRICK_ROAD_PENDING_ACTION.UPDATE : null),
errors: value.errors ?? ErrorUtils.getLatestErrorFieldForAnyField(value),
rightElement: <ListItemRightCaretWithLabel labelText={!value.isDisabled ? translate('workspace.common.enabled') : translate('workspace.common.disabled')} />,
}))
.sort((a, b) => (a.text ?? a.keyForList ?? '').localeCompare(b.text ?? b.keyForList ?? ''));
}, [policy, textForDefault, selectedTaxesIDs, translate]);
}, [policy, textForDefault, selectedTaxesIDs, canSelectMultiple, translate]);

const isLoading = !isOffline && taxesList === undefined;

Expand Down
Loading