aldehyde 0.2.480 → 0.2.481

package/src/aldehyde/layout2/header.tsx

@@ -1,278 +1,278 @@
-import {
-  ConfigProvider,
-  Layout,
-  Menu,
-  MenuProps, Space,
-  theme,
-  Tooltip,
-} from "antd";
-import React, { useEffect, useState, CSSProperties } from "react";
-import "./css/header.css";
-import L2MenuQuickBar from "../layout/menu/l2menu-quick-bar";
-import L2MenuMessageBar from "../layout/menu/l2menu-message-bar";
-// import LocaleButton from "../locale/LocaleButton";
-import UserButton from "./components/user-button";
-import { MenuType } from "./type/layout-type";
-import { NavLink, useParams, useSearchParams } from "react-router-dom";
-import {
-  getLeftMostRouteInfo,
-  handlePropsMenuToAntdMenu,
-} from "./util/menu-util";
-import { useLocale } from "../locale/useLocale";
-import { generate } from "@ant-design/colors";
-import { useLayoutContext } from "./layout-context";
-// import ThemeButton from "./components/theme-button";
-import IconFont from "./components/icon-font";
-import SearchMenu from "./components/search-menu";
-import ScreenfullButton from "./components/screenfull-button";
-import SystemMessages from "./components/system-messages";
-import UserNotification from "./components/user-notification";
-import { ThemeConfig } from "../tmpl/interface";
-
-const toolbarStyle: CSSProperties = {
-  width: "100%",
-  height: "100%",
-  boxSizing: "border-box",
-  padding: 0,
-  borderRadius: 0,
-  minWidth: 0,
-  color: "#ffffff",
-};
-
-type HeaderPropsType = {
-  systemName: string;
-  menuList: MenuType[];
-  style?: any;
-  logoImg: string;
-  themeConfig?: ThemeConfig;
-  customHome?: string;
-};
-
-type MenuItem = Required<MenuProps>["items"][number];
-
-
-const { useToken } = theme;
-
-const Header: React.FC<HeaderPropsType> = ({ systemName, menuList, style, logoImg, themeConfig, customHome }) => {
-  const { setDocumentTitle, menuItemIdToFirstFloorIdxMap } = useLayoutContext();
-
-  // token
-  const { token: { colorPrimary } } = useToken();
-  const colors = generate(colorPrimary);
-
-  // translate
-  const { translate, getLocale } = useLocale();
-
-  const [menu, setMenu] = useState<MenuItem[]>([]);
-  useEffect(() => {
-    setMenu(
-      handlePropsMenuToAntdMenu(
-        menuList,
-        (menuItem, floor) => {
-          const { disabled, label, children, icon } = menuItem;
-          const renderIcon = (themeConfig?.showTopMenuIcon && icon) ? <IconFont type={icon} /> : "";
-          if (disabled)
-            return (
-              <div
-                style={{
-                  color: "inherit",
-                  width: "100%",
-                  height: "100%",
-                  display: "block",
-                }}
-              >
-                <Space size={"small"}>{renderIcon}{translate("${" + label + "}")}</Space>
-              </div>
-            );
-          const { path, target } = getLeftMostRouteInfo(menuItem);
-          if (floor === 0)
-            return path === null ? (
-              <div
-                style={{
-                  color: "inherit",
-                  width: "100%",
-                  height: "100%",
-                  display: "block",
-                }}
-              >
-                <Space size={"small"}>{renderIcon}{translate("${" + label + "}")}</Space>
-              </div>
-            ) : (
-              <NavLink
-                to={`/${path}`}
-                target={target}
-                style={{
-                  color: "inherit",
-                  width: "100%",
-                  height: "100%",
-                  display: "block",
-                }}
-              ><Space size={"small"}>{renderIcon}{translate("${" + label + "}")}</Space>
-              </NavLink>
-            );
-          if (Array.isArray(children) && !children.length)
-            return (
-              <NavLink
-                to={`/${path}`}
-                target={target}
-                style={{
-                  color: "inherit",
-                  width: "100%",
-                  height: "100%",
-                  display: "block",
-                }}
-              >
-                <Space size={"small"}>{renderIcon}{translate("${" + label + "}")}</Space>
-              </NavLink>
-            );
-
-          return <Space size={"small"}>{renderIcon}{translate("${" + label + "}")}</Space>;
-        },
-        "layout2-header-menu-item"
-      )
-    );
-  }, [menuList, getLocale()]);
-
-  // menu select
-  const [selectedKeys, setSelectedKeys] = useState([]);
-  const { sourceId } = useParams();
-  const [search, setSearch] = useSearchParams();
-  const menuId: string = search.get("menuId");
-  useEffect(() => {
-    if (sourceId !== undefined) setSelectedKeys([sourceId]);
-    if (menuId !== undefined) setSelectedKeys([menuId]);
-  }, [sourceId, menuId]);
-
-  // default select keys
-  useEffect(() => {
-    if (sourceId === undefined) {
-      if (menuList[0] !== undefined) {
-        setSelectedKeys([menuList[0].id]);
-      }
-      setDocumentTitle("");
-    } else {
-      const documentTitle =
-        menuList[menuItemIdToFirstFloorIdxMap[sourceId]]?.label;
-      setDocumentTitle(translate("${" + documentTitle + "}"));
-    }
-  }, [menuList, sourceId]);
-  let systemLabel = translate("${" + systemName + "}");
-  return (
-    <Layout.Header
-      style={{
-        padding: 0,
-        display: "flex",
-        flexDirection: "row",
-        background: colorPrimary,
-        color: "#FFFFFF",
-        ...style,
-      }}
-      className="v2-header"
-    >
-      <NavLink
-        style={{
-          width: "200px",
-          minWidth: "200px",
-          height: "100%",
-          display: "flex",
-          paddingLeft: "10px",
-          alignItems: "center",
-          fontSize: "18px",
-          userSelect: "none",
-          color: "inherit",
-        }}
-        to={customHome || "/v2/home"}
-      >
-        {logoImg ? <img
-          className="header-logo"
-          src={logoImg}
-          alt="home"
-        /> : ""}
-        <Tooltip title={systemLabel}>
-          <span
-            style={{
-              width: "100%",
-              height: "100%",
-              overflow: "hidden",
-              textOverflow: "ellipsis",
-              whiteSpace: "nowrap",
-            }}
-          >
-            {translate(systemLabel)}
-          </span>
-        </Tooltip>
-      </NavLink>
-      <div
-        style={{
-          display: "flex",
-          flexDirection: "row",
-          width: "calc(100% - 200px)",
-          justifyContent: "space-between",
-        }}
-      >
-        <ConfigProvider
-          theme={{
-            components: {
-              Menu: {
-                itemBg: "transparent",
-                popupBg: colors[4],
-                subMenuItemBg: colors[4],
-                itemHoverColor: "#fff",
-                itemColor: "#fff",
-                itemSelectedBg: colors[2], subMenuItemSelectedColor: colors[0],
-                itemSelectedColor: "#fff !important",
-                groupTitleColor: "#fff",
-                horizontalItemHoverColor: "#fff",
-                horizontalItemSelectedColor: "#fff",
-                horizontalItemSelectedBg: colors[6],
-                fontSize: 16,
-              },
-            },
-          }}
-        >
-          <Menu
-            mode="horizontal"
-            items={menu}
-            selectedKeys={selectedKeys}
-            style={{
-              userSelect: "none",
-              minWidth: 0,
-              flex: "auto",
-            }}
-            className="layout2-header-menu"
-          />
-        </ConfigProvider>
-        <div
-          style={{
-            height: "100%",
-            display: "flex",
-            flexDirection: "row",
-          }}
-        >
-          {themeConfig?.wsTypes?.includes("sys-messages") ? <SystemMessages menuList={menuList} /> : ""}
-          {themeConfig?.wsTypes?.includes("user-notification") ? <UserNotification menuList={menuList} /> : ""}
-          <Space size="large">
-            <ScreenfullButton style={toolbarStyle} />
-            <SearchMenu menuList={menuList} />
-            <L2MenuQuickBar style={{ color: "#fff" }} />
-            <L2MenuMessageBar version="v2" style={{ color: "#fff" }} />
-            {/* <LocaleButton
-              shape="default"
-              size="large"
-              type="link"
-              style={toolbarStyle}
-            />
-            <ThemeButton shape="default"
-              size="large"
-              type="link"
-              style={toolbarStyle}
-            /> */}
-            <UserButton themeConfig={themeConfig} layoutRootPath="v2" style={{ padding: 0, marginRight: "15px", color: "#ffffff" }} />
-          </Space>
-        </div>
-      </div>
-    </Layout.Header>
-  );
-};
-
-export default Header;
+import {
+  ConfigProvider,
+  Layout,
+  Menu,
+  MenuProps, Space,
+  theme,
+  Tooltip,
+} from "antd";
+import React, { useEffect, useState, CSSProperties } from "react";
+import "./css/header.css";
+import L2MenuQuickBar from "../layout/menu/l2menu-quick-bar";
+import L2MenuMessageBar from "../layout/menu/l2menu-message-bar";
+// import LocaleButton from "../locale/LocaleButton";
+import UserButton from "./components/user-button";
+import { MenuType } from "./type/layout-type";
+import { NavLink, useParams, useSearchParams } from "react-router-dom";
+import {
+  getLeftMostRouteInfo,
+  handlePropsMenuToAntdMenu,
+} from "./util/menu-util";
+import { useLocale } from "../locale/useLocale";
+import { generate } from "@ant-design/colors";
+import { useLayoutContext } from "./layout-context";
+// import ThemeButton from "./components/theme-button";
+import IconFont from "./components/icon-font";
+import SearchMenu from "./components/search-menu";
+import ScreenfullButton from "./components/screenfull-button";
+import SystemMessages from "./components/system-messages";
+import UserNotification from "./components/user-notification";
+import { ThemeConfig } from "../tmpl/interface";
+
+const toolbarStyle: CSSProperties = {
+  width: "100%",
+  height: "100%",
+  boxSizing: "border-box",
+  padding: 0,
+  borderRadius: 0,
+  minWidth: 0,
+  color: "#ffffff",
+};
+
+type HeaderPropsType = {
+  systemName: string;
+  menuList: MenuType[];
+  style?: any;
+  logoImg: string;
+  themeConfig?: ThemeConfig;
+  customHome?: string;
+};
+
+type MenuItem = Required<MenuProps>["items"][number];
+
+
+const { useToken } = theme;
+
+const Header: React.FC<HeaderPropsType> = ({ systemName, menuList, style, logoImg, themeConfig, customHome }) => {
+  const { setDocumentTitle, menuItemIdToFirstFloorIdxMap } = useLayoutContext();
+
+  // token
+  const { token: { colorPrimary } } = useToken();
+  const colors = generate(colorPrimary);
+
+  // translate
+  const { translate, getLocale } = useLocale();
+
+  const [menu, setMenu] = useState<MenuItem[]>([]);
+  useEffect(() => {
+    setMenu(
+      handlePropsMenuToAntdMenu(
+        menuList,
+        (menuItem, floor) => {
+          const { disabled, label, children, icon } = menuItem;
+          const renderIcon = (themeConfig?.showTopMenuIcon && icon) ? <IconFont type={icon} /> : "";
+          if (disabled)
+            return (
+              <div
+                style={{
+                  color: "inherit",
+                  width: "100%",
+                  height: "100%",
+                  display: "block",
+                }}
+              >
+                <Space size={"small"}>{renderIcon}{translate("${" + label + "}")}</Space>
+              </div>
+            );
+          const { path, target } = getLeftMostRouteInfo(menuItem);
+          if (floor === 0)
+            return path === null ? (
+              <div
+                style={{
+                  color: "inherit",
+                  width: "100%",
+                  height: "100%",
+                  display: "block",
+                }}
+              >
+                <Space size={"small"}>{renderIcon}{translate("${" + label + "}")}</Space>
+              </div>
+            ) : (
+              <NavLink
+                to={`/${path}`}
+                target={target}
+                style={{
+                  color: "inherit",
+                  width: "100%",
+                  height: "100%",
+                  display: "block",
+                }}
+              ><Space size={"small"}>{renderIcon}{translate("${" + label + "}")}</Space>
+              </NavLink>
+            );
+          if (Array.isArray(children) && !children.length)
+            return (
+              <NavLink
+                to={`/${path}`}
+                target={target}
+                style={{
+                  color: "inherit",
+                  width: "100%",
+                  height: "100%",
+                  display: "block",
+                }}
+              >
+                <Space size={"small"}>{renderIcon}{translate("${" + label + "}")}</Space>
+              </NavLink>
+            );
+
+          return <Space size={"small"}>{renderIcon}{translate("${" + label + "}")}</Space>;
+        },
+        "layout2-header-menu-item"
+      )
+    );
+  }, [menuList, getLocale()]);
+
+  // menu select
+  const [selectedKeys, setSelectedKeys] = useState([]);
+  const { sourceId } = useParams();
+  const [search, setSearch] = useSearchParams();
+  const menuId: string = search.get("menuId");
+  useEffect(() => {
+    if (sourceId !== undefined) setSelectedKeys([sourceId]);
+    if (menuId !== undefined) setSelectedKeys([menuId]);
+  }, [sourceId, menuId]);
+
+  // default select keys
+  useEffect(() => {
+    if (sourceId === undefined) {
+      if (menuList[0] !== undefined) {
+        setSelectedKeys([menuList[0].id]);
+      }
+      setDocumentTitle("");
+    } else {
+      const documentTitle =
+        menuList[menuItemIdToFirstFloorIdxMap[sourceId]]?.label;
+      setDocumentTitle(translate("${" + documentTitle + "}"));
+    }
+  }, [menuList, sourceId]);
+  let systemLabel = translate("${" + systemName + "}");
+  return (
+    <Layout.Header
+      style={{
+        padding: 0,
+        display: "flex",
+        flexDirection: "row",
+        background: colorPrimary,
+        color: "#FFFFFF",
+        ...style,
+      }}
+      className="v2-header"
+    >
+      <NavLink
+        style={{
+          width: "200px",
+          minWidth: "200px",
+          height: "100%",
+          display: "flex",
+          paddingLeft: "10px",
+          alignItems: "center",
+          fontSize: "18px",
+          userSelect: "none",
+          color: "inherit",
+        }}
+        to={customHome || "/v2/home"}
+      >
+        {logoImg ? <img
+          className="header-logo"
+          src={logoImg}
+          alt="home"
+        /> : ""}
+        <Tooltip title={systemLabel}>
+          <span
+            style={{
+              width: "100%",
+              height: "100%",
+              overflow: "hidden",
+              textOverflow: "ellipsis",
+              whiteSpace: "nowrap",
+            }}
+          >
+            {translate(systemLabel)}
+          </span>
+        </Tooltip>
+      </NavLink>
+      <div
+        style={{
+          display: "flex",
+          flexDirection: "row",
+          width: "calc(100% - 200px)",
+          justifyContent: "space-between",
+        }}
+      >
+        <ConfigProvider
+          theme={{
+            components: {
+              Menu: {
+                itemBg: "transparent",
+                popupBg: colors[4],
+                subMenuItemBg: colors[4],
+                itemHoverColor: "#fff",
+                itemColor: "#fff",
+                itemSelectedBg: colors[2], subMenuItemSelectedColor: colors[0],
+                itemSelectedColor: "#fff !important",
+                groupTitleColor: "#fff",
+                horizontalItemHoverColor: "#fff",
+                horizontalItemSelectedColor: "#fff",
+                horizontalItemSelectedBg: colors[6],
+                fontSize: 16,
+              },
+            },
+          }}
+        >
+          <Menu
+            mode="horizontal"
+            items={menu}
+            selectedKeys={selectedKeys}
+            style={{
+              userSelect: "none",
+              minWidth: 0,
+              flex: "auto",
+            }}
+            className="layout2-header-menu"
+          />
+        </ConfigProvider>
+        <div
+          style={{
+            height: "100%",
+            display: "flex",
+            flexDirection: "row",
+          }}
+        >
+          {themeConfig?.wsTypes?.includes("sys-messages") ? <SystemMessages menuList={menuList} /> : ""}
+          {themeConfig?.wsTypes?.includes("user-notification") ? <UserNotification menuList={menuList} /> : ""}
+          <Space size="large">
+            <ScreenfullButton style={toolbarStyle} />
+            <SearchMenu menuList={menuList} />
+            <L2MenuQuickBar style={{ color: "#fff" }} />
+            <L2MenuMessageBar version="v2" style={{ color: "#fff" }} />
+            {/* <LocaleButton
+              shape="default"
+              size="large"
+              type="link"
+              style={toolbarStyle}
+            />
+            <ThemeButton shape="default"
+              size="large"
+              type="link"
+              style={toolbarStyle}
+            /> */}
+            <UserButton themeConfig={themeConfig} layoutRootPath="v2" style={{ padding: 0, marginRight: "15px", color: "#ffffff" }} />
+          </Space>
+        </div>
+      </div>
+    </Layout.Header>
+  );
+};
+
+export default Header;