@rabahzeineddine/material-ui
Version:
Material ui custom components
126 lines (125 loc) • 7.05 kB
JavaScript
;
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
}) : (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
o[k2] = m[k];
}));
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
Object.defineProperty(o, "default", { enumerable: true, value: v });
}) : function(o, v) {
o["default"] = v;
});
var __importStar = (this && this.__importStar) || function (mod) {
if (mod && mod.__esModule) return mod;
var result = {};
if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
__setModuleDefault(result, mod);
return result;
};
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.PersistentDrawer = void 0;
var react_1 = __importStar(require("react"));
var clsx_1 = __importDefault(require("clsx"));
var core_1 = require("@material-ui/core");
var Menu_1 = __importDefault(require("@material-ui/icons/Menu"));
var ChevronLeft_1 = __importDefault(require("@material-ui/icons/ChevronLeft"));
var ChevronRight_1 = __importDefault(require("@material-ui/icons/ChevronRight"));
var react_router_dom_1 = require("react-router-dom");
var style_1 = __importDefault(require("./style"));
var DrawerPage_1 = __importDefault(require("./DrawerPage"));
var useStyles = core_1.makeStyles(style_1.default);
function PersistentDrawer(props) {
var _a, _b, _c, _d;
var classes = useStyles();
var theme = core_1.useTheme();
var _e = react_1.default.useState(false), open = _e[0], setOpen = _e[1];
var params = react_router_dom_1.useParams();
var history = react_router_dom_1.useHistory();
var handlePageChange = function (val, label) {
history.push("/" + val);
setPage(val);
setTitle(label);
};
var handleDrawerOpen = function () {
setOpen(true);
};
var handleDrawerClose = function () {
setOpen(false);
};
var _f = react_1.default.useState(params.page), page = _f[0], setPage = _f[1];
var _g = react_1.default.useState(""), title = _g[0], setTitle = _g[1];
react_1.useEffect(function () {
var _a, _b;
var pages = react_1.default.Children.toArray(props.children);
if (pages.length > 0) {
var firstPage = pages[0];
if (react_1.default.isValidElement(firstPage)) {
setPage(firstPage.props.id);
setTitle(firstPage.props.label);
}
var selectedPage = pages.find(function (page) {
if (react_1.default.isValidElement(page)) {
return page.props.selected;
}
return null;
});
if (selectedPage && react_1.default.isValidElement(selectedPage)) {
setPage(((_a = selectedPage === null || selectedPage === void 0 ? void 0 : selectedPage.props) === null || _a === void 0 ? void 0 : _a.id) || "");
setTitle(((_b = selectedPage === null || selectedPage === void 0 ? void 0 : selectedPage.props) === null || _b === void 0 ? void 0 : _b.label) || "");
}
}
}, []);
if (!props.children ||
react_1.default.Children.toArray(props.children).length === 0 ||
react_1.default.Children.toArray(props.children).some(function (child) { return !react_1.default.isValidElement(child) || child.type !== DrawerPage_1.default; })) {
return react_1.default.createElement("div", null, "Invalid Pages Components");
}
return (react_1.default.createElement("div", { className: classes.root },
react_1.default.createElement(core_1.CssBaseline, null),
react_1.default.createElement(core_1.AppBar, { position: "fixed", className: clsx_1.default(classes.appBar, (_a = {},
_a[classes.appBarShift] = open,
_a)) },
react_1.default.createElement(core_1.Toolbar, null,
react_1.default.createElement(core_1.IconButton, { color: "inherit", "aria-label": "open drawer", onClick: handleDrawerOpen, edge: "start", className: clsx_1.default(classes.menuButton, (_b = {},
_b[classes.hide] = open,
_b)) },
react_1.default.createElement(Menu_1.default, null)),
react_1.default.createElement(core_1.Typography, { variant: "h6", noWrap: true }, props.title || title))),
react_1.default.createElement(core_1.Drawer, { variant: "permanent", className: clsx_1.default(classes.drawer, (_c = {},
_c[classes.drawerOpen] = open,
_c[classes.drawerClose] = !open,
_c)), classes: {
paper: clsx_1.default((_d = {},
_d[classes.drawerOpen] = open,
_d[classes.drawerClose] = !open,
_d)),
} },
react_1.default.createElement("div", { className: classes.toolbar },
react_1.default.createElement(core_1.IconButton, { onClick: handleDrawerClose }, theme.direction === "rtl" ? (react_1.default.createElement(ChevronRight_1.default, null)) : (react_1.default.createElement(ChevronLeft_1.default, null)))),
react_1.default.createElement(core_1.Divider, null),
react_1.default.createElement(core_1.List, null, react_1.default.Children.map(props.children, function (child, index) {
if (!react_1.default.isValidElement(child))
return child;
var _a = child.props, id = _a.id, Icon = _a.icon, label = _a.label;
return (react_1.default.createElement(core_1.ListItem, { key: index, button: true, onClick: function () { return handlePageChange(id, label); }, selected: page === id },
react_1.default.createElement(core_1.ListItemIcon, null, Icon ? react_1.default.createElement(Icon, null) : ""),
react_1.default.createElement(core_1.ListItemText, { primary: label })));
}))),
react_1.default.createElement("main", { className: classes.content },
react_1.default.createElement("div", { className: classes.toolbar }),
react_1.default.createElement(core_1.Grid, { container: true }, react_1.default.Children.map(props.children, function (child, index) {
if (react_1.default.isValidElement(child)) {
var _a = child.props, id = _a.id, Component = _a.component;
if (page === id)
return react_1.default.createElement(Component, { key: index });
}
return null;
})))));
}
exports.PersistentDrawer = PersistentDrawer;
exports.default = PersistentDrawer;