bananas-commerce-admin
Version:
What's this, an admin for apes?
30 lines • 2.51 kB
JavaScript
import React, { useEffect, useState } from "react";
import Box from "@mui/material/Box";
import Checkbox from "@mui/material/Checkbox";
import Input from "@mui/material/Input";
import MenuItem from "@mui/material/MenuItem";
import Paper from "@mui/material/Paper";
import Select from "@mui/material/Select";
import Stack from "@mui/material/Stack";
import Typography from "@mui/material/Typography";
export const ReturnOrderItemProspectLine = ({ description, quantity: maxQuantity, sku, returnCodes, defaultReturnCode, onChange, }) => {
const [checked, setChecked] = useState(false);
const [quantity, setQuantity] = useState(1);
const [returnCode, setReturnCode] = useState(defaultReturnCode ?? Object.keys(returnCodes)[0]);
useEffect(() => onChange(checked, quantity, returnCode), [checked, quantity, returnCode]);
return (React.createElement(Paper, { elevation: 0 },
React.createElement(Stack, { alignItems: "center", direction: "row", padding: 1, spacing: 2 },
React.createElement(Checkbox, { sx: { flexShrink: 1 }, value: checked, onChange: (_, checked) => setChecked(checked) }),
React.createElement(Stack, { direction: "row", sx: { flexGrow: 1, alignItems: "center" } },
React.createElement(Typography, { fontSize: 14, sx: { width: "25%", verticalAlign: "middle" } }, description),
React.createElement(Typography, { fontSize: 14, sx: { width: "25%", verticalAlign: "middle" } }, sku),
checked && (React.createElement(React.Fragment, null,
React.createElement(Box, { sx: { width: "25%" } },
React.createElement(Select, { fullWidth: true, labelId: "return-type", size: "small", value: returnCode, onChange: (event) => setReturnCode(event.target.value) }, Object.entries(returnCodes).map(([returnCode, returnTitle]) => (React.createElement(MenuItem, { key: returnCode, value: returnCode }, returnTitle))))),
React.createElement(Box, { sx: { display: "flex", width: "25%", justifyContent: "end" } },
React.createElement(Input, { fullWidth: true, defaultValue: quantity, inputProps: {
max: maxQuantity,
min: 1,
}, sx: { maxWidth: "4rem", marginRight: 3 }, type: "number", onChange: (event) => setQuantity(Math.min(parseInt(event.target.value), maxQuantity)) }))))))));
};
//# sourceMappingURL=ReturnOrderItemProspectCard.js.map