@j2inn/fin5-ui-utils 3.0.3 → 3.0.4-beta.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/dist/react/components/navigation/BasicLayout.d.ts +12 -2
- package/dist/react/components/navigation/BasicLayout.js +21 -14
- package/dist/react/components/navigation/BasicLayout.js.map +1 -1
- package/dist/react/components/navigation/HeaderSiderLayout.d.ts +1 -1
- package/dist/react/components/navigation/HeaderSiderLayout.js +21 -15
- package/dist/react/components/navigation/HeaderSiderLayout.js.map +1 -1
- package/dist_es/react/components/navigation/BasicLayout.d.ts +12 -2
- package/dist_es/react/components/navigation/BasicLayout.js +20 -13
- package/dist_es/react/components/navigation/BasicLayout.js.map +1 -1
- package/dist_es/react/components/navigation/HeaderSiderLayout.d.ts +1 -1
- package/dist_es/react/components/navigation/HeaderSiderLayout.js +22 -16
- package/dist_es/react/components/navigation/HeaderSiderLayout.js.map +1 -1
- package/package.json +1 -1
|
@@ -1,6 +1,12 @@
|
|
|
1
1
|
import { LayoutProps, MenuProps, SiderProps } from 'antd';
|
|
2
|
-
import { PropsWithChildren, ReactElement } from 'react';
|
|
2
|
+
import React, { PropsWithChildren, ReactElement } from 'react';
|
|
3
3
|
import { MenuPage } from './MenuPage';
|
|
4
|
+
export interface BasicLayoutStyleVariables {
|
|
5
|
+
isMobile?: boolean;
|
|
6
|
+
compactSider?: boolean;
|
|
7
|
+
siderWidth?: number | string;
|
|
8
|
+
headerHeight: number;
|
|
9
|
+
}
|
|
4
10
|
export interface BasicLayoutProps<T extends MenuPage> extends PropsWithChildren {
|
|
5
11
|
pages?: T[];
|
|
6
12
|
defaultPage?: string;
|
|
@@ -12,7 +18,10 @@ export interface BasicLayoutProps<T extends MenuPage> extends PropsWithChildren
|
|
|
12
18
|
siderProps?: SiderProps;
|
|
13
19
|
contentProps?: LayoutProps;
|
|
14
20
|
menuProps?: Omit<MenuProps, 'items' | 'selectedKeys' | 'onSelect'>;
|
|
21
|
+
menuBefore?: React.ReactNode;
|
|
22
|
+
menuAfter?: React.ReactNode;
|
|
15
23
|
menuTriggerClassName?: string;
|
|
24
|
+
headerHeight?: number;
|
|
16
25
|
}
|
|
17
26
|
/**
|
|
18
27
|
* Copy the array and recursively remove pages having the `showInMenu` flag set to false.
|
|
@@ -20,8 +29,9 @@ export interface BasicLayoutProps<T extends MenuPage> extends PropsWithChildren
|
|
|
20
29
|
* @returns
|
|
21
30
|
*/
|
|
22
31
|
export declare const getMenuPages: (pages: MenuPage[]) => MenuPage<Record<string, unknown>>[];
|
|
32
|
+
export declare const DEFAULT_HEADER_HEIGHT = 45;
|
|
23
33
|
/**
|
|
24
34
|
* Basic layout with sider and mobile navigation management.
|
|
25
35
|
* Routing management can be plugged in, for examples @see ReactRouterLayout @see RouterLayout
|
|
26
36
|
*/
|
|
27
|
-
export declare function BasicLayout<T extends MenuPage>({ pages, defaultPage, selectedPages, onSelect, compactSider, layoutProps, mobileHeaderProps, siderProps, contentProps, menuProps, menuTriggerClassName, children, }: BasicLayoutProps<T>): ReactElement;
|
|
37
|
+
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;
|
|
@@ -29,22 +29,21 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
|
29
29
|
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
30
30
|
};
|
|
31
31
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
32
|
-
exports.BasicLayout = exports.getMenuPages = void 0;
|
|
32
|
+
exports.BasicLayout = exports.DEFAULT_HEADER_HEIGHT = exports.getMenuPages = void 0;
|
|
33
33
|
const ui_1 = require("@j2inn/ui");
|
|
34
34
|
const classnames_1 = __importDefault(require("classnames"));
|
|
35
35
|
const react_1 = __importStar(require("react"));
|
|
36
36
|
const react_jss_1 = require("react-jss");
|
|
37
37
|
const MenuTrigger_1 = __importDefault(require("./MenuTrigger"));
|
|
38
|
-
const HEADER_HEIGHT = 45;
|
|
39
38
|
const useStyles = (0, react_jss_1.createUseStyles)({
|
|
40
|
-
header: {
|
|
39
|
+
header: ({ headerHeight }) => ({
|
|
41
40
|
position: 'fixed',
|
|
42
41
|
width: '100%',
|
|
43
42
|
zIndex: 1000,
|
|
44
43
|
padding: 0,
|
|
45
|
-
height:
|
|
46
|
-
lineHeight:
|
|
47
|
-
},
|
|
44
|
+
height: headerHeight,
|
|
45
|
+
lineHeight: `${headerHeight}px`,
|
|
46
|
+
}),
|
|
48
47
|
sider: {
|
|
49
48
|
overflow: 'auto',
|
|
50
49
|
height: '100vh',
|
|
@@ -53,11 +52,11 @@ const useStyles = (0, react_jss_1.createUseStyles)({
|
|
|
53
52
|
top: 0,
|
|
54
53
|
bottom: 0,
|
|
55
54
|
zIndex: 999,
|
|
56
|
-
paddingTop: ({ isMobile }) => isMobile ?
|
|
55
|
+
paddingTop: ({ isMobile, headerHeight }) => isMobile ? headerHeight : 0,
|
|
57
56
|
},
|
|
58
|
-
content: ({ isMobile, compactSider, siderWidth = 200, }) => ({
|
|
57
|
+
content: ({ isMobile, compactSider, siderWidth = 200, headerHeight, }) => ({
|
|
59
58
|
paddingLeft: isMobile ? 0 : compactSider ? 45 : siderWidth,
|
|
60
|
-
paddingTop: isMobile ?
|
|
59
|
+
paddingTop: isMobile ? headerHeight : 0,
|
|
61
60
|
}),
|
|
62
61
|
});
|
|
63
62
|
// Workaround j2inn/ui exporting problem
|
|
@@ -87,20 +86,26 @@ const getMenuPages = (pages) => {
|
|
|
87
86
|
return menuPages;
|
|
88
87
|
};
|
|
89
88
|
exports.getMenuPages = getMenuPages;
|
|
89
|
+
exports.DEFAULT_HEADER_HEIGHT = 45;
|
|
90
90
|
/**
|
|
91
91
|
* Basic layout with sider and mobile navigation management.
|
|
92
92
|
* Routing management can be plugged in, for examples @see ReactRouterLayout @see RouterLayout
|
|
93
93
|
*/
|
|
94
|
-
function BasicLayout({ pages = [], defaultPage, selectedPages = [], onSelect, compactSider, layoutProps, mobileHeaderProps, siderProps, contentProps, menuProps, menuTriggerClassName, children, }) {
|
|
94
|
+
function BasicLayout({ pages = [], defaultPage, selectedPages = [], onSelect, compactSider, layoutProps, mobileHeaderProps, siderProps, contentProps, menuProps, menuBefore, menuAfter, menuTriggerClassName, headerHeight = exports.DEFAULT_HEADER_HEIGHT, children, }) {
|
|
95
95
|
// manage mobile navigation
|
|
96
96
|
const [isMobile, setIsMobile] = (0, react_1.useState)(false);
|
|
97
97
|
const [hiddenSider, setHiddenSider] = (0, react_1.useState)(false);
|
|
98
98
|
const siderWidth = siderProps?.width;
|
|
99
|
-
const classes = useStyles({
|
|
99
|
+
const classes = useStyles({
|
|
100
|
+
isMobile,
|
|
101
|
+
compactSider,
|
|
102
|
+
siderWidth,
|
|
103
|
+
headerHeight,
|
|
104
|
+
});
|
|
100
105
|
const menuPages = (0, react_1.useMemo)(() => (0, exports.getMenuPages)(pages), [pages]);
|
|
101
106
|
return (react_1.default.createElement(ui_1.Layout, { hasSider: true, ...layoutProps },
|
|
102
107
|
isMobile && (react_1.default.createElement(Header, { ...mobileHeaderProps, className: (0, classnames_1.default)(classes.header, mobileHeaderProps?.className) },
|
|
103
|
-
react_1.default.createElement(MenuTrigger_1.default, { hiddenSider: hiddenSider, headerHeight:
|
|
108
|
+
react_1.default.createElement(MenuTrigger_1.default, { hiddenSider: hiddenSider, headerHeight: headerHeight, className: menuTriggerClassName, onClick: () => {
|
|
104
109
|
setHiddenSider(!hiddenSider);
|
|
105
110
|
} }))),
|
|
106
111
|
react_1.default.createElement(Sider, { ...siderProps, className: (0, classnames_1.default)(classes.sider, siderProps?.className), breakpoint: 'md', onBreakpoint: (broken) => {
|
|
@@ -109,14 +114,16 @@ function BasicLayout({ pages = [], defaultPage, selectedPages = [], onSelect, co
|
|
|
109
114
|
}, collapsed: (isMobile && hiddenSider) || compactSider, collapsedWidth: isMobile && hiddenSider
|
|
110
115
|
? 0
|
|
111
116
|
: compactSider
|
|
112
|
-
?
|
|
117
|
+
? headerHeight
|
|
113
118
|
: 0, trigger: null },
|
|
119
|
+
menuBefore,
|
|
114
120
|
react_1.default.createElement(ui_1.Menu, { ...menuProps, defaultSelectedKeys: defaultPage ? [defaultPage] : undefined, items: menuPages, selectedKeys: selectedPages, onSelect: ({ key }) => {
|
|
115
121
|
if (!hiddenSider) {
|
|
116
122
|
setHiddenSider(true);
|
|
117
123
|
}
|
|
118
124
|
onSelect?.(key);
|
|
119
|
-
} })
|
|
125
|
+
} }),
|
|
126
|
+
menuAfter),
|
|
120
127
|
react_1.default.createElement(Content, { ...contentProps, className: (0, classnames_1.default)(classes.content, contentProps?.className) }, children)));
|
|
121
128
|
}
|
|
122
129
|
exports.BasicLayout = BasicLayout;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"BasicLayout.js","sourceRoot":"","sources":["../../../../src/react/components/navigation/BasicLayout.tsx"],"names":[],"mappings":";AAAA;;GAEG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAEH,kCAAwC;AAExC,4DAAmC;AACnC,+CAKc;AACd,yCAA2C;AAE3C,gEAAuC;
|
|
1
|
+
{"version":3,"file":"BasicLayout.js","sourceRoot":"","sources":["../../../../src/react/components/navigation/BasicLayout.tsx"],"names":[],"mappings":"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"}
|
|
@@ -10,4 +10,4 @@ export declare type HeaderSiderLayoutProps<T extends MenuPage> = Omit<BasicLayou
|
|
|
10
10
|
* Layout with header and sider. Sider is collapsed on mobile.
|
|
11
11
|
* Routing management can be plugged in, for examples @see ReactRouterLayout @see RouterLayout
|
|
12
12
|
*/
|
|
13
|
-
export declare function HeaderSiderLayout<T extends MenuPage>({ pages, defaultPage, selectedPages, onSelect, compactSider, layoutProps, header, headerProps, siderProps, contentProps, menuProps, menuTriggerClassName, children, }: HeaderSiderLayoutProps<T>): ReactElement;
|
|
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;
|
|
@@ -36,20 +36,19 @@ const react_1 = __importStar(require("react"));
|
|
|
36
36
|
const react_jss_1 = require("react-jss");
|
|
37
37
|
const BasicLayout_1 = require("./BasicLayout");
|
|
38
38
|
const MenuTrigger_1 = __importDefault(require("./MenuTrigger"));
|
|
39
|
-
const HEADER_HEIGHT = 45;
|
|
40
39
|
const useStyles = (0, react_jss_1.createUseStyles)({
|
|
41
|
-
header: {
|
|
40
|
+
header: ({ headerHeight }) => ({
|
|
42
41
|
position: 'fixed',
|
|
43
42
|
width: '100%',
|
|
44
43
|
zIndex: 1000,
|
|
45
44
|
padding: 0,
|
|
46
|
-
height:
|
|
47
|
-
lineHeight:
|
|
48
|
-
},
|
|
45
|
+
height: headerHeight,
|
|
46
|
+
lineHeight: `${headerHeight}px`,
|
|
47
|
+
}),
|
|
49
48
|
headerContent: {
|
|
50
49
|
height: '100%',
|
|
51
50
|
},
|
|
52
|
-
sider: {
|
|
51
|
+
sider: ({ headerHeight }) => ({
|
|
53
52
|
overflow: 'auto',
|
|
54
53
|
height: '100vh',
|
|
55
54
|
position: 'fixed',
|
|
@@ -57,11 +56,11 @@ const useStyles = (0, react_jss_1.createUseStyles)({
|
|
|
57
56
|
top: 0,
|
|
58
57
|
bottom: 0,
|
|
59
58
|
zIndex: 999,
|
|
60
|
-
paddingTop:
|
|
61
|
-
},
|
|
62
|
-
content: ({ isMobile, compactSider, siderWidth = 200, }) => ({
|
|
59
|
+
paddingTop: headerHeight,
|
|
60
|
+
}),
|
|
61
|
+
content: ({ isMobile, compactSider, siderWidth = 200, headerHeight, }) => ({
|
|
63
62
|
paddingLeft: isMobile ? 0 : compactSider ? 45 : siderWidth,
|
|
64
|
-
paddingTop:
|
|
63
|
+
paddingTop: headerHeight,
|
|
65
64
|
}),
|
|
66
65
|
});
|
|
67
66
|
// Workaround j2inn/ui exporting problem
|
|
@@ -72,16 +71,21 @@ const Content = ui_1.Layout.Content;
|
|
|
72
71
|
* Layout with header and sider. Sider is collapsed on mobile.
|
|
73
72
|
* Routing management can be plugged in, for examples @see ReactRouterLayout @see RouterLayout
|
|
74
73
|
*/
|
|
75
|
-
function HeaderSiderLayout({ pages = [], defaultPage, selectedPages = [], onSelect, compactSider, layoutProps, header, headerProps, siderProps, contentProps, menuProps, menuTriggerClassName, children, }) {
|
|
74
|
+
function HeaderSiderLayout({ pages = [], defaultPage, selectedPages = [], onSelect, compactSider, layoutProps, header, headerProps, siderProps, contentProps, menuProps, menuBefore, menuAfter, menuTriggerClassName, headerHeight = BasicLayout_1.DEFAULT_HEADER_HEIGHT, children, }) {
|
|
76
75
|
const [isMobile, setIsMobile] = (0, react_1.useState)(false);
|
|
77
76
|
const [hiddenSider, setHiddenSider] = (0, react_1.useState)(false);
|
|
78
77
|
const siderWidth = siderProps?.width;
|
|
79
|
-
const classes = useStyles({
|
|
78
|
+
const classes = useStyles({
|
|
79
|
+
isMobile,
|
|
80
|
+
compactSider,
|
|
81
|
+
siderWidth,
|
|
82
|
+
headerHeight,
|
|
83
|
+
});
|
|
80
84
|
const menuPages = (0, react_1.useMemo)(() => (0, BasicLayout_1.getMenuPages)(pages), [pages]);
|
|
81
85
|
return (react_1.default.createElement(ui_1.Layout, { hasSider: true, ...layoutProps },
|
|
82
86
|
react_1.default.createElement(Header, { ...headerProps, className: (0, classnames_1.default)(classes.header, headerProps?.className) },
|
|
83
87
|
react_1.default.createElement(ui_1.Container, { horizontal: true, middle: true, className: classes.headerContent },
|
|
84
|
-
isMobile && (react_1.default.createElement(MenuTrigger_1.default, { hiddenSider: hiddenSider, headerHeight:
|
|
88
|
+
isMobile && (react_1.default.createElement(MenuTrigger_1.default, { hiddenSider: hiddenSider, headerHeight: headerHeight, className: menuTriggerClassName, onClick: () => {
|
|
85
89
|
setHiddenSider(!hiddenSider);
|
|
86
90
|
} })),
|
|
87
91
|
header)),
|
|
@@ -91,14 +95,16 @@ function HeaderSiderLayout({ pages = [], defaultPage, selectedPages = [], onSele
|
|
|
91
95
|
}, collapsed: (isMobile && hiddenSider) || compactSider, collapsedWidth: isMobile && hiddenSider
|
|
92
96
|
? 0
|
|
93
97
|
: compactSider
|
|
94
|
-
?
|
|
98
|
+
? headerHeight
|
|
95
99
|
: 0, trigger: null },
|
|
100
|
+
menuBefore,
|
|
96
101
|
react_1.default.createElement(ui_1.Menu, { ...menuProps, defaultSelectedKeys: defaultPage ? [defaultPage] : undefined, items: menuPages, selectedKeys: selectedPages, onSelect: ({ key }) => {
|
|
97
102
|
if (!hiddenSider) {
|
|
98
103
|
setHiddenSider(true);
|
|
99
104
|
}
|
|
100
105
|
onSelect?.(key);
|
|
101
|
-
} })
|
|
106
|
+
} }),
|
|
107
|
+
menuAfter),
|
|
102
108
|
react_1.default.createElement(Content, { ...contentProps, className: (0, classnames_1.default)(classes.content, contentProps?.className) }, children)));
|
|
103
109
|
}
|
|
104
110
|
exports.HeaderSiderLayout = HeaderSiderLayout;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"HeaderSiderLayout.js","sourceRoot":"","sources":["../../../../src/react/components/navigation/HeaderSiderLayout.tsx"],"names":[],"mappings":";AAAA;;GAEG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAEH,kCAAmD;AAEnD,4DAAmC;AACnC,+CAA8D;AAC9D,yCAA2C;AAC3C,+
|
|
1
|
+
{"version":3,"file":"HeaderSiderLayout.js","sourceRoot":"","sources":["../../../../src/react/components/navigation/HeaderSiderLayout.tsx"],"names":[],"mappings":";AAAA;;GAEG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAEH,kCAAmD;AAEnD,4DAAmC;AACnC,+CAA8D;AAC9D,yCAA2C;AAC3C,+CAKsB;AAEtB,gEAAuC;AAEvC,MAAM,SAAS,GAAG,IAAA,2BAAe,EAAC;IACjC,MAAM,EAAE,CAAC,EAAE,YAAY,EAA6B,EAAE,EAAE,CAAC,CAAC;QACzD,QAAQ,EAAE,OAAO;QACjB,KAAK,EAAE,MAAM;QACb,MAAM,EAAE,IAAI;QACZ,OAAO,EAAE,CAAC;QACV,MAAM,EAAE,YAAY;QACpB,UAAU,EAAE,GAAG,YAAY,IAAI;KAC/B,CAAC;IACF,aAAa,EAAE;QACd,MAAM,EAAE,MAAM;KACd;IACD,KAAK,EAAE,CAAC,EAAE,YAAY,EAA6B,EAAE,EAAE,CAAC,CAAC;QACxD,QAAQ,EAAE,MAAM;QAChB,MAAM,EAAE,OAAO;QACf,QAAQ,EAAE,OAAO;QACjB,IAAI,EAAE,CAAC;QACP,GAAG,EAAE,CAAC;QACN,MAAM,EAAE,CAAC;QACT,MAAM,EAAE,GAAG;QACX,UAAU,EAAE,YAAY;KACxB,CAAC;IACF,OAAO,EAAE,CAAC,EACT,QAAQ,EACR,YAAY,EACZ,UAAU,GAAG,GAAG,EAChB,YAAY,GACe,EAAE,EAAE,CAAC,CAAC;QACjC,WAAW,EAAE,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,UAAU;QAC1D,UAAU,EAAE,YAAY;KACxB,CAAC;CACF,CAAC,CAAA;AAEF,wCAAwC;AACxC,MAAM,MAAM,GAAG,WAAM,CAAC,MAAiC,CAAA;AACvD,MAAM,KAAK,GAAG,WAAM,CAAC,KAA+B,CAAA;AACpD,MAAM,OAAO,GAAG,WAAM,CAAC,OAAmC,CAAA;AAU1D;;;GAGG;AACH,SAAgB,iBAAiB,CAAqB,EACrD,KAAK,GAAG,EAAE,EACV,WAAW,EACX,aAAa,GAAG,EAAE,EAClB,QAAQ,EACR,YAAY,EACZ,WAAW,EACX,MAAM,EACN,WAAW,EACX,UAAU,EACV,YAAY,EACZ,SAAS,EACT,UAAU,EACV,SAAS,EACT,oBAAoB,EACpB,YAAY,GAAG,mCAAqB,EACpC,QAAQ,GACmB;IAC3B,MAAM,CAAC,QAAQ,EAAE,WAAW,CAAC,GAAG,IAAA,gBAAQ,EAAC,KAAK,CAAC,CAAA;IAC/C,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,IAAA,gBAAQ,EAAC,KAAK,CAAC,CAAA;IACrD,MAAM,UAAU,GAAG,UAAU,EAAE,KAAK,CAAA;IACpC,MAAM,OAAO,GAAG,SAAS,CAAC;QACzB,QAAQ;QACR,YAAY;QACZ,UAAU;QACV,YAAY;KACZ,CAAC,CAAA;IAEF,MAAM,SAAS,GAAG,IAAA,eAAO,EAAC,GAAG,EAAE,CAAC,IAAA,0BAAY,EAAC,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAA;IAE7D,OAAO,CACN,8BAAC,WAAM,IAAC,QAAQ,WAAK,WAAW;QAC/B,8BAAC,MAAM,OACF,WAAW,EACf,SAAS,EAAE,IAAA,oBAAU,EAAC,OAAO,CAAC,MAAM,EAAE,WAAW,EAAE,SAAS,CAAC;YAC7D,8BAAC,cAAS,IAAC,UAAU,QAAC,MAAM,QAAC,SAAS,EAAE,OAAO,CAAC,aAAa;gBAC3D,QAAQ,IAAI,CACZ,8BAAC,qBAAW,IACX,WAAW,EAAE,WAAW,EACxB,YAAY,EAAE,YAAY,EAC1B,SAAS,EAAE,oBAAoB,EAC/B,OAAO,EAAE,GAAG,EAAE;wBACb,cAAc,CAAC,CAAC,WAAW,CAAC,CAAA;oBAC7B,CAAC,GACA,CACF;gBACA,MAAM,CACI,CACJ;QACT,8BAAC,KAAK,OACD,UAAU,EACd,SAAS,EAAE,IAAA,oBAAU,EAAC,OAAO,CAAC,KAAK,EAAE,UAAU,EAAE,SAAS,CAAC,EAC3D,UAAU,EAAC,IAAI,EACf,YAAY,EAAE,CAAC,MAAe,EAAE,EAAE;gBACjC,WAAW,CAAC,MAAM,CAAC,CAAA;gBACnB,cAAc,CAAC,IAAI,CAAC,CAAA;YACrB,CAAC,EACD,SAAS,EAAE,CAAC,QAAQ,IAAI,WAAW,CAAC,IAAI,YAAY,EACpD,cAAc,EACb,QAAQ,IAAI,WAAW;gBACtB,CAAC,CAAC,CAAC;gBACH,CAAC,CAAC,YAAY;oBACd,CAAC,CAAC,YAAY;oBACd,CAAC,CAAC,CAAC,EAEL,OAAO,EAAE,IAAI;YACZ,UAAU;YACX,8BAAC,SAAI,OACA,SAAS,EACb,mBAAmB,EAClB,WAAW,CAAC,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC,SAAS,EAExC,KAAK,EAAE,SAAS,EAChB,YAAY,EAAE,aAAa,EAC3B,QAAQ,EAAE,CAAC,EAAE,GAAG,EAAE,EAAE,EAAE;oBACrB,IAAI,CAAC,WAAW,EAAE;wBACjB,cAAc,CAAC,IAAI,CAAC,CAAA;qBACpB;oBACD,QAAQ,EAAE,CAAC,GAAG,CAAC,CAAA;gBAChB,CAAC,GACA;YACD,SAAS,CACH;QACR,8BAAC,OAAO,OACH,YAAY,EAChB,SAAS,EAAE,IAAA,oBAAU,EACpB,OAAO,CAAC,OAAO,EACf,YAAY,EAAE,SAAS,CACvB,IACA,QAAQ,CACA,CACF,CACT,CAAA;AACF,CAAC;AA7FD,8CA6FC"}
|
|
@@ -1,6 +1,12 @@
|
|
|
1
1
|
import { LayoutProps, MenuProps, SiderProps } from 'antd';
|
|
2
|
-
import { PropsWithChildren, ReactElement } from 'react';
|
|
2
|
+
import React, { PropsWithChildren, ReactElement } from 'react';
|
|
3
3
|
import { MenuPage } from './MenuPage';
|
|
4
|
+
export interface BasicLayoutStyleVariables {
|
|
5
|
+
isMobile?: boolean;
|
|
6
|
+
compactSider?: boolean;
|
|
7
|
+
siderWidth?: number | string;
|
|
8
|
+
headerHeight: number;
|
|
9
|
+
}
|
|
4
10
|
export interface BasicLayoutProps<T extends MenuPage> extends PropsWithChildren {
|
|
5
11
|
pages?: T[];
|
|
6
12
|
defaultPage?: string;
|
|
@@ -12,7 +18,10 @@ export interface BasicLayoutProps<T extends MenuPage> extends PropsWithChildren
|
|
|
12
18
|
siderProps?: SiderProps;
|
|
13
19
|
contentProps?: LayoutProps;
|
|
14
20
|
menuProps?: Omit<MenuProps, 'items' | 'selectedKeys' | 'onSelect'>;
|
|
21
|
+
menuBefore?: React.ReactNode;
|
|
22
|
+
menuAfter?: React.ReactNode;
|
|
15
23
|
menuTriggerClassName?: string;
|
|
24
|
+
headerHeight?: number;
|
|
16
25
|
}
|
|
17
26
|
/**
|
|
18
27
|
* Copy the array and recursively remove pages having the `showInMenu` flag set to false.
|
|
@@ -20,8 +29,9 @@ export interface BasicLayoutProps<T extends MenuPage> extends PropsWithChildren
|
|
|
20
29
|
* @returns
|
|
21
30
|
*/
|
|
22
31
|
export declare const getMenuPages: (pages: MenuPage[]) => MenuPage<Record<string, unknown>>[];
|
|
32
|
+
export declare const DEFAULT_HEADER_HEIGHT = 45;
|
|
23
33
|
/**
|
|
24
34
|
* Basic layout with sider and mobile navigation management.
|
|
25
35
|
* Routing management can be plugged in, for examples @see ReactRouterLayout @see RouterLayout
|
|
26
36
|
*/
|
|
27
|
-
export declare function BasicLayout<T extends MenuPage>({ pages, defaultPage, selectedPages, onSelect, compactSider, layoutProps, mobileHeaderProps, siderProps, contentProps, menuProps, menuTriggerClassName, children, }: BasicLayoutProps<T>): ReactElement;
|
|
37
|
+
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;
|
|
@@ -6,16 +6,15 @@ import classNames from 'classnames';
|
|
|
6
6
|
import React, { useMemo, useState, } from 'react';
|
|
7
7
|
import { createUseStyles } from 'react-jss';
|
|
8
8
|
import MenuTrigger from './MenuTrigger';
|
|
9
|
-
const HEADER_HEIGHT = 45;
|
|
10
9
|
const useStyles = createUseStyles({
|
|
11
|
-
header: {
|
|
10
|
+
header: ({ headerHeight }) => ({
|
|
12
11
|
position: 'fixed',
|
|
13
12
|
width: '100%',
|
|
14
13
|
zIndex: 1000,
|
|
15
14
|
padding: 0,
|
|
16
|
-
height:
|
|
17
|
-
lineHeight:
|
|
18
|
-
},
|
|
15
|
+
height: headerHeight,
|
|
16
|
+
lineHeight: `${headerHeight}px`,
|
|
17
|
+
}),
|
|
19
18
|
sider: {
|
|
20
19
|
overflow: 'auto',
|
|
21
20
|
height: '100vh',
|
|
@@ -24,11 +23,11 @@ const useStyles = createUseStyles({
|
|
|
24
23
|
top: 0,
|
|
25
24
|
bottom: 0,
|
|
26
25
|
zIndex: 999,
|
|
27
|
-
paddingTop: ({ isMobile }) => isMobile ?
|
|
26
|
+
paddingTop: ({ isMobile, headerHeight }) => isMobile ? headerHeight : 0,
|
|
28
27
|
},
|
|
29
|
-
content: ({ isMobile, compactSider, siderWidth = 200, }) => ({
|
|
28
|
+
content: ({ isMobile, compactSider, siderWidth = 200, headerHeight, }) => ({
|
|
30
29
|
paddingLeft: isMobile ? 0 : compactSider ? 45 : siderWidth,
|
|
31
|
-
paddingTop: isMobile ?
|
|
30
|
+
paddingTop: isMobile ? headerHeight : 0,
|
|
32
31
|
}),
|
|
33
32
|
});
|
|
34
33
|
// Workaround j2inn/ui exporting problem
|
|
@@ -57,20 +56,26 @@ export const getMenuPages = (pages) => {
|
|
|
57
56
|
});
|
|
58
57
|
return menuPages;
|
|
59
58
|
};
|
|
59
|
+
export const DEFAULT_HEADER_HEIGHT = 45;
|
|
60
60
|
/**
|
|
61
61
|
* Basic layout with sider and mobile navigation management.
|
|
62
62
|
* Routing management can be plugged in, for examples @see ReactRouterLayout @see RouterLayout
|
|
63
63
|
*/
|
|
64
|
-
export function BasicLayout({ pages = [], defaultPage, selectedPages = [], onSelect, compactSider, layoutProps, mobileHeaderProps, siderProps, contentProps, menuProps, menuTriggerClassName, children, }) {
|
|
64
|
+
export function BasicLayout({ pages = [], defaultPage, selectedPages = [], onSelect, compactSider, layoutProps, mobileHeaderProps, siderProps, contentProps, menuProps, menuBefore, menuAfter, menuTriggerClassName, headerHeight = DEFAULT_HEADER_HEIGHT, children, }) {
|
|
65
65
|
// manage mobile navigation
|
|
66
66
|
const [isMobile, setIsMobile] = useState(false);
|
|
67
67
|
const [hiddenSider, setHiddenSider] = useState(false);
|
|
68
68
|
const siderWidth = siderProps?.width;
|
|
69
|
-
const classes = useStyles({
|
|
69
|
+
const classes = useStyles({
|
|
70
|
+
isMobile,
|
|
71
|
+
compactSider,
|
|
72
|
+
siderWidth,
|
|
73
|
+
headerHeight,
|
|
74
|
+
});
|
|
70
75
|
const menuPages = useMemo(() => getMenuPages(pages), [pages]);
|
|
71
76
|
return (React.createElement(Layout, { hasSider: true, ...layoutProps },
|
|
72
77
|
isMobile && (React.createElement(Header, { ...mobileHeaderProps, className: classNames(classes.header, mobileHeaderProps?.className) },
|
|
73
|
-
React.createElement(MenuTrigger, { hiddenSider: hiddenSider, headerHeight:
|
|
78
|
+
React.createElement(MenuTrigger, { hiddenSider: hiddenSider, headerHeight: headerHeight, className: menuTriggerClassName, onClick: () => {
|
|
74
79
|
setHiddenSider(!hiddenSider);
|
|
75
80
|
} }))),
|
|
76
81
|
React.createElement(Sider, { ...siderProps, className: classNames(classes.sider, siderProps?.className), breakpoint: 'md', onBreakpoint: (broken) => {
|
|
@@ -79,14 +84,16 @@ export function BasicLayout({ pages = [], defaultPage, selectedPages = [], onSel
|
|
|
79
84
|
}, collapsed: (isMobile && hiddenSider) || compactSider, collapsedWidth: isMobile && hiddenSider
|
|
80
85
|
? 0
|
|
81
86
|
: compactSider
|
|
82
|
-
?
|
|
87
|
+
? headerHeight
|
|
83
88
|
: 0, trigger: null },
|
|
89
|
+
menuBefore,
|
|
84
90
|
React.createElement(Menu, { ...menuProps, defaultSelectedKeys: defaultPage ? [defaultPage] : undefined, items: menuPages, selectedKeys: selectedPages, onSelect: ({ key }) => {
|
|
85
91
|
if (!hiddenSider) {
|
|
86
92
|
setHiddenSider(true);
|
|
87
93
|
}
|
|
88
94
|
onSelect?.(key);
|
|
89
|
-
} })
|
|
95
|
+
} }),
|
|
96
|
+
menuAfter),
|
|
90
97
|
React.createElement(Content, { ...contentProps, className: classNames(classes.content, contentProps?.className) }, children)));
|
|
91
98
|
}
|
|
92
99
|
//# sourceMappingURL=BasicLayout.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"BasicLayout.js","sourceRoot":"","sources":["../../../../src/react/components/navigation/BasicLayout.tsx"],"names":[],"mappings":"AAAA;;GAEG;AAEH,OAAO,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,WAAW,CAAA;AAExC,OAAO,UAAU,MAAM,YAAY,CAAA;AACnC,OAAO,KAAK,EAAE,EAGb,OAAO,EACP,QAAQ,GACR,MAAM,OAAO,CAAA;AACd,OAAO,EAAE,eAAe,EAAE,MAAM,WAAW,CAAA;AAE3C,OAAO,WAAW,MAAM,eAAe,CAAA;
|
|
1
|
+
{"version":3,"file":"BasicLayout.js","sourceRoot":"","sources":["../../../../src/react/components/navigation/BasicLayout.tsx"],"names":[],"mappings":"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"}
|
|
@@ -10,4 +10,4 @@ export declare type HeaderSiderLayoutProps<T extends MenuPage> = Omit<BasicLayou
|
|
|
10
10
|
* Layout with header and sider. Sider is collapsed on mobile.
|
|
11
11
|
* Routing management can be plugged in, for examples @see ReactRouterLayout @see RouterLayout
|
|
12
12
|
*/
|
|
13
|
-
export declare function HeaderSiderLayout<T extends MenuPage>({ pages, defaultPage, selectedPages, onSelect, compactSider, layoutProps, header, headerProps, siderProps, contentProps, menuProps, menuTriggerClassName, children, }: HeaderSiderLayoutProps<T>): ReactElement;
|
|
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;
|
|
@@ -5,22 +5,21 @@ import { Container, Layout, Menu } from '@j2inn/ui';
|
|
|
5
5
|
import classNames from 'classnames';
|
|
6
6
|
import React, { useMemo, useState } from 'react';
|
|
7
7
|
import { createUseStyles } from 'react-jss';
|
|
8
|
-
import { getMenuPages } from './BasicLayout';
|
|
8
|
+
import { DEFAULT_HEADER_HEIGHT, getMenuPages, } from './BasicLayout';
|
|
9
9
|
import MenuTrigger from './MenuTrigger';
|
|
10
|
-
const HEADER_HEIGHT = 45;
|
|
11
10
|
const useStyles = createUseStyles({
|
|
12
|
-
header: {
|
|
11
|
+
header: ({ headerHeight }) => ({
|
|
13
12
|
position: 'fixed',
|
|
14
13
|
width: '100%',
|
|
15
14
|
zIndex: 1000,
|
|
16
15
|
padding: 0,
|
|
17
|
-
height:
|
|
18
|
-
lineHeight:
|
|
19
|
-
},
|
|
16
|
+
height: headerHeight,
|
|
17
|
+
lineHeight: `${headerHeight}px`,
|
|
18
|
+
}),
|
|
20
19
|
headerContent: {
|
|
21
20
|
height: '100%',
|
|
22
21
|
},
|
|
23
|
-
sider: {
|
|
22
|
+
sider: ({ headerHeight }) => ({
|
|
24
23
|
overflow: 'auto',
|
|
25
24
|
height: '100vh',
|
|
26
25
|
position: 'fixed',
|
|
@@ -28,11 +27,11 @@ const useStyles = createUseStyles({
|
|
|
28
27
|
top: 0,
|
|
29
28
|
bottom: 0,
|
|
30
29
|
zIndex: 999,
|
|
31
|
-
paddingTop:
|
|
32
|
-
},
|
|
33
|
-
content: ({ isMobile, compactSider, siderWidth = 200, }) => ({
|
|
30
|
+
paddingTop: headerHeight,
|
|
31
|
+
}),
|
|
32
|
+
content: ({ isMobile, compactSider, siderWidth = 200, headerHeight, }) => ({
|
|
34
33
|
paddingLeft: isMobile ? 0 : compactSider ? 45 : siderWidth,
|
|
35
|
-
paddingTop:
|
|
34
|
+
paddingTop: headerHeight,
|
|
36
35
|
}),
|
|
37
36
|
});
|
|
38
37
|
// Workaround j2inn/ui exporting problem
|
|
@@ -43,16 +42,21 @@ const Content = Layout.Content;
|
|
|
43
42
|
* Layout with header and sider. Sider is collapsed on mobile.
|
|
44
43
|
* Routing management can be plugged in, for examples @see ReactRouterLayout @see RouterLayout
|
|
45
44
|
*/
|
|
46
|
-
export function HeaderSiderLayout({ pages = [], defaultPage, selectedPages = [], onSelect, compactSider, layoutProps, header, headerProps, siderProps, contentProps, menuProps, menuTriggerClassName, children, }) {
|
|
45
|
+
export function HeaderSiderLayout({ pages = [], defaultPage, selectedPages = [], onSelect, compactSider, layoutProps, header, headerProps, siderProps, contentProps, menuProps, menuBefore, menuAfter, menuTriggerClassName, headerHeight = DEFAULT_HEADER_HEIGHT, children, }) {
|
|
47
46
|
const [isMobile, setIsMobile] = useState(false);
|
|
48
47
|
const [hiddenSider, setHiddenSider] = useState(false);
|
|
49
48
|
const siderWidth = siderProps?.width;
|
|
50
|
-
const classes = useStyles({
|
|
49
|
+
const classes = useStyles({
|
|
50
|
+
isMobile,
|
|
51
|
+
compactSider,
|
|
52
|
+
siderWidth,
|
|
53
|
+
headerHeight,
|
|
54
|
+
});
|
|
51
55
|
const menuPages = useMemo(() => getMenuPages(pages), [pages]);
|
|
52
56
|
return (React.createElement(Layout, { hasSider: true, ...layoutProps },
|
|
53
57
|
React.createElement(Header, { ...headerProps, className: classNames(classes.header, headerProps?.className) },
|
|
54
58
|
React.createElement(Container, { horizontal: true, middle: true, className: classes.headerContent },
|
|
55
|
-
isMobile && (React.createElement(MenuTrigger, { hiddenSider: hiddenSider, headerHeight:
|
|
59
|
+
isMobile && (React.createElement(MenuTrigger, { hiddenSider: hiddenSider, headerHeight: headerHeight, className: menuTriggerClassName, onClick: () => {
|
|
56
60
|
setHiddenSider(!hiddenSider);
|
|
57
61
|
} })),
|
|
58
62
|
header)),
|
|
@@ -62,14 +66,16 @@ export function HeaderSiderLayout({ pages = [], defaultPage, selectedPages = [],
|
|
|
62
66
|
}, collapsed: (isMobile && hiddenSider) || compactSider, collapsedWidth: isMobile && hiddenSider
|
|
63
67
|
? 0
|
|
64
68
|
: compactSider
|
|
65
|
-
?
|
|
69
|
+
? headerHeight
|
|
66
70
|
: 0, trigger: null },
|
|
71
|
+
menuBefore,
|
|
67
72
|
React.createElement(Menu, { ...menuProps, defaultSelectedKeys: defaultPage ? [defaultPage] : undefined, items: menuPages, selectedKeys: selectedPages, onSelect: ({ key }) => {
|
|
68
73
|
if (!hiddenSider) {
|
|
69
74
|
setHiddenSider(true);
|
|
70
75
|
}
|
|
71
76
|
onSelect?.(key);
|
|
72
|
-
} })
|
|
77
|
+
} }),
|
|
78
|
+
menuAfter),
|
|
73
79
|
React.createElement(Content, { ...contentProps, className: classNames(classes.content, contentProps?.className) }, children)));
|
|
74
80
|
}
|
|
75
81
|
//# sourceMappingURL=HeaderSiderLayout.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"HeaderSiderLayout.js","sourceRoot":"","sources":["../../../../src/react/components/navigation/HeaderSiderLayout.tsx"],"names":[],"mappings":"AAAA;;GAEG;AAEH,OAAO,EAAE,SAAS,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,WAAW,CAAA;AAEnD,OAAO,UAAU,MAAM,YAAY,CAAA;AACnC,OAAO,KAAK,EAAE,EAAgB,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;AAC9D,OAAO,EAAE,eAAe,EAAE,MAAM,WAAW,CAAA;AAC3C,OAAO,
|
|
1
|
+
{"version":3,"file":"HeaderSiderLayout.js","sourceRoot":"","sources":["../../../../src/react/components/navigation/HeaderSiderLayout.tsx"],"names":[],"mappings":"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"}
|
package/package.json
CHANGED