@popmenu/dashboard 0.44.0 → 0.46.0

package/build/components/Leaderboard/LeaderboardProps.d.ts

@@ -1,4 +1,14 @@
 /// <reference types="react" />
+import { MenuProps } from '@material-ui/core';
+export interface LeaderboardFilterOptionProps {
+    label: string;
+    value: string;
+}
+export interface LeaderboardFilterProps extends MenuProps {
+    onChange: (event: any) => void;
+    options: LeaderboardFilterOptionProps[];
+    text: string;
+}
 export interface LeaderboardListItemProps {
     /** The icon to be displayed. Should be an icon component from popmenu/web-icons */
     Icon?: string | React.FC<React.SVGProps<SVGSVGElement>>;
@@ -23,8 +33,12 @@ export interface LeaderboardProps {
     data: LeaderboardListItemProps[];
     /** Component to display when no data is present */
     EmptyState: React.ReactNode;
+    /** Optional props for filter after the title/subtitle */
+    filterProps: LeaderboardFilterProps;
     /** Optional link at bottom to redirect to another page. Intended as a link to more data within the leaderboard. */
     moreLink?: {
+        /** Will display regardless of overflow */
+        show?: boolean;
         /** Path to route to. */
         to: string;
         /** Text the link will have. */
@@ -36,6 +50,7 @@ export interface LeaderboardProps {
     title: string;
 }
 export interface MoreLinkProps {
+    show?: boolean;
     text: string;
     to: string;
 }

package/build/components/Leaderboard/LeaderboardStyles.d.ts

@@ -1,4 +1,5 @@
-import { LeaderboardProps, LeaderboardListItemProps, MoreLinkProps } from './LeaderboardProps';
+import { LeaderboardProps, LeaderboardListItemProps, LeaderboardFilterProps, MoreLinkProps } from './LeaderboardProps';
 export declare const useLeaderboardStyles: (props: LeaderboardProps) => import("@material-ui/styles").ClassNameMap<string>;
 export declare const useLeaderboardListItemStyles: (props: LeaderboardListItemProps) => import("@material-ui/styles").ClassNameMap<string>;
+export declare const useLeaderboardFilterStyles: (props: LeaderboardFilterProps) => import("@material-ui/styles").ClassNameMap<string>;
 export declare const useMoreLinkStyles: (props: MoreLinkProps) => import("@material-ui/styles").ClassNameMap<string>;

package/build/index.es.js

@@ -1,7 +1,7 @@
 import * as React from 'react';
-import React__default, { createElement, forwardRef } from 'react';
+import React__default, { createElement, forwardRef, useState } from 'react';
+import { makeStyles, Typography as Typography$1, Link as Link$1, Paper as Paper$1, Box, Menu, MenuItem, Card as Card$1, CardActionArea, CardContent as CardContent$1 } from '@material-ui/core';
 import '@material-ui/lab/Alert';
-import { makeStyles, Typography as Typography$1, Link as Link$1, Paper as Paper$1, Box, Card as Card$1, CardActionArea, CardContent as CardContent$1 } from '@material-ui/core';
 import '@material-ui/core/AppBar';
 import MuiAvatar from '@material-ui/core/Avatar';
 import { makeStyles as makeStyles$1, useTheme } from '@material-ui/core/styles';
@@ -124,19 +124,19 @@ function __rest(s, e) {
     return t;
 }
 
-var _path$F;
+var _path$D;
 
-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$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 SvgUser(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends$1s({
+  return /*#__PURE__*/React.createElement("svg", _extends$1u({
     viewBox: "0 0 16 16",
     fill: "none",
     strokeLinecap: "round",
     strokeLinejoin: "round",
     width: "1em",
     height: "1em"
-  }, props), _path$F || (_path$F = /*#__PURE__*/React.createElement("path", {
+  }, props), _path$D || (_path$D = /*#__PURE__*/React.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"
   })));
@@ -779,6 +779,66 @@ makeStyles(function (theme) { return ({
     },
 }); });
 
+var _path$15;
+
+function _extends$2s() { _extends$2s = 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$2s.apply(this, arguments); }
+
+function SvgChevronDown(props) {
+  return /*#__PURE__*/React.createElement("svg", _extends$2s({
+    viewBox: "0 0 16 16",
+    fill: "none",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    width: "1em",
+    height: "1em"
+  }, props), _path$15 || (_path$15 = /*#__PURE__*/React.createElement("path", {
+    d: "M4 6l4 4 4-4",
+    stroke: "currentColor"
+  })));
+}
+
+var _g$T;
+
+function _extends$1w() { _extends$1w = 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$1w.apply(this, arguments); }
+
+function SvgTrend(props) {
+  return /*#__PURE__*/React.createElement("svg", _extends$1w({
+    viewBox: "0 0 16 16",
+    fill: "none",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    width: "1em",
+    height: "1em"
+  }, props), _g$T || (_g$T = /*#__PURE__*/React.createElement("g", {
+    stroke: "currentColor"
+  }, /*#__PURE__*/React.createElement("path", {
+    d: "M15.333 4L9 10.333 5.667 7l-5 5"
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M11.333 4h4v4"
+  }))));
+}
+
+var _g$S;
+
+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 SvgTrendDown(props) {
+  return /*#__PURE__*/React.createElement("svg", _extends$1v({
+    viewBox: "0 0 16 16",
+    fill: "none",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    width: "1em",
+    height: "1em"
+  }, props), _g$S || (_g$S = /*#__PURE__*/React.createElement("g", {
+    stroke: "currentColor"
+  }, /*#__PURE__*/React.createElement("path", {
+    d: "M15.333 12L9 5.667 5.667 9l-5-5"
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M11.333 12h4V8"
+  }))));
+}
+
 var useLeaderboardStyles = makeStyles(function (theme) { return ({
     root: {
         '& >:nth-child(even) > li': {
@@ -792,6 +852,17 @@ var useLeaderboardListItemStyles = makeStyles(function (theme) { return ({
         textDecoration: 'none',
     },
 }); });
+var useLeaderboardFilterStyles = makeStyles(function (theme) { return ({
+    filterWrapper: {
+        alignItems: 'center',
+        cursor: 'pointer',
+        display: 'flex',
+    },
+    text: {
+        fontSize: '12px',
+        paddingRight: theme.spacing(1),
+    },
+}); });
 var useMoreLinkStyles = makeStyles(function (theme) { return ({
     link: {
         color: theme.palette.info.main,
@@ -800,16 +871,17 @@ var useMoreLinkStyles = 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.createElement(Box, { display: "flex", flexDirection: "column" },
         React__default.createElement(Box, { alignItems: "left" },
-            React__default.createElement(Typography, { variant: "h4" }, title),
-            React__default.createElement(Typography, { variant: "body2" }, subtitle)),
+            React__default.createElement(Typography, { variant: "h5" }, title),
+            React__default.createElement(Typography, { className: classes.text }, subtitle),
+            filterProps && React__default.createElement(LeaderboardFilter, __assign$1({}, filterProps))),
         !isEmpty ? (React__default.createElement(List, { classes: classes }, slicedData.map(function (itemProps, index) { return (React__default.createElement(LeaderboardListItem, __assign$1({ key: "tile-list-item-" + index }, itemProps))); }))) : (EmptyState),
         moreLink && showMoreButton && React__default.createElement(MoreLink, { text: moreLink.text, to: moreLink.to })));
 };
@@ -824,6 +896,38 @@ var LeaderboardListItem = function (props) {
                 React__default.createElement(Avatar, __assign$1({}, image), ItemIcon && React__default.createElement(Icon, { icon: ItemIcon })))),
             React__default.createElement(ListItemText, { primary: title, secondary: subtitle }))));
 };
+var LeaderboardFilter = function (props) {
+    var onChange = props.onChange, options = props.options, text = props.text;
+    var classes = useLeaderboardFilterStyles(props);
+    var _a = useState(false), open = _a[0], setOpen = _a[1];
+    var _b = useState(null), menuAnchor = _b[0], setMenuAnchor = _b[1];
+    var _c = 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.createElement(React__default.Fragment, null,
+        React__default.createElement(Box, { className: classes.filterWrapper, pt: 1, onClick: handleOpen },
+            React__default.createElement(Typography, { className: classes.text }, selection || text),
+            React__default.createElement(Icon, { icon: SvgChevronDown })),
+        React__default.createElement(Menu, { anchorEl: menuAnchor, onClose: handleClose, open: open }, options.map(function (_a) {
+            var label = _a.label, value = _a.value;
+            return (React__default.createElement(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);
@@ -856,48 +960,6 @@ var LeaderboardTile = function (props) {
         React__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.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.createElement("g", {
-    stroke: "currentColor"
-  }, /*#__PURE__*/React.createElement("path", {
-    d: "M15.333 4L9 10.333 5.667 7l-5 5"
-  }), /*#__PURE__*/React.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.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.createElement("g", {
-    stroke: "currentColor"
-  }, /*#__PURE__*/React.createElement("path", {
-    d: "M15.333 12L9 5.667 5.667 9l-5-5"
-  }), /*#__PURE__*/React.createElement("path", {
-    d: "M11.333 12h4V8"
-  }))));
-}
-
 var useKpiMetricStyles = makeStyles(function (theme) { return ({
     iconContainer: {
         fontSize: theme.spacing(3),