@krowdy-ui/views
Version:
React components that implement Google's Material Design.
329 lines (299 loc) • 10.9 kB
JavaScript
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports["default"] = void 0;
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
var _react = _interopRequireDefault(require("react"));
var _reactRouterDom = require("react-router-dom");
var _propTypes = _interopRequireDefault(require("prop-types"));
var _clsx = _interopRequireDefault(require("clsx"));
var _core = require("@krowdy-ui/core");
var _icons = require("@material-ui/icons");
var _utils = require("../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["default"].createElement(_icons.ExpandLess, null);
var _ref3 = /*#__PURE__*/_react["default"].createElement(_icons.ExpandMore, null);
function DrawerListItem(_ref) {
var menu = _ref.menu,
classes = _ref.classes;
var history = (0, _reactRouterDom.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["default"].useState(expanded),
_React$useState2 = (0, _slicedToArray2["default"])(_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["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_core.ListItem, {
button: true,
className: (0, _clsx["default"])(classes.menuDashboardListItem, classes.drawerItemCollapse),
disableGutters: true,
onClick: _handleToggleCollapse
}, /*#__PURE__*/_react["default"].createElement("div", {
// underline='none'
// color='inherit'
// component='div'
className: classes.menuDashboardItem
}, icon ? /*#__PURE__*/_react["default"].createElement(_core.ListItemIcon, {
className: classes.drawerIcon
}, icon) : null, /*#__PURE__*/_react["default"].createElement("div", {
className: classes.flexCenterVertical
}, /*#__PURE__*/_react["default"].createElement(_core.ListItemText, {
className: (0, _clsx["default"])(classes.drawerLabel, classes.labelBold),
primary: title,
primaryTypographyProps: {
variant: 'body2'
}
}), openCollapse ? _ref2 : _ref3))), /*#__PURE__*/_react["default"].createElement(_core.Collapse, {
"in": openCollapse,
unmountOnExit: true
}, renderDrawerList(options.map(function (option) {
return (0, _extends2["default"])({
icon: icon
}, option);
}), classes)));
var linkProps = url ? (0, _utils.isExternalURL)(url) ? {
href: url
} : {
component: _reactRouterDom.Link,
to: url
} : {};
return /*#__PURE__*/_react["default"].createElement(_core.ListItem, {
button: true,
className: (0, _clsx["default"])(classes.menuDashboardListItem, url && location.pathname.indexOf(url) === 0 && classes.menuDashboardListItemActive),
disabled: disabled,
disableGutters: true
}, /*#__PURE__*/_react["default"].createElement(_core.Link, (0, _extends2["default"])({
className: classes.menuDashboardItem,
color: "inherit",
onClick: _handleClickLink(url),
target: target,
underline: "none"
}, linkProps), icon ? /*#__PURE__*/_react["default"].createElement(_core.ListItemIcon, {
className: classes.drawerIcon
}, icon) : null, /*#__PURE__*/_react["default"].createElement(_core.ListItemText, {
className: classes.drawerLabel,
primary: title,
primaryTypographyProps: {
variant: 'body2'
}
})));
}
var renderDrawerList = function renderDrawerList(menus, classes) {
return /*#__PURE__*/_react["default"].createElement(_core.List, {
className: classes.root,
disablePadding: true
}, menus.map(function (menu, index) {
return /*#__PURE__*/_react["default"].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["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_core.Drawer, {
classes: {
paper: (0, _clsx["default"])(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["default"].createElement(_core.ListItem, {
button: true,
className: (0, _clsx["default"])(classes.menuDashboardListItem, classes.optionBottom),
disableGutters: true,
onClick: _handleClickOptionBottom
}, /*#__PURE__*/_react["default"].createElement("div", {
className: classes.menuDashboardItem
}, optionBottom.icon ? /*#__PURE__*/_react["default"].createElement(_core.ListItemIcon, {
className: classes.drawerIcon
}, optionBottom.icon) : null, /*#__PURE__*/_react["default"].createElement(_core.ListItemText, {
className: classes.drawerLabel,
primary: optionBottom.title,
primaryTypographyProps: {
variant: 'body2'
}
}))) : null), /*#__PURE__*/_react["default"].createElement(Component, {
className: classes.main
}, children));
}
process.env.NODE_ENV !== "production" ? Main.propTypes = {
classes: _propTypes["default"].object.isRequired,
isOpenDrawer: _propTypes["default"].bool,
/**
* @ignore
*/
menus: _propTypes["default"].arrayOf(_propTypes["default"].shape({
expanded: _propTypes["default"].bool,
icon: _propTypes["default"].element,
options: _propTypes["default"].array,
target: _propTypes["default"].string,
title: _propTypes["default"].string.isRequired,
url: _propTypes["default"].string
})),
optionBottom: _propTypes["default"].shape({
icon: _propTypes["default"].element,
onClick: _propTypes["default"].func,
title: _propTypes["default"].string.isRequired
}),
shadow: _propTypes["default"].bool
} : void 0;
var _default = (0, _core.withStyles)(styles, {
name: 'KrowdyMain'
})(Main);
exports["default"] = _default;