@pdg/react-admin-layout 1.0.21 → 1.0.22
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 -7
- package/dist/index.d.ts +1 -0
- package/dist/index.esm.js +63 -13
- package/dist/index.js +63 -13
- package/package.json +3 -2
package/README.md
CHANGED
|
@@ -2,13 +2,16 @@
|
|
|
2
2
|
|
|
3
3
|
Admin Layout for React
|
|
4
4
|
|
|
5
|
+
## 데모
|
|
6
|
+
https://parkdigy.github.io/react-admin-layout/
|
|
7
|
+
|
|
5
8
|
## 설치
|
|
6
|
-
```
|
|
9
|
+
```shell
|
|
7
10
|
npm install -D @pdg/react-admin-layout @mui/material @mui/icons-material @emotion/react @emotion/styled @pdg/util simplebar-react
|
|
8
11
|
```
|
|
9
12
|
|
|
10
13
|
### index.html 에 추가
|
|
11
|
-
```
|
|
14
|
+
```html
|
|
12
15
|
...
|
|
13
16
|
<head>
|
|
14
17
|
...
|
|
@@ -18,8 +21,3 @@ npm install -D @pdg/react-admin-layout @mui/material @mui/icons-material @emotio
|
|
|
18
21
|
</head>
|
|
19
22
|
...
|
|
20
23
|
```
|
|
21
|
-
|
|
22
|
-
### css 에 추가
|
|
23
|
-
```
|
|
24
|
-
import 'simplebar-react/dist/simplebar.min.css';
|
|
25
|
-
```
|
package/dist/index.d.ts
CHANGED
package/dist/index.esm.js
CHANGED
|
@@ -1,4 +1,30 @@
|
|
|
1
|
-
import {Grid,useTheme,alpha,ListItemButton,ListItemIcon,Icon,ListItemText,Badge,Collapse,styled,List,Box,Toolbar,Typography,AppBar,Drawer,IconButton}from'@mui/material';import React,{useState,useEffect,useCallback,useMemo}from'react';import {useLocation}from'react-router-dom';import {ExpandMore,Menu}from'@mui/icons-material';import {notEmpty,empty}from'@pdg/util';import SimpleBar from'simplebar-react';
|
|
1
|
+
import {Grid,useTheme,alpha,ListItemButton,ListItemIcon,Icon,ListItemText,Badge,Collapse,styled,List,Box,Toolbar,Typography,AppBar,Drawer,IconButton}from'@mui/material';import React,{useState,useEffect,useCallback,useMemo}from'react';import {useLocation}from'react-router-dom';import {ExpandMore,Menu}from'@mui/icons-material';import {notEmpty,empty}from'@pdg/util';import SimpleBar from'simplebar-react';function styleInject(css, ref) {
|
|
2
|
+
if ( ref === void 0 ) ref = {};
|
|
3
|
+
var insertAt = ref.insertAt;
|
|
4
|
+
|
|
5
|
+
if (!css || typeof document === 'undefined') { return; }
|
|
6
|
+
|
|
7
|
+
var head = document.head || document.getElementsByTagName('head')[0];
|
|
8
|
+
var style = document.createElement('style');
|
|
9
|
+
style.type = 'text/css';
|
|
10
|
+
|
|
11
|
+
if (insertAt === 'top') {
|
|
12
|
+
if (head.firstChild) {
|
|
13
|
+
head.insertBefore(style, head.firstChild);
|
|
14
|
+
} else {
|
|
15
|
+
head.appendChild(style);
|
|
16
|
+
}
|
|
17
|
+
} else {
|
|
18
|
+
head.appendChild(style);
|
|
19
|
+
}
|
|
20
|
+
|
|
21
|
+
if (style.styleSheet) {
|
|
22
|
+
style.styleSheet.cssText = css;
|
|
23
|
+
} else {
|
|
24
|
+
style.appendChild(document.createTextNode(css));
|
|
25
|
+
}
|
|
26
|
+
}var css_248z = "@import 'simplebar-react/dist/simplebar.min.css';\n.simplebar-track.simplebar-vertical {\n width: 8px !important;\n}\n.simplebar-track.simplebar-vertical .simplebar-scrollbar.simplebar-visible:before {\n opacity: 0.3 !important;\n}";
|
|
27
|
+
styleInject(css_248z);var CardLayoutDefaultProps = {
|
|
2
28
|
backgroundColor: '#eff3f8',
|
|
3
29
|
};var CardLayout = function (_a) {
|
|
4
30
|
var children = _a.children, backgroundColor = _a.backgroundColor;
|
|
@@ -6,13 +32,20 @@ import {Grid,useTheme,alpha,ListItemButton,ListItemIcon,Icon,ListItemText,Badge,
|
|
|
6
32
|
React.createElement(Grid, { item: true, xs: 12 }, children)));
|
|
7
33
|
};
|
|
8
34
|
CardLayout.defaultProps = CardLayoutDefaultProps;var SideMenuListItem = function (_a) {
|
|
35
|
+
/********************************************************************************************************************
|
|
36
|
+
* Use
|
|
37
|
+
* ******************************************************************************************************************/
|
|
9
38
|
var info = _a.info, badgeVariant = _a.badgeVariant, onClick = _a.onClick;
|
|
10
39
|
var theme = useTheme();
|
|
11
40
|
var location = useLocation();
|
|
12
|
-
|
|
41
|
+
/********************************************************************************************************************
|
|
42
|
+
* State
|
|
43
|
+
* ******************************************************************************************************************/
|
|
13
44
|
var _b = useState(false), isExpandable = _b[0], setIsExpandable = _b[1];
|
|
14
45
|
var _c = useState(false), isExpand = _c[0], setIsExpand = _c[1];
|
|
15
|
-
|
|
46
|
+
/********************************************************************************************************************
|
|
47
|
+
* Effect
|
|
48
|
+
* ******************************************************************************************************************/
|
|
16
49
|
useEffect(function () {
|
|
17
50
|
setIsExpandable(!!info && notEmpty(info.items));
|
|
18
51
|
if (info.items && info.items.find(function (info) { return location.pathname === info.uri; })) {
|
|
@@ -37,17 +70,20 @@ CardLayout.defaultProps = CardLayoutDefaultProps;var SideMenuListItem = function
|
|
|
37
70
|
}
|
|
38
71
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
39
72
|
}, [location]);
|
|
40
|
-
|
|
73
|
+
/********************************************************************************************************************
|
|
74
|
+
* Function
|
|
75
|
+
* ******************************************************************************************************************/
|
|
41
76
|
var toggleIsExpand = useCallback(function () {
|
|
42
77
|
setIsExpand(function (isExpand) { return !isExpand; });
|
|
43
78
|
}, []);
|
|
44
|
-
|
|
79
|
+
/********************************************************************************************************************
|
|
80
|
+
* Memo
|
|
81
|
+
* ******************************************************************************************************************/
|
|
45
82
|
var icon = useMemo(function () {
|
|
46
83
|
return info.icon
|
|
47
84
|
? info.icon.replace(/[A-Z]/g, function (letter, idx) { return "".concat(idx > 0 ? '_' : '').concat(letter.toLowerCase()); })
|
|
48
85
|
: undefined;
|
|
49
86
|
}, [info]);
|
|
50
|
-
// -------------------------------------------------------------------------------------------------------------------
|
|
51
87
|
var containerStyle = useMemo(function () { return ({
|
|
52
88
|
backgroundColor: isExpandable && isExpand
|
|
53
89
|
? alpha(theme.palette.primary.main, theme.palette.action.selectedOpacity / 2)
|
|
@@ -88,7 +124,9 @@ CardLayout.defaultProps = CardLayoutDefaultProps;var SideMenuListItem = function
|
|
|
88
124
|
: undefined,
|
|
89
125
|
}); }, [isExpand, theme]);
|
|
90
126
|
var primaryTypographyProps = useMemo(function () { return ({ sx: { fontWeight: info.depth === 1 ? 600 : null } }); }, [info]);
|
|
91
|
-
|
|
127
|
+
/********************************************************************************************************************
|
|
128
|
+
* Render
|
|
129
|
+
* ******************************************************************************************************************/
|
|
92
130
|
return (React.createElement(React.Fragment, null,
|
|
93
131
|
React.createElement(ListItemButton, { onClick: isExpandable
|
|
94
132
|
? toggleIsExpand
|
|
@@ -228,15 +266,21 @@ var _getNextScreen = function (screen) {
|
|
|
228
266
|
return 'xl';
|
|
229
267
|
};
|
|
230
268
|
var DefaultLayout = function (_a) {
|
|
231
|
-
|
|
269
|
+
/********************************************************************************************************************
|
|
270
|
+
* Use
|
|
271
|
+
* ******************************************************************************************************************/
|
|
232
272
|
var children = _a.children, logo = _a.logo, badgeVariant = _a.badgeVariant, menu = _a.menu, initMenuHideScreen = _a.menuHideScreen, appBarControl = _a.appBarControl, onMenuClick = _a.onMenuClick;
|
|
233
273
|
var location = useLocation();
|
|
234
|
-
|
|
274
|
+
/********************************************************************************************************************
|
|
275
|
+
* State
|
|
276
|
+
* ******************************************************************************************************************/
|
|
235
277
|
var _b = useState(false), isMobileOpen = _b[0], setIsMobileOpen = _b[1];
|
|
236
278
|
var _c = useState({}), menuTitles = _c[0], setMenuTitles = _c[1];
|
|
237
279
|
var _d = useState(), title = _d[0], setTitle = _d[1];
|
|
238
280
|
var _e = useState(initMenuHideScreen || 'sm'), menuHideScreen = _e[0], setMenuHideScreen = _e[1];
|
|
239
|
-
|
|
281
|
+
/********************************************************************************************************************
|
|
282
|
+
* Effect
|
|
283
|
+
* ******************************************************************************************************************/
|
|
240
284
|
useEffect(function () {
|
|
241
285
|
var menuTitles = {};
|
|
242
286
|
if (menu) {
|
|
@@ -267,11 +311,15 @@ var DefaultLayout = function (_a) {
|
|
|
267
311
|
}
|
|
268
312
|
}
|
|
269
313
|
}, [location, menuTitles]);
|
|
270
|
-
|
|
314
|
+
/********************************************************************************************************************
|
|
315
|
+
* Function
|
|
316
|
+
* ******************************************************************************************************************/
|
|
271
317
|
var toggleIsMobileOpen = useCallback(function () {
|
|
272
318
|
setIsMobileOpen(function (isMobileOpen) { return !isMobileOpen; });
|
|
273
319
|
}, []);
|
|
274
|
-
|
|
320
|
+
/********************************************************************************************************************
|
|
321
|
+
* Memo
|
|
322
|
+
* ******************************************************************************************************************/
|
|
275
323
|
var appBarSx = useMemo(function () {
|
|
276
324
|
var width = {};
|
|
277
325
|
var ml = {};
|
|
@@ -326,7 +374,9 @@ var DefaultLayout = function (_a) {
|
|
|
326
374
|
width[_getNextScreen(menuHideScreen)] = "calc(100% - ".concat(SIDE_MENU_WIDTH, "px)");
|
|
327
375
|
return { width: width };
|
|
328
376
|
}, [menuHideScreen]);
|
|
329
|
-
|
|
377
|
+
/********************************************************************************************************************
|
|
378
|
+
* Render
|
|
379
|
+
* ******************************************************************************************************************/
|
|
330
380
|
return (React.createElement(StyledContainerBox, null,
|
|
331
381
|
React.createElement(StyledAppBar, { position: 'fixed', elevation: 0, sx: appBarSx },
|
|
332
382
|
React.createElement(Toolbar, null,
|
package/dist/index.js
CHANGED
|
@@ -1,4 +1,30 @@
|
|
|
1
|
-
'use strict';var material=require('@mui/material'),React=require('react'),reactRouterDom=require('react-router-dom'),iconsMaterial=require('@mui/icons-material'),util=require('@pdg/util'),SimpleBar=require('simplebar-react');
|
|
1
|
+
'use strict';var material=require('@mui/material'),React=require('react'),reactRouterDom=require('react-router-dom'),iconsMaterial=require('@mui/icons-material'),util=require('@pdg/util'),SimpleBar=require('simplebar-react');function styleInject(css, ref) {
|
|
2
|
+
if ( ref === void 0 ) ref = {};
|
|
3
|
+
var insertAt = ref.insertAt;
|
|
4
|
+
|
|
5
|
+
if (!css || typeof document === 'undefined') { return; }
|
|
6
|
+
|
|
7
|
+
var head = document.head || document.getElementsByTagName('head')[0];
|
|
8
|
+
var style = document.createElement('style');
|
|
9
|
+
style.type = 'text/css';
|
|
10
|
+
|
|
11
|
+
if (insertAt === 'top') {
|
|
12
|
+
if (head.firstChild) {
|
|
13
|
+
head.insertBefore(style, head.firstChild);
|
|
14
|
+
} else {
|
|
15
|
+
head.appendChild(style);
|
|
16
|
+
}
|
|
17
|
+
} else {
|
|
18
|
+
head.appendChild(style);
|
|
19
|
+
}
|
|
20
|
+
|
|
21
|
+
if (style.styleSheet) {
|
|
22
|
+
style.styleSheet.cssText = css;
|
|
23
|
+
} else {
|
|
24
|
+
style.appendChild(document.createTextNode(css));
|
|
25
|
+
}
|
|
26
|
+
}var css_248z = "@import 'simplebar-react/dist/simplebar.min.css';\n.simplebar-track.simplebar-vertical {\n width: 8px !important;\n}\n.simplebar-track.simplebar-vertical .simplebar-scrollbar.simplebar-visible:before {\n opacity: 0.3 !important;\n}";
|
|
27
|
+
styleInject(css_248z);var CardLayoutDefaultProps = {
|
|
2
28
|
backgroundColor: '#eff3f8',
|
|
3
29
|
};var CardLayout = function (_a) {
|
|
4
30
|
var children = _a.children, backgroundColor = _a.backgroundColor;
|
|
@@ -6,13 +32,20 @@
|
|
|
6
32
|
React.createElement(material.Grid, { item: true, xs: 12 }, children)));
|
|
7
33
|
};
|
|
8
34
|
CardLayout.defaultProps = CardLayoutDefaultProps;var SideMenuListItem = function (_a) {
|
|
35
|
+
/********************************************************************************************************************
|
|
36
|
+
* Use
|
|
37
|
+
* ******************************************************************************************************************/
|
|
9
38
|
var info = _a.info, badgeVariant = _a.badgeVariant, onClick = _a.onClick;
|
|
10
39
|
var theme = material.useTheme();
|
|
11
40
|
var location = reactRouterDom.useLocation();
|
|
12
|
-
|
|
41
|
+
/********************************************************************************************************************
|
|
42
|
+
* State
|
|
43
|
+
* ******************************************************************************************************************/
|
|
13
44
|
var _b = React.useState(false), isExpandable = _b[0], setIsExpandable = _b[1];
|
|
14
45
|
var _c = React.useState(false), isExpand = _c[0], setIsExpand = _c[1];
|
|
15
|
-
|
|
46
|
+
/********************************************************************************************************************
|
|
47
|
+
* Effect
|
|
48
|
+
* ******************************************************************************************************************/
|
|
16
49
|
React.useEffect(function () {
|
|
17
50
|
setIsExpandable(!!info && util.notEmpty(info.items));
|
|
18
51
|
if (info.items && info.items.find(function (info) { return location.pathname === info.uri; })) {
|
|
@@ -37,17 +70,20 @@ CardLayout.defaultProps = CardLayoutDefaultProps;var SideMenuListItem = function
|
|
|
37
70
|
}
|
|
38
71
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
39
72
|
}, [location]);
|
|
40
|
-
|
|
73
|
+
/********************************************************************************************************************
|
|
74
|
+
* Function
|
|
75
|
+
* ******************************************************************************************************************/
|
|
41
76
|
var toggleIsExpand = React.useCallback(function () {
|
|
42
77
|
setIsExpand(function (isExpand) { return !isExpand; });
|
|
43
78
|
}, []);
|
|
44
|
-
|
|
79
|
+
/********************************************************************************************************************
|
|
80
|
+
* Memo
|
|
81
|
+
* ******************************************************************************************************************/
|
|
45
82
|
var icon = React.useMemo(function () {
|
|
46
83
|
return info.icon
|
|
47
84
|
? info.icon.replace(/[A-Z]/g, function (letter, idx) { return "".concat(idx > 0 ? '_' : '').concat(letter.toLowerCase()); })
|
|
48
85
|
: undefined;
|
|
49
86
|
}, [info]);
|
|
50
|
-
// -------------------------------------------------------------------------------------------------------------------
|
|
51
87
|
var containerStyle = React.useMemo(function () { return ({
|
|
52
88
|
backgroundColor: isExpandable && isExpand
|
|
53
89
|
? material.alpha(theme.palette.primary.main, theme.palette.action.selectedOpacity / 2)
|
|
@@ -88,7 +124,9 @@ CardLayout.defaultProps = CardLayoutDefaultProps;var SideMenuListItem = function
|
|
|
88
124
|
: undefined,
|
|
89
125
|
}); }, [isExpand, theme]);
|
|
90
126
|
var primaryTypographyProps = React.useMemo(function () { return ({ sx: { fontWeight: info.depth === 1 ? 600 : null } }); }, [info]);
|
|
91
|
-
|
|
127
|
+
/********************************************************************************************************************
|
|
128
|
+
* Render
|
|
129
|
+
* ******************************************************************************************************************/
|
|
92
130
|
return (React.createElement(React.Fragment, null,
|
|
93
131
|
React.createElement(material.ListItemButton, { onClick: isExpandable
|
|
94
132
|
? toggleIsExpand
|
|
@@ -228,15 +266,21 @@ var _getNextScreen = function (screen) {
|
|
|
228
266
|
return 'xl';
|
|
229
267
|
};
|
|
230
268
|
var DefaultLayout = function (_a) {
|
|
231
|
-
|
|
269
|
+
/********************************************************************************************************************
|
|
270
|
+
* Use
|
|
271
|
+
* ******************************************************************************************************************/
|
|
232
272
|
var children = _a.children, logo = _a.logo, badgeVariant = _a.badgeVariant, menu = _a.menu, initMenuHideScreen = _a.menuHideScreen, appBarControl = _a.appBarControl, onMenuClick = _a.onMenuClick;
|
|
233
273
|
var location = reactRouterDom.useLocation();
|
|
234
|
-
|
|
274
|
+
/********************************************************************************************************************
|
|
275
|
+
* State
|
|
276
|
+
* ******************************************************************************************************************/
|
|
235
277
|
var _b = React.useState(false), isMobileOpen = _b[0], setIsMobileOpen = _b[1];
|
|
236
278
|
var _c = React.useState({}), menuTitles = _c[0], setMenuTitles = _c[1];
|
|
237
279
|
var _d = React.useState(), title = _d[0], setTitle = _d[1];
|
|
238
280
|
var _e = React.useState(initMenuHideScreen || 'sm'), menuHideScreen = _e[0], setMenuHideScreen = _e[1];
|
|
239
|
-
|
|
281
|
+
/********************************************************************************************************************
|
|
282
|
+
* Effect
|
|
283
|
+
* ******************************************************************************************************************/
|
|
240
284
|
React.useEffect(function () {
|
|
241
285
|
var menuTitles = {};
|
|
242
286
|
if (menu) {
|
|
@@ -267,11 +311,15 @@ var DefaultLayout = function (_a) {
|
|
|
267
311
|
}
|
|
268
312
|
}
|
|
269
313
|
}, [location, menuTitles]);
|
|
270
|
-
|
|
314
|
+
/********************************************************************************************************************
|
|
315
|
+
* Function
|
|
316
|
+
* ******************************************************************************************************************/
|
|
271
317
|
var toggleIsMobileOpen = React.useCallback(function () {
|
|
272
318
|
setIsMobileOpen(function (isMobileOpen) { return !isMobileOpen; });
|
|
273
319
|
}, []);
|
|
274
|
-
|
|
320
|
+
/********************************************************************************************************************
|
|
321
|
+
* Memo
|
|
322
|
+
* ******************************************************************************************************************/
|
|
275
323
|
var appBarSx = React.useMemo(function () {
|
|
276
324
|
var width = {};
|
|
277
325
|
var ml = {};
|
|
@@ -326,7 +374,9 @@ var DefaultLayout = function (_a) {
|
|
|
326
374
|
width[_getNextScreen(menuHideScreen)] = "calc(100% - ".concat(SIDE_MENU_WIDTH, "px)");
|
|
327
375
|
return { width: width };
|
|
328
376
|
}, [menuHideScreen]);
|
|
329
|
-
|
|
377
|
+
/********************************************************************************************************************
|
|
378
|
+
* Render
|
|
379
|
+
* ******************************************************************************************************************/
|
|
330
380
|
return (React.createElement(StyledContainerBox, null,
|
|
331
381
|
React.createElement(StyledAppBar, { position: 'fixed', elevation: 0, sx: appBarSx },
|
|
332
382
|
React.createElement(material.Toolbar, null,
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@pdg/react-admin-layout",
|
|
3
3
|
"title": "React Admin Layout",
|
|
4
|
-
"version": "1.0.
|
|
4
|
+
"version": "1.0.22",
|
|
5
5
|
"description": "Admin Layout for React",
|
|
6
6
|
"type": "module",
|
|
7
7
|
"types": "dist/index.d.ts",
|
|
@@ -24,7 +24,8 @@
|
|
|
24
24
|
"dev": "cd examples && npm run dev",
|
|
25
25
|
"dev-prd-lib": "cd examples && npm run dev-prd-lib",
|
|
26
26
|
"build": "rollup -c --bundleConfigAsCjs",
|
|
27
|
-
"
|
|
27
|
+
"build:examples": "cd examples && npm run build",
|
|
28
|
+
"pub": "npm i && npm run build:examples && npm run build && npm publish --access=public && rm ./.git/hooks/pre-commit",
|
|
28
29
|
"lint": "eslint './src/**/*.{ts,tsx}'",
|
|
29
30
|
"reinstall-module": "rm -rf node_modules && rm -f package-lock.json && npm i"
|
|
30
31
|
},
|