bananas-commerce-admin
Version:
What's this, an admin for apes?
47 lines • 2.67 kB
JavaScript
import React, { useState } from "react";
import UnfoldMoreIcon from "@mui/icons-material/UnfoldMore";
import { Box, ButtonBase, Popover, Stack, TableCell, Typography, } from "@mui/material";
export const TableHeading = ({ children, typographyProps, popover, popoverLabel, ...props }) => {
const [anchorEl, setAnchorEl] = useState(null);
const headingText = (React.createElement(Typography, { ...typographyProps, sx: {
fontWeight: "600",
fontVariationSettings: { sm: '"wdth" 100', xs: '"wdth" 75' },
...typographyProps?.sx,
}, variant: "body2" }, children));
return (React.createElement(TableCell, { ...props }, popover != null ? (React.createElement(React.Fragment, null,
React.createElement(ButtonBase, { sx: {
position: "relative",
borderRadius: 1,
zIndex: 0,
"&::before": {
content: '""',
position: "absolute",
inset: "-2px -4px",
borderRadius: 1,
backgroundColor: "action.hover",
opacity: 0,
transition: (theme) => theme.transitions.create("opacity", {
duration: theme.transitions.duration.shortest,
}),
zIndex: -1,
pointerEvents: "none",
},
"&:hover::before, &:focus-visible::before": { opacity: 1 },
"&:hover .popover-label, &:focus-visible .popover-label": {
backgroundColor: "transparent",
},
}, onClick: (e) => setAnchorEl(e.currentTarget) },
React.createElement(Stack, { alignItems: "center", direction: "row", gap: 0.5 },
headingText,
React.createElement(UnfoldMoreIcon, { sx: { color: "text.secondary", width: 16, height: 16 } })),
popoverLabel != null ? (React.createElement(Typography, { className: "popover-label", color: "text.secondary", sx: {
ml: 0.25,
px: 0.5,
borderRadius: 1,
backgroundColor: "action.hover",
}, variant: "body2" }, popoverLabel)) : null),
React.createElement(Popover, { anchorEl: anchorEl, anchorOrigin: { horizontal: "center", vertical: "bottom" }, open: Boolean(anchorEl), transformOrigin: { horizontal: "center", vertical: "top" }, onClose: () => setAnchorEl(null) },
React.createElement(Box, { p: 2 }, popover)))) : (headingText)));
};
export default TableHeading;
//# sourceMappingURL=TableHeading.js.map