@j2inn/fin5-ui-utils 4.0.0 → 5.0.1

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.
Files changed (204) hide show
  1. package/README.md +5 -5
  2. package/dist/fantomProps/createFin5Props/index.d.ts +12 -12
  3. package/dist/fantomProps/createFin5Props/index.js +146 -146
  4. package/dist/fantomProps/createFin5Props/runCreateFin5Props.d.ts +2 -2
  5. package/dist/fantomProps/createFin5Props/runCreateFin5Props.js +16 -16
  6. package/dist/fantomProps/fantomPropsToObject.d.ts +8 -8
  7. package/dist/fantomProps/fantomPropsToObject.js +183 -183
  8. package/dist/fantomProps/generateJsonFromFantomPropsFile.d.ts +4 -4
  9. package/dist/fantomProps/generateJsonFromFantomPropsFile.js +41 -41
  10. package/dist/fantomProps/localePropsToJson.d.ts +1 -1
  11. package/dist/fantomProps/localePropsToJson.js +50 -50
  12. package/dist/fantomProps/readFantomPropsFile.d.ts +5 -5
  13. package/dist/fantomProps/readFantomPropsFile.js +61 -61
  14. package/dist/fin5Top/fin5FileUpload.d.ts +24 -24
  15. package/dist/fin5Top/fin5FileUpload.js +51 -51
  16. package/dist/fin5Top/fin5Top.d.ts +115 -115
  17. package/dist/fin5Top/fin5Top.js +58 -58
  18. package/dist/fin5Top/finEdge2Cloud.d.ts +6 -6
  19. package/dist/fin5Top/finEdge2Cloud.js +15 -15
  20. package/dist/fin5Top/getFin5BinUrl.d.ts +2 -2
  21. package/dist/fin5Top/getFin5BinUrl.js +9 -9
  22. package/dist/fin5Top/openFin5Alarm.d.ts +22 -22
  23. package/dist/fin5Top/openFin5Alarm.js +23 -23
  24. package/dist/fin5Top/openFin5Historian.d.ts +3 -3
  25. package/dist/fin5Top/openFin5Historian.js +19 -19
  26. package/dist/fin5Top/useFin5AppURLHashParameter.d.ts +18 -18
  27. package/dist/fin5Top/useFin5AppURLHashParameter.js +128 -128
  28. package/dist/index.d.ts +30 -30
  29. package/dist/index.js +64 -64
  30. package/dist/jobs/jobUtils.d.ts +14 -14
  31. package/dist/jobs/jobUtils.js +15 -15
  32. package/dist/react/app/Fin5AppContainer.d.ts +36 -36
  33. package/dist/react/app/Fin5AppContainer.js +102 -102
  34. package/dist/react/app/Fin5AppContainer.js.map +1 -1
  35. package/dist/react/app/Fin5AppRootStore.d.ts +39 -39
  36. package/dist/react/app/Fin5AppRootStore.js +69 -69
  37. package/dist/react/components/ErrorBoundary.d.ts +57 -57
  38. package/dist/react/components/ErrorBoundary.js +150 -150
  39. package/dist/react/components/ErrorBoundary.js.map +1 -1
  40. package/dist/react/components/ErrorDisplayer.d.ts +19 -19
  41. package/dist/react/components/ErrorDisplayer.js +36 -36
  42. package/dist/react/components/Loader.d.ts +9 -9
  43. package/dist/react/components/Loader.js +17 -17
  44. package/dist/react/components/LoadingSpinner.d.ts +2 -2
  45. package/dist/react/components/LoadingSpinner.js +27 -27
  46. package/dist/react/components/RecordImage.d.ts +20 -20
  47. package/dist/react/components/RecordImage.js +51 -51
  48. package/dist/react/components/charts/QRCode.d.ts +25 -25
  49. package/dist/react/components/charts/QRCode.js +81 -81
  50. package/dist/react/components/charts/pie/PieChart.d.ts +93 -93
  51. package/dist/react/components/charts/pie/PieChart.js +202 -202
  52. package/dist/react/components/charts/pie/SimplePieChart.d.ts +20 -20
  53. package/dist/react/components/charts/pie/SimplePieChart.js +55 -55
  54. package/dist/react/components/graphics/GraphicViewer.d.ts +10 -10
  55. package/dist/react/components/graphics/GraphicViewer.js +29 -29
  56. package/dist/react/components/graphics/GraphicsTabViewer.d.ts +17 -17
  57. package/dist/react/components/graphics/GraphicsTabViewer.js +90 -90
  58. package/dist/react/components/navigation/BasicLayout.d.ts +41 -41
  59. package/dist/react/components/navigation/BasicLayout.js +155 -155
  60. package/dist/react/components/navigation/HeaderSiderLayout.d.ts +13 -13
  61. package/dist/react/components/navigation/HeaderSiderLayout.js +110 -110
  62. package/dist/react/components/navigation/MenuPage.d.ts +37 -37
  63. package/dist/react/components/navigation/MenuPage.js +36 -36
  64. package/dist/react/components/navigation/MenuTrigger.d.ts +9 -9
  65. package/dist/react/components/navigation/MenuTrigger.js +33 -33
  66. package/dist/react/components/navigation/ReactRouterHeaderSiderLayout.d.ts +11 -11
  67. package/dist/react/components/navigation/ReactRouterHeaderSiderLayout.js +25 -25
  68. package/dist/react/components/navigation/ReactRouterLayout.d.ts +35 -35
  69. package/dist/react/components/navigation/ReactRouterLayout.js +113 -113
  70. package/dist/react/components/navigation/customRouting/Router.d.ts +12 -12
  71. package/dist/react/components/navigation/customRouting/Router.js +45 -45
  72. package/dist/react/components/navigation/customRouting/RouterLayout.d.ts +11 -11
  73. package/dist/react/components/navigation/customRouting/RouterLayout.js +61 -61
  74. package/dist/react/components/resolvable/configurationForm/ConfigurationForm.d.ts +27 -27
  75. package/dist/react/components/resolvable/configurationForm/ConfigurationForm.js +95 -95
  76. package/dist/react/components/resolvable/configurationForm/ConfigurationFormEntry.d.ts +16 -16
  77. package/dist/react/components/resolvable/configurationForm/ConfigurationFormEntry.js +88 -88
  78. package/dist/react/components/resolvable/configurationForm/getSectionDefault.d.ts +16 -16
  79. package/dist/react/components/resolvable/configurationForm/getSectionDefault.js +99 -99
  80. package/dist/react/hooks/useFin5BinUrl.d.ts +6 -6
  81. package/dist/react/hooks/useFin5BinUrl.js +15 -15
  82. package/dist_es/fantomProps/createFin5Props/index.d.ts +12 -12
  83. package/dist_es/fantomProps/createFin5Props/index.js +140 -140
  84. package/dist_es/fantomProps/createFin5Props/index.js.map +0 -0
  85. package/dist_es/fantomProps/createFin5Props/runCreateFin5Props.d.ts +2 -2
  86. package/dist_es/fantomProps/createFin5Props/runCreateFin5Props.js +11 -11
  87. package/dist_es/fantomProps/createFin5Props/runCreateFin5Props.js.map +0 -0
  88. package/dist_es/fantomProps/fantomPropsToObject.d.ts +8 -8
  89. package/dist_es/fantomProps/fantomPropsToObject.js +178 -178
  90. package/dist_es/fantomProps/fantomPropsToObject.js.map +0 -0
  91. package/dist_es/fantomProps/generateJsonFromFantomPropsFile.d.ts +4 -4
  92. package/dist_es/fantomProps/generateJsonFromFantomPropsFile.js +12 -12
  93. package/dist_es/fantomProps/generateJsonFromFantomPropsFile.js.map +0 -0
  94. package/dist_es/fantomProps/localePropsToJson.d.ts +1 -1
  95. package/dist_es/fantomProps/localePropsToJson.js +21 -21
  96. package/dist_es/fantomProps/localePropsToJson.js.map +0 -0
  97. package/dist_es/fantomProps/readFantomPropsFile.d.ts +5 -5
  98. package/dist_es/fantomProps/readFantomPropsFile.js +35 -35
  99. package/dist_es/fantomProps/readFantomPropsFile.js.map +0 -0
  100. package/dist_es/fin5Top/fin5FileUpload.d.ts +24 -24
  101. package/dist_es/fin5Top/fin5FileUpload.js +47 -47
  102. package/dist_es/fin5Top/fin5Top.d.ts +115 -115
  103. package/dist_es/fin5Top/fin5Top.js +54 -54
  104. package/dist_es/fin5Top/fin5Top.js.map +0 -0
  105. package/dist_es/fin5Top/finEdge2Cloud.d.ts +6 -6
  106. package/dist_es/fin5Top/finEdge2Cloud.js +11 -11
  107. package/dist_es/fin5Top/getFin5BinUrl.d.ts +2 -2
  108. package/dist_es/fin5Top/getFin5BinUrl.js +5 -5
  109. package/dist_es/fin5Top/getFin5BinUrl.js.map +0 -0
  110. package/dist_es/fin5Top/openFin5Alarm.d.ts +22 -22
  111. package/dist_es/fin5Top/openFin5Alarm.js +19 -19
  112. package/dist_es/fin5Top/openFin5Alarm.js.map +0 -0
  113. package/dist_es/fin5Top/openFin5Historian.d.ts +3 -3
  114. package/dist_es/fin5Top/openFin5Historian.js +15 -15
  115. package/dist_es/fin5Top/openFin5Historian.js.map +0 -0
  116. package/dist_es/fin5Top/useFin5AppURLHashParameter.d.ts +18 -18
  117. package/dist_es/fin5Top/useFin5AppURLHashParameter.js +119 -119
  118. package/dist_es/fin5Top/useFin5AppURLHashParameter.js.map +0 -0
  119. package/dist_es/index.d.ts +30 -30
  120. package/dist_es/index.js +48 -48
  121. package/dist_es/index.js.map +0 -0
  122. package/dist_es/jobs/jobUtils.d.ts +14 -14
  123. package/dist_es/jobs/jobUtils.js +9 -9
  124. package/dist_es/react/app/Fin5AppContainer.d.ts +36 -36
  125. package/dist_es/react/app/Fin5AppContainer.js +73 -73
  126. package/dist_es/react/app/Fin5AppContainer.js.map +1 -1
  127. package/dist_es/react/app/Fin5AppContainer.jsx +0 -0
  128. package/dist_es/react/app/Fin5AppContainer.jsx.map +0 -0
  129. package/dist_es/react/app/Fin5AppRootStore.d.ts +39 -39
  130. package/dist_es/react/app/Fin5AppRootStore.js +65 -65
  131. package/dist_es/react/app/Fin5AppRootStore.js.map +0 -0
  132. package/dist_es/react/components/ErrorBoundary.d.ts +57 -57
  133. package/dist_es/react/components/ErrorBoundary.js +123 -123
  134. package/dist_es/react/components/ErrorBoundary.js.map +1 -1
  135. package/dist_es/react/components/ErrorBoundary.jsx +0 -0
  136. package/dist_es/react/components/ErrorBoundary.jsx.map +0 -0
  137. package/dist_es/react/components/ErrorDisplayer.d.ts +19 -19
  138. package/dist_es/react/components/ErrorDisplayer.js +28 -28
  139. package/dist_es/react/components/ErrorDisplayer.jsx +0 -0
  140. package/dist_es/react/components/ErrorDisplayer.jsx.map +0 -0
  141. package/dist_es/react/components/Loader.d.ts +9 -9
  142. package/dist_es/react/components/Loader.js +12 -12
  143. package/dist_es/react/components/Loader.jsx +1 -1
  144. package/dist_es/react/components/Loader.jsx.map +1 -1
  145. package/dist_es/react/components/LoadingSpinner.d.ts +2 -2
  146. package/dist_es/react/components/LoadingSpinner.js +20 -20
  147. package/dist_es/react/components/LoadingSpinner.jsx +3 -4
  148. package/dist_es/react/components/LoadingSpinner.jsx.map +1 -1
  149. package/dist_es/react/components/RecordImage.d.ts +20 -20
  150. package/dist_es/react/components/RecordImage.js +24 -24
  151. package/dist_es/react/components/charts/QRCode.d.ts +25 -25
  152. package/dist_es/react/components/charts/QRCode.js +53 -53
  153. package/dist_es/react/components/charts/pie/PieChart.d.ts +93 -93
  154. package/dist_es/react/components/charts/pie/PieChart.js +175 -175
  155. package/dist_es/react/components/charts/pie/SimplePieChart.d.ts +20 -20
  156. package/dist_es/react/components/charts/pie/SimplePieChart.js +25 -25
  157. package/dist_es/react/components/graphics/GraphicViewer.d.ts +10 -10
  158. package/dist_es/react/components/graphics/GraphicViewer.js +22 -22
  159. package/dist_es/react/components/graphics/GraphicViewer.jsx +23 -0
  160. package/dist_es/react/components/graphics/GraphicViewer.jsx.map +1 -0
  161. package/dist_es/react/components/graphics/GraphicsTabViewer.d.ts +17 -17
  162. package/dist_es/react/components/graphics/GraphicsTabViewer.js +60 -60
  163. package/dist_es/react/components/graphics/GraphicsTabViewer.jsx +63 -0
  164. package/dist_es/react/components/graphics/GraphicsTabViewer.jsx.map +1 -0
  165. package/dist_es/react/components/navigation/BasicLayout.d.ts +41 -41
  166. package/dist_es/react/components/navigation/BasicLayout.js +124 -124
  167. package/dist_es/react/components/navigation/BasicLayout.jsx +35 -7
  168. package/dist_es/react/components/navigation/BasicLayout.jsx.map +1 -1
  169. package/dist_es/react/components/navigation/HeaderSiderLayout.d.ts +13 -13
  170. package/dist_es/react/components/navigation/HeaderSiderLayout.js +80 -80
  171. package/dist_es/react/components/navigation/MenuPage.d.ts +37 -37
  172. package/dist_es/react/components/navigation/MenuPage.js +30 -30
  173. package/dist_es/react/components/navigation/MenuPage.jsx +0 -0
  174. package/dist_es/react/components/navigation/MenuPage.jsx.map +1 -1
  175. package/dist_es/react/components/navigation/MenuTrigger.d.ts +9 -9
  176. package/dist_es/react/components/navigation/MenuTrigger.js +28 -28
  177. package/dist_es/react/components/navigation/ReactRouterHeaderSiderLayout.d.ts +11 -11
  178. package/dist_es/react/components/navigation/ReactRouterHeaderSiderLayout.js +18 -18
  179. package/dist_es/react/components/navigation/ReactRouterLayout.d.ts +35 -35
  180. package/dist_es/react/components/navigation/ReactRouterLayout.js +81 -81
  181. package/dist_es/react/components/navigation/Router.d.ts +0 -0
  182. package/dist_es/react/components/navigation/Router.js +19 -0
  183. package/dist_es/react/components/navigation/Router.js.map +1 -0
  184. package/dist_es/react/components/navigation/Router.jsx +1 -1
  185. package/dist_es/react/components/navigation/Router.jsx.map +1 -1
  186. package/dist_es/react/components/navigation/customRouting/Router.d.ts +12 -12
  187. package/dist_es/react/components/navigation/customRouting/Router.js +18 -18
  188. package/dist_es/react/components/navigation/customRouting/RouterLayout.d.ts +11 -11
  189. package/dist_es/react/components/navigation/customRouting/RouterLayout.js +34 -34
  190. package/dist_es/react/components/navigation/react-router/BasicLayout.d.ts +23 -0
  191. package/dist_es/react/components/navigation/react-router/BasicLayout.js +82 -0
  192. package/dist_es/react/components/navigation/react-router/BasicLayout.js.map +1 -0
  193. package/dist_es/react/components/navigation/react-router/ReactRouterBasicLayout.d.ts +24 -0
  194. package/dist_es/react/components/navigation/react-router/ReactRouterBasicLayout.js +82 -0
  195. package/dist_es/react/components/navigation/react-router/ReactRouterBasicLayout.js.map +1 -0
  196. package/dist_es/react/components/resolvable/configurationForm/ConfigurationForm.d.ts +27 -27
  197. package/dist_es/react/components/resolvable/configurationForm/ConfigurationForm.js +64 -64
  198. package/dist_es/react/components/resolvable/configurationForm/ConfigurationFormEntry.d.ts +16 -16
  199. package/dist_es/react/components/resolvable/configurationForm/ConfigurationFormEntry.js +58 -58
  200. package/dist_es/react/components/resolvable/configurationForm/getSectionDefault.d.ts +16 -16
  201. package/dist_es/react/components/resolvable/configurationForm/getSectionDefault.js +94 -94
  202. package/dist_es/react/hooks/useFin5BinUrl.d.ts +6 -6
  203. package/dist_es/react/hooks/useFin5BinUrl.js +11 -11
  204. package/package.json +7 -6
@@ -1,82 +1,82 @@
1
- /*
2
- * Copyright (c) 2023, J2 Innovations. All Rights Reserved
3
- */
4
- import React, { useCallback, useEffect, useMemo } from 'react';
5
- import { Outlet, useLocation, useNavigate, } from 'react-router';
6
- import { IN_IFRAME, fin5SkipHashUpdate, getFin5HashFrameParameters, getTopLocation, } from '../../../fin5Top/useFin5AppURLHashParameter';
7
- import { BasicLayout } from './BasicLayout';
8
- import { pageTreeToPageList } from './MenuPage';
9
- /**
10
- * This hook can be used with react-router/BasicLayout,
11
- * to ensure FIN5 URL is aligned with the internal frame URL.
12
- */
13
- export const useLocationUpdate = () => {
14
- const location = useLocation();
15
- useEffect(() => {
16
- const hash = location.pathname;
17
- const queryParams = location.search;
18
- if (IN_IFRAME) {
19
- fin5SkipHashUpdate()?.then(() => {
20
- const frameParameters = getFin5HashFrameParameters();
21
- frameParameters.set('url', frameParameters.get('url')?.split('#')[0] +
22
- '#' +
23
- hash +
24
- queryParams);
25
- getTopLocation().hash = `#${getTopLocation().hash.slice(1).split('?')[0]}?${frameParameters.toString()}`;
26
- });
27
- }
28
- }, [location]);
29
- };
30
- export const useSelectedRoutes = (pages, isSelectedRoute = (page, location) => location.pathname.includes(page.route)) => {
31
- const location = useLocation();
32
- const flatPages = useMemo(() => pageTreeToPageList(pages), [pages]);
33
- return useMemo(() => {
34
- return flatPages
35
- .filter((page) => isSelectedRoute(page, location))
36
- .map((page) => page.key);
37
- }, [location, flatPages, isSelectedRoute]);
38
- };
39
- /**
40
- * If we are inside a frame (FIN5), the route is left as is.
41
- * If we are outside FIN5 frame, the route needs to be prefixed with a segment containing the project name.
42
- * @param route
43
- * @returns the correct route for the environment
44
- */
45
- export const getRoute = (route) => {
46
- const prefixedRoute = route.startsWith('/') ? route : `/${route}`;
47
- return !IN_IFRAME ? `/proj/:projectName${prefixedRoute}` : prefixedRoute;
48
- };
49
- /**
50
- * Create a map that holds the page key and its related route.
51
- * @param pages
52
- * @returns the map page key - route
53
- */
54
- export const useGetPageKeyRouteMap = (pages) => useMemo(() => {
55
- const flatPages = pageTreeToPageList(pages);
56
- const result = new Map();
57
- flatPages.forEach((page) => {
58
- result.set(page.key, page.route);
59
- });
60
- return result;
61
- }, [pages]);
62
- export const useDefaultOnSelect = (navigate, pageKeyRouteMap, pages) => useCallback((key) => {
63
- const route = pageKeyRouteMap.get(key);
64
- if (route) {
65
- navigate(route);
66
- }
67
- else {
68
- console.warn('Could not find route for page key', key, 'pages', pages);
69
- }
70
- }, [navigate, pageKeyRouteMap]);
71
- /**
72
- * Basic layout that uses React Router.
73
- */
74
- export const ReactRouterLayout = ({ isSelectedRoute, pages = [], onSelect, ...otherProps }) => {
75
- const navigate = useNavigate();
76
- const selectedRoutes = useSelectedRoutes(pages, isSelectedRoute);
77
- const pageKeyRouteMap = useGetPageKeyRouteMap(pages);
78
- const defaultOnSelect = useDefaultOnSelect(navigate, pageKeyRouteMap, pages);
79
- return (React.createElement(BasicLayout, { ...otherProps, pages: pages, onSelect: onSelect ?? defaultOnSelect, selectedPages: selectedRoutes },
80
- React.createElement(Outlet, null)));
81
- };
1
+ /*
2
+ * Copyright (c) 2023, J2 Innovations. All Rights Reserved
3
+ */
4
+ import React, { useCallback, useEffect, useMemo } from 'react';
5
+ import { Outlet, useLocation, useNavigate, } from 'react-router';
6
+ import { IN_IFRAME, fin5SkipHashUpdate, getFin5HashFrameParameters, getTopLocation, } from '../../../fin5Top/useFin5AppURLHashParameter';
7
+ import { BasicLayout } from './BasicLayout';
8
+ import { pageTreeToPageList } from './MenuPage';
9
+ /**
10
+ * This hook can be used with react-router/BasicLayout,
11
+ * to ensure FIN5 URL is aligned with the internal frame URL.
12
+ */
13
+ export const useLocationUpdate = () => {
14
+ const location = useLocation();
15
+ useEffect(() => {
16
+ const hash = location.pathname;
17
+ const queryParams = location.search;
18
+ if (IN_IFRAME) {
19
+ fin5SkipHashUpdate()?.then(() => {
20
+ const frameParameters = getFin5HashFrameParameters();
21
+ frameParameters.set('url', frameParameters.get('url')?.split('#')[0] +
22
+ '#' +
23
+ hash +
24
+ queryParams);
25
+ getTopLocation().hash = `#${getTopLocation().hash.slice(1).split('?')[0]}?${frameParameters.toString()}`;
26
+ });
27
+ }
28
+ }, [location]);
29
+ };
30
+ export const useSelectedRoutes = (pages, isSelectedRoute = (page, location) => location.pathname.includes(page.route)) => {
31
+ const location = useLocation();
32
+ const flatPages = useMemo(() => pageTreeToPageList(pages), [pages]);
33
+ return useMemo(() => {
34
+ return flatPages
35
+ .filter((page) => isSelectedRoute(page, location))
36
+ .map((page) => page.key);
37
+ }, [location, flatPages, isSelectedRoute]);
38
+ };
39
+ /**
40
+ * If we are inside a frame (FIN5), the route is left as is.
41
+ * If we are outside FIN5 frame, the route needs to be prefixed with a segment containing the project name.
42
+ * @param route
43
+ * @returns the correct route for the environment
44
+ */
45
+ export const getRoute = (route) => {
46
+ const prefixedRoute = route.startsWith('/') ? route : `/${route}`;
47
+ return !IN_IFRAME ? `/proj/:projectName${prefixedRoute}` : prefixedRoute;
48
+ };
49
+ /**
50
+ * Create a map that holds the page key and its related route.
51
+ * @param pages
52
+ * @returns the map page key - route
53
+ */
54
+ export const useGetPageKeyRouteMap = (pages) => useMemo(() => {
55
+ const flatPages = pageTreeToPageList(pages);
56
+ const result = new Map();
57
+ flatPages.forEach((page) => {
58
+ result.set(page.key, page.route);
59
+ });
60
+ return result;
61
+ }, [pages]);
62
+ export const useDefaultOnSelect = (navigate, pageKeyRouteMap, pages) => useCallback((key) => {
63
+ const route = pageKeyRouteMap.get(key);
64
+ if (route) {
65
+ navigate(route);
66
+ }
67
+ else {
68
+ console.warn('Could not find route for page key', key, 'pages', pages);
69
+ }
70
+ }, [navigate, pageKeyRouteMap]);
71
+ /**
72
+ * Basic layout that uses React Router.
73
+ */
74
+ export const ReactRouterLayout = ({ isSelectedRoute, pages = [], onSelect, ...otherProps }) => {
75
+ const navigate = useNavigate();
76
+ const selectedRoutes = useSelectedRoutes(pages, isSelectedRoute);
77
+ const pageKeyRouteMap = useGetPageKeyRouteMap(pages);
78
+ const defaultOnSelect = useDefaultOnSelect(navigate, pageKeyRouteMap, pages);
79
+ return (React.createElement(BasicLayout, { ...otherProps, pages: pages, onSelect: onSelect ?? defaultOnSelect, selectedPages: selectedRoutes },
80
+ React.createElement(Outlet, null)));
81
+ };
82
82
  //# sourceMappingURL=ReactRouterLayout.js.map
File without changes
@@ -0,0 +1,19 @@
1
+ /*
2
+ * Copyright (c) 2022, J2 Innovations. All Rights Reserved
3
+ */
4
+ import React, { Suspense, useEffect, useMemo, } from 'react';
5
+ import { LoadingSpinner } from '../LoadingSpinner';
6
+ import { findPageByName } from './MenuPage';
7
+ /**
8
+ * Renders the currently selected page from a tree of pages
9
+ */
10
+ export function Router({ pages = [], currentPage, onPageChange, fallbackComponent, }) {
11
+ const page = useMemo(() => findPageByName(pages, currentPage), [pages, currentPage]);
12
+ useEffect(() => {
13
+ onPageChange?.(page);
14
+ }, [page]);
15
+ return page?.component ? (React.createElement(Suspense, { fallback: React.createElement(LoadingSpinner, null) }, React.createElement(page.component, page?.props))) : (fallbackComponent ?? React.createElement("div", null,
16
+ currentPage,
17
+ " page not found"));
18
+ }
19
+ //# sourceMappingURL=Router.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"Router.js","sourceRoot":"","sources":["../../../../src/react/components/navigation/Router.tsx"],"names":[],"mappings":"AAAA;;GAEG;AAEH,OAAO,KAAK,EAAE,EAGb,QAAQ,EACR,SAAS,EACT,OAAO,GACP,MAAM,OAAO,CAAA;AACd,OAAO,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAA;AAClD,OAAO,EAAE,cAAc,EAAY,MAAM,YAAY,CAAA;AASrD;;GAEG;AACH,MAAM,UAAU,MAAM,CAAqB,EAC1C,KAAK,GAAG,EAAE,EACV,WAAW,EACX,YAAY,EACZ,iBAAiB,GACkB;IACnC,MAAM,IAAI,GAAG,OAAO,CACnB,GAAG,EAAE,CAAC,cAAc,CAAC,KAAK,EAAE,WAAW,CAAC,EACxC,CAAC,KAAK,EAAE,WAAW,CAAC,CACpB,CAAA;IAED,SAAS,CAAC,GAAG,EAAE;QACd,YAAY,EAAE,CAAC,IAAI,CAAC,CAAA;IACrB,CAAC,EAAE,CAAC,IAAI,CAAC,CAAC,CAAA;IAEV,OAAO,IAAI,EAAE,SAAS,CAAC,CAAC,CAAC,CACxB,oBAAC,QAAQ,IAAC,QAAQ,EAAE,oBAAC,cAAc,OAAG,IACpC,KAAK,CAAC,aAAa,CAAC,IAAI,CAAC,SAAS,EAAE,IAAI,EAAE,KAAK,CAAC,CACvC,CACX,CAAC,CAAC,CAAC,CACH,iBAAiB,IAAI;QAAM,WAAW;0BAAsB,CAC5D,CAAA;AACF,CAAC"}
@@ -2,7 +2,7 @@
2
2
  * Copyright (c) 2022, J2 Innovations. All Rights Reserved
3
3
  */
4
4
  import React, { Suspense, useEffect, useMemo, } from 'react';
5
- import LoadingSpinner from '../LoadingSpinner';
5
+ import { LoadingSpinner } from '../LoadingSpinner';
6
6
  import { findPageByName } from './MenuPage';
7
7
  /**
8
8
  * Renders the currently selected page from a tree of pages
@@ -1 +1 @@
1
- {"version":3,"file":"Router.jsx","sourceRoot":"","sources":["../../../../src/react/components/navigation/Router.tsx"],"names":[],"mappings":"AAAA;;GAEG;AAEH,OAAO,KAAK,EAAE,EAGb,QAAQ,EACR,SAAS,EACT,OAAO,GACP,MAAM,OAAO,CAAA;AACd,OAAO,cAAc,MAAM,mBAAmB,CAAA;AAC9C,OAAO,EAAE,cAAc,EAAY,MAAM,YAAY,CAAA;AASrD;;GAEG;AACH,MAAM,UAAU,MAAM,CAAqB,EAC1C,KAAK,GAAG,EAAE,EACV,WAAW,EACX,YAAY,EACZ,iBAAiB,GACkB;IACnC,MAAM,IAAI,GAAG,OAAO,CACnB,GAAG,EAAE,CAAC,cAAc,CAAC,KAAK,EAAE,WAAW,CAAC,EACxC,CAAC,KAAK,EAAE,WAAW,CAAC,CACpB,CAAA;IAED,SAAS,CAAC,GAAG,EAAE;QACd,YAAY,EAAE,CAAC,IAAI,CAAC,CAAA;IACrB,CAAC,EAAE,CAAC,IAAI,CAAC,CAAC,CAAA;IAEV,OAAO,IAAI,EAAE,SAAS,CAAC,CAAC,CAAC,CACxB,CAAC,QAAQ,CAAC,QAAQ,CAAC,CAAC,CAAC,cAAc,CAAC,AAAD,EAAG,CAAC,CACtC;GAAA,CAAC,KAAK,CAAC,aAAa,CAAC,IAAI,CAAC,SAAS,EAAE,IAAI,EAAE,KAAK,CAAC,CAClD;EAAA,EAAE,QAAQ,CAAC,CACX,CAAC,CAAC,CAAC,CACH,iBAAiB,IAAI,CAAC,GAAG,CAAC,CAAC,WAAW,CAAE,eAAc,EAAE,GAAG,CAAC,CAC5D,CAAA;AACF,CAAC"}
1
+ {"version":3,"file":"Router.jsx","sourceRoot":"","sources":["../../../../src/react/components/navigation/Router.tsx"],"names":[],"mappings":"AAAA;;GAEG;AAEH,OAAO,KAAK,EAAE,EAGb,QAAQ,EACR,SAAS,EACT,OAAO,GACP,MAAM,OAAO,CAAA;AACd,OAAO,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAA;AAClD,OAAO,EAAE,cAAc,EAAY,MAAM,YAAY,CAAA;AASrD;;GAEG;AACH,MAAM,UAAU,MAAM,CAAqB,EAC1C,KAAK,GAAG,EAAE,EACV,WAAW,EACX,YAAY,EACZ,iBAAiB,GACkB;IACnC,MAAM,IAAI,GAAG,OAAO,CACnB,GAAG,EAAE,CAAC,cAAc,CAAC,KAAK,EAAE,WAAW,CAAC,EACxC,CAAC,KAAK,EAAE,WAAW,CAAC,CACpB,CAAA;IAED,SAAS,CAAC,GAAG,EAAE;QACd,YAAY,EAAE,CAAC,IAAI,CAAC,CAAA;IACrB,CAAC,EAAE,CAAC,IAAI,CAAC,CAAC,CAAA;IAEV,OAAO,IAAI,EAAE,SAAS,CAAC,CAAC,CAAC,CACxB,CAAC,QAAQ,CAAC,QAAQ,CAAC,CAAC,CAAC,cAAc,CAAC,AAAD,EAAG,CAAC,CACtC;GAAA,CAAC,KAAK,CAAC,aAAa,CAAC,IAAI,CAAC,SAAS,EAAE,IAAI,EAAE,KAAK,CAAC,CAClD;EAAA,EAAE,QAAQ,CAAC,CACX,CAAC,CAAC,CAAC,CACH,iBAAiB,IAAI,CAAC,GAAG,CAAC,CAAC,WAAW,CAAE,eAAc,EAAE,GAAG,CAAC,CAC5D,CAAA;AACF,CAAC"}
@@ -1,12 +1,12 @@
1
- import { PropsWithChildren, ReactElement } from 'react';
2
- import { MenuPage } from '../MenuPage';
3
- export interface RouterProps<T extends MenuPage> {
4
- pages?: T[];
5
- currentPage: string;
6
- onPageChange?: (selectedPage?: T) => void;
7
- fallbackComponent?: ReactElement;
8
- }
9
- /**
10
- * Renders the currently selected page from a tree of pages
11
- */
12
- export declare function Router<T extends MenuPage>({ pages, currentPage, onPageChange, fallbackComponent, }: PropsWithChildren<RouterProps<T>>): JSX.Element;
1
+ import { PropsWithChildren, ReactElement } from 'react';
2
+ import { MenuPage } from '../MenuPage';
3
+ export interface RouterProps<T extends MenuPage> {
4
+ pages?: T[];
5
+ currentPage: string;
6
+ onPageChange?: (selectedPage?: T) => void;
7
+ fallbackComponent?: ReactElement;
8
+ }
9
+ /**
10
+ * Renders the currently selected page from a tree of pages
11
+ */
12
+ export declare function Router<T extends MenuPage>({ pages, currentPage, onPageChange, fallbackComponent, }: PropsWithChildren<RouterProps<T>>): JSX.Element;
@@ -1,19 +1,19 @@
1
- /*
2
- * Copyright (c) 2022, J2 Innovations. All Rights Reserved
3
- */
4
- import React, { Suspense, useEffect, useMemo, } from 'react';
5
- import { LoadingSpinner } from '../../LoadingSpinner';
6
- import { findPageByName } from '../MenuPage';
7
- /**
8
- * Renders the currently selected page from a tree of pages
9
- */
10
- export function Router({ pages = [], currentPage, onPageChange, fallbackComponent, }) {
11
- const page = useMemo(() => findPageByName(pages, currentPage), [pages, currentPage]);
12
- useEffect(() => {
13
- onPageChange?.(page);
14
- }, [page]);
15
- return page?.component ? (React.createElement(Suspense, { fallback: React.createElement(LoadingSpinner, null) }, React.createElement(page.component, page?.props))) : (fallbackComponent ?? React.createElement("div", null,
16
- currentPage,
17
- " page not found"));
18
- }
1
+ /*
2
+ * Copyright (c) 2022, J2 Innovations. All Rights Reserved
3
+ */
4
+ import React, { Suspense, useEffect, useMemo, } from 'react';
5
+ import { LoadingSpinner } from '../../LoadingSpinner';
6
+ import { findPageByName } from '../MenuPage';
7
+ /**
8
+ * Renders the currently selected page from a tree of pages
9
+ */
10
+ export function Router({ pages = [], currentPage, onPageChange, fallbackComponent, }) {
11
+ const page = useMemo(() => findPageByName(pages, currentPage), [pages, currentPage]);
12
+ useEffect(() => {
13
+ onPageChange?.(page);
14
+ }, [page]);
15
+ return page?.component ? (React.createElement(Suspense, { fallback: React.createElement(LoadingSpinner, null) }, React.createElement(page.component, page?.props))) : (fallbackComponent ?? React.createElement("div", null,
16
+ currentPage,
17
+ " page not found"));
18
+ }
19
19
  //# sourceMappingURL=Router.js.map
@@ -1,11 +1,11 @@
1
- import React from 'react';
2
- import { BasicLayoutProps } from '../BasicLayout';
3
- import { MenuPage } from '../MenuPage';
4
- export interface RouterLayoutProps extends BasicLayoutProps<MenuPage> {
5
- page?: string;
6
- onPageChange?: (page: string) => void;
7
- }
8
- /**
9
- * Basic layout that uses a custom router.
10
- */
11
- export declare const RouterLayout: React.FC<RouterLayoutProps>;
1
+ import React from 'react';
2
+ import { BasicLayoutProps } from '../BasicLayout';
3
+ import { MenuPage } from '../MenuPage';
4
+ export interface RouterLayoutProps extends BasicLayoutProps<MenuPage> {
5
+ page?: string;
6
+ onPageChange?: (page: string) => void;
7
+ }
8
+ /**
9
+ * Basic layout that uses a custom router.
10
+ */
11
+ export declare const RouterLayout: React.FC<RouterLayoutProps>;
@@ -1,35 +1,35 @@
1
- /*
2
- * Copyright (c) 2022, J2 Innovations. All Rights Reserved
3
- */
4
- import { Button } from '@j2inn/ui';
5
- import React, { useCallback, useEffect, useState } from 'react';
6
- import { ErrorDisplayer } from '../../ErrorDisplayer';
7
- import { BasicLayout } from '../BasicLayout';
8
- import { findPageByName } from '../MenuPage';
9
- import { Router } from './Router';
10
- /**
11
- * Basic layout that uses a custom router.
12
- */
13
- export const RouterLayout = ({ pages = [], defaultPage = pages?.[0].key ?? '', onPageChange, page, ...otherProps }) => {
14
- const [currentPage, setCurrentPage] = useState(page ?? defaultPage);
15
- useEffect(() => {
16
- if (page) {
17
- setCurrentPage(page);
18
- }
19
- }, [page]);
20
- // Fire onChange
21
- useEffect(() => {
22
- onPageChange?.(currentPage);
23
- }, [currentPage]);
24
- const onSelect = useCallback((key) => {
25
- const page = findPageByName(pages, key);
26
- if (page?.component) {
27
- setCurrentPage(key);
28
- }
29
- }, [pages]);
30
- return (React.createElement(BasicLayout, { ...otherProps, pages: pages, defaultPage: defaultPage, onSelect: onSelect, selectedPages: [currentPage] },
31
- React.createElement(Router, { pages: pages, currentPage: currentPage, fallbackComponent: React.createElement(ErrorDisplayer, { error: new Error('Page Not Found'), extra: [
32
- React.createElement(Button, { type: 'primary', key: 'refresh', onClick: () => setCurrentPage(defaultPage) }, "Go Home"),
33
- ] }) })));
34
- };
1
+ /*
2
+ * Copyright (c) 2022, J2 Innovations. All Rights Reserved
3
+ */
4
+ import { Button } from '@j2inn/ui';
5
+ import React, { useCallback, useEffect, useState } from 'react';
6
+ import { ErrorDisplayer } from '../../ErrorDisplayer';
7
+ import { BasicLayout } from '../BasicLayout';
8
+ import { findPageByName } from '../MenuPage';
9
+ import { Router } from './Router';
10
+ /**
11
+ * Basic layout that uses a custom router.
12
+ */
13
+ export const RouterLayout = ({ pages = [], defaultPage = pages?.[0].key ?? '', onPageChange, page, ...otherProps }) => {
14
+ const [currentPage, setCurrentPage] = useState(page ?? defaultPage);
15
+ useEffect(() => {
16
+ if (page) {
17
+ setCurrentPage(page);
18
+ }
19
+ }, [page]);
20
+ // Fire onChange
21
+ useEffect(() => {
22
+ onPageChange?.(currentPage);
23
+ }, [currentPage]);
24
+ const onSelect = useCallback((key) => {
25
+ const page = findPageByName(pages, key);
26
+ if (page?.component) {
27
+ setCurrentPage(key);
28
+ }
29
+ }, [pages]);
30
+ return (React.createElement(BasicLayout, { ...otherProps, pages: pages, defaultPage: defaultPage, onSelect: onSelect, selectedPages: [currentPage] },
31
+ React.createElement(Router, { pages: pages, currentPage: currentPage, fallbackComponent: React.createElement(ErrorDisplayer, { error: new Error('Page Not Found'), extra: [
32
+ React.createElement(Button, { type: 'primary', key: 'refresh', onClick: () => setCurrentPage(defaultPage) }, "Go Home"),
33
+ ] }) })));
34
+ };
35
35
  //# sourceMappingURL=RouterLayout.js.map
@@ -0,0 +1,23 @@
1
+ import type { Location } from '@remix-run/router';
2
+ import { LayoutProps, MenuProps, SiderProps } from 'antd';
3
+ import React from 'react';
4
+ import { MenuPage } from '../MenuPage';
5
+ export interface BasicLayoutProps {
6
+ pages?: MenuPage[];
7
+ compactSider?: boolean;
8
+ layoutProps?: LayoutProps;
9
+ mobileHeaderProps?: LayoutProps;
10
+ siderProps?: SiderProps;
11
+ contentProps?: LayoutProps;
12
+ menuProps?: Omit<MenuProps, 'items' | 'selectedKeys' | 'onSelect'>;
13
+ isSelectedRoute?: (page: MenuPage, location: Location) => boolean;
14
+ }
15
+ /**
16
+ * This hook can be used with react-router/BasicLayout,
17
+ * to ensure FIN5 URL is aligned with the internal frame URL.
18
+ */
19
+ export declare const useLocationUpdate: () => void;
20
+ /**
21
+ * Basic layout that uses React Router.
22
+ */
23
+ export declare const BasicLayout: React.FC<BasicLayoutProps>;
@@ -0,0 +1,82 @@
1
+ /*
2
+ * Copyright (c) 2023, J2 Innovations. All Rights Reserved
3
+ */
4
+ import { MenuFoldOutlined, MenuUnfoldOutlined } from '@ant-design/icons';
5
+ import { Layout, Menu } from '@j2inn/ui';
6
+ import classNames from 'classnames';
7
+ import { IN_IFRAME, fin5SkipHashUpdate, getFin5HashFrameParameters, getTopLocation, } from 'fin5Top/useFin5AppURLHashParameter';
8
+ import React, { useEffect, useMemo, useState } from 'react';
9
+ import { Outlet, useLocation, useNavigate } from 'react-router';
10
+ import { HEADER_HEIGHT, getMenuPages, useStyles } from '../BasicLayout';
11
+ import { pageTreeToPageList } from '../MenuPage';
12
+ // Workaround j2inn/ui exporting problem
13
+ const Header = Layout.Header;
14
+ const Sider = Layout.Sider;
15
+ const Content = Layout.Content;
16
+ /**
17
+ * This hook can be used with react-router/BasicLayout,
18
+ * to ensure FIN5 URL is aligned with the internal frame URL.
19
+ */
20
+ export const useLocationUpdate = () => {
21
+ const location = useLocation();
22
+ useEffect(() => {
23
+ console.debug('Location changed', location);
24
+ const hash = location.pathname;
25
+ const queryParams = location.search;
26
+ if (IN_IFRAME) {
27
+ fin5SkipHashUpdate()?.then(() => {
28
+ const frameParameters = getFin5HashFrameParameters();
29
+ frameParameters.set('url', frameParameters.get('url')?.split('#')[0] +
30
+ '#' +
31
+ hash +
32
+ queryParams);
33
+ getTopLocation().hash = `#${getTopLocation().hash.slice(1).split('?')[0]}?${frameParameters.toString()}`;
34
+ });
35
+ }
36
+ }, [location]);
37
+ };
38
+ const useSelectedRoutes = (pages, isSelectedRoute = (page, location) => location.pathname.includes(`/${page.key}`)) => {
39
+ const location = useLocation();
40
+ return useMemo(() => {
41
+ const flatPages = pageTreeToPageList(pages);
42
+ return flatPages
43
+ .filter((page) => isSelectedRoute(page, location))
44
+ .map((page) => page.key);
45
+ }, [location, pages]);
46
+ };
47
+ /**
48
+ * Basic layout that uses React Router.
49
+ */
50
+ export const BasicLayout = ({ pages = [], compactSider, layoutProps, mobileHeaderProps, siderProps, contentProps, menuProps, isSelectedRoute, }) => {
51
+ const navigate = useNavigate();
52
+ const selectedRoutes = useSelectedRoutes(pages, isSelectedRoute);
53
+ // manage mobile navigation
54
+ const [isMobile, setIsMobile] = useState(false);
55
+ const [hiddenSider, setHiddenSider] = useState(false);
56
+ const siderWidth = siderProps?.width;
57
+ const classes = useStyles({ isMobile, compactSider, siderWidth });
58
+ const menuPages = useMemo(() => getMenuPages(pages), [pages]);
59
+ return (React.createElement(Layout, { hasSider: true, ...layoutProps },
60
+ isMobile && (React.createElement(Header, { ...mobileHeaderProps, className: classNames(classes.header, mobileHeaderProps?.className) }, hiddenSider ? (React.createElement(MenuUnfoldOutlined, { className: classes.menuTrigger, onClick: () => {
61
+ setHiddenSider(!hiddenSider);
62
+ } })) : (React.createElement(MenuFoldOutlined, { className: classes.menuTrigger, onClick: () => {
63
+ setHiddenSider(!hiddenSider);
64
+ } })))),
65
+ React.createElement(Sider, { ...siderProps, className: classNames(classes.sider, siderProps?.className), breakpoint: 'md', onBreakpoint: (broken) => {
66
+ setIsMobile(broken);
67
+ setHiddenSider(true);
68
+ }, collapsed: (isMobile && hiddenSider) || compactSider, collapsedWidth: isMobile && hiddenSider
69
+ ? 0
70
+ : compactSider
71
+ ? HEADER_HEIGHT
72
+ : 0, trigger: null },
73
+ React.createElement(Menu, { ...menuProps, items: menuPages, selectedKeys: selectedRoutes, onSelect: ({ key }) => {
74
+ if (!hiddenSider) {
75
+ setHiddenSider(true);
76
+ }
77
+ navigate(key);
78
+ } })),
79
+ React.createElement(Content, { ...contentProps, className: classNames(classes.content, contentProps?.className) },
80
+ React.createElement(Outlet, null))));
81
+ };
82
+ //# sourceMappingURL=BasicLayout.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"BasicLayout.js","sourceRoot":"","sources":["../../../../../src/react/components/navigation/react-router/BasicLayout.tsx"],"names":[],"mappings":"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"}
@@ -0,0 +1,24 @@
1
+ import type { Location } from '@remix-run/router';
2
+ import { LayoutProps, MenuProps, SiderProps } from 'antd';
3
+ import React from 'react';
4
+ import { MenuPage } from '../MenuPage';
5
+ export interface ReactRouterBasicLayoutProps {
6
+ pages?: MenuPage[];
7
+ defaultPage?: string;
8
+ compactSider?: boolean;
9
+ layoutProps?: LayoutProps;
10
+ mobileHeaderProps?: LayoutProps;
11
+ siderProps?: SiderProps;
12
+ contentProps?: LayoutProps;
13
+ menuProps?: Omit<MenuProps, 'items' | 'selectedKeys' | 'onSelect'>;
14
+ isSelectedRoute?: (page: MenuPage, location: Location) => boolean;
15
+ }
16
+ /**
17
+ * This hook can be used with react-router/BasicLayout,
18
+ * to ensure FIN5 URL is aligned with the internal frame URL.
19
+ */
20
+ export declare const useLocationUpdate: () => void;
21
+ /**
22
+ * Basic layout that uses React Router.
23
+ */
24
+ export declare const ReactRouterBasicLayout: React.FC<ReactRouterBasicLayoutProps>;
@@ -0,0 +1,82 @@
1
+ /*
2
+ * Copyright (c) 2023, J2 Innovations. All Rights Reserved
3
+ */
4
+ import { MenuFoldOutlined, MenuUnfoldOutlined } from '@ant-design/icons';
5
+ import { Layout, Menu } from '@j2inn/ui';
6
+ import classNames from 'classnames';
7
+ import React, { useEffect, useMemo, useState } from 'react';
8
+ import { Outlet, useLocation, useNavigate } from 'react-router';
9
+ import { IN_IFRAME, fin5SkipHashUpdate, getFin5HashFrameParameters, getTopLocation, } from '../../../../fin5Top/useFin5AppURLHashParameter';
10
+ import { HEADER_HEIGHT, getMenuPages, useStyles } from '../BasicLayout';
11
+ import { pageTreeToPageList } from '../MenuPage';
12
+ // Workaround j2inn/ui exporting problem
13
+ const Header = Layout.Header;
14
+ const Sider = Layout.Sider;
15
+ const Content = Layout.Content;
16
+ /**
17
+ * This hook can be used with react-router/BasicLayout,
18
+ * to ensure FIN5 URL is aligned with the internal frame URL.
19
+ */
20
+ export const useLocationUpdate = () => {
21
+ const location = useLocation();
22
+ useEffect(() => {
23
+ console.debug('Location changed', location);
24
+ const hash = location.pathname;
25
+ const queryParams = location.search;
26
+ if (IN_IFRAME) {
27
+ fin5SkipHashUpdate()?.then(() => {
28
+ const frameParameters = getFin5HashFrameParameters();
29
+ frameParameters.set('url', frameParameters.get('url')?.split('#')[0] +
30
+ '#' +
31
+ hash +
32
+ queryParams);
33
+ getTopLocation().hash = `#${getTopLocation().hash.slice(1).split('?')[0]}?${frameParameters.toString()}`;
34
+ });
35
+ }
36
+ }, [location]);
37
+ };
38
+ const useSelectedRoutes = (pages, isSelectedRoute = (page, location) => location.pathname.includes(`/${page.key}`)) => {
39
+ const location = useLocation();
40
+ return useMemo(() => {
41
+ const flatPages = pageTreeToPageList(pages);
42
+ return flatPages
43
+ .filter((page) => isSelectedRoute(page, location))
44
+ .map((page) => page.key);
45
+ }, [location, pages]);
46
+ };
47
+ /**
48
+ * Basic layout that uses React Router.
49
+ */
50
+ export const ReactRouterBasicLayout = ({ pages = [], defaultPage, compactSider, layoutProps, mobileHeaderProps, siderProps, contentProps, menuProps, isSelectedRoute, }) => {
51
+ const navigate = useNavigate();
52
+ const selectedRoutes = useSelectedRoutes(pages, isSelectedRoute);
53
+ // manage mobile navigation
54
+ const [isMobile, setIsMobile] = useState(false);
55
+ const [hiddenSider, setHiddenSider] = useState(false);
56
+ const siderWidth = siderProps?.width;
57
+ const classes = useStyles({ isMobile, compactSider, siderWidth });
58
+ const menuPages = useMemo(() => getMenuPages(pages), [pages]);
59
+ return (React.createElement(Layout, { hasSider: true, ...layoutProps },
60
+ isMobile && (React.createElement(Header, { ...mobileHeaderProps, className: classNames(classes.header, mobileHeaderProps?.className) }, hiddenSider ? (React.createElement(MenuUnfoldOutlined, { className: classes.menuTrigger, onClick: () => {
61
+ setHiddenSider(!hiddenSider);
62
+ } })) : (React.createElement(MenuFoldOutlined, { className: classes.menuTrigger, onClick: () => {
63
+ setHiddenSider(!hiddenSider);
64
+ } })))),
65
+ React.createElement(Sider, { ...siderProps, className: classNames(classes.sider, siderProps?.className), breakpoint: 'md', onBreakpoint: (broken) => {
66
+ setIsMobile(broken);
67
+ setHiddenSider(true);
68
+ }, collapsed: (isMobile && hiddenSider) || compactSider, collapsedWidth: isMobile && hiddenSider
69
+ ? 0
70
+ : compactSider
71
+ ? HEADER_HEIGHT
72
+ : 0, trigger: null },
73
+ React.createElement(Menu, { ...menuProps, defaultSelectedKeys: defaultPage ? [defaultPage] : undefined, items: menuPages, selectedKeys: selectedRoutes, onSelect: ({ key }) => {
74
+ if (!hiddenSider) {
75
+ setHiddenSider(true);
76
+ }
77
+ navigate(key);
78
+ } })),
79
+ React.createElement(Content, { ...contentProps, className: classNames(classes.content, contentProps?.className) },
80
+ React.createElement(Outlet, null))));
81
+ };
82
+ //# sourceMappingURL=ReactRouterBasicLayout.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"ReactRouterBasicLayout.js","sourceRoot":"","sources":["../../../../../src/react/components/navigation/react-router/ReactRouterBasicLayout.tsx"],"names":[],"mappings":"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"}