@pdg/react-admin-layout 1.0.48 → 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.
- package/README.md +2 -24
- package/dist/index.esm.js +10 -10
- package/package.json +49 -37
package/README.md
CHANGED
|
@@ -1,30 +1,8 @@
|
|
|
1
1
|
# @pdg/react-admin-layout
|
|
2
2
|
|
|
3
|
-
|
|
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
|
@@ -89,7 +89,7 @@ const StyledListItemIcon = styled(ListItemIcon) `
|
|
|
89
89
|
info.items.map((subInfo, idx) => React.createElement(SideMenuListItem, { key: idx, badgeVariant: badgeVariant, info: subInfo }))))));
|
|
90
90
|
};const StyledList = styled(List) `
|
|
91
91
|
padding: 0;
|
|
92
|
-
`;const SideMenuList = ({ list, badgeVariant }) => {
|
|
92
|
+
`;const SideMenuList$1 = ({ list, badgeVariant }) => {
|
|
93
93
|
/********************************************************************************************************************
|
|
94
94
|
* Use
|
|
95
95
|
* ******************************************************************************************************************/
|
|
@@ -106,19 +106,19 @@ const StyledListItemIcon = styled(ListItemIcon) `
|
|
|
106
106
|
* ******************************************************************************************************************/
|
|
107
107
|
return (React.createElement(StyledList, null, finalList.map((info, idx) => (React.createElement(SideMenuListItem, { key: idx, info: info, badgeVariant: badgeVariant, expandedBackgroundColor: expandedBackgroundColor })))));
|
|
108
108
|
};
|
|
109
|
-
var SideMenuList
|
|
109
|
+
var SideMenuList = React.memo(SideMenuList$1);const StyledSimpleBar = styled(SimpleBar) `
|
|
110
110
|
max-height: 100%;
|
|
111
111
|
`;
|
|
112
112
|
const StyledLogoContainerBox = styled(Box)(({ theme }) => theme.unstable_sx({
|
|
113
113
|
borderBottom: 'thin solid #f5f5f5',
|
|
114
114
|
color: 'text.primary',
|
|
115
|
-
}));const SideMenu = ({ logo, badgeVariant, list }) => {
|
|
115
|
+
}));const SideMenu$1 = ({ logo, badgeVariant, list }) => {
|
|
116
116
|
return (React.createElement(StyledSimpleBar, null,
|
|
117
117
|
React.createElement(StyledLogoContainerBox, null,
|
|
118
118
|
React.createElement(Toolbar, null, logo)),
|
|
119
|
-
list && React.createElement(SideMenuList
|
|
119
|
+
list && React.createElement(SideMenuList, { badgeVariant: badgeVariant, list: list })));
|
|
120
120
|
};
|
|
121
|
-
var SideMenu
|
|
121
|
+
var SideMenu = React.memo(SideMenu$1);const StyledContainerBox$1 = styled(Box) `
|
|
122
122
|
position: relative;
|
|
123
123
|
`;
|
|
124
124
|
const StyledHeadContainerBox = styled(Box)(({ theme }) => theme.unstable_sx({
|
|
@@ -145,7 +145,7 @@ const StyledTitleIconContainerDiv = styled('div') `
|
|
|
145
145
|
flex-shrink: 0;
|
|
146
146
|
display: inline-flex;
|
|
147
147
|
margin-right: 0.3rem;
|
|
148
|
-
`;const Title = ({ title, icon, headTitle, headIcon }) => {
|
|
148
|
+
`;const Title$1 = ({ title, icon, headTitle, headIcon }) => {
|
|
149
149
|
/********************************************************************************************************************
|
|
150
150
|
* Variable
|
|
151
151
|
* ******************************************************************************************************************/
|
|
@@ -168,7 +168,7 @@ const StyledTitleIconContainerDiv = styled('div') `
|
|
|
168
168
|
React.createElement(Icon, { fontSize: 'small' }, finalIcon))),
|
|
169
169
|
React.createElement("div", null, title))));
|
|
170
170
|
};
|
|
171
|
-
var Title
|
|
171
|
+
var Title = React.memo(Title$1);const SIDE_MENU_WIDTH = 220;
|
|
172
172
|
const SCREENS = ['xs', 'sm', 'md', 'lg', 'xl'];
|
|
173
173
|
const _getNextScreen = (screen) => {
|
|
174
174
|
if (screen === 'xs')
|
|
@@ -281,13 +281,13 @@ const DefaultLayout = ({ children, logo, badgeVariant, menu, menuHideScreen = 's
|
|
|
281
281
|
React.createElement(Toolbar, null,
|
|
282
282
|
React.createElement(IconButton, { color: 'inherit', "aria-label": 'open drawer', edge: 'start', onClick: toggleIsMobileOpen, sx: appBarIconButtonSx },
|
|
283
283
|
React.createElement(Menu, null)),
|
|
284
|
-
React.createElement(Typography, { variant: 'h6', noWrap: true, component: 'div', sx: { flexGrow: 1 } }, titleData && (React.createElement(Title
|
|
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 }))),
|
|
285
285
|
appBarControl)),
|
|
286
286
|
React.createElement(Box, { component: 'nav', "aria-label": 'mailbox folders', sx: sideMenuContainerBoxSx },
|
|
287
287
|
React.createElement(StyledSideMenuTemporaryDrawer, { variant: 'temporary', open: isMobileOpen, onClose: toggleIsMobileOpen, sx: sideMenuTemporaryDrawerSx, ModalProps: {
|
|
288
288
|
keepMounted: true, // Better open performance on mobile.
|
|
289
|
-
} }, menu && React.createElement(SideMenu
|
|
290
|
-
React.createElement(StyledSideMenuPermanentDrawer, { variant: 'permanent', open: true, sx: sideMenuPermanentDrawerSx }, menu && React.createElement(SideMenu
|
|
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 }))),
|
|
291
291
|
React.createElement(Box, { component: 'main', sx: mainBoxSx },
|
|
292
292
|
React.createElement(Toolbar, null),
|
|
293
293
|
React.createElement(StyledMainContentDiv, null, children))));
|
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.48",
|
|
5
4
|
"description": "Admin Layout for React",
|
|
5
|
+
"version": "1.0.49",
|
|
6
6
|
"type": "module",
|
|
7
|
-
"
|
|
8
|
-
"
|
|
9
|
-
"
|
|
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,17 +29,17 @@
|
|
|
22
29
|
],
|
|
23
30
|
"scripts": {
|
|
24
31
|
"dev": "cd examples && npm run dev",
|
|
25
|
-
"
|
|
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",
|
|
29
34
|
"git:commit": "node .git-commit.cjs",
|
|
30
35
|
"git:push": "git push",
|
|
31
36
|
"git:commit:push": "npm run git:commit && npm run git:push",
|
|
37
|
+
"git:merge:mirror": "node .git-merge.cjs mirror main",
|
|
32
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",
|
|
40
|
+
"lint": "eslint './src/**/*.{ts,tsx}'",
|
|
33
41
|
"reinstall": "npm run reinstall:module",
|
|
34
|
-
"reinstall:module": "rm -rf node_modules && rm -f package-lock.json && npm i"
|
|
35
|
-
"lint": "eslint './src/**/*.{ts,tsx}'"
|
|
42
|
+
"reinstall:module": "rm -rf node_modules && rm -f package-lock.json && npm i"
|
|
36
43
|
},
|
|
37
44
|
"author": "YOUNG CHUL PARK",
|
|
38
45
|
"license": "MIT",
|
|
@@ -51,34 +58,39 @@
|
|
|
51
58
|
"react-dom": ">=17.0.0"
|
|
52
59
|
},
|
|
53
60
|
"dependencies": {
|
|
54
|
-
"@emotion/react": "
|
|
55
|
-
"@emotion/styled": "
|
|
56
|
-
"@mui/icons-material": "
|
|
57
|
-
"@mui/material": "
|
|
58
|
-
"react-router": "
|
|
59
|
-
"simplebar-react": "
|
|
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"
|
|
60
67
|
},
|
|
61
68
|
"devDependencies": {
|
|
62
|
-
"@eslint/js": "
|
|
63
|
-
"@rollup/plugin-commonjs": "
|
|
64
|
-
"@rollup/plugin-
|
|
65
|
-
"@
|
|
66
|
-
"@types/node": "^22.
|
|
67
|
-
"@types/react": "
|
|
68
|
-
"@typescript-eslint/parser": "
|
|
69
|
-
"eslint": "9.
|
|
70
|
-
"eslint-config-prettier": "
|
|
71
|
-
"eslint-plugin-prettier": "
|
|
72
|
-
"eslint-plugin-react": "
|
|
73
|
-
"eslint-plugin-react-hooks": "
|
|
74
|
-
"
|
|
75
|
-
"
|
|
76
|
-
"
|
|
77
|
-
"
|
|
78
|
-
"rollup
|
|
79
|
-
"rollup-plugin-
|
|
80
|
-
"
|
|
81
|
-
"
|
|
82
|
-
"
|
|
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"
|
|
83
95
|
}
|
|
84
96
|
}
|