@pdg/react-admin-layout 1.0.47 → 1.0.49

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 (4) hide show
  1. package/README.md +2 -24
  2. package/dist/index.esm.js +141 -154
  3. package/dist/index.js +137 -150
  4. package/package.json +53 -36
package/README.md CHANGED
@@ -1,30 +1,8 @@
1
1
  # @pdg/react-admin-layout
2
2
 
3
- Admin Layout for React
4
-
5
- ## 데모
6
- https://parkdigy.github.io/react-admin-layout/
3
+ NPM React Template
7
4
 
8
5
  ## 설치
9
- ```shell
10
- npm install -D @pdg/react-admin-layout
11
- ```
12
-
13
- ### index.html 에 추가
14
- ```html
15
- ...
16
- <head>
17
- ...
18
- <link rel="preconnect" href="https://fonts.googleapis.com">
19
- <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
20
- <link rel="stylesheet" href="https://mafin.s3.ap-northeast-2.amazonaws.com/common/fonts/pretendard/static/pretendard.css">
21
- <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
22
- ...
23
- </head>
24
- ...
25
6
  ```
26
-
27
- ### simplebar-react css 추가
28
- ```
29
- import 'simplebar-react/dist/simplebar.min.css';
7
+ npm install -D @pdg/react-admin-layout
30
8
  ```
package/dist/index.esm.js CHANGED
@@ -6,73 +6,56 @@ import {Grid,styled,ListItemIcon,ListItemButton,Icon,ListItemText,Badge,Collapse
6
6
  style.innerHTML = css;
7
7
  document.head.appendChild(style);
8
8
  return css;
9
- }insertStyle(".simplebar-track.simplebar-vertical{width:8px !important}.simplebar-track.simplebar-vertical .simplebar-scrollbar.simplebar-visible:before{opacity:.3 !important}.MuiButtonBase-root.MuiButton-root.MuiButton-outlined{padding:5px 15px 4px}.MuiButtonBase-root.MuiButton-root.MuiButton-outlined.MuiButton-sizeLarge{padding:7px 21px 6px}.MuiButtonBase-root.MuiButton-root.MuiButton-outlined.MuiButton-sizeSmall{padding:3px 9px 2px}.MuiButtonBase-root.MuiButton-root.MuiButton-contained{padding:6px 16px 5px}.MuiButtonBase-root.MuiButton-root.MuiButton-contained.MuiButton-sizeLarge{padding:8px 22px 7px}.MuiButtonBase-root.MuiButton-root.MuiButton-contained.MuiButton-sizeSmall{padding:4px 10px 3px}.MuiButtonBase-root.MuiButton-root.MuiButton-text{padding:6px 8px 5px}.MuiButtonBase-root.MuiButton-root.MuiButton-text.MuiButton-sizeLarge{padding:8px 11px 7px}.MuiButtonBase-root.MuiButton-root.MuiButton-text.MuiButton-sizeSmall{padding:4px 5px 3px}html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video,main,input,button,textarea,pre,select,a{font-family:\"Pretendard\",\"Apple Gothic\",\"Dotum\",sans-serif;margin:0;padding:0;border:0;vertical-align:top;box-sizing:border-box;word-break:keep-all;line-height:unset}*:before,*:after{box-sizing:border-box}");var CardLayout = function (_a) {
10
- var children = _a.children, _b = _a.backgroundColor, backgroundColor = _b === void 0 ? '#eff3f8' : _b;
9
+ }insertStyle(".simplebar-track.simplebar-vertical{width:8px !important}.simplebar-track.simplebar-vertical .simplebar-scrollbar.simplebar-visible:before{opacity:.3 !important}.MuiButtonBase-root.MuiButton-root.MuiButton-outlined{padding:5px 15px 4px}.MuiButtonBase-root.MuiButton-root.MuiButton-outlined.MuiButton-sizeLarge{padding:7px 21px 6px}.MuiButtonBase-root.MuiButton-root.MuiButton-outlined.MuiButton-sizeSmall{padding:3px 9px 2px}.MuiButtonBase-root.MuiButton-root.MuiButton-contained{padding:6px 16px 5px}.MuiButtonBase-root.MuiButton-root.MuiButton-contained.MuiButton-sizeLarge{padding:8px 22px 7px}.MuiButtonBase-root.MuiButton-root.MuiButton-contained.MuiButton-sizeSmall{padding:4px 10px 3px}.MuiButtonBase-root.MuiButton-root.MuiButton-text{padding:6px 8px 5px}.MuiButtonBase-root.MuiButton-root.MuiButton-text.MuiButton-sizeLarge{padding:8px 11px 7px}.MuiButtonBase-root.MuiButton-root.MuiButton-text.MuiButton-sizeSmall{padding:4px 5px 3px}html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video,main,input,button,textarea,pre,select,a{font-family:\"Pretendard\",\"Apple Gothic\",\"Dotum\",sans-serif;margin:0;padding:0;border:0;vertical-align:top;box-sizing:border-box;word-break:keep-all;line-height:unset}*:before,*:after{box-sizing:border-box}");const CardLayout = ({ children, backgroundColor = '#eff3f8' }) => {
11
10
  return (React.createElement(Grid, { container: true, direction: 'column', alignItems: 'center', justifyContent: 'center', bgcolor: backgroundColor, minHeight: '100vh' },
12
11
  React.createElement(Grid, null, children)));
13
- };/******************************************************************************
14
- Copyright (c) Microsoft Corporation.
15
-
16
- Permission to use, copy, modify, and/or distribute this software for any
17
- purpose with or without fee is hereby granted.
18
-
19
- THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
20
- REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
21
- AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
22
- INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
23
- LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
24
- OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
25
- PERFORMANCE OF THIS SOFTWARE.
26
- ***************************************************************************** */
27
- /* global Reflect, Promise, SuppressedError, Symbol, Iterator */
28
-
29
-
30
- var __assign = function() {
31
- __assign = Object.assign || function __assign(t) {
32
- for (var s, i = 1, n = arguments.length; i < n; i++) {
33
- s = arguments[i];
34
- for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
35
- }
36
- return t;
37
- };
38
- return __assign.apply(this, arguments);
39
- };
40
-
41
- function __makeTemplateObject(cooked, raw) {
42
- if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
43
- return cooked;
44
- }
45
- typeof SuppressedError === "function" ? SuppressedError : function (error, suppressed, message) {
46
- var e = new Error(message);
47
- return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
48
- };var StyledExpandMore = styled(ExpandMore)(templateObject_1$4 || (templateObject_1$4 = __makeTemplateObject(["\n margin-top: auto;\n margin-bottom: auto;\n @keyframes open {\n 0% {\n transform: rotate(0deg);\n }\n 100% {\n transform: rotate(180deg);\n }\n }\n @keyframes close {\n 0% {\n transform: rotate(180deg);\n }\n 100% {\n transform: rotate(0deg);\n }\n }\n"], ["\n margin-top: auto;\n margin-bottom: auto;\n @keyframes open {\n 0% {\n transform: rotate(0deg);\n }\n 100% {\n transform: rotate(180deg);\n }\n }\n @keyframes close {\n 0% {\n transform: rotate(180deg);\n }\n 100% {\n transform: rotate(0deg);\n }\n }\n"])));
49
- var StyledListItemIcon = styled(ListItemIcon)(templateObject_2$2 || (templateObject_2$2 = __makeTemplateObject(["\n min-width: 30px;\n"], ["\n min-width: 30px;\n"])));
50
- var templateObject_1$4, templateObject_2$2;var SideMenuListItem = function (_a) {
12
+ };const StyledExpandMore = styled(ExpandMore) `
13
+ margin-top: auto;
14
+ margin-bottom: auto;
15
+ @keyframes open {
16
+ 0% {
17
+ transform: rotate(0deg);
18
+ }
19
+ 100% {
20
+ transform: rotate(180deg);
21
+ }
22
+ }
23
+ @keyframes close {
24
+ 0% {
25
+ transform: rotate(180deg);
26
+ }
27
+ 100% {
28
+ transform: rotate(0deg);
29
+ }
30
+ }
31
+ `;
32
+ const StyledListItemIcon = styled(ListItemIcon) `
33
+ min-width: 30px;
34
+ `;const SideMenuListItem = ({ info, badgeVariant, expandedBackgroundColor }) => {
51
35
  /********************************************************************************************************************
52
36
  * Use
53
37
  * ******************************************************************************************************************/
54
- var info = _a.info, badgeVariant = _a.badgeVariant, expandedBackgroundColor = _a.expandedBackgroundColor;
55
- var location = useLocation();
56
- var navigate = useNavigate();
38
+ const location = useLocation();
39
+ const navigate = useNavigate();
57
40
  /********************************************************************************************************************
58
41
  * State
59
42
  * ******************************************************************************************************************/
60
- var _b = useState(false), isExpandable = _b[0], setIsExpandable = _b[1];
61
- var _c = useState(false), isExpand = _c[0], setIsExpand = _c[1];
43
+ const [isExpandable, setIsExpandable] = useState(false);
44
+ const [isExpand, setIsExpand] = useState(false);
62
45
  /********************************************************************************************************************
63
46
  * Effect
64
47
  * ******************************************************************************************************************/
65
- useEffect(function () {
48
+ useEffect(() => {
66
49
  setIsExpandable(!!info.items && info.items.length > 0);
67
- if (info.items && info.items.find(function (info) { return location.pathname === info.uri; })) {
50
+ if (info.items && info.items.find((info) => location.pathname === info.uri)) {
68
51
  setIsExpand(true);
69
52
  }
70
53
  // eslint-disable-next-line react-hooks/exhaustive-deps
71
54
  }, [info]);
72
- useEffect(function () {
55
+ useEffect(() => {
73
56
  if (isExpandable && isExpand != null) {
74
57
  if (info.uri !== location.pathname) {
75
- if (info.items && !info.items.find(function (info) { return location.pathname === info.uri; })) {
58
+ if (info.items && !info.items.find((info) => location.pathname === info.uri)) {
76
59
  if (isExpand) {
77
60
  setIsExpand(false);
78
61
  }
@@ -80,7 +63,7 @@ var templateObject_1$4, templateObject_2$2;var SideMenuListItem = function (_a)
80
63
  }
81
64
  }
82
65
  if (isExpandable && !isExpand) {
83
- if (info.items && info.items.find(function (info) { return location.pathname === info.uri; })) {
66
+ if (info.items && info.items.find((info) => location.pathname === info.uri)) {
84
67
  setIsExpand(true);
85
68
  }
86
69
  }
@@ -90,7 +73,7 @@ var templateObject_1$4, templateObject_2$2;var SideMenuListItem = function (_a)
90
73
  * Render
91
74
  * ******************************************************************************************************************/
92
75
  return (React.createElement(React.Fragment, null,
93
- React.createElement(ListItemButton, { onClick: isExpandable ? function () { return setIsExpand(function (old) { return !old; }); } : function () { return info.uri && navigate(info.uri); }, selected: isExpandable ? false : info.uri === location.pathname, style: {
76
+ React.createElement(ListItemButton, { onClick: isExpandable ? () => setIsExpand((old) => !old) : () => info.uri && navigate(info.uri), selected: isExpandable ? false : info.uri === location.pathname, style: {
94
77
  backgroundColor: isExpandable && isExpand ? expandedBackgroundColor : undefined,
95
78
  } },
96
79
  React.createElement(StyledListItemIcon, null, info.icon && React.createElement(Icon, { fontSize: 'small' }, info.icon)),
@@ -99,69 +82,78 @@ var templateObject_1$4, templateObject_2$2;var SideMenuListItem = function (_a)
99
82
  } },
100
83
  React.createElement("div", null, info.name))) : (info.name)),
101
84
  isExpandable && (React.createElement(StyledExpandMore, { sx: {
102
- animation: "".concat(isExpand ? 'open' : 'close', " 0.1s linear"),
103
- transform: "rotate(".concat(isExpand ? 180 : 0, "deg)"),
85
+ animation: `${isExpand ? 'open' : 'close'} 0.1s linear`,
86
+ transform: `rotate(${isExpand ? 180 : 0}deg)`,
104
87
  } }))),
105
88
  isExpandable && (React.createElement(Collapse, { in: isExpand, style: { backgroundColor: isExpand ? expandedBackgroundColor : undefined } }, info.items &&
106
- info.items.map(function (subInfo, idx) { return React.createElement(SideMenuListItem, { key: idx, badgeVariant: badgeVariant, info: subInfo }); })))));
107
- };var StyledList = styled(List)(templateObject_1$3 || (templateObject_1$3 = __makeTemplateObject(["\n padding: 0;\n"], ["\n padding: 0;\n"])));
108
- var templateObject_1$3;var SideMenuList = function (_a) {
89
+ info.items.map((subInfo, idx) => React.createElement(SideMenuListItem, { key: idx, badgeVariant: badgeVariant, info: subInfo }))))));
90
+ };const StyledList = styled(List) `
91
+ padding: 0;
92
+ `;const SideMenuList$1 = ({ list, badgeVariant }) => {
109
93
  /********************************************************************************************************************
110
94
  * Use
111
95
  * ******************************************************************************************************************/
112
- var list = _a.list, badgeVariant = _a.badgeVariant;
113
- var theme = useTheme();
96
+ const theme = useTheme();
114
97
  /********************************************************************************************************************
115
98
  * Variable
116
99
  * ******************************************************************************************************************/
117
- var finalList = list.map(function (item) { return (__assign(__assign({}, item), { icon: item.icon
118
- ? item.icon.replace(/[A-Z]/g, function (letter, idx) { return "".concat(idx > 0 ? '_' : '').concat(letter.toLowerCase()); })
119
- : undefined })); });
120
- var expandedBackgroundColor = alpha(theme.palette.primary.main, theme.palette.action.selectedOpacity / 2);
100
+ const finalList = list.map((item) => (Object.assign(Object.assign({}, item), { icon: item.icon
101
+ ? item.icon.replace(/[A-Z]/g, (letter, idx) => `${idx > 0 ? '_' : ''}${letter.toLowerCase()}`)
102
+ : undefined })));
103
+ const expandedBackgroundColor = alpha(theme.palette.primary.main, theme.palette.action.selectedOpacity / 2);
121
104
  /********************************************************************************************************************
122
105
  * Render
123
106
  * ******************************************************************************************************************/
124
- return (React.createElement(StyledList, null, finalList.map(function (info, idx) { return (React.createElement(SideMenuListItem, { key: idx, info: info, badgeVariant: badgeVariant, expandedBackgroundColor: expandedBackgroundColor })); })));
107
+ return (React.createElement(StyledList, null, finalList.map((info, idx) => (React.createElement(SideMenuListItem, { key: idx, info: info, badgeVariant: badgeVariant, expandedBackgroundColor: expandedBackgroundColor })))));
125
108
  };
126
- var SideMenuList$1 = React.memo(SideMenuList);var StyledSimpleBar = styled(SimpleBar)(templateObject_1$2 || (templateObject_1$2 = __makeTemplateObject(["\n max-height: 100%;\n"], ["\n max-height: 100%;\n"])));
127
- var StyledLogoContainerBox = styled(Box)(function (_a) {
128
- var theme = _a.theme;
129
- return theme.unstable_sx({
130
- borderBottom: 'thin solid #f5f5f5',
131
- color: 'text.primary',
132
- });
133
- });
134
- var templateObject_1$2;var SideMenu = function (_a) {
135
- var logo = _a.logo, badgeVariant = _a.badgeVariant, list = _a.list;
109
+ var SideMenuList = React.memo(SideMenuList$1);const StyledSimpleBar = styled(SimpleBar) `
110
+ max-height: 100%;
111
+ `;
112
+ const StyledLogoContainerBox = styled(Box)(({ theme }) => theme.unstable_sx({
113
+ borderBottom: 'thin solid #f5f5f5',
114
+ color: 'text.primary',
115
+ }));const SideMenu$1 = ({ logo, badgeVariant, list }) => {
136
116
  return (React.createElement(StyledSimpleBar, null,
137
117
  React.createElement(StyledLogoContainerBox, null,
138
118
  React.createElement(Toolbar, null, logo)),
139
- list && React.createElement(SideMenuList$1, { badgeVariant: badgeVariant, list: list })));
119
+ list && React.createElement(SideMenuList, { badgeVariant: badgeVariant, list: list })));
140
120
  };
141
- var SideMenu$1 = React.memo(SideMenu);var StyledContainerBox$1 = styled(Box)(templateObject_1$1 || (templateObject_1$1 = __makeTemplateObject(["\n position: relative;\n"], ["\n position: relative;\n"])));
142
- var StyledHeadContainerBox = styled(Box)(function (_a) {
143
- var theme = _a.theme;
144
- return theme.unstable_sx({
145
- display: { xs: 'none', sm: 'flex' },
146
- alignItems: 'center',
147
- opacity: 0.5,
148
- });
149
- });
150
- var StyledHeadIconContainerBox = styled(Box)(templateObject_2$1 || (templateObject_2$1 = __makeTemplateObject(["\n margin-right: 0.25rem;\n line-height: 0;\n"], ["\n margin-right: 0.25rem;\n line-height: 0;\n"])));
151
- var StyledHeadIcon = styled(Icon)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n font-size: 1rem;\n"], ["\n font-size: 1rem;\n"])));
152
- var StyledHeadTitleTypography = styled(Typography)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n font-size: 0.7rem;\n"], ["\n font-size: 0.7rem;\n"])));
153
- 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"])));
154
- 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"])));
155
- var templateObject_1$1, templateObject_2$1, templateObject_3, templateObject_4, templateObject_5, templateObject_6;var Title = function (_a) {
121
+ var SideMenu = React.memo(SideMenu$1);const StyledContainerBox$1 = styled(Box) `
122
+ position: relative;
123
+ `;
124
+ const StyledHeadContainerBox = styled(Box)(({ theme }) => theme.unstable_sx({
125
+ display: { xs: 'none', sm: 'flex' },
126
+ alignItems: 'center',
127
+ opacity: 0.5,
128
+ }));
129
+ const StyledHeadIconContainerBox = styled(Box) `
130
+ margin-right: 0.25rem;
131
+ line-height: 0;
132
+ `;
133
+ const StyledHeadIcon = styled(Icon) `
134
+ font-size: 1rem;
135
+ `;
136
+ const StyledHeadTitleTypography = styled(Typography) `
137
+ font-size: 0.7rem;
138
+ `;
139
+ const StyledTitleContainerDiv = styled('div') `
140
+ display: flex;
141
+ align-items: center;
142
+ font-size: 1rem;
143
+ `;
144
+ const StyledTitleIconContainerDiv = styled('div') `
145
+ flex-shrink: 0;
146
+ display: inline-flex;
147
+ margin-right: 0.3rem;
148
+ `;const Title$1 = ({ title, icon, headTitle, headIcon }) => {
156
149
  /********************************************************************************************************************
157
150
  * Variable
158
151
  * ******************************************************************************************************************/
159
- var title = _a.title, icon = _a.icon, headTitle = _a.headTitle, headIcon = _a.headIcon;
160
- var finalHeadIcon = headIcon
161
- ? headIcon.replace(/[A-Z]/g, function (letter, idx) { return "".concat(idx > 0 ? '_' : '').concat(letter.toLowerCase()); })
152
+ const finalHeadIcon = headIcon
153
+ ? headIcon.replace(/[A-Z]/g, (letter, idx) => `${idx > 0 ? '_' : ''}${letter.toLowerCase()}`)
162
154
  : undefined;
163
- var finalIcon = icon
164
- ? icon.replace(/[A-Z]/g, function (letter, idx) { return "".concat(idx > 0 ? '_' : '').concat(letter.toLowerCase()); })
155
+ const finalIcon = icon
156
+ ? icon.replace(/[A-Z]/g, (letter, idx) => `${idx > 0 ? '_' : ''}${letter.toLowerCase()}`)
165
157
  : undefined;
166
158
  /********************************************************************************************************************
167
159
  * Render
@@ -176,9 +168,9 @@ var templateObject_1$1, templateObject_2$1, templateObject_3, templateObject_4,
176
168
  React.createElement(Icon, { fontSize: 'small' }, finalIcon))),
177
169
  React.createElement("div", null, title))));
178
170
  };
179
- var Title$1 = React.memo(Title);var SIDE_MENU_WIDTH = 220;
180
- var SCREENS = ['xs', 'sm', 'md', 'lg', 'xl'];
181
- var _getNextScreen = function (screen) {
171
+ var Title = React.memo(Title$1);const SIDE_MENU_WIDTH = 220;
172
+ const SCREENS = ['xs', 'sm', 'md', 'lg', 'xl'];
173
+ const _getNextScreen = (screen) => {
182
174
  if (screen === 'xs')
183
175
  return 'sm';
184
176
  else if (screen === 'sm')
@@ -188,27 +180,25 @@ var _getNextScreen = function (screen) {
188
180
  else
189
181
  return 'xl';
190
182
  };
191
- var DefaultLayout = function (_a) {
183
+ const DefaultLayout = ({ children, logo, badgeVariant, menu, menuHideScreen = 'sm', appBarControl }) => {
192
184
  /********************************************************************************************************************
193
185
  * Use
194
186
  * ******************************************************************************************************************/
195
- var _b, _c, _d, _e, _f, _g;
196
- 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;
197
- var location = useLocation();
187
+ const location = useLocation();
198
188
  /********************************************************************************************************************
199
189
  * State
200
190
  * ******************************************************************************************************************/
201
- var _j = useState(false), isMobileOpen = _j[0], setIsMobileOpen = _j[1];
202
- var _k = useState({}), menuTitles = _k[0], setMenuTitles = _k[1];
191
+ const [isMobileOpen, setIsMobileOpen] = useState(false);
192
+ const [menuTitles, setMenuTitles] = useState({});
203
193
  /********************************************************************************************************************
204
194
  * Effect
205
195
  * ******************************************************************************************************************/
206
- useEffect(function () {
207
- var menuTitles = {};
196
+ useEffect(() => {
197
+ const menuTitles = {};
208
198
  if (menu) {
209
- menu.forEach(function (info) {
199
+ menu.forEach((info) => {
210
200
  if ((info.uri == null || info.uri === '') && info.items && info.items.length > 0) {
211
- info.items.map(function (subInfo) {
201
+ info.items.map((subInfo) => {
212
202
  menuTitles[subInfo.uri] = { name: subInfo.name, parentName: info.name, parentIcon: info.icon };
213
203
  });
214
204
  }
@@ -219,22 +209,22 @@ var DefaultLayout = function (_a) {
219
209
  }
220
210
  setMenuTitles(menuTitles);
221
211
  }, [menu]);
222
- useEffect(function () {
212
+ useEffect(() => {
223
213
  setIsMobileOpen(false);
224
214
  }, [location]);
225
215
  /********************************************************************************************************************
226
216
  * Function
227
217
  * ******************************************************************************************************************/
228
- var toggleIsMobileOpen = useCallback(function () {
229
- setIsMobileOpen(function (isMobileOpen) { return !isMobileOpen; });
218
+ const toggleIsMobileOpen = useCallback(() => {
219
+ setIsMobileOpen((isMobileOpen) => !isMobileOpen);
230
220
  }, []);
231
221
  /********************************************************************************************************************
232
222
  * Memo
233
223
  * ******************************************************************************************************************/
234
- var sideMenuTemporaryDrawerSx = useMemo(function () {
235
- var found = false;
224
+ const sideMenuTemporaryDrawerSx = useMemo(() => {
225
+ let found = false;
236
226
  return {
237
- display: SCREENS.reduce(function (res, screen) {
227
+ display: SCREENS.reduce((res, screen) => {
238
228
  if (screen === menuHideScreen) {
239
229
  found = true;
240
230
  res[screen] = 'block';
@@ -246,10 +236,10 @@ var DefaultLayout = function (_a) {
246
236
  }, {}),
247
237
  };
248
238
  }, [menuHideScreen]);
249
- var sideMenuPermanentDrawerSx = useMemo(function () {
250
- var found = false;
239
+ const sideMenuPermanentDrawerSx = useMemo(() => {
240
+ let found = false;
251
241
  return {
252
- display: SCREENS.reduce(function (res, screen) {
242
+ display: SCREENS.reduce((res, screen) => {
253
243
  if (screen === menuHideScreen) {
254
244
  found = true;
255
245
  res[screen] = 'none';
@@ -264,25 +254,25 @@ var DefaultLayout = function (_a) {
264
254
  /********************************************************************************************************************
265
255
  * Variable
266
256
  * ******************************************************************************************************************/
267
- var nextMenuScreen = _getNextScreen(menuHideScreen);
268
- var appBarSx = {
269
- width: (_b = {}, _b[nextMenuScreen] = "calc(100% - ".concat(SIDE_MENU_WIDTH, "px)"), _b),
270
- ml: (_c = {}, _c[nextMenuScreen] = "".concat(SIDE_MENU_WIDTH, "px"), _c),
257
+ const nextMenuScreen = _getNextScreen(menuHideScreen);
258
+ const appBarSx = {
259
+ width: { [nextMenuScreen]: `calc(100% - ${SIDE_MENU_WIDTH}px)` },
260
+ ml: { [nextMenuScreen]: `${SIDE_MENU_WIDTH}px` },
271
261
  };
272
- var appBarIconButtonSx = { mr: 2, display: (_d = {}, _d[nextMenuScreen] = 'none', _d) };
273
- var sideMenuContainerBoxSx = {
274
- width: (_e = {}, _e[nextMenuScreen] = SIDE_MENU_WIDTH, _e),
275
- flexShrink: (_f = {}, _f[nextMenuScreen] = 0, _f),
262
+ const appBarIconButtonSx = { mr: 2, display: { [nextMenuScreen]: 'none' } };
263
+ const sideMenuContainerBoxSx = {
264
+ width: { [nextMenuScreen]: SIDE_MENU_WIDTH },
265
+ flexShrink: { [nextMenuScreen]: 0 },
276
266
  };
277
- var mainBoxSx = {
278
- width: (_g = {}, _g[nextMenuScreen] = "calc(100% - ".concat(SIDE_MENU_WIDTH, "px)"), _g),
267
+ const mainBoxSx = {
268
+ width: { [nextMenuScreen]: `calc(100% - ${SIDE_MENU_WIDTH}px)` },
279
269
  flexGrow: 1,
280
270
  p: 2,
281
271
  display: 'flex',
282
272
  flexDirection: 'column',
283
273
  minHeight: '100vh',
284
274
  };
285
- var titleData = menuTitles[location.pathname];
275
+ const titleData = menuTitles[location.pathname];
286
276
  /********************************************************************************************************************
287
277
  * Render
288
278
  * ******************************************************************************************************************/
@@ -291,13 +281,13 @@ var DefaultLayout = function (_a) {
291
281
  React.createElement(Toolbar, null,
292
282
  React.createElement(IconButton, { color: 'inherit', "aria-label": 'open drawer', edge: 'start', onClick: toggleIsMobileOpen, sx: appBarIconButtonSx },
293
283
  React.createElement(Menu, null)),
294
- 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 }))),
284
+ React.createElement(Typography, { variant: 'h6', noWrap: true, component: 'div', sx: { flexGrow: 1 } }, titleData && (React.createElement(Title, { title: titleData.name, icon: titleData.icon, headTitle: titleData.parentName, headIcon: titleData.parentIcon }))),
295
285
  appBarControl)),
296
286
  React.createElement(Box, { component: 'nav', "aria-label": 'mailbox folders', sx: sideMenuContainerBoxSx },
297
287
  React.createElement(StyledSideMenuTemporaryDrawer, { variant: 'temporary', open: isMobileOpen, onClose: toggleIsMobileOpen, sx: sideMenuTemporaryDrawerSx, ModalProps: {
298
288
  keepMounted: true, // Better open performance on mobile.
299
- } }, menu && React.createElement(SideMenu$1, { logo: logo, badgeVariant: badgeVariant, list: menu })),
300
- React.createElement(StyledSideMenuPermanentDrawer, { variant: 'permanent', open: true, sx: sideMenuPermanentDrawerSx }, menu && React.createElement(SideMenu$1, { logo: logo, badgeVariant: badgeVariant, list: menu }))),
289
+ } }, menu && React.createElement(SideMenu, { logo: logo, badgeVariant: badgeVariant, list: menu })),
290
+ React.createElement(StyledSideMenuPermanentDrawer, { variant: 'permanent', open: true, sx: sideMenuPermanentDrawerSx }, menu && React.createElement(SideMenu, { logo: logo, badgeVariant: badgeVariant, list: menu }))),
301
291
  React.createElement(Box, { component: 'main', sx: mainBoxSx },
302
292
  React.createElement(Toolbar, null),
303
293
  React.createElement(StyledMainContentDiv, null, children))));
@@ -305,27 +295,24 @@ var DefaultLayout = function (_a) {
305
295
  /********************************************************************************************************************
306
296
  * Styled Components
307
297
  * ******************************************************************************************************************/
308
- var StyledContainerBox = styled(Box)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n display: flex;\n height: 100%;\n"], ["\n display: flex;\n height: 100%;\n"])));
309
- var StyledAppBar = styled(AppBar)(function (_a) {
310
- var theme = _a.theme;
311
- return theme.unstable_sx({
312
- backdropFilter: 'blur(20px)',
313
- backgroundColor: 'rgba(255, 255, 255, 0.7)',
314
- color: 'text.primary',
315
- borderBottom: 'thin solid #f5f5f5',
316
- });
317
- });
318
- var StyledSideMenuTemporaryDrawer = styled(Drawer)(function (_a) {
319
- var theme = _a.theme;
320
- return theme.unstable_sx({
321
- '& .MuiDrawer-paper': { boxSizing: 'border-box', width: SIDE_MENU_WIDTH },
322
- });
323
- });
324
- var StyledSideMenuPermanentDrawer = styled(Drawer)(function (_a) {
325
- var theme = _a.theme;
326
- return theme.unstable_sx({
327
- '& .MuiDrawer-paper': { boxSizing: 'border-box', width: SIDE_MENU_WIDTH },
328
- });
329
- });
330
- 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"])));
331
- var templateObject_1, templateObject_2;export{CardLayout,DefaultLayout};
298
+ const StyledContainerBox = styled(Box) `
299
+ display: flex;
300
+ height: 100%;
301
+ `;
302
+ const StyledAppBar = styled(AppBar)(({ theme }) => theme.unstable_sx({
303
+ backdropFilter: 'blur(20px)',
304
+ backgroundColor: 'rgba(255, 255, 255, 0.7)',
305
+ color: 'text.primary',
306
+ borderBottom: 'thin solid #f5f5f5',
307
+ }));
308
+ const StyledSideMenuTemporaryDrawer = styled(Drawer)(({ theme }) => theme.unstable_sx({
309
+ '& .MuiDrawer-paper': { boxSizing: 'border-box', width: SIDE_MENU_WIDTH },
310
+ }));
311
+ const StyledSideMenuPermanentDrawer = styled(Drawer)(({ theme }) => theme.unstable_sx({
312
+ '& .MuiDrawer-paper': { boxSizing: 'border-box', width: SIDE_MENU_WIDTH },
313
+ }));
314
+ const StyledMainContentDiv = styled('div') `
315
+ display: flex;
316
+ flex-direction: column;
317
+ flex: 1;
318
+ `;export{CardLayout,DefaultLayout};
package/dist/index.js CHANGED
@@ -6,73 +6,56 @@
6
6
  style.innerHTML = css;
7
7
  document.head.appendChild(style);
8
8
  return css;
9
- }insertStyle(".simplebar-track.simplebar-vertical{width:8px !important}.simplebar-track.simplebar-vertical .simplebar-scrollbar.simplebar-visible:before{opacity:.3 !important}.MuiButtonBase-root.MuiButton-root.MuiButton-outlined{padding:5px 15px 4px}.MuiButtonBase-root.MuiButton-root.MuiButton-outlined.MuiButton-sizeLarge{padding:7px 21px 6px}.MuiButtonBase-root.MuiButton-root.MuiButton-outlined.MuiButton-sizeSmall{padding:3px 9px 2px}.MuiButtonBase-root.MuiButton-root.MuiButton-contained{padding:6px 16px 5px}.MuiButtonBase-root.MuiButton-root.MuiButton-contained.MuiButton-sizeLarge{padding:8px 22px 7px}.MuiButtonBase-root.MuiButton-root.MuiButton-contained.MuiButton-sizeSmall{padding:4px 10px 3px}.MuiButtonBase-root.MuiButton-root.MuiButton-text{padding:6px 8px 5px}.MuiButtonBase-root.MuiButton-root.MuiButton-text.MuiButton-sizeLarge{padding:8px 11px 7px}.MuiButtonBase-root.MuiButton-root.MuiButton-text.MuiButton-sizeSmall{padding:4px 5px 3px}html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video,main,input,button,textarea,pre,select,a{font-family:\"Pretendard\",\"Apple Gothic\",\"Dotum\",sans-serif;margin:0;padding:0;border:0;vertical-align:top;box-sizing:border-box;word-break:keep-all;line-height:unset}*:before,*:after{box-sizing:border-box}");var CardLayout = function (_a) {
10
- var children = _a.children, _b = _a.backgroundColor, backgroundColor = _b === void 0 ? '#eff3f8' : _b;
9
+ }insertStyle(".simplebar-track.simplebar-vertical{width:8px !important}.simplebar-track.simplebar-vertical .simplebar-scrollbar.simplebar-visible:before{opacity:.3 !important}.MuiButtonBase-root.MuiButton-root.MuiButton-outlined{padding:5px 15px 4px}.MuiButtonBase-root.MuiButton-root.MuiButton-outlined.MuiButton-sizeLarge{padding:7px 21px 6px}.MuiButtonBase-root.MuiButton-root.MuiButton-outlined.MuiButton-sizeSmall{padding:3px 9px 2px}.MuiButtonBase-root.MuiButton-root.MuiButton-contained{padding:6px 16px 5px}.MuiButtonBase-root.MuiButton-root.MuiButton-contained.MuiButton-sizeLarge{padding:8px 22px 7px}.MuiButtonBase-root.MuiButton-root.MuiButton-contained.MuiButton-sizeSmall{padding:4px 10px 3px}.MuiButtonBase-root.MuiButton-root.MuiButton-text{padding:6px 8px 5px}.MuiButtonBase-root.MuiButton-root.MuiButton-text.MuiButton-sizeLarge{padding:8px 11px 7px}.MuiButtonBase-root.MuiButton-root.MuiButton-text.MuiButton-sizeSmall{padding:4px 5px 3px}html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video,main,input,button,textarea,pre,select,a{font-family:\"Pretendard\",\"Apple Gothic\",\"Dotum\",sans-serif;margin:0;padding:0;border:0;vertical-align:top;box-sizing:border-box;word-break:keep-all;line-height:unset}*:before,*:after{box-sizing:border-box}");const CardLayout = ({ children, backgroundColor = '#eff3f8' }) => {
11
10
  return (React.createElement(material.Grid, { container: true, direction: 'column', alignItems: 'center', justifyContent: 'center', bgcolor: backgroundColor, minHeight: '100vh' },
12
11
  React.createElement(material.Grid, null, children)));
13
- };/******************************************************************************
14
- Copyright (c) Microsoft Corporation.
15
-
16
- Permission to use, copy, modify, and/or distribute this software for any
17
- purpose with or without fee is hereby granted.
18
-
19
- THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
20
- REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
21
- AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
22
- INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
23
- LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
24
- OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
25
- PERFORMANCE OF THIS SOFTWARE.
26
- ***************************************************************************** */
27
- /* global Reflect, Promise, SuppressedError, Symbol, Iterator */
28
-
29
-
30
- var __assign = function() {
31
- __assign = Object.assign || function __assign(t) {
32
- for (var s, i = 1, n = arguments.length; i < n; i++) {
33
- s = arguments[i];
34
- for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
35
- }
36
- return t;
37
- };
38
- return __assign.apply(this, arguments);
39
- };
40
-
41
- function __makeTemplateObject(cooked, raw) {
42
- if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
43
- return cooked;
44
- }
45
- typeof SuppressedError === "function" ? SuppressedError : function (error, suppressed, message) {
46
- var e = new Error(message);
47
- return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
48
- };var StyledExpandMore = material.styled(iconsMaterial.ExpandMore)(templateObject_1$4 || (templateObject_1$4 = __makeTemplateObject(["\n margin-top: auto;\n margin-bottom: auto;\n @keyframes open {\n 0% {\n transform: rotate(0deg);\n }\n 100% {\n transform: rotate(180deg);\n }\n }\n @keyframes close {\n 0% {\n transform: rotate(180deg);\n }\n 100% {\n transform: rotate(0deg);\n }\n }\n"], ["\n margin-top: auto;\n margin-bottom: auto;\n @keyframes open {\n 0% {\n transform: rotate(0deg);\n }\n 100% {\n transform: rotate(180deg);\n }\n }\n @keyframes close {\n 0% {\n transform: rotate(180deg);\n }\n 100% {\n transform: rotate(0deg);\n }\n }\n"])));
49
- var StyledListItemIcon = material.styled(material.ListItemIcon)(templateObject_2$2 || (templateObject_2$2 = __makeTemplateObject(["\n min-width: 30px;\n"], ["\n min-width: 30px;\n"])));
50
- var templateObject_1$4, templateObject_2$2;var SideMenuListItem = function (_a) {
12
+ };const StyledExpandMore = material.styled(iconsMaterial.ExpandMore) `
13
+ margin-top: auto;
14
+ margin-bottom: auto;
15
+ @keyframes open {
16
+ 0% {
17
+ transform: rotate(0deg);
18
+ }
19
+ 100% {
20
+ transform: rotate(180deg);
21
+ }
22
+ }
23
+ @keyframes close {
24
+ 0% {
25
+ transform: rotate(180deg);
26
+ }
27
+ 100% {
28
+ transform: rotate(0deg);
29
+ }
30
+ }
31
+ `;
32
+ const StyledListItemIcon = material.styled(material.ListItemIcon) `
33
+ min-width: 30px;
34
+ `;const SideMenuListItem = ({ info, badgeVariant, expandedBackgroundColor }) => {
51
35
  /********************************************************************************************************************
52
36
  * Use
53
37
  * ******************************************************************************************************************/
54
- var info = _a.info, badgeVariant = _a.badgeVariant, expandedBackgroundColor = _a.expandedBackgroundColor;
55
- var location = reactRouter.useLocation();
56
- var navigate = reactRouter.useNavigate();
38
+ const location = reactRouter.useLocation();
39
+ const navigate = reactRouter.useNavigate();
57
40
  /********************************************************************************************************************
58
41
  * State
59
42
  * ******************************************************************************************************************/
60
- var _b = React.useState(false), isExpandable = _b[0], setIsExpandable = _b[1];
61
- var _c = React.useState(false), isExpand = _c[0], setIsExpand = _c[1];
43
+ const [isExpandable, setIsExpandable] = React.useState(false);
44
+ const [isExpand, setIsExpand] = React.useState(false);
62
45
  /********************************************************************************************************************
63
46
  * Effect
64
47
  * ******************************************************************************************************************/
65
- React.useEffect(function () {
48
+ React.useEffect(() => {
66
49
  setIsExpandable(!!info.items && info.items.length > 0);
67
- if (info.items && info.items.find(function (info) { return location.pathname === info.uri; })) {
50
+ if (info.items && info.items.find((info) => location.pathname === info.uri)) {
68
51
  setIsExpand(true);
69
52
  }
70
53
  // eslint-disable-next-line react-hooks/exhaustive-deps
71
54
  }, [info]);
72
- React.useEffect(function () {
55
+ React.useEffect(() => {
73
56
  if (isExpandable && isExpand != null) {
74
57
  if (info.uri !== location.pathname) {
75
- if (info.items && !info.items.find(function (info) { return location.pathname === info.uri; })) {
58
+ if (info.items && !info.items.find((info) => location.pathname === info.uri)) {
76
59
  if (isExpand) {
77
60
  setIsExpand(false);
78
61
  }
@@ -80,7 +63,7 @@ var templateObject_1$4, templateObject_2$2;var SideMenuListItem = function (_a)
80
63
  }
81
64
  }
82
65
  if (isExpandable && !isExpand) {
83
- if (info.items && info.items.find(function (info) { return location.pathname === info.uri; })) {
66
+ if (info.items && info.items.find((info) => location.pathname === info.uri)) {
84
67
  setIsExpand(true);
85
68
  }
86
69
  }
@@ -90,7 +73,7 @@ var templateObject_1$4, templateObject_2$2;var SideMenuListItem = function (_a)
90
73
  * Render
91
74
  * ******************************************************************************************************************/
92
75
  return (React.createElement(React.Fragment, null,
93
- React.createElement(material.ListItemButton, { onClick: isExpandable ? function () { return setIsExpand(function (old) { return !old; }); } : function () { return info.uri && navigate(info.uri); }, selected: isExpandable ? false : info.uri === location.pathname, style: {
76
+ React.createElement(material.ListItemButton, { onClick: isExpandable ? () => setIsExpand((old) => !old) : () => info.uri && navigate(info.uri), selected: isExpandable ? false : info.uri === location.pathname, style: {
94
77
  backgroundColor: isExpandable && isExpand ? expandedBackgroundColor : undefined,
95
78
  } },
96
79
  React.createElement(StyledListItemIcon, null, info.icon && React.createElement(material.Icon, { fontSize: 'small' }, info.icon)),
@@ -99,69 +82,78 @@ var templateObject_1$4, templateObject_2$2;var SideMenuListItem = function (_a)
99
82
  } },
100
83
  React.createElement("div", null, info.name))) : (info.name)),
101
84
  isExpandable && (React.createElement(StyledExpandMore, { sx: {
102
- animation: "".concat(isExpand ? 'open' : 'close', " 0.1s linear"),
103
- transform: "rotate(".concat(isExpand ? 180 : 0, "deg)"),
85
+ animation: `${isExpand ? 'open' : 'close'} 0.1s linear`,
86
+ transform: `rotate(${isExpand ? 180 : 0}deg)`,
104
87
  } }))),
105
88
  isExpandable && (React.createElement(material.Collapse, { in: isExpand, style: { backgroundColor: isExpand ? expandedBackgroundColor : undefined } }, info.items &&
106
- info.items.map(function (subInfo, idx) { return React.createElement(SideMenuListItem, { key: idx, badgeVariant: badgeVariant, info: subInfo }); })))));
107
- };var StyledList = material.styled(material.List)(templateObject_1$3 || (templateObject_1$3 = __makeTemplateObject(["\n padding: 0;\n"], ["\n padding: 0;\n"])));
108
- var templateObject_1$3;var SideMenuList = function (_a) {
89
+ info.items.map((subInfo, idx) => React.createElement(SideMenuListItem, { key: idx, badgeVariant: badgeVariant, info: subInfo }))))));
90
+ };const StyledList = material.styled(material.List) `
91
+ padding: 0;
92
+ `;const SideMenuList = ({ list, badgeVariant }) => {
109
93
  /********************************************************************************************************************
110
94
  * Use
111
95
  * ******************************************************************************************************************/
112
- var list = _a.list, badgeVariant = _a.badgeVariant;
113
- var theme = material.useTheme();
96
+ const theme = material.useTheme();
114
97
  /********************************************************************************************************************
115
98
  * Variable
116
99
  * ******************************************************************************************************************/
117
- var finalList = list.map(function (item) { return (__assign(__assign({}, item), { icon: item.icon
118
- ? item.icon.replace(/[A-Z]/g, function (letter, idx) { return "".concat(idx > 0 ? '_' : '').concat(letter.toLowerCase()); })
119
- : undefined })); });
120
- var expandedBackgroundColor = material.alpha(theme.palette.primary.main, theme.palette.action.selectedOpacity / 2);
100
+ const finalList = list.map((item) => (Object.assign(Object.assign({}, item), { icon: item.icon
101
+ ? item.icon.replace(/[A-Z]/g, (letter, idx) => `${idx > 0 ? '_' : ''}${letter.toLowerCase()}`)
102
+ : undefined })));
103
+ const expandedBackgroundColor = material.alpha(theme.palette.primary.main, theme.palette.action.selectedOpacity / 2);
121
104
  /********************************************************************************************************************
122
105
  * Render
123
106
  * ******************************************************************************************************************/
124
- return (React.createElement(StyledList, null, finalList.map(function (info, idx) { return (React.createElement(SideMenuListItem, { key: idx, info: info, badgeVariant: badgeVariant, expandedBackgroundColor: expandedBackgroundColor })); })));
107
+ return (React.createElement(StyledList, null, finalList.map((info, idx) => (React.createElement(SideMenuListItem, { key: idx, info: info, badgeVariant: badgeVariant, expandedBackgroundColor: expandedBackgroundColor })))));
125
108
  };
126
- var SideMenuList$1 = React.memo(SideMenuList);var StyledSimpleBar = material.styled(SimpleBar)(templateObject_1$2 || (templateObject_1$2 = __makeTemplateObject(["\n max-height: 100%;\n"], ["\n max-height: 100%;\n"])));
127
- var StyledLogoContainerBox = material.styled(material.Box)(function (_a) {
128
- var theme = _a.theme;
129
- return theme.unstable_sx({
130
- borderBottom: 'thin solid #f5f5f5',
131
- color: 'text.primary',
132
- });
133
- });
134
- var templateObject_1$2;var SideMenu = function (_a) {
135
- var logo = _a.logo, badgeVariant = _a.badgeVariant, list = _a.list;
109
+ var SideMenuList$1 = React.memo(SideMenuList);const StyledSimpleBar = material.styled(SimpleBar) `
110
+ max-height: 100%;
111
+ `;
112
+ const StyledLogoContainerBox = material.styled(material.Box)(({ theme }) => theme.unstable_sx({
113
+ borderBottom: 'thin solid #f5f5f5',
114
+ color: 'text.primary',
115
+ }));const SideMenu = ({ logo, badgeVariant, list }) => {
136
116
  return (React.createElement(StyledSimpleBar, null,
137
117
  React.createElement(StyledLogoContainerBox, null,
138
118
  React.createElement(material.Toolbar, null, logo)),
139
119
  list && React.createElement(SideMenuList$1, { badgeVariant: badgeVariant, list: list })));
140
120
  };
141
- var SideMenu$1 = React.memo(SideMenu);var StyledContainerBox$1 = material.styled(material.Box)(templateObject_1$1 || (templateObject_1$1 = __makeTemplateObject(["\n position: relative;\n"], ["\n position: relative;\n"])));
142
- var StyledHeadContainerBox = material.styled(material.Box)(function (_a) {
143
- var theme = _a.theme;
144
- return theme.unstable_sx({
145
- display: { xs: 'none', sm: 'flex' },
146
- alignItems: 'center',
147
- opacity: 0.5,
148
- });
149
- });
150
- var StyledHeadIconContainerBox = material.styled(material.Box)(templateObject_2$1 || (templateObject_2$1 = __makeTemplateObject(["\n margin-right: 0.25rem;\n line-height: 0;\n"], ["\n margin-right: 0.25rem;\n line-height: 0;\n"])));
151
- var StyledHeadIcon = material.styled(material.Icon)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n font-size: 1rem;\n"], ["\n font-size: 1rem;\n"])));
152
- var StyledHeadTitleTypography = material.styled(material.Typography)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n font-size: 0.7rem;\n"], ["\n font-size: 0.7rem;\n"])));
153
- 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"])));
154
- 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"])));
155
- var templateObject_1$1, templateObject_2$1, templateObject_3, templateObject_4, templateObject_5, templateObject_6;var Title = function (_a) {
121
+ var SideMenu$1 = React.memo(SideMenu);const StyledContainerBox$1 = material.styled(material.Box) `
122
+ position: relative;
123
+ `;
124
+ const StyledHeadContainerBox = material.styled(material.Box)(({ theme }) => theme.unstable_sx({
125
+ display: { xs: 'none', sm: 'flex' },
126
+ alignItems: 'center',
127
+ opacity: 0.5,
128
+ }));
129
+ const StyledHeadIconContainerBox = material.styled(material.Box) `
130
+ margin-right: 0.25rem;
131
+ line-height: 0;
132
+ `;
133
+ const StyledHeadIcon = material.styled(material.Icon) `
134
+ font-size: 1rem;
135
+ `;
136
+ const StyledHeadTitleTypography = material.styled(material.Typography) `
137
+ font-size: 0.7rem;
138
+ `;
139
+ const StyledTitleContainerDiv = material.styled('div') `
140
+ display: flex;
141
+ align-items: center;
142
+ font-size: 1rem;
143
+ `;
144
+ const StyledTitleIconContainerDiv = material.styled('div') `
145
+ flex-shrink: 0;
146
+ display: inline-flex;
147
+ margin-right: 0.3rem;
148
+ `;const Title = ({ title, icon, headTitle, headIcon }) => {
156
149
  /********************************************************************************************************************
157
150
  * Variable
158
151
  * ******************************************************************************************************************/
159
- var title = _a.title, icon = _a.icon, headTitle = _a.headTitle, headIcon = _a.headIcon;
160
- var finalHeadIcon = headIcon
161
- ? headIcon.replace(/[A-Z]/g, function (letter, idx) { return "".concat(idx > 0 ? '_' : '').concat(letter.toLowerCase()); })
152
+ const finalHeadIcon = headIcon
153
+ ? headIcon.replace(/[A-Z]/g, (letter, idx) => `${idx > 0 ? '_' : ''}${letter.toLowerCase()}`)
162
154
  : undefined;
163
- var finalIcon = icon
164
- ? icon.replace(/[A-Z]/g, function (letter, idx) { return "".concat(idx > 0 ? '_' : '').concat(letter.toLowerCase()); })
155
+ const finalIcon = icon
156
+ ? icon.replace(/[A-Z]/g, (letter, idx) => `${idx > 0 ? '_' : ''}${letter.toLowerCase()}`)
165
157
  : undefined;
166
158
  /********************************************************************************************************************
167
159
  * Render
@@ -176,9 +168,9 @@ var templateObject_1$1, templateObject_2$1, templateObject_3, templateObject_4,
176
168
  React.createElement(material.Icon, { fontSize: 'small' }, finalIcon))),
177
169
  React.createElement("div", null, title))));
178
170
  };
179
- var Title$1 = React.memo(Title);var SIDE_MENU_WIDTH = 220;
180
- var SCREENS = ['xs', 'sm', 'md', 'lg', 'xl'];
181
- var _getNextScreen = function (screen) {
171
+ var Title$1 = React.memo(Title);const SIDE_MENU_WIDTH = 220;
172
+ const SCREENS = ['xs', 'sm', 'md', 'lg', 'xl'];
173
+ const _getNextScreen = (screen) => {
182
174
  if (screen === 'xs')
183
175
  return 'sm';
184
176
  else if (screen === 'sm')
@@ -188,27 +180,25 @@ var _getNextScreen = function (screen) {
188
180
  else
189
181
  return 'xl';
190
182
  };
191
- var DefaultLayout = function (_a) {
183
+ const DefaultLayout = ({ children, logo, badgeVariant, menu, menuHideScreen = 'sm', appBarControl }) => {
192
184
  /********************************************************************************************************************
193
185
  * Use
194
186
  * ******************************************************************************************************************/
195
- var _b, _c, _d, _e, _f, _g;
196
- 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;
197
- var location = reactRouter.useLocation();
187
+ const location = reactRouter.useLocation();
198
188
  /********************************************************************************************************************
199
189
  * State
200
190
  * ******************************************************************************************************************/
201
- var _j = React.useState(false), isMobileOpen = _j[0], setIsMobileOpen = _j[1];
202
- var _k = React.useState({}), menuTitles = _k[0], setMenuTitles = _k[1];
191
+ const [isMobileOpen, setIsMobileOpen] = React.useState(false);
192
+ const [menuTitles, setMenuTitles] = React.useState({});
203
193
  /********************************************************************************************************************
204
194
  * Effect
205
195
  * ******************************************************************************************************************/
206
- React.useEffect(function () {
207
- var menuTitles = {};
196
+ React.useEffect(() => {
197
+ const menuTitles = {};
208
198
  if (menu) {
209
- menu.forEach(function (info) {
199
+ menu.forEach((info) => {
210
200
  if ((info.uri == null || info.uri === '') && info.items && info.items.length > 0) {
211
- info.items.map(function (subInfo) {
201
+ info.items.map((subInfo) => {
212
202
  menuTitles[subInfo.uri] = { name: subInfo.name, parentName: info.name, parentIcon: info.icon };
213
203
  });
214
204
  }
@@ -219,22 +209,22 @@ var DefaultLayout = function (_a) {
219
209
  }
220
210
  setMenuTitles(menuTitles);
221
211
  }, [menu]);
222
- React.useEffect(function () {
212
+ React.useEffect(() => {
223
213
  setIsMobileOpen(false);
224
214
  }, [location]);
225
215
  /********************************************************************************************************************
226
216
  * Function
227
217
  * ******************************************************************************************************************/
228
- var toggleIsMobileOpen = React.useCallback(function () {
229
- setIsMobileOpen(function (isMobileOpen) { return !isMobileOpen; });
218
+ const toggleIsMobileOpen = React.useCallback(() => {
219
+ setIsMobileOpen((isMobileOpen) => !isMobileOpen);
230
220
  }, []);
231
221
  /********************************************************************************************************************
232
222
  * Memo
233
223
  * ******************************************************************************************************************/
234
- var sideMenuTemporaryDrawerSx = React.useMemo(function () {
235
- var found = false;
224
+ const sideMenuTemporaryDrawerSx = React.useMemo(() => {
225
+ let found = false;
236
226
  return {
237
- display: SCREENS.reduce(function (res, screen) {
227
+ display: SCREENS.reduce((res, screen) => {
238
228
  if (screen === menuHideScreen) {
239
229
  found = true;
240
230
  res[screen] = 'block';
@@ -246,10 +236,10 @@ var DefaultLayout = function (_a) {
246
236
  }, {}),
247
237
  };
248
238
  }, [menuHideScreen]);
249
- var sideMenuPermanentDrawerSx = React.useMemo(function () {
250
- var found = false;
239
+ const sideMenuPermanentDrawerSx = React.useMemo(() => {
240
+ let found = false;
251
241
  return {
252
- display: SCREENS.reduce(function (res, screen) {
242
+ display: SCREENS.reduce((res, screen) => {
253
243
  if (screen === menuHideScreen) {
254
244
  found = true;
255
245
  res[screen] = 'none';
@@ -264,25 +254,25 @@ var DefaultLayout = function (_a) {
264
254
  /********************************************************************************************************************
265
255
  * Variable
266
256
  * ******************************************************************************************************************/
267
- var nextMenuScreen = _getNextScreen(menuHideScreen);
268
- var appBarSx = {
269
- width: (_b = {}, _b[nextMenuScreen] = "calc(100% - ".concat(SIDE_MENU_WIDTH, "px)"), _b),
270
- ml: (_c = {}, _c[nextMenuScreen] = "".concat(SIDE_MENU_WIDTH, "px"), _c),
257
+ const nextMenuScreen = _getNextScreen(menuHideScreen);
258
+ const appBarSx = {
259
+ width: { [nextMenuScreen]: `calc(100% - ${SIDE_MENU_WIDTH}px)` },
260
+ ml: { [nextMenuScreen]: `${SIDE_MENU_WIDTH}px` },
271
261
  };
272
- var appBarIconButtonSx = { mr: 2, display: (_d = {}, _d[nextMenuScreen] = 'none', _d) };
273
- var sideMenuContainerBoxSx = {
274
- width: (_e = {}, _e[nextMenuScreen] = SIDE_MENU_WIDTH, _e),
275
- flexShrink: (_f = {}, _f[nextMenuScreen] = 0, _f),
262
+ const appBarIconButtonSx = { mr: 2, display: { [nextMenuScreen]: 'none' } };
263
+ const sideMenuContainerBoxSx = {
264
+ width: { [nextMenuScreen]: SIDE_MENU_WIDTH },
265
+ flexShrink: { [nextMenuScreen]: 0 },
276
266
  };
277
- var mainBoxSx = {
278
- width: (_g = {}, _g[nextMenuScreen] = "calc(100% - ".concat(SIDE_MENU_WIDTH, "px)"), _g),
267
+ const mainBoxSx = {
268
+ width: { [nextMenuScreen]: `calc(100% - ${SIDE_MENU_WIDTH}px)` },
279
269
  flexGrow: 1,
280
270
  p: 2,
281
271
  display: 'flex',
282
272
  flexDirection: 'column',
283
273
  minHeight: '100vh',
284
274
  };
285
- var titleData = menuTitles[location.pathname];
275
+ const titleData = menuTitles[location.pathname];
286
276
  /********************************************************************************************************************
287
277
  * Render
288
278
  * ******************************************************************************************************************/
@@ -305,27 +295,24 @@ var DefaultLayout = function (_a) {
305
295
  /********************************************************************************************************************
306
296
  * Styled Components
307
297
  * ******************************************************************************************************************/
308
- 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"])));
309
- var StyledAppBar = material.styled(material.AppBar)(function (_a) {
310
- var theme = _a.theme;
311
- return theme.unstable_sx({
312
- backdropFilter: 'blur(20px)',
313
- backgroundColor: 'rgba(255, 255, 255, 0.7)',
314
- color: 'text.primary',
315
- borderBottom: 'thin solid #f5f5f5',
316
- });
317
- });
318
- var StyledSideMenuTemporaryDrawer = material.styled(material.Drawer)(function (_a) {
319
- var theme = _a.theme;
320
- return theme.unstable_sx({
321
- '& .MuiDrawer-paper': { boxSizing: 'border-box', width: SIDE_MENU_WIDTH },
322
- });
323
- });
324
- var StyledSideMenuPermanentDrawer = material.styled(material.Drawer)(function (_a) {
325
- var theme = _a.theme;
326
- return theme.unstable_sx({
327
- '& .MuiDrawer-paper': { boxSizing: 'border-box', width: SIDE_MENU_WIDTH },
328
- });
329
- });
330
- 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"])));
331
- var templateObject_1, templateObject_2;exports.CardLayout=CardLayout;exports.DefaultLayout=DefaultLayout;
298
+ const StyledContainerBox = material.styled(material.Box) `
299
+ display: flex;
300
+ height: 100%;
301
+ `;
302
+ const StyledAppBar = material.styled(material.AppBar)(({ theme }) => theme.unstable_sx({
303
+ backdropFilter: 'blur(20px)',
304
+ backgroundColor: 'rgba(255, 255, 255, 0.7)',
305
+ color: 'text.primary',
306
+ borderBottom: 'thin solid #f5f5f5',
307
+ }));
308
+ const StyledSideMenuTemporaryDrawer = material.styled(material.Drawer)(({ theme }) => theme.unstable_sx({
309
+ '& .MuiDrawer-paper': { boxSizing: 'border-box', width: SIDE_MENU_WIDTH },
310
+ }));
311
+ const StyledSideMenuPermanentDrawer = material.styled(material.Drawer)(({ theme }) => theme.unstable_sx({
312
+ '& .MuiDrawer-paper': { boxSizing: 'border-box', width: SIDE_MENU_WIDTH },
313
+ }));
314
+ const StyledMainContentDiv = material.styled('div') `
315
+ display: flex;
316
+ flex-direction: column;
317
+ flex: 1;
318
+ `;exports.CardLayout=CardLayout;exports.DefaultLayout=DefaultLayout;
package/package.json CHANGED
@@ -1,12 +1,19 @@
1
1
  {
2
2
  "name": "@pdg/react-admin-layout",
3
3
  "title": "React Admin Layout",
4
- "version": "1.0.47",
5
4
  "description": "Admin Layout for React",
5
+ "version": "1.0.49",
6
6
  "type": "module",
7
- "types": "dist/index.d.ts",
8
- "main": "dist/index.js",
9
- "module": "dist/index.esm.js",
7
+ "main": "./dist/index.js",
8
+ "module": "./dist/index.esm.js",
9
+ "types": "./dist/index.d.ts",
10
+ "exports": {
11
+ ".": {
12
+ "types": "./dist/index.d.ts",
13
+ "import": "./dist/index.esm.js",
14
+ "require": "./dist/index.js"
15
+ }
16
+ },
10
17
  "repository": {
11
18
  "type": "git",
12
19
  "url": "git+https://github.com/parkdigy/react-admin-layout.git",
@@ -22,12 +29,17 @@
22
29
  ],
23
30
  "scripts": {
24
31
  "dev": "cd examples && npm run dev",
25
- "dev-prd-lib": "cd examples && npm run dev-prd-lib",
26
- "build": "rollup -c --bundleConfigAsCjs",
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",
32
+ "watchman:del": "watchman watch-del \"${PWD}\" ; watchman watch-project \"${PWD}\"",
33
+ "build": "npm run watchman:del && npm run lint && rollup -c --bundleConfigAsCjs",
34
+ "git:commit": "node .git-commit.cjs",
35
+ "git:push": "git push",
36
+ "git:commit:push": "npm run git:commit && npm run git:push",
37
+ "git:merge:mirror": "node .git-merge.cjs mirror main",
38
+ "reset:gitignore": "git rm -r --cached . && git add .",
39
+ "pub": "npm i && npm run build && npm publish --access=public && rm ./.git/hooks/pre-commit",
29
40
  "lint": "eslint './src/**/*.{ts,tsx}'",
30
- "reinstall-module": "rm -rf node_modules && rm -f package-lock.json && npm i"
41
+ "reinstall": "npm run reinstall:module",
42
+ "reinstall:module": "rm -rf node_modules && rm -f package-lock.json && npm i"
31
43
  },
32
44
  "author": "YOUNG CHUL PARK",
33
45
  "license": "MIT",
@@ -46,34 +58,39 @@
46
58
  "react-dom": ">=17.0.0"
47
59
  },
48
60
  "dependencies": {
49
- "@emotion/react": "^11.14.0",
50
- "@emotion/styled": "^11.14.0",
51
- "@mui/icons-material": "^7.1.0",
52
- "@mui/material": "^7.1.0",
53
- "react-router": "^7.6.1",
54
- "simplebar-react": "^3.3.1"
61
+ "@emotion/react": "11.14.0",
62
+ "@emotion/styled": "11.14.1",
63
+ "@mui/icons-material": "7.3.6",
64
+ "@mui/material": "7.3.6",
65
+ "react-router": "7.10.1",
66
+ "simplebar-react": "3.3.2"
55
67
  },
56
68
  "devDependencies": {
57
- "@eslint/js": "^9.28.0",
58
- "@rollup/plugin-commonjs": "^28.0.3",
59
- "@rollup/plugin-eslint": "^9.0.5",
60
- "@rollup/plugin-node-resolve": "^16.0.1",
61
- "@types/node": "^22.15.29",
62
- "@types/react": "^19.1.6",
63
- "@typescript-eslint/parser": "^8.33.0",
64
- "eslint": "9.28.0",
65
- "eslint-config-prettier": "^10.1.5",
66
- "eslint-plugin-prettier": "^5.4.1",
67
- "eslint-plugin-react": "^7.37.5",
68
- "eslint-plugin-react-hooks": "^5.2.0",
69
- "prettier": "^3.5.3",
70
- "rollup": "^4.41.1",
71
- "rollup-plugin-delete": "^2.2.0",
72
- "rollup-plugin-peer-deps-external": "^2.2.4",
73
- "rollup-plugin-sass": "^1.15.2",
74
- "rollup-plugin-typescript2": "^0.36.0",
75
- "sass": "^1.89.1",
76
- "typescript": "^5.8.3",
77
- "typescript-eslint": "^8.33.0"
69
+ "@eslint/js": "9.39.1",
70
+ "@rollup/plugin-commonjs": "29.0.0",
71
+ "@rollup/plugin-node-resolve": "16.0.3",
72
+ "@types/jest": "29.5.14",
73
+ "@types/node": "^22.19.2",
74
+ "@types/react": "19.2.7",
75
+ "@typescript-eslint/parser": "8.49.0",
76
+ "eslint": "9.39.1",
77
+ "eslint-config-prettier": "10.1.8",
78
+ "eslint-plugin-prettier": "5.5.4",
79
+ "eslint-plugin-react": "7.37.5",
80
+ "eslint-plugin-react-hooks": "5.2.0",
81
+ "eslint-plugin-react-refresh": "0.4.24",
82
+ "globals": "^16.5.0",
83
+ "jest": "29.7.0",
84
+ "prettier": "3.7.4",
85
+ "rollup": "4.53.3",
86
+ "rollup-plugin-delete": "2.2.0",
87
+ "rollup-plugin-peer-deps-external": "2.2.4",
88
+ "rollup-plugin-sass": "1.15.3",
89
+ "rollup-plugin-typescript2": "0.36.0",
90
+ "sass": "1.95.1",
91
+ "ts-jest": "29.4.6",
92
+ "ts-node": "10.9.2",
93
+ "typescript": "5.9.3",
94
+ "typescript-eslint": "^8.49.0"
78
95
  }
79
96
  }