@wq/material-web
Version:
Web bindings for @wq/material
106 lines (105 loc) • 3.43 kB
JavaScript
import React, { useState, useEffect } from "react";
import { useComponents } from "@wq/react";
import { Drawer, useMediaQuery } from "@mui/material";
import PropTypes from "prop-types";
export default function SidePanel({
anchor: anchorSpec = "top-left",
children,
compactChildren,
onChange,
}) {
const mobile = useMediaQuery((theme) => theme.breakpoints.down("md")),
anchor = anchorSpec.endsWith("right") ? "right" : "left",
vAnchor = anchorSpec.startsWith("bottom") ? "bottom" : "top",
[open, setOpen] = useState(!mobile),
{ IconButton } = useComponents(),
drawerStyle = {},
iconStyle = {};
if (mobile && !open) {
drawerStyle.position = "absolute";
if (vAnchor === "bottom") {
drawerStyle.bottom = 0;
} else {
drawerStyle.top = 0;
}
if (anchor === "right") {
drawerStyle.right = 0;
} else {
drawerStyle.left = 0;
}
}
if (anchor === "right") {
iconStyle.transform = "rotate(180deg)";
}
useEffect(() => {
if (onChange) {
onChange(open);
}
}, [open, onChange]);
return /*#__PURE__*/ React.createElement(
Drawer,
{
variant: "permanent",
style: drawerStyle,
anchor: anchor,
PaperProps: {
style: {
width: open ? 280 : 50,
borderBottom:
mobile && !open && "1px solid rgba(0, 0, 0, 0.12)",
position: "relative",
zIndex: 300,
},
},
},
open
? /*#__PURE__*/ React.createElement(
"div",
{
style: {
display: "flex",
position: "sticky",
top: 0,
zIndex: 100,
},
},
anchor === "left" &&
/*#__PURE__*/ React.createElement("div", {
style: {
flex: 1,
},
}),
/*#__PURE__*/ React.createElement(
"div",
{
style: {
backgroundColor: "white",
},
},
/*#__PURE__*/ React.createElement(IconButton, {
icon: "panel-close",
style: iconStyle,
onClick: () => setOpen(false),
})
),
anchor === "right" &&
/*#__PURE__*/ React.createElement("div", {
style: {
flex: 1,
},
})
)
: /*#__PURE__*/ React.createElement(IconButton, {
icon: "panel-open",
style: iconStyle,
onClick: () => setOpen(true),
}),
open ? children : compactChildren
);
}
SidePanel.propTypes = {
children: PropTypes.node,
compactChildren: PropTypes.node,
onChange: PropTypes.func,
anchor: PropTypes.string,
};