Merge pull request #405 from PHOENIXCONTACT/update/replace-reactstrap…

…-by-material-ui

Replace reactstrap by material UI

src/Moryx.CommandCenter.Web/package.json

@@ -5,32 +5,32 @@
     "main": "index.js",
     "scripts": {
         "start": "npm dev",
-        "dev": "webpack-dev-server --watch --progress --mode development --config webpack.dev.config.js",
+        "dev": "webpack-dev-server --progress --mode development --config webpack.dev.config.js",
         "test": "echo \"Error: no test specified\" && exit 1",
-        "build": "npm install && rimraf wwwroot/*.js && webpack --mode production --config webpack.prod.config.js"
+        "build": "npm install && rimraf --glob wwwroot/*.js && webpack --mode development --config webpack.prod.config.js"
     },
     "author": "mma",
     "license": "Apache-2.0",
     "dependencies": {
+        "@emotion/react": "^11.11.4",
+        "@emotion/styled": "^11.11.5",
         "@mdi/js": "^7.4.47",
         "@mdi/react": "^1.6.1",
+        "@mui/material": "^5.15.15",
         "@types/react": "^18.2.55",
         "@types/react-dom": "^18.2.19",
         "@types/react-redux": "^7.1.33",
         "@types/uuid": "^9.0.8",
-        "bootstrap": "5.3.3",
-        "bootstrap5-toggle": "^5.0.6",
         "moment": "^2.30.1",
+        "path-scurry": "^1.10.2",
         "query-string": "^9.0.0",
         "react": "18.2.0",
-        "react-bootstrap-toggle": "^2.3.2",
         "react-dom": "18.2.0",
         "react-redux": "^9.1.0",
         "react-router": "^6.22.0",
         "react-router-dom": "^6.22.0",
         "react-router-redux": "^4.0.8",
         "react-toastify": "^10.0.4",
-        "reactstrap": "^9.2.2",
         "redux": "^5.0.1",
         "ts-loader": "^9.5.1",
         "uuid": "^9.0.1"
@@ -41,7 +41,8 @@
         "@types/react-router-redux": "^5.0.27",
         "css-loader": "^6.10.0",
         "html-webpack-plugin": "^5.6.0",
-        "node-sass": "^9.0.0",
+        "rimraf": "5.0.5",
+        "sass": "^1.72.0",
         "sass-loader": "^14.1.0",
         "source-map-loader": "^5.0.0",
         "style-loader": "^3.3.4",
@@ -50,9 +51,9 @@
         "tslint-react": "^5.0.0",
         "typescript": "^5.3.3",
         "url-loader": "^4.1.1",
-        "webpack": "^5.90.2",
+        "webpack": "^5.91.0",
         "webpack-cli": "^5.1.4",
         "webpack-dev-server": "^5.0.2",
         "webpack-merge": "^5.10.0"
     }
-}
+}

src/Moryx.CommandCenter.Web/src/common/components/Menu/RoutingMenu.tsx

@@ -3,33 +3,26 @@
  * Licensed under the Apache License, Version 2.0
 */
 
+import List from "@mui/material/List";
 import * as React from "react";
-import { useNavigate } from "react-router-dom";
 import MenuItemModel from "../../models/MenuItemModel";
+import { MenuProps } from "../../models/MenuModel";
 import RoutingMenuItem from "./RoutingMenuItem";
-import { MenuProps } from "./TreeMenu";
 
 function RoutingMenu(props: MenuProps) {
-    const navigate = useNavigate();
-
-    const handleMenuItemClick = (menuItem: MenuItemModel): void => {
-        if (props.onActiveMenuItemChanged != null) {
-            props.onActiveMenuItemChanged(menuItem);
-        }
-        navigate(menuItem.NavPath);
-    };
-
     const renderMenu = (menuItems: MenuItemModel[]): React.ReactNode => {
-        return menuItems.map((menuItem, idx) => {
-            return (
-                <RoutingMenuItem
-                    key={idx}
-                    MenuItem={menuItem}
-                    Level={0}
-                    onMenuItemClicked={(menuItem) => handleMenuItemClick(menuItem)}
-                />
-            );
-        });
+        return <List>{
+            menuItems.map((menuItem, idx) => {
+                return (
+                    <RoutingMenuItem
+                        Key={idx}
+                        MenuItem={menuItem}
+                        Level={0}
+                        Divider={idx < menuItems.length - 1}
+                    />
+                );
+            })
+        } </List>;
     };
 
     return <div>{renderMenu(props.Menu.MenuItems)}</div>;

src/Moryx.CommandCenter.Web/src/common/components/Menu/RoutingMenuItem.tsx

@@ -3,56 +3,55 @@
 * Licensed under the Apache License, Version 2.0
 */
 
+import ListItem from "@mui/material/ListItem";
+import ListItemButton from "@mui/material/ListItemButton";
+import ListItemText from "@mui/material/ListItemText";
 import * as React from "react";
-import { Link, Location, useLocation, useNavigate } from "react-router-dom";
-import { ListGroupItem } from "reactstrap";
+import { Location, NavLink, useLocation } from "react-router-dom";
 import MenuItemModel from "../../models/MenuItemModel";
 
 interface MenuItemProps {
+    Key: number;
     MenuItem: MenuItemModel;
     Level: number;
-    onMenuItemClicked?(menuItem: MenuItemModel): void;
-}
-
-interface MenuItemState {
-    IsOpened: boolean;
+    Divider: boolean;
 }
 
 function RoutingMenuItem(props: MenuItemProps) {
     const location = useLocation();
-    const navigate = useNavigate();
-
-    const isOpened = (location: Location): boolean => {
-        return location.pathname.startsWith(props.MenuItem.NavPath);
-    };
-
-    const [IsOpened, setIsOpened] = React.useState<boolean>(isOpened(location));
-
-    React.useEffect(() => {
-        setIsOpened(isOpened(location));
-    }, [navigate]);
-
-    const handleMenuItemClick = (e: React.MouseEvent<HTMLElement>): void => {
-        e.preventDefault();
-        setIsOpened((prevState) => !prevState);
-        onMenuItemClicked(props.MenuItem);
-    };
 
-    const onMenuItemClicked = (menuItem: MenuItemModel): void => {
-        if (props.onMenuItemClicked != null) {
-            props.onMenuItemClicked(menuItem);
-        }
+    const isActive = (location: Location): boolean => {
+        // Path has to be equal to be 'active' or must be a sub path (following
+        // After a `/`). Otherwise, with similar entries, multiple list items
+        // Could be highlighted. E.g.: 'Orders' and 'OrdersSimulator' would both
+        // Match the condition of `OrdersSimulator.startsWith(Orders)`.
+        return location.pathname === props.MenuItem.NavPath
+           || (location.pathname.startsWith(props.MenuItem.NavPath)
+                && location.pathname.replace(props.MenuItem.NavPath, "")[0] === "/");
     };
 
-    const isActive = isOpened(location);
+    const isLocationActive = isActive(location);
 
     return (
-        <ListGroupItem active={isActive} className="menu-item" onClick={(e: React.MouseEvent<HTMLElement>) => handleMenuItemClick(e)}>
-            <Link to={props.MenuItem.NavPath}>
-                {props.MenuItem.Name}
-            </Link>
-            {props.MenuItem.Content}
-        </ListGroupItem>
+        <ListItem
+            key={props.Key}
+            secondaryAction={props.MenuItem.Content}
+            disablePadding={true}
+            component={NavLink} to={props.MenuItem.NavPath} sx={{color: "black"}}
+        >
+            <ListItemButton
+                selected={isLocationActive}
+
+                divider={props.Divider}
+            >
+                <ListItemText
+                    primary={props.MenuItem.Name}
+                    secondary={props.MenuItem.SecondaryName}
+                    secondaryTypographyProps={{fontSize: "x-small"}}>
+                        {props.MenuItem.Content}
+                </ListItemText>
+            </ListItemButton>
+        </ListItem>
     );
 }