@j2inn/fin5-ui-utils 6.0.5-beta.0 → 6.0.5
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 +65 -66
- package/dist/fantomProps/readFantomPropsFile.js.map +1 -1
- 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 +53 -53
- 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 -35
- package/dist/index.js +69 -69
- 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 +40 -40
- package/dist/react/app/Fin5AppRootStore.js +69 -69
- 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 -285
- 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 -16
- package/dist/react/components/makeCustomElement.js +150 -150
- 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 +49 -49
- package/dist/react/hooks/useScreenSize.d.ts +7 -7
- package/dist/react/hooks/useScreenSize.js +31 -31
- 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 +39 -40
- package/dist_es/fantomProps/readFantomPropsFile.js.map +1 -1
- 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 +49 -49
- 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 -35
- package/dist_es/index.js +53 -53
- 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 +40 -40
- package/dist_es/react/app/Fin5AppRootStore.js +65 -65
- 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/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 -16
- package/dist_es/react/components/makeCustomElement.js +142 -142
- 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 +45 -45
- package/dist_es/react/hooks/useScreenSize.d.ts +7 -7
- package/dist_es/react/hooks/useScreenSize.js +27 -27
- package/package.json +1 -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,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 {};
|
|
@@ -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
|