bananas-commerce-admin
Version:
What's this, an admin for apes?
60 lines • 3.48 kB
JavaScript
import React, { useEffect, useState } from "react";
import { TableBody, TableRow } from "@mui/material";
import Checkbox from "@mui/material/Checkbox";
import Input from "@mui/material/Input";
import Table from "../../../../components/Table";
import { TableCell } from "../../../../components/Table/TableCell";
import TableHead from "../../../../components/Table/TableHead";
import TableHeading from "../../../../components/Table/TableHeading";
import { useCardContext } from "../../../../contexts/CardContext";
import { useI18n } from "../../../../contexts/I18nContext";
export const OrderItemsTable = ({ items, isPending, onSelect, }) => {
const { t } = useI18n();
const [selected, setSelected] = useState([]);
const { isEditing } = useCardContext();
const toggleSelectAll = (_, checked) => {
setSelected(checked ? items : []);
};
const toggleItem = (item, checked) => {
const index = selected.map(({ code }) => code).indexOf(item.code);
if (checked && index === -1) {
setSelected([...selected, item]);
}
else {
const unselected = [...selected];
unselected.splice(index, 1);
setSelected(unselected);
}
};
const itemQuantityChange = (item) => {
const index = selected.map(({ code }) => code).indexOf(item.code);
const changed = [...selected];
changed[index] = item;
setSelected(changed);
};
useEffect(() => {
if (onSelect != null)
onSelect(selected);
}, [onSelect, selected]);
return (React.createElement(Table, { count: items.length },
React.createElement(TableHead, null,
isEditing && isPending && (React.createElement(TableHeading, { align: "left", padding: "checkbox" },
React.createElement(Checkbox, { checked: items.length !== 0 && selected.length === items.length, color: "secondary", disabled: items.length === 0, indeterminate: selected.length > 0 && selected.length < items.length, onChange: toggleSelectAll }))),
React.createElement(TableHeading, { align: "left" }, t("Item")),
React.createElement(TableHeading, { align: "left" }, t("SKU")),
React.createElement(TableHeading, { align: "right" }, t("Quantity"))),
React.createElement(TableBody, null, items.map((item) => {
const isSelected = selected.map(({ code }) => code).includes(item.code);
return (React.createElement(TableRow, { key: item.code },
isEditing && isPending ? (React.createElement(TableCell, { align: "left", padding: "checkbox" },
React.createElement(Checkbox, { checked: isSelected, color: "secondary", onChange: (_, checked) => toggleItem(item, checked) }))) : null,
React.createElement(TableCell, { align: "left" }, item.name),
React.createElement(TableCell, { align: "left" }, item.code),
React.createElement(TableCell, { align: "right" }, isEditing && isPending ? (React.createElement(Input, { color: "secondary", defaultValue: item.quantity, disabled: !isSelected, inputProps: { min: 0, max: item.quantity }, type: "number", onChange: (event) => itemQuantityChange({
...item,
quantity: Number.parseInt(event.target.value),
}) })) : (item.quantity))));
}))));
};
export default OrderItemsTable;
//# sourceMappingURL=OrderItemsTable.js.map