@learningpool/ui 1.4.0-beta.3 → 1.4.0-beta.4
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.
|
@@ -9,11 +9,11 @@ var __assign = (this && this.__assign) || function () {
|
|
|
9
9
|
};
|
|
10
10
|
return __assign.apply(this, arguments);
|
|
11
11
|
};
|
|
12
|
-
import { jsx as _jsx, jsxs as _jsxs
|
|
12
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
13
13
|
import React from 'react';
|
|
14
14
|
import { styled, useTheme } from '@mui/material/styles';
|
|
15
15
|
import useMediaQuery from '@mui/material/useMediaQuery';
|
|
16
|
-
import { Avatar, Drawer as SSDrawer, List, ListItemText } from '../../../index';
|
|
16
|
+
import { Avatar, Drawer as SSDrawer, Modal, List, ListItemText } from '../../../index';
|
|
17
17
|
import { Box, Link } from '@mui/material';
|
|
18
18
|
import MailIcon from '@mui/icons-material/Mail';
|
|
19
19
|
import { StreamSuiteLogo } from '../../../assets/Images';
|
|
@@ -44,13 +44,7 @@ var VerticalNavigation = function (props) {
|
|
|
44
44
|
}; };
|
|
45
45
|
var listContent = function () {
|
|
46
46
|
var _a, _b, _c, _d;
|
|
47
|
-
return (_jsxs(Box
|
|
48
|
-
// onClick={toggleDrawer(false)}
|
|
49
|
-
// onKeyDown={toggleDrawer(false)}
|
|
50
|
-
, __assign({
|
|
51
|
-
// onClick={toggleDrawer(false)}
|
|
52
|
-
// onKeyDown={toggleDrawer(false)}
|
|
53
|
-
sx: {
|
|
47
|
+
return (_jsxs(Box, __assign({ sx: {
|
|
54
48
|
display: 'flex',
|
|
55
49
|
flex: '1 auto',
|
|
56
50
|
flexDirection: 'column',
|
|
@@ -72,7 +66,7 @@ var VerticalNavigation = function (props) {
|
|
|
72
66
|
height: 'auto',
|
|
73
67
|
marginTop: "-".concat(theme.spacing(0.5)),
|
|
74
68
|
position: 'relative',
|
|
75
|
-
transition: 'width 225ms cubic-bezier(0, 0, 0.
|
|
69
|
+
transition: 'width 225ms cubic-bezier(0.4, 0.0, 0.6, 1) 0ms !important',
|
|
76
70
|
width: '100%',
|
|
77
71
|
zIndex: '-1'
|
|
78
72
|
} }, { children: [_jsx("div", { style: {
|
|
@@ -103,58 +97,65 @@ var VerticalNavigation = function (props) {
|
|
|
103
97
|
width: '0',
|
|
104
98
|
height: '0',
|
|
105
99
|
position: 'absolute'
|
|
106
|
-
} }, { children: _jsx("clipPath", __assign({ id: 'notch', clipPathUnits: 'objectBoundingBox' }, { children: _jsx("path", { d: 'M1,0 H0 v1 h1 v-0.105 c-0.017,-0.074,-0.109,-0.132,-0.168,-0.146 l-0.008,-0.002 a0.5,0.265,0,0,1,0.006,-0.493 c0.062,-0.015,0.16,-0.079,0.169,-0.158 V0' }) })) })),
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
100
|
+
} }, { children: _jsx("clipPath", __assign({ id: 'notch', clipPathUnits: 'objectBoundingBox' }, { children: _jsx("path", { d: 'M1,0 H0 v1 h1 v-0.105 c-0.017,-0.074,-0.109,-0.132,-0.168,-0.146 l-0.008,-0.002 a0.5,0.265,0,0,1,0.006,-0.493 c0.062,-0.015,0.16,-0.079,0.169,-0.158 V0' }) })) })), _jsxs("nav", __assign({ style: {
|
|
101
|
+
display: 'flex',
|
|
102
|
+
flex: '1 auto',
|
|
103
|
+
flexDirection: 'column',
|
|
104
|
+
justifyContent: 'flex-start'
|
|
105
|
+
} }, { children: [_jsx(List, __assign({ sx: {
|
|
106
|
+
height: '100%',
|
|
107
|
+
backgroundColor: theme.palette.mode === 'dark'
|
|
108
|
+
? theme.palette.primary.main
|
|
109
|
+
: theme.palette.background.paper,
|
|
110
|
+
marginTop: "-".concat(theme.spacing(0.5)),
|
|
111
|
+
overflow: 'hidden'
|
|
112
|
+
} }, { children: items === null || items === void 0 ? void 0 : items.map(function (item, index) {
|
|
113
|
+
var _a;
|
|
114
|
+
return (_jsx(ListItem, __assign({ disablePadding: true }, { children: _jsxs(ListItemButton
|
|
115
|
+
// @ts-expect-error
|
|
116
|
+
, __assign({
|
|
117
|
+
// @ts-expect-error
|
|
118
|
+
component: Link, onClick: item.onClick, isActive: item.isActive }, { children: [_jsx(ListItemIcon, { children: (_a = item.icon) !== null && _a !== void 0 ? _a : _jsx(MailIcon, {}) }), _jsx(ListItemText, { primary: item.label })] }), item.label) })));
|
|
119
|
+
}) })), _jsxs(List, __assign({ sx: {
|
|
120
|
+
marginTop: 'auto',
|
|
121
|
+
backgroundColor: theme.palette.mode === 'dark'
|
|
122
|
+
? theme.palette.primary.main
|
|
123
|
+
: theme.palette.background.paper
|
|
124
|
+
} }, { children: [hasStreamHome
|
|
125
|
+
? (_jsx(ListItem, __assign({ disablePadding: true }, { children: _jsxs(ListItemButton, __assign({ sx: {
|
|
126
|
+
minHeight: 48,
|
|
127
|
+
justifyContent: isDrawerOpen ? 'initial' : 'center'
|
|
128
|
+
} }, { children: [_jsx(ListItemIcon, __assign({ sx: {
|
|
129
|
+
minWidth: 0,
|
|
130
|
+
mr: isDrawerOpen ? 2.5 : 'auto',
|
|
131
|
+
justifyContent: 'center'
|
|
132
|
+
} }, { children: _jsx(AppSwitcher, { apiKey: (_b = (_a = process === null || process === void 0 ? void 0 : process.env) === null || _a === void 0 ? void 0 : _a.REACT_APP_STREAM_HOME_API_KEY) !== null && _b !== void 0 ? _b : '7wxswYRq238tj65RVina32VSzmpGamju7Edvbrab', baseUrl: (_d = (_c = process === null || process === void 0 ? void 0 : process.env) === null || _c === void 0 ? void 0 : _c.REACT_APP_STREAM_HOME_API_URL) !== null && _d !== void 0 ? _d : 'https://6cqjg9ua08.execute-api.us-east-1.amazonaws.com/dev-api', token: 'hfcfgcgfcgfhcfhgcfg' }) })), _jsx(ListItemText, { primary: 'App switcher', sx: { opacity: isDrawerOpen ? 1 : 0 } })] })) })))
|
|
133
|
+
: null, secondaryItems === null || secondaryItems === void 0 ? void 0 : secondaryItems.map(function (item, index) {
|
|
134
|
+
var _a;
|
|
135
|
+
return (_jsx(ListItem, { children: _jsxs(ListItemButton
|
|
136
|
+
// @ts-expect-error
|
|
137
|
+
, __assign({
|
|
138
|
+
// @ts-expect-error
|
|
139
|
+
component: Link, onClick: item.onClick, isActive: item.isActive }, { children: [_jsx(ListItemIcon, { children: (_a = item.icon) !== null && _a !== void 0 ? _a : _jsx(MailIcon, {}) }), _jsx(ListItemText, { primary: item.label })] }), item.label) }));
|
|
140
|
+
}), _jsx(ListItem, __assign({ disablePadding: true, sx: {
|
|
141
|
+
overflow: 'hidden'
|
|
142
|
+
} }, { children: _jsxs(ListItemAvatar
|
|
139
143
|
// @ts-expect-error
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
? theme.palette.primary.contrastText
|
|
148
|
-
: theme.palette.primary.main
|
|
149
|
-
} }, { children: [avatarName.split(' ')[0][0], avatarName.split(' ')[1][0]] })) })), _jsx(ListItemText, { primary: avatarName, sx: {
|
|
150
|
-
opacity: isDrawerOpen ? 1 : 0,
|
|
151
|
-
textAlign: 'left'
|
|
152
|
-
} })] })) }))] }))] })));
|
|
144
|
+
, __assign({
|
|
145
|
+
// @ts-expect-error
|
|
146
|
+
component: Link }, { children: [_jsx(ListItemIcon, __assign({ sx: { mr: 3 } }, { children: _jsxs(Avatar, __assign({ sx: {
|
|
147
|
+
bgcolor: theme.palette.mode === 'dark'
|
|
148
|
+
? theme.palette.primary.contrastText
|
|
149
|
+
: theme.palette.primary.main
|
|
150
|
+
} }, { children: [avatarName.split(' ')[0][0], avatarName.split(' ')[1][0]] })) })), _jsx(ListItemText, { primary: avatarName })] })) }))] }))] }))] })));
|
|
153
151
|
};
|
|
154
|
-
return (_jsxs(
|
|
152
|
+
return (_jsxs("aside", { children: [_jsx("div", { className: 'drawerShadow', "aria-hidden": 'true', style: {
|
|
155
153
|
position: 'fixed',
|
|
156
154
|
top: '0',
|
|
157
|
-
left:
|
|
155
|
+
left: isDrawerOpen
|
|
156
|
+
? '212px'
|
|
157
|
+
: (isMediumAndUp ? '27px' : '19px'),
|
|
158
|
+
transition: 'left 225ms cubic-bezier(0.4, 0.0, 0.6, 1) 0ms',
|
|
158
159
|
content: '',
|
|
159
160
|
background: 'rgba(0,0,0,0.125)',
|
|
160
161
|
height: '100%',
|
|
@@ -162,33 +163,29 @@ var VerticalNavigation = function (props) {
|
|
|
162
163
|
display: 'block',
|
|
163
164
|
visibility: 'visible',
|
|
164
165
|
filter: 'blur(13px)'
|
|
165
|
-
} }), _jsx(
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
|
|
187
|
-
|
|
188
|
-
|
|
189
|
-
overflow: 'hidden',
|
|
190
|
-
transition: 'width 225ms cubic-bezier(0, 0, 0.2, 1) 0ms !important'
|
|
191
|
-
}
|
|
192
|
-
} }, { children: listContent() }))] }));
|
|
166
|
+
} }), _jsx(Modal, __assign({ keepMounted: true, disablePortal: true, open: isDrawerOpen, onClose: toggleDrawer(false) }, { children: _jsxs(Drawer, __assign({ "aria-label": 'Navigation Menu', id: 'vertical-navigation', anchor: 'left', open: isDrawerOpen, onClose: toggleDrawer(false), ModalProps: {
|
|
167
|
+
keepMounted: true
|
|
168
|
+
}, variant: 'permanent', sx: {
|
|
169
|
+
'.MuiDrawer-paper': {
|
|
170
|
+
background: 'transparent none',
|
|
171
|
+
boxShadow: 'none',
|
|
172
|
+
visibility: 'visible !important',
|
|
173
|
+
transform: 'translateX(0) !important',
|
|
174
|
+
overflow: 'hidden',
|
|
175
|
+
transition: 'width 225ms cubic-bezier(0.4, 0.0, 0.6, 1) 0ms !important'
|
|
176
|
+
}
|
|
177
|
+
} }, { children: [_jsx(DrawerToggle, __assign({ onClick: toggleDrawer(!isDrawerOpen), "aria-label": isDrawerOpen ? 'Close Navigation Menu' : 'Open Navigation Menu', "aria-expanded": isDrawerOpen ? 'true' : 'false', "aria-controls": "vertical-navigation", sx: {
|
|
178
|
+
left: isDrawerOpen ? '229px' : (isMediumAndUp ? '44px' : '36px')
|
|
179
|
+
} }, { children: _jsx(DrawerToggleHitboxContent, { children: isDrawerOpen
|
|
180
|
+
? (_jsx(ChevronLeft, { sx: {
|
|
181
|
+
fontSize: '1.75rem',
|
|
182
|
+
height: '1.75rem',
|
|
183
|
+
width: '1.75rem'
|
|
184
|
+
} }))
|
|
185
|
+
: (_jsx(ChevronRight, { sx: {
|
|
186
|
+
fontSize: '1.75rem',
|
|
187
|
+
height: '1.75rem',
|
|
188
|
+
width: '1.75rem'
|
|
189
|
+
} })) }) })), listContent()] })) }))] }));
|
|
193
190
|
};
|
|
194
191
|
export default VerticalNavigation;
|
|
@@ -23,31 +23,32 @@ export var paperStyles = function (theme) { return ({
|
|
|
23
23
|
color: theme.palette.mode === 'dark'
|
|
24
24
|
? theme.palette.primary.contrastText
|
|
25
25
|
: theme.palette.getContrastText(theme.palette.background.paper),
|
|
26
|
-
boxShadow: 'none'
|
|
26
|
+
boxShadow: 'none',
|
|
27
|
+
overflow: 'visible !important'
|
|
27
28
|
}); };
|
|
28
29
|
export var openedMixin = function (theme) { return ({
|
|
29
30
|
width: DRAWER_WIDTH.Expanded,
|
|
30
|
-
transition: 'width 225ms cubic-bezier(0, 0, 0.
|
|
31
|
-
overflowX: '
|
|
31
|
+
transition: 'width 225ms cubic-bezier(0.4, 0.0, 0.6, 1) 0ms !important',
|
|
32
|
+
overflowX: 'visible',
|
|
32
33
|
boxShadow: 'none'
|
|
33
34
|
}); };
|
|
34
35
|
export var closedMixin = function (theme) {
|
|
35
36
|
var _a;
|
|
36
37
|
return (_a = {
|
|
37
|
-
transition: 'width 225ms cubic-bezier(0, 0, 0.
|
|
38
|
+
transition: 'width 225ms cubic-bezier(0.4, 0.0, 0.6, 1) 0ms !important',
|
|
38
39
|
width: "calc(".concat(theme.spacing(7), " + 1px)")
|
|
39
40
|
},
|
|
40
41
|
_a[theme.breakpoints.up('sm')] = {
|
|
41
42
|
width: "calc(".concat(theme.spacing(8), " + 1px)")
|
|
42
43
|
},
|
|
43
|
-
_a.overflowX = '
|
|
44
|
+
_a.overflowX = 'visible',
|
|
44
45
|
_a.boxShadow = theme.shadows[1],
|
|
45
46
|
_a);
|
|
46
47
|
};
|
|
47
48
|
export var DrawerHeader = styled('div')(function (_a) {
|
|
48
49
|
var _b;
|
|
49
50
|
var theme = _a.theme;
|
|
50
|
-
return (__assign(__assign({ display: 'flex', alignItems: 'center', justifyContent: 'flex-start', padding: "".concat(theme.spacing(1), " 10px 0") }, theme.mixins.toolbar), (_b = { backgroundColor: theme.palette.mode === 'dark'
|
|
51
|
+
return (__assign(__assign({ display: 'flex', alignItems: 'center', justifyContent: 'flex-start', overflow: 'hidden', padding: "".concat(theme.spacing(1), " 10px 0") }, theme.mixins.toolbar), (_b = { backgroundColor: theme.palette.mode === 'dark'
|
|
51
52
|
? theme.palette.primary.main
|
|
52
53
|
: theme.palette.background.paper, minHeight: '56px !important' }, _b[theme.breakpoints.up('sm')] = {
|
|
53
54
|
minHeight: '64px !important'
|
|
@@ -85,7 +86,7 @@ export var DrawerToggle = styled(IconButton)(function (_a) {
|
|
|
85
86
|
paddingRight: theme.spacing(2.5),
|
|
86
87
|
top: '88.5px'
|
|
87
88
|
},
|
|
88
|
-
_b.transition = '
|
|
89
|
+
_b.transition = 'all 225ms cubic-bezier(0.4, 0.0, 0.6, 1) 0ms !important',
|
|
89
90
|
_b);
|
|
90
91
|
});
|
|
91
92
|
export var DrawerToggleHitboxContent = styled('span')(function (_a) {
|
package/index.d.ts
CHANGED
|
@@ -10,6 +10,7 @@ export { default as SideInSide } from './components/pages/SideInSide/SideInSide'
|
|
|
10
10
|
export { default as ErrorPage } from './components/pages/ErrorPage/ErrorPage';
|
|
11
11
|
export { default as AvatarGroup } from '@mui/material/AvatarGroup';
|
|
12
12
|
export { default as Backdrop } from '@mui/material/Backdrop';
|
|
13
|
+
export { default as Modal } from '@mui/material/Modal';
|
|
13
14
|
export { default as CircularProgress } from '@mui/material/CircularProgress';
|
|
14
15
|
export { default as LinearProgress } from '@mui/material/LinearProgress';
|
|
15
16
|
export { default as ListItem } from '@mui/material/ListItem';
|
package/index.js
CHANGED
|
@@ -12,6 +12,7 @@ export { default as ErrorPage } from './components/pages/ErrorPage/ErrorPage';
|
|
|
12
12
|
// Straight through MUI
|
|
13
13
|
export { default as AvatarGroup } from '@mui/material/AvatarGroup';
|
|
14
14
|
export { default as Backdrop } from '@mui/material/Backdrop';
|
|
15
|
+
export { default as Modal } from '@mui/material/Modal';
|
|
15
16
|
export { default as CircularProgress } from '@mui/material/CircularProgress';
|
|
16
17
|
export { default as LinearProgress } from '@mui/material/LinearProgress';
|
|
17
18
|
export { default as ListItem } from '@mui/material/ListItem';
|