mui-extended
Version:
Extended UI Components built on Material UI
86 lines (85 loc) • 4.43 kB
JavaScript
import { __assign, __rest } from "tslib";
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
import { Box, Grid, Paper, SwipeableDrawer, Toolbar } from "@mui/material";
import { deepmerge } from "@mui/utils";
import { useEffect, createRef, forwardRef } from "react";
import { SplitPane } from "../splitPane/SplitPane";
import { withCloseOnNavigation } from "../utils";
import { useMobile } from "../utils/useMobile";
import { useHideMenu } from "./HideMenu";
var MenuBox = function (_a) {
var children = _a.children, props = __rest(_a, ["children"]);
return (_jsx(Paper, __assign({}, props, { sx: {
position: "absolute",
left: 0,
right: 0,
width: "100%",
height: "100%",
overflow: "auto",
backgroundColor: function (theme) {
return theme.palette.mode == "light"
? theme.palette.grey[100]
: theme.palette.grey[800];
}
}, square: true, variant: "outlined", children: children })));
};
var ContentBox = forwardRef(function ContentBox(_a, ref) {
var children = _a.children, props = __rest(_a, ["children"]);
return (_jsx(Paper, { square: true, elevation: 0, sx: { minHeight: "100%" }, children: _jsx(Box, __assign({ p: 1 }, props, { ref: ref, children: children })) }));
});
var WebLayout = function (_a) {
var menu = _a.menu, splitPaneProps = _a.splitPaneProps, children = _a.children;
var hideMenu = useHideMenu();
return (_jsxs(SplitPane, __assign({ minSize: 180, maxSize: 500, hidePrimary: hideMenu.hide || !menu }, splitPaneProps, { children: [_jsx(MenuBox, { children: menu }), _jsx(ContentBox, { children: children })] })));
};
var MuiExtSwipeableDrawer = withCloseOnNavigation(SwipeableDrawer);
var MobileLayout = function (_a) {
var _b;
var menu = _a.menu, swipeableDrawerProps = _a.swipeableDrawerProps, children = _a.children;
var drawerWidth = "80vw";
var hideMenu = useHideMenu();
useEffect(function () {
if (!hideMenu.hide) {
hideMenu.toggle();
}
// eslint-disable-next-line react-hooks/exhaustive-deps
}, []);
var sx = deepmerge((swipeableDrawerProps === null || swipeableDrawerProps === void 0 ? void 0 : swipeableDrawerProps.sx) || {}, (_b = {
width: drawerWidth,
flexShrink: 0
},
_b["& .MuiDrawer-paper"] = {
width: drawerWidth,
boxSizing: "border-box"
},
_b));
var contentRef = createRef();
useEffect(function () {
var _a;
(_a = contentRef === null || contentRef === void 0 ? void 0 : contentRef.current) === null || _a === void 0 ? void 0 : _a.scroll({ top: 0, left: 0 });
}, [contentRef, children]);
return (_jsxs(_Fragment, { children: [menu ? (_jsx(MuiExtSwipeableDrawer, __assign({ anchor: "left", open: !hideMenu.hide, onClose: hideMenu.toggle, onOpen: hideMenu.toggle, variant: "temporary" }, swipeableDrawerProps, { sx: sx, children: _jsxs(MenuBox, { children: [_jsx(Toolbar, {}), menu] }) }))) : (""), _jsx(ContentBox, { sx: {
overflow: "auto",
position: "absolute",
left: 0,
top: 0,
height: "100%",
width: "100%"
}, ref: contentRef, children: children })] }));
};
export var Layout = function (_a) {
var appBar = _a.appBar, menu = _a.menu, splitPaneProps = _a.splitPaneProps, swipeableDrawerProps = _a.swipeableDrawerProps, children = _a.children;
var _menu = menu || "";
var _appBar = appBar || "";
var isMobile = useMobile();
var BaseLayout = isMobile ? MobileLayout : WebLayout;
var baseLayoutProps = isMobile
? { swipeableDrawerProps: swipeableDrawerProps }
: { splitPaneProps: splitPaneProps };
return (_jsxs(Grid, { container: true, flexDirection: "column", height: "100vh", children: [_jsx(Grid, { item: true, sx: {
zIndex: function (theme) { return theme.zIndex.drawer + 1; },
"& .MuiAppBar-root": {
position: "static"
}
}, children: _appBar }), _jsx(Grid, { item: true, flexGrow: 1, sx: { position: "relative" }, children: _jsx(BaseLayout, __assign({ menu: _menu }, baseLayoutProps, { children: children })) })] }));
};