@pdg/react-admin-layout 1.0.35 → 1.0.37

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.
Files changed (5) hide show
  1. package/dist/DefaultLayout/DefaultLayout.d.ts +1 -1
  2. package/dist/assets/output-CGt0B9WV.css +137 -0
  3. package/dist/index.esm.js +36 -75
  4. package/dist/index.js +36 -75
  5. package/package.json +27 -26
package/dist/DefaultLayout/DefaultLayout.d.ts CHANGED
@@ -1,4 +1,4 @@
1
1
  import React from 'react';
2
2
  import { DefaultLayoutProps as Props } from './DefaultLayout.types';
3
- declare const DefaultLayout: ({ children, logo, badgeVariant, menu, menuHideScreen: initMenuHideScreen, appBarControl, }: Props) => React.JSX.Element;
3
+ declare const DefaultLayout: ({ children, logo, badgeVariant, menu, menuHideScreen, appBarControl }: Props) => React.JSX.Element;
4
4
  export default DefaultLayout;
package/dist/assets/output-CGt0B9WV.css ADDED
@@ -0,0 +1,137 @@
1
+ .simplebar-track.simplebar-vertical {
2
+ width: 8px !important;
3
+ }
4
+ .simplebar-track.simplebar-vertical .simplebar-scrollbar.simplebar-visible:before {
5
+ opacity: 0.3 !important;
6
+ }
7
+
8
+ .MuiButtonBase-root.MuiButton-root.MuiButton-outlined {
9
+ padding: 5px 15px 4px;
10
+ }
11
+ .MuiButtonBase-root.MuiButton-root.MuiButton-outlined.MuiButton-sizeLarge {
12
+ padding: 7px 21px 6px;
13
+ }
14
+ .MuiButtonBase-root.MuiButton-root.MuiButton-outlined.MuiButton-sizeSmall {
15
+ padding: 3px 9px 2px;
16
+ }
17
+ .MuiButtonBase-root.MuiButton-root.MuiButton-contained {
18
+ padding: 6px 16px 5px;
19
+ }
20
+ .MuiButtonBase-root.MuiButton-root.MuiButton-contained.MuiButton-sizeLarge {
21
+ padding: 8px 22px 7px;
22
+ }
23
+ .MuiButtonBase-root.MuiButton-root.MuiButton-contained.MuiButton-sizeSmall {
24
+ padding: 4px 10px 3px;
25
+ }
26
+ .MuiButtonBase-root.MuiButton-root.MuiButton-text {
27
+ padding: 6px 8px 5px;
28
+ }
29
+ .MuiButtonBase-root.MuiButton-root.MuiButton-text.MuiButton-sizeLarge {
30
+ padding: 8px 11px 7px;
31
+ }
32
+ .MuiButtonBase-root.MuiButton-root.MuiButton-text.MuiButton-sizeSmall {
33
+ padding: 4px 5px 3px;
34
+ }
35
+
36
+ html,
37
+ body,
38
+ div,
39
+ span,
40
+ applet,
41
+ object,
42
+ iframe,
43
+ h1,
44
+ h2,
45
+ h3,
46
+ h4,
47
+ h5,
48
+ h6,
49
+ p,
50
+ blockquote,
51
+ pre,
52
+ a,
53
+ abbr,
54
+ acronym,
55
+ address,
56
+ big,
57
+ cite,
58
+ code,
59
+ del,
60
+ dfn,
61
+ em,
62
+ img,
63
+ ins,
64
+ kbd,
65
+ q,
66
+ s,
67
+ samp,
68
+ small,
69
+ strike,
70
+ strong,
71
+ sub,
72
+ sup,
73
+ tt,
74
+ var,
75
+ b,
76
+ u,
77
+ i,
78
+ center,
79
+ dl,
80
+ dt,
81
+ dd,
82
+ ol,
83
+ ul,
84
+ li,
85
+ fieldset,
86
+ form,
87
+ label,
88
+ legend,
89
+ table,
90
+ caption,
91
+ tbody,
92
+ tfoot,
93
+ thead,
94
+ tr,
95
+ th,
96
+ td,
97
+ article,
98
+ aside,
99
+ canvas,
100
+ details,
101
+ embed,
102
+ figure,
103
+ figcaption,
104
+ footer,
105
+ header,
106
+ hgroup,
107
+ menu,
108
+ nav,
109
+ output,
110
+ ruby,
111
+ section,
112
+ summary,
113
+ time,
114
+ mark,
115
+ audio,
116
+ video,
117
+ main,
118
+ input,
119
+ button,
120
+ textarea,
121
+ pre,
122
+ select,
123
+ a {
124
+ font-family: "Pretendard", "Apple Gothic", "Dotum", sans-serif;
125
+ margin: 0;
126
+ padding: 0;
127
+ border: 0;
128
+ vertical-align: top;
129
+ box-sizing: border-box;
130
+ word-break: keep-all;
131
+ line-height: unset;
132
+ }
133
+
134
+ *:before,
135
+ *:after {
136
+ box-sizing: border-box;
137
+ }
package/dist/index.esm.js CHANGED
@@ -1,33 +1,7 @@
1
- import {Grid,styled,ListItemIcon,ListItemButton,Icon,ListItemText,Badge,Collapse,List,useTheme,alpha,Box,Toolbar,Typography,AppBar,Drawer,IconButton}from'@mui/material';import React,{useState,useEffect,useMemo}from'react';import {useLocation,useNavigate}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 (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 = ".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}\n\n.MuiButtonBase-root.MuiButton-root.MuiButton-outlined {\n padding: 5px 15px 4px;\n}\n.MuiButtonBase-root.MuiButton-root.MuiButton-outlined.MuiButton-sizeLarge {\n padding: 7px 21px 6px;\n}\n.MuiButtonBase-root.MuiButton-root.MuiButton-outlined.MuiButton-sizeSmall {\n padding: 3px 9px 2px;\n}\n.MuiButtonBase-root.MuiButton-root.MuiButton-contained {\n padding: 6px 16px 5px;\n}\n.MuiButtonBase-root.MuiButton-root.MuiButton-contained.MuiButton-sizeLarge {\n padding: 8px 22px 7px;\n}\n.MuiButtonBase-root.MuiButton-root.MuiButton-contained.MuiButton-sizeSmall {\n padding: 4px 10px 3px;\n}\n.MuiButtonBase-root.MuiButton-root.MuiButton-text {\n padding: 6px 8px 5px;\n}\n.MuiButtonBase-root.MuiButton-root.MuiButton-text.MuiButton-sizeLarge {\n padding: 8px 11px 7px;\n}\n.MuiButtonBase-root.MuiButton-root.MuiButton-text.MuiButton-sizeSmall {\n padding: 4px 5px 3px;\n}\n\nhtml,\nbody,\ndiv,\nspan,\napplet,\nobject,\niframe,\nh1,\nh2,\nh3,\nh4,\nh5,\nh6,\np,\nblockquote,\npre,\na,\nabbr,\nacronym,\naddress,\nbig,\ncite,\ncode,\ndel,\ndfn,\nem,\nimg,\nins,\nkbd,\nq,\ns,\nsamp,\nsmall,\nstrike,\nstrong,\nsub,\nsup,\ntt,\nvar,\nb,\nu,\ni,\ncenter,\ndl,\ndt,\ndd,\nol,\nul,\nli,\nfieldset,\nform,\nlabel,\nlegend,\ntable,\ncaption,\ntbody,\ntfoot,\nthead,\ntr,\nth,\ntd,\narticle,\naside,\ncanvas,\ndetails,\nembed,\nfigure,\nfigcaption,\nfooter,\nheader,\nhgroup,\nmenu,\nnav,\noutput,\nruby,\nsection,\nsummary,\ntime,\nmark,\naudio,\nvideo,\nmain,\ninput,\nbutton,\ntextarea,\npre,\nselect,\na {\n font-family: \"Pretendard\", \"Apple Gothic\", \"Dotum\", sans-serif;\n margin: 0;\n padding: 0;\n border: 0;\n vertical-align: top;\n box-sizing: border-box;\n word-break: keep-all;\n line-height: unset;\n}\n\n*:before,\n*:after {\n box-sizing: border-box;\n}";
27
- styleInject(css_248z);var CardLayout = function (_a) {
1
+ import {Grid,styled,ListItemIcon,ListItemButton,Icon,ListItemText,Badge,Collapse,List,useTheme,alpha,Box,Toolbar,Typography,AppBar,Drawer,IconButton}from'@mui/material';import React,{useState,useEffect,useCallback,useMemo}from'react';import {useLocation,useNavigate}from'react-router-dom';import {ExpandMore,Menu}from'@mui/icons-material';import {notEmpty,empty}from'@pdg/util';import SimpleBar from'simplebar-react';var CardLayout = function (_a) {
28
2
  var children = _a.children, _b = _a.backgroundColor, backgroundColor = _b === void 0 ? '#eff3f8' : _b;
29
- return (React.createElement(Grid, { container: true, direction: 'column', alignItems: 'center', justifyContent: 'center', style: { minHeight: '100vh', backgroundColor: backgroundColor } },
30
- React.createElement(Grid, { item: true, xs: 12 }, children)));
3
+ return (React.createElement(Grid, { container: true, direction: 'column', alignItems: 'center', justifyContent: 'center', bgcolor: backgroundColor, minHeight: '100vh' },
4
+ React.createElement(Grid, null, children)));
31
5
  };/******************************************************************************
32
6
  Copyright (c) Microsoft Corporation.
33
7
 
@@ -42,7 +16,7 @@ LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
42
16
  OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
43
17
  PERFORMANCE OF THIS SOFTWARE.
44
18
  ***************************************************************************** */
45
- /* global Reflect, Promise, SuppressedError, Symbol */
19
+ /* global Reflect, Promise, SuppressedError, Symbol, Iterator */
46
20
 
47
21
 
48
22
  var __assign = function() {
@@ -171,13 +145,19 @@ var StyledHeadTitleTypography = styled(Typography)(templateObject_4 || (template
171
145
  var StyledTitleContainerDiv = styled('div')(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n font-size: 1rem;\n"], ["\n display: flex;\n align-items: center;\n font-size: 1rem;\n"])));
172
146
  var StyledTitleIconContainerDiv = styled('div')(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n flex-shrink: 0;\n display: inline-flex;\n margin-right: 0.3rem;\n"], ["\n flex-shrink: 0;\n display: inline-flex;\n margin-right: 0.3rem;\n"])));
173
147
  var templateObject_1$1, templateObject_2$1, templateObject_3, templateObject_4, templateObject_5, templateObject_6;var Title = function (_a) {
148
+ /********************************************************************************************************************
149
+ * Variable
150
+ * ******************************************************************************************************************/
174
151
  var title = _a.title, icon = _a.icon, headTitle = _a.headTitle, headIcon = _a.headIcon;
175
- var finalHeadIcon = useMemo(function () {
176
- return headIcon
177
- ? headIcon.replace(/[A-Z]/g, function (letter, idx) { return "".concat(idx > 0 ? '_' : '').concat(letter.toLowerCase()); })
178
- : undefined;
179
- }, [headIcon]);
180
- var finalIcon = useMemo(function () { return (icon ? icon.replace(/[A-Z]/g, function (letter, idx) { return "".concat(idx > 0 ? '_' : '').concat(letter.toLowerCase()); }) : undefined); }, [icon]);
152
+ var finalHeadIcon = headIcon
153
+ ? headIcon.replace(/[A-Z]/g, function (letter, idx) { return "".concat(idx > 0 ? '_' : '').concat(letter.toLowerCase()); })
154
+ : undefined;
155
+ var finalIcon = icon
156
+ ? icon.replace(/[A-Z]/g, function (letter, idx) { return "".concat(idx > 0 ? '_' : '').concat(letter.toLowerCase()); })
157
+ : undefined;
158
+ /********************************************************************************************************************
159
+ * Render
160
+ * ******************************************************************************************************************/
181
161
  return (React.createElement(StyledContainerBox$1, null,
182
162
  headTitle && (React.createElement(StyledHeadContainerBox, null,
183
163
  finalHeadIcon && (React.createElement(StyledHeadIconContainerBox, null,
@@ -187,7 +167,8 @@ var templateObject_1$1, templateObject_2$1, templateObject_3, templateObject_4,
187
167
  finalIcon && (React.createElement(StyledTitleIconContainerDiv, null,
188
168
  React.createElement(Icon, { fontSize: 'small' }, finalIcon))),
189
169
  React.createElement("div", null, title))));
190
- };var SIDE_MENU_WIDTH = 220;
170
+ };
171
+ var Title$1 = React.memo(Title);var SIDE_MENU_WIDTH = 220;
191
172
  var StyledContainerBox = styled(Box)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n display: flex;\n height: 100%;\n"], ["\n display: flex;\n height: 100%;\n"])));
192
173
  var StyledAppBar = styled(AppBar)(function (_a) {
193
174
  var theme = _a.theme;
@@ -198,10 +179,6 @@ var StyledAppBar = styled(AppBar)(function (_a) {
198
179
  borderBottom: 'thin solid #f5f5f5',
199
180
  });
200
181
  });
201
- var StyledSideMenuContainerBox = styled(Box)(function (_a) {
202
- var theme = _a.theme;
203
- return theme.unstable_sx({});
204
- });
205
182
  var StyledSideMenuTemporaryDrawer = styled(Drawer)(function (_a) {
206
183
  var theme = _a.theme;
207
184
  return theme.unstable_sx({
@@ -214,16 +191,6 @@ var StyledSideMenuPermanentDrawer = styled(Drawer)(function (_a) {
214
191
  '& .MuiDrawer-paper': { boxSizing: 'border-box', width: SIDE_MENU_WIDTH },
215
192
  });
216
193
  });
217
- var StyledMainBox = styled(Box)(function (_a) {
218
- var theme = _a.theme;
219
- return theme.unstable_sx({
220
- flexGrow: 1,
221
- p: 2,
222
- display: 'flex',
223
- flexDirection: 'column',
224
- minHeight: '100vh',
225
- });
226
- });
227
194
  var StyledMainContentDiv = styled('div')(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n flex: 1;\n"], ["\n display: flex;\n flex-direction: column;\n flex: 1;\n"])));
228
195
  var templateObject_1, templateObject_2;var SCREENS = ['xs', 'sm', 'md', 'lg', 'xl'];
229
196
  var _getNextScreen = function (screen) {
@@ -241,15 +208,13 @@ var DefaultLayout = function (_a) {
241
208
  * Use
242
209
  * ******************************************************************************************************************/
243
210
  var _b, _c, _d, _e, _f, _g;
244
- var children = _a.children, logo = _a.logo, badgeVariant = _a.badgeVariant, menu = _a.menu, initMenuHideScreen = _a.menuHideScreen, appBarControl = _a.appBarControl;
211
+ var children = _a.children, logo = _a.logo, badgeVariant = _a.badgeVariant, menu = _a.menu, _h = _a.menuHideScreen, menuHideScreen = _h === void 0 ? 'sm' : _h, appBarControl = _a.appBarControl;
245
212
  var location = useLocation();
246
213
  /********************************************************************************************************************
247
214
  * State
248
215
  * ******************************************************************************************************************/
249
- var _h = useState(false), isMobileOpen = _h[0], setIsMobileOpen = _h[1];
250
- var _j = useState({}), menuTitles = _j[0], setMenuTitles = _j[1];
251
- var _k = useState(), title = _k[0], setTitle = _k[1];
252
- var _l = useState(initMenuHideScreen || 'sm'), menuHideScreen = _l[0], setMenuHideScreen = _l[1];
216
+ var _j = useState(false), isMobileOpen = _j[0], setIsMobileOpen = _j[1];
217
+ var _k = useState({}), menuTitles = _k[0], setMenuTitles = _k[1];
253
218
  /********************************************************************************************************************
254
219
  * Effect
255
220
  * ******************************************************************************************************************/
@@ -269,27 +234,15 @@ var DefaultLayout = function (_a) {
269
234
  }
270
235
  setMenuTitles(menuTitles);
271
236
  }, [menu]);
272
- useEffect(function () {
273
- setMenuHideScreen(initMenuHideScreen || 'sm');
274
- }, [initMenuHideScreen]);
275
237
  useEffect(function () {
276
238
  setIsMobileOpen(false);
277
239
  }, [location]);
278
- useEffect(function () {
279
- if (menuTitles) {
280
- var titleData = menuTitles[location.pathname];
281
- if (titleData) {
282
- setTitle(React.createElement(Title, { title: titleData.name, icon: titleData.icon, headTitle: titleData.parentName, headIcon: titleData.parentIcon }));
283
- }
284
- else {
285
- setTitle(undefined);
286
- }
287
- }
288
- }, [location, menuTitles]);
289
240
  /********************************************************************************************************************
290
241
  * Function
291
242
  * ******************************************************************************************************************/
292
- var toggleIsMobileOpen = function () { return setIsMobileOpen(function (isMobileOpen) { return !isMobileOpen; }); };
243
+ var toggleIsMobileOpen = useCallback(function () {
244
+ setIsMobileOpen(function (isMobileOpen) { return !isMobileOpen; });
245
+ }, []);
293
246
  /********************************************************************************************************************
294
247
  * Memo
295
248
  * ******************************************************************************************************************/
@@ -336,7 +289,15 @@ var DefaultLayout = function (_a) {
336
289
  width: (_e = {}, _e[nextMenuScreen] = SIDE_MENU_WIDTH, _e),
337
290
  flexShrink: (_f = {}, _f[nextMenuScreen] = 0, _f),
338
291
  };
339
- var mainBoxSx = { width: (_g = {}, _g[nextMenuScreen] = "calc(100% - ".concat(SIDE_MENU_WIDTH, "px)"), _g) };
292
+ var mainBoxSx = {
293
+ width: (_g = {}, _g[nextMenuScreen] = "calc(100% - ".concat(SIDE_MENU_WIDTH, "px)"), _g),
294
+ flexGrow: 1,
295
+ p: 2,
296
+ display: 'flex',
297
+ flexDirection: 'column',
298
+ minHeight: '100vh',
299
+ };
300
+ var titleData = menuTitles[location.pathname];
340
301
  /********************************************************************************************************************
341
302
  * Render
342
303
  * ******************************************************************************************************************/
@@ -345,14 +306,14 @@ var DefaultLayout = function (_a) {
345
306
  React.createElement(Toolbar, null,
346
307
  React.createElement(IconButton, { color: 'inherit', "aria-label": 'open drawer', edge: 'start', onClick: toggleIsMobileOpen, sx: appBarIconButtonSx },
347
308
  React.createElement(Menu, null)),
348
- React.createElement(Typography, { variant: 'h6', noWrap: true, component: 'div', sx: { flexGrow: 1 } }, title),
309
+ React.createElement(Typography, { variant: 'h6', noWrap: true, component: 'div', sx: { flexGrow: 1 } }, titleData && (React.createElement(Title$1, { title: titleData.name, icon: titleData.icon, headTitle: titleData.parentName, headIcon: titleData.parentIcon }))),
349
310
  appBarControl)),
350
- React.createElement(StyledSideMenuContainerBox, { component: 'nav', "aria-label": 'mailbox folders', sx: sideMenuContainerBoxSx },
311
+ React.createElement(Box, { component: 'nav', "aria-label": 'mailbox folders', sx: sideMenuContainerBoxSx },
351
312
  React.createElement(StyledSideMenuTemporaryDrawer, { variant: 'temporary', open: isMobileOpen, onClose: toggleIsMobileOpen, sx: sideMenuTemporaryDrawerSx, ModalProps: {
352
313
  keepMounted: true, // Better open performance on mobile.
353
314
  } }, menu && React.createElement(SideMenu$1, { logo: logo, badgeVariant: badgeVariant, list: menu })),
354
315
  React.createElement(StyledSideMenuPermanentDrawer, { variant: 'permanent', open: true, sx: sideMenuPermanentDrawerSx }, menu && React.createElement(SideMenu$1, { logo: logo, badgeVariant: badgeVariant, list: menu }))),
355
- React.createElement(StyledMainBox, { component: 'main', sx: mainBoxSx },
316
+ React.createElement(Box, { component: 'main', sx: mainBoxSx },
356
317
  React.createElement(Toolbar, null),
357
318
  React.createElement(StyledMainContentDiv, null, children))));
358
319
  };export{CardLayout,DefaultLayout};
package/dist/index.js CHANGED
@@ -1,33 +1,7 @@
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 (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 = ".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}\n\n.MuiButtonBase-root.MuiButton-root.MuiButton-outlined {\n padding: 5px 15px 4px;\n}\n.MuiButtonBase-root.MuiButton-root.MuiButton-outlined.MuiButton-sizeLarge {\n padding: 7px 21px 6px;\n}\n.MuiButtonBase-root.MuiButton-root.MuiButton-outlined.MuiButton-sizeSmall {\n padding: 3px 9px 2px;\n}\n.MuiButtonBase-root.MuiButton-root.MuiButton-contained {\n padding: 6px 16px 5px;\n}\n.MuiButtonBase-root.MuiButton-root.MuiButton-contained.MuiButton-sizeLarge {\n padding: 8px 22px 7px;\n}\n.MuiButtonBase-root.MuiButton-root.MuiButton-contained.MuiButton-sizeSmall {\n padding: 4px 10px 3px;\n}\n.MuiButtonBase-root.MuiButton-root.MuiButton-text {\n padding: 6px 8px 5px;\n}\n.MuiButtonBase-root.MuiButton-root.MuiButton-text.MuiButton-sizeLarge {\n padding: 8px 11px 7px;\n}\n.MuiButtonBase-root.MuiButton-root.MuiButton-text.MuiButton-sizeSmall {\n padding: 4px 5px 3px;\n}\n\nhtml,\nbody,\ndiv,\nspan,\napplet,\nobject,\niframe,\nh1,\nh2,\nh3,\nh4,\nh5,\nh6,\np,\nblockquote,\npre,\na,\nabbr,\nacronym,\naddress,\nbig,\ncite,\ncode,\ndel,\ndfn,\nem,\nimg,\nins,\nkbd,\nq,\ns,\nsamp,\nsmall,\nstrike,\nstrong,\nsub,\nsup,\ntt,\nvar,\nb,\nu,\ni,\ncenter,\ndl,\ndt,\ndd,\nol,\nul,\nli,\nfieldset,\nform,\nlabel,\nlegend,\ntable,\ncaption,\ntbody,\ntfoot,\nthead,\ntr,\nth,\ntd,\narticle,\naside,\ncanvas,\ndetails,\nembed,\nfigure,\nfigcaption,\nfooter,\nheader,\nhgroup,\nmenu,\nnav,\noutput,\nruby,\nsection,\nsummary,\ntime,\nmark,\naudio,\nvideo,\nmain,\ninput,\nbutton,\ntextarea,\npre,\nselect,\na {\n font-family: \"Pretendard\", \"Apple Gothic\", \"Dotum\", sans-serif;\n margin: 0;\n padding: 0;\n border: 0;\n vertical-align: top;\n box-sizing: border-box;\n word-break: keep-all;\n line-height: unset;\n}\n\n*:before,\n*:after {\n box-sizing: border-box;\n}";
27
- styleInject(css_248z);var CardLayout = function (_a) {
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');var CardLayout = function (_a) {
28
2
  var children = _a.children, _b = _a.backgroundColor, backgroundColor = _b === void 0 ? '#eff3f8' : _b;
29
- return (React.createElement(material.Grid, { container: true, direction: 'column', alignItems: 'center', justifyContent: 'center', style: { minHeight: '100vh', backgroundColor: backgroundColor } },
30
- React.createElement(material.Grid, { item: true, xs: 12 }, children)));
3
+ return (React.createElement(material.Grid, { container: true, direction: 'column', alignItems: 'center', justifyContent: 'center', bgcolor: backgroundColor, minHeight: '100vh' },
4
+ React.createElement(material.Grid, null, children)));
31
5
  };/******************************************************************************
32
6
  Copyright (c) Microsoft Corporation.
33
7
 
@@ -42,7 +16,7 @@ LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
42
16
  OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
43
17
  PERFORMANCE OF THIS SOFTWARE.
44
18
  ***************************************************************************** */
45
- /* global Reflect, Promise, SuppressedError, Symbol */
19
+ /* global Reflect, Promise, SuppressedError, Symbol, Iterator */
46
20
 
47
21
 
48
22
  var __assign = function() {
@@ -171,13 +145,19 @@ var StyledHeadTitleTypography = material.styled(material.Typography)(templateObj
171
145
  var StyledTitleContainerDiv = material.styled('div')(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n font-size: 1rem;\n"], ["\n display: flex;\n align-items: center;\n font-size: 1rem;\n"])));
172
146
  var StyledTitleIconContainerDiv = material.styled('div')(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n flex-shrink: 0;\n display: inline-flex;\n margin-right: 0.3rem;\n"], ["\n flex-shrink: 0;\n display: inline-flex;\n margin-right: 0.3rem;\n"])));
173
147
  var templateObject_1$1, templateObject_2$1, templateObject_3, templateObject_4, templateObject_5, templateObject_6;var Title = function (_a) {
148
+ /********************************************************************************************************************
149
+ * Variable
150
+ * ******************************************************************************************************************/
174
151
  var title = _a.title, icon = _a.icon, headTitle = _a.headTitle, headIcon = _a.headIcon;
175
- var finalHeadIcon = React.useMemo(function () {
176
- return headIcon
177
- ? headIcon.replace(/[A-Z]/g, function (letter, idx) { return "".concat(idx > 0 ? '_' : '').concat(letter.toLowerCase()); })
178
- : undefined;
179
- }, [headIcon]);
180
- var finalIcon = React.useMemo(function () { return (icon ? icon.replace(/[A-Z]/g, function (letter, idx) { return "".concat(idx > 0 ? '_' : '').concat(letter.toLowerCase()); }) : undefined); }, [icon]);
152
+ var finalHeadIcon = headIcon
153
+ ? headIcon.replace(/[A-Z]/g, function (letter, idx) { return "".concat(idx > 0 ? '_' : '').concat(letter.toLowerCase()); })
154
+ : undefined;
155
+ var finalIcon = icon
156
+ ? icon.replace(/[A-Z]/g, function (letter, idx) { return "".concat(idx > 0 ? '_' : '').concat(letter.toLowerCase()); })
157
+ : undefined;
158
+ /********************************************************************************************************************
159
+ * Render
160
+ * ******************************************************************************************************************/
181
161
  return (React.createElement(StyledContainerBox$1, null,
182
162
  headTitle && (React.createElement(StyledHeadContainerBox, null,
183
163
  finalHeadIcon && (React.createElement(StyledHeadIconContainerBox, null,
@@ -187,7 +167,8 @@ var templateObject_1$1, templateObject_2$1, templateObject_3, templateObject_4,
187
167
  finalIcon && (React.createElement(StyledTitleIconContainerDiv, null,
188
168
  React.createElement(material.Icon, { fontSize: 'small' }, finalIcon))),
189
169
  React.createElement("div", null, title))));
190
- };var SIDE_MENU_WIDTH = 220;
170
+ };
171
+ var Title$1 = React.memo(Title);var SIDE_MENU_WIDTH = 220;
191
172
  var StyledContainerBox = material.styled(material.Box)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n display: flex;\n height: 100%;\n"], ["\n display: flex;\n height: 100%;\n"])));
192
173
  var StyledAppBar = material.styled(material.AppBar)(function (_a) {
193
174
  var theme = _a.theme;
@@ -198,10 +179,6 @@ var StyledAppBar = material.styled(material.AppBar)(function (_a) {
198
179
  borderBottom: 'thin solid #f5f5f5',
199
180
  });
200
181
  });
201
- var StyledSideMenuContainerBox = material.styled(material.Box)(function (_a) {
202
- var theme = _a.theme;
203
- return theme.unstable_sx({});
204
- });
205
182
  var StyledSideMenuTemporaryDrawer = material.styled(material.Drawer)(function (_a) {
206
183
  var theme = _a.theme;
207
184
  return theme.unstable_sx({
@@ -214,16 +191,6 @@ var StyledSideMenuPermanentDrawer = material.styled(material.Drawer)(function (_
214
191
  '& .MuiDrawer-paper': { boxSizing: 'border-box', width: SIDE_MENU_WIDTH },
215
192
  });
216
193
  });
217
- var StyledMainBox = material.styled(material.Box)(function (_a) {
218
- var theme = _a.theme;
219
- return theme.unstable_sx({
220
- flexGrow: 1,
221
- p: 2,
222
- display: 'flex',
223
- flexDirection: 'column',
224
- minHeight: '100vh',
225
- });
226
- });
227
194
  var StyledMainContentDiv = material.styled('div')(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n flex: 1;\n"], ["\n display: flex;\n flex-direction: column;\n flex: 1;\n"])));
228
195
  var templateObject_1, templateObject_2;var SCREENS = ['xs', 'sm', 'md', 'lg', 'xl'];
229
196
  var _getNextScreen = function (screen) {
@@ -241,15 +208,13 @@ var DefaultLayout = function (_a) {
241
208
  * Use
242
209
  * ******************************************************************************************************************/
243
210
  var _b, _c, _d, _e, _f, _g;
244
- var children = _a.children, logo = _a.logo, badgeVariant = _a.badgeVariant, menu = _a.menu, initMenuHideScreen = _a.menuHideScreen, appBarControl = _a.appBarControl;
211
+ var children = _a.children, logo = _a.logo, badgeVariant = _a.badgeVariant, menu = _a.menu, _h = _a.menuHideScreen, menuHideScreen = _h === void 0 ? 'sm' : _h, appBarControl = _a.appBarControl;
245
212
  var location = reactRouterDom.useLocation();
246
213
  /********************************************************************************************************************
247
214
  * State
248
215
  * ******************************************************************************************************************/
249
- var _h = React.useState(false), isMobileOpen = _h[0], setIsMobileOpen = _h[1];
250
- var _j = React.useState({}), menuTitles = _j[0], setMenuTitles = _j[1];
251
- var _k = React.useState(), title = _k[0], setTitle = _k[1];
252
- var _l = React.useState(initMenuHideScreen || 'sm'), menuHideScreen = _l[0], setMenuHideScreen = _l[1];
216
+ var _j = React.useState(false), isMobileOpen = _j[0], setIsMobileOpen = _j[1];
217
+ var _k = React.useState({}), menuTitles = _k[0], setMenuTitles = _k[1];
253
218
  /********************************************************************************************************************
254
219
  * Effect
255
220
  * ******************************************************************************************************************/
@@ -269,27 +234,15 @@ var DefaultLayout = function (_a) {
269
234
  }
270
235
  setMenuTitles(menuTitles);
271
236
  }, [menu]);
272
- React.useEffect(function () {
273
- setMenuHideScreen(initMenuHideScreen || 'sm');
274
- }, [initMenuHideScreen]);
275
237
  React.useEffect(function () {
276
238
  setIsMobileOpen(false);
277
239
  }, [location]);
278
- React.useEffect(function () {
279
- if (menuTitles) {
280
- var titleData = menuTitles[location.pathname];
281
- if (titleData) {
282
- setTitle(React.createElement(Title, { title: titleData.name, icon: titleData.icon, headTitle: titleData.parentName, headIcon: titleData.parentIcon }));
283
- }
284
- else {
285
- setTitle(undefined);
286
- }
287
- }
288
- }, [location, menuTitles]);
289
240
  /********************************************************************************************************************
290
241
  * Function
291
242
  * ******************************************************************************************************************/
292
- var toggleIsMobileOpen = function () { return setIsMobileOpen(function (isMobileOpen) { return !isMobileOpen; }); };
243
+ var toggleIsMobileOpen = React.useCallback(function () {
244
+ setIsMobileOpen(function (isMobileOpen) { return !isMobileOpen; });
245
+ }, []);
293
246
  /********************************************************************************************************************
294
247
  * Memo
295
248
  * ******************************************************************************************************************/
@@ -336,7 +289,15 @@ var DefaultLayout = function (_a) {
336
289
  width: (_e = {}, _e[nextMenuScreen] = SIDE_MENU_WIDTH, _e),
337
290
  flexShrink: (_f = {}, _f[nextMenuScreen] = 0, _f),
338
291
  };
339
- var mainBoxSx = { width: (_g = {}, _g[nextMenuScreen] = "calc(100% - ".concat(SIDE_MENU_WIDTH, "px)"), _g) };
292
+ var mainBoxSx = {
293
+ width: (_g = {}, _g[nextMenuScreen] = "calc(100% - ".concat(SIDE_MENU_WIDTH, "px)"), _g),
294
+ flexGrow: 1,
295
+ p: 2,
296
+ display: 'flex',
297
+ flexDirection: 'column',
298
+ minHeight: '100vh',
299
+ };
300
+ var titleData = menuTitles[location.pathname];
340
301
  /********************************************************************************************************************
341
302
  * Render
342
303
  * ******************************************************************************************************************/
@@ -345,14 +306,14 @@ var DefaultLayout = function (_a) {
345
306
  React.createElement(material.Toolbar, null,
346
307
  React.createElement(material.IconButton, { color: 'inherit', "aria-label": 'open drawer', edge: 'start', onClick: toggleIsMobileOpen, sx: appBarIconButtonSx },
347
308
  React.createElement(iconsMaterial.Menu, null)),
348
- React.createElement(material.Typography, { variant: 'h6', noWrap: true, component: 'div', sx: { flexGrow: 1 } }, title),
309
+ React.createElement(material.Typography, { variant: 'h6', noWrap: true, component: 'div', sx: { flexGrow: 1 } }, titleData && (React.createElement(Title$1, { title: titleData.name, icon: titleData.icon, headTitle: titleData.parentName, headIcon: titleData.parentIcon }))),
349
310
  appBarControl)),
350
- React.createElement(StyledSideMenuContainerBox, { component: 'nav', "aria-label": 'mailbox folders', sx: sideMenuContainerBoxSx },
311
+ React.createElement(material.Box, { component: 'nav', "aria-label": 'mailbox folders', sx: sideMenuContainerBoxSx },
351
312
  React.createElement(StyledSideMenuTemporaryDrawer, { variant: 'temporary', open: isMobileOpen, onClose: toggleIsMobileOpen, sx: sideMenuTemporaryDrawerSx, ModalProps: {
352
313
  keepMounted: true, // Better open performance on mobile.
353
314
  } }, menu && React.createElement(SideMenu$1, { logo: logo, badgeVariant: badgeVariant, list: menu })),
354
315
  React.createElement(StyledSideMenuPermanentDrawer, { variant: 'permanent', open: true, sx: sideMenuPermanentDrawerSx }, menu && React.createElement(SideMenu$1, { logo: logo, badgeVariant: badgeVariant, list: menu }))),
355
- React.createElement(StyledMainBox, { component: 'main', sx: mainBoxSx },
316
+ React.createElement(material.Box, { component: 'main', sx: mainBoxSx },
356
317
  React.createElement(material.Toolbar, null),
357
318
  React.createElement(StyledMainContentDiv, null, children))));
358
319
  };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.35",
4
+ "version": "1.0.37",
5
5
  "description": "Admin Layout for React",
6
6
  "type": "module",
7
7
  "types": "dist/index.d.ts",
@@ -42,36 +42,37 @@
42
42
  "javascript"
43
43
  ],
44
44
  "peerDependencies": {
45
- "@emotion/react": "^11.11.4",
46
- "@emotion/styled": "^11.11.5",
47
- "@mui/icons-material": "^5.15.16",
48
- "@mui/material": "^5.15.16",
45
+ "@emotion/react": "^11.14.0",
46
+ "@emotion/styled": "^11.14.0",
47
+ "@mui/icons-material": "^7.0.2",
48
+ "@mui/material": "^7.0.2",
49
49
  "@pdg/util": "^1.0.22",
50
- "@types/react": "^17.0.0 || ^18.0.0",
51
- "react": "^17.0.0 || ^18.0.0",
52
- "react-dom": "^17.0.0 || ^18.0.0",
53
- "react-router-dom": "^6.23.0",
54
- "simplebar-react": "3.2.5"
50
+ "@types/react": "^17.0.0 || ^18.0.0 || ^19.0.0",
51
+ "react": "^17.0.0 || ^18.0.0 || ^19.0.0",
52
+ "react-dom": "^17.0.0 || ^18.0.0 || ^19.0.0",
53
+ "react-router-dom": "^6.30.0",
54
+ "simplebar-react": "3.3.0"
55
55
  },
56
56
  "devDependencies": {
57
- "@rollup/plugin-commonjs": "^25.0.7",
57
+ "@rollup/plugin-commonjs": "^28.0.3",
58
58
  "@rollup/plugin-eslint": "^9.0.5",
59
- "@rollup/plugin-node-resolve": "^15.2.3",
60
- "@typescript-eslint/eslint-plugin": "^7.8.0",
61
- "@typescript-eslint/parser": "^7.8.0",
62
- "eslint": "8.57.0",
63
- "eslint-config-prettier": "^9.1.0",
64
- "eslint-plugin-jsx-a11y": "^6.8.0",
65
- "eslint-plugin-prettier": "^5.1.3",
66
- "eslint-plugin-react": "^7.34.1",
67
- "eslint-plugin-react-hooks": "^4.6.2",
68
- "prettier": "^3.2.5",
69
- "rollup": "^4.17.2",
70
- "rollup-plugin-delete": "^2.0.0",
59
+ "@rollup/plugin-node-resolve": "^16.0.1",
60
+ "@types/node": "^22.14.0",
61
+ "@typescript-eslint/eslint-plugin": "^8.29.1",
62
+ "@typescript-eslint/parser": "^8.29.1",
63
+ "eslint": "8.57.1",
64
+ "eslint-config-prettier": "^10.1.2",
65
+ "eslint-plugin-jsx-a11y": "^6.10.2",
66
+ "eslint-plugin-prettier": "^5.2.6",
67
+ "eslint-plugin-react": "^7.37.5",
68
+ "eslint-plugin-react-hooks": "^5.2.0",
69
+ "prettier": "^3.5.3",
70
+ "rollup": "^4.39.0",
71
+ "rollup-plugin-delete": "^2.2.0",
71
72
  "rollup-plugin-peer-deps-external": "^2.2.4",
72
- "rollup-plugin-postcss": "^4.0.2",
73
+ "rollup-plugin-scss": "^4.0.1",
73
74
  "rollup-plugin-typescript2": "^0.36.0",
74
- "sass": "^1.77.0",
75
- "typescript": "^5.4.5"
75
+ "sass": "^1.86.3",
76
+ "typescript": "^5.8.3"
76
77
  }
77
78
  }