@popmenu/dashboard 0.44.0 → 0.45.0

package/build/index.js

@@ -3,8 +3,8 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
-require('@material-ui/lab/Alert');
 var core = require('@material-ui/core');
+require('@material-ui/lab/Alert');
 require('@material-ui/core/AppBar');
 var MuiAvatar = require('@material-ui/core/Avatar');
 var styles = require('@material-ui/core/styles');
@@ -169,19 +169,19 @@ function __rest(s, e) {
     return t;
 }
 
-var _path$F;
+var _path$E;
 
-function _extends$1s() { _extends$1s = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$1s.apply(this, arguments); }
+function _extends$1t() { _extends$1t = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$1t.apply(this, arguments); }
 
 function SvgUser(props) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$1s({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$1t({
     viewBox: "0 0 16 16",
     fill: "none",
     strokeLinecap: "round",
     strokeLinejoin: "round",
     width: "1em",
     height: "1em"
-  }, props), _path$F || (_path$F = /*#__PURE__*/React__namespace.createElement("path", {
+  }, props), _path$E || (_path$E = /*#__PURE__*/React__namespace.createElement("path", {
     d: "M13.333 14v-1.333A2.667 2.667 0 0010.667 10H5.333a2.667 2.667 0 00-2.666 2.667V14M8 7.333A2.667 2.667 0 108 2a2.667 2.667 0 000 5.333z",
     stroke: "currentColor"
   })));
@@ -824,6 +824,66 @@ core.makeStyles(function (theme) { return ({
     },
 }); });
 
+var _path$16;
+
+function _extends$2r() { _extends$2r = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$2r.apply(this, arguments); }
+
+function SvgChevronDown(props) {
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$2r({
+    viewBox: "0 0 16 16",
+    fill: "none",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    width: "1em",
+    height: "1em"
+  }, props), _path$16 || (_path$16 = /*#__PURE__*/React__namespace.createElement("path", {
+    d: "M4 6l4 4 4-4",
+    stroke: "currentColor"
+  })));
+}
+
+var _g$P;
+
+function _extends$1v() { _extends$1v = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$1v.apply(this, arguments); }
+
+function SvgTrend(props) {
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$1v({
+    viewBox: "0 0 16 16",
+    fill: "none",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    width: "1em",
+    height: "1em"
+  }, props), _g$P || (_g$P = /*#__PURE__*/React__namespace.createElement("g", {
+    stroke: "currentColor"
+  }, /*#__PURE__*/React__namespace.createElement("path", {
+    d: "M15.333 4L9 10.333 5.667 7l-5 5"
+  }), /*#__PURE__*/React__namespace.createElement("path", {
+    d: "M11.333 4h4v4"
+  }))));
+}
+
+var _g$O;
+
+function _extends$1u() { _extends$1u = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$1u.apply(this, arguments); }
+
+function SvgTrendDown(props) {
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$1u({
+    viewBox: "0 0 16 16",
+    fill: "none",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    width: "1em",
+    height: "1em"
+  }, props), _g$O || (_g$O = /*#__PURE__*/React__namespace.createElement("g", {
+    stroke: "currentColor"
+  }, /*#__PURE__*/React__namespace.createElement("path", {
+    d: "M15.333 12L9 5.667 5.667 9l-5-5"
+  }), /*#__PURE__*/React__namespace.createElement("path", {
+    d: "M11.333 12h4V8"
+  }))));
+}
+
 var useLeaderboardStyles = core.makeStyles(function (theme) { return ({
     root: {
         '& >:nth-child(even) > li': {
@@ -837,6 +897,17 @@ var useLeaderboardListItemStyles = core.makeStyles(function (theme) { return ({
         textDecoration: 'none',
     },
 }); });
+var useLeaderboardFilterStyles = core.makeStyles(function (theme) { return ({
+    filterWrapper: {
+        alignItems: 'center',
+        cursor: 'pointer',
+        display: 'flex',
+    },
+    text: {
+        fontSize: '12px',
+        paddingRight: theme.spacing(1),
+    },
+}); });
 var useMoreLinkStyles = core.makeStyles(function (theme) { return ({
     link: {
         color: theme.palette.info.main,
@@ -845,16 +916,17 @@ var useMoreLinkStyles = core.makeStyles(function (theme) { return ({
 }); });
 
 var Leaderboard = function (props) {
-    var data = props.data, EmptyState = props.EmptyState, title = props.title, moreLink = props.moreLink, subtitle = props.subtitle;
+    var data = props.data, EmptyState = props.EmptyState, filterProps = props.filterProps, title = props.title, moreLink = props.moreLink, subtitle = props.subtitle;
     var classes = useLeaderboardStyles(props);
     var isEmpty = data.length === 0;
     var slicedData = data.slice(0, 5);
     var isOverflow = data.length > 5;
-    var showMoreButton = !isEmpty && isOverflow;
+    var showMoreButton = !isEmpty && ((moreLink === null || moreLink === void 0 ? void 0 : moreLink.show) || isOverflow);
     return (React__default['default'].createElement(core.Box, { display: "flex", flexDirection: "column" },
         React__default['default'].createElement(core.Box, { alignItems: "left" },
-            React__default['default'].createElement(Typography, { variant: "h4" }, title),
-            React__default['default'].createElement(Typography, { variant: "body2" }, subtitle)),
+            React__default['default'].createElement(Typography, { variant: "h5" }, title),
+            React__default['default'].createElement(Typography, { className: classes.text }, subtitle),
+            filterProps && React__default['default'].createElement(LeaderboardFilter, __assign$1({}, filterProps))),
         !isEmpty ? (React__default['default'].createElement(List__default['default'], { classes: classes }, slicedData.map(function (itemProps, index) { return (React__default['default'].createElement(LeaderboardListItem, __assign$1({ key: "tile-list-item-" + index }, itemProps))); }))) : (EmptyState),
         moreLink && showMoreButton && React__default['default'].createElement(MoreLink, { text: moreLink.text, to: moreLink.to })));
 };
@@ -869,6 +941,38 @@ var LeaderboardListItem = function (props) {
                 React__default['default'].createElement(Avatar, __assign$1({}, image), ItemIcon && React__default['default'].createElement(Icon, { icon: ItemIcon })))),
             React__default['default'].createElement(ListItemText__default['default'], { primary: title, secondary: subtitle }))));
 };
+var LeaderboardFilter = function (props) {
+    var onChange = props.onChange, options = props.options, text = props.text;
+    var classes = useLeaderboardFilterStyles(props);
+    var _a = React.useState(false), open = _a[0], setOpen = _a[1];
+    var _b = React.useState(null), menuAnchor = _b[0], setMenuAnchor = _b[1];
+    var _c = React.useState(null), selection = _c[0], setSelection = _c[1];
+    var handleOpen = function (event) {
+        setMenuAnchor(event.currentTarget);
+        setOpen(true);
+    };
+    var handleClose = function () {
+        setMenuAnchor(null);
+        setOpen(false);
+    };
+    var handleSelection = function (label, value) {
+        if (typeof onChange === 'function') {
+            onChange(value);
+        }
+        setSelection(label);
+        handleClose();
+    };
+    if (options.length < 1)
+        return null;
+    return (React__default['default'].createElement(React__default['default'].Fragment, null,
+        React__default['default'].createElement(core.Box, { className: classes.filterWrapper, pt: 1, onClick: handleOpen },
+            React__default['default'].createElement(Typography, { className: classes.text }, selection || text),
+            React__default['default'].createElement(Icon, { icon: SvgChevronDown })),
+        React__default['default'].createElement(core.Menu, { anchorEl: menuAnchor, onClose: handleClose, open: open }, options.map(function (_a) {
+            var label = _a.label, value = _a.value;
+            return (React__default['default'].createElement(core.MenuItem, { key: value, onClick: function () { return handleSelection(label, value); } }, label));
+        }))));
+};
 var MoreLink = function (props) {
     var text = props.text, to = props.to;
     var classes = useMoreLinkStyles(props);
@@ -901,48 +1005,6 @@ var LeaderboardTile = function (props) {
         React__default['default'].createElement(Leaderboard, __assign$1({}, restProps))));
 };
 
-var _g$P;
-
-function _extends$1v() { _extends$1v = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$1v.apply(this, arguments); }
-
-function SvgTrend(props) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$1v({
-    viewBox: "0 0 16 16",
-    fill: "none",
-    strokeLinecap: "round",
-    strokeLinejoin: "round",
-    width: "1em",
-    height: "1em"
-  }, props), _g$P || (_g$P = /*#__PURE__*/React__namespace.createElement("g", {
-    stroke: "currentColor"
-  }, /*#__PURE__*/React__namespace.createElement("path", {
-    d: "M15.333 4L9 10.333 5.667 7l-5 5"
-  }), /*#__PURE__*/React__namespace.createElement("path", {
-    d: "M11.333 4h4v4"
-  }))));
-}
-
-var _g$O;
-
-function _extends$1u() { _extends$1u = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$1u.apply(this, arguments); }
-
-function SvgTrendDown(props) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$1u({
-    viewBox: "0 0 16 16",
-    fill: "none",
-    strokeLinecap: "round",
-    strokeLinejoin: "round",
-    width: "1em",
-    height: "1em"
-  }, props), _g$O || (_g$O = /*#__PURE__*/React__namespace.createElement("g", {
-    stroke: "currentColor"
-  }, /*#__PURE__*/React__namespace.createElement("path", {
-    d: "M15.333 12L9 5.667 5.667 9l-5-5"
-  }), /*#__PURE__*/React__namespace.createElement("path", {
-    d: "M11.333 12h4V8"
-  }))));
-}
-
 var useKpiMetricStyles = core.makeStyles(function (theme) { return ({
     iconContainer: {
         fontSize: theme.spacing(3),