bananas-commerce-admin
Version:
What's this, an admin for apes?
53 lines • 3.33 kB
JavaScript
import React, { useState } from "react";
import { Stack, TableBody, TableFooter, TablePagination, TableRow, Typography, } from "@mui/material";
import TablePaginationActions from "@mui/material/TablePagination/TablePaginationActions";
import { Table } from "../../../components/Table";
import { TableCell } from "../../../components/Table/TableCell";
import TableHead from "../../../components/Table/TableHead";
import TableHeading from "../../../components/Table/TableHeading";
import { useI18n } from "../../../contexts/I18nContext";
import SubscriptionsListItem from "./SubscriptionsListItem";
export const SubscriptionsList = ({ periods }) => {
const { t } = useI18n();
const [page, setPage] = useState(0);
const [rowsPerPage, setRowsPerPage] = useState(3);
// Avoid a layout jump when reaching the last page with empty rows.
const emptyRows = page > 0 ? Math.max(0, (1 + page) * rowsPerPage - (periods?.length ?? 0)) : 0;
const handleChangePage = (_, newPage) => {
setPage(newPage);
};
const handleChangeRowsPerPage = (event) => {
setRowsPerPage(Number.parseInt(event.target.value, 10));
setPage(0);
};
if (periods == null || periods?.length === 0)
return null;
return (React.createElement(React.Fragment, null,
React.createElement(Stack, { px: 3, py: 2 },
React.createElement(Typography, { fontWeight: 700, variant: "body1" }, t("Payments"))),
React.createElement(Table, { count: periods?.length ?? 0 },
React.createElement(TableHead, null,
React.createElement(TableHeading, { width: 150 }, t("Payment date")),
React.createElement(TableHeading, null, t("Due date")),
React.createElement(TableHeading, { align: "right" }, t("Amount")),
React.createElement(TableHeading, { align: "right" }, t("#")),
React.createElement(TableHeading, { align: "right" }, t("Status")),
React.createElement(TableHeading, null)),
React.createElement(TableBody, null,
periods &&
(rowsPerPage > 0
? periods.slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage)
: periods).map((row) => React.createElement(SubscriptionsListItem, { key: row.id, period: row })),
emptyRows > 0 && (React.createElement(TableRow, { style: { height: 53 * emptyRows } },
React.createElement(TableCell, { colSpan: 6 })))),
React.createElement(TableFooter, null,
React.createElement(TableRow, null,
React.createElement(TablePagination, { ActionsComponent: TablePaginationActions, colSpan: 6, count: periods?.length ?? 0, page: page, rowsPerPage: rowsPerPage, rowsPerPageOptions: [3, 6, 12, { label: "All", value: -1 }], slotProps: {
select: {
inputProps: { "aria-label": "rows per page" },
native: true,
},
}, sx: { "& .MuiTablePagination-toolbar": { pr: 1.5 } }, onPageChange: handleChangePage, onRowsPerPageChange: handleChangeRowsPerPage }))))));
};
export default SubscriptionsList;
//# sourceMappingURL=SubscriptionsList.js.map