@deix/rossini-core 0.6.1 → 1.0.0
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/lib/package.json +1 -1
- package/lib/src/components/buttons/Avatar/Avatar.d.ts +1 -1
- package/lib/src/components/buttons/Avatar/Avatar.d.ts.map +1 -1
- package/lib/src/components/buttons/Avatar/Avatar.js +9 -11
- package/lib/src/components/buttons/LanguageSelect/LanguageSelect.d.ts +2 -2
- package/lib/src/components/buttons/LanguageSelect/LanguageSelect.js +11 -11
- package/lib/src/components/layout/components/Footer/Footer.d.ts.map +1 -1
- package/lib/src/components/layout/components/Footer/Footer.js +8 -11
- package/lib/src/components/layout/components/Sidebar/Sidebar.d.ts +3 -3
- package/lib/src/components/layout/components/Sidebar/Sidebar.js +40 -40
- package/lib/src/components/layout/components/Topbar/Topbar.d.ts +3 -3
- package/lib/src/components/layout/components/Topbar/Topbar.js +5 -5
- package/lib/src/utils/hooks/index.d.ts +2 -2
- package/lib/src/utils/hooks/index.js +2 -2
- package/lib/src/utils/hooks/{useKeycloak.d.ts → useUserInfo.d.ts} +2 -3
- package/lib/src/utils/hooks/useUserInfo.d.ts.map +1 -0
- package/lib/src/utils/hooks/useUserInfo.js +32 -0
- package/lib/tsconfig.tsbuildinfo +1 -1
- package/package.json +1 -1
- package/lib/src/utils/hooks/useKeycloak.d.ts.map +0 -1
- package/lib/src/utils/hooks/useKeycloak.js +0 -30
package/lib/package.json
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Avatar.d.ts","sourceRoot":"","sources":["../../../../../src/components/buttons/Avatar/Avatar.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmB,MAAM,OAAO,CAAC;AAmBxC,MAAM,WAAW,WAAW;IAC1B;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,kBAAkB,CAAC,EAAE,MAAM,CAAC;CAC7B;AAED,eAAO,MAAM,MAAM,EAAE,KAAK,CAAC,EAAE,CAAC,WAAW,
|
|
1
|
+
{"version":3,"file":"Avatar.d.ts","sourceRoot":"","sources":["../../../../../src/components/buttons/Avatar/Avatar.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmB,MAAM,OAAO,CAAC;AAmBxC,MAAM,WAAW,WAAW;IAC1B;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,kBAAkB,CAAC,EAAE,MAAM,CAAC;CAC7B;AAED,eAAO,MAAM,MAAM,EAAE,KAAK,CAAC,EAAE,CAAC,WAAW,CA2ExC,CAAC"}
|
|
@@ -32,8 +32,7 @@ const link_1 = __importDefault(require("next/link"));
|
|
|
32
32
|
const Face_1 = __importDefault(require("@mui/icons-material/Face"));
|
|
33
33
|
const Logout_1 = __importDefault(require("@mui/icons-material/Logout"));
|
|
34
34
|
const material_1 = require("@mui/material");
|
|
35
|
-
const
|
|
36
|
-
const useKeycloak_1 = require("../../../utils/hooks/useKeycloak");
|
|
35
|
+
const useUserInfo_1 = require("../../../utils/hooks/useUserInfo");
|
|
37
36
|
const Avatar = ({ logoutUrl, accountSettingsUrl, }) => {
|
|
38
37
|
const muiTheme = (0, material_1.useTheme)();
|
|
39
38
|
// Menu
|
|
@@ -46,24 +45,23 @@ const Avatar = ({ logoutUrl, accountSettingsUrl, }) => {
|
|
|
46
45
|
setAnchorEl(null);
|
|
47
46
|
};
|
|
48
47
|
// User data
|
|
49
|
-
const
|
|
50
|
-
const { data: userInfo } = (0, useKeycloak_1.useUserInfo)(apiClient);
|
|
48
|
+
const { data: userInfo } = (0, useUserInfo_1.useUserInfo)();
|
|
51
49
|
return (react_1.default.createElement(react_1.default.Fragment, null,
|
|
52
|
-
react_1.default.createElement(material_1.Tooltip, { title: userInfo?.preferredUserName ||
|
|
53
|
-
react_1.default.createElement(material_1.Avatar, { alt: userInfo?.preferredUserName ||
|
|
50
|
+
react_1.default.createElement(material_1.Tooltip, { title: userInfo?.preferredUserName || 'Anonymous User' },
|
|
51
|
+
react_1.default.createElement(material_1.Avatar, { alt: userInfo?.preferredUserName || 'user-name', sx: {
|
|
54
52
|
width: 24,
|
|
55
53
|
height: 24,
|
|
56
54
|
bgcolor: muiTheme.palette.topbar.contrastText,
|
|
57
55
|
}, onClick: handleClick })),
|
|
58
56
|
react_1.default.createElement(material_1.Menu, { anchorEl: anchorEl, open: open, onClose: handleClose, anchorOrigin: {
|
|
59
|
-
vertical:
|
|
60
|
-
horizontal:
|
|
57
|
+
vertical: 'bottom',
|
|
58
|
+
horizontal: 'right',
|
|
61
59
|
}, transformOrigin: {
|
|
62
|
-
vertical:
|
|
63
|
-
horizontal:
|
|
60
|
+
vertical: 'top',
|
|
61
|
+
horizontal: 'right',
|
|
64
62
|
}, PaperProps: {
|
|
65
63
|
sx: {
|
|
66
|
-
padding:
|
|
64
|
+
padding: '4px',
|
|
67
65
|
},
|
|
68
66
|
} },
|
|
69
67
|
accountSettingsUrl && (react_1.default.createElement(link_1.default, { href: accountSettingsUrl },
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import { FunctionComponent } from
|
|
2
|
-
import { Language, Locale } from
|
|
1
|
+
import { FunctionComponent } from 'react';
|
|
2
|
+
import { Language, Locale } from '../../../types/languages';
|
|
3
3
|
export interface LanguageSelectProps {
|
|
4
4
|
/**
|
|
5
5
|
* Internationalization locale.
|
|
@@ -11,12 +11,12 @@ const Language_1 = __importDefault(require("@mui/icons-material/Language"));
|
|
|
11
11
|
const material_1 = require("@mui/material");
|
|
12
12
|
const languages_1 = require("../../../types/languages");
|
|
13
13
|
const translations_json_1 = __importDefault(require("./translations.json"));
|
|
14
|
-
const LanguageSelect = ({ locale =
|
|
14
|
+
const LanguageSelect = ({ locale = 'en', languages = [
|
|
15
15
|
{
|
|
16
|
-
id:
|
|
17
|
-
label:
|
|
18
|
-
countryCode:
|
|
19
|
-
MUILocale:
|
|
16
|
+
id: 'en',
|
|
17
|
+
label: 'English',
|
|
18
|
+
countryCode: 'us',
|
|
19
|
+
MUILocale: 'enUS',
|
|
20
20
|
},
|
|
21
21
|
], }) => {
|
|
22
22
|
const muiTheme = (0, material_1.useTheme)();
|
|
@@ -35,18 +35,18 @@ const LanguageSelect = ({ locale = "en", languages = [
|
|
|
35
35
|
};
|
|
36
36
|
const router = (0, router_1.useRouter)();
|
|
37
37
|
return (react_1.default.createElement(react_1.default.Fragment, null,
|
|
38
|
-
react_1.default.createElement(material_1.Tooltip, { title: translations_json_1.default[
|
|
38
|
+
react_1.default.createElement(material_1.Tooltip, { title: translations_json_1.default['tooltip'][locale] },
|
|
39
39
|
react_1.default.createElement(material_1.IconButton, { component: 'span', "aria-label": 'language', onClick: openOptions },
|
|
40
40
|
react_1.default.createElement(Language_1.default, { htmlColor: muiTheme.palette.topbar.contrastText }))),
|
|
41
41
|
react_1.default.createElement(material_1.Menu, { anchorEl: anchorEl, id: 'language-menu', open: open, onClose: closeOptions, onClick: closeOptions, anchorOrigin: {
|
|
42
|
-
vertical:
|
|
43
|
-
horizontal:
|
|
42
|
+
vertical: 'bottom',
|
|
43
|
+
horizontal: 'right',
|
|
44
44
|
}, transformOrigin: {
|
|
45
|
-
vertical:
|
|
46
|
-
horizontal:
|
|
45
|
+
vertical: 'top',
|
|
46
|
+
horizontal: 'right',
|
|
47
47
|
}, PaperProps: {
|
|
48
48
|
sx: {
|
|
49
|
-
padding:
|
|
49
|
+
padding: '4px',
|
|
50
50
|
},
|
|
51
51
|
} },
|
|
52
52
|
react_1.default.createElement(material_1.MenuList, { dense: true }, languages?.map((lang) => (react_1.default.createElement(link_1.default, { key: lang.id, href: router.asPath, locale: lang.id },
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Footer.d.ts","sourceRoot":"","sources":["../../../../../../src/components/layout/components/Footer/Footer.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AASzC,UAAU,eAAe;IACvB,IAAI,EAAE,MAAM,CAAC;IACb,OAAO,EAAE,MAAM,CAAC;CACjB;AAED,MAAM,WAAW,WAAW;IAC1B;;OAEG;IACH,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB;;OAEG;IACH,MAAM,CAAC,EAAE,eAAe,CAAC;IACzB;;OAEG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,QAAA,MAAM,MAAM,EAAE,KAAK,CAAC,EAAE,CAAC,WAAW,
|
|
1
|
+
{"version":3,"file":"Footer.d.ts","sourceRoot":"","sources":["../../../../../../src/components/layout/components/Footer/Footer.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AASzC,UAAU,eAAe;IACvB,IAAI,EAAE,MAAM,CAAC;IACb,OAAO,EAAE,MAAM,CAAC;CACjB;AAED,MAAM,WAAW,WAAW;IAC1B;;OAEG;IACH,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB;;OAEG;IACH,MAAM,CAAC,EAAE,eAAe,CAAC;IACzB;;OAEG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,QAAA,MAAM,MAAM,EAAE,KAAK,CAAC,EAAE,CAAC,WAAW,CAyEjC,CAAC;AAEF,eAAe,MAAM,CAAC"}
|
|
@@ -48,17 +48,14 @@ const Footer = ({ logo = react_1.default.createElement(DeixLogo_1.default, null)
|
|
|
48
48
|
react_1.default.createElement("a", { href: textURL, target: '_blank', rel: 'noreferrer', style: {
|
|
49
49
|
textDecoration: 'none',
|
|
50
50
|
color: muiTheme.palette.text.secondary,
|
|
51
|
-
} }, text)
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
uiInfo.version,
|
|
60
|
-
' ',
|
|
61
|
-
apiInfo ? `(${apiInfo.name} ${apiInfo.version})` : ''),
|
|
51
|
+
} }, text),
|
|
52
|
+
' ',
|
|
53
|
+
"| ",
|
|
54
|
+
uiInfo.name,
|
|
55
|
+
" ",
|
|
56
|
+
uiInfo.version,
|
|
57
|
+
' ',
|
|
58
|
+
apiInfo ? `(${apiInfo.name} ${apiInfo.version})` : '')),
|
|
62
59
|
children)));
|
|
63
60
|
};
|
|
64
61
|
exports.default = Footer;
|
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
import React, { ReactElement } from
|
|
2
|
-
import { Variant } from
|
|
3
|
-
import { Locale, StringTranslation } from
|
|
1
|
+
import React, { ReactElement } from 'react';
|
|
2
|
+
import { Variant } from '@mui/material/styles/createTypography';
|
|
3
|
+
import { Locale, StringTranslation } from '../../../../types/languages';
|
|
4
4
|
export interface SidebarLink {
|
|
5
5
|
/**
|
|
6
6
|
* Unique identifier of the link.
|
|
@@ -47,7 +47,7 @@ const Sidebar = ({ links, open, isMobile, logo, locale, onClose, }) => {
|
|
|
47
47
|
return (react_1.default.createElement(material_1.ListItemIcon, { color: color }, link.sidebarIcon ? (link.sidebarIcon(color)) : (react_1.default.createElement(ArrowRightOutlined_1.default, { htmlColor: color }))));
|
|
48
48
|
};
|
|
49
49
|
// Persist which items of the sidebar are open to avoid resetting on page change
|
|
50
|
-
const [sidebarItemOpen, setSidebarItemOpen] = (0, utils_1.usePersistedState)(
|
|
50
|
+
const [sidebarItemOpen, setSidebarItemOpen] = (0, utils_1.usePersistedState)('sidebarItemOpen', {});
|
|
51
51
|
const handleOpenSidebarItem = (item) => {
|
|
52
52
|
const oldOpenState = { ...sidebarItemOpen };
|
|
53
53
|
oldOpenState[item] =
|
|
@@ -81,26 +81,26 @@ const Sidebar = ({ links, open, isMobile, logo, locale, onClose, }) => {
|
|
|
81
81
|
}
|
|
82
82
|
})
|
|
83
83
|
.map((link) => {
|
|
84
|
-
const selected = link.path ===
|
|
85
|
-
? pathname ===
|
|
84
|
+
const selected = link.path === '/'
|
|
85
|
+
? pathname === '/'
|
|
86
86
|
: pathname.slice(1).startsWith(link.path.slice(1));
|
|
87
87
|
if (!link.subPages) {
|
|
88
88
|
return (react_1.default.createElement(link_1.default, { key: link.id, href: link.path },
|
|
89
89
|
react_1.default.createElement(material_1.ListItemButton, { selected: selected, style: {
|
|
90
|
-
paddingLeft: options.level === 1 && open ?
|
|
90
|
+
paddingLeft: options.level === 1 && open ? '32px' : '22px',
|
|
91
91
|
paddingTop: options.level === 1 ? 0 : 8,
|
|
92
92
|
paddingBottom: options.level === 1 ? 0 : 8,
|
|
93
|
-
borderTopRightRadius:
|
|
94
|
-
borderBottomRightRadius:
|
|
93
|
+
borderTopRightRadius: '20px',
|
|
94
|
+
borderBottomRightRadius: '20px',
|
|
95
95
|
} },
|
|
96
96
|
icons(link, selected),
|
|
97
97
|
react_1.default.createElement(material_1.ListItemText, { style: {
|
|
98
98
|
color: selected
|
|
99
99
|
? `${muiTheme.palette.sidebar.contrastText} !important`
|
|
100
100
|
: `${muiTheme.palette.sidebar.light} !important`,
|
|
101
|
-
marginLeft:
|
|
102
|
-
visibility:
|
|
103
|
-
}, disableTypography: true, primary: react_1.default.createElement(material_1.Typography, { variant: link.labelVariant ||
|
|
101
|
+
marginLeft: '-20px',
|
|
102
|
+
visibility: 'visible',
|
|
103
|
+
}, disableTypography: true, primary: react_1.default.createElement(material_1.Typography, { variant: link.labelVariant || 'h6', style: selected
|
|
104
104
|
? { color: muiTheme.palette.sidebar.contrastText }
|
|
105
105
|
: { color: muiTheme.palette.sidebar.light } }, (0, languages_1.isStringTranslation)(link.label)
|
|
106
106
|
? link.label[locale]
|
|
@@ -109,11 +109,11 @@ const Sidebar = ({ links, open, isMobile, logo, locale, onClose, }) => {
|
|
|
109
109
|
return (react_1.default.createElement("div", { key: link.id },
|
|
110
110
|
react_1.default.createElement(link_1.default, { href: link.path },
|
|
111
111
|
react_1.default.createElement(material_1.ListItemButton, { key: link.id, selected: selected, style: {
|
|
112
|
-
paddingLeft:
|
|
112
|
+
paddingLeft: '22px',
|
|
113
113
|
paddingTop: 8,
|
|
114
114
|
paddingBottom: 8,
|
|
115
|
-
borderTopRightRadius:
|
|
116
|
-
borderBottomRightRadius:
|
|
115
|
+
borderTopRightRadius: '20px',
|
|
116
|
+
borderBottomRightRadius: '20px',
|
|
117
117
|
}, onClick: (_evt) => {
|
|
118
118
|
if (!sidebarItemOpen[link.id]) {
|
|
119
119
|
handleOpenSidebarItem(link.id);
|
|
@@ -124,9 +124,9 @@ const Sidebar = ({ links, open, isMobile, logo, locale, onClose, }) => {
|
|
|
124
124
|
color: selected
|
|
125
125
|
? `${muiTheme.palette.sidebar.contrastText} !important`
|
|
126
126
|
: `${muiTheme.palette.sidebar.light} !important`,
|
|
127
|
-
marginLeft:
|
|
128
|
-
visibility:
|
|
129
|
-
}, disableTypography: true, primary: react_1.default.createElement(material_1.Typography, { variant: link.labelVariant ||
|
|
127
|
+
marginLeft: '-20px',
|
|
128
|
+
visibility: 'visible',
|
|
129
|
+
}, disableTypography: true, primary: react_1.default.createElement(material_1.Typography, { variant: link.labelVariant || 'h6', style: selected
|
|
130
130
|
? { color: muiTheme.palette.sidebar.contrastText }
|
|
131
131
|
: { color: muiTheme.palette.sidebar.light } }, (0, languages_1.isStringTranslation)(link.label)
|
|
132
132
|
? link.label[locale]
|
|
@@ -156,32 +156,32 @@ const Sidebar = ({ links, open, isMobile, logo, locale, onClose, }) => {
|
|
|
156
156
|
})
|
|
157
157
|
// .filter((l) => l.id !== 'settings')
|
|
158
158
|
.map((link) => {
|
|
159
|
-
const selected = link.path ===
|
|
160
|
-
? pathname ===
|
|
159
|
+
const selected = link.path === '/'
|
|
160
|
+
? pathname === '/'
|
|
161
161
|
: pathname.slice(1).startsWith(link.path.slice(1));
|
|
162
162
|
if (link.subPages) {
|
|
163
163
|
return (react_1.default.createElement("div", { key: link.id },
|
|
164
164
|
react_1.default.createElement(material_1.ListItemButton, { selected: selected, style: {
|
|
165
|
-
paddingLeft:
|
|
165
|
+
paddingLeft: '22px',
|
|
166
166
|
paddingTop: 8,
|
|
167
167
|
paddingBottom: 8,
|
|
168
|
-
borderTopRightRadius:
|
|
169
|
-
borderBottomRightRadius:
|
|
168
|
+
borderTopRightRadius: '20px',
|
|
169
|
+
borderBottomRightRadius: '20px',
|
|
170
170
|
}, onClick: (evt) => handleOpenSidebarMenu(link.id, evt) },
|
|
171
171
|
react_1.default.createElement(material_1.Tooltip, { title: (0, languages_1.isStringTranslation)(link.label)
|
|
172
172
|
? link.label[locale]
|
|
173
173
|
: link.label, placement: 'right', enterDelay: 600, enterNextDelay: 600, arrow: true }, icons(link, selected))),
|
|
174
174
|
react_1.default.createElement(material_1.Menu, { id: `${link.id}-subpages-menu`, anchorEl: subPagesMenuAnchorEl[link.id], open: Boolean(subPagesMenuAnchorEl[link.id]), onClose: (_evt) => handleCloseSidebarMenu(link.id), anchorOrigin: {
|
|
175
|
-
vertical:
|
|
176
|
-
horizontal:
|
|
175
|
+
vertical: 'top',
|
|
176
|
+
horizontal: 'right',
|
|
177
177
|
}, transformOrigin: {
|
|
178
|
-
vertical:
|
|
179
|
-
horizontal:
|
|
178
|
+
vertical: 'top',
|
|
179
|
+
horizontal: 'left',
|
|
180
180
|
}, PaperProps: {
|
|
181
181
|
sx: {
|
|
182
|
-
borderRadius:
|
|
183
|
-
padding:
|
|
184
|
-
overflow:
|
|
182
|
+
borderRadius: '2px',
|
|
183
|
+
padding: '2px',
|
|
184
|
+
overflow: 'visible',
|
|
185
185
|
},
|
|
186
186
|
} }, link.subPages.map((subPage) => (react_1.default.createElement(link_1.default, { key: subPage.id, href: subPage.path },
|
|
187
187
|
react_1.default.createElement(material_1.MenuItem, null,
|
|
@@ -197,11 +197,11 @@ const Sidebar = ({ links, open, isMobile, logo, locale, onClose, }) => {
|
|
|
197
197
|
else {
|
|
198
198
|
return (react_1.default.createElement(link_1.default, { key: link.id, href: link.path },
|
|
199
199
|
react_1.default.createElement(material_1.ListItemButton, { selected: selected, style: {
|
|
200
|
-
paddingLeft:
|
|
200
|
+
paddingLeft: '22px',
|
|
201
201
|
paddingTop: 8,
|
|
202
202
|
paddingBottom: 8,
|
|
203
|
-
borderTopRightRadius:
|
|
204
|
-
borderBottomRightRadius:
|
|
203
|
+
borderTopRightRadius: '20px',
|
|
204
|
+
borderBottomRightRadius: '20px',
|
|
205
205
|
} },
|
|
206
206
|
react_1.default.createElement(material_1.Tooltip, { title: (0, languages_1.isStringTranslation)(link.label)
|
|
207
207
|
? link.label[locale]
|
|
@@ -210,27 +210,27 @@ const Sidebar = ({ links, open, isMobile, logo, locale, onClose, }) => {
|
|
|
210
210
|
}));
|
|
211
211
|
}
|
|
212
212
|
};
|
|
213
|
-
return (react_1.default.createElement(material_1.Drawer, { anchor: 'left', onClose: onClose, open: open, variant: isMobile ?
|
|
213
|
+
return (react_1.default.createElement(material_1.Drawer, { anchor: 'left', onClose: onClose, open: open, variant: isMobile ? 'temporary' : 'permanent', sx: {
|
|
214
214
|
flexShrink: 0,
|
|
215
|
-
whiteSpace:
|
|
216
|
-
height:
|
|
215
|
+
whiteSpace: 'nowrap',
|
|
216
|
+
height: '100%',
|
|
217
217
|
width: {
|
|
218
|
-
xs: open ?
|
|
219
|
-
sm: open ?
|
|
220
|
-
md: open ?
|
|
218
|
+
xs: open ? '65%' : `${parseInt(muiTheme.spacing(10), 10) + 1}px`,
|
|
219
|
+
sm: open ? '50%' : `${parseInt(muiTheme.spacing(10), 10) + 1}px`,
|
|
220
|
+
md: open ? '300px' : `${parseInt(muiTheme.spacing(10), 10) + 1}px`,
|
|
221
221
|
},
|
|
222
222
|
}, PaperProps: {
|
|
223
223
|
sx: {
|
|
224
224
|
// pr: 1,
|
|
225
225
|
width: {
|
|
226
|
-
xs: open ?
|
|
227
|
-
sm: open ?
|
|
228
|
-
md: open ?
|
|
226
|
+
xs: open ? '65%' : `${parseInt(muiTheme.spacing(10), 10) + 1}px`,
|
|
227
|
+
sm: open ? '50%' : `${parseInt(muiTheme.spacing(10), 10) + 1}px`,
|
|
228
|
+
md: open ? '300px' : `${parseInt(muiTheme.spacing(10), 10) + 1}px`,
|
|
229
229
|
},
|
|
230
230
|
background: muiTheme.palette.sidebar.main,
|
|
231
231
|
},
|
|
232
232
|
} },
|
|
233
|
-
react_1.default.createElement(material_1.List, { style: { marginTop:
|
|
233
|
+
react_1.default.createElement(material_1.List, { style: { marginTop: '19px' } }, handler(links, { level: 0 })),
|
|
234
234
|
react_1.default.createElement("div", { style: { flexGrow: 1 } }),
|
|
235
235
|
logo));
|
|
236
236
|
};
|
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
import React from
|
|
2
|
-
import { Language, Locale } from
|
|
3
|
-
import { AvatarProps } from
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { Language, Locale } from '../../../../types/languages';
|
|
3
|
+
import { AvatarProps } from '../../../buttons/Avatar/Avatar';
|
|
4
4
|
interface TopbarProps {
|
|
5
5
|
/**
|
|
6
6
|
* If true the layout has a sidebar.
|
|
@@ -42,7 +42,7 @@ const Topbar = (props) => {
|
|
|
42
42
|
const { resolvedTheme, setTheme } = (0, next_themes_1.useTheme)();
|
|
43
43
|
const muiTheme = (0, material_1.useTheme)();
|
|
44
44
|
const SidebarIcon = open ? (react_1.default.createElement(MenuOpenTwoTone_1.default, { htmlColor: muiTheme.palette.topbar.contrastText })) : (react_1.default.createElement(MenuTwoTone_1.default, { htmlColor: muiTheme.palette.topbar.contrastText }));
|
|
45
|
-
const menuMessage = open ? translations_json_1.default[
|
|
45
|
+
const menuMessage = open ? translations_json_1.default['menuClose'][locale] : translations_json_1.default['menuOpen'][locale];
|
|
46
46
|
return (react_1.default.createElement(ElevationScroll_1.default, { ...props },
|
|
47
47
|
react_1.default.createElement(S.StyledAppBar, { position: 'static', theme: muiTheme },
|
|
48
48
|
react_1.default.createElement(material_1.Toolbar, null,
|
|
@@ -52,10 +52,10 @@ const Topbar = (props) => {
|
|
|
52
52
|
react_1.default.createElement(index_1.LanguageSelect, { locale: locale, languages: languages }),
|
|
53
53
|
react_1.default.createElement(material_1.IconButton, { component: 'span', "aria-label": 'user options' },
|
|
54
54
|
react_1.default.createElement(Avatar_1.Avatar, { ...avatar })),
|
|
55
|
-
react_1.default.createElement(material_1.Tooltip, { title: resolvedTheme ===
|
|
56
|
-
? translations_json_1.default[
|
|
57
|
-
: translations_json_1.default[
|
|
58
|
-
react_1.default.createElement(material_1.IconButton, { component: 'span', "aria-label": 'toggle dark mode', onClick: () => setTheme(resolvedTheme ===
|
|
55
|
+
react_1.default.createElement(material_1.Tooltip, { title: resolvedTheme === 'light'
|
|
56
|
+
? translations_json_1.default['enableDark'][locale]
|
|
57
|
+
: translations_json_1.default['disableDark'][locale] },
|
|
58
|
+
react_1.default.createElement(material_1.IconButton, { component: 'span', "aria-label": 'toggle dark mode', onClick: () => setTheme(resolvedTheme === 'light' ? 'dark' : 'light') },
|
|
59
59
|
react_1.default.createElement(ModeNight_1.default, { htmlColor: muiTheme.palette.topbar.contrastText })))))));
|
|
60
60
|
};
|
|
61
61
|
exports.default = Topbar;
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
export { default as useAPI } from './useAPI';
|
|
2
|
-
export { useUserInfo } from './
|
|
3
|
-
export type { UserInfo } from './
|
|
2
|
+
export { useUserInfo } from './useUserInfo';
|
|
3
|
+
export type { UserInfo } from './useUserInfo';
|
|
4
4
|
export { useLocale } from './useLocale';
|
|
5
5
|
export { default as usePersistedState } from './usePersistedState';
|
|
6
6
|
//# sourceMappingURL=index.d.ts.map
|
|
@@ -6,8 +6,8 @@ Object.defineProperty(exports, "__esModule", { value: true });
|
|
|
6
6
|
exports.usePersistedState = exports.useLocale = exports.useUserInfo = exports.useAPI = void 0;
|
|
7
7
|
var useAPI_1 = require("./useAPI");
|
|
8
8
|
Object.defineProperty(exports, "useAPI", { enumerable: true, get: function () { return __importDefault(useAPI_1).default; } });
|
|
9
|
-
var
|
|
10
|
-
Object.defineProperty(exports, "useUserInfo", { enumerable: true, get: function () { return
|
|
9
|
+
var useUserInfo_1 = require("./useUserInfo");
|
|
10
|
+
Object.defineProperty(exports, "useUserInfo", { enumerable: true, get: function () { return useUserInfo_1.useUserInfo; } });
|
|
11
11
|
var useLocale_1 = require("./useLocale");
|
|
12
12
|
Object.defineProperty(exports, "useLocale", { enumerable: true, get: function () { return useLocale_1.useLocale; } });
|
|
13
13
|
var usePersistedState_1 = require("./usePersistedState");
|
|
@@ -1,4 +1,3 @@
|
|
|
1
|
-
import { AxiosInstance } from 'axios';
|
|
2
1
|
export interface UserInfo {
|
|
3
2
|
/**
|
|
4
3
|
* The email address of the user.
|
|
@@ -13,5 +12,5 @@ export interface UserInfo {
|
|
|
13
12
|
*/
|
|
14
13
|
preferredUserName: string;
|
|
15
14
|
}
|
|
16
|
-
export declare const useUserInfo: (
|
|
17
|
-
//# sourceMappingURL=
|
|
15
|
+
export declare const useUserInfo: () => import("react-query").UseQueryResult<UserInfo, unknown>;
|
|
16
|
+
//# sourceMappingURL=useUserInfo.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"useUserInfo.d.ts","sourceRoot":"","sources":["../../../../src/utils/hooks/useUserInfo.ts"],"names":[],"mappings":"AAIA,MAAM,WAAW,QAAQ;IACvB;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,IAAI,EAAE,MAAM,CAAC;IACb;;OAEG;IACH,iBAAiB,EAAE,MAAM,CAAC;CAC3B;AAqBD,eAAO,MAAM,WAAW,+DAKpB,CAAC"}
|
|
@@ -0,0 +1,32 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
3
|
+
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
4
|
+
};
|
|
5
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
6
|
+
exports.useUserInfo = void 0;
|
|
7
|
+
const axios_1 = __importDefault(require("axios"));
|
|
8
|
+
const react_query_1 = require("react-query");
|
|
9
|
+
const getUserInfo = async () => {
|
|
10
|
+
const fetch = axios_1.default
|
|
11
|
+
.get('/oauth2/userinfo')
|
|
12
|
+
.then((result) => {
|
|
13
|
+
console.log('User Info', result.data);
|
|
14
|
+
return result.data;
|
|
15
|
+
})
|
|
16
|
+
.catch((err) => {
|
|
17
|
+
console.error('Could not get user info');
|
|
18
|
+
console.error(err);
|
|
19
|
+
return {
|
|
20
|
+
email: '',
|
|
21
|
+
user: 'anonymous',
|
|
22
|
+
preferredUserName: 'anonymous',
|
|
23
|
+
};
|
|
24
|
+
});
|
|
25
|
+
return await fetch;
|
|
26
|
+
};
|
|
27
|
+
const useUserInfo = () => (0, react_query_1.useQuery)('user-info', () => getUserInfo(), {
|
|
28
|
+
keepPreviousData: true,
|
|
29
|
+
staleTime: Infinity,
|
|
30
|
+
cacheTime: Infinity,
|
|
31
|
+
});
|
|
32
|
+
exports.useUserInfo = useUserInfo;
|