@j2inn/fin5-ui-utils 3.0.5-beta.1 → 3.0.6-beta.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/react/components/navigation/BasicLayout.d.ts +3 -1
- package/dist/react/components/navigation/BasicLayout.js +35 -7
- package/dist/react/components/navigation/BasicLayout.js.map +1 -1
- package/dist_es/react/components/navigation/BasicLayout.d.ts +3 -1
- package/dist_es/react/components/navigation/BasicLayout.js +35 -7
- package/dist_es/react/components/navigation/BasicLayout.js.map +1 -1
- package/package.json +1 -1
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
import { LayoutProps, MenuProps, SiderProps } from 'antd';
|
|
2
2
|
import React, { PropsWithChildren, ReactElement } from 'react';
|
|
3
3
|
import { MenuPage } from './MenuPage';
|
|
4
|
+
export declare const J2_COMPACT_SIDER_BUTTON_CLASS = "j2-compact-sider-button";
|
|
4
5
|
export interface BasicLayoutStyleVariables {
|
|
5
6
|
isMobile?: boolean;
|
|
6
7
|
compactSider?: boolean;
|
|
@@ -13,6 +14,7 @@ export interface BasicLayoutProps<T extends MenuPage> extends PropsWithChildren
|
|
|
13
14
|
selectedPages?: string[];
|
|
14
15
|
onSelect?: (key: string) => void;
|
|
15
16
|
compactSider?: boolean;
|
|
17
|
+
showCompactSiderButton?: boolean;
|
|
16
18
|
layoutProps?: LayoutProps;
|
|
17
19
|
mobileHeaderProps?: LayoutProps;
|
|
18
20
|
siderProps?: SiderProps;
|
|
@@ -34,4 +36,4 @@ export declare const DEFAULT_HEADER_HEIGHT = 45;
|
|
|
34
36
|
* Basic layout with sider and mobile navigation management.
|
|
35
37
|
* Routing management can be plugged in, for examples @see ReactRouterLayout @see RouterLayout
|
|
36
38
|
*/
|
|
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;
|
|
39
|
+
export declare function BasicLayout<T extends MenuPage>({ pages, defaultPage, selectedPages, onSelect, compactSider, showCompactSiderButton, layoutProps, mobileHeaderProps, siderProps, contentProps, menuProps, menuBefore, menuAfter, menuTriggerClassName, headerHeight, children, }: BasicLayoutProps<T>): ReactElement;
|
|
@@ -29,12 +29,14 @@ 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.DEFAULT_HEADER_HEIGHT = exports.getMenuPages = void 0;
|
|
32
|
+
exports.BasicLayout = exports.DEFAULT_HEADER_HEIGHT = exports.getMenuPages = exports.J2_COMPACT_SIDER_BUTTON_CLASS = void 0;
|
|
33
|
+
const icons_1 = require("@ant-design/icons");
|
|
33
34
|
const ui_1 = require("@j2inn/ui");
|
|
34
35
|
const classnames_1 = __importDefault(require("classnames"));
|
|
35
36
|
const react_1 = __importStar(require("react"));
|
|
36
37
|
const react_jss_1 = require("react-jss");
|
|
37
38
|
const MenuTrigger_1 = __importDefault(require("./MenuTrigger"));
|
|
39
|
+
exports.J2_COMPACT_SIDER_BUTTON_CLASS = 'j2-compact-sider-button';
|
|
38
40
|
const useStyles = (0, react_jss_1.createUseStyles)({
|
|
39
41
|
header: ({ headerHeight }) => ({
|
|
40
42
|
position: 'fixed',
|
|
@@ -53,6 +55,27 @@ const useStyles = (0, react_jss_1.createUseStyles)({
|
|
|
53
55
|
bottom: 0,
|
|
54
56
|
zIndex: 999,
|
|
55
57
|
paddingTop: ({ isMobile, headerHeight }) => isMobile ? headerHeight : 0,
|
|
58
|
+
[`& .${ui_1.ant_prefix}-layout-sider-children`]: {
|
|
59
|
+
display: 'flex',
|
|
60
|
+
flexDirection: 'column',
|
|
61
|
+
},
|
|
62
|
+
},
|
|
63
|
+
compactSiderButton: {
|
|
64
|
+
position: 'sticky',
|
|
65
|
+
bottom: 0,
|
|
66
|
+
width: '100%',
|
|
67
|
+
textAlign: 'center',
|
|
68
|
+
fontSize: '1.3rem',
|
|
69
|
+
padding: '0.5rem',
|
|
70
|
+
background: 'white',
|
|
71
|
+
cursor: 'pointer',
|
|
72
|
+
transition: '0.3s',
|
|
73
|
+
},
|
|
74
|
+
compactSiderButtonItem: {
|
|
75
|
+
transition: '0.3s',
|
|
76
|
+
},
|
|
77
|
+
compactSiderButtonItemCollapsed: {
|
|
78
|
+
transform: ' rotate(180deg)',
|
|
56
79
|
},
|
|
57
80
|
content: ({ isMobile, compactSider, siderWidth = 200, headerHeight, }) => ({
|
|
58
81
|
paddingLeft: isMobile ? 0 : compactSider ? 45 : siderWidth,
|
|
@@ -91,14 +114,15 @@ exports.DEFAULT_HEADER_HEIGHT = 45;
|
|
|
91
114
|
* Basic layout with sider and mobile navigation management.
|
|
92
115
|
* Routing management can be plugged in, for examples @see ReactRouterLayout @see RouterLayout
|
|
93
116
|
*/
|
|
94
|
-
function BasicLayout({ pages = [], defaultPage, selectedPages = [], onSelect, compactSider, layoutProps, mobileHeaderProps, siderProps, contentProps, menuProps, menuBefore, menuAfter, menuTriggerClassName, headerHeight = exports.DEFAULT_HEADER_HEIGHT, children, }) {
|
|
117
|
+
function BasicLayout({ pages = [], defaultPage, selectedPages = [], onSelect, compactSider, showCompactSiderButton, layoutProps, mobileHeaderProps, siderProps, contentProps, menuProps, menuBefore, menuAfter, menuTriggerClassName, headerHeight = exports.DEFAULT_HEADER_HEIGHT, children, }) {
|
|
95
118
|
// manage mobile navigation
|
|
96
119
|
const [isMobile, setIsMobile] = (0, react_1.useState)(false);
|
|
120
|
+
const [isSiderCompact, setIsSiderCompact] = (0, react_1.useState)(compactSider);
|
|
97
121
|
const [hiddenSider, setHiddenSider] = (0, react_1.useState)(false);
|
|
98
122
|
const siderWidth = siderProps?.width;
|
|
99
123
|
const classes = useStyles({
|
|
100
124
|
isMobile,
|
|
101
|
-
compactSider,
|
|
125
|
+
compactSider: isSiderCompact,
|
|
102
126
|
siderWidth,
|
|
103
127
|
headerHeight,
|
|
104
128
|
});
|
|
@@ -111,19 +135,23 @@ function BasicLayout({ pages = [], defaultPage, selectedPages = [], onSelect, co
|
|
|
111
135
|
react_1.default.createElement(Sider, { ...siderProps, className: (0, classnames_1.default)(classes.sider, siderProps?.className), breakpoint: 'md', onBreakpoint: (broken) => {
|
|
112
136
|
setIsMobile(broken);
|
|
113
137
|
setHiddenSider(true);
|
|
114
|
-
}, collapsed: (isMobile && hiddenSider) ||
|
|
138
|
+
}, collapsed: (isMobile && hiddenSider) || isSiderCompact, collapsedWidth: isMobile && hiddenSider
|
|
115
139
|
? 0
|
|
116
|
-
:
|
|
140
|
+
: isSiderCompact
|
|
117
141
|
? headerHeight
|
|
118
142
|
: 0, trigger: null },
|
|
119
143
|
menuBefore,
|
|
120
|
-
react_1.default.createElement(ui_1.Menu, { ...menuProps, defaultSelectedKeys: defaultPage ? [defaultPage] : undefined, items: menuPages, selectedKeys: selectedPages, onSelect: ({ key }) => {
|
|
144
|
+
react_1.default.createElement(ui_1.Menu, { style: { flex: 1 }, ...menuProps, defaultSelectedKeys: defaultPage ? [defaultPage] : undefined, items: menuPages, selectedKeys: selectedPages, onSelect: ({ key }) => {
|
|
121
145
|
if (!hiddenSider) {
|
|
122
146
|
setHiddenSider(true);
|
|
123
147
|
}
|
|
124
148
|
onSelect?.(key);
|
|
125
149
|
} }),
|
|
126
|
-
menuAfter
|
|
150
|
+
menuAfter,
|
|
151
|
+
showCompactSiderButton && !isMobile && (react_1.default.createElement("div", { className: (0, classnames_1.default)(classes.compactSiderButton, exports.J2_COMPACT_SIDER_BUTTON_CLASS), onClick: () => setIsSiderCompact(!isSiderCompact) },
|
|
152
|
+
react_1.default.createElement(icons_1.LeftOutlined, { className: (0, classnames_1.default)(classes.compactSiderButtonItem, {
|
|
153
|
+
[classes.compactSiderButtonItemCollapsed]: isSiderCompact,
|
|
154
|
+
}) })))),
|
|
127
155
|
react_1.default.createElement(Content, { ...contentProps, className: (0, classnames_1.default)(classes.content, contentProps?.className) }, children)));
|
|
128
156
|
}
|
|
129
157
|
exports.BasicLayout = BasicLayout;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"BasicLayout.js","sourceRoot":"","sources":["../../../../src/react/components/navigation/BasicLayout.tsx"],"names":[],"mappings":";AAAA;;GAEG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAEH,
|
|
1
|
+
{"version":3,"file":"BasicLayout.js","sourceRoot":"","sources":["../../../../src/react/components/navigation/BasicLayout.tsx"],"names":[],"mappings":"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"}
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
import { LayoutProps, MenuProps, SiderProps } from 'antd';
|
|
2
2
|
import React, { PropsWithChildren, ReactElement } from 'react';
|
|
3
3
|
import { MenuPage } from './MenuPage';
|
|
4
|
+
export declare const J2_COMPACT_SIDER_BUTTON_CLASS = "j2-compact-sider-button";
|
|
4
5
|
export interface BasicLayoutStyleVariables {
|
|
5
6
|
isMobile?: boolean;
|
|
6
7
|
compactSider?: boolean;
|
|
@@ -13,6 +14,7 @@ export interface BasicLayoutProps<T extends MenuPage> extends PropsWithChildren
|
|
|
13
14
|
selectedPages?: string[];
|
|
14
15
|
onSelect?: (key: string) => void;
|
|
15
16
|
compactSider?: boolean;
|
|
17
|
+
showCompactSiderButton?: boolean;
|
|
16
18
|
layoutProps?: LayoutProps;
|
|
17
19
|
mobileHeaderProps?: LayoutProps;
|
|
18
20
|
siderProps?: SiderProps;
|
|
@@ -34,4 +36,4 @@ export declare const DEFAULT_HEADER_HEIGHT = 45;
|
|
|
34
36
|
* Basic layout with sider and mobile navigation management.
|
|
35
37
|
* Routing management can be plugged in, for examples @see ReactRouterLayout @see RouterLayout
|
|
36
38
|
*/
|
|
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;
|
|
39
|
+
export declare function BasicLayout<T extends MenuPage>({ pages, defaultPage, selectedPages, onSelect, compactSider, showCompactSiderButton, layoutProps, mobileHeaderProps, siderProps, contentProps, menuProps, menuBefore, menuAfter, menuTriggerClassName, headerHeight, children, }: BasicLayoutProps<T>): ReactElement;
|
|
@@ -1,11 +1,13 @@
|
|
|
1
1
|
/*
|
|
2
2
|
* Copyright (c) 2023, J2 Innovations. All Rights Reserved
|
|
3
3
|
*/
|
|
4
|
-
import {
|
|
4
|
+
import { LeftOutlined } from '@ant-design/icons';
|
|
5
|
+
import { ant_prefix, Layout, Menu } from '@j2inn/ui';
|
|
5
6
|
import classNames from 'classnames';
|
|
6
7
|
import React, { useMemo, useState, } from 'react';
|
|
7
8
|
import { createUseStyles } from 'react-jss';
|
|
8
9
|
import MenuTrigger from './MenuTrigger';
|
|
10
|
+
export const J2_COMPACT_SIDER_BUTTON_CLASS = 'j2-compact-sider-button';
|
|
9
11
|
const useStyles = createUseStyles({
|
|
10
12
|
header: ({ headerHeight }) => ({
|
|
11
13
|
position: 'fixed',
|
|
@@ -24,6 +26,27 @@ const useStyles = createUseStyles({
|
|
|
24
26
|
bottom: 0,
|
|
25
27
|
zIndex: 999,
|
|
26
28
|
paddingTop: ({ isMobile, headerHeight }) => isMobile ? headerHeight : 0,
|
|
29
|
+
[`& .${ant_prefix}-layout-sider-children`]: {
|
|
30
|
+
display: 'flex',
|
|
31
|
+
flexDirection: 'column',
|
|
32
|
+
},
|
|
33
|
+
},
|
|
34
|
+
compactSiderButton: {
|
|
35
|
+
position: 'sticky',
|
|
36
|
+
bottom: 0,
|
|
37
|
+
width: '100%',
|
|
38
|
+
textAlign: 'center',
|
|
39
|
+
fontSize: '1.3rem',
|
|
40
|
+
padding: '0.5rem',
|
|
41
|
+
background: 'white',
|
|
42
|
+
cursor: 'pointer',
|
|
43
|
+
transition: '0.3s',
|
|
44
|
+
},
|
|
45
|
+
compactSiderButtonItem: {
|
|
46
|
+
transition: '0.3s',
|
|
47
|
+
},
|
|
48
|
+
compactSiderButtonItemCollapsed: {
|
|
49
|
+
transform: ' rotate(180deg)',
|
|
27
50
|
},
|
|
28
51
|
content: ({ isMobile, compactSider, siderWidth = 200, headerHeight, }) => ({
|
|
29
52
|
paddingLeft: isMobile ? 0 : compactSider ? 45 : siderWidth,
|
|
@@ -61,14 +84,15 @@ export const DEFAULT_HEADER_HEIGHT = 45;
|
|
|
61
84
|
* Basic layout with sider and mobile navigation management.
|
|
62
85
|
* Routing management can be plugged in, for examples @see ReactRouterLayout @see RouterLayout
|
|
63
86
|
*/
|
|
64
|
-
export function BasicLayout({ pages = [], defaultPage, selectedPages = [], onSelect, compactSider, layoutProps, mobileHeaderProps, siderProps, contentProps, menuProps, menuBefore, menuAfter, menuTriggerClassName, headerHeight = DEFAULT_HEADER_HEIGHT, children, }) {
|
|
87
|
+
export function BasicLayout({ pages = [], defaultPage, selectedPages = [], onSelect, compactSider, showCompactSiderButton, layoutProps, mobileHeaderProps, siderProps, contentProps, menuProps, menuBefore, menuAfter, menuTriggerClassName, headerHeight = DEFAULT_HEADER_HEIGHT, children, }) {
|
|
65
88
|
// manage mobile navigation
|
|
66
89
|
const [isMobile, setIsMobile] = useState(false);
|
|
90
|
+
const [isSiderCompact, setIsSiderCompact] = useState(compactSider);
|
|
67
91
|
const [hiddenSider, setHiddenSider] = useState(false);
|
|
68
92
|
const siderWidth = siderProps?.width;
|
|
69
93
|
const classes = useStyles({
|
|
70
94
|
isMobile,
|
|
71
|
-
compactSider,
|
|
95
|
+
compactSider: isSiderCompact,
|
|
72
96
|
siderWidth,
|
|
73
97
|
headerHeight,
|
|
74
98
|
});
|
|
@@ -81,19 +105,23 @@ export function BasicLayout({ pages = [], defaultPage, selectedPages = [], onSel
|
|
|
81
105
|
React.createElement(Sider, { ...siderProps, className: classNames(classes.sider, siderProps?.className), breakpoint: 'md', onBreakpoint: (broken) => {
|
|
82
106
|
setIsMobile(broken);
|
|
83
107
|
setHiddenSider(true);
|
|
84
|
-
}, collapsed: (isMobile && hiddenSider) ||
|
|
108
|
+
}, collapsed: (isMobile && hiddenSider) || isSiderCompact, collapsedWidth: isMobile && hiddenSider
|
|
85
109
|
? 0
|
|
86
|
-
:
|
|
110
|
+
: isSiderCompact
|
|
87
111
|
? headerHeight
|
|
88
112
|
: 0, trigger: null },
|
|
89
113
|
menuBefore,
|
|
90
|
-
React.createElement(Menu, { ...menuProps, defaultSelectedKeys: defaultPage ? [defaultPage] : undefined, items: menuPages, selectedKeys: selectedPages, onSelect: ({ key }) => {
|
|
114
|
+
React.createElement(Menu, { style: { flex: 1 }, ...menuProps, defaultSelectedKeys: defaultPage ? [defaultPage] : undefined, items: menuPages, selectedKeys: selectedPages, onSelect: ({ key }) => {
|
|
91
115
|
if (!hiddenSider) {
|
|
92
116
|
setHiddenSider(true);
|
|
93
117
|
}
|
|
94
118
|
onSelect?.(key);
|
|
95
119
|
} }),
|
|
96
|
-
menuAfter
|
|
120
|
+
menuAfter,
|
|
121
|
+
showCompactSiderButton && !isMobile && (React.createElement("div", { className: classNames(classes.compactSiderButton, J2_COMPACT_SIDER_BUTTON_CLASS), onClick: () => setIsSiderCompact(!isSiderCompact) },
|
|
122
|
+
React.createElement(LeftOutlined, { className: classNames(classes.compactSiderButtonItem, {
|
|
123
|
+
[classes.compactSiderButtonItemCollapsed]: isSiderCompact,
|
|
124
|
+
}) })))),
|
|
97
125
|
React.createElement(Content, { ...contentProps, className: classNames(classes.content, contentProps?.className) }, children)));
|
|
98
126
|
}
|
|
99
127
|
//# 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;
|
|
1
|
+
{"version":3,"file":"BasicLayout.js","sourceRoot":"","sources":["../../../../src/react/components/navigation/BasicLayout.tsx"],"names":[],"mappings":"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"}
|
package/package.json
CHANGED