@pdg/react-admin-layout 1.0.21 → 1.0.23
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 +6 -3
- 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
|
...
|
|
@@ -19,7 +22,7 @@ npm install -D @pdg/react-admin-layout @mui/material @mui/icons-material @emotio
|
|
|
19
22
|
...
|
|
20
23
|
```
|
|
21
24
|
|
|
22
|
-
### css
|
|
25
|
+
### simplebar-react css 추가
|
|
23
26
|
```
|
|
24
27
|
import 'simplebar-react/dist/simplebar.min.css';
|
|
25
28
|
```
|
package/dist/index.d.ts
CHANGED
package/dist/index.esm.js
CHANGED
|
@@ -6,13 +6,20 @@ import {Grid,useTheme,alpha,ListItemButton,ListItemIcon,Icon,ListItemText,Badge,
|
|
|
6
6
|
React.createElement(Grid, { item: true, xs: 12 }, children)));
|
|
7
7
|
};
|
|
8
8
|
CardLayout.defaultProps = CardLayoutDefaultProps;var SideMenuListItem = function (_a) {
|
|
9
|
+
/********************************************************************************************************************
|
|
10
|
+
* Use
|
|
11
|
+
* ******************************************************************************************************************/
|
|
9
12
|
var info = _a.info, badgeVariant = _a.badgeVariant, onClick = _a.onClick;
|
|
10
13
|
var theme = useTheme();
|
|
11
14
|
var location = useLocation();
|
|
12
|
-
|
|
15
|
+
/********************************************************************************************************************
|
|
16
|
+
* State
|
|
17
|
+
* ******************************************************************************************************************/
|
|
13
18
|
var _b = useState(false), isExpandable = _b[0], setIsExpandable = _b[1];
|
|
14
19
|
var _c = useState(false), isExpand = _c[0], setIsExpand = _c[1];
|
|
15
|
-
|
|
20
|
+
/********************************************************************************************************************
|
|
21
|
+
* Effect
|
|
22
|
+
* ******************************************************************************************************************/
|
|
16
23
|
useEffect(function () {
|
|
17
24
|
setIsExpandable(!!info && notEmpty(info.items));
|
|
18
25
|
if (info.items && info.items.find(function (info) { return location.pathname === info.uri; })) {
|
|
@@ -37,17 +44,20 @@ CardLayout.defaultProps = CardLayoutDefaultProps;var SideMenuListItem = function
|
|
|
37
44
|
}
|
|
38
45
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
39
46
|
}, [location]);
|
|
40
|
-
|
|
47
|
+
/********************************************************************************************************************
|
|
48
|
+
* Function
|
|
49
|
+
* ******************************************************************************************************************/
|
|
41
50
|
var toggleIsExpand = useCallback(function () {
|
|
42
51
|
setIsExpand(function (isExpand) { return !isExpand; });
|
|
43
52
|
}, []);
|
|
44
|
-
|
|
53
|
+
/********************************************************************************************************************
|
|
54
|
+
* Memo
|
|
55
|
+
* ******************************************************************************************************************/
|
|
45
56
|
var icon = useMemo(function () {
|
|
46
57
|
return info.icon
|
|
47
58
|
? info.icon.replace(/[A-Z]/g, function (letter, idx) { return "".concat(idx > 0 ? '_' : '').concat(letter.toLowerCase()); })
|
|
48
59
|
: undefined;
|
|
49
60
|
}, [info]);
|
|
50
|
-
// -------------------------------------------------------------------------------------------------------------------
|
|
51
61
|
var containerStyle = useMemo(function () { return ({
|
|
52
62
|
backgroundColor: isExpandable && isExpand
|
|
53
63
|
? alpha(theme.palette.primary.main, theme.palette.action.selectedOpacity / 2)
|
|
@@ -88,7 +98,9 @@ CardLayout.defaultProps = CardLayoutDefaultProps;var SideMenuListItem = function
|
|
|
88
98
|
: undefined,
|
|
89
99
|
}); }, [isExpand, theme]);
|
|
90
100
|
var primaryTypographyProps = useMemo(function () { return ({ sx: { fontWeight: info.depth === 1 ? 600 : null } }); }, [info]);
|
|
91
|
-
|
|
101
|
+
/********************************************************************************************************************
|
|
102
|
+
* Render
|
|
103
|
+
* ******************************************************************************************************************/
|
|
92
104
|
return (React.createElement(React.Fragment, null,
|
|
93
105
|
React.createElement(ListItemButton, { onClick: isExpandable
|
|
94
106
|
? toggleIsExpand
|
|
@@ -228,15 +240,21 @@ var _getNextScreen = function (screen) {
|
|
|
228
240
|
return 'xl';
|
|
229
241
|
};
|
|
230
242
|
var DefaultLayout = function (_a) {
|
|
231
|
-
|
|
243
|
+
/********************************************************************************************************************
|
|
244
|
+
* Use
|
|
245
|
+
* ******************************************************************************************************************/
|
|
232
246
|
var children = _a.children, logo = _a.logo, badgeVariant = _a.badgeVariant, menu = _a.menu, initMenuHideScreen = _a.menuHideScreen, appBarControl = _a.appBarControl, onMenuClick = _a.onMenuClick;
|
|
233
247
|
var location = useLocation();
|
|
234
|
-
|
|
248
|
+
/********************************************************************************************************************
|
|
249
|
+
* State
|
|
250
|
+
* ******************************************************************************************************************/
|
|
235
251
|
var _b = useState(false), isMobileOpen = _b[0], setIsMobileOpen = _b[1];
|
|
236
252
|
var _c = useState({}), menuTitles = _c[0], setMenuTitles = _c[1];
|
|
237
253
|
var _d = useState(), title = _d[0], setTitle = _d[1];
|
|
238
254
|
var _e = useState(initMenuHideScreen || 'sm'), menuHideScreen = _e[0], setMenuHideScreen = _e[1];
|
|
239
|
-
|
|
255
|
+
/********************************************************************************************************************
|
|
256
|
+
* Effect
|
|
257
|
+
* ******************************************************************************************************************/
|
|
240
258
|
useEffect(function () {
|
|
241
259
|
var menuTitles = {};
|
|
242
260
|
if (menu) {
|
|
@@ -267,11 +285,15 @@ var DefaultLayout = function (_a) {
|
|
|
267
285
|
}
|
|
268
286
|
}
|
|
269
287
|
}, [location, menuTitles]);
|
|
270
|
-
|
|
288
|
+
/********************************************************************************************************************
|
|
289
|
+
* Function
|
|
290
|
+
* ******************************************************************************************************************/
|
|
271
291
|
var toggleIsMobileOpen = useCallback(function () {
|
|
272
292
|
setIsMobileOpen(function (isMobileOpen) { return !isMobileOpen; });
|
|
273
293
|
}, []);
|
|
274
|
-
|
|
294
|
+
/********************************************************************************************************************
|
|
295
|
+
* Memo
|
|
296
|
+
* ******************************************************************************************************************/
|
|
275
297
|
var appBarSx = useMemo(function () {
|
|
276
298
|
var width = {};
|
|
277
299
|
var ml = {};
|
|
@@ -326,7 +348,9 @@ var DefaultLayout = function (_a) {
|
|
|
326
348
|
width[_getNextScreen(menuHideScreen)] = "calc(100% - ".concat(SIDE_MENU_WIDTH, "px)");
|
|
327
349
|
return { width: width };
|
|
328
350
|
}, [menuHideScreen]);
|
|
329
|
-
|
|
351
|
+
/********************************************************************************************************************
|
|
352
|
+
* Render
|
|
353
|
+
* ******************************************************************************************************************/
|
|
330
354
|
return (React.createElement(StyledContainerBox, null,
|
|
331
355
|
React.createElement(StyledAppBar, { position: 'fixed', elevation: 0, sx: appBarSx },
|
|
332
356
|
React.createElement(Toolbar, null,
|
|
@@ -346,4 +370,30 @@ var DefaultLayout = function (_a) {
|
|
|
346
370
|
React.createElement(StyledMainBox, { component: 'main', sx: mainBoxSx },
|
|
347
371
|
React.createElement(Toolbar, null),
|
|
348
372
|
React.createElement(StyledMainContentDiv, null, children))));
|
|
349
|
-
};
|
|
373
|
+
};function styleInject(css, ref) {
|
|
374
|
+
if ( ref === void 0 ) ref = {};
|
|
375
|
+
var insertAt = ref.insertAt;
|
|
376
|
+
|
|
377
|
+
if (!css || typeof document === 'undefined') { return; }
|
|
378
|
+
|
|
379
|
+
var head = document.head || document.getElementsByTagName('head')[0];
|
|
380
|
+
var style = document.createElement('style');
|
|
381
|
+
style.type = 'text/css';
|
|
382
|
+
|
|
383
|
+
if (insertAt === 'top') {
|
|
384
|
+
if (head.firstChild) {
|
|
385
|
+
head.insertBefore(style, head.firstChild);
|
|
386
|
+
} else {
|
|
387
|
+
head.appendChild(style);
|
|
388
|
+
}
|
|
389
|
+
} else {
|
|
390
|
+
head.appendChild(style);
|
|
391
|
+
}
|
|
392
|
+
|
|
393
|
+
if (style.styleSheet) {
|
|
394
|
+
style.styleSheet.cssText = css;
|
|
395
|
+
} else {
|
|
396
|
+
style.appendChild(document.createTextNode(css));
|
|
397
|
+
}
|
|
398
|
+
}var css_248z = ".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}";
|
|
399
|
+
styleInject(css_248z);export{CardLayout,DefaultLayout};
|
package/dist/index.js
CHANGED
|
@@ -6,13 +6,20 @@
|
|
|
6
6
|
React.createElement(material.Grid, { item: true, xs: 12 }, children)));
|
|
7
7
|
};
|
|
8
8
|
CardLayout.defaultProps = CardLayoutDefaultProps;var SideMenuListItem = function (_a) {
|
|
9
|
+
/********************************************************************************************************************
|
|
10
|
+
* Use
|
|
11
|
+
* ******************************************************************************************************************/
|
|
9
12
|
var info = _a.info, badgeVariant = _a.badgeVariant, onClick = _a.onClick;
|
|
10
13
|
var theme = material.useTheme();
|
|
11
14
|
var location = reactRouterDom.useLocation();
|
|
12
|
-
|
|
15
|
+
/********************************************************************************************************************
|
|
16
|
+
* State
|
|
17
|
+
* ******************************************************************************************************************/
|
|
13
18
|
var _b = React.useState(false), isExpandable = _b[0], setIsExpandable = _b[1];
|
|
14
19
|
var _c = React.useState(false), isExpand = _c[0], setIsExpand = _c[1];
|
|
15
|
-
|
|
20
|
+
/********************************************************************************************************************
|
|
21
|
+
* Effect
|
|
22
|
+
* ******************************************************************************************************************/
|
|
16
23
|
React.useEffect(function () {
|
|
17
24
|
setIsExpandable(!!info && util.notEmpty(info.items));
|
|
18
25
|
if (info.items && info.items.find(function (info) { return location.pathname === info.uri; })) {
|
|
@@ -37,17 +44,20 @@ CardLayout.defaultProps = CardLayoutDefaultProps;var SideMenuListItem = function
|
|
|
37
44
|
}
|
|
38
45
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
39
46
|
}, [location]);
|
|
40
|
-
|
|
47
|
+
/********************************************************************************************************************
|
|
48
|
+
* Function
|
|
49
|
+
* ******************************************************************************************************************/
|
|
41
50
|
var toggleIsExpand = React.useCallback(function () {
|
|
42
51
|
setIsExpand(function (isExpand) { return !isExpand; });
|
|
43
52
|
}, []);
|
|
44
|
-
|
|
53
|
+
/********************************************************************************************************************
|
|
54
|
+
* Memo
|
|
55
|
+
* ******************************************************************************************************************/
|
|
45
56
|
var icon = React.useMemo(function () {
|
|
46
57
|
return info.icon
|
|
47
58
|
? info.icon.replace(/[A-Z]/g, function (letter, idx) { return "".concat(idx > 0 ? '_' : '').concat(letter.toLowerCase()); })
|
|
48
59
|
: undefined;
|
|
49
60
|
}, [info]);
|
|
50
|
-
// -------------------------------------------------------------------------------------------------------------------
|
|
51
61
|
var containerStyle = React.useMemo(function () { return ({
|
|
52
62
|
backgroundColor: isExpandable && isExpand
|
|
53
63
|
? material.alpha(theme.palette.primary.main, theme.palette.action.selectedOpacity / 2)
|
|
@@ -88,7 +98,9 @@ CardLayout.defaultProps = CardLayoutDefaultProps;var SideMenuListItem = function
|
|
|
88
98
|
: undefined,
|
|
89
99
|
}); }, [isExpand, theme]);
|
|
90
100
|
var primaryTypographyProps = React.useMemo(function () { return ({ sx: { fontWeight: info.depth === 1 ? 600 : null } }); }, [info]);
|
|
91
|
-
|
|
101
|
+
/********************************************************************************************************************
|
|
102
|
+
* Render
|
|
103
|
+
* ******************************************************************************************************************/
|
|
92
104
|
return (React.createElement(React.Fragment, null,
|
|
93
105
|
React.createElement(material.ListItemButton, { onClick: isExpandable
|
|
94
106
|
? toggleIsExpand
|
|
@@ -228,15 +240,21 @@ var _getNextScreen = function (screen) {
|
|
|
228
240
|
return 'xl';
|
|
229
241
|
};
|
|
230
242
|
var DefaultLayout = function (_a) {
|
|
231
|
-
|
|
243
|
+
/********************************************************************************************************************
|
|
244
|
+
* Use
|
|
245
|
+
* ******************************************************************************************************************/
|
|
232
246
|
var children = _a.children, logo = _a.logo, badgeVariant = _a.badgeVariant, menu = _a.menu, initMenuHideScreen = _a.menuHideScreen, appBarControl = _a.appBarControl, onMenuClick = _a.onMenuClick;
|
|
233
247
|
var location = reactRouterDom.useLocation();
|
|
234
|
-
|
|
248
|
+
/********************************************************************************************************************
|
|
249
|
+
* State
|
|
250
|
+
* ******************************************************************************************************************/
|
|
235
251
|
var _b = React.useState(false), isMobileOpen = _b[0], setIsMobileOpen = _b[1];
|
|
236
252
|
var _c = React.useState({}), menuTitles = _c[0], setMenuTitles = _c[1];
|
|
237
253
|
var _d = React.useState(), title = _d[0], setTitle = _d[1];
|
|
238
254
|
var _e = React.useState(initMenuHideScreen || 'sm'), menuHideScreen = _e[0], setMenuHideScreen = _e[1];
|
|
239
|
-
|
|
255
|
+
/********************************************************************************************************************
|
|
256
|
+
* Effect
|
|
257
|
+
* ******************************************************************************************************************/
|
|
240
258
|
React.useEffect(function () {
|
|
241
259
|
var menuTitles = {};
|
|
242
260
|
if (menu) {
|
|
@@ -267,11 +285,15 @@ var DefaultLayout = function (_a) {
|
|
|
267
285
|
}
|
|
268
286
|
}
|
|
269
287
|
}, [location, menuTitles]);
|
|
270
|
-
|
|
288
|
+
/********************************************************************************************************************
|
|
289
|
+
* Function
|
|
290
|
+
* ******************************************************************************************************************/
|
|
271
291
|
var toggleIsMobileOpen = React.useCallback(function () {
|
|
272
292
|
setIsMobileOpen(function (isMobileOpen) { return !isMobileOpen; });
|
|
273
293
|
}, []);
|
|
274
|
-
|
|
294
|
+
/********************************************************************************************************************
|
|
295
|
+
* Memo
|
|
296
|
+
* ******************************************************************************************************************/
|
|
275
297
|
var appBarSx = React.useMemo(function () {
|
|
276
298
|
var width = {};
|
|
277
299
|
var ml = {};
|
|
@@ -326,7 +348,9 @@ var DefaultLayout = function (_a) {
|
|
|
326
348
|
width[_getNextScreen(menuHideScreen)] = "calc(100% - ".concat(SIDE_MENU_WIDTH, "px)");
|
|
327
349
|
return { width: width };
|
|
328
350
|
}, [menuHideScreen]);
|
|
329
|
-
|
|
351
|
+
/********************************************************************************************************************
|
|
352
|
+
* Render
|
|
353
|
+
* ******************************************************************************************************************/
|
|
330
354
|
return (React.createElement(StyledContainerBox, null,
|
|
331
355
|
React.createElement(StyledAppBar, { position: 'fixed', elevation: 0, sx: appBarSx },
|
|
332
356
|
React.createElement(material.Toolbar, null,
|
|
@@ -346,4 +370,30 @@ var DefaultLayout = function (_a) {
|
|
|
346
370
|
React.createElement(StyledMainBox, { component: 'main', sx: mainBoxSx },
|
|
347
371
|
React.createElement(material.Toolbar, null),
|
|
348
372
|
React.createElement(StyledMainContentDiv, null, children))));
|
|
349
|
-
};
|
|
373
|
+
};function styleInject(css, ref) {
|
|
374
|
+
if ( ref === void 0 ) ref = {};
|
|
375
|
+
var insertAt = ref.insertAt;
|
|
376
|
+
|
|
377
|
+
if (!css || typeof document === 'undefined') { return; }
|
|
378
|
+
|
|
379
|
+
var head = document.head || document.getElementsByTagName('head')[0];
|
|
380
|
+
var style = document.createElement('style');
|
|
381
|
+
style.type = 'text/css';
|
|
382
|
+
|
|
383
|
+
if (insertAt === 'top') {
|
|
384
|
+
if (head.firstChild) {
|
|
385
|
+
head.insertBefore(style, head.firstChild);
|
|
386
|
+
} else {
|
|
387
|
+
head.appendChild(style);
|
|
388
|
+
}
|
|
389
|
+
} else {
|
|
390
|
+
head.appendChild(style);
|
|
391
|
+
}
|
|
392
|
+
|
|
393
|
+
if (style.styleSheet) {
|
|
394
|
+
style.styleSheet.cssText = css;
|
|
395
|
+
} else {
|
|
396
|
+
style.appendChild(document.createTextNode(css));
|
|
397
|
+
}
|
|
398
|
+
}var css_248z = ".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}";
|
|
399
|
+
styleInject(css_248z);exports.CardLayout=CardLayout;exports.DefaultLayout=DefaultLayout;
|
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.23",
|
|
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
|
},
|