@j2inn/fin5-ui-utils 8.2.0 → 9.0.0-beta.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 (243) hide show
  1. package/dist/fantomProps/createFin5Props/index.d.ts +12 -12
  2. package/dist/fantomProps/createFin5Props/index.js +146 -146
  3. package/dist/fantomProps/createFin5Props/index.js.map +1 -1
  4. package/dist/fantomProps/createFin5Props/runCreateFin5Props.d.ts +2 -2
  5. package/dist/fantomProps/createFin5Props/runCreateFin5Props.js +20 -20
  6. package/dist/fantomProps/createFin5Props/runCreateFin5Props.js.map +1 -1
  7. package/dist/fantomProps/fantomPropsToObject.d.ts +8 -8
  8. package/dist/fantomProps/fantomPropsToObject.js +182 -183
  9. package/dist/fantomProps/fantomPropsToObject.js.map +1 -1
  10. package/dist/fantomProps/generateJsonFromFantomPropsFile.d.ts +4 -4
  11. package/dist/fantomProps/generateJsonFromFantomPropsFile.js +51 -41
  12. package/dist/fantomProps/generateJsonFromFantomPropsFile.js.map +1 -1
  13. package/dist/fantomProps/localePropsToJson.d.ts +1 -1
  14. package/dist/fantomProps/localePropsToJson.js +60 -50
  15. package/dist/fantomProps/localePropsToJson.js.map +1 -1
  16. package/dist/fantomProps/readFantomPropsFile.d.ts +5 -5
  17. package/dist/fantomProps/readFantomPropsFile.js +74 -65
  18. package/dist/fantomProps/readFantomPropsFile.js.map +1 -1
  19. package/dist/fin5Top/fin5FileUpload.d.ts +24 -24
  20. package/dist/fin5Top/fin5FileUpload.js +51 -51
  21. package/dist/fin5Top/fin5FileUpload.js.map +1 -1
  22. package/dist/fin5Top/fin5Top.d.ts +188 -188
  23. package/dist/fin5Top/fin5Top.js +86 -86
  24. package/dist/fin5Top/fin5Top.js.map +1 -1
  25. package/dist/fin5Top/finEdge2Cloud.d.ts +6 -6
  26. package/dist/fin5Top/finEdge2Cloud.js +15 -15
  27. package/dist/fin5Top/getFin5BinUrl.d.ts +2 -2
  28. package/dist/fin5Top/getFin5BinUrl.js +9 -9
  29. package/dist/fin5Top/openFin5Alarm.d.ts +22 -22
  30. package/dist/fin5Top/openFin5Alarm.js +23 -23
  31. package/dist/fin5Top/openFin5Alarm.js.map +1 -1
  32. package/dist/fin5Top/openFin5Historian.d.ts +3 -3
  33. package/dist/fin5Top/openFin5Historian.js +19 -19
  34. package/dist/fin5Top/openFin5Historian.js.map +1 -1
  35. package/dist/fin5Top/useFin5AppURLHashParameter.d.ts +18 -18
  36. package/dist/fin5Top/useFin5AppURLHashParameter.js +133 -133
  37. package/dist/fin5Top/useFin5AppURLHashParameter.js.map +1 -1
  38. package/dist/index.d.ts +35 -35
  39. package/dist/index.js +69 -69
  40. package/dist/jobs/jobUtils.d.ts +14 -14
  41. package/dist/jobs/jobUtils.js +15 -15
  42. package/dist/jobs/jobUtils.js.map +1 -1
  43. package/dist/react/app/Fin5AppContainer.d.ts +36 -36
  44. package/dist/react/app/Fin5AppContainer.js +171 -161
  45. package/dist/react/app/Fin5AppContainer.js.map +1 -1
  46. package/dist/react/app/Fin5AppRootStore.d.ts +42 -42
  47. package/dist/react/app/Fin5AppRootStore.js +114 -114
  48. package/dist/react/app/Fin5AppRootStore.js.map +1 -1
  49. package/dist/react/components/ErrorBoundary.d.ts +57 -57
  50. package/dist/react/components/ErrorBoundary.js +160 -150
  51. package/dist/react/components/ErrorBoundary.js.map +1 -1
  52. package/dist/react/components/ErrorDisplayer.d.ts +19 -19
  53. package/dist/react/components/ErrorDisplayer.js +36 -36
  54. package/dist/react/components/ErrorDisplayer.js.map +1 -1
  55. package/dist/react/components/Loader.d.ts +9 -9
  56. package/dist/react/components/Loader.js +17 -17
  57. package/dist/react/components/LoadingSpinner.d.ts +2 -2
  58. package/dist/react/components/LoadingSpinner.js +27 -27
  59. package/dist/react/components/RecordImage.d.ts +20 -20
  60. package/dist/react/components/RecordImage.js +61 -51
  61. package/dist/react/components/RecordImage.js.map +1 -1
  62. package/dist/react/components/charts/QRCode.d.ts +25 -25
  63. package/dist/react/components/charts/QRCode.js +92 -82
  64. package/dist/react/components/charts/QRCode.js.map +1 -1
  65. package/dist/react/components/charts/line-bar/Chart.d.ts +166 -166
  66. package/dist/react/components/charts/line-bar/Chart.js +452 -442
  67. package/dist/react/components/charts/line-bar/Chart.js.map +1 -1
  68. package/dist/react/components/charts/line-bar/HGridChart.d.ts +58 -58
  69. package/dist/react/components/charts/line-bar/HGridChart.js +295 -285
  70. package/dist/react/components/charts/line-bar/HGridChart.js.map +1 -1
  71. package/dist/react/components/charts/pie/PieChart.d.ts +94 -94
  72. package/dist/react/components/charts/pie/PieChart.js +214 -204
  73. package/dist/react/components/charts/pie/PieChart.js.map +1 -1
  74. package/dist/react/components/charts/pie/SimplePieChart.d.ts +21 -21
  75. package/dist/react/components/charts/pie/SimplePieChart.js +65 -55
  76. package/dist/react/components/charts/pie/SimplePieChart.js.map +1 -1
  77. package/dist/react/components/graphics/GraphicViewer.d.ts +10 -10
  78. package/dist/react/components/graphics/GraphicViewer.js +29 -29
  79. package/dist/react/components/graphics/GraphicsTabViewer.d.ts +17 -17
  80. package/dist/react/components/graphics/GraphicsTabViewer.js +100 -90
  81. package/dist/react/components/graphics/GraphicsTabViewer.js.map +1 -1
  82. package/dist/react/components/makeCustomElement.d.ts +16 -16
  83. package/dist/react/components/makeCustomElement.js +150 -150
  84. package/dist/react/components/makeCustomElement.js.map +1 -1
  85. package/dist/react/components/navigation/BasicLayout.d.ts +41 -41
  86. package/dist/react/components/navigation/BasicLayout.js +165 -155
  87. package/dist/react/components/navigation/BasicLayout.js.map +1 -1
  88. package/dist/react/components/navigation/HeaderSiderLayout.d.ts +13 -13
  89. package/dist/react/components/navigation/HeaderSiderLayout.js +119 -110
  90. package/dist/react/components/navigation/HeaderSiderLayout.js.map +1 -1
  91. package/dist/react/components/navigation/MenuPage.d.ts +37 -37
  92. package/dist/react/components/navigation/MenuPage.js +35 -36
  93. package/dist/react/components/navigation/MenuPage.js.map +1 -1
  94. package/dist/react/components/navigation/MenuTrigger.d.ts +9 -9
  95. package/dist/react/components/navigation/MenuTrigger.js +33 -33
  96. package/dist/react/components/navigation/ReactRouterHeaderSiderLayout.d.ts +11 -11
  97. package/dist/react/components/navigation/ReactRouterHeaderSiderLayout.js +25 -25
  98. package/dist/react/components/navigation/ReactRouterHeaderSiderLayout.js.map +1 -1
  99. package/dist/react/components/navigation/ReactRouterLayout.d.ts +45 -46
  100. package/dist/react/components/navigation/ReactRouterLayout.js +142 -132
  101. package/dist/react/components/navigation/ReactRouterLayout.js.map +1 -1
  102. package/dist/react/components/navigation/customRouting/Router.d.ts +12 -12
  103. package/dist/react/components/navigation/customRouting/Router.js +54 -45
  104. package/dist/react/components/navigation/customRouting/Router.js.map +1 -1
  105. package/dist/react/components/navigation/customRouting/RouterLayout.d.ts +11 -11
  106. package/dist/react/components/navigation/customRouting/RouterLayout.js +71 -61
  107. package/dist/react/components/navigation/customRouting/RouterLayout.js.map +1 -1
  108. package/dist/react/components/resolvable/configurationForm/ConfigurationForm.d.ts +26 -27
  109. package/dist/react/components/resolvable/configurationForm/ConfigurationForm.js +105 -95
  110. package/dist/react/components/resolvable/configurationForm/ConfigurationForm.js.map +1 -1
  111. package/dist/react/components/resolvable/configurationForm/ConfigurationFormEntry.d.ts +15 -16
  112. package/dist/react/components/resolvable/configurationForm/ConfigurationFormEntry.js +98 -88
  113. package/dist/react/components/resolvable/configurationForm/ConfigurationFormEntry.js.map +1 -1
  114. package/dist/react/components/resolvable/configurationForm/getSectionDefault.d.ts +16 -16
  115. package/dist/react/components/resolvable/configurationForm/getSectionDefault.js +99 -99
  116. package/dist/react/components/resolvable/configurationForm/getSectionDefault.js.map +1 -1
  117. package/dist/react/hooks/useFin5BinUrl.d.ts +6 -6
  118. package/dist/react/hooks/useFin5BinUrl.js +15 -15
  119. package/dist/react/hooks/useFin5ColorScheme.d.ts +2 -2
  120. package/dist/react/hooks/useFin5ColorScheme.js +55 -56
  121. package/dist/react/hooks/useFin5ColorScheme.js.map +1 -1
  122. package/dist/react/hooks/useScreenSize.d.ts +7 -7
  123. package/dist/react/hooks/useScreenSize.js +31 -31
  124. package/dist_es/fantomProps/createFin5Props/index.d.ts +12 -12
  125. package/dist_es/fantomProps/createFin5Props/index.js +140 -140
  126. package/dist_es/fantomProps/createFin5Props/index.js.map +1 -1
  127. package/dist_es/fantomProps/createFin5Props/runCreateFin5Props.d.ts +2 -2
  128. package/dist_es/fantomProps/createFin5Props/runCreateFin5Props.js +15 -15
  129. package/dist_es/fantomProps/createFin5Props/runCreateFin5Props.js.map +1 -1
  130. package/dist_es/fantomProps/fantomPropsToObject.d.ts +8 -8
  131. package/dist_es/fantomProps/fantomPropsToObject.js +178 -178
  132. package/dist_es/fantomProps/fantomPropsToObject.js.map +1 -1
  133. package/dist_es/fantomProps/generateJsonFromFantomPropsFile.d.ts +4 -4
  134. package/dist_es/fantomProps/generateJsonFromFantomPropsFile.js +12 -12
  135. package/dist_es/fantomProps/localePropsToJson.d.ts +1 -1
  136. package/dist_es/fantomProps/localePropsToJson.js +21 -21
  137. package/dist_es/fantomProps/localePropsToJson.js.map +1 -1
  138. package/dist_es/fantomProps/readFantomPropsFile.d.ts +5 -5
  139. package/dist_es/fantomProps/readFantomPropsFile.js +38 -39
  140. package/dist_es/fantomProps/readFantomPropsFile.js.map +1 -1
  141. package/dist_es/fin5Top/fin5FileUpload.d.ts +24 -24
  142. package/dist_es/fin5Top/fin5FileUpload.js +47 -47
  143. package/dist_es/fin5Top/fin5FileUpload.js.map +1 -1
  144. package/dist_es/fin5Top/fin5Top.d.ts +188 -188
  145. package/dist_es/fin5Top/fin5Top.js +81 -81
  146. package/dist_es/fin5Top/fin5Top.js.map +1 -1
  147. package/dist_es/fin5Top/finEdge2Cloud.d.ts +6 -6
  148. package/dist_es/fin5Top/finEdge2Cloud.js +11 -11
  149. package/dist_es/fin5Top/getFin5BinUrl.d.ts +2 -2
  150. package/dist_es/fin5Top/getFin5BinUrl.js +5 -5
  151. package/dist_es/fin5Top/openFin5Alarm.d.ts +22 -22
  152. package/dist_es/fin5Top/openFin5Alarm.js +19 -19
  153. package/dist_es/fin5Top/openFin5Alarm.js.map +1 -1
  154. package/dist_es/fin5Top/openFin5Historian.d.ts +3 -3
  155. package/dist_es/fin5Top/openFin5Historian.js +15 -15
  156. package/dist_es/fin5Top/openFin5Historian.js.map +1 -1
  157. package/dist_es/fin5Top/useFin5AppURLHashParameter.d.ts +18 -18
  158. package/dist_es/fin5Top/useFin5AppURLHashParameter.js +124 -124
  159. package/dist_es/fin5Top/useFin5AppURLHashParameter.js.map +1 -1
  160. package/dist_es/index.d.ts +35 -35
  161. package/dist_es/index.js +53 -53
  162. package/dist_es/jobs/jobUtils.d.ts +14 -14
  163. package/dist_es/jobs/jobUtils.js +9 -9
  164. package/dist_es/react/app/Fin5AppContainer.d.ts +36 -36
  165. package/dist_es/react/app/Fin5AppContainer.js +132 -132
  166. package/dist_es/react/app/Fin5AppContainer.js.map +1 -1
  167. package/dist_es/react/app/Fin5AppRootStore.d.ts +42 -42
  168. package/dist_es/react/app/Fin5AppRootStore.js +110 -110
  169. package/dist_es/react/app/Fin5AppRootStore.js.map +1 -1
  170. package/dist_es/react/components/ErrorBoundary.d.ts +57 -57
  171. package/dist_es/react/components/ErrorBoundary.js +123 -123
  172. package/dist_es/react/components/ErrorDisplayer.d.ts +19 -19
  173. package/dist_es/react/components/ErrorDisplayer.js +28 -28
  174. package/dist_es/react/components/ErrorDisplayer.js.map +1 -1
  175. package/dist_es/react/components/Loader.d.ts +9 -9
  176. package/dist_es/react/components/Loader.js +12 -12
  177. package/dist_es/react/components/LoadingSpinner.d.ts +2 -2
  178. package/dist_es/react/components/LoadingSpinner.js +20 -20
  179. package/dist_es/react/components/RecordImage.d.ts +20 -20
  180. package/dist_es/react/components/RecordImage.js +24 -24
  181. package/dist_es/react/components/RecordImage.js.map +1 -1
  182. package/dist_es/react/components/charts/QRCode.d.ts +25 -25
  183. package/dist_es/react/components/charts/QRCode.js +52 -52
  184. package/dist_es/react/components/charts/QRCode.js.map +1 -1
  185. package/dist_es/react/components/charts/line-bar/Chart.d.ts +166 -166
  186. package/dist_es/react/components/charts/line-bar/Chart.js +415 -415
  187. package/dist_es/react/components/charts/line-bar/Chart.js.map +1 -1
  188. package/dist_es/react/components/charts/line-bar/HGridChart.d.ts +58 -58
  189. package/dist_es/react/components/charts/line-bar/HGridChart.js +250 -250
  190. package/dist_es/react/components/charts/line-bar/HGridChart.js.map +1 -1
  191. package/dist_es/react/components/charts/pie/PieChart.d.ts +94 -94
  192. package/dist_es/react/components/charts/pie/PieChart.js +177 -177
  193. package/dist_es/react/components/charts/pie/PieChart.js.map +1 -1
  194. package/dist_es/react/components/charts/pie/SimplePieChart.d.ts +21 -21
  195. package/dist_es/react/components/charts/pie/SimplePieChart.js +25 -25
  196. package/dist_es/react/components/graphics/GraphicViewer.d.ts +10 -10
  197. package/dist_es/react/components/graphics/GraphicViewer.js +22 -22
  198. package/dist_es/react/components/graphics/GraphicsTabViewer.d.ts +17 -17
  199. package/dist_es/react/components/graphics/GraphicsTabViewer.js +60 -60
  200. package/dist_es/react/components/graphics/GraphicsTabViewer.js.map +1 -1
  201. package/dist_es/react/components/makeCustomElement.d.ts +16 -16
  202. package/dist_es/react/components/makeCustomElement.js +142 -142
  203. package/dist_es/react/components/makeCustomElement.js.map +1 -1
  204. package/dist_es/react/components/navigation/BasicLayout.d.ts +41 -41
  205. package/dist_es/react/components/navigation/BasicLayout.js +124 -124
  206. package/dist_es/react/components/navigation/BasicLayout.js.map +1 -1
  207. package/dist_es/react/components/navigation/HeaderSiderLayout.d.ts +13 -13
  208. package/dist_es/react/components/navigation/HeaderSiderLayout.js +80 -80
  209. package/dist_es/react/components/navigation/HeaderSiderLayout.js.map +1 -1
  210. package/dist_es/react/components/navigation/MenuPage.d.ts +37 -37
  211. package/dist_es/react/components/navigation/MenuPage.js +30 -30
  212. package/dist_es/react/components/navigation/MenuPage.js.map +1 -1
  213. package/dist_es/react/components/navigation/MenuTrigger.d.ts +9 -9
  214. package/dist_es/react/components/navigation/MenuTrigger.js +28 -28
  215. package/dist_es/react/components/navigation/ReactRouterHeaderSiderLayout.d.ts +11 -11
  216. package/dist_es/react/components/navigation/ReactRouterHeaderSiderLayout.js +18 -18
  217. package/dist_es/react/components/navigation/ReactRouterHeaderSiderLayout.js.map +1 -1
  218. package/dist_es/react/components/navigation/ReactRouterLayout.d.ts +45 -46
  219. package/dist_es/react/components/navigation/ReactRouterLayout.js +99 -99
  220. package/dist_es/react/components/navigation/ReactRouterLayout.js.map +1 -1
  221. package/dist_es/react/components/navigation/customRouting/Router.d.ts +12 -12
  222. package/dist_es/react/components/navigation/customRouting/Router.js +18 -18
  223. package/dist_es/react/components/navigation/customRouting/Router.js.map +1 -1
  224. package/dist_es/react/components/navigation/customRouting/RouterLayout.d.ts +11 -11
  225. package/dist_es/react/components/navigation/customRouting/RouterLayout.js +34 -34
  226. package/dist_es/react/components/navigation/customRouting/RouterLayout.js.map +1 -1
  227. package/dist_es/react/components/resolvable/configurationForm/ConfigurationForm.d.ts +26 -27
  228. package/dist_es/react/components/resolvable/configurationForm/ConfigurationForm.js +64 -64
  229. package/dist_es/react/components/resolvable/configurationForm/ConfigurationForm.js.map +1 -1
  230. package/dist_es/react/components/resolvable/configurationForm/ConfigurationFormEntry.d.ts +15 -16
  231. package/dist_es/react/components/resolvable/configurationForm/ConfigurationFormEntry.js +58 -58
  232. package/dist_es/react/components/resolvable/configurationForm/ConfigurationFormEntry.js.map +1 -1
  233. package/dist_es/react/components/resolvable/configurationForm/getSectionDefault.d.ts +16 -16
  234. package/dist_es/react/components/resolvable/configurationForm/getSectionDefault.js +94 -94
  235. package/dist_es/react/components/resolvable/configurationForm/getSectionDefault.js.map +1 -1
  236. package/dist_es/react/hooks/useFin5BinUrl.d.ts +6 -6
  237. package/dist_es/react/hooks/useFin5BinUrl.js +11 -11
  238. package/dist_es/react/hooks/useFin5ColorScheme.d.ts +2 -2
  239. package/dist_es/react/hooks/useFin5ColorScheme.js +52 -52
  240. package/dist_es/react/hooks/useFin5ColorScheme.js.map +1 -1
  241. package/dist_es/react/hooks/useScreenSize.d.ts +7 -7
  242. package/dist_es/react/hooks/useScreenSize.js +27 -27
  243. package/package.json +26 -49
@@ -1,26 +1,26 @@
1
- /*
2
- * Copyright (c) 2023, J2 Innovations. All Rights Reserved
3
- */
4
- import * as am5 from '@amcharts/amcharts5';
5
- import am5themes_Animated from '@amcharts/amcharts5/themes/Animated';
6
- import React from 'react';
7
- import { PieChart } from './PieChart';
8
- /**
9
- * Simplified version of the pie chart for quick usage and easy configuration.
10
- * Serves also as an example of how to use the underlying PieChart component.
11
- */
12
- export const SimplePieChart = ({ data, donut, animated, colorPalette, tooltipFormat, numberFormat = {
13
- style: 'decimal',
14
- minimumFractionDigits: 0,
15
- maximumFractionDigits: 1,
16
- }, hideLabels, DOMtargetId, }) => {
17
- return (React.createElement(PieChart, { DOMtargetId: DOMtargetId, colorPalette: colorPalette, data: data, chartThemes: animated ? [am5themes_Animated] : undefined, chartSettingsProvider: () => ({
18
- innerRadius: donut ? am5.percent(55) : undefined,
19
- }), numberFormat: numberFormat, legendSettingsProvider: () => ({
20
- centerX: am5.percent(50),
21
- x: am5.percent(50),
22
- }), seriesLabelsSettings: { forceHidden: hideLabels }, seriesSettings: { alignLabels: false }, slicesSettings: {
23
- tooltipText: tooltipFormat,
24
- } }));
25
- };
1
+ /*
2
+ * Copyright (c) 2023, J2 Innovations. All Rights Reserved
3
+ */
4
+ import * as am5 from '@amcharts/amcharts5';
5
+ import am5themes_Animated from '@amcharts/amcharts5/themes/Animated';
6
+ import React from 'react';
7
+ import { PieChart } from './PieChart';
8
+ /**
9
+ * Simplified version of the pie chart for quick usage and easy configuration.
10
+ * Serves also as an example of how to use the underlying PieChart component.
11
+ */
12
+ export const SimplePieChart = ({ data, donut, animated, colorPalette, tooltipFormat, numberFormat = {
13
+ style: 'decimal',
14
+ minimumFractionDigits: 0,
15
+ maximumFractionDigits: 1,
16
+ }, hideLabels, DOMtargetId, }) => {
17
+ return (React.createElement(PieChart, { DOMtargetId: DOMtargetId, colorPalette: colorPalette, data: data, chartThemes: animated ? [am5themes_Animated] : undefined, chartSettingsProvider: () => ({
18
+ innerRadius: donut ? am5.percent(55) : undefined,
19
+ }), numberFormat: numberFormat, legendSettingsProvider: () => ({
20
+ centerX: am5.percent(50),
21
+ x: am5.percent(50),
22
+ }), seriesLabelsSettings: { forceHidden: hideLabels }, seriesSettings: { alignLabels: false }, slicesSettings: {
23
+ tooltipText: tooltipFormat,
24
+ } }));
25
+ };
26
26
  //# sourceMappingURL=SimplePieChart.js.map
@@ -1,10 +1,10 @@
1
- import { HRef } from 'haystack-core';
2
- import React from 'react';
3
- interface GraphicViewerProps {
4
- projectName?: string;
5
- graphicId: HRef;
6
- targetRef: HRef;
7
- className?: string;
8
- }
9
- export declare const GraphicViewer: React.FC<GraphicViewerProps>;
10
- export {};
1
+ import { HRef } from 'haystack-core';
2
+ import React from 'react';
3
+ interface GraphicViewerProps {
4
+ projectName?: string;
5
+ graphicId: HRef;
6
+ targetRef: HRef;
7
+ className?: string;
8
+ }
9
+ export declare const GraphicViewer: React.FC<GraphicViewerProps>;
10
+ export {};
@@ -1,23 +1,23 @@
1
- /*
2
- * Copyright (c) 2022, J2 Innovations. All Rights Reserved
3
- */
4
- import cn from 'classnames';
5
- import React from 'react';
6
- import { createUseStyles } from 'react-jss';
7
- import { fin5Top } from '../../../fin5Top/fin5Top';
8
- const useStyles = createUseStyles({
9
- iframe: {
10
- width: '100%',
11
- height: '100%',
12
- border: 0,
13
- overflow: 'hidden',
14
- },
15
- });
16
- export const GraphicViewer = ({ projectName = fin5Top?.finstack?.projectName ?? '', graphicId, targetRef, className, }) => {
17
- const classes = useStyles();
18
- const url = new URL(`${window.location.protocol}//${window.location.host}/fin5/${projectName}`);
19
- url.hash = `targetRef=${targetRef.toAxon()}`;
20
- url.searchParams.set('projectRef', graphicId.toAxon());
21
- return (React.createElement("iframe", { id: graphicId.toAxon(), className: cn(classes.iframe, className), src: url.toString() }));
22
- };
1
+ /*
2
+ * Copyright (c) 2022, J2 Innovations. All Rights Reserved
3
+ */
4
+ import cn from 'classnames';
5
+ import React from 'react';
6
+ import { createUseStyles } from 'react-jss';
7
+ import { fin5Top } from '../../../fin5Top/fin5Top';
8
+ const useStyles = createUseStyles({
9
+ iframe: {
10
+ width: '100%',
11
+ height: '100%',
12
+ border: 0,
13
+ overflow: 'hidden',
14
+ },
15
+ });
16
+ export const GraphicViewer = ({ projectName = fin5Top?.finstack?.projectName ?? '', graphicId, targetRef, className, }) => {
17
+ const classes = useStyles();
18
+ const url = new URL(`${window.location.protocol}//${window.location.host}/fin5/${projectName}`);
19
+ url.hash = `targetRef=${targetRef.toAxon()}`;
20
+ url.searchParams.set('projectRef', graphicId.toAxon());
21
+ return (React.createElement("iframe", { id: graphicId.toAxon(), className: cn(classes.iframe, className), src: url.toString() }));
22
+ };
23
23
  //# sourceMappingURL=GraphicViewer.js.map
@@ -1,17 +1,17 @@
1
- import { HRef } from 'haystack-core';
2
- import React from 'react';
3
- interface GraphicsTabViewer {
4
- projectName?: string;
5
- targetRef: HRef;
6
- className?: string;
7
- /**
8
- * Set it to true if you want to query also for related graphics (graphics applicable to objects linked by refs),
9
- * false to just get the graphics on this target.
10
- * @default false
11
- */
12
- queryRelated?: boolean;
13
- fallbackClassName?: string;
14
- fallbackText?: string;
15
- }
16
- export declare const GraphicsTabViewer: React.FC<GraphicsTabViewer>;
17
- export {};
1
+ import { HRef } from 'haystack-core';
2
+ import React from 'react';
3
+ interface GraphicsTabViewer {
4
+ projectName?: string;
5
+ targetRef: HRef;
6
+ className?: string;
7
+ /**
8
+ * Set it to true if you want to query also for related graphics (graphics applicable to objects linked by refs),
9
+ * false to just get the graphics on this target.
10
+ * @default false
11
+ */
12
+ queryRelated?: boolean;
13
+ fallbackClassName?: string;
14
+ fallbackText?: string;
15
+ }
16
+ export declare const GraphicsTabViewer: React.FC<GraphicsTabViewer>;
17
+ export {};
@@ -1,61 +1,61 @@
1
- /*
2
- * Copyright (c) 2022, J2 Innovations. All Rights Reserved
3
- */
4
- import { ant_prefix, Tabs } from '@j2inn/ui';
5
- import cn from 'classnames';
6
- import { useClient } from 'haystack-react';
7
- import React, { useEffect, useMemo, useState } from 'react';
8
- import { createUseStyles } from 'react-jss';
9
- import { fin5Top } from '../../../fin5Top/fin5Top';
10
- import { LoadingSpinner } from '../LoadingSpinner';
11
- import { GraphicViewer } from './GraphicViewer';
12
- const useStyles = createUseStyles({
13
- tabs: {
14
- height: '100%',
15
- [`& .${ant_prefix}-tabs-content-holder`]: {
16
- height: '100%',
17
- [`& .${ant_prefix}-tabs-content`]: {
18
- height: '100%',
19
- [`& .${ant_prefix}-tabs-tabpane`]: {
20
- height: '100%',
21
- },
22
- },
23
- },
24
- },
25
- fallback: {
26
- height: '100%',
27
- display: 'flex',
28
- justifyContent: 'center',
29
- alignItems: 'center',
30
- fontSize: '1.1em',
31
- },
32
- });
33
- export const GraphicsTabViewer = ({ projectName = fin5Top?.finstack?.projectName, targetRef, className, queryRelated = false, fallbackText = 'No graphics found.', fallbackClassName, }) => {
34
- const client = useClient();
35
- const classes = useStyles();
36
- const [loading, setLoading] = useState(true);
37
- const [graphicsList, setGraphicsList] = useState([]);
38
- useEffect(() => {
39
- if (targetRef) {
40
- client.ext
41
- .eval(`readById(${targetRef.toAxon()}).finGraphicOn(${queryRelated})`)
42
- .then((grid) => {
43
- setGraphicsList(grid.getRows());
44
- })
45
- .finally(() => setLoading(false));
46
- }
47
- }, [targetRef]);
48
- const tabs = useMemo(() => {
49
- return graphicsList
50
- .sort((g1, g2) => g1.toDis().localeCompare(g2.toDis()))
51
- .map((graphic) => {
52
- return {
53
- label: graphic.toDis(),
54
- key: graphic.id.toAxon(),
55
- children: (React.createElement(GraphicViewer, { projectName: projectName ?? '', targetRef: targetRef, graphicId: graphic.id })),
56
- };
57
- });
58
- }, [graphicsList]);
59
- return loading ? (React.createElement(LoadingSpinner, null)) : tabs.length > 0 ? (React.createElement(Tabs, { className: cn(classes.tabs, className), items: tabs })) : (React.createElement("div", { className: cn(classes.fallback, fallbackClassName) }, fallbackText));
60
- };
1
+ /*
2
+ * Copyright (c) 2022, J2 Innovations. All Rights Reserved
3
+ */
4
+ import { ant_prefix, Tabs } from '@j2inn/ui';
5
+ import cn from 'classnames';
6
+ import { useClient } from 'haystack-react';
7
+ import React, { useEffect, useMemo, useState } from 'react';
8
+ import { createUseStyles } from 'react-jss';
9
+ import { fin5Top } from '../../../fin5Top/fin5Top';
10
+ import { LoadingSpinner } from '../LoadingSpinner';
11
+ import { GraphicViewer } from './GraphicViewer';
12
+ const useStyles = createUseStyles({
13
+ tabs: {
14
+ height: '100%',
15
+ [`& .${ant_prefix}-tabs-content-holder`]: {
16
+ height: '100%',
17
+ [`& .${ant_prefix}-tabs-content`]: {
18
+ height: '100%',
19
+ [`& .${ant_prefix}-tabs-tabpane`]: {
20
+ height: '100%',
21
+ },
22
+ },
23
+ },
24
+ },
25
+ fallback: {
26
+ height: '100%',
27
+ display: 'flex',
28
+ justifyContent: 'center',
29
+ alignItems: 'center',
30
+ fontSize: '1.1em',
31
+ },
32
+ });
33
+ export const GraphicsTabViewer = ({ projectName = fin5Top?.finstack?.projectName, targetRef, className, queryRelated = false, fallbackText = 'No graphics found.', fallbackClassName, }) => {
34
+ const client = useClient();
35
+ const classes = useStyles();
36
+ const [loading, setLoading] = useState(true);
37
+ const [graphicsList, setGraphicsList] = useState([]);
38
+ useEffect(() => {
39
+ if (targetRef) {
40
+ client.ext
41
+ .eval(`readById(${targetRef.toAxon()}).finGraphicOn(${queryRelated})`)
42
+ .then((grid) => {
43
+ setGraphicsList(grid.getRows());
44
+ })
45
+ .finally(() => setLoading(false));
46
+ }
47
+ }, [targetRef]);
48
+ const tabs = useMemo(() => {
49
+ return graphicsList
50
+ .sort((g1, g2) => g1.toDis().localeCompare(g2.toDis()))
51
+ .map((graphic) => {
52
+ return {
53
+ label: graphic.toDis(),
54
+ key: graphic.id.toAxon(),
55
+ children: (React.createElement(GraphicViewer, { projectName: projectName ?? '', targetRef: targetRef, graphicId: graphic.id })),
56
+ };
57
+ });
58
+ }, [graphicsList]);
59
+ return loading ? (React.createElement(LoadingSpinner, null)) : tabs.length > 0 ? (React.createElement(Tabs, { className: cn(classes.tabs, className), items: tabs })) : (React.createElement("div", { className: cn(classes.fallback, fallbackClassName) }, fallbackText));
60
+ };
61
61
  //# sourceMappingURL=GraphicsTabViewer.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"GraphicsTabViewer.js","sourceRoot":"","sources":["../../../../src/react/components/graphics/GraphicsTabViewer.tsx"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"GraphicsTabViewer.js","sourceRoot":"","sources":["../../../../src/react/components/graphics/GraphicsTabViewer.tsx"],"names":[],"mappings":"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"}
@@ -1,16 +1,16 @@
1
- import React from 'react';
2
- interface CustomElementOptions {
3
- useShadowDom?: boolean;
4
- }
5
- /**
6
- * Generate a custom element constructor that wraps the given react component.
7
- */
8
- export declare const makeCustomElement: <T extends object>(Component: React.FC<T>, options?: CustomElementOptions) => CustomElementConstructor;
9
- /**
10
- * Create a custom element wrapping a React component and register it.
11
- * @param webComponentName the name of the Web component (tag name)
12
- * @param ReactComponent the React component to wrap
13
- * @returns
14
- */
15
- export declare const registerReactWebComponent: <T extends object>(webComponentName: string, ReactComponent: React.FC<T>, options?: CustomElementOptions) => void;
16
- export {};
1
+ import React from 'react';
2
+ interface CustomElementOptions {
3
+ useShadowDom?: boolean;
4
+ }
5
+ /**
6
+ * Generate a custom element constructor that wraps the given react component.
7
+ */
8
+ export declare const makeCustomElement: <T extends object>(Component: React.FC<T>, options?: CustomElementOptions) => CustomElementConstructor;
9
+ /**
10
+ * Create a custom element wrapping a React component and register it.
11
+ * @param webComponentName the name of the Web component (tag name)
12
+ * @param ReactComponent the React component to wrap
13
+ * @returns
14
+ */
15
+ export declare const registerReactWebComponent: <T extends object>(webComponentName: string, ReactComponent: React.FC<T>, options?: CustomElementOptions) => void;
16
+ export {};
@@ -1,143 +1,143 @@
1
- /*
2
- * Copyright (c) 2025, J2 Innovations. All Rights Reserved
3
- */
4
- import { AppRootStoreContext, AppStoreContext } from '@j2inn/app-react';
5
- import { GenerateTheme } from '@j2inn/ui';
6
- import { I18NContext } from '@j2inn/utils';
7
- import { ClientContext } from 'haystack-react';
8
- import { create } from 'jss';
9
- import React from 'react';
10
- import { createRoot } from 'react-dom/client';
11
- import { JssProvider, ThemeProvider } from 'react-jss';
12
- const defaultTheme = GenerateTheme().light;
13
- /**
14
- * Generate a custom element constructor that wraps the given react component.
15
- */
16
- export const makeCustomElement = (Component, options = {
17
- useShadowDom: true,
18
- }) => {
19
- return class extends HTMLElement {
20
- static get observedAttributes() {
21
- return ['props'];
22
- }
23
- _locale;
24
- get locale() {
25
- return this._locale;
26
- }
27
- set locale(value) {
28
- this._locale = value;
29
- this.render();
30
- }
31
- _appRootStore;
32
- get appRootStore() {
33
- return this._appRootStore ?? {};
34
- }
35
- set appRootStore(value) {
36
- this._appRootStore = value;
37
- this.render();
38
- }
39
- _appStore;
40
- get appStore() {
41
- return this._appStore ?? {};
42
- }
43
- set appStore(value) {
44
- this._appStore = value;
45
- this.render();
46
- }
47
- _client;
48
- get client() {
49
- return this._client;
50
- }
51
- set client(value) {
52
- this._client = value;
53
- this.render();
54
- }
55
- _i18n;
56
- get i18n() {
57
- return this._i18n;
58
- }
59
- set i18n(value) {
60
- this._i18n = value;
61
- this.render();
62
- }
63
- _props;
64
- get props() {
65
- return this._props;
66
- }
67
- set props(value) {
68
- this._props = value;
69
- this.render();
70
- }
71
- _theme;
72
- get theme() {
73
- return this._theme ?? defaultTheme;
74
- }
75
- set theme(value) {
76
- this._theme = value;
77
- this.render();
78
- }
79
- root;
80
- jss;
81
- base;
82
- initialized = false;
83
- constructor() {
84
- super();
85
- this.base = options?.useShadowDom
86
- ? this.attachShadow({ mode: 'open' })
87
- : this;
88
- }
89
- initialize() {
90
- if (!this.initialized) {
91
- const mountPoint = document.createElement('div');
92
- mountPoint.setAttribute('style', 'display: contents;');
93
- this.base.appendChild(mountPoint);
94
- this.root = createRoot(mountPoint);
95
- this.jss = create({
96
- insertionPoint: mountPoint,
97
- });
98
- this.initialized = true;
99
- }
100
- }
101
- connectedCallback() {
102
- this.render();
103
- }
104
- attributeChangedCallback() {
105
- this.render();
106
- }
107
- disconnectedCallback() {
108
- this.root?.unmount();
109
- this.initialized = false;
110
- }
111
- render() {
112
- this.initialize();
113
- const ThemedComponent = (React.createElement(ThemeProvider, { theme: this.theme },
114
- React.createElement(I18NContext.Provider, { value: this.i18n },
115
- React.createElement(JssProvider, { jss: this.jss },
116
- React.createElement(Component, { ...this.props })))));
117
- this.root?.render(React.createElement(AppRootStoreContext.Provider, { value: this.appRootStore ?? null },
118
- React.createElement(AppStoreContext.Provider, { value: this.appStore }, this.client ? (React.createElement(ClientContext.Provider, { value: this.client }, ThemedComponent)) : (ThemedComponent))));
119
- }
120
- };
121
- };
122
- /**
123
- * Create a custom element wrapping a React component and register it.
124
- * @param webComponentName the name of the Web component (tag name)
125
- * @param ReactComponent the React component to wrap
126
- * @returns
127
- */
128
- export const registerReactWebComponent = (webComponentName, ReactComponent, options) => {
129
- // Bail if web component is already defined
130
- if (customElements.get(webComponentName)) {
131
- return;
132
- }
133
- // Make web component that wraps the react component
134
- const Element = makeCustomElement(ReactComponent, options);
135
- try {
136
- // Define web component
137
- customElements.define(webComponentName, Element);
138
- }
139
- catch (e) {
140
- console.error(e);
141
- }
142
- };
1
+ /*
2
+ * Copyright (c) 2025, J2 Innovations. All Rights Reserved
3
+ */
4
+ import { AppRootStoreContext, AppStoreContext } from '@j2inn/app-react';
5
+ import { GenerateTheme } from '@j2inn/ui';
6
+ import { I18NContext } from '@j2inn/utils';
7
+ import { ClientContext } from 'haystack-react';
8
+ import { create } from 'jss';
9
+ import React from 'react';
10
+ import { createRoot } from 'react-dom/client';
11
+ import { JssProvider, ThemeProvider } from 'react-jss';
12
+ const defaultTheme = GenerateTheme().light;
13
+ /**
14
+ * Generate a custom element constructor that wraps the given react component.
15
+ */
16
+ export const makeCustomElement = (Component, options = {
17
+ useShadowDom: true,
18
+ }) => {
19
+ return class extends HTMLElement {
20
+ static get observedAttributes() {
21
+ return ['props'];
22
+ }
23
+ _locale;
24
+ get locale() {
25
+ return this._locale;
26
+ }
27
+ set locale(value) {
28
+ this._locale = value;
29
+ this.render();
30
+ }
31
+ _appRootStore;
32
+ get appRootStore() {
33
+ return this._appRootStore ?? {};
34
+ }
35
+ set appRootStore(value) {
36
+ this._appRootStore = value;
37
+ this.render();
38
+ }
39
+ _appStore;
40
+ get appStore() {
41
+ return this._appStore ?? {};
42
+ }
43
+ set appStore(value) {
44
+ this._appStore = value;
45
+ this.render();
46
+ }
47
+ _client;
48
+ get client() {
49
+ return this._client;
50
+ }
51
+ set client(value) {
52
+ this._client = value;
53
+ this.render();
54
+ }
55
+ _i18n;
56
+ get i18n() {
57
+ return this._i18n;
58
+ }
59
+ set i18n(value) {
60
+ this._i18n = value;
61
+ this.render();
62
+ }
63
+ _props;
64
+ get props() {
65
+ return this._props;
66
+ }
67
+ set props(value) {
68
+ this._props = value;
69
+ this.render();
70
+ }
71
+ _theme;
72
+ get theme() {
73
+ return this._theme ?? defaultTheme;
74
+ }
75
+ set theme(value) {
76
+ this._theme = value;
77
+ this.render();
78
+ }
79
+ root;
80
+ jss;
81
+ base;
82
+ initialized = false;
83
+ constructor() {
84
+ super();
85
+ this.base = options?.useShadowDom
86
+ ? this.attachShadow({ mode: 'open' })
87
+ : this;
88
+ }
89
+ initialize() {
90
+ if (!this.initialized) {
91
+ const mountPoint = document.createElement('div');
92
+ mountPoint.setAttribute('style', 'display: contents;');
93
+ this.base.appendChild(mountPoint);
94
+ this.root = createRoot(mountPoint);
95
+ this.jss = create({
96
+ insertionPoint: mountPoint,
97
+ });
98
+ this.initialized = true;
99
+ }
100
+ }
101
+ connectedCallback() {
102
+ this.render();
103
+ }
104
+ attributeChangedCallback() {
105
+ this.render();
106
+ }
107
+ disconnectedCallback() {
108
+ this.root?.unmount();
109
+ this.initialized = false;
110
+ }
111
+ render() {
112
+ this.initialize();
113
+ const ThemedComponent = (React.createElement(ThemeProvider, { theme: this.theme },
114
+ React.createElement(I18NContext.Provider, { value: this.i18n },
115
+ React.createElement(JssProvider, { jss: this.jss },
116
+ React.createElement(Component, { ...this.props })))));
117
+ this.root?.render(React.createElement(AppRootStoreContext.Provider, { value: this.appRootStore ?? null },
118
+ React.createElement(AppStoreContext.Provider, { value: this.appStore }, this.client ? (React.createElement(ClientContext.Provider, { value: this.client }, ThemedComponent)) : (ThemedComponent))));
119
+ }
120
+ };
121
+ };
122
+ /**
123
+ * Create a custom element wrapping a React component and register it.
124
+ * @param webComponentName the name of the Web component (tag name)
125
+ * @param ReactComponent the React component to wrap
126
+ * @returns
127
+ */
128
+ export const registerReactWebComponent = (webComponentName, ReactComponent, options) => {
129
+ // Bail if web component is already defined
130
+ if (customElements.get(webComponentName)) {
131
+ return;
132
+ }
133
+ // Make web component that wraps the react component
134
+ const Element = makeCustomElement(ReactComponent, options);
135
+ try {
136
+ // Define web component
137
+ customElements.define(webComponentName, Element);
138
+ }
139
+ catch (e) {
140
+ console.error(e);
141
+ }
142
+ };
143
143
  //# sourceMappingURL=makeCustomElement.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"makeCustomElement.js","sourceRoot":"","sources":["../../../src/react/components/makeCustomElement.tsx"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"makeCustomElement.js","sourceRoot":"","sources":["../../../src/react/components/makeCustomElement.tsx"],"names":[],"mappings":"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"}