bananas-commerce-admin
Version:
What's this, an admin for apes?
36 lines • 2.35 kB
JavaScript
import React, { useCallback, useMemo } from "react";
import KeyboardArrowDownIcon from "@mui/icons-material/KeyboardArrowDown";
import KeyboardArrowUpIcon from "@mui/icons-material/KeyboardArrowUp";
import { FormControlLabel } from "@mui/material";
import MuiCardHeader from "@mui/material/CardHeader";
import IconButton from "@mui/material/IconButton";
import Stack from "@mui/material/Stack";
import Switch from "@mui/material/Switch";
import Typography from "@mui/material/Typography";
import { useCardContext } from "../../contexts/CardContext";
import { useI18n } from "../../contexts/I18nContext";
export const CardHeader = ({ title, children, ...props }) => {
const { alwaysEditable, isCompact, isEditing, isEditable, isDisabled, setIsEditing, isCollapsible, isOpen, setIsOpen, } = useCardContext();
const { t } = useI18n();
// TODO Implement dialog for cancel when changed values
// const openDialog = useDialog();
const handleEdit = useCallback(() => {
setIsEditing((isEditing) => !isEditing);
}, [setIsEditing]);
const handleCollapse = useCallback(() => {
setIsOpen((isOpen) => !isOpen);
}, [setIsOpen]);
const showToggle = useMemo(() => Boolean(isEditable && !alwaysEditable), [isEditable, isCollapsible]);
return (React.createElement(MuiCardHeader, { ...props, action: React.createElement(Stack, { direction: "row" },
showToggle && (React.createElement(FormControlLabel, { control: React.createElement(Switch, { checked: isEditing, disabled: isDisabled, onChange: handleEdit }), label: React.createElement(Typography, { color: "grey.600", variant: "body2" }, t("Edit")) })),
isCollapsible && (React.createElement(IconButton, { size: "small", onClick: handleCollapse }, isOpen ? React.createElement(KeyboardArrowUpIcon, null) : React.createElement(KeyboardArrowDownIcon, null)))), component: "header", sx: {
px: isCompact ? 2 : 3,
pt: 2,
pb: isCompact ? 1 : 2,
...props.sx,
}, title: React.createElement(Stack, { alignItems: isCompact ? "flex-start" : "center", direction: isCompact ? "column" : "row", gap: 1 },
React.createElement(Typography, { fontWeight: "500", variant: "body1" }, title),
children) }));
};
export default CardHeader;
//# sourceMappingURL=CardHeader.js.map