react-openfin-mat-impl
Version:
Materialize UI implementation of react-openfin
54 lines • 3.73 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
const React = require("react");
const react_router_dom_1 = require("react-router-dom");
const react_openfin_1 = require("react-openfin");
const classnames_1 = require("classnames");
const styles_1 = require("@material-ui/styles");
const Drawer_1 = require("@material-ui/core/Drawer");
const Typography_1 = require("@material-ui/core/Typography");
const List_1 = require("@material-ui/core/List");
const ListItem_1 = require("@material-ui/core/ListItem");
const ListItemIcon_1 = require("@material-ui/core/ListItemIcon");
const ListItemText_1 = require("@material-ui/core/ListItemText");
const react_i18next_1 = require("react-i18next");
const jss_1 = require("../../assets/jss");
const useStyles = styles_1.makeStyles(jss_1.sidebarCompStyle);
function activeRoute(routeName, props) {
return props.location.pathname.indexOf(routeName) > -1;
}
const SidebarComp = (props) => {
const { open, routes, menuItems, color, image } = props;
const classes = useStyles({});
const { t, i18n } = react_i18next_1.useTranslation('menu', { useSuspense: false });
const links = (React.createElement(List_1.default, { className: classes.list },
routes ? routes.map((prop, key) => {
if (prop.redirect)
return null;
prop = prop;
if (!react_openfin_1.shown(prop))
return null;
const listItemClasses = classnames_1.default({
[" " + classes[color]]: activeRoute(prop.path, props)
});
const whiteFontClasses = classnames_1.default({
[" " + classes.whiteFont]: activeRoute(prop.path, props)
});
return (React.createElement(react_router_dom_1.NavLink, { to: prop.path, key: key, className: classes.item, activeClassName: "active" },
React.createElement(ListItem_1.default, { button: true, className: classes.itemLink + listItemClasses },
React.createElement(ListItemIcon_1.default, { className: classes.itemIcon + whiteFontClasses },
React.createElement(prop.icon, null)),
React.createElement(ListItemText_1.default, { className: classes.itemText + whiteFontClasses, primary: t(prop.sidebarName), disableTypography: true }))));
}) : null,
menuItems ? menuItems.map((menuItem, key) => (React.createElement("div", { className: classes.item, key: key },
React.createElement(ListItem_1.default, { button: true, className: classnames_1.default(classes.itemLink, classes.whiteFont) },
React.createElement(ListItemIcon_1.default, { className: classnames_1.default(classes.itemIcon, classes.whiteFont) }, menuItem.icon),
React.createElement(ListItemText_1.default, { className: classnames_1.default(classes.itemText, classes.whiteFont), primary: t(menuItem.label), onClick: menuItem.onClick, disableTypography: true }))))) : null));
return (React.createElement(React.Fragment, null,
React.createElement(Drawer_1.default, { anchor: "left", variant: "persistent", open: open, classes: { paper: classes.drawerPaper } },
React.createElement("div", { className: classes.sidebarWrapper }, links),
image !== undefined ? (React.createElement("div", { className: classes.background, style: { backgroundImage: "url(" + image + ")" } })) : null,
React.createElement(Typography_1.default, { className: classnames_1.default(classes.releaseTypo, classes.whiteFont), variant: "body2", gutterBottom: true, align: "right" }, process.env.REACT_APP_VERSION))));
};
exports.default = SidebarComp;
//# sourceMappingURL=Sidebar.js.map