@popmenu/admin-ui 0.33.0 → 0.36.0

package/build/index.js

@@ -34,6 +34,7 @@ require('@material-ui/core/InputAdornment');
 require('@material-ui/core/LinearProgress');
 require('@material-ui/core/List');
 require('@material-ui/core/ListItem');
+require('@material-ui/core/ListItemAvatar');
 require('@material-ui/core/ListItemIcon');
 require('@material-ui/core/ListItemSecondaryAction');
 require('@material-ui/core/ListItemText');
@@ -281,7 +282,7 @@ var useIconStyles = core.makeStyles(function (_a) {
     };
 });
 
-var classnames = {exports: {}};
+var classnames$1 = {exports: {}};
 
 /*!
   Copyright (c) 2018 Jed Watson.
@@ -337,9 +338,9 @@ var classnames = {exports: {}};
 		window.classNames = classNames;
 	}
 }());
-}(classnames));
+}(classnames$1));
 
-var classNames = classnames.exports;
+var classNames$1 = classnames$1.exports;
 
 var iconStaticClassName = 'pop-icon';
 var Icon = function (props) {
@@ -350,7 +351,7 @@ var Icon = function (props) {
         isValid = false;
     }
     return isValid
-        ? React.createElement(icon, __assign({ className: classNames([classes.root, iconStaticClassName, className]) }, restProps))
+        ? React.createElement(icon, __assign({ className: classNames$1([classes.root, iconStaticClassName, className]) }, restProps))
         : null;
 };
 Icon.defaultProps = {
@@ -461,7 +462,7 @@ var Button$1 = React.forwardRef(function (props, ref) {
         startIcon: React__default['default'].createElement(CircularProgress__default['default'], { color: "inherit", size: typography.button.fontSize }),
         disabled: true,
     };
-    return (React__default['default'].createElement(MuiButton__default['default'], __assign({ ref: ref, classes: __assign(__assign({}, classes), classesOverride), className: classNames([className, 'pm-button']) }, muiProps, (loading && loadingIndicator))));
+    return (React__default['default'].createElement(MuiButton__default['default'], __assign({ ref: ref, classes: __assign(__assign({}, classes), classesOverride), className: classNames$1([className, 'pm-button']) }, muiProps, (loading && loadingIndicator))));
 });
 Button$1.displayName = 'Button';
 
@@ -642,7 +643,7 @@ Link.defaultProps = {
 };
 Link.displayName = 'Link';
 
-var useStyles$2 = core.makeStyles(function (_a) {
+var useStyles$4 = core.makeStyles(function (_a) {
     var spacing = _a.spacing;
     return ({
         root: {
@@ -656,7 +657,7 @@ var useStyles$2 = core.makeStyles(function (_a) {
 });
 var Paper = React.forwardRef(function (props, ref) {
     var legacyStyles = props.legacyStyles, restProps = __rest(props, ["legacyStyles"]);
-    var classes = useStyles$2(props);
+    var classes = useStyles$4(props);
     return React__default['default'].createElement(core.Paper, __assign({}, ref, { classes: __assign({}, (legacyStyles && classes)) }, restProps));
 });
 Paper.displayName = 'Paper';
@@ -1343,14 +1344,14 @@ var StepperActionsPreviousButton = function (props) {
     return displayPreviousButton ? (React__default['default'].createElement(Button, __assign$1({ variant: "tertiary", disabled: stepCursor === 1 }, augmentedPreviousButtonProps), previousButtonText || 'previous')) : null;
 };
 
-var useStyles$1 = styles.makeStyles({
+var useStyles$3 = styles.makeStyles({
     root: {
         fontStyle: 'italic',
     },
 });
 var StepperActionsStatusText = function (props) {
     var statusText = props.statusText;
-    var classes = useStyles$1(props);
+    var classes = useStyles$3(props);
     return statusText ? (React__default['default'].createElement(Typography, { classes: { root: classes.root }, variant: "body2" }, statusText)) : null;
 };
 
@@ -1636,7 +1637,7 @@ Toast.defaultProps = {
 };
 Toast.displayName = 'Toast';
 
-var useStyles = core.makeStyles(function (_a) {
+var useStyles$2 = core.makeStyles(function (_a) {
     var palette = _a.palette;
     return ({
         root: {
@@ -1645,7 +1646,7 @@ var useStyles = core.makeStyles(function (_a) {
     });
 });
 var DialogActions = function (props) {
-    var classes = useStyles(props);
+    var classes = useStyles$2(props);
     return React__default['default'].createElement(CommonDialogActions__default['default'], __assign$1({ classes: classes }, props));
 };
 
@@ -1681,10 +1682,14 @@ var PageSections = function (props) {
     return (React__default['default'].createElement(core.Box, __assign$1({ display: "flex", flexDirection: "column", gridGap: 16 }, restProps), children));
 };
 
+var PageSectionHead = function (props) {
+    var children = props.children, restProps = __rest$1(props, ["children"]);
+    return (React__default['default'].createElement(core.Box, __assign$1({ display: "flex", justifyContent: "space-between", mb: 1.5 }, restProps), children));
+};
+
 var PageSectionTitle = function (props) {
     var children = props.children, restProps = __rest$1(props, ["children"]);
-    return (React__default['default'].createElement(core.Box, __assign$1({}, restProps),
-        React__default['default'].createElement(Typography, { gutterBottom: true, variant: "h5" }, children)));
+    return (React__default['default'].createElement(Typography, __assign$1({ gutterBottom: true, variant: "h5" }, restProps), children));
 };
 
 var SettingsIndexCardGroup = function (props) {
@@ -1724,6 +1729,120 @@ var SettingsIndexCard = React.forwardRef(function (props, ref) {
 });
 SettingsIndexCard.displayName = 'SettingsIndexCard';
 
+var classnames = {exports: {}};
+
+/*!
+  Copyright (c) 2018 Jed Watson.
+  Licensed under the MIT License (MIT), see
+  http://jedwatson.github.io/classnames
+*/
+
+(function (module) {
+/* global define */
+
+(function () {
+
+	var hasOwn = {}.hasOwnProperty;
+
+	function classNames() {
+		var classes = [];
+
+		for (var i = 0; i < arguments.length; i++) {
+			var arg = arguments[i];
+			if (!arg) continue;
+
+			var argType = typeof arg;
+
+			if (argType === 'string' || argType === 'number') {
+				classes.push(arg);
+			} else if (Array.isArray(arg)) {
+				if (arg.length) {
+					var inner = classNames.apply(null, arg);
+					if (inner) {
+						classes.push(inner);
+					}
+				}
+			} else if (argType === 'object') {
+				if (arg.toString === Object.prototype.toString) {
+					for (var key in arg) {
+						if (hasOwn.call(arg, key) && arg[key]) {
+							classes.push(key);
+						}
+					}
+				} else {
+					classes.push(arg.toString());
+				}
+			}
+		}
+
+		return classes.join(' ');
+	}
+
+	if (module.exports) {
+		classNames.default = classNames;
+		module.exports = classNames;
+	} else {
+		window.classNames = classNames;
+	}
+}());
+}(classnames));
+
+var classNames = classnames.exports;
+
+var useStyles$1 = core.makeStyles(function (theme) { return ({
+    root: {
+        '&$uncontained > li > *:first-child': {
+            background: theme.palette.background.paper,
+            borderRadius: theme.spacing(1),
+        },
+        '& > li > *:first-child': {
+            borderBottom: "1px solid " + theme.palette.grey[300],
+        },
+        '& > li:last-child > *:first-child': {
+            borderBottom: 'none',
+        },
+    },
+    uncontained: {
+        display: 'flex',
+        flexDirection: 'column',
+        gap: 16,
+    },
+}); });
+
+var List = function (props) {
+    var _a;
+    var children = props.children, uncontained = props.uncontained, className = props.className, restProps = __rest$1(props, ["children", "uncontained", "className"]);
+    var classes = useStyles$1(props);
+    return (React__default['default'].createElement(core.List, __assign$1({ classes: classes, className: classNames((_a = {}, _a[classes.uncontained] = uncontained, _a), className) }, restProps), children));
+};
+
+var useStyles = core.makeStyles(function (theme) { return ({
+    chipRoot: {
+        marginRight: theme.spacing(4),
+        cursor: 'pointer',
+    },
+}); });
+/**
+ * TODO
+ * - clean props util
+ * - Avatar size and shape
+ */
+var StandardListItem = function (props) {
+    props.itemId; var title = props.title, meta = props.meta, body = props.body, image = props.image, status = props.status, secondaryAction = props.secondaryAction, onClick = props.onClick, restProps = __rest$1(props, ["itemId", "title", "meta", "body", "image", "status", "secondaryAction", "onClick"]);
+    var classes = useStyles(props);
+    return (React__default['default'].createElement(core.ListItem, __assign$1({ button: Boolean(onClick), onClick: function (e) { return onClick && onClick(e, props); } }, restProps),
+        image && (React__default['default'].createElement(core.ListItemAvatar, null,
+            React__default['default'].createElement(Avatar, { src: image.src, alt: image.alt }, image.Icon && React__default['default'].createElement(Icon, { icon: image.Icon })))),
+        React__default['default'].createElement(core.ListItemText, { disableTypography: true },
+            React__default['default'].createElement(Typography, { variant: "h6" }, title),
+            meta && (React__default['default'].createElement(Typography, { variant: "body2", color: "secondary.light" }, meta)),
+            body && (React__default['default'].createElement(Typography, { variant: "body2", color: "grey.700" }, body))),
+        status && (React__default['default'].createElement(core.Chip, { classes: { root: classes.chipRoot }, icon: status.Icon && React__default['default'].createElement(Icon, { icon: status.Icon }), label: status.text })),
+        secondaryAction && (React__default['default'].createElement(core.ListItemSecondaryAction, null,
+            React__default['default'].createElement(core.IconButton, { style: { color: 'black' }, "aria-label": secondaryAction['aria-label'], onClick: function (e) { return secondaryAction.onClick(e, props); } },
+                React__default['default'].createElement(Icon, { icon: secondaryAction.Icon }))))));
+};
+
 var useFullScreenStepperContext = function () { return React.useContext(FullScreenStepperContext); };
 
 /**
@@ -1771,6 +1890,15 @@ var useSelectableCard = function (config) {
     return { card: { onClick: onClick, selection: selection }, selection: selection, setSelection: setSelection };
 };
 
+var useDialog = function () {
+    var _a = React.useState(false), open = _a[0], setOpen = _a[1];
+    var toggle = function () { return setOpen(function (current) { return !current; }); };
+    var close = function () { return setOpen(false); };
+    var triggerProps = { onClick: toggle };
+    var dialogProps = { open: open, onClose: close };
+    return [triggerProps, dialogProps, { open: open, setOpen: setOpen, toggle: toggle, close: close }];
+};
+
 var fonts = ['"Poppins"', '"sans-serif"'];
 var adminThemeTypography = {
     htmlFontSize: 16,
@@ -2024,19 +2152,23 @@ exports.FeatureIntro = FeatureIntro;
 exports.FullScreenStepper = FullScreenStepper;
 exports.FullScreenStepperContent = FullScreenStepperContent;
 exports.FullScreenStepperContext = FullScreenStepperContext;
+exports.List = List;
 exports.Page = Page;
 exports.PageBody = PageBody;
 exports.PageSection = PageSection;
+exports.PageSectionHead = PageSectionHead;
 exports.PageSectionTitle = PageSectionTitle;
 exports.PageSections = PageSections;
 exports.SelectableCard = SelectableCard;
 exports.SettingsIndexCard = SettingsIndexCard;
 exports.SettingsIndexCardGroup = SettingsIndexCardGroup;
+exports.StandardListItem = StandardListItem;
 exports.Toast = Toast;
 exports.adminDark = adminDark;
 exports.adminDarkOptions = adminDarkOptions;
 exports.adminLight = adminLight;
 exports.adminLightOptions = adminLightOptions;
+exports.useDialog = useDialog;
 exports.useFullScreenStepperContext = useFullScreenStepperContext;
 exports.useSelectableCard = useSelectableCard;
 //# sourceMappingURL=index.js.map