@j2inn/fin5-ui-utils 5.2.2-beta.9 → 6.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 (223) 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 +124 -124
  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 +133 -133
  28. package/dist/index.d.ts +35 -36
  29. package/dist/index.js +69 -70
  30. package/dist/index.js.map +1 -1
  31. package/dist/jobs/jobUtils.d.ts +14 -14
  32. package/dist/jobs/jobUtils.js +15 -15
  33. package/dist/react/app/Fin5AppContainer.d.ts +36 -36
  34. package/dist/react/app/Fin5AppContainer.js +102 -102
  35. package/dist/react/app/Fin5AppRootStore.d.ts +38 -39
  36. package/dist/react/app/Fin5AppRootStore.js +68 -69
  37. package/dist/react/app/Fin5AppRootStore.js.map +1 -1
  38. package/dist/react/components/ErrorBoundary.d.ts +57 -57
  39. package/dist/react/components/ErrorBoundary.js +150 -150
  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 +82 -82
  50. package/dist/react/components/charts/line-bar/Chart.d.ts +166 -166
  51. package/dist/react/components/charts/line-bar/Chart.js +442 -442
  52. package/dist/react/components/charts/line-bar/HGridChart.d.ts +58 -58
  53. package/dist/react/components/charts/line-bar/HGridChart.js +285 -288
  54. package/dist/react/components/charts/line-bar/HGridChart.js.map +1 -1
  55. package/dist/react/components/charts/pie/PieChart.d.ts +94 -94
  56. package/dist/react/components/charts/pie/PieChart.js +204 -204
  57. package/dist/react/components/charts/pie/SimplePieChart.d.ts +21 -21
  58. package/dist/react/components/charts/pie/SimplePieChart.js +55 -55
  59. package/dist/react/components/graphics/GraphicViewer.d.ts +10 -10
  60. package/dist/react/components/graphics/GraphicViewer.js +29 -29
  61. package/dist/react/components/graphics/GraphicsTabViewer.d.ts +17 -17
  62. package/dist/react/components/graphics/GraphicsTabViewer.js +90 -90
  63. package/dist/react/components/makeCustomElement.d.ts +16 -12
  64. package/dist/react/components/makeCustomElement.js +150 -139
  65. package/dist/react/components/makeCustomElement.js.map +1 -1
  66. package/dist/react/components/navigation/BasicLayout.d.ts +41 -41
  67. package/dist/react/components/navigation/BasicLayout.js +155 -155
  68. package/dist/react/components/navigation/HeaderSiderLayout.d.ts +13 -13
  69. package/dist/react/components/navigation/HeaderSiderLayout.js +110 -110
  70. package/dist/react/components/navigation/MenuPage.d.ts +37 -37
  71. package/dist/react/components/navigation/MenuPage.js +36 -36
  72. package/dist/react/components/navigation/MenuTrigger.d.ts +9 -9
  73. package/dist/react/components/navigation/MenuTrigger.js +33 -33
  74. package/dist/react/components/navigation/ReactRouterHeaderSiderLayout.d.ts +11 -11
  75. package/dist/react/components/navigation/ReactRouterHeaderSiderLayout.js +25 -25
  76. package/dist/react/components/navigation/ReactRouterLayout.d.ts +46 -46
  77. package/dist/react/components/navigation/ReactRouterLayout.js +132 -132
  78. package/dist/react/components/navigation/customRouting/Router.d.ts +12 -12
  79. package/dist/react/components/navigation/customRouting/Router.js +45 -45
  80. package/dist/react/components/navigation/customRouting/RouterLayout.d.ts +11 -11
  81. package/dist/react/components/navigation/customRouting/RouterLayout.js +61 -61
  82. package/dist/react/components/resolvable/configurationForm/ConfigurationForm.d.ts +27 -27
  83. package/dist/react/components/resolvable/configurationForm/ConfigurationForm.js +95 -95
  84. package/dist/react/components/resolvable/configurationForm/ConfigurationFormEntry.d.ts +16 -16
  85. package/dist/react/components/resolvable/configurationForm/ConfigurationFormEntry.js +88 -88
  86. package/dist/react/components/resolvable/configurationForm/getSectionDefault.d.ts +16 -16
  87. package/dist/react/components/resolvable/configurationForm/getSectionDefault.js +99 -99
  88. package/dist/react/hooks/useFin5BinUrl.d.ts +6 -6
  89. package/dist/react/hooks/useFin5BinUrl.js +15 -15
  90. package/dist/react/hooks/useFin5ColorScheme.d.ts +2 -2
  91. package/dist/react/hooks/useFin5ColorScheme.js +42 -42
  92. package/dist/react/hooks/useScreenSize.d.ts +7 -8
  93. package/dist/react/hooks/useScreenSize.js +31 -30
  94. package/dist/react/hooks/useScreenSize.js.map +1 -1
  95. package/dist_es/fantomProps/createFin5Props/index.d.ts +12 -12
  96. package/dist_es/fantomProps/createFin5Props/index.js +140 -140
  97. package/dist_es/fantomProps/createFin5Props/runCreateFin5Props.d.ts +2 -2
  98. package/dist_es/fantomProps/createFin5Props/runCreateFin5Props.js +11 -11
  99. package/dist_es/fantomProps/fantomPropsToObject.d.ts +8 -8
  100. package/dist_es/fantomProps/fantomPropsToObject.js +178 -178
  101. package/dist_es/fantomProps/generateJsonFromFantomPropsFile.d.ts +4 -4
  102. package/dist_es/fantomProps/generateJsonFromFantomPropsFile.js +12 -12
  103. package/dist_es/fantomProps/localePropsToJson.d.ts +1 -1
  104. package/dist_es/fantomProps/localePropsToJson.js +21 -21
  105. package/dist_es/fantomProps/readFantomPropsFile.d.ts +5 -5
  106. package/dist_es/fantomProps/readFantomPropsFile.js +35 -35
  107. package/dist_es/fin5Top/fin5FileUpload.d.ts +24 -24
  108. package/dist_es/fin5Top/fin5FileUpload.js +47 -47
  109. package/dist_es/fin5Top/fin5Top.d.ts +124 -124
  110. package/dist_es/fin5Top/fin5Top.js +54 -54
  111. package/dist_es/fin5Top/finEdge2Cloud.d.ts +6 -6
  112. package/dist_es/fin5Top/finEdge2Cloud.js +11 -11
  113. package/dist_es/fin5Top/getFin5BinUrl.d.ts +2 -2
  114. package/dist_es/fin5Top/getFin5BinUrl.js +5 -5
  115. package/dist_es/fin5Top/openFin5Alarm.d.ts +22 -22
  116. package/dist_es/fin5Top/openFin5Alarm.js +19 -19
  117. package/dist_es/fin5Top/openFin5Historian.d.ts +3 -3
  118. package/dist_es/fin5Top/openFin5Historian.js +15 -15
  119. package/dist_es/fin5Top/useFin5AppURLHashParameter.d.ts +18 -18
  120. package/dist_es/fin5Top/useFin5AppURLHashParameter.js +124 -124
  121. package/dist_es/index.d.ts +35 -36
  122. package/dist_es/index.js +53 -54
  123. package/dist_es/index.js.map +1 -1
  124. package/dist_es/jobs/jobUtils.d.ts +14 -14
  125. package/dist_es/jobs/jobUtils.js +9 -9
  126. package/dist_es/react/app/Fin5AppContainer.d.ts +36 -36
  127. package/dist_es/react/app/Fin5AppContainer.js +73 -73
  128. package/dist_es/react/app/Fin5AppRootStore.d.ts +38 -39
  129. package/dist_es/react/app/Fin5AppRootStore.js +64 -65
  130. package/dist_es/react/app/Fin5AppRootStore.js.map +1 -1
  131. package/dist_es/react/components/ErrorBoundary.d.ts +57 -57
  132. package/dist_es/react/components/ErrorBoundary.js +123 -123
  133. package/dist_es/react/components/ErrorDisplayer.d.ts +19 -19
  134. package/dist_es/react/components/ErrorDisplayer.js +28 -28
  135. package/dist_es/react/components/Loader.d.ts +9 -9
  136. package/dist_es/react/components/Loader.js +12 -12
  137. package/dist_es/react/components/LoadingSpinner.d.ts +2 -2
  138. package/dist_es/react/components/LoadingSpinner.js +20 -20
  139. package/dist_es/react/components/RecordImage.d.ts +20 -20
  140. package/dist_es/react/components/RecordImage.js +24 -24
  141. package/dist_es/react/components/charts/QRCode.d.ts +25 -25
  142. package/dist_es/react/components/charts/QRCode.js +52 -52
  143. package/dist_es/react/components/charts/line-bar/Chart.d.ts +166 -166
  144. package/dist_es/react/components/charts/line-bar/Chart.js +415 -415
  145. package/dist_es/react/components/charts/line-bar/HGridChart.d.ts +58 -58
  146. package/dist_es/react/components/charts/line-bar/HGridChart.js +250 -250
  147. package/dist_es/react/components/charts/line-bar/HGridChart.js.map +1 -1
  148. package/dist_es/react/components/charts/pie/PieChart.d.ts +94 -94
  149. package/dist_es/react/components/charts/pie/PieChart.js +177 -177
  150. package/dist_es/react/components/charts/pie/SimplePieChart.d.ts +21 -21
  151. package/dist_es/react/components/charts/pie/SimplePieChart.js +25 -25
  152. package/dist_es/react/components/graphics/GraphicViewer.d.ts +10 -10
  153. package/dist_es/react/components/graphics/GraphicViewer.js +22 -22
  154. package/dist_es/react/components/graphics/GraphicsTabViewer.d.ts +17 -17
  155. package/dist_es/react/components/graphics/GraphicsTabViewer.js +60 -60
  156. package/dist_es/react/components/makeCustomElement.d.ts +16 -12
  157. package/dist_es/react/components/makeCustomElement.js +142 -131
  158. package/dist_es/react/components/makeCustomElement.js.map +1 -1
  159. package/dist_es/react/components/navigation/BasicLayout.d.ts +41 -41
  160. package/dist_es/react/components/navigation/BasicLayout.js +124 -124
  161. package/dist_es/react/components/navigation/HeaderSiderLayout.d.ts +13 -13
  162. package/dist_es/react/components/navigation/HeaderSiderLayout.js +80 -80
  163. package/dist_es/react/components/navigation/MenuPage.d.ts +37 -37
  164. package/dist_es/react/components/navigation/MenuPage.js +30 -30
  165. package/dist_es/react/components/navigation/MenuTrigger.d.ts +9 -9
  166. package/dist_es/react/components/navigation/MenuTrigger.js +28 -28
  167. package/dist_es/react/components/navigation/ReactRouterHeaderSiderLayout.d.ts +11 -11
  168. package/dist_es/react/components/navigation/ReactRouterHeaderSiderLayout.js +18 -18
  169. package/dist_es/react/components/navigation/ReactRouterLayout.d.ts +46 -46
  170. package/dist_es/react/components/navigation/ReactRouterLayout.js +99 -99
  171. package/dist_es/react/components/navigation/customRouting/Router.d.ts +12 -12
  172. package/dist_es/react/components/navigation/customRouting/Router.js +18 -18
  173. package/dist_es/react/components/navigation/customRouting/RouterLayout.d.ts +11 -11
  174. package/dist_es/react/components/navigation/customRouting/RouterLayout.js +34 -34
  175. package/dist_es/react/components/resolvable/configurationForm/ConfigurationForm.d.ts +27 -27
  176. package/dist_es/react/components/resolvable/configurationForm/ConfigurationForm.js +64 -64
  177. package/dist_es/react/components/resolvable/configurationForm/ConfigurationFormEntry.d.ts +16 -16
  178. package/dist_es/react/components/resolvable/configurationForm/ConfigurationFormEntry.js +58 -58
  179. package/dist_es/react/components/resolvable/configurationForm/getSectionDefault.d.ts +16 -16
  180. package/dist_es/react/components/resolvable/configurationForm/getSectionDefault.js +94 -94
  181. package/dist_es/react/hooks/useFin5BinUrl.d.ts +6 -6
  182. package/dist_es/react/hooks/useFin5BinUrl.js +11 -11
  183. package/dist_es/react/hooks/useFin5ColorScheme.d.ts +2 -2
  184. package/dist_es/react/hooks/useFin5ColorScheme.js +38 -38
  185. package/dist_es/react/hooks/useScreenSize.d.ts +7 -8
  186. package/dist_es/react/hooks/useScreenSize.js +27 -28
  187. package/dist_es/react/hooks/useScreenSize.js.map +1 -1
  188. package/package.json +7 -7
  189. package/dist/react/components/charts/line-bar/ZincGridChart.d.ts +0 -12
  190. package/dist/react/components/charts/line-bar/ZincGridChart.js +0 -24
  191. package/dist/react/components/charts/line-bar/ZincGridChart.js.map +0 -1
  192. package/dist_es/react/app/Fin5AppContainer.jsx +0 -82
  193. package/dist_es/react/app/Fin5AppContainer.jsx.map +0 -1
  194. package/dist_es/react/components/ErrorBoundary.jsx +0 -150
  195. package/dist_es/react/components/ErrorBoundary.jsx.map +0 -1
  196. package/dist_es/react/components/ErrorDisplayer.jsx +0 -36
  197. package/dist_es/react/components/ErrorDisplayer.jsx.map +0 -1
  198. package/dist_es/react/components/Loader.jsx +0 -13
  199. package/dist_es/react/components/Loader.jsx.map +0 -1
  200. package/dist_es/react/components/LoadingSpinner.jsx +0 -22
  201. package/dist_es/react/components/LoadingSpinner.jsx.map +0 -1
  202. package/dist_es/react/components/charts/line-bar/ZincGridChart.d.ts +0 -12
  203. package/dist_es/react/components/charts/line-bar/ZincGridChart.js +0 -17
  204. package/dist_es/react/components/charts/line-bar/ZincGridChart.js.map +0 -1
  205. package/dist_es/react/components/graphics/GraphicViewer.jsx +0 -23
  206. package/dist_es/react/components/graphics/GraphicViewer.jsx.map +0 -1
  207. package/dist_es/react/components/graphics/GraphicsTabViewer.jsx +0 -63
  208. package/dist_es/react/components/graphics/GraphicsTabViewer.jsx.map +0 -1
  209. package/dist_es/react/components/navigation/BasicLayout.jsx +0 -133
  210. package/dist_es/react/components/navigation/BasicLayout.jsx.map +0 -1
  211. package/dist_es/react/components/navigation/MenuPage.jsx +0 -31
  212. package/dist_es/react/components/navigation/MenuPage.jsx.map +0 -1
  213. package/dist_es/react/components/navigation/Router.d.ts +0 -12
  214. package/dist_es/react/components/navigation/Router.js +0 -19
  215. package/dist_es/react/components/navigation/Router.js.map +0 -1
  216. package/dist_es/react/components/navigation/Router.jsx +0 -19
  217. package/dist_es/react/components/navigation/Router.jsx.map +0 -1
  218. package/dist_es/react/components/navigation/react-router/BasicLayout.d.ts +0 -23
  219. package/dist_es/react/components/navigation/react-router/BasicLayout.js +0 -82
  220. package/dist_es/react/components/navigation/react-router/BasicLayout.js.map +0 -1
  221. package/dist_es/react/components/navigation/react-router/ReactRouterBasicLayout.d.ts +0 -24
  222. package/dist_es/react/components/navigation/react-router/ReactRouterBasicLayout.js +0 -82
  223. package/dist_es/react/components/navigation/react-router/ReactRouterBasicLayout.js.map +0 -1
@@ -1,41 +1,41 @@
1
- import { LayoutProps, MenuProps, SiderProps } from 'antd';
2
- import React, { PropsWithChildren, ReactElement } from 'react';
3
- import { MenuPage } from './MenuPage';
4
- export interface BasicLayoutStyleVariables {
5
- isMobile?: boolean;
6
- compactSider?: boolean;
7
- siderWidth?: number | string;
8
- headerHeight: number;
9
- }
10
- export interface BasicLayoutProps<T extends MenuPage> extends PropsWithChildren {
11
- pages?: T[];
12
- defaultPage?: string;
13
- selectedPages?: string[];
14
- onSelect?: (key: string) => void;
15
- compactSider?: {
16
- isCompact?: boolean;
17
- showButton?: boolean;
18
- buttonClassName?: string;
19
- };
20
- layoutProps?: LayoutProps;
21
- mobileHeaderProps?: LayoutProps;
22
- siderProps?: SiderProps;
23
- contentProps?: LayoutProps;
24
- menuProps?: Omit<MenuProps, 'items' | 'selectedKeys' | 'onSelect'>;
25
- menuBefore?: React.ReactNode;
26
- menuAfter?: React.ReactNode;
27
- menuTriggerClassName?: string;
28
- headerHeight?: number;
29
- }
30
- /**
31
- * Copy the array and recursively remove pages having the `showInMenu` flag set to false.
32
- * @param pages
33
- * @returns
34
- */
35
- export declare const getMenuPages: (pages: MenuPage[]) => MenuPage<Record<string, unknown>>[];
36
- export declare const DEFAULT_HEADER_HEIGHT = 45;
37
- /**
38
- * Basic layout with sider and mobile navigation management.
39
- * Routing management can be plugged in, for examples @see ReactRouterLayout @see RouterLayout
40
- */
41
- export declare function BasicLayout<T extends MenuPage>({ pages, defaultPage, selectedPages, onSelect, compactSider, layoutProps, mobileHeaderProps, siderProps, contentProps, menuProps, menuBefore, menuAfter, menuTriggerClassName, headerHeight, children, }: BasicLayoutProps<T>): ReactElement;
1
+ import { LayoutProps, MenuProps, SiderProps } from 'antd';
2
+ import React, { PropsWithChildren, ReactElement } from 'react';
3
+ import { MenuPage } from './MenuPage';
4
+ export interface BasicLayoutStyleVariables {
5
+ isMobile?: boolean;
6
+ compactSider?: boolean;
7
+ siderWidth?: number | string;
8
+ headerHeight: number;
9
+ }
10
+ export interface BasicLayoutProps<T extends MenuPage> extends PropsWithChildren {
11
+ pages?: T[];
12
+ defaultPage?: string;
13
+ selectedPages?: string[];
14
+ onSelect?: (key: string) => void;
15
+ compactSider?: {
16
+ isCompact?: boolean;
17
+ showButton?: boolean;
18
+ buttonClassName?: string;
19
+ };
20
+ layoutProps?: LayoutProps;
21
+ mobileHeaderProps?: LayoutProps;
22
+ siderProps?: SiderProps;
23
+ contentProps?: LayoutProps;
24
+ menuProps?: Omit<MenuProps, 'items' | 'selectedKeys' | 'onSelect'>;
25
+ menuBefore?: React.ReactNode;
26
+ menuAfter?: React.ReactNode;
27
+ menuTriggerClassName?: string;
28
+ headerHeight?: number;
29
+ }
30
+ /**
31
+ * Copy the array and recursively remove pages having the `showInMenu` flag set to false.
32
+ * @param pages
33
+ * @returns
34
+ */
35
+ export declare const getMenuPages: (pages: MenuPage[]) => MenuPage<Record<string, unknown>>[];
36
+ export declare const DEFAULT_HEADER_HEIGHT = 45;
37
+ /**
38
+ * Basic layout with sider and mobile navigation management.
39
+ * Routing management can be plugged in, for examples @see ReactRouterLayout @see RouterLayout
40
+ */
41
+ export declare function BasicLayout<T extends MenuPage>({ pages, defaultPage, selectedPages, onSelect, compactSider, layoutProps, mobileHeaderProps, siderProps, contentProps, menuProps, menuBefore, menuAfter, menuTriggerClassName, headerHeight, children, }: BasicLayoutProps<T>): ReactElement;
@@ -1,125 +1,125 @@
1
- /*
2
- * Copyright (c) 2023, J2 Innovations. All Rights Reserved
3
- */
4
- import { LeftOutlined } from '@ant-design/icons';
5
- import { ant_prefix, Layout, Menu } from '@j2inn/ui';
6
- import classNames from 'classnames';
7
- import React, { useMemo, useState, } from 'react';
8
- import { createUseStyles } from 'react-jss';
9
- import MenuTrigger from './MenuTrigger';
10
- const useStyles = createUseStyles({
11
- header: ({ headerHeight }) => ({
12
- position: 'fixed',
13
- width: '100%',
14
- zIndex: 1000,
15
- padding: 0,
16
- height: headerHeight,
17
- lineHeight: `${headerHeight}px`,
18
- }),
19
- sider: {
20
- overflow: 'auto',
21
- height: '100vh',
22
- position: 'fixed',
23
- left: 0,
24
- top: 0,
25
- bottom: 0,
26
- zIndex: 999,
27
- paddingTop: ({ isMobile, headerHeight }) => isMobile ? headerHeight : 0,
28
- [`& .${ant_prefix}-layout-sider-children`]: {
29
- display: 'flex',
30
- flexDirection: 'column',
31
- },
32
- },
33
- compactSiderButton: {
34
- position: 'sticky',
35
- bottom: 0,
36
- width: '100%',
37
- textAlign: 'center',
38
- fontSize: '1.3rem',
39
- padding: '0.5rem',
40
- cursor: 'pointer',
41
- transition: '0.3s',
42
- },
43
- compactSiderButtonItem: {
44
- transition: '0.3s',
45
- },
46
- compactSiderButtonItemCollapsed: {
47
- transform: ' rotate(180deg)',
48
- },
49
- content: ({ isMobile, compactSider, siderWidth = 200, headerHeight, }) => ({
50
- paddingLeft: isMobile ? 0 : compactSider ? 45 : siderWidth,
51
- paddingTop: isMobile ? headerHeight : 0,
52
- }),
53
- });
54
- // Workaround j2inn/ui exporting problem
55
- const Header = Layout.Header;
56
- const Sider = Layout.Sider;
57
- const Content = Layout.Content;
58
- /**
59
- * Copy the array and recursively remove pages having the `showInMenu` flag set to false.
60
- * @param pages
61
- * @returns
62
- */
63
- export const getMenuPages = (pages) => {
64
- const menuPages = [];
65
- pages.forEach((page) => {
66
- const show = page.showInMenu == null || page.showInMenu;
67
- if (show) {
68
- const copiedPage = Object.assign({}, page);
69
- if (copiedPage.children) {
70
- const filteredChildren = getMenuPages(copiedPage.children);
71
- copiedPage.children = filteredChildren.length
72
- ? filteredChildren
73
- : undefined;
74
- }
75
- menuPages.push(copiedPage);
76
- }
77
- });
78
- return menuPages;
79
- };
80
- export const DEFAULT_HEADER_HEIGHT = 45;
81
- /**
82
- * Basic layout with sider and mobile navigation management.
83
- * Routing management can be plugged in, for examples @see ReactRouterLayout @see RouterLayout
84
- */
85
- export function BasicLayout({ pages = [], defaultPage, selectedPages = [], onSelect, compactSider, layoutProps, mobileHeaderProps, siderProps, contentProps, menuProps, menuBefore, menuAfter, menuTriggerClassName, headerHeight = DEFAULT_HEADER_HEIGHT, children, }) {
86
- // manage mobile navigation
87
- const [isMobile, setIsMobile] = useState(false);
88
- const [isSiderCompact, setIsSiderCompact] = useState(compactSider?.isCompact ?? false);
89
- const [hiddenSider, setHiddenSider] = useState(false);
90
- const siderWidth = siderProps?.width;
91
- const classes = useStyles({
92
- isMobile,
93
- compactSider: isSiderCompact,
94
- siderWidth,
95
- headerHeight,
96
- });
97
- const menuPages = useMemo(() => getMenuPages(pages), [pages]);
98
- return (React.createElement(Layout, { hasSider: true, ...layoutProps },
99
- isMobile && (React.createElement(Header, { ...mobileHeaderProps, className: classNames(classes.header, mobileHeaderProps?.className) },
100
- React.createElement(MenuTrigger, { hiddenSider: hiddenSider, headerHeight: headerHeight, className: menuTriggerClassName, onClick: () => {
101
- setHiddenSider(!hiddenSider);
102
- } }))),
103
- React.createElement(Sider, { ...siderProps, className: classNames(classes.sider, siderProps?.className), breakpoint: 'md', onBreakpoint: (broken) => {
104
- setIsMobile(broken);
105
- setHiddenSider(true);
106
- }, collapsed: (isMobile && hiddenSider) || isSiderCompact, collapsedWidth: isMobile && hiddenSider
107
- ? 0
108
- : isSiderCompact
109
- ? headerHeight
110
- : 0, trigger: null },
111
- menuBefore,
112
- React.createElement(Menu, { style: { flex: 1 }, ...menuProps, defaultSelectedKeys: defaultPage ? [defaultPage] : undefined, items: menuPages, selectedKeys: selectedPages, onSelect: ({ key }) => {
113
- if (!hiddenSider) {
114
- setHiddenSider(true);
115
- }
116
- onSelect?.(key);
117
- } }),
118
- menuAfter,
119
- compactSider?.showButton && !isMobile && (React.createElement("div", { className: classNames(classes.compactSiderButton, compactSider.buttonClassName), onClick: () => setIsSiderCompact(!isSiderCompact) },
120
- React.createElement(LeftOutlined, { className: classNames(classes.compactSiderButtonItem, {
121
- [classes.compactSiderButtonItemCollapsed]: isSiderCompact,
122
- }) })))),
123
- React.createElement(Content, { ...contentProps, className: classNames(classes.content, contentProps?.className) }, children)));
124
- }
1
+ /*
2
+ * Copyright (c) 2023, J2 Innovations. All Rights Reserved
3
+ */
4
+ import { LeftOutlined } from '@ant-design/icons';
5
+ import { ant_prefix, Layout, Menu } from '@j2inn/ui';
6
+ import classNames from 'classnames';
7
+ import React, { useMemo, useState, } from 'react';
8
+ import { createUseStyles } from 'react-jss';
9
+ import MenuTrigger from './MenuTrigger';
10
+ const useStyles = createUseStyles({
11
+ header: ({ headerHeight }) => ({
12
+ position: 'fixed',
13
+ width: '100%',
14
+ zIndex: 1000,
15
+ padding: 0,
16
+ height: headerHeight,
17
+ lineHeight: `${headerHeight}px`,
18
+ }),
19
+ sider: {
20
+ overflow: 'auto',
21
+ height: '100vh',
22
+ position: 'fixed',
23
+ left: 0,
24
+ top: 0,
25
+ bottom: 0,
26
+ zIndex: 999,
27
+ paddingTop: ({ isMobile, headerHeight }) => isMobile ? headerHeight : 0,
28
+ [`& .${ant_prefix}-layout-sider-children`]: {
29
+ display: 'flex',
30
+ flexDirection: 'column',
31
+ },
32
+ },
33
+ compactSiderButton: {
34
+ position: 'sticky',
35
+ bottom: 0,
36
+ width: '100%',
37
+ textAlign: 'center',
38
+ fontSize: '1.3rem',
39
+ padding: '0.5rem',
40
+ cursor: 'pointer',
41
+ transition: '0.3s',
42
+ },
43
+ compactSiderButtonItem: {
44
+ transition: '0.3s',
45
+ },
46
+ compactSiderButtonItemCollapsed: {
47
+ transform: ' rotate(180deg)',
48
+ },
49
+ content: ({ isMobile, compactSider, siderWidth = 200, headerHeight, }) => ({
50
+ paddingLeft: isMobile ? 0 : compactSider ? 45 : siderWidth,
51
+ paddingTop: isMobile ? headerHeight : 0,
52
+ }),
53
+ });
54
+ // Workaround j2inn/ui exporting problem
55
+ const Header = Layout.Header;
56
+ const Sider = Layout.Sider;
57
+ const Content = Layout.Content;
58
+ /**
59
+ * Copy the array and recursively remove pages having the `showInMenu` flag set to false.
60
+ * @param pages
61
+ * @returns
62
+ */
63
+ export const getMenuPages = (pages) => {
64
+ const menuPages = [];
65
+ pages.forEach((page) => {
66
+ const show = page.showInMenu == null || page.showInMenu;
67
+ if (show) {
68
+ const copiedPage = Object.assign({}, page);
69
+ if (copiedPage.children) {
70
+ const filteredChildren = getMenuPages(copiedPage.children);
71
+ copiedPage.children = filteredChildren.length
72
+ ? filteredChildren
73
+ : undefined;
74
+ }
75
+ menuPages.push(copiedPage);
76
+ }
77
+ });
78
+ return menuPages;
79
+ };
80
+ export const DEFAULT_HEADER_HEIGHT = 45;
81
+ /**
82
+ * Basic layout with sider and mobile navigation management.
83
+ * Routing management can be plugged in, for examples @see ReactRouterLayout @see RouterLayout
84
+ */
85
+ export function BasicLayout({ pages = [], defaultPage, selectedPages = [], onSelect, compactSider, layoutProps, mobileHeaderProps, siderProps, contentProps, menuProps, menuBefore, menuAfter, menuTriggerClassName, headerHeight = DEFAULT_HEADER_HEIGHT, children, }) {
86
+ // manage mobile navigation
87
+ const [isMobile, setIsMobile] = useState(false);
88
+ const [isSiderCompact, setIsSiderCompact] = useState(compactSider?.isCompact ?? false);
89
+ const [hiddenSider, setHiddenSider] = useState(false);
90
+ const siderWidth = siderProps?.width;
91
+ const classes = useStyles({
92
+ isMobile,
93
+ compactSider: isSiderCompact,
94
+ siderWidth,
95
+ headerHeight,
96
+ });
97
+ const menuPages = useMemo(() => getMenuPages(pages), [pages]);
98
+ return (React.createElement(Layout, { hasSider: true, ...layoutProps },
99
+ isMobile && (React.createElement(Header, { ...mobileHeaderProps, className: classNames(classes.header, mobileHeaderProps?.className) },
100
+ React.createElement(MenuTrigger, { hiddenSider: hiddenSider, headerHeight: headerHeight, className: menuTriggerClassName, onClick: () => {
101
+ setHiddenSider(!hiddenSider);
102
+ } }))),
103
+ React.createElement(Sider, { ...siderProps, className: classNames(classes.sider, siderProps?.className), breakpoint: 'md', onBreakpoint: (broken) => {
104
+ setIsMobile(broken);
105
+ setHiddenSider(true);
106
+ }, collapsed: (isMobile && hiddenSider) || isSiderCompact, collapsedWidth: isMobile && hiddenSider
107
+ ? 0
108
+ : isSiderCompact
109
+ ? headerHeight
110
+ : 0, trigger: null },
111
+ menuBefore,
112
+ React.createElement(Menu, { style: { flex: 1 }, ...menuProps, defaultSelectedKeys: defaultPage ? [defaultPage] : undefined, items: menuPages, selectedKeys: selectedPages, onSelect: ({ key }) => {
113
+ if (!hiddenSider) {
114
+ setHiddenSider(true);
115
+ }
116
+ onSelect?.(key);
117
+ } }),
118
+ menuAfter,
119
+ compactSider?.showButton && !isMobile && (React.createElement("div", { className: classNames(classes.compactSiderButton, compactSider.buttonClassName), onClick: () => setIsSiderCompact(!isSiderCompact) },
120
+ React.createElement(LeftOutlined, { className: classNames(classes.compactSiderButtonItem, {
121
+ [classes.compactSiderButtonItemCollapsed]: isSiderCompact,
122
+ }) })))),
123
+ React.createElement(Content, { ...contentProps, className: classNames(classes.content, contentProps?.className) }, children)));
124
+ }
125
125
  //# sourceMappingURL=BasicLayout.js.map
@@ -1,13 +1,13 @@
1
- import { LayoutProps } from 'antd';
2
- import React, { ReactElement } from 'react';
3
- import { BasicLayoutProps } from './BasicLayout';
4
- import { MenuPage } from './MenuPage';
5
- export declare type HeaderSiderLayoutProps<T extends MenuPage> = Omit<BasicLayoutProps<T>, 'mobileHeaderProps'> & {
6
- header?: React.ReactNode;
7
- headerProps?: LayoutProps;
8
- };
9
- /**
10
- * Layout with header and sider. Sider is collapsed on mobile.
11
- * Routing management can be plugged in, for examples @see ReactRouterLayout @see RouterLayout
12
- */
13
- export declare function HeaderSiderLayout<T extends MenuPage>({ pages, defaultPage, selectedPages, onSelect, compactSider, layoutProps, header, headerProps, siderProps, contentProps, menuProps, menuBefore, menuAfter, menuTriggerClassName, headerHeight, children, }: HeaderSiderLayoutProps<T>): ReactElement;
1
+ import { LayoutProps } from 'antd';
2
+ import React, { ReactElement } from 'react';
3
+ import { BasicLayoutProps } from './BasicLayout';
4
+ import { MenuPage } from './MenuPage';
5
+ export declare type HeaderSiderLayoutProps<T extends MenuPage> = Omit<BasicLayoutProps<T>, 'mobileHeaderProps'> & {
6
+ header?: React.ReactNode;
7
+ headerProps?: LayoutProps;
8
+ };
9
+ /**
10
+ * Layout with header and sider. Sider is collapsed on mobile.
11
+ * Routing management can be plugged in, for examples @see ReactRouterLayout @see RouterLayout
12
+ */
13
+ export declare function HeaderSiderLayout<T extends MenuPage>({ pages, defaultPage, selectedPages, onSelect, compactSider, layoutProps, header, headerProps, siderProps, contentProps, menuProps, menuBefore, menuAfter, menuTriggerClassName, headerHeight, children, }: HeaderSiderLayoutProps<T>): ReactElement;
@@ -1,81 +1,81 @@
1
- /*
2
- * Copyright (c) 2024, J2 Innovations. All Rights Reserved
3
- */
4
- import { Container, Layout, Menu } from '@j2inn/ui';
5
- import classNames from 'classnames';
6
- import React, { useMemo, useState } from 'react';
7
- import { createUseStyles } from 'react-jss';
8
- import { DEFAULT_HEADER_HEIGHT, getMenuPages, } from './BasicLayout';
9
- import MenuTrigger from './MenuTrigger';
10
- const useStyles = createUseStyles({
11
- header: ({ headerHeight }) => ({
12
- position: 'fixed',
13
- width: '100%',
14
- zIndex: 1000,
15
- padding: 0,
16
- height: headerHeight,
17
- lineHeight: `${headerHeight}px`,
18
- }),
19
- headerContent: {
20
- height: '100%',
21
- },
22
- sider: ({ headerHeight }) => ({
23
- overflow: 'auto',
24
- height: '100vh',
25
- position: 'fixed',
26
- left: 0,
27
- top: 0,
28
- bottom: 0,
29
- zIndex: 999,
30
- paddingTop: headerHeight,
31
- }),
32
- content: ({ isMobile, compactSider, siderWidth = 200, headerHeight, }) => ({
33
- paddingLeft: isMobile ? 0 : compactSider ? 45 : siderWidth,
34
- paddingTop: headerHeight,
35
- }),
36
- });
37
- // Workaround j2inn/ui exporting problem
38
- const Header = Layout.Header;
39
- const Sider = Layout.Sider;
40
- const Content = Layout.Content;
41
- /**
42
- * Layout with header and sider. Sider is collapsed on mobile.
43
- * Routing management can be plugged in, for examples @see ReactRouterLayout @see RouterLayout
44
- */
45
- export function HeaderSiderLayout({ pages = [], defaultPage, selectedPages = [], onSelect, compactSider, layoutProps, header, headerProps, siderProps, contentProps, menuProps, menuBefore, menuAfter, menuTriggerClassName, headerHeight = DEFAULT_HEADER_HEIGHT, children, }) {
46
- const [isMobile, setIsMobile] = useState(false);
47
- const [hiddenSider, setHiddenSider] = useState(false);
48
- const siderWidth = siderProps?.width;
49
- const classes = useStyles({
50
- isMobile,
51
- compactSider: compactSider?.isCompact,
52
- siderWidth,
53
- headerHeight,
54
- });
55
- const menuPages = useMemo(() => getMenuPages(pages), [pages]);
56
- return (React.createElement(Layout, { hasSider: true, ...layoutProps },
57
- React.createElement(Header, { ...headerProps, className: classNames(classes.header, headerProps?.className) },
58
- React.createElement(Container, { horizontal: true, middle: true, className: classes.headerContent },
59
- isMobile && (React.createElement(MenuTrigger, { hiddenSider: hiddenSider, headerHeight: headerHeight, className: menuTriggerClassName, onClick: () => {
60
- setHiddenSider(!hiddenSider);
61
- } })),
62
- header)),
63
- React.createElement(Sider, { ...siderProps, className: classNames(classes.sider, siderProps?.className), breakpoint: 'md', onBreakpoint: (broken) => {
64
- setIsMobile(broken);
65
- setHiddenSider(true);
66
- }, collapsed: (isMobile && hiddenSider) || compactSider?.isCompact, collapsedWidth: isMobile && hiddenSider
67
- ? 0
68
- : compactSider
69
- ? headerHeight
70
- : 0, trigger: null },
71
- menuBefore,
72
- React.createElement(Menu, { ...menuProps, defaultSelectedKeys: defaultPage ? [defaultPage] : undefined, items: menuPages, selectedKeys: selectedPages, onSelect: ({ key }) => {
73
- if (!hiddenSider) {
74
- setHiddenSider(true);
75
- }
76
- onSelect?.(key);
77
- } }),
78
- menuAfter),
79
- React.createElement(Content, { ...contentProps, className: classNames(classes.content, contentProps?.className) }, children)));
80
- }
1
+ /*
2
+ * Copyright (c) 2024, J2 Innovations. All Rights Reserved
3
+ */
4
+ import { Container, Layout, Menu } from '@j2inn/ui';
5
+ import classNames from 'classnames';
6
+ import React, { useMemo, useState } from 'react';
7
+ import { createUseStyles } from 'react-jss';
8
+ import { DEFAULT_HEADER_HEIGHT, getMenuPages, } from './BasicLayout';
9
+ import MenuTrigger from './MenuTrigger';
10
+ const useStyles = createUseStyles({
11
+ header: ({ headerHeight }) => ({
12
+ position: 'fixed',
13
+ width: '100%',
14
+ zIndex: 1000,
15
+ padding: 0,
16
+ height: headerHeight,
17
+ lineHeight: `${headerHeight}px`,
18
+ }),
19
+ headerContent: {
20
+ height: '100%',
21
+ },
22
+ sider: ({ headerHeight }) => ({
23
+ overflow: 'auto',
24
+ height: '100vh',
25
+ position: 'fixed',
26
+ left: 0,
27
+ top: 0,
28
+ bottom: 0,
29
+ zIndex: 999,
30
+ paddingTop: headerHeight,
31
+ }),
32
+ content: ({ isMobile, compactSider, siderWidth = 200, headerHeight, }) => ({
33
+ paddingLeft: isMobile ? 0 : compactSider ? 45 : siderWidth,
34
+ paddingTop: headerHeight,
35
+ }),
36
+ });
37
+ // Workaround j2inn/ui exporting problem
38
+ const Header = Layout.Header;
39
+ const Sider = Layout.Sider;
40
+ const Content = Layout.Content;
41
+ /**
42
+ * Layout with header and sider. Sider is collapsed on mobile.
43
+ * Routing management can be plugged in, for examples @see ReactRouterLayout @see RouterLayout
44
+ */
45
+ export function HeaderSiderLayout({ pages = [], defaultPage, selectedPages = [], onSelect, compactSider, layoutProps, header, headerProps, siderProps, contentProps, menuProps, menuBefore, menuAfter, menuTriggerClassName, headerHeight = DEFAULT_HEADER_HEIGHT, children, }) {
46
+ const [isMobile, setIsMobile] = useState(false);
47
+ const [hiddenSider, setHiddenSider] = useState(false);
48
+ const siderWidth = siderProps?.width;
49
+ const classes = useStyles({
50
+ isMobile,
51
+ compactSider: compactSider?.isCompact,
52
+ siderWidth,
53
+ headerHeight,
54
+ });
55
+ const menuPages = useMemo(() => getMenuPages(pages), [pages]);
56
+ return (React.createElement(Layout, { hasSider: true, ...layoutProps },
57
+ React.createElement(Header, { ...headerProps, className: classNames(classes.header, headerProps?.className) },
58
+ React.createElement(Container, { horizontal: true, middle: true, className: classes.headerContent },
59
+ isMobile && (React.createElement(MenuTrigger, { hiddenSider: hiddenSider, headerHeight: headerHeight, className: menuTriggerClassName, onClick: () => {
60
+ setHiddenSider(!hiddenSider);
61
+ } })),
62
+ header)),
63
+ React.createElement(Sider, { ...siderProps, className: classNames(classes.sider, siderProps?.className), breakpoint: 'md', onBreakpoint: (broken) => {
64
+ setIsMobile(broken);
65
+ setHiddenSider(true);
66
+ }, collapsed: (isMobile && hiddenSider) || compactSider?.isCompact, collapsedWidth: isMobile && hiddenSider
67
+ ? 0
68
+ : compactSider
69
+ ? headerHeight
70
+ : 0, trigger: null },
71
+ menuBefore,
72
+ React.createElement(Menu, { ...menuProps, defaultSelectedKeys: defaultPage ? [defaultPage] : undefined, items: menuPages, selectedKeys: selectedPages, onSelect: ({ key }) => {
73
+ if (!hiddenSider) {
74
+ setHiddenSider(true);
75
+ }
76
+ onSelect?.(key);
77
+ } }),
78
+ menuAfter),
79
+ React.createElement(Content, { ...contentProps, className: classNames(classes.content, contentProps?.className) }, children)));
80
+ }
81
81
  //# sourceMappingURL=HeaderSiderLayout.js.map
@@ -1,37 +1,37 @@
1
- import { ItemType } from 'antd/lib/menu/hooks/useItems';
2
- import React, { PropsWithChildren } from 'react';
3
- /**
4
- * Menu page has both the data required by the menu and the data required to actually render the page.
5
- */
6
- export declare type MenuPage<T = Record<string, unknown>> = ItemType & Page<T>;
7
- /**
8
- * Menu Item that represents an application page
9
- */
10
- interface Page<T = Record<string, unknown>> {
11
- key: string;
12
- component?: React.LazyExoticComponent<React.FC<T>>;
13
- props?: PropsWithChildren<T>;
14
- children?: MenuPage<T>[];
15
- disabled?: boolean;
16
- /**
17
- * Set it to false to avoid showing the page in the menu. It is just used for routing purposes.
18
- */
19
- showInMenu?: boolean;
20
- }
21
- /**
22
- * Retrieve a specific page or subPage from a root page list
23
- * @param name the name of the searched page
24
- * @param pages the list of root pages
25
- */
26
- export declare function findPageByName<T extends MenuPage>(pages: T[], name?: string): T | undefined;
27
- /**
28
- * Expands the list of pages to include all the subpages
29
- */
30
- export declare function pageTreeToPageList<T extends MenuPage>(pages: T[]): T[];
31
- /**
32
- * Recursively get all the subPages of a root page
33
- * @param page root page
34
- * @returns the whole tree of subPages as a list
35
- */
36
- export declare function getAllSubPages<T extends MenuPage>(page: T): T[];
37
- export {};
1
+ import { ItemType } from 'antd/lib/menu/hooks/useItems';
2
+ import React, { PropsWithChildren } from 'react';
3
+ /**
4
+ * Menu page has both the data required by the menu and the data required to actually render the page.
5
+ */
6
+ export declare type MenuPage<T = Record<string, unknown>> = ItemType & Page<T>;
7
+ /**
8
+ * Menu Item that represents an application page
9
+ */
10
+ interface Page<T = Record<string, unknown>> {
11
+ key: string;
12
+ component?: React.LazyExoticComponent<React.FC<T>>;
13
+ props?: PropsWithChildren<T>;
14
+ children?: MenuPage<T>[];
15
+ disabled?: boolean;
16
+ /**
17
+ * Set it to false to avoid showing the page in the menu. It is just used for routing purposes.
18
+ */
19
+ showInMenu?: boolean;
20
+ }
21
+ /**
22
+ * Retrieve a specific page or subPage from a root page list
23
+ * @param name the name of the searched page
24
+ * @param pages the list of root pages
25
+ */
26
+ export declare function findPageByName<T extends MenuPage>(pages: T[], name?: string): T | undefined;
27
+ /**
28
+ * Expands the list of pages to include all the subpages
29
+ */
30
+ export declare function pageTreeToPageList<T extends MenuPage>(pages: T[]): T[];
31
+ /**
32
+ * Recursively get all the subPages of a root page
33
+ * @param page root page
34
+ * @returns the whole tree of subPages as a list
35
+ */
36
+ export declare function getAllSubPages<T extends MenuPage>(page: T): T[];
37
+ export {};