42 lines
1.2 KiB
JavaScript
42 lines
1.2 KiB
JavaScript
import CloseOutlined from "@mui/icons-material/CloseOutlined";
|
|
import Drawer from "@mui/material/Drawer";
|
|
import { IconButton } from "@/shared/ui/IconButton.jsx";
|
|
|
|
export function SideDrawer({
|
|
actions,
|
|
as: Component = "section",
|
|
children,
|
|
className = "",
|
|
contentClassName = "",
|
|
onClose,
|
|
open,
|
|
title,
|
|
width = "default",
|
|
...props
|
|
}) {
|
|
const drawerClassName = [
|
|
"side-drawer",
|
|
width === "wide" ? "side-drawer--wide" : "",
|
|
className
|
|
].filter(Boolean).join(" ");
|
|
|
|
return (
|
|
<Drawer anchor="right" open={open} onClose={onClose}>
|
|
<Component className={drawerClassName} {...props}>
|
|
<div className="side-drawer__header">
|
|
{title ? <h2 className="side-drawer__title">{title}</h2> : <span />}
|
|
{onClose ? (
|
|
<IconButton label="关闭" onClick={onClose}>
|
|
<CloseOutlined fontSize="small" />
|
|
</IconButton>
|
|
) : null}
|
|
</div>
|
|
<div className={["side-drawer__body", contentClassName].filter(Boolean).join(" ")}>
|
|
{children}
|
|
</div>
|
|
{actions ? <div className="side-drawer__actions">{actions}</div> : null}
|
|
</Component>
|
|
</Drawer>
|
|
);
|
|
}
|