@learningpool/ui 1.6.0-beta.4 → 1.6.0-beta.6
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/components/navigation/VerticalNavigation/VerticalNavigation.d.ts +13 -0
- package/components/navigation/VerticalNavigation/VerticalNavigation.js +39 -14
- package/components/navigation/VerticalNavigation/VerticalNavigationAvatar.d.ts +24 -0
- package/components/navigation/VerticalNavigation/VerticalNavigationAvatar.js +84 -0
- package/components/navigation/VerticalNavigation/VerticalNavigationAvatarStyles.d.ts +827 -0
- package/components/navigation/VerticalNavigation/VerticalNavigationAvatarStyles.js +31 -0
- package/components/navigation/VerticalNavigation/VerticalNavigationItem/VerticalNavigationItem.d.ts +1 -1
- package/components/navigation/VerticalNavigation/VerticalNavigationItem/VerticalNavigationItem.js +1 -1
- package/components/navigation/VerticalNavigation/VerticalNavigationItem/VerticalNavigationItemFlyoutMenu.js +1 -1
- package/components/navigation/VerticalNavigation/VerticalNavigationItem/VerticalNavigationItemFlyoutMenuStyles.js +12 -9
- package/components/navigation/VerticalNavigation/VerticalNavigationItem/VerticalNavigationItemStyles.js +12 -13
- package/components/navigation/VerticalNavigation/VerticalNavigationMotion.d.ts +141 -0
- package/components/navigation/VerticalNavigation/VerticalNavigationMotion.js +109 -0
- package/components/navigation/VerticalNavigation/VerticalNavigationStyles.js +16 -15
- package/package.json +2 -1
- package/utils/constants.d.ts +1 -0
- package/utils/constants.js +1 -0
- package/components/navigation/VerticalNavigation/AvatarPanel.d.ts +0 -8
- package/components/navigation/VerticalNavigation/AvatarPanel.js +0 -97
|
@@ -5,7 +5,6 @@ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cook
|
|
|
5
5
|
import Drawer from '@mui/material/Drawer';
|
|
6
6
|
import { Box, IconButton } from '../../../index';
|
|
7
7
|
import { styled } from '@mui/material/styles';
|
|
8
|
-
import { motion } from '../../../utils/theme';
|
|
9
8
|
export var DRAWER_WIDTH = {
|
|
10
9
|
Collapsed: 60,
|
|
11
10
|
Expanded: 300
|
|
@@ -16,25 +15,27 @@ var ICON = {
|
|
|
16
15
|
};
|
|
17
16
|
export var DrawerHeader = styled('div', {
|
|
18
17
|
shouldForwardProp: function (prop) { return prop !== 'isDrawerOpen'; }
|
|
19
|
-
})(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n align-items: center;\n background-color: ", ";\n display: flex;\n flex: 1 auto;\n justify-content: flex-start;\n overflow: hidden;\n min-height: 56px !important;\n padding: ", " 10px 0;\n
|
|
18
|
+
})(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n align-items: center;\n background-color: ", ";\n display: flex;\n flex: 1 auto;\n justify-content: flex-start;\n overflow: hidden;\n min-height: 56px !important;\n padding: ", " 10px 0;\n transition: ", "\n 250ms;\n\n /* Testing secondary nav fix ups */\n width: ", ";\n\n @media (min-width: ", ") {\n min-height: 64px !important;\n width: ", ";\n };\n\n .MuiListItemIcon-root {\n margin: ", " 0 0;\n }\n\n .MuiListItemText-root {\n align-items: center !important;\n color: ", ";\n display: flex;\n min-height: ", "px;\n max-height: ", ";\n text-decoration: none;\n text-dransform: none;\n transition: max-height\n ", "ms\n ", ";\n padding: 0;\n width: 100%;\n\n [theme.breakpoints.up('sm')] {\n max-height: ", ";\n }\n }\n\n .MuiListItemText-root .MuiTypography-root {\n white-space: normal;\n }\n"], ["\n align-items: center;\n background-color: ", ";\n display: flex;\n flex: 1 auto;\n justify-content: flex-start;\n overflow: hidden;\n min-height: 56px !important;\n padding: ", " 10px 0;\n transition: ", "\n 250ms;\n\n /* Testing secondary nav fix ups */\n width: ", ";\n\n @media (min-width: ", ") {\n min-height: 64px !important;\n width: ", ";\n };\n\n .MuiListItemIcon-root {\n margin: ", " 0 0;\n }\n\n .MuiListItemText-root {\n align-items: center !important;\n color: ", ";\n display: flex;\n min-height: ", "px;\n max-height: ", ";\n text-decoration: none;\n text-dransform: none;\n transition: max-height\n ", "ms\n ", ";\n padding: 0;\n width: 100%;\n\n [theme.breakpoints.up('sm')] {\n max-height: ", ";\n }\n }\n\n .MuiListItemText-root .MuiTypography-root {\n white-space: normal;\n }\n"])), function (props) { return props.theme.palette.mode === 'dark'
|
|
20
19
|
? props.theme.palette.primary.main
|
|
21
|
-
: props.theme.palette.background.paper; }, function (props) { return props.theme.spacing(1); },
|
|
20
|
+
: props.theme.palette.background.paper; }, function (props) { return props.theme.spacing(1); }, function (props) { return props.isDrawerOpen
|
|
21
|
+
? "width\n ".concat(props.theme.transitions.duration.enteringScreen, "ms\n ").concat(props.theme.transitions.easing.easeOut, "\n 0")
|
|
22
|
+
: "width\n ".concat(props.theme.transitions.duration.leavingScreen, "ms\n ").concat(props.theme.transitions.easing.easeIn); }, function (props) { return props.isDrawerOpen ? DRAWER_WIDTH.Expanded : "calc(".concat(props.theme.spacing(7), " + 1px)"); }, function (props) { return props.theme.breakpoints.values.sm; }, function (props) { return props.isDrawerOpen ? DRAWER_WIDTH.Expanded : "calc(".concat(props.theme.spacing(8), " + 1px)"); }, function (props) { return props.theme.spacing(0.5); }, function (props) {
|
|
22
23
|
return props.theme.palette.mode === 'dark'
|
|
23
24
|
? props.theme.palette.primary.contrastText
|
|
24
25
|
: props.theme.palette.getContrastText(props.theme.palette.background.paper);
|
|
25
|
-
}, ICON.Height + 8, function (props) { return props.isDrawerOpen ? '200px' : "".concat(ICON.Height + 8, "px"); },
|
|
26
|
-
export var DrawerToggle = styled(IconButton)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n background: transparent;\n height: 44px;\n padding: 0 ", " !important;\n position: absolute;\n transform: translate(22px, calc(50% - 5.5px));\n transition: all
|
|
26
|
+
}, ICON.Height + 8, function (props) { return props.isDrawerOpen ? '200px' : "".concat(ICON.Height + 8, "px"); }, function (props) { return props.theme.transitions.duration.enteringScreen; }, function (props) { return props.theme.transitions.easing.easeOut; }, function (props) { return props.isDrawerOpen ? '200px' : "".concat(ICON.Height + 8, "px"); });
|
|
27
|
+
export var DrawerToggle = styled(IconButton)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n background: transparent;\n height: 44px;\n padding: 0 ", " !important;\n position: absolute;\n transform: translate(22px, calc(50% - 5.5px));\n transition: all\n ", "ms\n ", ";\n width: 44px;\n z-index: 10;\n\n @media (min-width: ", ") {\n padding: 0 ", " !important;\n }\n"], ["\n background: transparent;\n height: 44px;\n padding: 0 ", " !important;\n position: absolute;\n transform: translate(22px, calc(50% - 5.5px));\n transition: all\n ", "ms\n ", ";\n width: 44px;\n z-index: 10;\n\n @media (min-width: ", ") {\n padding: 0 ", " !important;\n }\n"])), function (props) { return props.theme.spacing(2); }, function (props) { return props.theme.transitions.duration.enteringScreen; }, function (props) { return props.theme.transitions.easing.easeOut; }, function (props) { return props.theme.breakpoints.values.sm; }, function (props) { return props.theme.spacing(2.5); });
|
|
27
28
|
export var DrawerToggleHitboxContent = styled('span')(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n background-color: ", ";\n border-radius: 50%;\n box-shadow: 5px 0 15px 0 rgb(0 0 0 / 10%);\n box-sizing: content-box;\n height: 1.75rem;\n padding: ", ";\n width: 1.75rem;\n"], ["\n background-color: ", ";\n border-radius: 50%;\n box-shadow: 5px 0 15px 0 rgb(0 0 0 / 10%);\n box-sizing: content-box;\n height: 1.75rem;\n padding: ", ";\n width: 1.75rem;\n"])), function (props) { return props.theme.palette.mode === 'dark'
|
|
28
29
|
? props.theme.palette.primary.main
|
|
29
30
|
: props.theme.palette.background.paper; }, function (props) { return props.theme.spacing(0.5); });
|
|
30
31
|
export var StyledAside = styled('aside')(templateObject_4 || (templateObject_4 = __makeTemplateObject([""], [""])));
|
|
31
|
-
export var StyledNav = styled('nav')(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n background-color: ", ";\n display: flex;\n flex: 1 auto;\n flex-direction: column;\n justify-content: flex-start;\n margin-top: -1px;\n overflow-x: hidden;\n overflow-y: auto;\n\n // Firefox and future scrollbars\n * & {\n scrollbar-width: thin;\n scrollbar-color: ", ";\n transition: backgroundColor
|
|
32
|
+
export var StyledNav = styled('nav')(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n background-color: ", ";\n display: flex;\n flex: 1 auto;\n flex-direction: column;\n justify-content: flex-start;\n margin-top: -1px;\n overflow-x: hidden;\n overflow-y: auto;\n\n // Firefox and future scrollbars\n * & {\n scrollbar-width: thin;\n scrollbar-color: ", ";\n transition: backgroundColor\n ", "ms\n ", ";\n }\n\n * &:hover {\n scrollbar-color: ", ";\n }\n\n // Webkit and fall back scrollbars\n ::-webkit-scrollbar {\n width: 8px;\n }\n\n ::-webkit-scrollbar-track {\n background-color: transparent;\n }\n\n ::-webkit-scrollbar-thumb {\n background-color: ", ";\n border-radius: 55px;\n transition: backgroundColor\n ", "ms\n ", ";\n }\n\n ::-webkit-scrollbar-thumb:hover {\n background-color: ", ";\n }\n"], ["\n background-color: ", ";\n display: flex;\n flex: 1 auto;\n flex-direction: column;\n justify-content: flex-start;\n margin-top: -1px;\n overflow-x: hidden;\n overflow-y: auto;\n\n // Firefox and future scrollbars\n * & {\n scrollbar-width: thin;\n scrollbar-color: ", ";\n transition: backgroundColor\n ", "ms\n ", ";\n }\n\n * &:hover {\n scrollbar-color: ", ";\n }\n\n // Webkit and fall back scrollbars\n ::-webkit-scrollbar {\n width: 8px;\n }\n\n ::-webkit-scrollbar-track {\n background-color: transparent;\n }\n\n ::-webkit-scrollbar-thumb {\n background-color: ", ";\n border-radius: 55px;\n transition: backgroundColor\n ", "ms\n ", ";\n }\n\n ::-webkit-scrollbar-thumb:hover {\n background-color: ", ";\n }\n"])), function (props) { return props.theme.palette.mode === 'dark'
|
|
32
33
|
? props.theme.palette.primary.main
|
|
33
34
|
: props.theme.palette.background.paper; }, function (props) {
|
|
34
35
|
return props.theme.palette.mode === 'dark'
|
|
35
36
|
? 'rgba(255, 255, 255, 0.12) transparent'
|
|
36
37
|
: 'rgba(0, 0, 0, 0.12) transparent';
|
|
37
|
-
},
|
|
38
|
+
}, function (props) { return props.theme.transitions.duration.enteringScreen; }, function (props) { return props.theme.transitions.easing.easeOut; }, function (props) {
|
|
38
39
|
return props.theme.palette.mode === 'dark'
|
|
39
40
|
? 'rgba(255, 255, 255, 0.24) transparent'
|
|
40
41
|
: 'rgba(0, 0, 0, 0.24) transparent';
|
|
@@ -42,7 +43,7 @@ export var StyledNav = styled('nav')(templateObject_5 || (templateObject_5 = __m
|
|
|
42
43
|
return props.theme.palette.mode === 'dark'
|
|
43
44
|
? 'rgba(255, 255, 255, 0.12)'
|
|
44
45
|
: 'rgba(0, 0, 0, 0.12)';
|
|
45
|
-
},
|
|
46
|
+
}, function (props) { return props.theme.transitions.duration.enteringScreen; }, function (props) { return props.theme.transitions.easing.easeOut; }, function (props) {
|
|
46
47
|
return props.theme.palette.mode === 'dark'
|
|
47
48
|
? 'rgba(255, 255, 255, 0.24)'
|
|
48
49
|
: 'rgba(0, 0, 0, 0.24)';
|
|
@@ -52,23 +53,23 @@ export var StyledNavSecondary = styled('nav')(templateObject_6 || (templateObjec
|
|
|
52
53
|
: props.theme.palette.background.paper; });
|
|
53
54
|
export var StyledDivider = styled('div', {
|
|
54
55
|
shouldForwardProp: function (prop) { return prop !== 'isDrawerOpen'; }
|
|
55
|
-
})(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n background-color: ", ";\n\n :before {\n background-color: ", ";\n border-radius: 55px;\n content: '';\n display: block;\n height: 2px;\n margin: auto;\n transition: all
|
|
56
|
+
})(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n background-color: ", ";\n\n :before {\n background-color: ", ";\n border-radius: 55px;\n content: '';\n display: block;\n height: 2px;\n margin: auto;\n transition: all\n ", "ms\n ", ";\n width: 66%;\n }\n"], ["\n background-color: ", ";\n\n :before {\n background-color: ", ";\n border-radius: 55px;\n content: '';\n display: block;\n height: 2px;\n margin: auto;\n transition: all\n ", "ms\n ", ";\n width: 66%;\n }\n"])), function (props) { return props.theme.palette.mode === 'dark'
|
|
56
57
|
? props.theme.palette.primary.main
|
|
57
58
|
: props.theme.palette.background.paper; }, function (props) {
|
|
58
59
|
return props.theme.palette.mode === 'dark'
|
|
59
60
|
? 'rgba(255, 255, 255, 0.075)'
|
|
60
61
|
: 'rgba(0, 0, 0, 0.075)';
|
|
61
|
-
},
|
|
62
|
+
}, function (props) { return props.theme.transitions.duration.enteringScreen; }, function (props) { return props.theme.transitions.easing.easeOut; });
|
|
62
63
|
export var DrawerShadow = styled(Box, {
|
|
63
64
|
shouldForwardProp: function (prop) { return prop !== 'isDrawerOpen'; }
|
|
64
|
-
})(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n background: rgba(0,0,0,0.125);\n content: '';\n display: block;\n filter: blur(13px);\n height: 100%;\n left: ", ";\n position: fixed;\n top: 0;\n transition: left
|
|
65
|
+
})(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n background: rgba(0,0,0,0.125);\n content: '';\n display: block;\n filter: blur(13px);\n height: 100%;\n left: ", ";\n position: fixed;\n top: 0;\n transition: left\n ", "ms\n ", ";\n visibility: visible;\n width: 40px;\n\n @media (min-width: ", ") {\n left: ", ";\n }\n"], ["\n background: rgba(0,0,0,0.125);\n content: '';\n display: block;\n filter: blur(13px);\n height: 100%;\n left: ", ";\n position: fixed;\n top: 0;\n transition: left\n ", "ms\n ", ";\n visibility: visible;\n width: 40px;\n\n @media (min-width: ", ") {\n left: ", ";\n }\n"])), function (props) { return props.isDrawerOpen
|
|
65
66
|
? "".concat(DRAWER_WIDTH.Expanded - 38, "px")
|
|
66
|
-
: "".concat(DRAWER_WIDTH.Collapsed - 41, "px"); },
|
|
67
|
+
: "".concat(DRAWER_WIDTH.Collapsed - 41, "px"); }, function (props) { return props.theme.transitions.duration.enteringScreen; }, function (props) { return props.theme.transitions.easing.easeOut; }, function (props) { return props.theme.breakpoints.values.sm; }, function (props) {
|
|
67
68
|
return props.isDrawerOpen
|
|
68
69
|
? "".concat(DRAWER_WIDTH.Expanded - 38, "px")
|
|
69
70
|
: "".concat(DRAWER_WIDTH.Collapsed - 33, "px");
|
|
70
71
|
});
|
|
71
|
-
export var NotchContainer = styled(Box)(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n display: flex;\n justify-content: flex-end;\n height: auto;\n margin-top: -", ";\n position: relative;\n transition: width
|
|
72
|
+
export var NotchContainer = styled(Box)(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n display: flex;\n justify-content: flex-end;\n height: auto;\n margin-top: -", ";\n position: relative;\n transition: width\n ", "ms\n ", ";\n width: 100%;\n z-index: 9;\n"], ["\n display: flex;\n justify-content: flex-end;\n height: auto;\n margin-top: -", ";\n position: relative;\n transition: width\n ", "ms\n ", ";\n width: 100%;\n z-index: 9;\n"])), function (props) { return props.theme.spacing(0.5); }, function (props) { return props.theme.transitions.duration.enteringScreen; }, function (props) { return props.theme.transitions.easing.easeOut; });
|
|
72
73
|
export var NotchBackground = styled(Box)(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n background-color: ", ";\n flex: 1;\n height: auto;\n width: auto;\n"], ["\n background-color: ", ";\n flex: 1;\n height: auto;\n width: auto;\n"])), function (props) { return props.theme.palette.mode === 'dark'
|
|
73
74
|
? props.theme.palette.primary.main
|
|
74
75
|
: props.theme.palette.background.paper; });
|
|
@@ -80,9 +81,9 @@ export var NotchSeemMask = styled(Box)(templateObject_12 || (templateObject_12 =
|
|
|
80
81
|
: props.theme.palette.background.paper; });
|
|
81
82
|
export var StyledDrawer = styled(Drawer, {
|
|
82
83
|
shouldForwardProp: function (prop) { return prop !== 'open'; }
|
|
83
|
-
})(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n box-shadow: none;\n box-sizing: border-box;\n flexshrink: 0;\n overflow-x: visible;\n
|
|
84
|
+
})(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n box-shadow: none;\n box-sizing: border-box;\n flexshrink: 0;\n overflow-x: visible;\n white-space: nowrap;\n width: ", ";\n transition: width\n ", "ms\n ", ";\n\n @media (min-width: ", ") {\n width: ", ";\n }\n\n .MuiDrawer-paper {\n background: transparent none;\n border: 0;\n box-shadow: none;\n color: ", ";\n overflow: visible !important;\n overflow-x: visible;\n transform: translateX(0) !important;\n transition: width\n ", "ms\n ", ";\n visibility: visible;\n width: ", ";\n [theme.breakpoints.up('sm')] {\n width: ", ";\n }\n }\n"], ["\n box-shadow: none;\n box-sizing: border-box;\n flexshrink: 0;\n overflow-x: visible;\n white-space: nowrap;\n width: ", ";\n transition: width\n ", "ms\n ", ";\n\n @media (min-width: ", ") {\n width: ", ";\n }\n\n .MuiDrawer-paper {\n background: transparent none;\n border: 0;\n box-shadow: none;\n color: ", ";\n overflow: visible !important;\n overflow-x: visible;\n transform: translateX(0) !important;\n transition: width\n ", "ms\n ", ";\n visibility: visible;\n width: ", ";\n [theme.breakpoints.up('sm')] {\n width: ", ";\n }\n }\n"])), function (props) { return !props.open ? "calc(".concat(props.theme.spacing(7), " + 1px)") : "".concat(DRAWER_WIDTH.Expanded, "px"); }, function (props) { return props.theme.transitions.duration.enteringScreen; }, function (props) { return props.theme.transitions.easing.easeOut; }, function (props) { return props.theme.breakpoints.values.sm; }, function (props) { return !props.open ? "calc(".concat(props.theme.spacing(8), " + 1px)") : "".concat(DRAWER_WIDTH.Expanded, "px"); }, function (props) {
|
|
84
85
|
return props.theme.palette.mode === 'dark'
|
|
85
86
|
? props.theme.palette.primary.contrastText
|
|
86
87
|
: props.theme.palette.getContrastText(props.theme.palette.background.paper);
|
|
87
|
-
},
|
|
88
|
+
}, function (props) { return props.theme.transitions.duration.enteringScreen; }, function (props) { return props.theme.transitions.easing.easeOut; }, function (props) { return !props.open ? "calc(".concat(props.theme.spacing(7), " + 1px)") : "".concat(DRAWER_WIDTH.Expanded, "px"); }, function (props) { return !props.open ? "calc(".concat(props.theme.spacing(8), " + 1px)") : "".concat(DRAWER_WIDTH.Expanded, "px"); });
|
|
88
89
|
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12, templateObject_13;
|
package/package.json
CHANGED
|
@@ -9,13 +9,14 @@
|
|
|
9
9
|
"components",
|
|
10
10
|
"ui"
|
|
11
11
|
],
|
|
12
|
-
"version": "1.6.0-beta.
|
|
12
|
+
"version": "1.6.0-beta.6",
|
|
13
13
|
"private": false,
|
|
14
14
|
"main": "index.js",
|
|
15
15
|
"module": "index.js",
|
|
16
16
|
"dependencies": {
|
|
17
17
|
"@emotion/react": "^11.7.1",
|
|
18
18
|
"@emotion/styled": "^11.6.0",
|
|
19
|
+
"@learningpool/design-tokens": "^1.1.0-beta.7",
|
|
19
20
|
"@learningpool/app-switcher": "1.1.0-beta.4",
|
|
20
21
|
"@mui/icons-material": "^5.8.4",
|
|
21
22
|
"@mui/material": "^5.8.5",
|
package/utils/constants.d.ts
CHANGED
package/utils/constants.js
CHANGED
|
@@ -1,97 +0,0 @@
|
|
|
1
|
-
var __assign = (this && this.__assign) || function () {
|
|
2
|
-
__assign = Object.assign || function(t) {
|
|
3
|
-
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
|
4
|
-
s = arguments[i];
|
|
5
|
-
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
|
|
6
|
-
t[p] = s[p];
|
|
7
|
-
}
|
|
8
|
-
return t;
|
|
9
|
-
};
|
|
10
|
-
return __assign.apply(this, arguments);
|
|
11
|
-
};
|
|
12
|
-
var __rest = (this && this.__rest) || function (s, e) {
|
|
13
|
-
var t = {};
|
|
14
|
-
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
|
|
15
|
-
t[p] = s[p];
|
|
16
|
-
if (s != null && typeof Object.getOwnPropertySymbols === "function")
|
|
17
|
-
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
|
|
18
|
-
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
|
|
19
|
-
t[p[i]] = s[p[i]];
|
|
20
|
-
}
|
|
21
|
-
return t;
|
|
22
|
-
};
|
|
23
|
-
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
24
|
-
import React, { useEffect } from 'react';
|
|
25
|
-
import { Avatar, Box, Typography, IconButton, Button, Link, List, ListItem, ListItemButton, ListItemIcon, ListItemText, Tooltip } from '../../../index';
|
|
26
|
-
import { useTheme } from '@mui/material/styles';
|
|
27
|
-
import EditIcon from '@mui/icons-material/Edit';
|
|
28
|
-
import GroupIcon from '@mui/icons-material/Group';
|
|
29
|
-
import BarChartIcon from '@mui/icons-material/BarChart';
|
|
30
|
-
import ArchiveIcon from '@mui/icons-material/Archive';
|
|
31
|
-
import LogoutIcon from '@mui/icons-material/Logout';
|
|
32
|
-
import { tooltipDelay } from '../../../utils/theme';
|
|
33
|
-
var AvatarPanel = function (props) {
|
|
34
|
-
var _a;
|
|
35
|
-
var theme = useTheme();
|
|
36
|
-
var avatarName = props.avatarName, editProfileText = props.editProfileText, logoutText = props.logoutText, rest = __rest(props, ["avatarName", "editProfileText", "logoutText"]);
|
|
37
|
-
useEffect(function () { return setAvatarInitials(handleAvatarInitials(avatarName)); }, [
|
|
38
|
-
avatarName
|
|
39
|
-
]);
|
|
40
|
-
var handleAvatarInitials = function (avatar) {
|
|
41
|
-
var _a, _b;
|
|
42
|
-
var firstInitial = avatar.split('')[0] || '';
|
|
43
|
-
var secondInitial = '';
|
|
44
|
-
if (((_a = avatarName.split(' ')) === null || _a === void 0 ? void 0 : _a.length) > 1) {
|
|
45
|
-
firstInitial = avatarName.split(' ')[0][0];
|
|
46
|
-
if (((_b = avatar.split(' ')[1]) === null || _b === void 0 ? void 0 : _b.length) > 0) {
|
|
47
|
-
secondInitial = avatar === null || avatar === void 0 ? void 0 : avatar.split(' ')[1][0];
|
|
48
|
-
}
|
|
49
|
-
}
|
|
50
|
-
return "".concat(firstInitial).concat(secondInitial);
|
|
51
|
-
};
|
|
52
|
-
var _b = React.useState((_a = handleAvatarInitials(avatarName)) !== null && _a !== void 0 ? _a : 'AN'), avatarInitials = _b[0], setAvatarInitials = _b[1];
|
|
53
|
-
return (_jsxs(Box, __assign({ style: {
|
|
54
|
-
alignItems: 'center',
|
|
55
|
-
backgroundColor: theme.palette.mode === 'dark'
|
|
56
|
-
? theme.palette.primary.dark
|
|
57
|
-
: '#E6EAF0',
|
|
58
|
-
boxSizing: 'border-box',
|
|
59
|
-
display: 'flex',
|
|
60
|
-
flexDirection: 'column',
|
|
61
|
-
height: '100%',
|
|
62
|
-
justifyContent: 'space-between',
|
|
63
|
-
overflow: 'hidden',
|
|
64
|
-
padding: theme.spacing(2),
|
|
65
|
-
width: '100%',
|
|
66
|
-
zIndex: '1'
|
|
67
|
-
} }, rest, { children: [_jsx(Tooltip, __assign({ title: logoutText !== null && logoutText !== void 0 ? logoutText : 'Log out', placement: 'bottom', enterDelay: tooltipDelay.start, leaveDelay: tooltipDelay.end }, { children: _jsx(IconButton, __assign({ style: {
|
|
68
|
-
left: theme.direction === 'rtl' ? theme.spacing(1) : 'auto',
|
|
69
|
-
position: 'absolute',
|
|
70
|
-
right: theme.direction === 'rtl' ? 'auto' : theme.spacing(1),
|
|
71
|
-
top: theme.spacing(1)
|
|
72
|
-
} }, { children: _jsx(LogoutIcon, {}) })) })), _jsxs(Box, __assign({ style: {
|
|
73
|
-
alignItems: 'center',
|
|
74
|
-
display: 'flex',
|
|
75
|
-
flexDirection: 'column'
|
|
76
|
-
} }, { children: [_jsx(Avatar, __assign({ style: {
|
|
77
|
-
fontSize: '3.75rem',
|
|
78
|
-
height: 150,
|
|
79
|
-
marginBottom: theme.spacing(2),
|
|
80
|
-
width: 150
|
|
81
|
-
} }, { children: avatarInitials })), _jsxs(Typography, __assign({ component: "h3", variant: "h4", style: {
|
|
82
|
-
marginBottom: theme.spacing(2)
|
|
83
|
-
} }, { children: [_jsx("span", __assign({ style: { fontWeight: 300 } }, { children: "Hi," })), " ", _jsx("strong", { children: avatarName.split(' ')[0] })] })), _jsxs(Box, __assign({ style: {
|
|
84
|
-
marginBottom: theme.spacing(1)
|
|
85
|
-
} }, { children: [_jsx(Button, __assign({ variant: 'contained', color: 'primary', size: 'medium', style: { marginRight: '0.5rem' } }, { children: "View Profile" })), _jsx(Tooltip, __assign({ title: editProfileText !== null && editProfileText !== void 0 ? editProfileText : 'Edit profile', placement: 'bottom', enterDelay: tooltipDelay.start, leaveDelay: tooltipDelay.end }, { children: _jsx(IconButton, { children: _jsx(EditIcon, {}) }) }))] }))] })), _jsxs(Box, __assign({ style: {
|
|
86
|
-
alignItems: 'center',
|
|
87
|
-
display: 'flex',
|
|
88
|
-
flexDirection: 'column'
|
|
89
|
-
} }, { children: [_jsxs(List, __assign({ style: { marginBottom: theme.spacing(2) } }, { children: [_jsx(ListItem, __assign({ disablePadding: true }, { children: _jsxs(ListItemButton, __assign({ component: Link, role: 'link' }, { children: [_jsx(ListItemIcon, __assign({ "aria-hidden": true, style: {
|
|
90
|
-
minWidth: theme.spacing(5)
|
|
91
|
-
} }, { children: _jsx(GroupIcon, {}) })), _jsx(ListItemText, { children: "My Team" })] })) })), _jsx(ListItem, __assign({ disablePadding: true }, { children: _jsxs(ListItemButton, __assign({ component: Link, role: 'link' }, { children: [_jsx(ListItemIcon, __assign({ "aria-hidden": true, style: {
|
|
92
|
-
minWidth: theme.spacing(5)
|
|
93
|
-
} }, { children: _jsx(BarChartIcon, {}) })), _jsx(ListItemText, { children: "My Reports" })] })) })), _jsx(ListItem, __assign({ disablePadding: true }, { children: _jsxs(ListItemButton, __assign({ component: Link, role: 'link' }, { children: [_jsx(ListItemIcon, __assign({ "aria-hidden": true, style: {
|
|
94
|
-
minWidth: theme.spacing(5)
|
|
95
|
-
} }, { children: _jsx(ArchiveIcon, {}) })), _jsx(ListItemText, { children: "Archived Playlists" })] })) }))] })), _jsx(Button, __assign({ variant: 'outlined', color: 'primary', size: 'medium' }, { children: "Admin Portal" }))] }))] })));
|
|
96
|
-
};
|
|
97
|
-
export default AvatarPanel;
|