@popmenu/dashboard - npm Package Compare versions

Comparing version 0.44.0 to 0.45.0

build/components/Leaderboard/LeaderboardProps.d.ts

 /// <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 {
@@ -26,4 +36,8 @@ /** The icon to be displayed. Should be an icon component from popmenu/web-icons */
     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. */
@@ -40,4 +54,5 @@ to: string;
 export interface MoreLinkProps {
+    show?: boolean;
     text: string;
     to: string;
 }

build/components/Leaderboard/LeaderboardStyles.d.ts

@@ -1,4 +0,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>;

build/index.es.js

 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';
@@ -127,8 +127,8 @@ import MuiAvatar from '@material-ui/core/Avatar';
 
-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.createElement("svg", _extends$1s({
+  return /*#__PURE__*/React.createElement("svg", _extends$1t({
     viewBox: "0 0 16 16",
@@ -140,3 +140,3 @@ fill: "none",
     height: "1em"
-  }, props), _path$F || (_path$F = /*#__PURE__*/React.createElement("path", {
+  }, props), _path$E || (_path$E = /*#__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",
@@ -784,2 +784,62 @@ stroke: "currentColor"
 
+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.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.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.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 useLeaderboardStyles = makeStyles(function (theme) { return ({
@@ -798,2 +858,13 @@ root: {
 }); });
+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 ({
@@ -807,3 +878,3 @@ link: {
 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);
@@ -813,7 +884,8 @@ var isEmpty = data.length === 0;
     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),
@@ -833,2 +905,34 @@ moreLink && showMoreButton && React__default.createElement(MoreLink, { text: moreLink.text, to: moreLink.to })));
 };
+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) {
@@ -866,44 +970,2 @@ var text = props.text, to = props.to;
 
-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 ({
@@ -910,0 +972,0 @@ iconContainer: {

build/index.js

@@ -6,4 +6,4 @@ 'use strict';
 var React = require('react');
+var core = require('@material-ui/core');
 require('@material-ui/lab/Alert');
-var core = require('@material-ui/core');
 require('@material-ui/core/AppBar');
@@ -173,8 +173,8 @@ var MuiAvatar = require('@material-ui/core/Avatar');
 
-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",
@@ -186,3 +186,3 @@ fill: "none",
     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",
@@ -830,2 +830,62 @@ stroke: "currentColor"
 
+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 ({
@@ -844,2 +904,13 @@ root: {
 }); });
+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 ({
@@ -853,3 +924,3 @@ link: {
 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);
@@ -859,7 +930,8 @@ var isEmpty = data.length === 0;
     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),
@@ -879,2 +951,34 @@ moreLink && showMoreButton && React__default['default'].createElement(MoreLink, { text: moreLink.text, to: moreLink.to })));
 };
+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) {
@@ -912,44 +1016,2 @@ var text = props.text, to = props.to;
 
-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 ({
@@ -956,0 +1018,0 @@ iconContainer: {

package.json

 {
   "name": "@popmenu/dashboard",
-  "version": "0.44.0",
+  "version": "0.45.0",
   "license": "MIT",
@@ -32,3 +32,3 @@ "author": "Popmenu Design System Team",
   "sideEffects": false,
-  "gitHead": "2efc50525d677d735cb295c8c11101d98d05fd4f"
+  "gitHead": "3b52e3d770bfbba5185a7bb2962655ced8dcb504"
 }

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

714340

increased by1.19%

Lines of code

2144

increased by6.77%

No dependency changes