@j2inn/fin5-ui-utils 3.0.7-beta.0 → 4.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.
Files changed (202) 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/Fin5AppRootStore.d.ts +39 -39
  35. package/dist/react/app/Fin5AppRootStore.js +69 -69
  36. package/dist/react/components/ErrorBoundary.d.ts +57 -57
  37. package/dist/react/components/ErrorBoundary.js +150 -150
  38. package/dist/react/components/ErrorDisplayer.d.ts +19 -19
  39. package/dist/react/components/ErrorDisplayer.js +36 -36
  40. package/dist/react/components/Loader.d.ts +9 -9
  41. package/dist/react/components/Loader.js +17 -17
  42. package/dist/react/components/LoadingSpinner.d.ts +2 -2
  43. package/dist/react/components/LoadingSpinner.js +27 -27
  44. package/dist/react/components/RecordImage.d.ts +20 -20
  45. package/dist/react/components/RecordImage.js +51 -51
  46. package/dist/react/components/charts/QRCode.d.ts +25 -25
  47. package/dist/react/components/charts/QRCode.js +81 -81
  48. package/dist/react/components/charts/pie/PieChart.d.ts +93 -93
  49. package/dist/react/components/charts/pie/PieChart.js +202 -202
  50. package/dist/react/components/charts/pie/SimplePieChart.d.ts +20 -20
  51. package/dist/react/components/charts/pie/SimplePieChart.js +55 -55
  52. package/dist/react/components/graphics/GraphicViewer.d.ts +10 -10
  53. package/dist/react/components/graphics/GraphicViewer.js +29 -29
  54. package/dist/react/components/graphics/GraphicsTabViewer.d.ts +17 -17
  55. package/dist/react/components/graphics/GraphicsTabViewer.js +90 -90
  56. package/dist/react/components/navigation/BasicLayout.d.ts +41 -41
  57. package/dist/react/components/navigation/BasicLayout.js +155 -155
  58. package/dist/react/components/navigation/HeaderSiderLayout.d.ts +13 -13
  59. package/dist/react/components/navigation/HeaderSiderLayout.js +110 -110
  60. package/dist/react/components/navigation/MenuPage.d.ts +37 -37
  61. package/dist/react/components/navigation/MenuPage.js +36 -36
  62. package/dist/react/components/navigation/MenuTrigger.d.ts +9 -9
  63. package/dist/react/components/navigation/MenuTrigger.js +33 -33
  64. package/dist/react/components/navigation/ReactRouterHeaderSiderLayout.d.ts +11 -11
  65. package/dist/react/components/navigation/ReactRouterHeaderSiderLayout.js +25 -25
  66. package/dist/react/components/navigation/ReactRouterLayout.d.ts +35 -35
  67. package/dist/react/components/navigation/ReactRouterLayout.js +113 -117
  68. package/dist/react/components/navigation/ReactRouterLayout.js.map +1 -1
  69. package/dist/react/components/navigation/customRouting/Router.d.ts +12 -12
  70. package/dist/react/components/navigation/customRouting/Router.js +45 -45
  71. package/dist/react/components/navigation/customRouting/RouterLayout.d.ts +11 -11
  72. package/dist/react/components/navigation/customRouting/RouterLayout.js +61 -61
  73. package/dist/react/components/resolvable/configurationForm/ConfigurationForm.d.ts +27 -27
  74. package/dist/react/components/resolvable/configurationForm/ConfigurationForm.js +95 -95
  75. package/dist/react/components/resolvable/configurationForm/ConfigurationFormEntry.d.ts +16 -16
  76. package/dist/react/components/resolvable/configurationForm/ConfigurationFormEntry.js +88 -88
  77. package/dist/react/components/resolvable/configurationForm/getSectionDefault.d.ts +16 -16
  78. package/dist/react/components/resolvable/configurationForm/getSectionDefault.js +99 -99
  79. package/dist/react/hooks/useFin5BinUrl.d.ts +6 -6
  80. package/dist/react/hooks/useFin5BinUrl.js +15 -15
  81. package/dist_es/fantomProps/createFin5Props/index.d.ts +12 -12
  82. package/dist_es/fantomProps/createFin5Props/index.js +140 -140
  83. package/dist_es/fantomProps/createFin5Props/index.js.map +0 -0
  84. package/dist_es/fantomProps/createFin5Props/runCreateFin5Props.d.ts +2 -2
  85. package/dist_es/fantomProps/createFin5Props/runCreateFin5Props.js +11 -11
  86. package/dist_es/fantomProps/createFin5Props/runCreateFin5Props.js.map +0 -0
  87. package/dist_es/fantomProps/fantomPropsToObject.d.ts +8 -8
  88. package/dist_es/fantomProps/fantomPropsToObject.js +178 -178
  89. package/dist_es/fantomProps/fantomPropsToObject.js.map +0 -0
  90. package/dist_es/fantomProps/generateJsonFromFantomPropsFile.d.ts +4 -4
  91. package/dist_es/fantomProps/generateJsonFromFantomPropsFile.js +12 -12
  92. package/dist_es/fantomProps/generateJsonFromFantomPropsFile.js.map +0 -0
  93. package/dist_es/fantomProps/localePropsToJson.d.ts +1 -1
  94. package/dist_es/fantomProps/localePropsToJson.js +21 -21
  95. package/dist_es/fantomProps/localePropsToJson.js.map +0 -0
  96. package/dist_es/fantomProps/readFantomPropsFile.d.ts +5 -5
  97. package/dist_es/fantomProps/readFantomPropsFile.js +35 -35
  98. package/dist_es/fantomProps/readFantomPropsFile.js.map +0 -0
  99. package/dist_es/fin5Top/fin5FileUpload.d.ts +24 -24
  100. package/dist_es/fin5Top/fin5FileUpload.js +47 -47
  101. package/dist_es/fin5Top/fin5Top.d.ts +115 -115
  102. package/dist_es/fin5Top/fin5Top.js +54 -54
  103. package/dist_es/fin5Top/fin5Top.js.map +0 -0
  104. package/dist_es/fin5Top/finEdge2Cloud.d.ts +6 -6
  105. package/dist_es/fin5Top/finEdge2Cloud.js +11 -11
  106. package/dist_es/fin5Top/getFin5BinUrl.d.ts +2 -2
  107. package/dist_es/fin5Top/getFin5BinUrl.js +5 -5
  108. package/dist_es/fin5Top/getFin5BinUrl.js.map +0 -0
  109. package/dist_es/fin5Top/openFin5Alarm.d.ts +22 -22
  110. package/dist_es/fin5Top/openFin5Alarm.js +19 -19
  111. package/dist_es/fin5Top/openFin5Alarm.js.map +0 -0
  112. package/dist_es/fin5Top/openFin5Historian.d.ts +3 -3
  113. package/dist_es/fin5Top/openFin5Historian.js +15 -15
  114. package/dist_es/fin5Top/openFin5Historian.js.map +0 -0
  115. package/dist_es/fin5Top/useFin5AppURLHashParameter.d.ts +18 -18
  116. package/dist_es/fin5Top/useFin5AppURLHashParameter.js +119 -119
  117. package/dist_es/fin5Top/useFin5AppURLHashParameter.js.map +0 -0
  118. package/dist_es/index.d.ts +30 -30
  119. package/dist_es/index.js +48 -48
  120. package/dist_es/index.js.map +0 -0
  121. package/dist_es/jobs/jobUtils.d.ts +14 -14
  122. package/dist_es/jobs/jobUtils.js +9 -9
  123. package/dist_es/react/app/Fin5AppContainer.d.ts +36 -36
  124. package/dist_es/react/app/Fin5AppContainer.js +73 -73
  125. package/dist_es/react/app/Fin5AppContainer.jsx +0 -0
  126. package/dist_es/react/app/Fin5AppContainer.jsx.map +0 -0
  127. package/dist_es/react/app/Fin5AppRootStore.d.ts +39 -39
  128. package/dist_es/react/app/Fin5AppRootStore.js +65 -65
  129. package/dist_es/react/app/Fin5AppRootStore.js.map +0 -0
  130. package/dist_es/react/components/ErrorBoundary.d.ts +57 -57
  131. package/dist_es/react/components/ErrorBoundary.js +123 -123
  132. package/dist_es/react/components/ErrorBoundary.jsx +0 -0
  133. package/dist_es/react/components/ErrorBoundary.jsx.map +0 -0
  134. package/dist_es/react/components/ErrorDisplayer.d.ts +19 -19
  135. package/dist_es/react/components/ErrorDisplayer.js +28 -28
  136. package/dist_es/react/components/ErrorDisplayer.jsx +0 -0
  137. package/dist_es/react/components/ErrorDisplayer.jsx.map +0 -0
  138. package/dist_es/react/components/Loader.d.ts +9 -9
  139. package/dist_es/react/components/Loader.js +12 -12
  140. package/dist_es/react/components/Loader.jsx +1 -1
  141. package/dist_es/react/components/Loader.jsx.map +1 -1
  142. package/dist_es/react/components/LoadingSpinner.d.ts +2 -2
  143. package/dist_es/react/components/LoadingSpinner.js +20 -20
  144. package/dist_es/react/components/LoadingSpinner.jsx +4 -3
  145. package/dist_es/react/components/LoadingSpinner.jsx.map +1 -1
  146. package/dist_es/react/components/RecordImage.d.ts +20 -20
  147. package/dist_es/react/components/RecordImage.js +24 -24
  148. package/dist_es/react/components/charts/QRCode.d.ts +25 -25
  149. package/dist_es/react/components/charts/QRCode.js +53 -53
  150. package/dist_es/react/components/charts/pie/PieChart.d.ts +93 -93
  151. package/dist_es/react/components/charts/pie/PieChart.js +175 -175
  152. package/dist_es/react/components/charts/pie/SimplePieChart.d.ts +20 -20
  153. package/dist_es/react/components/charts/pie/SimplePieChart.js +25 -25
  154. package/dist_es/react/components/graphics/GraphicViewer.d.ts +10 -10
  155. package/dist_es/react/components/graphics/GraphicViewer.js +22 -22
  156. package/dist_es/react/components/graphics/GraphicsTabViewer.d.ts +17 -17
  157. package/dist_es/react/components/graphics/GraphicsTabViewer.js +60 -60
  158. package/dist_es/react/components/navigation/BasicLayout.d.ts +41 -41
  159. package/dist_es/react/components/navigation/BasicLayout.js +124 -124
  160. package/dist_es/react/components/navigation/BasicLayout.jsx +7 -35
  161. package/dist_es/react/components/navigation/BasicLayout.jsx.map +1 -1
  162. package/dist_es/react/components/navigation/HeaderSiderLayout.d.ts +13 -13
  163. package/dist_es/react/components/navigation/HeaderSiderLayout.js +80 -80
  164. package/dist_es/react/components/navigation/MenuPage.d.ts +37 -37
  165. package/dist_es/react/components/navigation/MenuPage.js +30 -30
  166. package/dist_es/react/components/navigation/MenuPage.jsx +0 -0
  167. package/dist_es/react/components/navigation/MenuPage.jsx.map +1 -1
  168. package/dist_es/react/components/navigation/MenuTrigger.d.ts +9 -9
  169. package/dist_es/react/components/navigation/MenuTrigger.js +28 -28
  170. package/dist_es/react/components/navigation/ReactRouterHeaderSiderLayout.d.ts +11 -11
  171. package/dist_es/react/components/navigation/ReactRouterHeaderSiderLayout.js +18 -18
  172. package/dist_es/react/components/navigation/ReactRouterLayout.d.ts +35 -35
  173. package/dist_es/react/components/navigation/ReactRouterLayout.js +81 -85
  174. package/dist_es/react/components/navigation/ReactRouterLayout.js.map +1 -1
  175. package/dist_es/react/components/navigation/Router.d.ts +0 -0
  176. package/dist_es/react/components/navigation/Router.jsx +1 -1
  177. package/dist_es/react/components/navigation/Router.jsx.map +1 -1
  178. package/dist_es/react/components/navigation/customRouting/Router.d.ts +12 -12
  179. package/dist_es/react/components/navigation/customRouting/Router.js +18 -18
  180. package/dist_es/react/components/navigation/customRouting/RouterLayout.d.ts +11 -11
  181. package/dist_es/react/components/navigation/customRouting/RouterLayout.js +34 -34
  182. package/dist_es/react/components/resolvable/configurationForm/ConfigurationForm.d.ts +27 -27
  183. package/dist_es/react/components/resolvable/configurationForm/ConfigurationForm.js +64 -64
  184. package/dist_es/react/components/resolvable/configurationForm/ConfigurationFormEntry.d.ts +16 -16
  185. package/dist_es/react/components/resolvable/configurationForm/ConfigurationFormEntry.js +58 -58
  186. package/dist_es/react/components/resolvable/configurationForm/getSectionDefault.d.ts +16 -16
  187. package/dist_es/react/components/resolvable/configurationForm/getSectionDefault.js +94 -94
  188. package/dist_es/react/hooks/useFin5BinUrl.d.ts +6 -6
  189. package/dist_es/react/hooks/useFin5BinUrl.js +11 -11
  190. package/package.json +13 -13
  191. package/dist_es/react/components/graphics/GraphicViewer.jsx +0 -23
  192. package/dist_es/react/components/graphics/GraphicViewer.jsx.map +0 -1
  193. package/dist_es/react/components/graphics/GraphicsTabViewer.jsx +0 -63
  194. package/dist_es/react/components/graphics/GraphicsTabViewer.jsx.map +0 -1
  195. package/dist_es/react/components/navigation/Router.js +0 -19
  196. package/dist_es/react/components/navigation/Router.js.map +0 -1
  197. package/dist_es/react/components/navigation/react-router/BasicLayout.d.ts +0 -23
  198. package/dist_es/react/components/navigation/react-router/BasicLayout.js +0 -82
  199. package/dist_es/react/components/navigation/react-router/BasicLayout.js.map +0 -1
  200. package/dist_es/react/components/navigation/react-router/ReactRouterBasicLayout.d.ts +0 -24
  201. package/dist_es/react/components/navigation/react-router/ReactRouterBasicLayout.js +0 -82
  202. package/dist_es/react/components/navigation/react-router/ReactRouterBasicLayout.js.map +0 -1
@@ -1,35 +1,35 @@
1
- import type { Location } from '@remix-run/router';
2
- import React from 'react';
3
- import { NavigateFunction } from 'react-router';
4
- import { BasicLayoutProps } from './BasicLayout';
5
- import { MenuPage } from './MenuPage';
6
- export declare type ReactRouterMenuPage = MenuPage & {
7
- route: string;
8
- };
9
- export interface ReactRouterLayoutProps extends BasicLayoutProps<ReactRouterMenuPage> {
10
- isSelectedRoute?: (page: ReactRouterMenuPage, location: Location) => boolean;
11
- }
12
- /**
13
- * This hook can be used with react-router/BasicLayout,
14
- * to ensure FIN5 URL is aligned with the internal frame URL.
15
- */
16
- export declare const useLocationUpdate: () => void;
17
- export declare const useSelectedRoutes: (pages: ReactRouterMenuPage[], isSelectedRoute?: (page: ReactRouterMenuPage, location: Location) => boolean) => string[];
18
- /**
19
- * If we are inside a frame (FIN5), the route is left as is.
20
- * If we are outside FIN5 frame, the route needs to be prefixed with a segment containing the project name.
21
- * @param route
22
- * @returns the correct route for the environment
23
- */
24
- export declare const getRoute: (route: string) => string;
25
- /**
26
- * Create a map that holds the page key and its related route.
27
- * @param pages
28
- * @returns the map page key - route
29
- */
30
- export declare const useGetPageKeyRouteMap: (pages: ReactRouterMenuPage[]) => Map<string, string>;
31
- export declare const useDefaultOnSelect: (navigate: NavigateFunction, pageKeyRouteMap: Map<string, string>, pages: ReactRouterMenuPage[]) => (key: string) => void;
32
- /**
33
- * Basic layout that uses React Router.
34
- */
35
- export declare const ReactRouterLayout: React.FC<ReactRouterLayoutProps>;
1
+ import type { Location } from '@remix-run/router';
2
+ import React from 'react';
3
+ import { NavigateFunction } from 'react-router';
4
+ import { BasicLayoutProps } from './BasicLayout';
5
+ import { MenuPage } from './MenuPage';
6
+ export declare type ReactRouterMenuPage = MenuPage & {
7
+ route: string;
8
+ };
9
+ export interface ReactRouterLayoutProps extends BasicLayoutProps<ReactRouterMenuPage> {
10
+ isSelectedRoute?: (page: ReactRouterMenuPage, location: Location) => boolean;
11
+ }
12
+ /**
13
+ * This hook can be used with react-router/BasicLayout,
14
+ * to ensure FIN5 URL is aligned with the internal frame URL.
15
+ */
16
+ export declare const useLocationUpdate: () => void;
17
+ export declare const useSelectedRoutes: (pages: ReactRouterMenuPage[], isSelectedRoute?: (page: ReactRouterMenuPage, location: Location) => boolean) => string[];
18
+ /**
19
+ * If we are inside a frame (FIN5), the route is left as is.
20
+ * If we are outside FIN5 frame, the route needs to be prefixed with a segment containing the project name.
21
+ * @param route
22
+ * @returns the correct route for the environment
23
+ */
24
+ export declare const getRoute: (route: string) => string;
25
+ /**
26
+ * Create a map that holds the page key and its related route.
27
+ * @param pages
28
+ * @returns the map page key - route
29
+ */
30
+ export declare const useGetPageKeyRouteMap: (pages: ReactRouterMenuPage[]) => Map<string, string>;
31
+ export declare const useDefaultOnSelect: (navigate: NavigateFunction, pageKeyRouteMap: Map<string, string>, pages: ReactRouterMenuPage[]) => (key: string) => void;
32
+ /**
33
+ * Basic layout that uses React Router.
34
+ */
35
+ export declare const ReactRouterLayout: React.FC<ReactRouterLayoutProps>;
@@ -1,86 +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
- const defaultIsSelectedRoute = (page, location) => {
31
- const currentUrl = location.pathname + location.search;
32
- return currentUrl.includes(page.route);
33
- };
34
- export const useSelectedRoutes = (pages, isSelectedRoute = defaultIsSelectedRoute) => {
35
- const location = useLocation();
36
- const flatPages = useMemo(() => pageTreeToPageList(pages), [pages]);
37
- return useMemo(() => {
38
- return flatPages
39
- .filter((page) => isSelectedRoute(page, location))
40
- .map((page) => page.key);
41
- }, [location, flatPages, isSelectedRoute]);
42
- };
43
- /**
44
- * If we are inside a frame (FIN5), the route is left as is.
45
- * If we are outside FIN5 frame, the route needs to be prefixed with a segment containing the project name.
46
- * @param route
47
- * @returns the correct route for the environment
48
- */
49
- export const getRoute = (route) => {
50
- const prefixedRoute = route.startsWith('/') ? route : `/${route}`;
51
- return !IN_IFRAME ? `/proj/:projectName${prefixedRoute}` : prefixedRoute;
52
- };
53
- /**
54
- * Create a map that holds the page key and its related route.
55
- * @param pages
56
- * @returns the map page key - route
57
- */
58
- export const useGetPageKeyRouteMap = (pages) => useMemo(() => {
59
- const flatPages = pageTreeToPageList(pages);
60
- const result = new Map();
61
- flatPages.forEach((page) => {
62
- result.set(page.key, page.route);
63
- });
64
- return result;
65
- }, [pages]);
66
- export const useDefaultOnSelect = (navigate, pageKeyRouteMap, pages) => useCallback((key) => {
67
- const route = pageKeyRouteMap.get(key);
68
- if (route) {
69
- navigate(route);
70
- }
71
- else {
72
- console.warn('Could not find route for page key', key, 'pages', pages);
73
- }
74
- }, [navigate, pageKeyRouteMap]);
75
- /**
76
- * Basic layout that uses React Router.
77
- */
78
- export const ReactRouterLayout = ({ isSelectedRoute, pages = [], onSelect, ...otherProps }) => {
79
- const navigate = useNavigate();
80
- const selectedRoutes = useSelectedRoutes(pages, isSelectedRoute);
81
- const pageKeyRouteMap = useGetPageKeyRouteMap(pages);
82
- const defaultOnSelect = useDefaultOnSelect(navigate, pageKeyRouteMap, pages);
83
- return (React.createElement(BasicLayout, { pages: pages, onSelect: onSelect ?? defaultOnSelect, selectedPages: selectedRoutes, ...otherProps },
84
- React.createElement(Outlet, null)));
85
- };
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
+ };
86
82
  //# sourceMappingURL=ReactRouterLayout.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"ReactRouterLayout.js","sourceRoot":"","sources":["../../../../src/react/components/navigation/ReactRouterLayout.tsx"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"ReactRouterLayout.js","sourceRoot":"","sources":["../../../../src/react/components/navigation/ReactRouterLayout.tsx"],"names":[],"mappings":"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"}
File without changes
@@ -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,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
+ {"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,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
@@ -1,27 +1,27 @@
1
- /// <reference types="react" />
2
- import { ParametersOfSection, UiElementData } from '@j2inn/resolvable-ui-elements';
3
- import { HDict } from 'haystack-core';
4
- declare type Layout = 'horizontal' | 'vertical';
5
- interface ConfigurationFormProps<T extends UiElementData> {
6
- section: T;
7
- params: ParametersOfSection<T>;
8
- readOnlySection?: UiElementData;
9
- onSave: (config: HDict) => void | Promise<unknown>;
10
- saveText?: string;
11
- formatKey?: (key: string) => string;
12
- options?: HDict;
13
- layout?: Layout;
14
- className?: string;
15
- entryClassName?: string;
16
- saveBtnClassName?: string;
17
- animateSaveButton?: boolean;
18
- }
19
- export declare const ConfigurationForm: <T extends UiElementData<import("@j2inn/resolvable-ui-elements/dist/resolvableElements/elements/UiElement").UiElementMeta>>({ section, params, readOnlySection, onSave, formatKey, saveText, options, layout, className, entryClassName, saveBtnClassName, animateSaveButton, }: ConfigurationFormProps<T>) => JSX.Element;
20
- interface ConfigurationFormReadOnlyEntriesProps<T extends UiElementData> {
21
- params: ParametersOfSection<T>;
22
- readOnlySection: T;
23
- formatKey?: (key: string) => string;
24
- className?: string;
25
- }
26
- export declare const ConfigurationFormReadOnlyEntries: <T extends UiElementData<import("@j2inn/resolvable-ui-elements/dist/resolvableElements/elements/UiElement").UiElementMeta>>({ readOnlySection, params, formatKey, className, }: ConfigurationFormReadOnlyEntriesProps<T>) => JSX.Element;
27
- export {};
1
+ /// <reference types="react" />
2
+ import { ParametersOfSection, UiElementData } from '@j2inn/resolvable-ui-elements';
3
+ import { HDict } from 'haystack-core';
4
+ declare type Layout = 'horizontal' | 'vertical';
5
+ interface ConfigurationFormProps<T extends UiElementData> {
6
+ section: T;
7
+ params: ParametersOfSection<T>;
8
+ readOnlySection?: UiElementData;
9
+ onSave: (config: HDict) => void | Promise<unknown>;
10
+ saveText?: string;
11
+ formatKey?: (key: string) => string;
12
+ options?: HDict;
13
+ layout?: Layout;
14
+ className?: string;
15
+ entryClassName?: string;
16
+ saveBtnClassName?: string;
17
+ animateSaveButton?: boolean;
18
+ }
19
+ export declare const ConfigurationForm: <T extends UiElementData<import("@j2inn/resolvable-ui-elements/dist/resolvableElements/elements/UiElement").UiElementMeta>>({ section, params, readOnlySection, onSave, formatKey, saveText, options, layout, className, entryClassName, saveBtnClassName, animateSaveButton, }: ConfigurationFormProps<T>) => JSX.Element;
20
+ interface ConfigurationFormReadOnlyEntriesProps<T extends UiElementData> {
21
+ params: ParametersOfSection<T>;
22
+ readOnlySection: T;
23
+ formatKey?: (key: string) => string;
24
+ className?: string;
25
+ }
26
+ export declare const ConfigurationFormReadOnlyEntries: <T extends UiElementData<import("@j2inn/resolvable-ui-elements/dist/resolvableElements/elements/UiElement").UiElementMeta>>({ readOnlySection, params, formatKey, className, }: ConfigurationFormReadOnlyEntriesProps<T>) => JSX.Element;
27
+ export {};
@@ -1,65 +1,65 @@
1
- /*
2
- * Copyright (c) 2023, J2 Innovations. All Rights Reserved
3
- */
4
- import { useResolveSection, } from '@j2inn/resolvable-ui-elements';
5
- import { Button } from '@j2inn/ui';
6
- import cn from 'classnames';
7
- import { HDict } from 'haystack-core';
8
- import React, { useMemo, useState } from 'react';
9
- import { createUseStyles } from 'react-jss';
10
- import { ConfigurationFormEntry, } from './ConfigurationFormEntry';
11
- import { getSectionDefault } from './getSectionDefault';
12
- const useStyles = createUseStyles({
13
- formGrid: ({ layout }) => ({
14
- display: 'grid',
15
- gridTemplateColumns: layout === 'horizontal' ? '1fr 1fr' : '1fr',
16
- gap: '0.5em 2em',
17
- }),
18
- saveButtonRow: ({ layout }) => ({
19
- gridColumn: layout === 'horizontal' ? 'span 2' : 'span 1',
20
- transition: 'transform 0.75s, max-height 0.75s, opacity 0.75s',
21
- maxHeight: 200,
22
- transform: 'scaleY(1)',
23
- marginTop: '1em',
24
- }),
25
- saveButtonRowNotVisible: {
26
- transform: 'scaleY(0)',
27
- maxHeight: 0,
28
- opacity: 0,
29
- },
30
- saveButton: {
31
- transition: 'all 0.75s',
32
- width: 120,
33
- float: 'right',
34
- },
35
- });
36
- export const ConfigurationForm = ({ section, params, readOnlySection, onSave, formatKey, saveText, options, layout = 'horizontal', className, entryClassName, saveBtnClassName, animateSaveButton = true, }) => {
37
- const classes = useStyles({ layout });
38
- const [resolvedSection] = useResolveSection(section, params);
39
- const entries = useMemo(() => getSectionDefault(section), [section]);
40
- const [changes, setChanges] = useState();
41
- const [canSave, setCanSave] = useState(false);
42
- const [isSaving, setIsSaving] = useState(false);
43
- return (React.createElement("div", { className: cn(classes.formGrid, className) },
44
- Object.entries(entries).map(([key, defaultValue]) => (React.createElement(ConfigurationFormEntry, { key: key, options: options?.get(key), name: formatKey ? formatKey(key) : key, value: resolvedSection[key] ?? defaultValue, onChange: (val) => {
45
- setChanges({ ...changes, [key]: val });
46
- setCanSave(true);
47
- }, className: entryClassName }))),
48
- readOnlySection && (React.createElement(ConfigurationFormReadOnlyEntries, { readOnlySection: readOnlySection, formatKey: formatKey, params: params, className: entryClassName })),
49
- React.createElement("div", { className: cn(classes.saveButtonRow, {
50
- [classes.saveButtonRowNotVisible]: animateSaveButton && !canSave,
51
- }) },
52
- React.createElement(Button, { disabled: !canSave, className: cn(classes.saveButton, saveBtnClassName), type: 'primary', loading: isSaving, onClick: async () => {
53
- setIsSaving(true);
54
- await onSave(HDict.make(changes));
55
- setChanges(undefined); // Reset changes dict
56
- setIsSaving(false);
57
- setCanSave(false);
58
- } }, saveText ?? 'Save'))));
59
- };
60
- export const ConfigurationFormReadOnlyEntries = ({ readOnlySection, params, formatKey, className, }) => {
61
- const [resolvedReadOnlySection] = useResolveSection(readOnlySection, params);
62
- return (React.createElement(React.Fragment, null, resolvedReadOnlySection &&
63
- Object.entries(resolvedReadOnlySection).map(([key, value]) => (React.createElement(ConfigurationFormEntry, { key: key, name: formatKey ? formatKey(key) : key, disabled: true, value: value, className: className })))));
64
- };
1
+ /*
2
+ * Copyright (c) 2023, J2 Innovations. All Rights Reserved
3
+ */
4
+ import { useResolveSection, } from '@j2inn/resolvable-ui-elements';
5
+ import { Button } from '@j2inn/ui';
6
+ import cn from 'classnames';
7
+ import { HDict } from 'haystack-core';
8
+ import React, { useMemo, useState } from 'react';
9
+ import { createUseStyles } from 'react-jss';
10
+ import { ConfigurationFormEntry, } from './ConfigurationFormEntry';
11
+ import { getSectionDefault } from './getSectionDefault';
12
+ const useStyles = createUseStyles({
13
+ formGrid: ({ layout }) => ({
14
+ display: 'grid',
15
+ gridTemplateColumns: layout === 'horizontal' ? '1fr 1fr' : '1fr',
16
+ gap: '0.5em 2em',
17
+ }),
18
+ saveButtonRow: ({ layout }) => ({
19
+ gridColumn: layout === 'horizontal' ? 'span 2' : 'span 1',
20
+ transition: 'transform 0.75s, max-height 0.75s, opacity 0.75s',
21
+ maxHeight: 200,
22
+ transform: 'scaleY(1)',
23
+ marginTop: '1em',
24
+ }),
25
+ saveButtonRowNotVisible: {
26
+ transform: 'scaleY(0)',
27
+ maxHeight: 0,
28
+ opacity: 0,
29
+ },
30
+ saveButton: {
31
+ transition: 'all 0.75s',
32
+ width: 120,
33
+ float: 'right',
34
+ },
35
+ });
36
+ export const ConfigurationForm = ({ section, params, readOnlySection, onSave, formatKey, saveText, options, layout = 'horizontal', className, entryClassName, saveBtnClassName, animateSaveButton = true, }) => {
37
+ const classes = useStyles({ layout });
38
+ const [resolvedSection] = useResolveSection(section, params);
39
+ const entries = useMemo(() => getSectionDefault(section), [section]);
40
+ const [changes, setChanges] = useState();
41
+ const [canSave, setCanSave] = useState(false);
42
+ const [isSaving, setIsSaving] = useState(false);
43
+ return (React.createElement("div", { className: cn(classes.formGrid, className) },
44
+ Object.entries(entries).map(([key, defaultValue]) => (React.createElement(ConfigurationFormEntry, { key: key, options: options?.get(key), name: formatKey ? formatKey(key) : key, value: resolvedSection[key] ?? defaultValue, onChange: (val) => {
45
+ setChanges({ ...changes, [key]: val });
46
+ setCanSave(true);
47
+ }, className: entryClassName }))),
48
+ readOnlySection && (React.createElement(ConfigurationFormReadOnlyEntries, { readOnlySection: readOnlySection, formatKey: formatKey, params: params, className: entryClassName })),
49
+ React.createElement("div", { className: cn(classes.saveButtonRow, {
50
+ [classes.saveButtonRowNotVisible]: animateSaveButton && !canSave,
51
+ }) },
52
+ React.createElement(Button, { disabled: !canSave, className: cn(classes.saveButton, saveBtnClassName), type: 'primary', loading: isSaving, onClick: async () => {
53
+ setIsSaving(true);
54
+ await onSave(HDict.make(changes));
55
+ setChanges(undefined); // Reset changes dict
56
+ setIsSaving(false);
57
+ setCanSave(false);
58
+ } }, saveText ?? 'Save'))));
59
+ };
60
+ export const ConfigurationFormReadOnlyEntries = ({ readOnlySection, params, formatKey, className, }) => {
61
+ const [resolvedReadOnlySection] = useResolveSection(readOnlySection, params);
62
+ return (React.createElement(React.Fragment, null, resolvedReadOnlySection &&
63
+ Object.entries(resolvedReadOnlySection).map(([key, value]) => (React.createElement(ConfigurationFormEntry, { key: key, name: formatKey ? formatKey(key) : key, disabled: true, value: value, className: className })))));
64
+ };
65
65
  //# sourceMappingURL=ConfigurationForm.js.map