django-bananas
Version:
React admin frontend for Django.
318 lines (316 loc) • 10.2 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
var _material = require("@mui/material");
var _styles = require("@mui/styles");
var _classnames = _interopRequireDefault(require("classnames"));
var _propTypes = _interopRequireDefault(require("prop-types"));
var _react = _interopRequireDefault(require("react"));
var _Link = _interopRequireDefault(require("./Link"));
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : String(i); }
function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
var styles = theme => ({
root: {
paddingTop: 0,
paddingBottom: 0,
transition: theme.transitions.create("min-height", {
easing: theme.transitions.easing.sharp,
duration: theme.transitions.duration.enteringScreen
})
},
// Classes for states
selected: {},
expanded: {},
collapsed: {},
wide: {},
dense: {},
leftAligned: {},
rightAligned: {
// Reverse order of avatar and label
flexDirection: "row-reverse",
textAlign: "right"
},
multiline: {
"& *": {
// Label with multiple lines (priamry and secondary)
lineHeight: 1.2
},
"& $icon": {
// Large Icon to span multiple lines
width: 40,
height: 40,
fontSize: 40
}
},
drawerVariant: {
"&$leftAligned": {
paddingLeft: 0
},
"&$rightAligned": {
paddingRight: 0
},
"&$wide": {
// Wide outer height
minHeight: 40 + theme.gap(1),
"& $avatarItem": {
// Expanded avatar wrapper width, with centered Avatar
width: 40 + theme.gap(3)
},
"&$collapsed $avatarItem": {
// Collapsed avatar wrapper width, with centered Avatar
width: 40 + theme.gap(2)
}
},
"&$dense": {
// Dense outer height
minHeight: 24 + theme.gap(1),
"& $avatarItem": {
// Avatar wrapper width, with centered Avatar
width: 40 + theme.gap(2)
}
},
"&$expanded $labelItem": {
opacity: 1.0 // Fade label when expanding
},
"&$collapsed $labelItem": {
opacity: 0.0 // Fade label when collapsing
},
"& $labelInset:first-child": {
// Outermost left edge padding when icons disabled
paddingLeft: theme.gap(3)
}
},
appbarVariant: {
"&$wide": _objectSpread({}, theme.mixins.toolbar),
"&$dense": {
minHeight: 36,
"&$leftAligned": {
// Outermost edge padding
paddingLeft: theme.gap(5),
paddingRight: theme.gap(5)
}
},
"&$leftAligned": {
// Outermost edge padding
paddingLeft: theme.gap(2),
paddingRight: theme.gap(2),
"& $avatarItem": {
// Padding between avatar and label
marginRight: theme.gap(1)
}
},
"&$rightAligned": {
// Outermost edge padding
paddingLeft: theme.gap(2),
paddingRight: theme.gap(3),
"& $avatarItem": {
// Padding between avatar and label
marginLeft: theme.gap(1)
}
},
"& $labelInset:first-child": {
// Outermost left edge padding when icons disabled
paddingLeft: 0
},
"& $label": {
color: theme.palette.primary.contrastText
},
"& $subtitle": {
color: theme.palette.primary.contrastText,
"& > *": {
opacity: 0.54
}
},
"& $icon": {
color: theme.palette.primary.contrastText
},
"& $avatar": {
color: theme.palette.primary.contrastText
}
},
avatarItem: {
// Avatar wrapper for flexing
flexShrink: 0,
flexGrow: 0,
display: "flex",
flexDirection: "row",
justifyContent: "center",
alignItems: "center",
color: "inherit",
transition: theme.transitions.create("width", {
easing: theme.transitions.easing.sharp,
duration: theme.transitions.duration.enteringScreen
})
},
labelItem: {
// Text label wrapper for flexing
flexShrink: 1,
flexGrow: 0,
padding: 0,
transition: theme.transitions.create("opacity", {
easing: theme.transitions.easing.sharp,
duration: theme.transitions.duration.enteringScreen
})
},
label: {
// Text label Typography element
color: theme.palette.text.primary,
transition: theme.transitions.create(["font-size"], {
easing: theme.transitions.easing.sharp,
duration: theme.transitions.duration.enteringScreen
})
},
subtitle: {
color: theme.palette.text.secondary
},
labelInset: {},
// Class for inset padding when icons disabled
avatar: {
// Avatar element, circle or transparent depending on child
backgroundColor: "transparent",
color: theme.palette.text.primary,
fontSize: 24,
margin: 0,
width: "auto",
height: "auto",
transition: theme.transitions.create(["width", "height", "font-size"], {
easing: theme.transitions.easing.sharp,
duration: theme.transitions.duration.enteringScreen
}),
overflow: "visible"
},
listItemAvatarRoot: {
display: "flex",
alignItems: "center",
justifyContent: "center"
},
char: {
// Circle Avatar variant with first letter of label
backgroundColor: theme.palette.action.selected,
fontSize: "inherit",
width: 36,
height: 36
},
charDense: {
// Dense version of circle avatar
fontSize: "0.9em",
width: 24,
height: 24
},
icon: {
// Icon element, child of Avatar
marginRight: 0,
fontSize: "inherit",
color: theme.palette.text.primary,
opacity: 0.666,
transition: theme.transitions.create(["width", "height", "font-size"], {
easing: theme.transitions.easing.sharp,
duration: theme.transitions.duration.enteringScreen
})
}
});
var MenuItem = _ref => {
var {
classes,
route,
title,
subtitle,
variant,
icon,
selected,
collapsed,
dense,
direction
} = _ref;
var ItemIcon = icon;
var showIcon = ItemIcon !== null;
var isIconDefined = showIcon && Boolean(ItemIcon);
var isDrawerVariant = variant === "drawer";
var isAppBarVariant = variant === "appbar";
var isLtR = direction === "ltr";
var isRtL = direction === "rtl";
var isMultiLine = Boolean(subtitle);
return /*#__PURE__*/_react.default.createElement(_Link.default, {
route: route
}, /*#__PURE__*/_react.default.createElement(_material.ListItem, {
className: (0, _classnames.default)(classes.root, {
[classes.drawerVariant]: isDrawerVariant,
[classes.appbarVariant]: isAppBarVariant,
[classes.leftAligned]: isLtR,
[classes.rightAligned]: isRtL,
[classes.expanded]: !collapsed,
[classes.collapsed]: collapsed,
[classes.dense]: dense,
[classes.wide]: !dense,
[classes.multiline]: isMultiLine,
[classes.selected]: selected
}),
dense: dense || isMultiLine,
selected: selected,
button: true
}, showIcon && /*#__PURE__*/_react.default.createElement("div", {
className: classes.avatarItem,
"data-testid": "MenuItemIcon"
}, /*#__PURE__*/_react.default.createElement(_material.ListItemAvatar, {
classes: {
root: classes.listItemAvatarRoot
}
}, /*#__PURE__*/_react.default.createElement(_material.Avatar, {
classes: {
root: (0, _classnames.default)(classes.avatar, {
[classes.char]: !isIconDefined,
[classes.charDense]: !isIconDefined && dense && !isMultiLine
})
}
}, isIconDefined ? /*#__PURE__*/_react.default.createElement(ItemIcon, {
className: classes.icon
}) : title.substring(0, 1)))), /*#__PURE__*/_react.default.createElement(_material.ListItemText, {
classes: {
root: classes.labelItem,
primary: classes.label,
secondary: classes.subtitle,
inset: classes.labelInset
},
inset: !showIcon,
primaryTypographyProps: {
noWrap: true
},
secondaryTypographyProps: {
noWrap: true
},
primary: title,
secondary: subtitle,
"data-testid": "MenuItemText"
})));
};
MenuItem.propTypes = {
classes: _propTypes.default.object.isRequired,
route: _propTypes.default.string.isRequired,
title: _propTypes.default.string.isRequired,
subtitle: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.node]),
variant: _propTypes.default.string,
icon: _propTypes.default.oneOfType([_propTypes.default.node, _propTypes.default.func, _propTypes.default.object]),
dense: _propTypes.default.bool,
selected: _propTypes.default.bool,
collapsed: _propTypes.default.bool,
direction: _propTypes.default.string
};
MenuItem.defaultProps = {
variant: "drawer",
// drawer|appbar
subtitle: undefined,
icon: undefined,
dense: false,
selected: false,
collapsed: false,
direction: "ltr" // ltr | rtl
};
var _default = exports.default = (0, _styles.withStyles)(styles, {
name: "BananasMenuItem"
})(MenuItem);