️ This Gitlab will be shut down at 2021-12-31 23:59:59.
Students and staff can migrate to gitlab.utwente.nl.
SNT members can migrate to gitlab.snt.utwente.nl.
Contact bestuur@snt.utwente.nl for more information.

Migrate your projects today!
Export your project using the webinterface or use a script.

Commit 6c3f9144 authored by TJHeeringa's avatar TJHeeringa

Cleaned up Drawer Component

parent 99b5416a
......@@ -14,6 +14,15 @@ const useStyles = makeStyles(theme => ({
},
}));
/**
* A list with an unfold option. When unfolded the component passed is shown.
*
* @param Component
* @param listItemText
* @param passThroughProps
* @returns {JSX.Element}
* @constructor
*/
const CollapsableList = ({ component: Component, listItemText, ...passThroughProps }) => {
const classes = useStyles();
......
import List from "@material-ui/core/List";
import ListSubheader from "@material-ui/core/ListSubheader";
import { makeStyles, useTheme } from "@material-ui/core/styles";
import React from "react";
import Link from "./Link";
import DropDown from "./DropDown";
import PropTypes from "prop-types";
const useStyles = makeStyles(theme => ({
root: {
width: "100%",
maxWidth: 360,
backgroundColor: theme.palette.background.paper,
},
}));
/**
* The Drawer is the main element used in the side bar. It is a menu that consists
* of dropdowns and links.
*
* @param items
* @returns {JSX.Element}
* @constructor
*/
const Drawer = ({ items }) => {
const theme = useTheme();
const classes = useStyles(theme);
let depth = 0;
return (
<List
component={"nav"}
aria-labelledby={"nested-list-subheader"}
subheader={
<ListSubheader component={"div"} id={"nested-list-subheader"}>
</ListSubheader>
}
className={classes.root}
>
{ items && items.map((item, id)=>
(item.items && item.items.length > 0)
? <DropDown key={id} depth={depth} {...item} />
: <Link key={id} depth={depth} {...item} />
) }
</List>
);
};
Drawer.propTypes = {
items:PropTypes.array.isRequired
};
export default Drawer;
\ No newline at end of file
......@@ -3,76 +3,58 @@ import List from "@material-ui/core/List";
import ListItem from "@material-ui/core/ListItem";
import ListItemIcon from "@material-ui/core/ListItemIcon";
import ListItemText from "@material-ui/core/ListItemText";
import ListSubheader from "@material-ui/core/ListSubheader";
import { makeStyles, useTheme } from "@material-ui/core/styles";
import ExpandLess from "@material-ui/icons/ExpandLess";
import ExpandMore from "@material-ui/icons/ExpandMore";
import PropTypes from "prop-types";
import React from "react";
import ListItemLink from "./ListItemLink";
import Link from "./Link";
const useStyles = makeStyles(theme => ({
root: {
width: "100%",
maxWidth: 360,
backgroundColor: theme.palette.background.paper,
},
nested: {
paddingLeft: theme.spacing(4),
},
}));
export default function DrawerList(props) {
const classes = useStyles();
let depth = 0;
return (
<List
component={"nav"}
aria-labelledby={"nested-list-subheader"}
subheader={
<ListSubheader component={"div"} id={"nested-list-subheader"}>
</ListSubheader>
}
className={classes.root}
>
{ props.items && props.items.map((item, id)=>
(item.items && item.items.length > 0) ? <DrawerListItemDropdown key={"drawer_d"+depth+"_id"+id} depth={depth} {...item} /> : <DrawerListItemLink key={"drawer_d"+depth+"_id"+id} depth={depth} {...item} />
) }
</List>
);
}
var DrawerListItemDropdown = (props) => {
const classes = useStyles();
/**
*
* @param primary
* @param icon
* @param depth
* @param items
* @returns {JSX.Element}
* @constructor
*/
const Dropdown = ({primary, icon, depth, items}) => {
const theme = useTheme();
const classes = useStyles(theme);
const [open, setOpen] = React.useState(false);
const handleToggle = () => setOpen(!open);
return (
<List>
<ListItem button onClick={handleToggle} style={{paddingLeft: theme.spacing((2+props.depth))}}>
<ListItemIcon>{ props.icon }</ListItemIcon>
<ListItemText primary={props.primary} />
<ListItem button onClick={handleToggle} style={{paddingLeft: theme.spacing((2+depth))}}>
<ListItemIcon>{ icon }</ListItemIcon>
<ListItemText primary={primary} />
{ open ? <ExpandLess /> : <ExpandMore /> }
</ListItem>
<Collapse in={open} timeout={"auto"} unmountOnExit>
{ props.items.map((item, id)=>
(item.items && item.items.length > 0) ? <DrawerListItemDropdown key={"drawer_d"+props.depth+"_id"+id} depth={props.depth+1} {...item} /> : <DrawerListItemLink key={"drawer_d"+props.depth+"_id"+id} depth={props.depth+1} {...item} />
<Collapse in={open} timeout={"auto"}>
{ items.map((item, id)=>
(item.items && item.items.length > 0)
? <Dropdown key={id} depth={depth+1} {...item} />
: <Link key={id} depth={depth+1} {...item} />
) }
</Collapse>
</List>
);
};
var DrawerListItemLink = (props) => {
const classes = useStyles();
const theme = useTheme();
return (
<List component={"div"} disablePadding>
<ListItemLink icon={props.icon} primary={props.primary} to={props.to || "/"} style={{paddingLeft: theme.spacing((2+2*props.depth))}}/>
</List>
);
};
\ No newline at end of file
Dropdown.propTypes = {
depth: PropTypes.number.isRequired,
icon: PropTypes.object.isRequired,
primary: PropTypes.string.isRequired,
items:PropTypes.array
};
export default Dropdown;
\ No newline at end of file
import List from "@material-ui/core/List";
import { makeStyles, useTheme } from "@material-ui/core/styles";
import PropTypes from "prop-types";
import React from "react";
import ListItemLink from "../ListItemLink";
const useStyles = makeStyles(theme => ({
}));
/**
*
*
* @param icon
* @param primary
* @param to
* @param depth
* @returns {JSX.Element}
* @constructor
*/
const Link = ({ icon, primary, to, depth}) => {
const theme = useTheme();
const classes = useStyles(theme);
return (
<List component={"div"} disablePadding>
<ListItemLink
icon={icon}
primary={primary}
to={to || "/"}
style={{paddingLeft: theme.spacing((2+2*depth))}}
/>
</List>
);
};
Link.propTypes = {
depth: PropTypes.number.isRequired,
icon: PropTypes.object.isRequired,
primary: PropTypes.string.isRequired,
to: PropTypes.string.isRequired
};
export default Link;
\ No newline at end of file
......@@ -5,9 +5,21 @@ import PropTypes from "prop-types";
import React from "react";
import {Link as RouterLink} from "react-router-dom";
export default function ListItemLink(props) {
const { icon, primary, to } = props;
/**
* This is an element used to represent a link in a list. Link cannot be used
* directly `ListItem`. React requires a reference to be forwarded. This does
* not happen when directly used inside a component. The React.forwardRef()
* function used here makes sure that the passing of references works.
*
* @param icon
* @param primary
* @param to
* @param rest_props
* @returns {JSX.Element}
* @constructor
*/
const ListItemLink = ({ icon, primary, to, ...rest_props }) => {
const renderLink = React.useMemo(
() => React.forwardRef((itemProps, ref) => <RouterLink to={to} ref={ref} {...itemProps} />),
[to],
......@@ -15,13 +27,13 @@ export default function ListItemLink(props) {
return (
<li>
<ListItem button component={renderLink} {...props}>
<ListItem button component={renderLink} {...rest_props}>
{ icon ? <ListItemIcon>{ icon }</ListItemIcon> : null }
<ListItemText primary={primary} />
</ListItem>
</li>
);
}
};
ListItemLink.propTypes = {
icon: PropTypes.element,
......@@ -29,3 +41,4 @@ ListItemLink.propTypes = {
to: PropTypes.string.isRequired,
};
export default ListItemLink;
......@@ -17,16 +17,16 @@ import StorageIcon from "@material-ui/icons/Storage";
import SubjectIcon from "@material-ui/icons/Subject";
import SupervisedUserCircleIcon from "@material-ui/icons/SupervisedUserCircle";
import WcIcon from "@material-ui/icons/Wc";
import DrawerList from "App/Components/Lists/DrawerList";
import Drawer from "App/Components/Lists/Drawer/Drawer";
import React from "react";
import {useLocation} from "react-router-dom";
export default function AssociationBoardSideBar(props){
return AssociationBoardDrawerList(props);
return AssociationBoardDrawer(props);
}
const AssociationBoardDrawerList = (props) => {
const AssociationBoardDrawer = (props) => {
const location = useLocation();
let url = location.pathname;
url = url.substring(0, url.indexOf("boardmember") + 11);
......@@ -150,6 +150,6 @@ const AssociationBoardDrawerList = (props) => {
}
];
return (
<DrawerList items={data}/>
<Drawer items={data}/>
);
};
......@@ -7,16 +7,16 @@ import HomeWorkIcon from "@material-ui/icons/HomeWork";
import InfoIcon from "@material-ui/icons/Info";
import ShareIcon from "@material-ui/icons/Share";
import SupervisedUserCircleIcon from "@material-ui/icons/SupervisedUserCircle";
import DrawerList from "App/Components/Lists/DrawerList";
import Drawer from "App/Components/Lists/Drawer/Drawer";
import React from "react";
import {useLocation} from "react-router-dom";
export default function AssociationMemberSideBar(props){
return AssociationMemberDrawerList(props);
return AssociationMemberDrawer(props);
}
const AssociationMemberDrawerList = (props) => {
const AssociationMemberDrawer = (props) => {
const location = useLocation();
let url = location.pathname;
url = url.substring(0, url.indexOf("member") + 6);
......@@ -80,6 +80,6 @@ const AssociationMemberDrawerList = (props) => {
// },
];
return (
<DrawerList items={data}/>
<Drawer items={data}/>
);
};
export default function EmptySideBar(props){ return null; }
const EmptySideBar = (props) => null;
export default EmptySideBar;
......@@ -3,15 +3,15 @@ import EventIcon from "@material-ui/icons/Event";
import HelpIcon from "@material-ui/icons/Help";
import HomeIcon from "@material-ui/icons/Home";
import InfoIcon from "@material-ui/icons/Info";
import DrawerList from "App/Components/Lists/DrawerList";
import Drawer from "App/Components/Lists/Drawer/Drawer";
import React from "react";
export default function PublicSideBar(props){
return PublicDrawerList(props);
return PublicDrawer(props);
}
const PublicDrawerList = (props) => {
const PublicDrawer = (props) => {
let home_url = localStorage.getItem("authenticated") === "true" ? "/protected/v/home" : "/account/login";
const data = [
{
......@@ -31,6 +31,6 @@ const PublicDrawerList = (props) => {
},
];
return (
<DrawerList items={data}/>
<Drawer items={data}/>
);
};
import React from "react";
export default function SideBar(props) {
const SideBar = (props) => {
const {component, ...other} = props;
if (!component) {
return null;
......@@ -8,4 +8,6 @@ export default function SideBar(props) {
return (
React.createElement(component, other)
);
}
};
export default SideBar;
\ No newline at end of file
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment