@popmenu/dashboard 0.126.0 → 0.126.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/build/{components → cjs/components}/ClickableTile/ClickableTile.d.ts +8 -8
- package/build/{components → cjs/components}/ClickableTile/ClickableTileProps.d.ts +8 -8
- package/build/{components → cjs/components}/ClickableTile/ClickableTileStyles.d.ts +1 -1
- package/build/{components → cjs/components}/DashboardContainer/DashboardContainer.d.ts +3 -3
- package/build/{components → cjs/components}/DashboardContainer/index.d.ts +1 -1
- package/build/{components → cjs/components}/KpiMetric/KpiMetric.d.ts +12 -12
- package/build/{components → cjs/components}/KpiMetric/KpiMetricProps.d.ts +15 -15
- package/build/{components → cjs/components}/KpiMetric/KpiMetricStyles.d.ts +2 -2
- package/build/{components → cjs/components}/KpiMetric/index.d.ts +2 -2
- package/build/{components → cjs/components}/KpiMetricTile/KpiMetricTile.d.ts +3 -3
- package/build/{components → cjs/components}/KpiMetricTile/KpiMetricTileProps.d.ts +6 -6
- package/build/{components → cjs/components}/KpiMetricTile/index.d.ts +2 -2
- package/build/{components → cjs/components}/Leaderboard/Leaderboard.d.ts +3 -3
- package/build/{components → cjs/components}/Leaderboard/LeaderboardProps.d.ts +56 -56
- package/build/{components → cjs/components}/Leaderboard/LeaderboardStyles.d.ts +5 -5
- package/build/{components → cjs/components}/Leaderboard/index.d.ts +2 -2
- package/build/{components → cjs/components}/LeaderboardTile/LeaderboardTile.d.ts +3 -3
- package/build/{components → cjs/components}/LeaderboardTile/LeaderboardTileProps.d.ts +5 -5
- package/build/{components → cjs/components}/LeaderboardTile/index.d.ts +2 -2
- package/build/{components → cjs/components}/Tile/Tile.d.ts +3 -3
- package/build/{components → cjs/components}/Tile/TileProps.d.ts +8 -8
- package/build/{components → cjs/components}/Tile/TileStyles.d.ts +1 -1
- package/build/{components → cjs/components}/Tile/index.d.ts +2 -2
- package/build/{components → cjs/components}/index.d.ts +5 -5
- package/build/{index.d.ts → cjs/index.d.ts} +1 -1
- package/build/cjs/index.js +224 -0
- package/build/cjs/index.js.map +1 -0
- package/build/esm/components/ClickableTile/ClickableTile.d.ts +8 -0
- package/build/esm/components/ClickableTile/ClickableTile.js +18 -0
- package/build/esm/components/ClickableTile/ClickableTile.js.map +1 -0
- package/build/esm/components/ClickableTile/ClickableTileProps.d.ts +8 -0
- package/build/esm/components/ClickableTile/ClickableTileStyles.d.ts +1 -0
- package/build/esm/components/ClickableTile/ClickableTileStyles.js +16 -0
- package/build/esm/components/ClickableTile/ClickableTileStyles.js.map +1 -0
- package/build/esm/components/DashboardContainer/DashboardContainer.d.ts +3 -0
- package/build/esm/components/DashboardContainer/index.d.ts +1 -0
- package/build/esm/components/KpiMetric/KpiMetric.d.ts +12 -0
- package/build/esm/components/KpiMetric/KpiMetric.js +28 -0
- package/build/esm/components/KpiMetric/KpiMetric.js.map +1 -0
- package/build/esm/components/KpiMetric/KpiMetricProps.d.ts +15 -0
- package/build/esm/components/KpiMetric/KpiMetricStyles.d.ts +2 -0
- package/build/esm/components/KpiMetric/KpiMetricStyles.js +30 -0
- package/build/esm/components/KpiMetric/KpiMetricStyles.js.map +1 -0
- package/build/esm/components/KpiMetric/index.d.ts +2 -0
- package/build/esm/components/KpiMetricTile/KpiMetricTile.d.ts +3 -0
- package/build/esm/components/KpiMetricTile/KpiMetricTile.js +15 -0
- package/build/esm/components/KpiMetricTile/KpiMetricTile.js.map +1 -0
- package/build/esm/components/KpiMetricTile/KpiMetricTileProps.d.ts +6 -0
- package/build/esm/components/KpiMetricTile/index.d.ts +2 -0
- package/build/esm/components/Leaderboard/Leaderboard.d.ts +3 -0
- package/build/esm/components/Leaderboard/Leaderboard.js +78 -0
- package/build/esm/components/Leaderboard/Leaderboard.js.map +1 -0
- package/build/esm/components/Leaderboard/LeaderboardProps.d.ts +56 -0
- package/build/esm/components/Leaderboard/LeaderboardStyles.d.ts +5 -0
- package/build/esm/components/Leaderboard/LeaderboardStyles.js +44 -0
- package/build/esm/components/Leaderboard/LeaderboardStyles.js.map +1 -0
- package/build/esm/components/Leaderboard/index.d.ts +2 -0
- package/build/esm/components/LeaderboardTile/LeaderboardTile.d.ts +3 -0
- package/build/esm/components/LeaderboardTile/LeaderboardTile.js +13 -0
- package/build/esm/components/LeaderboardTile/LeaderboardTile.js.map +1 -0
- package/build/esm/components/LeaderboardTile/LeaderboardTileProps.d.ts +5 -0
- package/build/esm/components/LeaderboardTile/index.d.ts +2 -0
- package/build/esm/components/Tile/Tile.d.ts +3 -0
- package/build/esm/components/Tile/Tile.js +14 -0
- package/build/esm/components/Tile/Tile.js.map +1 -0
- package/build/esm/components/Tile/TileProps.d.ts +8 -0
- package/build/esm/components/Tile/TileStyles.d.ts +1 -0
- package/build/esm/components/Tile/TileStyles.js +15 -0
- package/build/esm/components/Tile/TileStyles.js.map +1 -0
- package/build/esm/components/Tile/index.d.ts +2 -0
- package/build/esm/components/index.d.ts +5 -0
- package/build/esm/index.d.ts +1 -0
- package/build/esm/index.js +6 -0
- package/build/esm/index.js.map +1 -0
- package/package.json +8 -5
- package/build/index.es.js +0 -1138
- package/build/index.es.js.map +0 -1
- package/build/index.js +0 -1185
- package/build/index.js.map +0 -1
package/build/index.js
DELETED
|
@@ -1,1185 +0,0 @@
|
|
|
1
|
-
'use strict';
|
|
2
|
-
|
|
3
|
-
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
|
-
|
|
5
|
-
var React = require('react');
|
|
6
|
-
var core = require('@material-ui/core');
|
|
7
|
-
require('@material-ui/lab/Alert');
|
|
8
|
-
require('@material-ui/core/AppBar');
|
|
9
|
-
var MuiAvatar = require('@material-ui/core/Avatar');
|
|
10
|
-
var styles = require('@material-ui/core/styles');
|
|
11
|
-
require('@material-ui/core/Badge');
|
|
12
|
-
require('@material-ui/core/Button');
|
|
13
|
-
require('@material-ui/core/CircularProgress');
|
|
14
|
-
require('@material-ui/core/ButtonGroup');
|
|
15
|
-
var Card = require('@material-ui/core/Card');
|
|
16
|
-
require('@material-ui/core/CardActionArea');
|
|
17
|
-
require('@material-ui/core/CardActions');
|
|
18
|
-
var CardContent = require('@material-ui/core/CardContent');
|
|
19
|
-
require('@material-ui/core/CardHeader');
|
|
20
|
-
require('@material-ui/core/CardMedia');
|
|
21
|
-
var MuiCheckbox = require('@material-ui/core/Checkbox');
|
|
22
|
-
var FormControlLabel = require('@material-ui/core/FormControlLabel');
|
|
23
|
-
require('@material-ui/core/Chip');
|
|
24
|
-
require('@material-ui/core/Collapse');
|
|
25
|
-
require('@material-ui/core/Dialog');
|
|
26
|
-
require('@material-ui/core/DialogActions');
|
|
27
|
-
require('@material-ui/core/DialogContent');
|
|
28
|
-
require('@material-ui/core/DialogTitle');
|
|
29
|
-
require('@material-ui/core/Drawer');
|
|
30
|
-
require('@material-ui/core/FormControl');
|
|
31
|
-
require('@material-ui/core/Grid');
|
|
32
|
-
var MuiIconButton = require('@material-ui/core/IconButton');
|
|
33
|
-
require('@material-ui/core/InputAdornment');
|
|
34
|
-
require('@material-ui/core/LinearProgress');
|
|
35
|
-
var List = require('@material-ui/core/List');
|
|
36
|
-
var ListItem = require('@material-ui/core/ListItem');
|
|
37
|
-
var ListItemAvatar = require('@material-ui/core/ListItemAvatar');
|
|
38
|
-
require('@material-ui/core/ListItemIcon');
|
|
39
|
-
require('@material-ui/core/ListItemSecondaryAction');
|
|
40
|
-
var ListItemText = require('@material-ui/core/ListItemText');
|
|
41
|
-
require('@material-ui/core/Menu');
|
|
42
|
-
require('@material-ui/core/MenuItem');
|
|
43
|
-
require('@material-ui/core/MenuList');
|
|
44
|
-
var MuiRadio = require('@material-ui/core/Radio');
|
|
45
|
-
require('@material-ui/core/TextField');
|
|
46
|
-
var MuiSwitch = require('@material-ui/core/Switch');
|
|
47
|
-
require('@material-ui/core/Tab');
|
|
48
|
-
require('@material-ui/core/Tabs');
|
|
49
|
-
var MuiToggleButton = require('@material-ui/lab/ToggleButton');
|
|
50
|
-
var MuiToggleButtonGroup = require('@material-ui/lab/ToggleButtonGroup');
|
|
51
|
-
var MuiTooltip = require('@material-ui/core/Tooltip');
|
|
52
|
-
var reactRouterDom = require('react-router-dom');
|
|
53
|
-
|
|
54
|
-
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
|
|
55
|
-
|
|
56
|
-
function _interopNamespace(e) {
|
|
57
|
-
if (e && e.__esModule) return e;
|
|
58
|
-
var n = Object.create(null);
|
|
59
|
-
if (e) {
|
|
60
|
-
Object.keys(e).forEach(function (k) {
|
|
61
|
-
if (k !== 'default') {
|
|
62
|
-
var d = Object.getOwnPropertyDescriptor(e, k);
|
|
63
|
-
Object.defineProperty(n, k, d.get ? d : {
|
|
64
|
-
enumerable: true,
|
|
65
|
-
get: function () {
|
|
66
|
-
return e[k];
|
|
67
|
-
}
|
|
68
|
-
});
|
|
69
|
-
}
|
|
70
|
-
});
|
|
71
|
-
}
|
|
72
|
-
n['default'] = e;
|
|
73
|
-
return Object.freeze(n);
|
|
74
|
-
}
|
|
75
|
-
|
|
76
|
-
var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
|
|
77
|
-
var React__namespace = /*#__PURE__*/_interopNamespace(React);
|
|
78
|
-
var MuiAvatar__default = /*#__PURE__*/_interopDefaultLegacy(MuiAvatar);
|
|
79
|
-
var Card__default = /*#__PURE__*/_interopDefaultLegacy(Card);
|
|
80
|
-
var CardContent__default = /*#__PURE__*/_interopDefaultLegacy(CardContent);
|
|
81
|
-
var MuiCheckbox__default = /*#__PURE__*/_interopDefaultLegacy(MuiCheckbox);
|
|
82
|
-
var FormControlLabel__default = /*#__PURE__*/_interopDefaultLegacy(FormControlLabel);
|
|
83
|
-
var MuiIconButton__default = /*#__PURE__*/_interopDefaultLegacy(MuiIconButton);
|
|
84
|
-
var List__default = /*#__PURE__*/_interopDefaultLegacy(List);
|
|
85
|
-
var ListItem__default = /*#__PURE__*/_interopDefaultLegacy(ListItem);
|
|
86
|
-
var ListItemAvatar__default = /*#__PURE__*/_interopDefaultLegacy(ListItemAvatar);
|
|
87
|
-
var ListItemText__default = /*#__PURE__*/_interopDefaultLegacy(ListItemText);
|
|
88
|
-
var MuiRadio__default = /*#__PURE__*/_interopDefaultLegacy(MuiRadio);
|
|
89
|
-
var MuiSwitch__default = /*#__PURE__*/_interopDefaultLegacy(MuiSwitch);
|
|
90
|
-
var MuiToggleButton__default = /*#__PURE__*/_interopDefaultLegacy(MuiToggleButton);
|
|
91
|
-
var MuiToggleButtonGroup__default = /*#__PURE__*/_interopDefaultLegacy(MuiToggleButtonGroup);
|
|
92
|
-
var MuiTooltip__default = /*#__PURE__*/_interopDefaultLegacy(MuiTooltip);
|
|
93
|
-
|
|
94
|
-
/*! *****************************************************************************
|
|
95
|
-
Copyright (c) Microsoft Corporation.
|
|
96
|
-
|
|
97
|
-
Permission to use, copy, modify, and/or distribute this software for any
|
|
98
|
-
purpose with or without fee is hereby granted.
|
|
99
|
-
|
|
100
|
-
THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
|
|
101
|
-
REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
|
|
102
|
-
AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
|
|
103
|
-
INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
|
|
104
|
-
LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
|
|
105
|
-
OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
|
|
106
|
-
PERFORMANCE OF THIS SOFTWARE.
|
|
107
|
-
***************************************************************************** */
|
|
108
|
-
|
|
109
|
-
var __assign$1 = function() {
|
|
110
|
-
__assign$1 = Object.assign || function __assign(t) {
|
|
111
|
-
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
|
112
|
-
s = arguments[i];
|
|
113
|
-
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
|
|
114
|
-
}
|
|
115
|
-
return t;
|
|
116
|
-
};
|
|
117
|
-
return __assign$1.apply(this, arguments);
|
|
118
|
-
};
|
|
119
|
-
|
|
120
|
-
function __rest$1(s, e) {
|
|
121
|
-
var t = {};
|
|
122
|
-
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
|
|
123
|
-
t[p] = s[p];
|
|
124
|
-
if (s != null && typeof Object.getOwnPropertySymbols === "function")
|
|
125
|
-
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
|
|
126
|
-
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
|
|
127
|
-
t[p[i]] = s[p[i]];
|
|
128
|
-
}
|
|
129
|
-
return t;
|
|
130
|
-
}
|
|
131
|
-
|
|
132
|
-
/*! *****************************************************************************
|
|
133
|
-
Copyright (c) Microsoft Corporation.
|
|
134
|
-
|
|
135
|
-
Permission to use, copy, modify, and/or distribute this software for any
|
|
136
|
-
purpose with or without fee is hereby granted.
|
|
137
|
-
|
|
138
|
-
THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
|
|
139
|
-
REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
|
|
140
|
-
AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
|
|
141
|
-
INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
|
|
142
|
-
LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
|
|
143
|
-
OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
|
|
144
|
-
PERFORMANCE OF THIS SOFTWARE.
|
|
145
|
-
***************************************************************************** */
|
|
146
|
-
|
|
147
|
-
var __assign = function() {
|
|
148
|
-
__assign = Object.assign || function __assign(t) {
|
|
149
|
-
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
|
150
|
-
s = arguments[i];
|
|
151
|
-
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
|
|
152
|
-
}
|
|
153
|
-
return t;
|
|
154
|
-
};
|
|
155
|
-
return __assign.apply(this, arguments);
|
|
156
|
-
};
|
|
157
|
-
|
|
158
|
-
function __rest(s, e) {
|
|
159
|
-
var t = {};
|
|
160
|
-
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
|
|
161
|
-
t[p] = s[p];
|
|
162
|
-
if (s != null && typeof Object.getOwnPropertySymbols === "function")
|
|
163
|
-
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
|
|
164
|
-
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
|
|
165
|
-
t[p[i]] = s[p[i]];
|
|
166
|
-
}
|
|
167
|
-
return t;
|
|
168
|
-
}
|
|
169
|
-
|
|
170
|
-
var _path$1D;
|
|
171
|
-
|
|
172
|
-
function _extends$3H() { _extends$3H = 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$3H.apply(this, arguments); }
|
|
173
|
-
|
|
174
|
-
function SvgUser(props) {
|
|
175
|
-
return /*#__PURE__*/React__namespace.createElement("svg", _extends$3H({
|
|
176
|
-
viewBox: "0 0 16 16",
|
|
177
|
-
fill: "none",
|
|
178
|
-
strokeLinecap: "round",
|
|
179
|
-
strokeLinejoin: "round",
|
|
180
|
-
width: "1em",
|
|
181
|
-
height: "1em"
|
|
182
|
-
}, props), _path$1D || (_path$1D = /*#__PURE__*/React__namespace.createElement("path", {
|
|
183
|
-
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",
|
|
184
|
-
stroke: "currentColor"
|
|
185
|
-
})));
|
|
186
|
-
}
|
|
187
|
-
|
|
188
|
-
var useIconStyles = core.makeStyles(function (_a) {
|
|
189
|
-
var spacing = _a.spacing, palette = _a.palette;
|
|
190
|
-
var getFontSize = function (_a) {
|
|
191
|
-
var size = _a.size;
|
|
192
|
-
var sizes = {
|
|
193
|
-
inherit: 'inherit',
|
|
194
|
-
small: spacing(1.5),
|
|
195
|
-
medium: spacing(2),
|
|
196
|
-
large: spacing(2.5),
|
|
197
|
-
'extra-large': spacing(3),
|
|
198
|
-
};
|
|
199
|
-
return size ? sizes[size] : 'inherit';
|
|
200
|
-
};
|
|
201
|
-
var getColor = function (props) {
|
|
202
|
-
var semanticColors = ['primary', 'secondary', 'info', 'success', 'warning', 'error'];
|
|
203
|
-
var value = 'inherit';
|
|
204
|
-
if (props.color) {
|
|
205
|
-
if (semanticColors.includes(props.color.split('.')[0])) {
|
|
206
|
-
var _a = props.color.split('.'), color = _a[0], _b = _a[1], variant = _b === void 0 ? 'main' : _b;
|
|
207
|
-
// @ts-expect-error - todo.
|
|
208
|
-
value = palette[color][variant];
|
|
209
|
-
}
|
|
210
|
-
else if (props.color.search(/^(rgb|hsla|#)/) !== -1) {
|
|
211
|
-
value = props.color;
|
|
212
|
-
}
|
|
213
|
-
}
|
|
214
|
-
return value;
|
|
215
|
-
};
|
|
216
|
-
return {
|
|
217
|
-
root: {
|
|
218
|
-
color: getColor,
|
|
219
|
-
fontSize: getFontSize,
|
|
220
|
-
strokeWidth: '1.3px',
|
|
221
|
-
},
|
|
222
|
-
};
|
|
223
|
-
});
|
|
224
|
-
|
|
225
|
-
var classnames = {exports: {}};
|
|
226
|
-
|
|
227
|
-
/*!
|
|
228
|
-
Copyright (c) 2018 Jed Watson.
|
|
229
|
-
Licensed under the MIT License (MIT), see
|
|
230
|
-
http://jedwatson.github.io/classnames
|
|
231
|
-
*/
|
|
232
|
-
|
|
233
|
-
(function (module) {
|
|
234
|
-
/* global define */
|
|
235
|
-
|
|
236
|
-
(function () {
|
|
237
|
-
|
|
238
|
-
var hasOwn = {}.hasOwnProperty;
|
|
239
|
-
|
|
240
|
-
function classNames() {
|
|
241
|
-
var classes = [];
|
|
242
|
-
|
|
243
|
-
for (var i = 0; i < arguments.length; i++) {
|
|
244
|
-
var arg = arguments[i];
|
|
245
|
-
if (!arg) continue;
|
|
246
|
-
|
|
247
|
-
var argType = typeof arg;
|
|
248
|
-
|
|
249
|
-
if (argType === 'string' || argType === 'number') {
|
|
250
|
-
classes.push(arg);
|
|
251
|
-
} else if (Array.isArray(arg)) {
|
|
252
|
-
if (arg.length) {
|
|
253
|
-
var inner = classNames.apply(null, arg);
|
|
254
|
-
if (inner) {
|
|
255
|
-
classes.push(inner);
|
|
256
|
-
}
|
|
257
|
-
}
|
|
258
|
-
} else if (argType === 'object') {
|
|
259
|
-
if (arg.toString === Object.prototype.toString) {
|
|
260
|
-
for (var key in arg) {
|
|
261
|
-
if (hasOwn.call(arg, key) && arg[key]) {
|
|
262
|
-
classes.push(key);
|
|
263
|
-
}
|
|
264
|
-
}
|
|
265
|
-
} else {
|
|
266
|
-
classes.push(arg.toString());
|
|
267
|
-
}
|
|
268
|
-
}
|
|
269
|
-
}
|
|
270
|
-
|
|
271
|
-
return classes.join(' ');
|
|
272
|
-
}
|
|
273
|
-
|
|
274
|
-
if (module.exports) {
|
|
275
|
-
classNames.default = classNames;
|
|
276
|
-
module.exports = classNames;
|
|
277
|
-
} else {
|
|
278
|
-
window.classNames = classNames;
|
|
279
|
-
}
|
|
280
|
-
}());
|
|
281
|
-
}(classnames));
|
|
282
|
-
|
|
283
|
-
var classNames = classnames.exports;
|
|
284
|
-
|
|
285
|
-
var iconStaticClassName = 'pop-icon';
|
|
286
|
-
var Icon = function (props) {
|
|
287
|
-
var icon = props.icon, className = props.className, restProps = __rest(props, ["icon", "className"]);
|
|
288
|
-
var hasAccessibleAttr = Boolean(restProps['aria-describedby'] || restProps['aria-label']);
|
|
289
|
-
if (!hasAccessibleAttr && restProps['aria-hidden'] === undefined) {
|
|
290
|
-
restProps['aria-hidden'] = true;
|
|
291
|
-
}
|
|
292
|
-
var classes = useIconStyles(props);
|
|
293
|
-
var isValid = true;
|
|
294
|
-
if (!icon || (typeof icon === 'function' && icon({}) === undefined)) {
|
|
295
|
-
isValid = false;
|
|
296
|
-
}
|
|
297
|
-
return isValid
|
|
298
|
-
? React.createElement(icon, __assign({ className: classNames([classes.root, iconStaticClassName, className]) }, restProps))
|
|
299
|
-
: null;
|
|
300
|
-
};
|
|
301
|
-
Icon.defaultProps = {
|
|
302
|
-
size: 'inherit',
|
|
303
|
-
color: 'inherit',
|
|
304
|
-
};
|
|
305
|
-
Icon.displayName = 'Icon';
|
|
306
|
-
|
|
307
|
-
var LoadingStatus;
|
|
308
|
-
(function (LoadingStatus) {
|
|
309
|
-
LoadingStatus["ERROR"] = "ERROR";
|
|
310
|
-
LoadingStatus["LOADED"] = "LOADED";
|
|
311
|
-
LoadingStatus["PENDING"] = "PENDING";
|
|
312
|
-
})(LoadingStatus || (LoadingStatus = {}));
|
|
313
|
-
var useImgProps = function (avatarProps) {
|
|
314
|
-
var _a = React__default['default'].useState(LoadingStatus.PENDING), loaded = _a[0], setLoaded = _a[1];
|
|
315
|
-
var imgProps = __assign(__assign({}, avatarProps.imgProps), { onLoad: function (event) {
|
|
316
|
-
var _a, _b;
|
|
317
|
-
setLoaded(LoadingStatus.LOADED);
|
|
318
|
-
(_b = (_a = avatarProps.imgProps) === null || _a === void 0 ? void 0 : _a.onLoad) === null || _b === void 0 ? void 0 : _b.call(_a, event);
|
|
319
|
-
} });
|
|
320
|
-
return { imgProps: imgProps, loaded: loaded };
|
|
321
|
-
};
|
|
322
|
-
|
|
323
|
-
var getAvatarDimensions = function (theme, props) {
|
|
324
|
-
var factors = {
|
|
325
|
-
'extra-small': 3,
|
|
326
|
-
small: 4,
|
|
327
|
-
medium: 5,
|
|
328
|
-
large: 6,
|
|
329
|
-
'extra-large': 12.5,
|
|
330
|
-
};
|
|
331
|
-
var sizeFactor = factors[props.size || 'medium'];
|
|
332
|
-
return theme.spacing(sizeFactor);
|
|
333
|
-
};
|
|
334
|
-
var getAvatarFontSize = function (props) {
|
|
335
|
-
var fontSizes = {
|
|
336
|
-
'extra-small': '0.75rem',
|
|
337
|
-
small: '1rem',
|
|
338
|
-
medium: '1rem',
|
|
339
|
-
large: '1.25rem',
|
|
340
|
-
'extra-large': '3.5rem',
|
|
341
|
-
};
|
|
342
|
-
return fontSizes[props.size];
|
|
343
|
-
};
|
|
344
|
-
var useAvatarStyles = styles.makeStyles(function (theme) { return ({
|
|
345
|
-
root: function (props) { return ({
|
|
346
|
-
width: getAvatarDimensions(theme, props),
|
|
347
|
-
height: getAvatarDimensions(theme, props),
|
|
348
|
-
fontSize: getAvatarFontSize(props),
|
|
349
|
-
backgroundColor: props.loaded === LoadingStatus.LOADED ? 'transparent' : props.background,
|
|
350
|
-
color: theme.palette.getContrastText(props.background),
|
|
351
|
-
objectFit: props.fit,
|
|
352
|
-
}); },
|
|
353
|
-
fallback: function (props) { return ({
|
|
354
|
-
fontSize: getAvatarDimensions(theme, props),
|
|
355
|
-
strokeWidth: 1,
|
|
356
|
-
}); },
|
|
357
|
-
}); });
|
|
358
|
-
|
|
359
|
-
var Avatar = React.forwardRef(function (props, ref) {
|
|
360
|
-
var children = props.children, src = props.src, alt = props.alt, fallback = props.fallback, muiProps = __rest(props, ["children", "src", "alt", "fallback"]);
|
|
361
|
-
var _a = useImgProps(props), imgProps = _a.imgProps, loaded = _a.loaded;
|
|
362
|
-
var classes = useAvatarStyles(__assign(__assign({}, props), { loaded: loaded }));
|
|
363
|
-
var displayAltTextFallback = src && alt;
|
|
364
|
-
var displayNoFallback = fallback === 'none';
|
|
365
|
-
var displayCustomFallback = fallback !== 'none' && typeof fallback !== 'undefined';
|
|
366
|
-
var Fallback;
|
|
367
|
-
if (displayAltTextFallback) {
|
|
368
|
-
Fallback = null;
|
|
369
|
-
}
|
|
370
|
-
else if (displayNoFallback) {
|
|
371
|
-
Fallback = ' ';
|
|
372
|
-
}
|
|
373
|
-
else if (displayCustomFallback) {
|
|
374
|
-
Fallback = fallback;
|
|
375
|
-
}
|
|
376
|
-
else {
|
|
377
|
-
Fallback = React__default['default'].createElement(Icon, { icon: SvgUser, className: classes.fallback });
|
|
378
|
-
}
|
|
379
|
-
return (React__default['default'].createElement(MuiAvatar__default['default'], __assign({ ref: ref, classes: { root: classes.root }, src: src, alt: alt }, muiProps, { imgProps: imgProps }), children || Fallback));
|
|
380
|
-
});
|
|
381
|
-
Avatar.defaultProps = {
|
|
382
|
-
size: 'medium',
|
|
383
|
-
fit: 'cover',
|
|
384
|
-
background: '#E0E0E0',
|
|
385
|
-
};
|
|
386
|
-
Avatar.displayName = 'Avatar';
|
|
387
|
-
|
|
388
|
-
styles.makeStyles(function (theme) { return ({
|
|
389
|
-
circle: {
|
|
390
|
-
backgroundColor: theme.palette.grey[300],
|
|
391
|
-
borderRadius: '50%',
|
|
392
|
-
height: theme.spacing(0.65),
|
|
393
|
-
width: theme.spacing(0.65),
|
|
394
|
-
margin: theme.spacing(1) + "px 0 " + theme.spacing(1) + "px " + theme.spacing(1) + "px",
|
|
395
|
-
},
|
|
396
|
-
container: {
|
|
397
|
-
border: "1px solid " + theme.palette.secondary.light,
|
|
398
|
-
borderRadius: theme.spacing(0.5),
|
|
399
|
-
flexGrow: 1,
|
|
400
|
-
},
|
|
401
|
-
titleBar: {
|
|
402
|
-
display: 'flex',
|
|
403
|
-
flexDirection: 'row',
|
|
404
|
-
borderBottom: "1px solid " + theme.palette.secondary.light,
|
|
405
|
-
width: '100%',
|
|
406
|
-
},
|
|
407
|
-
}); });
|
|
408
|
-
|
|
409
|
-
styles.makeStyles(function () { return ({
|
|
410
|
-
root: {
|
|
411
|
-
minWidth: 'unset',
|
|
412
|
-
},
|
|
413
|
-
label: {
|
|
414
|
-
textTransform: function (_a) {
|
|
415
|
-
var textTransform = _a.textTransform;
|
|
416
|
-
return textTransform;
|
|
417
|
-
},
|
|
418
|
-
},
|
|
419
|
-
}); });
|
|
420
|
-
|
|
421
|
-
var Checkbox = React.forwardRef(function (props, ref) {
|
|
422
|
-
var label = props.label, disabled = props.disabled, LabelProps = props.LabelProps, muiProps = __rest(props, ["label", "disabled", "LabelProps"]);
|
|
423
|
-
var control = React__default['default'].createElement(MuiCheckbox__default['default'], __assign({ disabled: label ? undefined : disabled }, muiProps));
|
|
424
|
-
return label ? (React__default['default'].createElement(FormControlLabel__default['default'], __assign({ disabled: disabled, inputRef: ref, control: control, label: label }, LabelProps))) : (control);
|
|
425
|
-
});
|
|
426
|
-
Checkbox.displayName = 'Checkbox';
|
|
427
|
-
|
|
428
|
-
var getBackground = function (theme) { return function (props) {
|
|
429
|
-
var variant = props.variant, severity = props.severity;
|
|
430
|
-
var background = theme.palette.grey[100];
|
|
431
|
-
var backgrounds = {
|
|
432
|
-
outlined: 'none',
|
|
433
|
-
error: 'error.main',
|
|
434
|
-
warning: 'warning.main',
|
|
435
|
-
info: 'info.light',
|
|
436
|
-
success: 'success.light',
|
|
437
|
-
};
|
|
438
|
-
if (variant === 'outlined') {
|
|
439
|
-
background = backgrounds[variant];
|
|
440
|
-
}
|
|
441
|
-
else if (severity) {
|
|
442
|
-
var _a = backgrounds[severity].split('.'), color = _a[0], colorVariant = _a[1];
|
|
443
|
-
// @ts-expect-error - todo.
|
|
444
|
-
background = theme.palette[color][colorVariant];
|
|
445
|
-
}
|
|
446
|
-
return background;
|
|
447
|
-
}; };
|
|
448
|
-
var getColor = function (theme) { return function (props) {
|
|
449
|
-
var variant = props.variant, severity = props.severity;
|
|
450
|
-
var textColor;
|
|
451
|
-
if (variant === 'outlined' && severity) {
|
|
452
|
-
var textColors = {
|
|
453
|
-
error: theme.palette.error.main,
|
|
454
|
-
info: theme.palette.info.main,
|
|
455
|
-
warning: theme.palette.warning.dark,
|
|
456
|
-
success: theme.palette.success.dark,
|
|
457
|
-
};
|
|
458
|
-
textColor = textColors[severity];
|
|
459
|
-
}
|
|
460
|
-
else if (variant === 'outlined' && !severity) {
|
|
461
|
-
textColor = theme.palette.grey[700];
|
|
462
|
-
}
|
|
463
|
-
else if ((variant === 'default' || variant === undefined) && severity) {
|
|
464
|
-
var textColors = {
|
|
465
|
-
error: theme.palette.common.white,
|
|
466
|
-
info: theme.palette.secondary.main,
|
|
467
|
-
warning: theme.palette.secondary.main,
|
|
468
|
-
success: theme.palette.secondary.main,
|
|
469
|
-
};
|
|
470
|
-
textColor = textColors[severity];
|
|
471
|
-
}
|
|
472
|
-
return textColor;
|
|
473
|
-
}; };
|
|
474
|
-
var getBorder = function (theme) { return function (props) {
|
|
475
|
-
var variant = props.variant, severity = props.severity;
|
|
476
|
-
var borderColor;
|
|
477
|
-
if (variant === 'outlined' && severity) {
|
|
478
|
-
var borderColors = {
|
|
479
|
-
error: theme.palette.error.main,
|
|
480
|
-
info: theme.palette.info.main,
|
|
481
|
-
warning: theme.palette.warning.dark,
|
|
482
|
-
success: theme.palette.success.dark,
|
|
483
|
-
};
|
|
484
|
-
borderColor = borderColors[severity];
|
|
485
|
-
}
|
|
486
|
-
return borderColor;
|
|
487
|
-
}; };
|
|
488
|
-
// using `any` here is a bit of cheating but it doesn't matter since this doesn't depend on
|
|
489
|
-
// any component-specific props
|
|
490
|
-
styles.makeStyles(function (theme) { return ({
|
|
491
|
-
root: {
|
|
492
|
-
background: getBackground(theme),
|
|
493
|
-
color: getColor(theme),
|
|
494
|
-
borderColor: getBorder(theme),
|
|
495
|
-
borderRadius: theme.spacing(0.5),
|
|
496
|
-
},
|
|
497
|
-
icon: {
|
|
498
|
-
color: 'inherit',
|
|
499
|
-
height: theme.spacing(2),
|
|
500
|
-
width: theme.spacing(2),
|
|
501
|
-
},
|
|
502
|
-
deleteIcon: {
|
|
503
|
-
color: theme.palette.grey[500],
|
|
504
|
-
},
|
|
505
|
-
}); });
|
|
506
|
-
|
|
507
|
-
var defaultTypographyProps = {
|
|
508
|
-
variant: 'body1',
|
|
509
|
-
};
|
|
510
|
-
|
|
511
|
-
var weights = {
|
|
512
|
-
regular: 400,
|
|
513
|
-
medium: 500,
|
|
514
|
-
'semi-bold': 600,
|
|
515
|
-
bold: 700,
|
|
516
|
-
};
|
|
517
|
-
var getCustomColor = function (theme, color) {
|
|
518
|
-
var isCommonColor = color && ['white', 'black'].includes(color);
|
|
519
|
-
var isGreyColor = color && color.match(/^grey\.\d{3}/);
|
|
520
|
-
var isSemanticColor = color && color.match(/(primary|secondary|info|success|error|warning).?(light|dark)?/);
|
|
521
|
-
var isTextColor = color && ['textPrimary', 'textSecondary'].includes(color);
|
|
522
|
-
switch (true) {
|
|
523
|
-
case isCommonColor:
|
|
524
|
-
// @ts-expect-error - todo.
|
|
525
|
-
return theme.palette.common[color];
|
|
526
|
-
case Boolean(isGreyColor):
|
|
527
|
-
var scale = color.split('.')[1];
|
|
528
|
-
// @ts-expect-error - todo.
|
|
529
|
-
return theme.palette.grey[scale] || theme.palette.grey[900];
|
|
530
|
-
case Boolean(isSemanticColor):
|
|
531
|
-
var _a = color.split('.'), paletteKey = _a[0], _b = _a[1], variant = _b === void 0 ? 'main' : _b;
|
|
532
|
-
// @ts-expect-error - todo.
|
|
533
|
-
return theme.palette[paletteKey][variant];
|
|
534
|
-
case isTextColor:
|
|
535
|
-
// @ts-expect-error - todo.
|
|
536
|
-
return theme.palette.text[color.slice(4).toLowerCase()];
|
|
537
|
-
default:
|
|
538
|
-
return undefined;
|
|
539
|
-
}
|
|
540
|
-
};
|
|
541
|
-
var useTypographyStyles = styles.makeStyles(function (theme) {
|
|
542
|
-
var _a;
|
|
543
|
-
return ({
|
|
544
|
-
root: (_a = {},
|
|
545
|
-
_a["& ." + iconStaticClassName] = {
|
|
546
|
-
position: 'relative',
|
|
547
|
-
top: '0.125em',
|
|
548
|
-
padding: '0 0.125em',
|
|
549
|
-
boxSizing: 'content-box',
|
|
550
|
-
},
|
|
551
|
-
_a.fontFamily = theme.typography.fontFamily,
|
|
552
|
-
_a.fontWeight = function (_a) {
|
|
553
|
-
var variant = _a.variant, weight = _a.weight;
|
|
554
|
-
return (weight ? weights[weight] : theme.typography[variant].fontWeight);
|
|
555
|
-
},
|
|
556
|
-
_a.fontSize = function (_a) {
|
|
557
|
-
var variant = _a.variant;
|
|
558
|
-
return theme.typography[variant].fontSize;
|
|
559
|
-
},
|
|
560
|
-
_a.lineHeight = function (_a) {
|
|
561
|
-
var variant = _a.variant;
|
|
562
|
-
return theme.typography[variant].lineHeight;
|
|
563
|
-
},
|
|
564
|
-
_a.textTransform = function (_a) {
|
|
565
|
-
var variant = _a.variant;
|
|
566
|
-
return theme.typography[variant].textTransform;
|
|
567
|
-
},
|
|
568
|
-
_a.color = function (_a) {
|
|
569
|
-
var color = _a.color, variant = _a.variant;
|
|
570
|
-
return (color && getCustomColor(theme, color)) || theme.typography[variant].color;
|
|
571
|
-
},
|
|
572
|
-
_a),
|
|
573
|
-
caption: {
|
|
574
|
-
display: 'inline',
|
|
575
|
-
},
|
|
576
|
-
overline: {
|
|
577
|
-
display: 'inline',
|
|
578
|
-
},
|
|
579
|
-
});
|
|
580
|
-
});
|
|
581
|
-
|
|
582
|
-
var Typography = function (props) {
|
|
583
|
-
props.weight; props.color; var TypographyRef = props.TypographyRef, restProps = __rest(props, ["weight", "color", "TypographyRef"]);
|
|
584
|
-
var classes = useTypographyStyles(__assign({}, props));
|
|
585
|
-
var variantMapping = { subtitle1: 'p' };
|
|
586
|
-
return React__default['default'].createElement(core.Typography, __assign({ classes: classes, variantMapping: variantMapping, ref: TypographyRef }, restProps));
|
|
587
|
-
};
|
|
588
|
-
Typography.displayName = 'Typography';
|
|
589
|
-
Typography.defaultProps = defaultTypographyProps;
|
|
590
|
-
|
|
591
|
-
var getFadeStop = function (_a, typographyVariant) {
|
|
592
|
-
var typography = _a.typography;
|
|
593
|
-
// @ts-expect-error - todo.
|
|
594
|
-
return !isNaN(Number(typography[typographyVariant].lineHeight))
|
|
595
|
-
? // @ts-expect-error - todo.
|
|
596
|
-
typography[typographyVariant].lineHeight + "rem"
|
|
597
|
-
: // @ts-expect-error - todo.
|
|
598
|
-
typography[typographyVariant].lineHeight;
|
|
599
|
-
};
|
|
600
|
-
core.makeStyles(function (theme) { return ({
|
|
601
|
-
overlay: {
|
|
602
|
-
position: 'absolute',
|
|
603
|
-
top: 0,
|
|
604
|
-
left: 0,
|
|
605
|
-
height: '100%',
|
|
606
|
-
width: '100%',
|
|
607
|
-
background: function (props) { return "linear-gradient(to top, white, #FFF0 " + getFadeStop(theme, props.typographyVariant) + ")"; },
|
|
608
|
-
},
|
|
609
|
-
}); });
|
|
610
|
-
|
|
611
|
-
var SemanticColors;
|
|
612
|
-
(function (SemanticColors) {
|
|
613
|
-
SemanticColors["PRIMARY_MAIN"] = "primary.main";
|
|
614
|
-
SemanticColors["PRIMARY_DARK"] = "primary.dark";
|
|
615
|
-
SemanticColors["PRIMARY_LIGHT"] = "primary.light";
|
|
616
|
-
SemanticColors["SECONDARY_MAIN"] = "secondary.main";
|
|
617
|
-
SemanticColors["SECONDARY_DARK"] = "secondary.dark";
|
|
618
|
-
SemanticColors["SECONDARY_LIGHT"] = "secondary.light";
|
|
619
|
-
})(SemanticColors || (SemanticColors = {}));
|
|
620
|
-
core.makeStyles(function (theme) { return ({
|
|
621
|
-
dividerRoot: {
|
|
622
|
-
gap: theme.spacing(2),
|
|
623
|
-
},
|
|
624
|
-
textRoot: {
|
|
625
|
-
color: function (props) {
|
|
626
|
-
var textColor = props.textColor;
|
|
627
|
-
if (Object.values(SemanticColors).includes(textColor)) {
|
|
628
|
-
var _a = textColor.split('.'), semanticColor = _a[0], shade = _a[1];
|
|
629
|
-
// @ts-expect-error - todo.
|
|
630
|
-
return theme.palette[semanticColor][shade];
|
|
631
|
-
}
|
|
632
|
-
else if (textColor) {
|
|
633
|
-
return textColor;
|
|
634
|
-
}
|
|
635
|
-
else {
|
|
636
|
-
return 'black';
|
|
637
|
-
}
|
|
638
|
-
},
|
|
639
|
-
textTransform: function (props) { return props.textTransform; },
|
|
640
|
-
},
|
|
641
|
-
dividerLine: {
|
|
642
|
-
backgroundColor: function (props) {
|
|
643
|
-
var dividerColor = props.dividerColor;
|
|
644
|
-
if (Object.values(SemanticColors).includes(dividerColor)) {
|
|
645
|
-
var _a = dividerColor.split('.'), semanticColor = _a[0], shade = _a[1];
|
|
646
|
-
// @ts-expect-error - todo.
|
|
647
|
-
return theme.palette[semanticColor][shade];
|
|
648
|
-
}
|
|
649
|
-
else if (dividerColor) {
|
|
650
|
-
return dividerColor;
|
|
651
|
-
}
|
|
652
|
-
else {
|
|
653
|
-
return theme.palette.grey[500];
|
|
654
|
-
}
|
|
655
|
-
},
|
|
656
|
-
},
|
|
657
|
-
}); });
|
|
658
|
-
|
|
659
|
-
var IconButton = React.forwardRef(function (props, ref) {
|
|
660
|
-
return React__default['default'].createElement(MuiIconButton__default['default'], __assign({ ref: ref }, props));
|
|
661
|
-
});
|
|
662
|
-
IconButton.displayName = 'IconButton';
|
|
663
|
-
IconButton.defaultProps = {
|
|
664
|
-
color: 'secondary',
|
|
665
|
-
};
|
|
666
|
-
|
|
667
|
-
var useLinkStyles = styles.makeStyles(function (theme) { return ({
|
|
668
|
-
root: function (props) {
|
|
669
|
-
var _a;
|
|
670
|
-
return (__assign(__assign({ display: 'flex' }, (props.color === undefined && { color: theme.palette.info.main })), (_a = {}, _a["& ." + iconStaticClassName] = {
|
|
671
|
-
alignSelf: 'center',
|
|
672
|
-
}, _a)));
|
|
673
|
-
},
|
|
674
|
-
}); });
|
|
675
|
-
|
|
676
|
-
// eslint-disable-next-line react/display-name -- false positive
|
|
677
|
-
var Link = React.forwardRef(function (props, ref) {
|
|
678
|
-
var children = props.children, muiProps = __rest(props, ["children"]);
|
|
679
|
-
var classes = useLinkStyles(props);
|
|
680
|
-
return (React__default['default'].createElement(core.Link, __assign({ ref: ref, classes: { root: classes.root } }, muiProps), children));
|
|
681
|
-
});
|
|
682
|
-
Link.defaultProps = {
|
|
683
|
-
variant: 'body1',
|
|
684
|
-
};
|
|
685
|
-
Link.displayName = 'Link';
|
|
686
|
-
|
|
687
|
-
var useStyles$4 = core.makeStyles(function (_a) {
|
|
688
|
-
var spacing = _a.spacing;
|
|
689
|
-
return ({
|
|
690
|
-
root: {
|
|
691
|
-
'&:last-child': {
|
|
692
|
-
marginBottom: 0,
|
|
693
|
-
},
|
|
694
|
-
marginBottom: spacing(4),
|
|
695
|
-
padding: spacing(4),
|
|
696
|
-
},
|
|
697
|
-
});
|
|
698
|
-
});
|
|
699
|
-
var Paper = React.forwardRef(function (props, ref) {
|
|
700
|
-
var legacyStyles = props.legacyStyles, restProps = __rest(props, ["legacyStyles"]);
|
|
701
|
-
var classes = useStyles$4(props);
|
|
702
|
-
return React__default['default'].createElement(core.Paper, __assign({}, ref, { classes: __assign({}, (legacyStyles && classes)) }, restProps));
|
|
703
|
-
});
|
|
704
|
-
Paper.displayName = 'Paper';
|
|
705
|
-
Paper.defaultProps = {
|
|
706
|
-
legacyStyles: false,
|
|
707
|
-
};
|
|
708
|
-
|
|
709
|
-
var Radio = React.forwardRef(function (props, ref) {
|
|
710
|
-
var label = props.label, disabled = props.disabled, LabelProps = props.LabelProps, muiProps = __rest(props, ["label", "disabled", "LabelProps"]);
|
|
711
|
-
var control = React__default['default'].createElement(MuiRadio__default['default'], __assign({ disabled: label ? undefined : disabled }, muiProps));
|
|
712
|
-
return label ? (React__default['default'].createElement(FormControlLabel__default['default'], __assign({ disabled: disabled, inputRef: ref, control: control, label: label }, LabelProps))) : (control);
|
|
713
|
-
});
|
|
714
|
-
Radio.displayName = 'Radio';
|
|
715
|
-
|
|
716
|
-
styles.makeStyles(function () { return ({
|
|
717
|
-
textfield: {
|
|
718
|
-
background: function (props) { return (props.backgroundTransparency ? '#FFFFFF44' : 'none'); },
|
|
719
|
-
borderTopLeftRadius: 4,
|
|
720
|
-
borderBottomLeftRadius: 4,
|
|
721
|
-
'& fieldset': {
|
|
722
|
-
borderRight: 'none',
|
|
723
|
-
borderTopRightRadius: 0,
|
|
724
|
-
borderBottomRightRadius: 0,
|
|
725
|
-
},
|
|
726
|
-
},
|
|
727
|
-
button: {
|
|
728
|
-
borderTopLeftRadius: 0,
|
|
729
|
-
borderBottomLeftRadius: 0,
|
|
730
|
-
alignSelf: 'stretch',
|
|
731
|
-
},
|
|
732
|
-
input: {
|
|
733
|
-
color: function (props) { return props.inputTextColor || 'inherit'; },
|
|
734
|
-
'&$focused fieldset': {
|
|
735
|
-
top: -4,
|
|
736
|
-
},
|
|
737
|
-
},
|
|
738
|
-
focused: {},
|
|
739
|
-
}); });
|
|
740
|
-
|
|
741
|
-
var useSwitchStyles = styles.makeStyles(function (theme) { return ({
|
|
742
|
-
checked: {
|
|
743
|
-
'& $thumb': {
|
|
744
|
-
background: theme.palette.success.main,
|
|
745
|
-
},
|
|
746
|
-
'&& + $track': {
|
|
747
|
-
backgroundColor: theme.palette.success.main,
|
|
748
|
-
},
|
|
749
|
-
},
|
|
750
|
-
thumb: {},
|
|
751
|
-
track: {},
|
|
752
|
-
}); });
|
|
753
|
-
|
|
754
|
-
var Switch = React.forwardRef(function (props, ref) {
|
|
755
|
-
var label = props.label, disabled = props.disabled, LabelProps = props.LabelProps, muiProps = __rest(props, ["label", "disabled", "LabelProps"]);
|
|
756
|
-
var classes = useSwitchStyles(props);
|
|
757
|
-
var control = React__default['default'].createElement(MuiSwitch__default['default'], __assign({ classes: classes, disabled: label ? undefined : disabled }, muiProps));
|
|
758
|
-
return label ? (React__default['default'].createElement(FormControlLabel__default['default'], __assign({ disabled: disabled, inputRef: ref, control: control, label: label }, LabelProps))) : (control);
|
|
759
|
-
});
|
|
760
|
-
Switch.displayName = 'Switch';
|
|
761
|
-
|
|
762
|
-
var useToggleButtonStyles = styles.makeStyles(function (theme) { return ({
|
|
763
|
-
root: {
|
|
764
|
-
color: theme.palette.text.primary,
|
|
765
|
-
},
|
|
766
|
-
selected: {
|
|
767
|
-
'&&': {
|
|
768
|
-
'&:hover': {
|
|
769
|
-
backgroundColor: function (props) { return theme.palette[props.color || 'primary'].dark; },
|
|
770
|
-
},
|
|
771
|
-
backgroundColor: function (props) { return theme.palette[props.color || 'primary'].main; },
|
|
772
|
-
color: 'white',
|
|
773
|
-
},
|
|
774
|
-
},
|
|
775
|
-
}); });
|
|
776
|
-
|
|
777
|
-
var ToggleButton = React.forwardRef(function (props, ref) {
|
|
778
|
-
var children = props.children, muiProps = __rest(props, ["children"]);
|
|
779
|
-
var classes = useToggleButtonStyles(props);
|
|
780
|
-
return (React__default['default'].createElement(MuiToggleButton__default['default'], __assign({ ref: ref, classes: {
|
|
781
|
-
root: classes.root,
|
|
782
|
-
selected: classes.selected,
|
|
783
|
-
} }, muiProps), children));
|
|
784
|
-
});
|
|
785
|
-
ToggleButton.defaultProps = {
|
|
786
|
-
color: 'primary',
|
|
787
|
-
};
|
|
788
|
-
ToggleButton.displayName = 'ToggleButton';
|
|
789
|
-
|
|
790
|
-
var useToggleButtonGroupStyles = styles.makeStyles(function (theme) { return ({
|
|
791
|
-
root: {
|
|
792
|
-
'&&': {
|
|
793
|
-
backgroundColor: theme.palette.grey[300],
|
|
794
|
-
},
|
|
795
|
-
},
|
|
796
|
-
}); });
|
|
797
|
-
|
|
798
|
-
var ToggleButtonGroup = React.forwardRef(function (props, ref) {
|
|
799
|
-
var children = props.children, _a = props.color, color = _a === void 0 ? 'primary' : _a, muiProps = __rest(props, ["children", "color"]);
|
|
800
|
-
var classes = useToggleButtonGroupStyles(props);
|
|
801
|
-
var childrenWithProps = React__default['default'].Children.map(children, function (child) {
|
|
802
|
-
if (!React__default['default'].isValidElement(child)) {
|
|
803
|
-
return null;
|
|
804
|
-
}
|
|
805
|
-
return React__default['default'].cloneElement(child, { color: color });
|
|
806
|
-
});
|
|
807
|
-
return (React__default['default'].createElement(MuiToggleButtonGroup__default['default'], __assign({ ref: ref, classes: { root: classes.root } }, muiProps), childrenWithProps));
|
|
808
|
-
});
|
|
809
|
-
ToggleButtonGroup.displayName = 'ToggleButtonGroup';
|
|
810
|
-
|
|
811
|
-
var useTooltipStyles = styles.makeStyles(function (_a) {
|
|
812
|
-
var typography = _a.typography;
|
|
813
|
-
return ({
|
|
814
|
-
tooltip: {
|
|
815
|
-
fontSize: typography.pxToRem(16),
|
|
816
|
-
},
|
|
817
|
-
});
|
|
818
|
-
});
|
|
819
|
-
|
|
820
|
-
var Tooltip = React.forwardRef(function (props, ref) {
|
|
821
|
-
var classes = useTooltipStyles(props);
|
|
822
|
-
return React__default['default'].createElement(MuiTooltip__default['default'], __assign({ ref: ref, classes: classes }, props));
|
|
823
|
-
});
|
|
824
|
-
Tooltip.displayName = 'Tooltip';
|
|
825
|
-
|
|
826
|
-
core.makeStyles(function () { return ({
|
|
827
|
-
root: {
|
|
828
|
-
height: 56,
|
|
829
|
-
},
|
|
830
|
-
}); });
|
|
831
|
-
core.makeStyles(function (theme) { return ({
|
|
832
|
-
root: {
|
|
833
|
-
height: '100%',
|
|
834
|
-
width: 'min-content',
|
|
835
|
-
borderRadius: theme.spacing(1),
|
|
836
|
-
},
|
|
837
|
-
input: {
|
|
838
|
-
'&::-webkit-clear-button, &::-webkit-outer-spin-button, &::-webkit-inner-spin-button': {
|
|
839
|
-
display: 'none',
|
|
840
|
-
},
|
|
841
|
-
'-moz-appearance': 'textfield',
|
|
842
|
-
minWidth: 40,
|
|
843
|
-
padding: 0,
|
|
844
|
-
textAlign: 'center',
|
|
845
|
-
},
|
|
846
|
-
adornedStart: {
|
|
847
|
-
padding: 0,
|
|
848
|
-
},
|
|
849
|
-
adornedEnd: {
|
|
850
|
-
padding: 0,
|
|
851
|
-
},
|
|
852
|
-
}); });
|
|
853
|
-
|
|
854
|
-
core.makeStyles(function () { return ({
|
|
855
|
-
root: {
|
|
856
|
-
display: 'flex',
|
|
857
|
-
flexDirection: 'column',
|
|
858
|
-
alignItems: 'center',
|
|
859
|
-
gridGap: 16,
|
|
860
|
-
},
|
|
861
|
-
}); });
|
|
862
|
-
|
|
863
|
-
var FollowerAuthenticationDialogContext = React.createContext(null);
|
|
864
|
-
FollowerAuthenticationDialogContext.Provider;
|
|
865
|
-
|
|
866
|
-
core.makeStyles(function () { return ({
|
|
867
|
-
form: {
|
|
868
|
-
display: 'flex',
|
|
869
|
-
flexDirection: 'column',
|
|
870
|
-
alignItems: 'center',
|
|
871
|
-
width: '100%',
|
|
872
|
-
gridGap: 16,
|
|
873
|
-
},
|
|
874
|
-
}); });
|
|
875
|
-
|
|
876
|
-
core.makeStyles(function () { return ({
|
|
877
|
-
main: {
|
|
878
|
-
width: '100%',
|
|
879
|
-
display: 'flex',
|
|
880
|
-
flexDirection: 'column',
|
|
881
|
-
gridGap: 16,
|
|
882
|
-
},
|
|
883
|
-
}); });
|
|
884
|
-
|
|
885
|
-
core.makeStyles(function () { return ({
|
|
886
|
-
root: {
|
|
887
|
-
position: 'absolute',
|
|
888
|
-
top: 0,
|
|
889
|
-
right: 0,
|
|
890
|
-
},
|
|
891
|
-
}); });
|
|
892
|
-
|
|
893
|
-
var _path$2p;
|
|
894
|
-
|
|
895
|
-
function _extends$5q() { _extends$5q = 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$5q.apply(this, arguments); }
|
|
896
|
-
|
|
897
|
-
function SvgChevronDown(props) {
|
|
898
|
-
return /*#__PURE__*/React__namespace.createElement("svg", _extends$5q({
|
|
899
|
-
viewBox: "0 0 16 16",
|
|
900
|
-
fill: "none",
|
|
901
|
-
strokeLinecap: "round",
|
|
902
|
-
strokeLinejoin: "round",
|
|
903
|
-
width: "1em",
|
|
904
|
-
height: "1em"
|
|
905
|
-
}, props), _path$2p || (_path$2p = /*#__PURE__*/React__namespace.createElement("path", {
|
|
906
|
-
d: "M4 6l4 4 4-4",
|
|
907
|
-
stroke: "currentColor"
|
|
908
|
-
})));
|
|
909
|
-
}
|
|
910
|
-
|
|
911
|
-
var _g$24;
|
|
912
|
-
|
|
913
|
-
function _extends$3J() { _extends$3J = 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$3J.apply(this, arguments); }
|
|
914
|
-
|
|
915
|
-
function SvgTrend(props) {
|
|
916
|
-
return /*#__PURE__*/React__namespace.createElement("svg", _extends$3J({
|
|
917
|
-
viewBox: "0 0 16 16",
|
|
918
|
-
fill: "none",
|
|
919
|
-
strokeLinecap: "round",
|
|
920
|
-
strokeLinejoin: "round",
|
|
921
|
-
width: "1em",
|
|
922
|
-
height: "1em"
|
|
923
|
-
}, props), _g$24 || (_g$24 = /*#__PURE__*/React__namespace.createElement("g", {
|
|
924
|
-
stroke: "currentColor"
|
|
925
|
-
}, /*#__PURE__*/React__namespace.createElement("path", {
|
|
926
|
-
d: "M15.333 4L9 10.333 5.667 7l-5 5"
|
|
927
|
-
}), /*#__PURE__*/React__namespace.createElement("path", {
|
|
928
|
-
d: "M11.333 4h4v4"
|
|
929
|
-
}))));
|
|
930
|
-
}
|
|
931
|
-
|
|
932
|
-
var _g$23;
|
|
933
|
-
|
|
934
|
-
function _extends$3I() { _extends$3I = 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$3I.apply(this, arguments); }
|
|
935
|
-
|
|
936
|
-
function SvgTrendDown(props) {
|
|
937
|
-
return /*#__PURE__*/React__namespace.createElement("svg", _extends$3I({
|
|
938
|
-
viewBox: "0 0 16 16",
|
|
939
|
-
fill: "none",
|
|
940
|
-
strokeLinecap: "round",
|
|
941
|
-
strokeLinejoin: "round",
|
|
942
|
-
width: "1em",
|
|
943
|
-
height: "1em"
|
|
944
|
-
}, props), _g$23 || (_g$23 = /*#__PURE__*/React__namespace.createElement("g", {
|
|
945
|
-
stroke: "currentColor"
|
|
946
|
-
}, /*#__PURE__*/React__namespace.createElement("path", {
|
|
947
|
-
d: "M15.333 12L9 5.667 5.667 9l-5-5"
|
|
948
|
-
}), /*#__PURE__*/React__namespace.createElement("path", {
|
|
949
|
-
d: "M11.333 12h4V8"
|
|
950
|
-
}))));
|
|
951
|
-
}
|
|
952
|
-
|
|
953
|
-
var _path$w;
|
|
954
|
-
|
|
955
|
-
function _extends$1p() { _extends$1p = 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$1p.apply(this, arguments); }
|
|
956
|
-
|
|
957
|
-
function SvgGitCommit(props) {
|
|
958
|
-
return /*#__PURE__*/React__namespace.createElement("svg", _extends$1p({
|
|
959
|
-
viewBox: "0 0 16 16",
|
|
960
|
-
fill: "none",
|
|
961
|
-
strokeLinecap: "round",
|
|
962
|
-
strokeLinejoin: "round",
|
|
963
|
-
width: "1em",
|
|
964
|
-
height: "1em"
|
|
965
|
-
}, props), _path$w || (_path$w = /*#__PURE__*/React__namespace.createElement("path", {
|
|
966
|
-
d: "M8 10.667a2.667 2.667 0 100-5.334 2.667 2.667 0 000 5.334zM.7 8h3.967m6.673 0h3.966",
|
|
967
|
-
stroke: "currentColor"
|
|
968
|
-
})));
|
|
969
|
-
}
|
|
970
|
-
|
|
971
|
-
var useLeaderboardStyles = core.makeStyles(function (theme) { return ({
|
|
972
|
-
root: {
|
|
973
|
-
'& >:nth-child(even) > li': {
|
|
974
|
-
background: theme.palette.grey[100],
|
|
975
|
-
},
|
|
976
|
-
},
|
|
977
|
-
}); });
|
|
978
|
-
var useLeaderboardListItemStyles = core.makeStyles(function (theme) { return ({
|
|
979
|
-
fallbackIcon: {
|
|
980
|
-
background: 'white',
|
|
981
|
-
border: "1px solid " + theme.palette.grey[300],
|
|
982
|
-
color: theme.palette.grey[500],
|
|
983
|
-
},
|
|
984
|
-
link: {
|
|
985
|
-
color: theme.palette.info.main,
|
|
986
|
-
textDecoration: 'none',
|
|
987
|
-
},
|
|
988
|
-
subtitle: {
|
|
989
|
-
color: theme.palette.secondary.light,
|
|
990
|
-
},
|
|
991
|
-
}); });
|
|
992
|
-
var useLeaderboardFilterStyles = core.makeStyles(function (theme) { return ({
|
|
993
|
-
filterWrapper: {
|
|
994
|
-
alignItems: 'center',
|
|
995
|
-
cursor: 'pointer',
|
|
996
|
-
display: 'flex',
|
|
997
|
-
},
|
|
998
|
-
text: {
|
|
999
|
-
color: theme.palette.secondary.main,
|
|
1000
|
-
fontSize: '.75rem',
|
|
1001
|
-
paddingRight: theme.spacing(1),
|
|
1002
|
-
},
|
|
1003
|
-
}); });
|
|
1004
|
-
var useMoreLinkStyles = core.makeStyles(function (theme) { return ({
|
|
1005
|
-
link: {
|
|
1006
|
-
color: theme.palette.info.main,
|
|
1007
|
-
textDecoration: 'none',
|
|
1008
|
-
},
|
|
1009
|
-
}); });
|
|
1010
|
-
|
|
1011
|
-
var Leaderboard = function (props) {
|
|
1012
|
-
var data = props.data, EmptyState = props.EmptyState, filterProps = props.filterProps, title = props.title, moreLink = props.moreLink, subtitle = props.subtitle;
|
|
1013
|
-
var classes = useLeaderboardStyles(props);
|
|
1014
|
-
var isEmpty = data.length === 0;
|
|
1015
|
-
var slicedData = data.slice(0, 5);
|
|
1016
|
-
var isOverflow = data.length > 5;
|
|
1017
|
-
var showMoreButton = !isEmpty && ((moreLink === null || moreLink === void 0 ? void 0 : moreLink.show) || isOverflow);
|
|
1018
|
-
return (React__default['default'].createElement(core.Box, { display: "flex", flexDirection: "column" },
|
|
1019
|
-
React__default['default'].createElement(core.Box, { alignItems: "left" },
|
|
1020
|
-
React__default['default'].createElement(Typography, { variant: "h5" }, title),
|
|
1021
|
-
React__default['default'].createElement(Typography, { className: classes.text }, subtitle),
|
|
1022
|
-
filterProps && React__default['default'].createElement(LeaderboardFilter, __assign$1({}, filterProps))),
|
|
1023
|
-
!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),
|
|
1024
|
-
moreLink && showMoreButton && React__default['default'].createElement(MoreLink, { text: moreLink.text, to: moreLink.to })));
|
|
1025
|
-
};
|
|
1026
|
-
var LeaderboardListItem = function (props) {
|
|
1027
|
-
var ItemIcon = props.Icon, image = props.image, to = props.to, subtitle = props.subtitle, title = props.title;
|
|
1028
|
-
var classes = useLeaderboardListItemStyles(props);
|
|
1029
|
-
var routeProps = { component: reactRouterDom.Link, to: to };
|
|
1030
|
-
var showListItemAvatar = image || ItemIcon;
|
|
1031
|
-
return (React__default['default'].createElement(core.Box, __assign$1({}, (to && routeProps), { className: to && routeProps ? classes.link : '' }),
|
|
1032
|
-
React__default['default'].createElement(ListItem__default['default'], null,
|
|
1033
|
-
showListItemAvatar && (React__default['default'].createElement(ListItemAvatar__default['default'], null,
|
|
1034
|
-
React__default['default'].createElement(Avatar, __assign$1({ classes: { colorDefault: classes.fallbackIcon } }, image), ItemIcon && React__default['default'].createElement(Icon, { icon: ItemIcon })))),
|
|
1035
|
-
React__default['default'].createElement(ListItemText__default['default'], { classes: { secondary: classes.subtitle }, primary: title, primaryTypographyProps: {
|
|
1036
|
-
noWrap: true,
|
|
1037
|
-
}, secondary: subtitle }))));
|
|
1038
|
-
};
|
|
1039
|
-
var LeaderboardFilter = function (props) {
|
|
1040
|
-
var onChange = props.onChange, options = props.options, text = props.text;
|
|
1041
|
-
var classes = useLeaderboardFilterStyles(props);
|
|
1042
|
-
var _a = React.useState(false), open = _a[0], setOpen = _a[1];
|
|
1043
|
-
var _b = React.useState(null), menuAnchor = _b[0], setMenuAnchor = _b[1];
|
|
1044
|
-
var _c = React.useState(null), selection = _c[0], setSelection = _c[1];
|
|
1045
|
-
var handleOpen = function (event) {
|
|
1046
|
-
setMenuAnchor(event.currentTarget);
|
|
1047
|
-
setOpen(true);
|
|
1048
|
-
};
|
|
1049
|
-
var handleClose = function () {
|
|
1050
|
-
setMenuAnchor(null);
|
|
1051
|
-
setOpen(false);
|
|
1052
|
-
};
|
|
1053
|
-
var handleSelection = function (label, value) {
|
|
1054
|
-
if (typeof onChange === 'function') {
|
|
1055
|
-
onChange(value);
|
|
1056
|
-
}
|
|
1057
|
-
setSelection(label);
|
|
1058
|
-
handleClose();
|
|
1059
|
-
};
|
|
1060
|
-
if (options.length < 1)
|
|
1061
|
-
return null;
|
|
1062
|
-
return (React__default['default'].createElement(React__default['default'].Fragment, null,
|
|
1063
|
-
React__default['default'].createElement(core.Box, { className: classes.filterWrapper, pt: 1, onClick: handleOpen },
|
|
1064
|
-
React__default['default'].createElement(Typography, { className: classes.text }, selection || text),
|
|
1065
|
-
React__default['default'].createElement(Icon, { icon: SvgChevronDown })),
|
|
1066
|
-
React__default['default'].createElement(core.Menu, { anchorEl: menuAnchor, onClose: handleClose, open: open }, options.map(function (_a) {
|
|
1067
|
-
var label = _a.label, value = _a.value;
|
|
1068
|
-
return (React__default['default'].createElement(core.MenuItem, { key: value, onClick: function () { return handleSelection(label, value); } }, label));
|
|
1069
|
-
}))));
|
|
1070
|
-
};
|
|
1071
|
-
var MoreLink = function (props) {
|
|
1072
|
-
var text = props.text, to = props.to;
|
|
1073
|
-
var classes = useMoreLinkStyles(props);
|
|
1074
|
-
var routeProps = { component: reactRouterDom.Link, to: to };
|
|
1075
|
-
return (React__default['default'].createElement(core.Box, __assign$1({ display: "flex", justifyContent: "center" }, routeProps, { className: classes.link }),
|
|
1076
|
-
React__default['default'].createElement(Typography, { variant: "body2" }, text)));
|
|
1077
|
-
};
|
|
1078
|
-
|
|
1079
|
-
var useTileStyles = core.makeStyles(function (theme) { return ({
|
|
1080
|
-
root: {
|
|
1081
|
-
borderRadius: theme.spacing(1),
|
|
1082
|
-
width: '100%',
|
|
1083
|
-
},
|
|
1084
|
-
content: {
|
|
1085
|
-
padding: theme.spacing(3),
|
|
1086
|
-
height: '100%',
|
|
1087
|
-
},
|
|
1088
|
-
}); });
|
|
1089
|
-
|
|
1090
|
-
var Tile = function (props) {
|
|
1091
|
-
var children = props.children, CardContentProps = props.CardContentProps, restProps = __rest$1(props, ["children", "CardContentProps"]);
|
|
1092
|
-
var classes = useTileStyles(props);
|
|
1093
|
-
return (React__default['default'].createElement(Card__default['default'], __assign$1({ classes: { root: classes.root } }, restProps),
|
|
1094
|
-
React__default['default'].createElement(CardContent__default['default'], __assign$1({ classes: { root: classes.content } }, CardContentProps), children)));
|
|
1095
|
-
};
|
|
1096
|
-
|
|
1097
|
-
var LeaderboardTile = function (props) {
|
|
1098
|
-
var TileProps = props.TileProps, restProps = __rest$1(props, ["TileProps"]);
|
|
1099
|
-
return (React__default['default'].createElement(Tile, __assign$1({}, TileProps),
|
|
1100
|
-
React__default['default'].createElement(Leaderboard, __assign$1({}, restProps))));
|
|
1101
|
-
};
|
|
1102
|
-
|
|
1103
|
-
var useKpiMetricStyles = core.makeStyles(function (theme) { return ({
|
|
1104
|
-
iconContainer: {
|
|
1105
|
-
fontSize: theme.spacing(3),
|
|
1106
|
-
display: 'flex',
|
|
1107
|
-
backgroundColor: theme.palette.grey[100],
|
|
1108
|
-
color: theme.palette.secondary.light,
|
|
1109
|
-
borderRadius: '50%',
|
|
1110
|
-
padding: theme.spacing(2),
|
|
1111
|
-
marginBottom: theme.spacing(2),
|
|
1112
|
-
},
|
|
1113
|
-
root: {
|
|
1114
|
-
display: 'flex',
|
|
1115
|
-
flexDirection: 'column',
|
|
1116
|
-
alignItems: 'center',
|
|
1117
|
-
height: '100%',
|
|
1118
|
-
justifyContent: 'space-between',
|
|
1119
|
-
textAlign: 'center',
|
|
1120
|
-
fontSize: '0.75rem',
|
|
1121
|
-
},
|
|
1122
|
-
trendIcon: {
|
|
1123
|
-
'&&': {
|
|
1124
|
-
paddingInlineEnd: theme.spacing(1),
|
|
1125
|
-
},
|
|
1126
|
-
},
|
|
1127
|
-
}); });
|
|
1128
|
-
|
|
1129
|
-
var defaultProps = {
|
|
1130
|
-
trendStatus: 'natural',
|
|
1131
|
-
};
|
|
1132
|
-
var KpiMetric = function (props) {
|
|
1133
|
-
var KpiIcon = props.Icon, metric = props.metric, value = props.value, trend = props.trend, trendMessage = props.trendMessage, trendStatus = props.trendStatus;
|
|
1134
|
-
var classes = useKpiMetricStyles(props);
|
|
1135
|
-
var trendColors = trendStatus === 'natural' ? ['success', 'warning', 'grey.500'] : ['warning', 'success', 'grey.500'];
|
|
1136
|
-
var trendColorMap = { up: 0, down: 1, level: 2 };
|
|
1137
|
-
return (React__default['default'].createElement(core.Box, { className: classes.root },
|
|
1138
|
-
KpiIcon && (React__default['default'].createElement(core.Box, { className: classes.iconContainer },
|
|
1139
|
-
React__default['default'].createElement(Icon, { icon: KpiIcon, size: "inherit" }))),
|
|
1140
|
-
React__default['default'].createElement(Typography, { color: "secondary.light", variant: "body2" }, metric),
|
|
1141
|
-
React__default['default'].createElement(Typography, { color: "secondary", variant: "h4" }, value ? value : '-'),
|
|
1142
|
-
trendMessage && (React__default['default'].createElement(Typography, { style: { fontSize: 'inherit' }, variant: "body2", color: trend ? trendColors[trendColorMap[trend]] : 'grey.500' },
|
|
1143
|
-
trend === 'up' && React__default['default'].createElement(Icon, { className: classes.trendIcon, icon: SvgTrend, size: "inherit" }),
|
|
1144
|
-
trend === 'down' && React__default['default'].createElement(Icon, { className: classes.trendIcon, icon: SvgTrendDown, size: "inherit" }),
|
|
1145
|
-
trend === 'level' && React__default['default'].createElement(Icon, { className: classes.trendIcon, icon: SvgGitCommit, size: "inherit" }),
|
|
1146
|
-
trendMessage))));
|
|
1147
|
-
};
|
|
1148
|
-
KpiMetric.defaultProps = defaultProps;
|
|
1149
|
-
|
|
1150
|
-
var useClickableTileStyles = core.makeStyles(function (theme) { return ({
|
|
1151
|
-
root: {
|
|
1152
|
-
textDecoration: 'none',
|
|
1153
|
-
borderRadius: theme.spacing(1),
|
|
1154
|
-
width: '100%',
|
|
1155
|
-
},
|
|
1156
|
-
content: {
|
|
1157
|
-
padding: theme.spacing(3),
|
|
1158
|
-
height: '100%',
|
|
1159
|
-
},
|
|
1160
|
-
}); });
|
|
1161
|
-
|
|
1162
|
-
var ClickableTile = function (props) {
|
|
1163
|
-
var children = props.children, CardContentProps = props.CardContentProps, link = props.link, restProps = __rest$1(props, ["children", "CardContentProps", "link"]);
|
|
1164
|
-
var classes = useClickableTileStyles(props);
|
|
1165
|
-
return (React__default['default'].createElement(core.Card, __assign$1({ classes: { root: classes.root } }, restProps),
|
|
1166
|
-
React__default['default'].createElement(core.CardActionArea, { component: link ? 'a' : 'div' },
|
|
1167
|
-
React__default['default'].createElement(core.CardContent, __assign$1({ classes: { root: classes.content } }, CardContentProps), children))));
|
|
1168
|
-
};
|
|
1169
|
-
ClickableTile.defaultProps = {
|
|
1170
|
-
link: false,
|
|
1171
|
-
};
|
|
1172
|
-
|
|
1173
|
-
var KpiMetricTile = function (props) {
|
|
1174
|
-
var TileProps = props.TileProps, restProps = __rest$1(props, ["TileProps"]);
|
|
1175
|
-
var DynamicTile = typeof (TileProps === null || TileProps === void 0 ? void 0 : TileProps.onClick) === 'function' ? ClickableTile : Tile;
|
|
1176
|
-
return (React__default['default'].createElement(DynamicTile, __assign$1({}, TileProps),
|
|
1177
|
-
React__default['default'].createElement(KpiMetric, __assign$1({}, restProps))));
|
|
1178
|
-
};
|
|
1179
|
-
|
|
1180
|
-
exports.KpiMetric = KpiMetric;
|
|
1181
|
-
exports.KpiMetricTile = KpiMetricTile;
|
|
1182
|
-
exports.Leaderboard = Leaderboard;
|
|
1183
|
-
exports.LeaderboardTile = LeaderboardTile;
|
|
1184
|
-
exports.Tile = Tile;
|
|
1185
|
-
//# sourceMappingURL=index.js.map
|