@krowdy-ui/views
Version:
React components that implement Google's Material Design.
308 lines (292 loc) • 9.94 kB
JavaScript
import _extends from "@babel/runtime/helpers/esm/extends";
import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
import React from 'react';
import { Link as RouterLink, useHistory } from 'react-router-dom';
import PropTypes from 'prop-types';
import clsx from 'clsx';
import { Drawer, List, ListItem, Link, ListItemIcon, ListItemText, Collapse, withStyles } from '@krowdy-ui/core';
import { ExpandMore as ExpandMoreIcon, ExpandLess as ExpandLessIcon } from '@material-ui/icons';
import { isExternalURL } from '../utils';
var drawerWidth = 210;
var drawerWidthMin = 56;
var styles = function styles(theme) {
return {
// drawer: {
// width: drawerWidthMin
// },
drawerContent: {
width: drawerWidthMin
},
drawerIcon: {
color: 'inherit',
margin: theme.spacing(.5, 0),
// minWidth: 32
minWidth: 'auto'
},
drawerItemCollapse: {
display: 'block'
},
drawerLabel: {
// '& > span': {
// fontSize: '1rem'
// },
// marginLeft: theme.spacing(2.5),
marginLeft: theme.spacing(1.5),
transition: 'transform 300ms ease 0s, opacity 300ms ease 0s'
},
drawerPaper: {
// '&:hover': {
// '& $drawerLabel': {
// opacity : 1,
// transform: 'translate3d(0px, 0, 0)'
// },
// boxShadow: '0 10px 30px -12px rgba(0, 0, 0, 0.42), 0 4px 25px 0px rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(0, 0, 0, 0.2)',
// width : drawerWidth
// },
background: theme.palette.primary.main,
borderRight: 0,
overflow: 'hidden',
// position : 'absolute',
position: 'initial',
transition: theme.transitions.create('width', {
duration: theme.transitions.duration.standard,
easing: theme.transitions.easing.easeInOut
}),
whiteSpace: 'nowrap',
width: drawerWidth,
zIndex: 10
},
drawerPaperClose: {
'& $drawerLabel': {
opacity: 0,
transform: 'translate3d(-10px, 0, 0)'
},
// minWidth: drawerWidthMin,
width: drawerWidthMin
},
flexCenterVertical: {
alignItems: 'center',
display: 'flex'
},
labelBold: {
'& > span': {
fontWeight: 'bold'
}
},
listRoot: {
flex: 1,
overflowX: 'hidden' // justifyContent: 'space-between'
},
main: {
backgroundColor: theme.palette.grey[200],
display: 'flex',
flexGrow: 1,
// [theme.breakpoints.down('sm')]: {
// overflow: 'initial'
// },
// borderRadius : 4,
overflow: 'auto',
// flex : 1,
// justifyContent: 'center',
padding: theme.spacing(1) // padding : theme.spacing(1),
// position : 'relative'
},
menuDashboardItem: {
alignItems: 'center',
display: 'flex',
padding: theme.spacing(1, 2),
width: '100%'
},
menuDashboardListItem: {
color: theme.palette.common.white,
padding: 0
},
menuDashboardListItemActive: {
'&:hover': {
backgroundColor: theme.palette.common.white
},
backgroundColor: theme.palette.common.white,
color: theme.palette.primary.main
},
optionBottom: {
boxShadow: '0px -1px 5px rgba(0, 0, 0, 0.1)'
},
shadow: {
boxShadow: '0 10px 30px -12px rgba(0, 0, 0, 0.42), 0 4px 25px 0px rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(0, 0, 0, 0.2)',
// boxShadow: '0 10px 20px -12px rgba(0, 0, 0, 0.42), 0 4px 25px 0px rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(0, 0, 0, 0.2)',
position: 'relative'
},
toolbar: theme.mixins.toolbar
};
};
var _ref2 = /*#__PURE__*/React.createElement(ExpandLessIcon, null);
var _ref3 = /*#__PURE__*/React.createElement(ExpandMoreIcon, null);
function DrawerListItem(_ref) {
var menu = _ref.menu,
classes = _ref.classes;
var history = useHistory();
var location = history.location;
var options = menu.options,
title = menu.title,
icon = menu.icon,
url = menu.url,
target = menu.target,
_menu$expanded = menu.expanded,
expanded = _menu$expanded === void 0 ? false : _menu$expanded,
_menu$disabled = menu.disabled,
disabled = _menu$disabled === void 0 ? false : _menu$disabled,
onClick = menu.onClick;
var _React$useState = React.useState(expanded),
_React$useState2 = _slicedToArray(_React$useState, 2),
openCollapse = _React$useState2[0],
setOpenCollapse = _React$useState2[1];
var _handleToggleCollapse = function _handleToggleCollapse() {
setOpenCollapse(!openCollapse);
};
var _handleClickLink = function _handleClickLink(mUrl) {
return function (ev) {
if (location.pathname === mUrl || onClick) ev.preventDefault();
if (onClick) onClick();
};
};
if (options && options.length) return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(ListItem, {
button: true,
className: clsx(classes.menuDashboardListItem, classes.drawerItemCollapse),
disableGutters: true,
onClick: _handleToggleCollapse
}, /*#__PURE__*/React.createElement("div", {
// underline='none'
// color='inherit'
// component='div'
className: classes.menuDashboardItem
}, icon ? /*#__PURE__*/React.createElement(ListItemIcon, {
className: classes.drawerIcon
}, icon) : null, /*#__PURE__*/React.createElement("div", {
className: classes.flexCenterVertical
}, /*#__PURE__*/React.createElement(ListItemText, {
className: clsx(classes.drawerLabel, classes.labelBold),
primary: title,
primaryTypographyProps: {
variant: 'body2'
}
}), openCollapse ? _ref2 : _ref3))), /*#__PURE__*/React.createElement(Collapse, {
"in": openCollapse,
unmountOnExit: true
}, renderDrawerList(options.map(function (option) {
return _extends({
icon: icon
}, option);
}), classes)));
var linkProps = url ? isExternalURL(url) ? {
href: url
} : {
component: RouterLink,
to: url
} : {};
return /*#__PURE__*/React.createElement(ListItem, {
button: true,
className: clsx(classes.menuDashboardListItem, url && location.pathname.indexOf(url) === 0 && classes.menuDashboardListItemActive),
disabled: disabled,
disableGutters: true
}, /*#__PURE__*/React.createElement(Link, _extends({
className: classes.menuDashboardItem,
color: "inherit",
onClick: _handleClickLink(url),
target: target,
underline: "none"
}, linkProps), icon ? /*#__PURE__*/React.createElement(ListItemIcon, {
className: classes.drawerIcon
}, icon) : null, /*#__PURE__*/React.createElement(ListItemText, {
className: classes.drawerLabel,
primary: title,
primaryTypographyProps: {
variant: 'body2'
}
})));
}
var renderDrawerList = function renderDrawerList(menus, classes) {
return /*#__PURE__*/React.createElement(List, {
className: classes.root,
disablePadding: true
}, menus.map(function (menu, index) {
return /*#__PURE__*/React.createElement(DrawerListItem, {
classes: classes,
key: "listItem-".concat(index),
menu: menu
});
}));
};
function Main(props) {
var classes = props.classes,
_props$menus = props.menus,
menus = _props$menus === void 0 ? [] : _props$menus,
_props$component = props.component,
Component = _props$component === void 0 ? 'main' : _props$component,
_props$shadow = props.shadow,
shadow = _props$shadow === void 0 ? false : _props$shadow,
isOpenDrawer = props.isOpenDrawer,
children = props.children,
optionBottom = props.optionBottom;
var _handleClickOptionBottom = function _handleClickOptionBottom(ev) {
if (optionBottom.onClick) optionBottom.onClick(ev);
};
return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Drawer, {
classes: {
paper: clsx(classes.drawerPaper, shadow && classes.shadow, isOpenDrawer && classes.drawerPaperClose)
} // className={classes.drawer}
,
open: isOpenDrawer,
variant: "permanent"
}, renderDrawerList(menus, {
drawerIcon: classes.drawerIcon,
drawerItemCollapse: classes.drawerItemCollapse,
drawerLabel: classes.drawerLabel,
flexCenterVertical: classes.flexCenterVertical,
labelBold: classes.labelBold,
menuDashboardItem: classes.menuDashboardItem,
menuDashboardListItem: classes.menuDashboardListItem,
menuDashboardListItemActive: classes.menuDashboardListItemActive,
root: classes.listRoot
}), optionBottom ? /*#__PURE__*/React.createElement(ListItem, {
button: true,
className: clsx(classes.menuDashboardListItem, classes.optionBottom),
disableGutters: true,
onClick: _handleClickOptionBottom
}, /*#__PURE__*/React.createElement("div", {
className: classes.menuDashboardItem
}, optionBottom.icon ? /*#__PURE__*/React.createElement(ListItemIcon, {
className: classes.drawerIcon
}, optionBottom.icon) : null, /*#__PURE__*/React.createElement(ListItemText, {
className: classes.drawerLabel,
primary: optionBottom.title,
primaryTypographyProps: {
variant: 'body2'
}
}))) : null), /*#__PURE__*/React.createElement(Component, {
className: classes.main
}, children));
}
process.env.NODE_ENV !== "production" ? Main.propTypes = {
classes: PropTypes.object.isRequired,
isOpenDrawer: PropTypes.bool,
/**
* @ignore
*/
menus: PropTypes.arrayOf(PropTypes.shape({
expanded: PropTypes.bool,
icon: PropTypes.element,
options: PropTypes.array,
target: PropTypes.string,
title: PropTypes.string.isRequired,
url: PropTypes.string
})),
optionBottom: PropTypes.shape({
icon: PropTypes.element,
onClick: PropTypes.func,
title: PropTypes.string.isRequired
}),
shadow: PropTypes.bool
} : void 0;
export default withStyles(styles, {
name: 'KrowdyMain'
})(Main);