@gridsuite/commons-ui 0.45.0 → 0.47.0

package/dist/components/TopBar/TopBar.js

@@ -0,0 +1,679 @@
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+import React, { useRef, useState, useMemo } from "react";
+import { FormattedMessage } from "react-intl";
+import { Menu, MenuItem, ListItemIcon, AppBar, Toolbar, Box, IconButton, ListItemText, Button, Popper, Paper, ClickAwayListener, MenuList, Typography, ToggleButtonGroup, ToggleButton, darken } from "@mui/material";
+import { Apps, ArrowDropUp, ArrowDropDown, Person, WbSunny, Brightness3, Computer, Settings, HelpOutline, FullscreenExit, Fullscreen, ExitToApp } from "@mui/icons-material";
+import { styled } from "@mui/system";
+import PropTypes from "prop-types";
+import FullScreen, { fullScreenSupported } from "react-request-fullscreen";
+import GridLogo from "./GridLogo.js";
+import AboutDialog from "./AboutDialog.js";
+const styles = {
+  grow: {
+    flexGrow: 1,
+    display: "flex",
+    overflow: "hidden"
+  },
+  menuContainer: {
+    marginLeft: 1
+  },
+  link: {
+    textDecoration: "none",
+    color: "inherit"
+  },
+  name: (theme) => ({
+    backgroundColor: darken(theme.palette.background.paper, 0.1),
+    paddingTop: "10px",
+    borderRadius: "100%",
+    fontWeight: "400",
+    textTransform: "uppercase",
+    height: "48px",
+    width: "48px"
+  }),
+  arrowIcon: {
+    fontSize: "40px"
+  },
+  userMail: {
+    fontSize: "14px",
+    display: "block"
+  },
+  borderBottom: {
+    borderBottom: "1px solid #ccc"
+  },
+  borderTop: {
+    borderTop: "1px solid #ccc"
+  },
+  settingsMenu: {
+    maxWidth: "385px",
+    zIndex: 60
+  },
+  sizeLabel: {
+    fontSize: "16px"
+  },
+  showHideMenu: {
+    padding: "0",
+    borderRadius: "25px"
+  },
+  toggleButtonGroup: {
+    marginLeft: "15px",
+    pointerEvents: "auto"
+  },
+  toggleButton: {
+    height: "30px",
+    width: "48px",
+    padding: "7px",
+    textTransform: "capitalize"
+  },
+  languageToggleButton: {
+    height: "30px",
+    width: "48px"
+  }
+};
+const StyledMenu = styled((props) => /* @__PURE__ */ jsx(
+  Menu,
+  {
+    elevation: 0,
+    anchorOrigin: {
+      vertical: "bottom",
+      horizontal: "center"
+    },
+    transformOrigin: {
+      vertical: "top",
+      horizontal: "center"
+    },
+    ...props
+  }
+))({
+  "& .MuiMenu-paper": {
+    border: "1px solid #d3d4d5"
+  }
+});
+const StyledMenuItem = styled(MenuItem)(({ theme }) => ({
+  "&:focus": {
+    backgroundColor: theme.palette.primary.main,
+    "& .MuiListItemIcon-root, & .MuiListItemText-primary": {
+      color: theme.palette.common.white
+    }
+  }
+}));
+const CustomListItemIcon = styled(ListItemIcon)({
+  minWidth: "30px",
+  paddingRight: "15px",
+  borderRadius: "25px"
+});
+const DARK_THEME = "Dark";
+const LIGHT_THEME = "Light";
+const LANG_SYSTEM = "sys";
+const LANG_ENGLISH = "en";
+const LANG_FRENCH = "fr";
+const EN = "EN";
+const FR = "FR";
+const TopBar = ({
+  appName,
+  appColor,
+  appLogo,
+  appVersion,
+  appLicense,
+  onParametersClick,
+  onLogoutClick,
+  onLogoClick,
+  user,
+  children,
+  appsAndUrls,
+  onAboutClick,
+  globalVersionPromise,
+  additionalModulesPromise,
+  onThemeClick,
+  theme,
+  onEquipmentLabellingClick,
+  equipmentLabelling,
+  onLanguageClick,
+  language
+}) => {
+  const [anchorElSettingsMenu, setAnchorElSettingsMenu] = React.useState(null);
+  const [anchorElAppsMenu, setAnchorElAppsMenu] = React.useState(null);
+  const fullScreenRef = useRef(null);
+  const [isFullScreen, setIsFullScreen] = useState(false);
+  const handleToggleSettingsMenu = (event) => {
+    setAnchorElSettingsMenu(event.currentTarget);
+  };
+  const handleCloseSettingsMenu = () => {
+    setAnchorElSettingsMenu(null);
+  };
+  const handleClickAppsMenu = (event) => {
+    setAnchorElAppsMenu(event.currentTarget);
+  };
+  const handleCloseAppsMenu = () => {
+    setAnchorElAppsMenu(null);
+  };
+  const onParametersClicked = () => {
+    setAnchorElSettingsMenu(null);
+    if (onParametersClick) {
+      onParametersClick();
+    }
+  };
+  function onFullScreenChange(isFullScreenValue) {
+    setAnchorElSettingsMenu(null);
+    setIsFullScreen(isFullScreen);
+  }
+  function requestOrExitFullScreen() {
+    setAnchorElSettingsMenu(null);
+    fullScreenRef.current.fullScreen();
+  }
+  const abbreviationFromUserName = (name) => {
+    const tab = name.split(" ").map((x) => x.charAt(0));
+    if (tab.length === 1) {
+      return tab[0];
+    } else {
+      return tab[0] + tab[tab.length - 1];
+    }
+  };
+  const changeTheme = (event, value) => {
+    if (onThemeClick && value !== null) {
+      onThemeClick(value);
+    }
+  };
+  const changeEquipmentLabelling = (event, value) => {
+    if (onEquipmentLabellingClick && value !== null) {
+      onEquipmentLabellingClick(value);
+    }
+  };
+  const changeLanguage = (event, value) => {
+    if (onLanguageClick && value !== null) {
+      onLanguageClick(value);
+    }
+  };
+  const [isAboutDialogOpen, setAboutDialogOpen] = useState(false);
+  const onAboutClicked = () => {
+    setAnchorElSettingsMenu(false);
+    if (onAboutClick) {
+      onAboutClick();
+    } else {
+      setAboutDialogOpen(true);
+    }
+  };
+  const logo_clickable = useMemo(
+    () => /* @__PURE__ */ jsx(
+      GridLogo,
+      {
+        onClick: onLogoClick,
+        appLogo,
+        appName,
+        appColor
+      }
+    ),
+    [onLogoClick, appLogo, appName, appColor]
+  );
+  return /* @__PURE__ */ jsxs(AppBar, { position: "static", color: "default", sx: styles.appBar, children: [
+    /* @__PURE__ */ jsx(
+      FullScreen,
+      {
+        ref: fullScreenRef,
+        onFullScreenChange,
+        onFullScreenError: (e) => console.debug("full screen error : " + e.message)
+      }
+    ),
+    /* @__PURE__ */ jsxs(Toolbar, { children: [
+      logo_clickable,
+      /* @__PURE__ */ jsx(Box, { sx: styles.grow, children }),
+      user && /* @__PURE__ */ jsxs(Box, { children: [
+        /* @__PURE__ */ jsx(
+          IconButton,
+          {
+            "aria-label": "apps",
+            "aria-controls": "apps-menu",
+            "aria-haspopup": "true",
+            onClick: handleClickAppsMenu,
+            color: "inherit",
+            children: /* @__PURE__ */ jsx(Apps, {})
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          StyledMenu,
+          {
+            id: "apps-menu",
+            anchorEl: anchorElAppsMenu,
+            keepMounted: true,
+            open: Boolean(anchorElAppsMenu),
+            onClose: handleCloseAppsMenu,
+            children: appsAndUrls && appsAndUrls.filter((item) => !item.hiddenInAppsMenu).map((item) => /* @__PURE__ */ jsx(
+              Box,
+              {
+                component: "a",
+                href: item.url,
+                sx: styles.link,
+                target: "_blank",
+                rel: "noopener noreferrer",
+                children: /* @__PURE__ */ jsx(
+                  StyledMenuItem,
+                  {
+                    onClick: handleCloseAppsMenu,
+                    children: /* @__PURE__ */ jsxs(ListItemText, { children: [
+                      /* @__PURE__ */ jsx(
+                        "span",
+                        {
+                          style: {
+                            fontWeight: "bold"
+                          },
+                          children: "Grid"
+                        }
+                      ),
+                      /* @__PURE__ */ jsx(
+                        "span",
+                        {
+                          style: {
+                            color: item.appColor === void 0 ? "grey" : item.appColor,
+                            fontWeight: "bold"
+                          },
+                          children: item.name
+                        }
+                      )
+                    ] })
+                  }
+                )
+              },
+              item.name
+            ))
+          }
+        )
+      ] }),
+      user && /* @__PURE__ */ jsxs(Box, { sx: styles.menuContainerg, children: [
+        /* @__PURE__ */ jsxs(
+          Button,
+          {
+            "aria-controls": "settings-menu",
+            "aria-haspopup": "true",
+            sx: styles.showHideMenu,
+            onClick: handleToggleSettingsMenu,
+            color: "inherit",
+            style: Boolean(anchorElSettingsMenu) ? { cursor: "initial" } : { cursor: "pointer" },
+            children: [
+              /* @__PURE__ */ jsx(Box, { component: "span", sx: styles.name, children: user !== null ? abbreviationFromUserName(
+                user.profile.name
+              ) : "" }),
+              anchorElSettingsMenu ? /* @__PURE__ */ jsx(ArrowDropUp, { sx: styles.arrowIcon }) : /* @__PURE__ */ jsx(ArrowDropDown, { sx: styles.arrowIcon })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          Popper,
+          {
+            sx: styles.settingsMenu,
+            open: Boolean(anchorElSettingsMenu),
+            anchorEl: anchorElSettingsMenu,
+            children: /* @__PURE__ */ jsx(Paper, { children: /* @__PURE__ */ jsx(
+              ClickAwayListener,
+              {
+                onClickAway: handleCloseSettingsMenu,
+                children: /* @__PURE__ */ jsxs(MenuList, { id: "settings-menu", children: [
+                  /* @__PURE__ */ jsxs(
+                    StyledMenuItem,
+                    {
+                      sx: styles.borderBottom,
+                      disabled: true,
+                      style: { opacity: "1" },
+                      children: [
+                        /* @__PURE__ */ jsx(CustomListItemIcon, { children: /* @__PURE__ */ jsx(Person, { fontSize: "small" }) }),
+                        /* @__PURE__ */ jsx(ListItemText, { disabled: false, children: user !== null && /* @__PURE__ */ jsxs(
+                          Box,
+                          {
+                            component: "span",
+                            sx: styles.sizeLabel,
+                            children: [
+                              user.profile.name,
+                              " ",
+                              /* @__PURE__ */ jsx("br", {}),
+                              /* @__PURE__ */ jsx(
+                                Box,
+                                {
+                                  component: "span",
+                                  sx: styles.userMail,
+                                  children: user.profile.email
+                                }
+                              )
+                            ]
+                          }
+                        ) })
+                      ]
+                    }
+                  ),
+                  /* @__PURE__ */ jsxs(
+                    StyledMenuItem,
+                    {
+                      disabled: true,
+                      style: {
+                        opacity: "1",
+                        paddingTop: "10px",
+                        paddingBottom: "10px",
+                        backgroundColor: "transparent"
+                      },
+                      children: [
+                        /* @__PURE__ */ jsx(ListItemText, { children: /* @__PURE__ */ jsx(
+                          Typography,
+                          {
+                            sx: styles.sizeLabel,
+                            children: /* @__PURE__ */ jsx(
+                              FormattedMessage,
+                              {
+                                id: "top-bar/displayMode",
+                                defaultMessage: "Display mode"
+                              }
+                            )
+                          }
+                        ) }),
+                        /* @__PURE__ */ jsxs(
+                          ToggleButtonGroup,
+                          {
+                            exclusive: true,
+                            value: theme,
+                            size: "large",
+                            sx: styles.toggleButtonGroup,
+                            onChange: changeTheme,
+                            children: [
+                              /* @__PURE__ */ jsx(
+                                ToggleButton,
+                                {
+                                  value: LIGHT_THEME,
+                                  "aria-label": LIGHT_THEME,
+                                  sx: styles.toggleButton,
+                                  children: /* @__PURE__ */ jsx(WbSunny, { fontSize: "small" })
+                                }
+                              ),
+                              /* @__PURE__ */ jsx(
+                                ToggleButton,
+                                {
+                                  value: DARK_THEME,
+                                  "aria-label": DARK_THEME,
+                                  sx: styles.toggleButton,
+                                  children: /* @__PURE__ */ jsx(Brightness3, { fontSize: "small" })
+                                }
+                              )
+                            ]
+                          }
+                        )
+                      ]
+                    }
+                  ),
+                  onEquipmentLabellingClick && /* @__PURE__ */ jsxs(
+                    StyledMenuItem,
+                    {
+                      disabled: true,
+                      style: {
+                        opacity: "1",
+                        // padding: '0',
+                        paddingTop: "10px",
+                        paddingBottom: "10px",
+                        backgroundColor: "transparent"
+                      },
+                      children: [
+                        /* @__PURE__ */ jsx(ListItemText, { children: /* @__PURE__ */ jsx(
+                          Typography,
+                          {
+                            sx: styles.sizeLabel,
+                            children: /* @__PURE__ */ jsx(
+                              FormattedMessage,
+                              {
+                                id: "top-bar/equipmentLabel",
+                                defaultMessage: "Equipment label"
+                              }
+                            )
+                          }
+                        ) }),
+                        /* @__PURE__ */ jsxs(
+                          ToggleButtonGroup,
+                          {
+                            exclusive: true,
+                            value: equipmentLabelling,
+                            sx: styles.toggleButtonGroup,
+                            onChange: changeEquipmentLabelling,
+                            children: [
+                              /* @__PURE__ */ jsx(
+                                ToggleButton,
+                                {
+                                  value: false,
+                                  sx: styles.toggleButton,
+                                  children: /* @__PURE__ */ jsx(
+                                    FormattedMessage,
+                                    {
+                                      id: "top-bar/id",
+                                      defaultMessage: "Id"
+                                    }
+                                  )
+                                }
+                              ),
+                              /* @__PURE__ */ jsx(
+                                ToggleButton,
+                                {
+                                  value: true,
+                                  sx: styles.toggleButton,
+                                  children: /* @__PURE__ */ jsx(
+                                    FormattedMessage,
+                                    {
+                                      id: "top-bar/name",
+                                      defaultMessage: "Name"
+                                    }
+                                  )
+                                }
+                              )
+                            ]
+                          }
+                        )
+                      ]
+                    }
+                  ),
+                  /* @__PURE__ */ jsxs(
+                    StyledMenuItem,
+                    {
+                      disabled: true,
+                      style: {
+                        opacity: "1",
+                        paddingTop: "10px",
+                        paddingBottom: "10px",
+                        backgroundColor: "transparent"
+                      },
+                      children: [
+                        /* @__PURE__ */ jsx(ListItemText, { children: /* @__PURE__ */ jsx(
+                          Typography,
+                          {
+                            sx: styles.sizeLabel,
+                            children: /* @__PURE__ */ jsx(
+                              FormattedMessage,
+                              {
+                                id: "top-bar/language",
+                                defaultMessage: "Language"
+                              }
+                            )
+                          }
+                        ) }),
+                        /* @__PURE__ */ jsxs(
+                          ToggleButtonGroup,
+                          {
+                            exclusive: true,
+                            value: language,
+                            sx: styles.toggleButtonGroup,
+                            onChange: changeLanguage,
+                            children: [
+                              /* @__PURE__ */ jsx(
+                                ToggleButton,
+                                {
+                                  value: LANG_SYSTEM,
+                                  "aria-label": LANG_SYSTEM,
+                                  sx: styles.languageToggleButton,
+                                  children: /* @__PURE__ */ jsx(Computer, {})
+                                }
+                              ),
+                              /* @__PURE__ */ jsx(
+                                ToggleButton,
+                                {
+                                  value: LANG_ENGLISH,
+                                  "aria-label": LANG_ENGLISH,
+                                  sx: styles.languageToggleButton,
+                                  children: EN
+                                }
+                              ),
+                              /* @__PURE__ */ jsx(
+                                ToggleButton,
+                                {
+                                  value: LANG_FRENCH,
+                                  "aria-label": LANG_FRENCH,
+                                  sx: styles.toggleButton,
+                                  children: FR
+                                }
+                              )
+                            ]
+                          }
+                        )
+                      ]
+                    }
+                  ),
+                  onParametersClick && /* @__PURE__ */ jsxs(
+                    StyledMenuItem,
+                    {
+                      onClick: onParametersClicked,
+                      sx: styles.borderTop,
+                      children: [
+                        /* @__PURE__ */ jsx(CustomListItemIcon, { children: /* @__PURE__ */ jsx(Settings, { fontSize: "small" }) }),
+                        /* @__PURE__ */ jsx(ListItemText, { children: /* @__PURE__ */ jsx(
+                          Typography,
+                          {
+                            sx: styles.sizeLabel,
+                            children: /* @__PURE__ */ jsx(
+                              FormattedMessage,
+                              {
+                                id: "top-bar/settings",
+                                defaultMessage: "Settings"
+                              }
+                            )
+                          }
+                        ) })
+                      ]
+                    }
+                  ),
+                  /* @__PURE__ */ jsxs(
+                    StyledMenuItem,
+                    {
+                      sx: styles.borderBottom,
+                      style: { opacity: "1" },
+                      onClick: onAboutClicked,
+                      children: [
+                        /* @__PURE__ */ jsx(CustomListItemIcon, { children: /* @__PURE__ */ jsx(HelpOutline, { fontSize: "small" }) }),
+                        /* @__PURE__ */ jsx(ListItemText, { children: /* @__PURE__ */ jsx(
+                          Typography,
+                          {
+                            sx: styles.sizeLabel,
+                            children: /* @__PURE__ */ jsx(
+                              FormattedMessage,
+                              {
+                                id: "top-bar/about",
+                                defaultMessage: "About"
+                              }
+                            )
+                          }
+                        ) })
+                      ]
+                    }
+                  ),
+                  fullScreenSupported() && /* @__PURE__ */ jsx(
+                    StyledMenuItem,
+                    {
+                      onClick: requestOrExitFullScreen,
+                      children: isFullScreen ? /* @__PURE__ */ jsxs(Fragment, { children: [
+                        /* @__PURE__ */ jsx(CustomListItemIcon, { children: /* @__PURE__ */ jsx(FullscreenExit, { fontSize: "small" }) }),
+                        /* @__PURE__ */ jsx(ListItemText, { children: /* @__PURE__ */ jsx(
+                          Typography,
+                          {
+                            sx: styles.sizeLabel,
+                            children: /* @__PURE__ */ jsx(
+                              FormattedMessage,
+                              {
+                                id: "top-bar/exitFullScreen",
+                                defaultMessage: "Exit full screen mode"
+                              }
+                            )
+                          }
+                        ) })
+                      ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+                        /* @__PURE__ */ jsx(CustomListItemIcon, { children: /* @__PURE__ */ jsx(Fullscreen, { fontSize: "small" }) }),
+                        /* @__PURE__ */ jsx(ListItemText, { children: /* @__PURE__ */ jsx(
+                          Typography,
+                          {
+                            sx: styles.sizeLabel,
+                            children: /* @__PURE__ */ jsx(
+                              FormattedMessage,
+                              {
+                                id: "top-bar/goFullScreen",
+                                defaultMessage: "Full screen"
+                              }
+                            )
+                          }
+                        ) })
+                      ] })
+                    }
+                  ),
+                  /* @__PURE__ */ jsxs(StyledMenuItem, { onClick: onLogoutClick, children: [
+                    /* @__PURE__ */ jsx(CustomListItemIcon, { children: /* @__PURE__ */ jsx(ExitToApp, { fontSize: "small" }) }),
+                    /* @__PURE__ */ jsx(ListItemText, { children: /* @__PURE__ */ jsx(
+                      Typography,
+                      {
+                        sx: styles.sizeLabel,
+                        children: /* @__PURE__ */ jsx(
+                          FormattedMessage,
+                          {
+                            id: "top-bar/logout",
+                            defaultMessage: "Logout"
+                          }
+                        )
+                      }
+                    ) })
+                  ] })
+                ] })
+              }
+            ) })
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsx(
+        AboutDialog,
+        {
+          open: isAboutDialogOpen,
+          onClose: () => setAboutDialogOpen(false),
+          appName,
+          appVersion,
+          appLicense,
+          globalVersionPromise,
+          additionalModulesPromise
+        }
+      )
+    ] })
+  ] });
+};
+TopBar.propTypes = {
+  onParametersClick: PropTypes.func,
+  onLogoutClick: PropTypes.func,
+  onLogoClick: PropTypes.func,
+  appName: PropTypes.string,
+  appColor: PropTypes.string,
+  appLogo: PropTypes.object,
+  appVersion: PropTypes.string,
+  appLicense: PropTypes.string,
+  user: PropTypes.object,
+  children: PropTypes.node,
+  appsAndUrls: PropTypes.array,
+  onThemeClick: PropTypes.func,
+  theme: PropTypes.string,
+  onAboutClick: PropTypes.func,
+  globalVersionPromise: PropTypes.func,
+  additionalModulesPromise: PropTypes.func,
+  onEquipmentLabellingClick: PropTypes.func,
+  equipmentLabelling: PropTypes.bool,
+  onLanguageClick: PropTypes.func.isRequired,
+  language: PropTypes.string.isRequired
+};
+export {
+  DARK_THEME,
+  LANG_ENGLISH,
+  LANG_FRENCH,
+  LANG_SYSTEM,
+  LIGHT_THEME,
+  TopBar as default
+};