dashboardlabel added ad rollup upgraded

BigBasket · Oct 21, 2021 · 8983aee · 8983aee
1 parent a31d601
commit 8983aee
Show file tree

Hide file tree

Showing 6 changed files with 37 additions and 47 deletions.
diff --git a/.babelrc b/.babelrc
@@ -1,16 +1,11 @@
 {
     "presets": [
         [
-            "env",
+            "@babel/preset-env",
             {
                 "modules": false
             }
         ],
-        "stage-0",
-        "react"
-    ],
-    "plugins": [
-        "external-helpers",
-        "transform-decorators-legacy"
+        "@babel/react"
     ]
-}
+  }
diff --git a/README.md b/README.md
@@ -75,6 +75,7 @@ You can find an example application implementing this tree menu in the `examples
 ### Using a Custom Layout
 
 It is completely possible to use `ra-treemenu` inside your custom app layout.
+Default label for dashboard menu is `Dashboard`.  You can customize it.
 
 ```js
 // In App.js
@@ -95,9 +96,10 @@ export default App;
 /* Import TreeMenu from the package */
 import TreeMenu from '@bb-tech/ra-treemenu';
 
-const CustomLayout = (props) => (
-    <Layout {...props} menu={TreeMenu} />
-);
+const CustomLayout = (props) => {
+    TreeMenu.defaultProps.dashboardlabel = 'My Dashboard';
+    return <Layout {...props} menu={TreeMenu} />
+};
 
 export default CustomLayout;
 ```

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@bb-tech/ra-treemenu",
-  "version": "1.0.6",
+  "version": "1.0.7",
   "description": "A tree-like menu implementation for react-admin applications.",
   "author": "BigBasket Tech",
   "repository": "BigBasket/ra-treemenu",
@@ -41,25 +41,13 @@
     "react-redux": "^7.1.0"
   },
   "devDependencies": {
-    "react-scripts": "^3.4.1",
-    "babel-core": "^6.26.0",
-    "babel-eslint": "^10.0.3",
-    "babel-plugin-external-helpers": "^6.22.0",
-    "babel-plugin-transform-decorators-legacy": "^1.3.4",
-    "babel-preset-env": "^1.6.0",
-    "babel-preset-react": "^6.24.1",
-    "babel-preset-stage-0": "^6.24.1",
-    "cross-env": "^7.0.2",
-    "gh-pages": "^2.2.0",
-    "npm-run-all": "^4.1.5",
-    "prettier": "^2.0.4",
-    "rollup": "^0.54.0",
-    "rollup-plugin-babel": "^3.0.3",
-    "rollup-plugin-commonjs": "^8.2.1",
-    "rollup-plugin-node-resolve": "^3.0.2",
-    "rollup-plugin-peer-deps-external": "^2.0.0",
-    "rollup-plugin-postcss": "^1.1.0",
-    "rollup-plugin-url": "^1.3.0"
+    "prettier": "^2.4.1",
+    "react-scripts": "^4.0.3",
+    "rollup": "^2.58.0",
+    "@rollup/plugin-babel": "^5.3.0",
+    "@rollup/plugin-commonjs": "^21.0.0",
+    "@rollup/plugin-node-resolve": "^13.0.5",
+    "@rollup/plugin-url": "^6.1.0"
   },
   "files": [
     "dist"

diff --git a/rollup.config.js b/rollup.config.js
@@ -1,9 +1,7 @@
-import babel from 'rollup-plugin-babel';
-import commonjs from 'rollup-plugin-commonjs';
-import external from 'rollup-plugin-peer-deps-external';
-import postcss from 'rollup-plugin-postcss';
-import resolve from 'rollup-plugin-node-resolve';
-import url from 'rollup-plugin-url';
+import babel from '@rollup/plugin-babel';
+import commonjs from '@rollup/plugin-commonjs';
+import resolve from '@rollup/plugin-node-resolve';
+import url from '@rollup/plugin-url';
 
 import pkg from './package.json';
 
@@ -20,13 +18,12 @@ export default {
         }
     ],
     plugins: [
-        external(),
-        postcss({
-            modules: true
-        }),
         url(),
         babel({
-            exclude: 'node_modules/**'
+            exclude: 'node_modules/**',
+            presets: ['@babel/preset-react'],
+            babelHelpers:'runtime',
+            plugins: ['@babel/plugin-transform-runtime']
         }),
         resolve(),
         commonjs()

diff --git a/src/CustomMenuItem.js b/src/CustomMenuItem.js
@@ -14,16 +14,20 @@ const useStyles = makeStyles(
     theme => ({
         icon: { minWidth: theme.spacing(5) },
         sidebarIsOpen: {
-            paddingLeft: 25,
+        '& a': {
+            paddingLeft: theme.spacing(3),
             transition: 'padding-left 195ms cubic-bezier(0.4, 0, 0.6, 1) 0ms',
+            },
         },
-        sidebarIsClosed: {
-            paddingLeft: 0,
+    sidebarIsClosed: {
+        '& a': {
+            paddingLeft: theme.spacing(2),
             transition: 'padding-left 195ms cubic-bezier(0.4, 0, 0.6, 1) 0ms',
+            },
         },
         menuItem: {},
         menuItemName: {
-            color: theme.palette.text.secondary
+            color: theme.palette.secondary
         },
         openMenuItem: {}
     }),

diff --git a/src/TreeMenu.js b/src/TreeMenu.js
@@ -49,6 +49,7 @@ const Menu = (props) => {
         hasDashboard,
         onMenuClick,
         logout,
+        dashboardlabel,
         ...rest
     } = props;
 
@@ -234,6 +235,7 @@ const Menu = (props) => {
                         onClick={onMenuClick}
                         dense={dense}
                         sidebarIsOpen={open}
+                        primaryText={dashboardlabel}
                     />
                 )}
                 {resRenderGroup}
@@ -249,10 +251,12 @@ Menu.propTypes = {
     hasDashboard: PropTypes.bool,
     logout: PropTypes.element,
     onMenuClick: PropTypes.func,
+    dashboardlabel:PropTypes.string,
 };
 
 Menu.defaultProps = {
-    onMenuClick: () => null
+    onMenuClick: () => null,
+    dashboardlabel: 'Dashboard'
 };