@hitachivantara/app-shell-ui 2.3.1 → 2.3.3
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/dist/components/AppShell/AppShell.js +16 -5
- package/dist/components/AppShell/AppShellContainer.js +75 -66
- package/dist/components/AppShell/AppShellRouter.js +98 -109
- package/dist/components/AppShellI18nProvider/AppShellI18nProvider.js +19 -25
- package/dist/components/AppShellProvider/AppShellProvider.js +84 -91
- package/dist/components/AppShellViewProvider/AppShellViewProvider.js +10 -7
- package/dist/components/ConfigIcon.js +13 -15
- package/dist/components/CustomHooksInitializer/CustomHooksInitializer.js +7 -7
- package/dist/components/GlobalStyles.js +11 -9
- package/dist/components/IconUiKit/IconUiKit.js +10 -8
- package/dist/components/InitErrorFallback/InitErrorFallback.js +31 -23
- package/dist/components/SnackbarProvider/SnackbarProvider.js +17 -20
- package/dist/components/layout/AppShellLayout.js +50 -65
- package/dist/components/layout/BrandLogo/BrandLogo.js +25 -35
- package/dist/components/layout/BrandLogo/logos.js +38 -55
- package/dist/components/layout/Header/Header.js +55 -74
- package/dist/components/layout/HeaderActions/AppSwitcherToggle/AppSwitcherToggle.js +66 -74
- package/dist/components/layout/HeaderActions/AppSwitcherToggle/styles.js +12 -12
- package/dist/components/layout/HeaderActions/ColorModeSwitcher.js +23 -26
- package/dist/components/layout/HeaderActions/DynamicAction.js +22 -21
- package/dist/components/layout/HeaderActions/HeaderActions.js +15 -22
- package/dist/components/layout/HeaderActions/HelpButton/HelpButton.js +22 -31
- package/dist/components/layout/HeaderActions/InternalAction/InternalAction.js +25 -36
- package/dist/components/layout/VerticalNavigation/NavigationCollapse.js +29 -34
- package/dist/components/layout/VerticalNavigation/NavigationHeader.js +18 -20
- package/dist/components/layout/VerticalNavigation/VerticalNavigation.js +96 -130
- package/dist/hooks/useClearLocationState.js +10 -12
- package/dist/hooks/useConditionsEvaluator.js +67 -81
- package/dist/hooks/useCustomEventListener.js +16 -28
- package/dist/hooks/useFilteredModel.js +30 -27
- package/dist/hooks/useLocalStorage.js +26 -26
- package/dist/hooks/useModelFromConfig.js +43 -39
- package/dist/hooks/useNavigationMenuItems.js +27 -30
- package/dist/hooks/useNotificationsEventListener.js +35 -42
- package/dist/hooks/useResizeObserver.js +13 -13
- package/dist/hooks/useThemeEventListener.js +17 -18
- package/dist/i18n/constants.js +5 -6
- package/dist/i18n/index.js +26 -20
- package/dist/i18n/useI18nInit.js +72 -66
- package/dist/index.js +4 -3
- package/dist/pages/ErrorPage/ErrorPage.js +33 -32
- package/dist/pages/ErrorPage/Footer.js +46 -55
- package/dist/pages/GenericError/CatServer.js +585 -569
- package/dist/pages/GenericError/GenericError.js +25 -26
- package/dist/pages/LoadingPage/LoadingPage.js +9 -17
- package/dist/pages/LoadingPage/index.js +4 -3
- package/dist/pages/NotFound/DogeSpace.js +505 -540
- package/dist/pages/NotFound/NotFound.js +17 -20
- package/dist/pages/NotFound/index.js +2 -4
- package/dist/pages/RootRoute.js +32 -19
- package/dist/providers/BannerProvider.js +98 -123
- package/dist/providers/LayoutProvider.js +26 -32
- package/dist/providers/NavigationProvider.js +96 -107
- package/dist/utils/CombinedProviders.js +12 -18
- package/dist/utils/documentUtil.js +12 -12
- package/dist/utils/filterModel.js +134 -170
- package/dist/utils/lazyImport.js +31 -36
- package/dist/utils/navigationUtil.js +68 -53
- package/dist/utils/processConfig.js +119 -153
- package/package.json +8 -8
- package/dist/components/IconUiKit/index.js +0 -6
- package/dist/pages/LoadingPage/styles.js +0 -30
|
@@ -1,158 +1,124 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
1
|
+
//#region src/utils/processConfig.ts
|
|
2
|
+
var generateKey = () => {
|
|
3
|
+
return `${Date.now()}-${Math.round(1e3 * Math.random())}`;
|
|
3
4
|
};
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
}
|
|
16
|
-
};
|
|
17
|
-
for (const view of views) {
|
|
18
|
-
processView(view);
|
|
19
|
-
}
|
|
20
|
-
return map;
|
|
5
|
+
var createRouteConditionsMap = (views) => {
|
|
6
|
+
const map = /* @__PURE__ */ new Map();
|
|
7
|
+
const processView = (view) => {
|
|
8
|
+
if (view.route && view.conditions) {
|
|
9
|
+
const normalizedRoute = view.route.replace(/^\//, "");
|
|
10
|
+
map.set(normalizedRoute, view.conditions);
|
|
11
|
+
}
|
|
12
|
+
if (view.views) for (const nestedView of view.views) processView(nestedView);
|
|
13
|
+
};
|
|
14
|
+
for (const view of views) processView(view);
|
|
15
|
+
return map;
|
|
21
16
|
};
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
}
|
|
46
|
-
}
|
|
47
|
-
return updatedMenu;
|
|
48
|
-
});
|
|
17
|
+
var applyViewConditionsToMenus = (menus, routeConditionsMap) => {
|
|
18
|
+
return menus.map((menu) => {
|
|
19
|
+
let updatedMenu = menu;
|
|
20
|
+
if (menu.target) {
|
|
21
|
+
const normalizedTarget = menu.target.replace(/^\//, "");
|
|
22
|
+
const viewConditions = routeConditionsMap.get(normalizedTarget);
|
|
23
|
+
if (viewConditions) {
|
|
24
|
+
const mergedConditions = [...menu.conditions || [], ...viewConditions];
|
|
25
|
+
if (mergedConditions.length > 0) updatedMenu = {
|
|
26
|
+
...menu,
|
|
27
|
+
conditions: mergedConditions
|
|
28
|
+
};
|
|
29
|
+
}
|
|
30
|
+
}
|
|
31
|
+
if (menu.submenus) {
|
|
32
|
+
const updatedSubmenus = applyViewConditionsToMenus(menu.submenus, routeConditionsMap);
|
|
33
|
+
if (updatedSubmenus !== menu.submenus) updatedMenu = {
|
|
34
|
+
...updatedMenu,
|
|
35
|
+
submenus: updatedSubmenus
|
|
36
|
+
};
|
|
37
|
+
}
|
|
38
|
+
return updatedMenu;
|
|
39
|
+
});
|
|
49
40
|
};
|
|
41
|
+
/**
|
|
42
|
+
* Process App Shell config into AppShellModel and adds key properties and globalIndex to conditions
|
|
43
|
+
* Returns AppShellModel with internal configuration logic
|
|
44
|
+
*/
|
|
50
45
|
function processConfig(appShellConfig) {
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
config.systemProviders = appShellConfig.systemProviders.map((provider) => ({
|
|
128
|
-
...provider,
|
|
129
|
-
key: generateKey()
|
|
130
|
-
}));
|
|
131
|
-
}
|
|
132
|
-
if (appShellConfig.providers) {
|
|
133
|
-
config.providers = appShellConfig.providers.map(
|
|
134
|
-
(provider) => registerElement(provider)
|
|
135
|
-
);
|
|
136
|
-
}
|
|
137
|
-
if (appShellConfig.services) {
|
|
138
|
-
const servicesModel = {};
|
|
139
|
-
for (const [serviceId, configs] of Object.entries(
|
|
140
|
-
appShellConfig.services
|
|
141
|
-
)) {
|
|
142
|
-
servicesModel[serviceId] = configs.map(
|
|
143
|
-
(serviceConfig) => registerElement(
|
|
144
|
-
serviceConfig
|
|
145
|
-
)
|
|
146
|
-
);
|
|
147
|
-
}
|
|
148
|
-
config.services = servicesModel;
|
|
149
|
-
}
|
|
150
|
-
return Object.freeze({
|
|
151
|
-
...config,
|
|
152
|
-
allConditions,
|
|
153
|
-
preloadedBundles: /* @__PURE__ */ new Map()
|
|
154
|
-
});
|
|
46
|
+
let globalIndex = 0;
|
|
47
|
+
const allConditions = [];
|
|
48
|
+
const registerElement = (configElement) => {
|
|
49
|
+
const key = generateKey();
|
|
50
|
+
const conditions = configElement.conditions?.map((condConfig) => {
|
|
51
|
+
const conditionModel = {
|
|
52
|
+
...condConfig,
|
|
53
|
+
globalIndex: globalIndex++
|
|
54
|
+
};
|
|
55
|
+
allConditions.push(conditionModel);
|
|
56
|
+
return conditionModel;
|
|
57
|
+
});
|
|
58
|
+
return {
|
|
59
|
+
...configElement,
|
|
60
|
+
key,
|
|
61
|
+
...conditions && { conditions }
|
|
62
|
+
};
|
|
63
|
+
};
|
|
64
|
+
const processViews = (viewsConfig) => {
|
|
65
|
+
if (!viewsConfig) return [];
|
|
66
|
+
return viewsConfig.map((viewConfig) => {
|
|
67
|
+
const viewModel = registerElement(viewConfig);
|
|
68
|
+
if (viewConfig.views) return {
|
|
69
|
+
...viewModel,
|
|
70
|
+
views: processViews(viewConfig.views)
|
|
71
|
+
};
|
|
72
|
+
return viewModel;
|
|
73
|
+
});
|
|
74
|
+
};
|
|
75
|
+
const processMenus = (menusConfig) => {
|
|
76
|
+
if (!menusConfig) return [];
|
|
77
|
+
return menusConfig.map((menuConfig) => {
|
|
78
|
+
const menuModel = registerElement(menuConfig);
|
|
79
|
+
if (menuConfig.submenus) return {
|
|
80
|
+
...menuModel,
|
|
81
|
+
submenus: processMenus(menuConfig.submenus)
|
|
82
|
+
};
|
|
83
|
+
return menuModel;
|
|
84
|
+
});
|
|
85
|
+
};
|
|
86
|
+
const config = { ...appShellConfig };
|
|
87
|
+
let viewsModel;
|
|
88
|
+
if (appShellConfig.mainPanel?.views) {
|
|
89
|
+
viewsModel = processViews(appShellConfig.mainPanel.views);
|
|
90
|
+
config.mainPanel = {
|
|
91
|
+
...appShellConfig.mainPanel,
|
|
92
|
+
views: viewsModel
|
|
93
|
+
};
|
|
94
|
+
}
|
|
95
|
+
if (appShellConfig.menu) {
|
|
96
|
+
let menusModel = processMenus(appShellConfig.menu);
|
|
97
|
+
if (viewsModel) {
|
|
98
|
+
const routeConditionsMap = createRouteConditionsMap(viewsModel);
|
|
99
|
+
menusModel = applyViewConditionsToMenus(menusModel, routeConditionsMap);
|
|
100
|
+
}
|
|
101
|
+
config.menu = menusModel;
|
|
102
|
+
}
|
|
103
|
+
if (appShellConfig.header?.actions) config.header = {
|
|
104
|
+
...appShellConfig.header,
|
|
105
|
+
actions: appShellConfig.header.actions.map((action) => registerElement(action))
|
|
106
|
+
};
|
|
107
|
+
if (appShellConfig.systemProviders) config.systemProviders = appShellConfig.systemProviders.map((provider) => ({
|
|
108
|
+
...provider,
|
|
109
|
+
key: generateKey()
|
|
110
|
+
}));
|
|
111
|
+
if (appShellConfig.providers) config.providers = appShellConfig.providers.map((provider) => registerElement(provider));
|
|
112
|
+
if (appShellConfig.services) {
|
|
113
|
+
const servicesModel = {};
|
|
114
|
+
for (const [serviceId, configs] of Object.entries(appShellConfig.services)) servicesModel[serviceId] = configs.map((serviceConfig) => registerElement(serviceConfig));
|
|
115
|
+
config.services = servicesModel;
|
|
116
|
+
}
|
|
117
|
+
return Object.freeze({
|
|
118
|
+
...config,
|
|
119
|
+
allConditions,
|
|
120
|
+
preloadedBundles: /* @__PURE__ */ new Map()
|
|
121
|
+
});
|
|
155
122
|
}
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
};
|
|
123
|
+
//#endregion
|
|
124
|
+
export { processConfig as default };
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@hitachivantara/app-shell-ui",
|
|
3
|
-
"version": "2.3.
|
|
3
|
+
"version": "2.3.3",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"private": false,
|
|
6
6
|
"author": "Hitachi Vantara UI Kit Team",
|
|
@@ -18,13 +18,13 @@
|
|
|
18
18
|
"@emotion/css": "^11.10.5",
|
|
19
19
|
"@emotion/react": "^11.10.5",
|
|
20
20
|
"@emotion/styled": "^11.10.5",
|
|
21
|
-
"@hitachivantara/app-shell-events": "^2.0.
|
|
21
|
+
"@hitachivantara/app-shell-events": "^2.0.5",
|
|
22
22
|
"@hitachivantara/app-shell-i18next": "^0.2.1",
|
|
23
|
-
"@hitachivantara/app-shell-navigation": "^2.1.
|
|
24
|
-
"@hitachivantara/app-shell-services": "^2.0.
|
|
25
|
-
"@hitachivantara/app-shell-shared": "^2.3.
|
|
26
|
-
"@hitachivantara/uikit-react-core": "^6.
|
|
27
|
-
"@hitachivantara/uikit-react-icons": "^6.0.
|
|
23
|
+
"@hitachivantara/app-shell-navigation": "^2.1.13",
|
|
24
|
+
"@hitachivantara/app-shell-services": "^2.0.4",
|
|
25
|
+
"@hitachivantara/app-shell-shared": "^2.3.2",
|
|
26
|
+
"@hitachivantara/uikit-react-core": "^6.9.0",
|
|
27
|
+
"@hitachivantara/uikit-react-icons": "^6.0.5",
|
|
28
28
|
"@mui/material": "^7.0.2",
|
|
29
29
|
"i18next": "^24.2.2",
|
|
30
30
|
"i18next-browser-languagedetector": "^8.0.3",
|
|
@@ -53,7 +53,7 @@
|
|
|
53
53
|
"access": "public",
|
|
54
54
|
"directory": "package"
|
|
55
55
|
},
|
|
56
|
-
"gitHead": "
|
|
56
|
+
"gitHead": "65c4f4394e8f8c7cccb58203e1c08c6832434638",
|
|
57
57
|
"types": "./dist/index.d.ts",
|
|
58
58
|
"module": "dist/index.js"
|
|
59
59
|
}
|
|
@@ -1,30 +0,0 @@
|
|
|
1
|
-
import styled from "@emotion/styled";
|
|
2
|
-
import { theme, HvLoading } from "@hitachivantara/uikit-react-core";
|
|
3
|
-
const calcHeight = ({
|
|
4
|
-
showHeaderSubMenu,
|
|
5
|
-
isCompactMode
|
|
6
|
-
}) => {
|
|
7
|
-
if (showHeaderSubMenu && !isCompactMode) {
|
|
8
|
-
return `calc(100vh - (${theme.header.height} + ${theme.header.secondLevelHeight}px + ${theme.space.lg} + ${theme.space.lg}))`;
|
|
9
|
-
}
|
|
10
|
-
return `calc(100vh - (${theme.header.height} + ${theme.space.lg} + ${theme.space.lg}))`;
|
|
11
|
-
};
|
|
12
|
-
const StyledLoadingPage = styled("div")(
|
|
13
|
-
{
|
|
14
|
-
flex: 1,
|
|
15
|
-
display: "flex",
|
|
16
|
-
flexDirection: "column",
|
|
17
|
-
marginTop: theme.space.lg
|
|
18
|
-
},
|
|
19
|
-
(props) => ({ height: calcHeight(props) })
|
|
20
|
-
);
|
|
21
|
-
const Loading = styled(HvLoading)({
|
|
22
|
-
display: "flex",
|
|
23
|
-
alignItems: "center",
|
|
24
|
-
width: "100%",
|
|
25
|
-
height: "100%"
|
|
26
|
-
});
|
|
27
|
-
export {
|
|
28
|
-
Loading,
|
|
29
|
-
StyledLoadingPage
|
|
30
|
-
};
|