Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 | import React from "react";
import { Grid, Stack } from "@mui/material";
import { MobileListWithStates } from "@common/MobileList";
import { TransactionTableRow } from "@components/ManageMoney/TransactionTable/transactions.types";
import FadeUpWrapper from "@components/animation/FadeUpWrapper";
import { TableCard_V2 } from "@components/ManageMoney/TransactionTable/Mobile/TableCard";
import {
LoadingSkeleton,
PendingSwitch,
} from "@components/ManageMoney/TransactionTable/TransactionTable.atoms";
import { useTargetRef } from "@hooks/common/useObserveHTMLNode";
import { TransactionTableSearch } from "@components/ManageMoney/TransactionTable/TransactionTableSearch";
import DownloadReportAction from "@components/ManageMoney/TransactionTable/DownloadReportAction";
import { parseRow } from "@components/ManageMoney/TransactionTable/transactions.helpers";
import { MobilePurchaseItem_V2 } from "@common/Campaigns/ReportPage/MobilePurchaseItem";
import { FilterButton } from "../MainActionsHeader";
import useCachedListTransactions from "@components/VirtualList/hooks/useCachedListTransactions";
import FilterAtomButton from "@common/Button/FilterAtomButton";
import { FilterPagesEnum } from "@shared/GiveFilter/constants";
export function MobileWrapperV2({
dataQueryKey,
isPurchase,
rowParser,
tableType,
isDisabled,
filterParams,
queryPath,
handleOpenFilterModal,
handleResetFilters,
filtersAmount,
sortKeyValue,
}: any) {
const {
allRows,
totalRows,
loadingRef,
pageRef,
handlePageChange,
isLoading,
setPageDispatcher,
} = useCachedListTransactions({
queryKey: dataQueryKey,
queryPath,
options: {
isPurchase,
filterParams,
sortKeyValue,
},
});
const targetRef = useTargetRef({
page: pageRef,
totalRows,
setPage: handlePageChange,
loadingRef,
});
const rows = React.useMemo(() => {
return allRows.map(rowParser ?? parseRow);
}, [allRows]);
const isFilter = filtersAmount > 0;
return (
<Grid paddingX={1}>
<Stack gap={2}>
<TransactionTableSearch queryKey={dataQueryKey} />
{!isPurchase ? (
<Stack
direction="row"
justifyContent="space-between"
alignItems="center"
>
{tableType === FilterPagesEnum.MANAGE_MONEY ? (
<FilterButton isDisabled={isDisabled} /> //TODO remove this component when the rebrand is done
) : (
<PendingSwitch setPage={setPageDispatcher} />
)}
<Stack
direction="row"
justifyContent="space-between"
alignItems="center"
gap="8px"
>
{tableType === FilterPagesEnum.PROVIDER_PROCESSING && (
<FilterAtomButton
disabled={isDisabled && !isFilter}
handleResetFilters={handleResetFilters}
handleOpenModal={handleOpenFilterModal}
filtersAmount={filtersAmount}
/>
)}
<DownloadReportAction
filterParams={filterParams}
disabled={isDisabled && !isFilter}
/>
</Stack>
</Stack>
) : null}
</Stack>
<MobileListWithStates
queryKey={dataQueryKey}
length={allRows?.length}
targetRef={targetRef}
isLoading={isLoading}
sx={{ marginTop: "10px" }}
LoadingSkeleton={LoadingSkeleton}
>
{rows.map((item: TransactionTableRow, idx: number) => (
<FadeUpWrapper delay={20 + idx * 20} key={item.id}>
{isPurchase ? (
<MobilePurchaseItem_V2 rowData={item} campaignType="fundraiser" />
) : (
<TableCard_V2 rowData={item} />
)}
</FadeUpWrapper>
))}
</MobileListWithStates>
</Grid>
);
}
|