bananas-commerce-admin
Version:
What's this, an admin for apes?
57 lines • 3.03 kB
JavaScript
import React from "react";
import { useTheme } from "@mui/material/styles";
import ToggleButton from "@mui/material/ToggleButton";
import ToggleButtonGroup from "@mui/material/ToggleButtonGroup";
import useMediaQuery from "@mui/material/useMediaQuery";
import { ShipmentDestinationIcon } from "./ShipmentDestinationIcon";
export const ALL_SELECTED = ["HOME", "LOCKER", "SERVICE_POINT", "STORE"];
export const ShipmentDestinationButtons = ({ defaultSelected, onChange, }) => {
const theme = useTheme();
const orientation = useMediaQuery(theme.breakpoints.down("md")) ? "vertical" : "horizontal";
const [selectedValues, setSelectedValues] = React.useState(defaultSelected != undefined && !ALL_SELECTED.every((type) => defaultSelected.includes(type))
? defaultSelected
: [...ALL_SELECTED, "ALL"]);
const handleSelect = (_, selected) => {
const allAreSelected = ALL_SELECTED.every((type) => selected.includes(type));
const allWereSelected = selectedValues.includes("ALL");
const allIsSelected = selected.includes("ALL");
// If all shipment types are selected, enable the all button
if (allAreSelected && !allIsSelected) {
selected.push("ALL");
}
if (!allAreSelected && allIsSelected) {
// If all shipment types were selected and a button was clicked, disable that button and the all button, otherwise select all
if (allWereSelected) {
selected = selected.filter((type) => type !== "ALL");
}
else {
selected = [...ALL_SELECTED, "ALL"];
}
}
// If all shipment types were selected but the all button was deselected, deselect all
if (allWereSelected && !allIsSelected) {
selected = [];
}
setSelectedValues(selected);
onChange?.(selected.filter((type) => type !== "ALL"));
};
return (React.createElement(ToggleButtonGroup, { fullWidth: true, color: "secondary", orientation: orientation, size: "small", sx: {
"& .MuiToggleButton-root": {
gap: theme.spacing(1),
},
}, value: selectedValues, onChange: handleSelect },
React.createElement(ToggleButton, { value: "HOME" },
React.createElement(ShipmentDestinationIcon, { type: "HOME" }),
"Home delivery"),
React.createElement(ToggleButton, { value: "STORE" },
React.createElement(ShipmentDestinationIcon, { type: "STORE" }),
"Collect at store"),
React.createElement(ToggleButton, { value: "SERVICE_POINT" },
React.createElement(ShipmentDestinationIcon, { type: "SERVICE_POINT" }),
"Service point"),
React.createElement(ToggleButton, { value: "LOCKER" },
React.createElement(ShipmentDestinationIcon, { type: "LOCKER" }),
"Locker"),
React.createElement(ToggleButton, { value: "ALL" }, "All")));
};
//# sourceMappingURL=ShipmentDestinationButtons.js.map