@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.
- package/README.md +5 -5
- package/dist/fantomProps/createFin5Props/index.d.ts +12 -12
- package/dist/fantomProps/createFin5Props/index.js +146 -146
- package/dist/fantomProps/createFin5Props/runCreateFin5Props.d.ts +2 -2
- package/dist/fantomProps/createFin5Props/runCreateFin5Props.js +16 -16
- package/dist/fantomProps/fantomPropsToObject.d.ts +8 -8
- package/dist/fantomProps/fantomPropsToObject.js +183 -183
- package/dist/fantomProps/generateJsonFromFantomPropsFile.d.ts +4 -4
- package/dist/fantomProps/generateJsonFromFantomPropsFile.js +41 -41
- package/dist/fantomProps/localePropsToJson.d.ts +1 -1
- package/dist/fantomProps/localePropsToJson.js +50 -50
- package/dist/fantomProps/readFantomPropsFile.d.ts +5 -5
- package/dist/fantomProps/readFantomPropsFile.js +61 -61
- package/dist/fin5Top/fin5FileUpload.d.ts +24 -24
- package/dist/fin5Top/fin5FileUpload.js +51 -51
- package/dist/fin5Top/fin5Top.d.ts +124 -124
- package/dist/fin5Top/fin5Top.js +58 -58
- package/dist/fin5Top/finEdge2Cloud.d.ts +6 -6
- package/dist/fin5Top/finEdge2Cloud.js +15 -15
- package/dist/fin5Top/getFin5BinUrl.d.ts +2 -2
- package/dist/fin5Top/getFin5BinUrl.js +9 -9
- package/dist/fin5Top/openFin5Alarm.d.ts +22 -22
- package/dist/fin5Top/openFin5Alarm.js +23 -23
- package/dist/fin5Top/openFin5Historian.d.ts +3 -3
- package/dist/fin5Top/openFin5Historian.js +19 -19
- package/dist/fin5Top/useFin5AppURLHashParameter.d.ts +18 -18
- package/dist/fin5Top/useFin5AppURLHashParameter.js +133 -133
- package/dist/index.d.ts +35 -36
- package/dist/index.js +69 -70
- package/dist/index.js.map +1 -1
- package/dist/jobs/jobUtils.d.ts +14 -14
- package/dist/jobs/jobUtils.js +15 -15
- package/dist/react/app/Fin5AppContainer.d.ts +36 -36
- package/dist/react/app/Fin5AppContainer.js +102 -102
- package/dist/react/app/Fin5AppRootStore.d.ts +38 -39
- package/dist/react/app/Fin5AppRootStore.js +68 -69
- package/dist/react/app/Fin5AppRootStore.js.map +1 -1
- package/dist/react/components/ErrorBoundary.d.ts +57 -57
- package/dist/react/components/ErrorBoundary.js +150 -150
- package/dist/react/components/ErrorDisplayer.d.ts +19 -19
- package/dist/react/components/ErrorDisplayer.js +36 -36
- package/dist/react/components/Loader.d.ts +9 -9
- package/dist/react/components/Loader.js +17 -17
- package/dist/react/components/LoadingSpinner.d.ts +2 -2
- package/dist/react/components/LoadingSpinner.js +27 -27
- package/dist/react/components/RecordImage.d.ts +20 -20
- package/dist/react/components/RecordImage.js +51 -51
- package/dist/react/components/charts/QRCode.d.ts +25 -25
- package/dist/react/components/charts/QRCode.js +82 -82
- package/dist/react/components/charts/line-bar/Chart.d.ts +166 -166
- package/dist/react/components/charts/line-bar/Chart.js +442 -442
- package/dist/react/components/charts/line-bar/HGridChart.d.ts +58 -58
- package/dist/react/components/charts/line-bar/HGridChart.js +285 -288
- package/dist/react/components/charts/line-bar/HGridChart.js.map +1 -1
- package/dist/react/components/charts/pie/PieChart.d.ts +94 -94
- package/dist/react/components/charts/pie/PieChart.js +204 -204
- package/dist/react/components/charts/pie/SimplePieChart.d.ts +21 -21
- package/dist/react/components/charts/pie/SimplePieChart.js +55 -55
- package/dist/react/components/graphics/GraphicViewer.d.ts +10 -10
- package/dist/react/components/graphics/GraphicViewer.js +29 -29
- package/dist/react/components/graphics/GraphicsTabViewer.d.ts +17 -17
- package/dist/react/components/graphics/GraphicsTabViewer.js +90 -90
- package/dist/react/components/makeCustomElement.d.ts +16 -12
- package/dist/react/components/makeCustomElement.js +150 -139
- package/dist/react/components/makeCustomElement.js.map +1 -1
- package/dist/react/components/navigation/BasicLayout.d.ts +41 -41
- package/dist/react/components/navigation/BasicLayout.js +155 -155
- package/dist/react/components/navigation/HeaderSiderLayout.d.ts +13 -13
- package/dist/react/components/navigation/HeaderSiderLayout.js +110 -110
- package/dist/react/components/navigation/MenuPage.d.ts +37 -37
- package/dist/react/components/navigation/MenuPage.js +36 -36
- package/dist/react/components/navigation/MenuTrigger.d.ts +9 -9
- package/dist/react/components/navigation/MenuTrigger.js +33 -33
- package/dist/react/components/navigation/ReactRouterHeaderSiderLayout.d.ts +11 -11
- package/dist/react/components/navigation/ReactRouterHeaderSiderLayout.js +25 -25
- package/dist/react/components/navigation/ReactRouterLayout.d.ts +46 -46
- package/dist/react/components/navigation/ReactRouterLayout.js +132 -132
- package/dist/react/components/navigation/customRouting/Router.d.ts +12 -12
- package/dist/react/components/navigation/customRouting/Router.js +45 -45
- package/dist/react/components/navigation/customRouting/RouterLayout.d.ts +11 -11
- package/dist/react/components/navigation/customRouting/RouterLayout.js +61 -61
- package/dist/react/components/resolvable/configurationForm/ConfigurationForm.d.ts +27 -27
- package/dist/react/components/resolvable/configurationForm/ConfigurationForm.js +95 -95
- package/dist/react/components/resolvable/configurationForm/ConfigurationFormEntry.d.ts +16 -16
- package/dist/react/components/resolvable/configurationForm/ConfigurationFormEntry.js +88 -88
- package/dist/react/components/resolvable/configurationForm/getSectionDefault.d.ts +16 -16
- package/dist/react/components/resolvable/configurationForm/getSectionDefault.js +99 -99
- package/dist/react/hooks/useFin5BinUrl.d.ts +6 -6
- package/dist/react/hooks/useFin5BinUrl.js +15 -15
- package/dist/react/hooks/useFin5ColorScheme.d.ts +2 -2
- package/dist/react/hooks/useFin5ColorScheme.js +42 -42
- package/dist/react/hooks/useScreenSize.d.ts +7 -8
- package/dist/react/hooks/useScreenSize.js +31 -30
- package/dist/react/hooks/useScreenSize.js.map +1 -1
- package/dist_es/fantomProps/createFin5Props/index.d.ts +12 -12
- package/dist_es/fantomProps/createFin5Props/index.js +140 -140
- package/dist_es/fantomProps/createFin5Props/runCreateFin5Props.d.ts +2 -2
- package/dist_es/fantomProps/createFin5Props/runCreateFin5Props.js +11 -11
- package/dist_es/fantomProps/fantomPropsToObject.d.ts +8 -8
- package/dist_es/fantomProps/fantomPropsToObject.js +178 -178
- package/dist_es/fantomProps/generateJsonFromFantomPropsFile.d.ts +4 -4
- package/dist_es/fantomProps/generateJsonFromFantomPropsFile.js +12 -12
- package/dist_es/fantomProps/localePropsToJson.d.ts +1 -1
- package/dist_es/fantomProps/localePropsToJson.js +21 -21
- package/dist_es/fantomProps/readFantomPropsFile.d.ts +5 -5
- package/dist_es/fantomProps/readFantomPropsFile.js +35 -35
- package/dist_es/fin5Top/fin5FileUpload.d.ts +24 -24
- package/dist_es/fin5Top/fin5FileUpload.js +47 -47
- package/dist_es/fin5Top/fin5Top.d.ts +124 -124
- package/dist_es/fin5Top/fin5Top.js +54 -54
- package/dist_es/fin5Top/finEdge2Cloud.d.ts +6 -6
- package/dist_es/fin5Top/finEdge2Cloud.js +11 -11
- package/dist_es/fin5Top/getFin5BinUrl.d.ts +2 -2
- package/dist_es/fin5Top/getFin5BinUrl.js +5 -5
- package/dist_es/fin5Top/openFin5Alarm.d.ts +22 -22
- package/dist_es/fin5Top/openFin5Alarm.js +19 -19
- package/dist_es/fin5Top/openFin5Historian.d.ts +3 -3
- package/dist_es/fin5Top/openFin5Historian.js +15 -15
- package/dist_es/fin5Top/useFin5AppURLHashParameter.d.ts +18 -18
- package/dist_es/fin5Top/useFin5AppURLHashParameter.js +124 -124
- package/dist_es/index.d.ts +35 -36
- package/dist_es/index.js +53 -54
- package/dist_es/index.js.map +1 -1
- package/dist_es/jobs/jobUtils.d.ts +14 -14
- package/dist_es/jobs/jobUtils.js +9 -9
- package/dist_es/react/app/Fin5AppContainer.d.ts +36 -36
- package/dist_es/react/app/Fin5AppContainer.js +73 -73
- package/dist_es/react/app/Fin5AppRootStore.d.ts +38 -39
- package/dist_es/react/app/Fin5AppRootStore.js +64 -65
- package/dist_es/react/app/Fin5AppRootStore.js.map +1 -1
- package/dist_es/react/components/ErrorBoundary.d.ts +57 -57
- package/dist_es/react/components/ErrorBoundary.js +123 -123
- package/dist_es/react/components/ErrorDisplayer.d.ts +19 -19
- package/dist_es/react/components/ErrorDisplayer.js +28 -28
- package/dist_es/react/components/Loader.d.ts +9 -9
- package/dist_es/react/components/Loader.js +12 -12
- package/dist_es/react/components/LoadingSpinner.d.ts +2 -2
- package/dist_es/react/components/LoadingSpinner.js +20 -20
- package/dist_es/react/components/RecordImage.d.ts +20 -20
- package/dist_es/react/components/RecordImage.js +24 -24
- package/dist_es/react/components/charts/QRCode.d.ts +25 -25
- package/dist_es/react/components/charts/QRCode.js +52 -52
- package/dist_es/react/components/charts/line-bar/Chart.d.ts +166 -166
- package/dist_es/react/components/charts/line-bar/Chart.js +415 -415
- package/dist_es/react/components/charts/line-bar/HGridChart.d.ts +58 -58
- package/dist_es/react/components/charts/line-bar/HGridChart.js +250 -250
- package/dist_es/react/components/charts/line-bar/HGridChart.js.map +1 -1
- package/dist_es/react/components/charts/pie/PieChart.d.ts +94 -94
- package/dist_es/react/components/charts/pie/PieChart.js +177 -177
- package/dist_es/react/components/charts/pie/SimplePieChart.d.ts +21 -21
- package/dist_es/react/components/charts/pie/SimplePieChart.js +25 -25
- package/dist_es/react/components/graphics/GraphicViewer.d.ts +10 -10
- package/dist_es/react/components/graphics/GraphicViewer.js +22 -22
- package/dist_es/react/components/graphics/GraphicsTabViewer.d.ts +17 -17
- package/dist_es/react/components/graphics/GraphicsTabViewer.js +60 -60
- package/dist_es/react/components/makeCustomElement.d.ts +16 -12
- package/dist_es/react/components/makeCustomElement.js +142 -131
- package/dist_es/react/components/makeCustomElement.js.map +1 -1
- package/dist_es/react/components/navigation/BasicLayout.d.ts +41 -41
- package/dist_es/react/components/navigation/BasicLayout.js +124 -124
- package/dist_es/react/components/navigation/HeaderSiderLayout.d.ts +13 -13
- package/dist_es/react/components/navigation/HeaderSiderLayout.js +80 -80
- package/dist_es/react/components/navigation/MenuPage.d.ts +37 -37
- package/dist_es/react/components/navigation/MenuPage.js +30 -30
- package/dist_es/react/components/navigation/MenuTrigger.d.ts +9 -9
- package/dist_es/react/components/navigation/MenuTrigger.js +28 -28
- package/dist_es/react/components/navigation/ReactRouterHeaderSiderLayout.d.ts +11 -11
- package/dist_es/react/components/navigation/ReactRouterHeaderSiderLayout.js +18 -18
- package/dist_es/react/components/navigation/ReactRouterLayout.d.ts +46 -46
- package/dist_es/react/components/navigation/ReactRouterLayout.js +99 -99
- package/dist_es/react/components/navigation/customRouting/Router.d.ts +12 -12
- package/dist_es/react/components/navigation/customRouting/Router.js +18 -18
- package/dist_es/react/components/navigation/customRouting/RouterLayout.d.ts +11 -11
- package/dist_es/react/components/navigation/customRouting/RouterLayout.js +34 -34
- package/dist_es/react/components/resolvable/configurationForm/ConfigurationForm.d.ts +27 -27
- package/dist_es/react/components/resolvable/configurationForm/ConfigurationForm.js +64 -64
- package/dist_es/react/components/resolvable/configurationForm/ConfigurationFormEntry.d.ts +16 -16
- package/dist_es/react/components/resolvable/configurationForm/ConfigurationFormEntry.js +58 -58
- package/dist_es/react/components/resolvable/configurationForm/getSectionDefault.d.ts +16 -16
- package/dist_es/react/components/resolvable/configurationForm/getSectionDefault.js +94 -94
- package/dist_es/react/hooks/useFin5BinUrl.d.ts +6 -6
- package/dist_es/react/hooks/useFin5BinUrl.js +11 -11
- package/dist_es/react/hooks/useFin5ColorScheme.d.ts +2 -2
- package/dist_es/react/hooks/useFin5ColorScheme.js +38 -38
- package/dist_es/react/hooks/useScreenSize.d.ts +7 -8
- package/dist_es/react/hooks/useScreenSize.js +27 -28
- package/dist_es/react/hooks/useScreenSize.js.map +1 -1
- package/package.json +7 -7
- package/dist/react/components/charts/line-bar/ZincGridChart.d.ts +0 -12
- package/dist/react/components/charts/line-bar/ZincGridChart.js +0 -24
- package/dist/react/components/charts/line-bar/ZincGridChart.js.map +0 -1
- package/dist_es/react/app/Fin5AppContainer.jsx +0 -82
- package/dist_es/react/app/Fin5AppContainer.jsx.map +0 -1
- package/dist_es/react/components/ErrorBoundary.jsx +0 -150
- package/dist_es/react/components/ErrorBoundary.jsx.map +0 -1
- package/dist_es/react/components/ErrorDisplayer.jsx +0 -36
- package/dist_es/react/components/ErrorDisplayer.jsx.map +0 -1
- package/dist_es/react/components/Loader.jsx +0 -13
- package/dist_es/react/components/Loader.jsx.map +0 -1
- package/dist_es/react/components/LoadingSpinner.jsx +0 -22
- package/dist_es/react/components/LoadingSpinner.jsx.map +0 -1
- package/dist_es/react/components/charts/line-bar/ZincGridChart.d.ts +0 -12
- package/dist_es/react/components/charts/line-bar/ZincGridChart.js +0 -17
- package/dist_es/react/components/charts/line-bar/ZincGridChart.js.map +0 -1
- package/dist_es/react/components/graphics/GraphicViewer.jsx +0 -23
- package/dist_es/react/components/graphics/GraphicViewer.jsx.map +0 -1
- package/dist_es/react/components/graphics/GraphicsTabViewer.jsx +0 -63
- package/dist_es/react/components/graphics/GraphicsTabViewer.jsx.map +0 -1
- package/dist_es/react/components/navigation/BasicLayout.jsx +0 -133
- package/dist_es/react/components/navigation/BasicLayout.jsx.map +0 -1
- package/dist_es/react/components/navigation/MenuPage.jsx +0 -31
- package/dist_es/react/components/navigation/MenuPage.jsx.map +0 -1
- package/dist_es/react/components/navigation/Router.d.ts +0 -12
- package/dist_es/react/components/navigation/Router.js +0 -19
- package/dist_es/react/components/navigation/Router.js.map +0 -1
- package/dist_es/react/components/navigation/Router.jsx +0 -19
- package/dist_es/react/components/navigation/Router.jsx.map +0 -1
- package/dist_es/react/components/navigation/react-router/BasicLayout.d.ts +0 -23
- package/dist_es/react/components/navigation/react-router/BasicLayout.js +0 -82
- package/dist_es/react/components/navigation/react-router/BasicLayout.js.map +0 -1
- package/dist_es/react/components/navigation/react-router/ReactRouterBasicLayout.d.ts +0 -24
- package/dist_es/react/components/navigation/react-router/ReactRouterBasicLayout.js +0 -82
- package/dist_es/react/components/navigation/react-router/ReactRouterBasicLayout.js.map +0 -1
|
@@ -1,31 +1,31 @@
|
|
|
1
|
-
/*
|
|
2
|
-
* Copyright (c) 2022, J2 Innovations. All Rights Reserved
|
|
3
|
-
*/
|
|
4
|
-
/**
|
|
5
|
-
* Retrieve a specific page or subPage from a root page list
|
|
6
|
-
* @param name the name of the searched page
|
|
7
|
-
* @param pages the list of root pages
|
|
8
|
-
*/
|
|
9
|
-
export function findPageByName(pages, name) {
|
|
10
|
-
return pageTreeToPageList(pages).find((page) => page.key === name && !page.disabled);
|
|
11
|
-
}
|
|
12
|
-
/**
|
|
13
|
-
* Expands the list of pages to include all the subpages
|
|
14
|
-
*/
|
|
15
|
-
export function pageTreeToPageList(pages) {
|
|
16
|
-
return pages.flatMap((page) => getAllSubPages(page));
|
|
17
|
-
}
|
|
18
|
-
/**
|
|
19
|
-
* Recursively get all the subPages of a root page
|
|
20
|
-
* @param page root page
|
|
21
|
-
* @returns the whole tree of subPages as a list
|
|
22
|
-
*/
|
|
23
|
-
export function getAllSubPages(page) {
|
|
24
|
-
if (page.children) {
|
|
25
|
-
return [page].concat(...page.children.map((subPage) => getAllSubPages(subPage)));
|
|
26
|
-
}
|
|
27
|
-
else {
|
|
28
|
-
return [page];
|
|
29
|
-
}
|
|
30
|
-
}
|
|
1
|
+
/*
|
|
2
|
+
* Copyright (c) 2022, J2 Innovations. All Rights Reserved
|
|
3
|
+
*/
|
|
4
|
+
/**
|
|
5
|
+
* Retrieve a specific page or subPage from a root page list
|
|
6
|
+
* @param name the name of the searched page
|
|
7
|
+
* @param pages the list of root pages
|
|
8
|
+
*/
|
|
9
|
+
export function findPageByName(pages, name) {
|
|
10
|
+
return pageTreeToPageList(pages).find((page) => page.key === name && !page.disabled);
|
|
11
|
+
}
|
|
12
|
+
/**
|
|
13
|
+
* Expands the list of pages to include all the subpages
|
|
14
|
+
*/
|
|
15
|
+
export function pageTreeToPageList(pages) {
|
|
16
|
+
return pages.flatMap((page) => getAllSubPages(page));
|
|
17
|
+
}
|
|
18
|
+
/**
|
|
19
|
+
* Recursively get all the subPages of a root page
|
|
20
|
+
* @param page root page
|
|
21
|
+
* @returns the whole tree of subPages as a list
|
|
22
|
+
*/
|
|
23
|
+
export function getAllSubPages(page) {
|
|
24
|
+
if (page.children) {
|
|
25
|
+
return [page].concat(...page.children.map((subPage) => getAllSubPages(subPage)));
|
|
26
|
+
}
|
|
27
|
+
else {
|
|
28
|
+
return [page];
|
|
29
|
+
}
|
|
30
|
+
}
|
|
31
31
|
//# sourceMappingURL=MenuPage.js.map
|
|
@@ -1,9 +1,9 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
interface MenuTriggerProps {
|
|
3
|
-
hiddenSider: boolean;
|
|
4
|
-
headerHeight?: number;
|
|
5
|
-
className?: string;
|
|
6
|
-
onClick: () => void;
|
|
7
|
-
}
|
|
8
|
-
declare const MenuTrigger: React.FC<MenuTriggerProps>;
|
|
9
|
-
export default MenuTrigger;
|
|
1
|
+
import React from 'react';
|
|
2
|
+
interface MenuTriggerProps {
|
|
3
|
+
hiddenSider: boolean;
|
|
4
|
+
headerHeight?: number;
|
|
5
|
+
className?: string;
|
|
6
|
+
onClick: () => void;
|
|
7
|
+
}
|
|
8
|
+
declare const MenuTrigger: React.FC<MenuTriggerProps>;
|
|
9
|
+
export default MenuTrigger;
|
|
@@ -1,29 +1,29 @@
|
|
|
1
|
-
/*
|
|
2
|
-
* Copyright (c) 2024, J2 Innovations. All Rights Reserved
|
|
3
|
-
*/
|
|
4
|
-
import { MenuFoldOutlined, MenuUnfoldOutlined } from '@ant-design/icons';
|
|
5
|
-
import classNames from 'classnames';
|
|
6
|
-
import React from 'react';
|
|
7
|
-
import { createUseStyles } from 'react-jss';
|
|
8
|
-
const useStyles = createUseStyles((theme) => ({
|
|
9
|
-
menuTrigger: ({ headerHeight }) => ({
|
|
10
|
-
width: headerHeight,
|
|
11
|
-
height: '100%',
|
|
12
|
-
textAlign: 'center',
|
|
13
|
-
fontSize: 18,
|
|
14
|
-
cursor: 'pointer',
|
|
15
|
-
transition: 'color 0.3s ease-in-out',
|
|
16
|
-
backgroundColor: 'transparent',
|
|
17
|
-
color: theme.linkColor,
|
|
18
|
-
padding: '0 0.5rem',
|
|
19
|
-
'&:hover': {
|
|
20
|
-
color: theme.linkActiveColor,
|
|
21
|
-
},
|
|
22
|
-
}),
|
|
23
|
-
}));
|
|
24
|
-
const MenuTrigger = ({ hiddenSider, headerHeight = 45, onClick, className, }) => {
|
|
25
|
-
const classes = useStyles({ headerHeight });
|
|
26
|
-
return hiddenSider ? (React.createElement(MenuUnfoldOutlined, { className: classNames(classes.menuTrigger, className), onClick: onClick })) : (React.createElement(MenuFoldOutlined, { className: classNames(classes.menuTrigger, className), onClick: onClick }));
|
|
27
|
-
};
|
|
28
|
-
export default MenuTrigger;
|
|
1
|
+
/*
|
|
2
|
+
* Copyright (c) 2024, J2 Innovations. All Rights Reserved
|
|
3
|
+
*/
|
|
4
|
+
import { MenuFoldOutlined, MenuUnfoldOutlined } from '@ant-design/icons';
|
|
5
|
+
import classNames from 'classnames';
|
|
6
|
+
import React from 'react';
|
|
7
|
+
import { createUseStyles } from 'react-jss';
|
|
8
|
+
const useStyles = createUseStyles((theme) => ({
|
|
9
|
+
menuTrigger: ({ headerHeight }) => ({
|
|
10
|
+
width: headerHeight,
|
|
11
|
+
height: '100%',
|
|
12
|
+
textAlign: 'center',
|
|
13
|
+
fontSize: 18,
|
|
14
|
+
cursor: 'pointer',
|
|
15
|
+
transition: 'color 0.3s ease-in-out',
|
|
16
|
+
backgroundColor: 'transparent',
|
|
17
|
+
color: theme.linkColor,
|
|
18
|
+
padding: '0 0.5rem',
|
|
19
|
+
'&:hover': {
|
|
20
|
+
color: theme.linkActiveColor,
|
|
21
|
+
},
|
|
22
|
+
}),
|
|
23
|
+
}));
|
|
24
|
+
const MenuTrigger = ({ hiddenSider, headerHeight = 45, onClick, className, }) => {
|
|
25
|
+
const classes = useStyles({ headerHeight });
|
|
26
|
+
return hiddenSider ? (React.createElement(MenuUnfoldOutlined, { className: classNames(classes.menuTrigger, className), onClick: onClick })) : (React.createElement(MenuFoldOutlined, { className: classNames(classes.menuTrigger, className), onClick: onClick }));
|
|
27
|
+
};
|
|
28
|
+
export default MenuTrigger;
|
|
29
29
|
//# sourceMappingURL=MenuTrigger.js.map
|
|
@@ -1,11 +1,11 @@
|
|
|
1
|
-
import type { Location } from '@remix-run/router';
|
|
2
|
-
import React from 'react';
|
|
3
|
-
import { HeaderSiderLayoutProps } from './HeaderSiderLayout';
|
|
4
|
-
import { ReactRouterMenuPage } from './ReactRouterLayout';
|
|
5
|
-
export interface ReactRouterHeaderSiderLayoutProps extends HeaderSiderLayoutProps<ReactRouterMenuPage> {
|
|
6
|
-
isSelectedRoute?: (page: ReactRouterMenuPage, location: Location) => boolean;
|
|
7
|
-
}
|
|
8
|
-
/**
|
|
9
|
-
* Header/Sider layout that uses React Router.
|
|
10
|
-
*/
|
|
11
|
-
export declare const ReactRouterHeaderSiderLayout: React.FC<ReactRouterHeaderSiderLayoutProps>;
|
|
1
|
+
import type { Location } from '@remix-run/router';
|
|
2
|
+
import React from 'react';
|
|
3
|
+
import { HeaderSiderLayoutProps } from './HeaderSiderLayout';
|
|
4
|
+
import { ReactRouterMenuPage } from './ReactRouterLayout';
|
|
5
|
+
export interface ReactRouterHeaderSiderLayoutProps extends HeaderSiderLayoutProps<ReactRouterMenuPage> {
|
|
6
|
+
isSelectedRoute?: (page: ReactRouterMenuPage, location: Location) => boolean;
|
|
7
|
+
}
|
|
8
|
+
/**
|
|
9
|
+
* Header/Sider layout that uses React Router.
|
|
10
|
+
*/
|
|
11
|
+
export declare const ReactRouterHeaderSiderLayout: React.FC<ReactRouterHeaderSiderLayoutProps>;
|
|
@@ -1,19 +1,19 @@
|
|
|
1
|
-
/*
|
|
2
|
-
* Copyright (c) 2024, J2 Innovations. All Rights Reserved
|
|
3
|
-
*/
|
|
4
|
-
import React from 'react';
|
|
5
|
-
import { Outlet, useNavigate } from 'react-router';
|
|
6
|
-
import { HeaderSiderLayout } from './HeaderSiderLayout';
|
|
7
|
-
import { useDefaultOnSelect, useGetPageKeyRouteMap, useSelectedRoutes, } from './ReactRouterLayout';
|
|
8
|
-
/**
|
|
9
|
-
* Header/Sider layout that uses React Router.
|
|
10
|
-
*/
|
|
11
|
-
export const ReactRouterHeaderSiderLayout = ({ isSelectedRoute, pages = [], onSelect, ...otherProps }) => {
|
|
12
|
-
const navigate = useNavigate();
|
|
13
|
-
const selectedRoutes = useSelectedRoutes(pages, isSelectedRoute);
|
|
14
|
-
const pageKeyRouteMap = useGetPageKeyRouteMap(pages);
|
|
15
|
-
const defaultOnSelect = useDefaultOnSelect(navigate, pageKeyRouteMap, pages);
|
|
16
|
-
return (React.createElement(HeaderSiderLayout, { ...otherProps, pages: pages, onSelect: onSelect ?? defaultOnSelect, selectedPages: selectedRoutes },
|
|
17
|
-
React.createElement(Outlet, null)));
|
|
18
|
-
};
|
|
1
|
+
/*
|
|
2
|
+
* Copyright (c) 2024, J2 Innovations. All Rights Reserved
|
|
3
|
+
*/
|
|
4
|
+
import React from 'react';
|
|
5
|
+
import { Outlet, useNavigate } from 'react-router';
|
|
6
|
+
import { HeaderSiderLayout } from './HeaderSiderLayout';
|
|
7
|
+
import { useDefaultOnSelect, useGetPageKeyRouteMap, useSelectedRoutes, } from './ReactRouterLayout';
|
|
8
|
+
/**
|
|
9
|
+
* Header/Sider layout that uses React Router.
|
|
10
|
+
*/
|
|
11
|
+
export const ReactRouterHeaderSiderLayout = ({ isSelectedRoute, pages = [], onSelect, ...otherProps }) => {
|
|
12
|
+
const navigate = useNavigate();
|
|
13
|
+
const selectedRoutes = useSelectedRoutes(pages, isSelectedRoute);
|
|
14
|
+
const pageKeyRouteMap = useGetPageKeyRouteMap(pages);
|
|
15
|
+
const defaultOnSelect = useDefaultOnSelect(navigate, pageKeyRouteMap, pages);
|
|
16
|
+
return (React.createElement(HeaderSiderLayout, { ...otherProps, pages: pages, onSelect: onSelect ?? defaultOnSelect, selectedPages: selectedRoutes },
|
|
17
|
+
React.createElement(Outlet, null)));
|
|
18
|
+
};
|
|
19
19
|
//# sourceMappingURL=ReactRouterHeaderSiderLayout.js.map
|
|
@@ -1,46 +1,46 @@
|
|
|
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
|
-
* This does not skip the hash update and should be used only with
|
|
16
|
-
* FIN >= 5.1.7.92, otherwise FIN will reload the entire page.
|
|
17
|
-
*/
|
|
18
|
-
export declare const useLocationUpdate: () => void;
|
|
19
|
-
/**
|
|
20
|
-
* This hook can be used with react-router/BasicLayout,
|
|
21
|
-
* to ensure FIN5 URL is aligned with the internal frame URL.
|
|
22
|
-
* This skips the hash update and should be used only with
|
|
23
|
-
* FIN < 5.1.7.92.
|
|
24
|
-
* @deprecated use only with FIN < 5.1.7.92
|
|
25
|
-
* @see {@link useLocationUpdate} for FIN >= 5.1.7.92
|
|
26
|
-
*/
|
|
27
|
-
export declare const useLocationUpdateSkippingHash: () => void;
|
|
28
|
-
export declare const useSelectedRoutes: (pages: ReactRouterMenuPage[], isSelectedRoute?: (page: ReactRouterMenuPage, location: Location) => boolean) => string[];
|
|
29
|
-
/**
|
|
30
|
-
* If we are inside a frame (FIN5), the route is left as is.
|
|
31
|
-
* If we are outside FIN5 frame, the route needs to be prefixed with a segment containing the project name.
|
|
32
|
-
* @param route
|
|
33
|
-
* @returns the correct route for the environment
|
|
34
|
-
*/
|
|
35
|
-
export declare const getRoute: (route: string) => string;
|
|
36
|
-
/**
|
|
37
|
-
* Create a map that holds the page key and its related route.
|
|
38
|
-
* @param pages
|
|
39
|
-
* @returns the map page key - route
|
|
40
|
-
*/
|
|
41
|
-
export declare const useGetPageKeyRouteMap: (pages: ReactRouterMenuPage[]) => Map<string, string>;
|
|
42
|
-
export declare const useDefaultOnSelect: (navigate: NavigateFunction, pageKeyRouteMap: Map<string, string>, pages: ReactRouterMenuPage[]) => (key: string) => void;
|
|
43
|
-
/**
|
|
44
|
-
* Basic layout that uses React Router.
|
|
45
|
-
*/
|
|
46
|
-
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
|
+
* This does not skip the hash update and should be used only with
|
|
16
|
+
* FIN >= 5.1.7.92, otherwise FIN will reload the entire page.
|
|
17
|
+
*/
|
|
18
|
+
export declare const useLocationUpdate: () => void;
|
|
19
|
+
/**
|
|
20
|
+
* This hook can be used with react-router/BasicLayout,
|
|
21
|
+
* to ensure FIN5 URL is aligned with the internal frame URL.
|
|
22
|
+
* This skips the hash update and should be used only with
|
|
23
|
+
* FIN < 5.1.7.92.
|
|
24
|
+
* @deprecated use only with FIN < 5.1.7.92
|
|
25
|
+
* @see {@link useLocationUpdate} for FIN >= 5.1.7.92
|
|
26
|
+
*/
|
|
27
|
+
export declare const useLocationUpdateSkippingHash: () => void;
|
|
28
|
+
export declare const useSelectedRoutes: (pages: ReactRouterMenuPage[], isSelectedRoute?: (page: ReactRouterMenuPage, location: Location) => boolean) => string[];
|
|
29
|
+
/**
|
|
30
|
+
* If we are inside a frame (FIN5), the route is left as is.
|
|
31
|
+
* If we are outside FIN5 frame, the route needs to be prefixed with a segment containing the project name.
|
|
32
|
+
* @param route
|
|
33
|
+
* @returns the correct route for the environment
|
|
34
|
+
*/
|
|
35
|
+
export declare const getRoute: (route: string) => string;
|
|
36
|
+
/**
|
|
37
|
+
* Create a map that holds the page key and its related route.
|
|
38
|
+
* @param pages
|
|
39
|
+
* @returns the map page key - route
|
|
40
|
+
*/
|
|
41
|
+
export declare const useGetPageKeyRouteMap: (pages: ReactRouterMenuPage[]) => Map<string, string>;
|
|
42
|
+
export declare const useDefaultOnSelect: (navigate: NavigateFunction, pageKeyRouteMap: Map<string, string>, pages: ReactRouterMenuPage[]) => (key: string) => void;
|
|
43
|
+
/**
|
|
44
|
+
* Basic layout that uses React Router.
|
|
45
|
+
*/
|
|
46
|
+
export declare const ReactRouterLayout: React.FC<ReactRouterLayoutProps>;
|
|
@@ -1,100 +1,100 @@
|
|
|
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
|
-
* This does not skip the hash update and should be used only with
|
|
13
|
-
* FIN >= 5.1.7.92, otherwise FIN will reload the entire page.
|
|
14
|
-
*/
|
|
15
|
-
export const useLocationUpdate = () => {
|
|
16
|
-
const location = useLocation();
|
|
17
|
-
useEffect(() => {
|
|
18
|
-
if (IN_IFRAME) {
|
|
19
|
-
setHash(location);
|
|
20
|
-
}
|
|
21
|
-
}, [location]);
|
|
22
|
-
};
|
|
23
|
-
/**
|
|
24
|
-
* This hook can be used with react-router/BasicLayout,
|
|
25
|
-
* to ensure FIN5 URL is aligned with the internal frame URL.
|
|
26
|
-
* This skips the hash update and should be used only with
|
|
27
|
-
* FIN < 5.1.7.92.
|
|
28
|
-
* @deprecated use only with FIN < 5.1.7.92
|
|
29
|
-
* @see {@link useLocationUpdate} for FIN >= 5.1.7.92
|
|
30
|
-
*/
|
|
31
|
-
export const useLocationUpdateSkippingHash = () => {
|
|
32
|
-
const location = useLocation();
|
|
33
|
-
useEffect(() => {
|
|
34
|
-
if (IN_IFRAME) {
|
|
35
|
-
fin5SkipHashUpdate()?.then(() => {
|
|
36
|
-
setHash(location);
|
|
37
|
-
});
|
|
38
|
-
}
|
|
39
|
-
}, [location]);
|
|
40
|
-
};
|
|
41
|
-
const setHash = (location) => {
|
|
42
|
-
const hash = location.pathname;
|
|
43
|
-
const queryParams = location.search;
|
|
44
|
-
const frameParameters = getFin5HashFrameParameters();
|
|
45
|
-
frameParameters.set('url', frameParameters.get('url')?.split('#')[0] + '#' + hash + queryParams);
|
|
46
|
-
getTopLocation().hash = `#${getTopLocation().hash.slice(1).split('?')[0]}?${frameParameters.toString()}`;
|
|
47
|
-
};
|
|
48
|
-
export const useSelectedRoutes = (pages, isSelectedRoute = (page, location) => location.pathname.includes(page.route)) => {
|
|
49
|
-
const location = useLocation();
|
|
50
|
-
const flatPages = useMemo(() => pageTreeToPageList(pages), [pages]);
|
|
51
|
-
return useMemo(() => {
|
|
52
|
-
return flatPages
|
|
53
|
-
.filter((page) => isSelectedRoute(page, location))
|
|
54
|
-
.map((page) => page.key);
|
|
55
|
-
}, [location, flatPages, isSelectedRoute]);
|
|
56
|
-
};
|
|
57
|
-
/**
|
|
58
|
-
* If we are inside a frame (FIN5), the route is left as is.
|
|
59
|
-
* If we are outside FIN5 frame, the route needs to be prefixed with a segment containing the project name.
|
|
60
|
-
* @param route
|
|
61
|
-
* @returns the correct route for the environment
|
|
62
|
-
*/
|
|
63
|
-
export const getRoute = (route) => {
|
|
64
|
-
const prefixedRoute = route.startsWith('/') ? route : `/${route}`;
|
|
65
|
-
return !IN_IFRAME ? `/proj/:projectName${prefixedRoute}` : prefixedRoute;
|
|
66
|
-
};
|
|
67
|
-
/**
|
|
68
|
-
* Create a map that holds the page key and its related route.
|
|
69
|
-
* @param pages
|
|
70
|
-
* @returns the map page key - route
|
|
71
|
-
*/
|
|
72
|
-
export const useGetPageKeyRouteMap = (pages) => useMemo(() => {
|
|
73
|
-
const flatPages = pageTreeToPageList(pages);
|
|
74
|
-
const result = new Map();
|
|
75
|
-
flatPages.forEach((page) => {
|
|
76
|
-
result.set(page.key, page.route);
|
|
77
|
-
});
|
|
78
|
-
return result;
|
|
79
|
-
}, [pages]);
|
|
80
|
-
export const useDefaultOnSelect = (navigate, pageKeyRouteMap, pages) => useCallback((key) => {
|
|
81
|
-
const route = pageKeyRouteMap.get(key);
|
|
82
|
-
if (route) {
|
|
83
|
-
navigate(route);
|
|
84
|
-
}
|
|
85
|
-
else {
|
|
86
|
-
console.warn('Could not find route for page key', key, 'pages', pages);
|
|
87
|
-
}
|
|
88
|
-
}, [navigate, pageKeyRouteMap]);
|
|
89
|
-
/**
|
|
90
|
-
* Basic layout that uses React Router.
|
|
91
|
-
*/
|
|
92
|
-
export const ReactRouterLayout = ({ isSelectedRoute, pages = [], onSelect, ...otherProps }) => {
|
|
93
|
-
const navigate = useNavigate();
|
|
94
|
-
const selectedRoutes = useSelectedRoutes(pages, isSelectedRoute);
|
|
95
|
-
const pageKeyRouteMap = useGetPageKeyRouteMap(pages);
|
|
96
|
-
const defaultOnSelect = useDefaultOnSelect(navigate, pageKeyRouteMap, pages);
|
|
97
|
-
return (React.createElement(BasicLayout, { ...otherProps, pages: pages, onSelect: onSelect ?? defaultOnSelect, selectedPages: selectedRoutes },
|
|
98
|
-
React.createElement(Outlet, null)));
|
|
99
|
-
};
|
|
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
|
+
* This does not skip the hash update and should be used only with
|
|
13
|
+
* FIN >= 5.1.7.92, otherwise FIN will reload the entire page.
|
|
14
|
+
*/
|
|
15
|
+
export const useLocationUpdate = () => {
|
|
16
|
+
const location = useLocation();
|
|
17
|
+
useEffect(() => {
|
|
18
|
+
if (IN_IFRAME) {
|
|
19
|
+
setHash(location);
|
|
20
|
+
}
|
|
21
|
+
}, [location]);
|
|
22
|
+
};
|
|
23
|
+
/**
|
|
24
|
+
* This hook can be used with react-router/BasicLayout,
|
|
25
|
+
* to ensure FIN5 URL is aligned with the internal frame URL.
|
|
26
|
+
* This skips the hash update and should be used only with
|
|
27
|
+
* FIN < 5.1.7.92.
|
|
28
|
+
* @deprecated use only with FIN < 5.1.7.92
|
|
29
|
+
* @see {@link useLocationUpdate} for FIN >= 5.1.7.92
|
|
30
|
+
*/
|
|
31
|
+
export const useLocationUpdateSkippingHash = () => {
|
|
32
|
+
const location = useLocation();
|
|
33
|
+
useEffect(() => {
|
|
34
|
+
if (IN_IFRAME) {
|
|
35
|
+
fin5SkipHashUpdate()?.then(() => {
|
|
36
|
+
setHash(location);
|
|
37
|
+
});
|
|
38
|
+
}
|
|
39
|
+
}, [location]);
|
|
40
|
+
};
|
|
41
|
+
const setHash = (location) => {
|
|
42
|
+
const hash = location.pathname;
|
|
43
|
+
const queryParams = location.search;
|
|
44
|
+
const frameParameters = getFin5HashFrameParameters();
|
|
45
|
+
frameParameters.set('url', frameParameters.get('url')?.split('#')[0] + '#' + hash + queryParams);
|
|
46
|
+
getTopLocation().hash = `#${getTopLocation().hash.slice(1).split('?')[0]}?${frameParameters.toString()}`;
|
|
47
|
+
};
|
|
48
|
+
export const useSelectedRoutes = (pages, isSelectedRoute = (page, location) => location.pathname.includes(page.route)) => {
|
|
49
|
+
const location = useLocation();
|
|
50
|
+
const flatPages = useMemo(() => pageTreeToPageList(pages), [pages]);
|
|
51
|
+
return useMemo(() => {
|
|
52
|
+
return flatPages
|
|
53
|
+
.filter((page) => isSelectedRoute(page, location))
|
|
54
|
+
.map((page) => page.key);
|
|
55
|
+
}, [location, flatPages, isSelectedRoute]);
|
|
56
|
+
};
|
|
57
|
+
/**
|
|
58
|
+
* If we are inside a frame (FIN5), the route is left as is.
|
|
59
|
+
* If we are outside FIN5 frame, the route needs to be prefixed with a segment containing the project name.
|
|
60
|
+
* @param route
|
|
61
|
+
* @returns the correct route for the environment
|
|
62
|
+
*/
|
|
63
|
+
export const getRoute = (route) => {
|
|
64
|
+
const prefixedRoute = route.startsWith('/') ? route : `/${route}`;
|
|
65
|
+
return !IN_IFRAME ? `/proj/:projectName${prefixedRoute}` : prefixedRoute;
|
|
66
|
+
};
|
|
67
|
+
/**
|
|
68
|
+
* Create a map that holds the page key and its related route.
|
|
69
|
+
* @param pages
|
|
70
|
+
* @returns the map page key - route
|
|
71
|
+
*/
|
|
72
|
+
export const useGetPageKeyRouteMap = (pages) => useMemo(() => {
|
|
73
|
+
const flatPages = pageTreeToPageList(pages);
|
|
74
|
+
const result = new Map();
|
|
75
|
+
flatPages.forEach((page) => {
|
|
76
|
+
result.set(page.key, page.route);
|
|
77
|
+
});
|
|
78
|
+
return result;
|
|
79
|
+
}, [pages]);
|
|
80
|
+
export const useDefaultOnSelect = (navigate, pageKeyRouteMap, pages) => useCallback((key) => {
|
|
81
|
+
const route = pageKeyRouteMap.get(key);
|
|
82
|
+
if (route) {
|
|
83
|
+
navigate(route);
|
|
84
|
+
}
|
|
85
|
+
else {
|
|
86
|
+
console.warn('Could not find route for page key', key, 'pages', pages);
|
|
87
|
+
}
|
|
88
|
+
}, [navigate, pageKeyRouteMap]);
|
|
89
|
+
/**
|
|
90
|
+
* Basic layout that uses React Router.
|
|
91
|
+
*/
|
|
92
|
+
export const ReactRouterLayout = ({ isSelectedRoute, pages = [], onSelect, ...otherProps }) => {
|
|
93
|
+
const navigate = useNavigate();
|
|
94
|
+
const selectedRoutes = useSelectedRoutes(pages, isSelectedRoute);
|
|
95
|
+
const pageKeyRouteMap = useGetPageKeyRouteMap(pages);
|
|
96
|
+
const defaultOnSelect = useDefaultOnSelect(navigate, pageKeyRouteMap, pages);
|
|
97
|
+
return (React.createElement(BasicLayout, { ...otherProps, pages: pages, onSelect: onSelect ?? defaultOnSelect, selectedPages: selectedRoutes },
|
|
98
|
+
React.createElement(Outlet, null)));
|
|
99
|
+
};
|
|
100
100
|
//# sourceMappingURL=ReactRouterLayout.js.map
|
|
@@ -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>;
|