aldehyde 0.2.197 → 0.2.199

package/src/aldehyde/layout2/header.tsx

@@ -1,371 +1,371 @@
-import {
-  ConfigProvider,
-  Flex,
-  Layout,
-  Menu,
-  MenuProps,
-  theme,
-  Tooltip,
-} from "antd";
-import React, { useEffect, useState } 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 UserBar from "../layout/menu/user-bar";
-import UserButton from "./components/userButton";
-import homePng from "./imgs/home.png";
-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 "./LayoutContext";
-import { set } from "lodash";
-
-type HeaderPropsType = {
-  systemName: string;
-  menuList: MenuType[];
-  style?: typeof Layout.Header.defaultProps.style;
-};
-
-type MenuItem = Required<MenuProps>["items"][number];
-
-// const items: MenuItem[] = [
-//   {
-//     label: "Navigation One",
-//     key: "mail",
-//     icon: <img src={png1} alt="1" width={16} height={16}></img>,
-//   },
-//   {
-//     label: "Navigation Two",
-//     key: "app",
-//     disabled: false,
-//     icon: <img src={png2} alt="2" width={16} height={16}></img>,
-//   },
-//   {
-//     label: "Navigation Two",
-//     key: "app2",
-//     disabled: false,
-//     icon: <img src={png3} alt="2" width={16} height={16}></img>,
-//   },
-//   {
-//     label: "Navigation Two",
-//     key: "app3",
-//     disabled: false,
-//     icon: <img src={png4} alt="2" width={16} height={16}></img>,
-//   },
-//   {
-//     label: "Navigation Two",
-//     key: "app4",
-//     disabled: true,
-//     icon: <img src={png5} alt="2" width={16} height={16}></img>,
-//   },
-//   {
-//     label: "Navigation Three - Submenu",
-//     key: "SubMenu",
-//     icon: <img src={png6} alt="2" width={16} height={16}></img>,
-//     children: [
-//       {
-//         type: "group",
-//         label: "Item 1",
-//         children: [
-//           { label: "Option 1", key: "setting:1" },
-//           { label: "Option 2", key: "setting:2" },
-//         ],
-//       },
-//       {
-//         type: "group",
-//         label: "Item 2",
-//         children: [
-//           { label: "Option 3", key: "setting:3" },
-//           { label: "Option 4", key: "setting:4" },
-//         ],
-//       },
-//     ],
-//   },
-//   {
-//     key: "alipay",
-//     label: (
-//       <a href="https://ant.design" target="_blank" rel="noopener noreferrer">
-//         Navigation Four - Link
-//       </a>
-//     ),
-//     icon: <img src={png6} alt="2" width={16} height={16}></img>,
-//   },
-// ];
-
-const { useToken } = theme;
-
-const Header: React.FC<HeaderPropsType> = ({ systemName, menuList, style }) => {
-  const { setDocumentTitle, menuItemIdToFirstFloorIdxMap } = useLayoutContext();
-
-  // token
-  const {
-    token: { colorPrimary },
-  } = useToken();
-
-  const colors = generate(colorPrimary);
-  console.log("header", colors);
-
-  // translate
-  const { translate, getLocale } = useLocale();
-
-  const [menu, setMenu] = useState<MenuItem[]>([]);
-  useEffect(() => {
-    setMenu(
-      handlePropsMenuToAntdMenu(
-        menuList,
-        (menuItem, floor) => {
-          const { disabled, label, children } = menuItem;
-
-          if (disabled)
-            return (
-              <div
-                style={{
-                  color: "inherit",
-                  width: "100%",
-                  height: "100%",
-                  display: "block",
-                }}
-              >
-                {translate("${" + label + "}")}
-              </div>
-            );
-
-          const { path, target } = getLeftMostRouteInfo(menuItem);
-
-          if (floor === 0)
-            return path === null ? (
-              <div
-                style={{
-                  color: "inherit",
-                  width: "100%",
-                  height: "100%",
-                  display: "block",
-                }}
-              >
-                {translate("${" + label + "}")}
-              </div>
-            ) : (
-              <NavLink
-                to={`/${path}`}
-                target={target}
-                style={{
-                  color: "inherit",
-                  width: "100%",
-                  height: "100%",
-                  display: "block",
-                }}
-              >
-                {translate("${" + label + "}")}
-              </NavLink>
-            );
-
-          if (Array.isArray(children) && !children.length)
-            return (
-              <NavLink
-                to={`/${path}`}
-                target={target}
-                style={{
-                  color: "inherit",
-                  width: "100%",
-                  height: "100%",
-                  display: "block",
-                }}
-              >
-                {translate("${" + label + "}")}
-              </NavLink>
-            );
-
-          return <>{translate("${" + label + "}")}</>;
-        },
-        "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]);
-
-  return (
-    <Layout.Header
-      style={{
-        padding: 0,
-        display: "flex",
-        flexDirection: "row",
-        background: colorPrimary,
-        color: "#FFFFFF",
-        ...style,
-      }}
-    >
-      <NavLink
-        style={{
-          width: "200px",
-          minWidth: "200px",
-          height: "100%",
-          display: "flex",
-          paddingLeft: "10px",
-          alignItems: "center",
-          fontSize: "18px",
-          userSelect: "none",
-          color: "inherit",
-        }}
-        to={"/v2"}
-      >
-        <img
-          src={homePng}
-          alt="home"
-          width={35}
-          height={35}
-          style={{
-            marginRight: 5,
-          }}
-        />
-        <Tooltip title={systemName}>
-          <span
-            style={{
-              width: "100%",
-              height: "100%",
-              overflow: "hidden",
-              textOverflow: "ellipsis",
-              whiteSpace: "nowrap",
-            }}
-          >
-            {systemName}
-          </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[3],
-                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",
-          }}
-        >
-          <div
-            style={{
-              width: "64px",
-              height: "100%",
-              display: "flex",
-              justifyContent: "center",
-              alignItems: "center",
-            }}
-          >
-            <L2MenuQuickBar></L2MenuQuickBar>
-          </div>
-          <div
-            style={{
-              width: "64px",
-              height: "100%",
-              display: "flex",
-              justifyContent: "center",
-              alignItems: "center",
-            }}
-          >
-            <L2MenuMessageBar></L2MenuMessageBar>
-          </div>
-          <div
-            style={{
-              width: "64px",
-              height: "100%",
-              display: "flex",
-              justifyContent: "center",
-              alignItems: "center",
-            }}
-          >
-            <LocaleButton
-              shape="default"
-              size="large"
-              type="text"
-              style={{
-                width: "100%",
-                height: "100%",
-                boxSizing: "border-box",
-                padding: "0 10px",
-                borderRadius: 0,
-                color: "#fff",
-              }}
-            ></LocaleButton>
-          </div>
-          <div
-            style={{
-              height: "100%",
-              display: "flex",
-              justifyContent: "center",
-              alignItems: "center",
-            }}
-          >
-            <UserButton></UserButton>
-          </div>
-        </div>
-      </div>
-    </Layout.Header>
-  );
-};
-
-export default Header;
+import {
+  ConfigProvider,
+  Flex,
+  Layout,
+  Menu,
+  MenuProps,
+  theme,
+  Tooltip,
+} from "antd";
+import React, { useEffect, useState } 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 UserBar from "../layout/menu/user-bar";
+import UserButton from "./components/userButton";
+import homePng from "./imgs/home.png";
+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 "./LayoutContext";
+import { set } from "lodash";
+
+type HeaderPropsType = {
+  systemName: string;
+  menuList: MenuType[];
+  style?: typeof Layout.Header.defaultProps.style;
+};
+
+type MenuItem = Required<MenuProps>["items"][number];
+
+// const items: MenuItem[] = [
+//   {
+//     label: "Navigation One",
+//     key: "mail",
+//     icon: <img src={png1} alt="1" width={16} height={16}></img>,
+//   },
+//   {
+//     label: "Navigation Two",
+//     key: "app",
+//     disabled: false,
+//     icon: <img src={png2} alt="2" width={16} height={16}></img>,
+//   },
+//   {
+//     label: "Navigation Two",
+//     key: "app2",
+//     disabled: false,
+//     icon: <img src={png3} alt="2" width={16} height={16}></img>,
+//   },
+//   {
+//     label: "Navigation Two",
+//     key: "app3",
+//     disabled: false,
+//     icon: <img src={png4} alt="2" width={16} height={16}></img>,
+//   },
+//   {
+//     label: "Navigation Two",
+//     key: "app4",
+//     disabled: true,
+//     icon: <img src={png5} alt="2" width={16} height={16}></img>,
+//   },
+//   {
+//     label: "Navigation Three - Submenu",
+//     key: "SubMenu",
+//     icon: <img src={png6} alt="2" width={16} height={16}></img>,
+//     children: [
+//       {
+//         type: "group",
+//         label: "Item 1",
+//         children: [
+//           { label: "Option 1", key: "setting:1" },
+//           { label: "Option 2", key: "setting:2" },
+//         ],
+//       },
+//       {
+//         type: "group",
+//         label: "Item 2",
+//         children: [
+//           { label: "Option 3", key: "setting:3" },
+//           { label: "Option 4", key: "setting:4" },
+//         ],
+//       },
+//     ],
+//   },
+//   {
+//     key: "alipay",
+//     label: (
+//       <a href="https://ant.design" target="_blank" rel="noopener noreferrer">
+//         Navigation Four - Link
+//       </a>
+//     ),
+//     icon: <img src={png6} alt="2" width={16} height={16}></img>,
+//   },
+// ];
+
+const { useToken } = theme;
+
+const Header: React.FC<HeaderPropsType> = ({ systemName, menuList, style }) => {
+  const { setDocumentTitle, menuItemIdToFirstFloorIdxMap } = useLayoutContext();
+
+  // token
+  const {
+    token: { colorPrimary },
+  } = useToken();
+
+  const colors = generate(colorPrimary);
+  console.log("header", colors);
+
+  // translate
+  const { translate, getLocale } = useLocale();
+
+  const [menu, setMenu] = useState<MenuItem[]>([]);
+  useEffect(() => {
+    setMenu(
+      handlePropsMenuToAntdMenu(
+        menuList,
+        (menuItem, floor) => {
+          const { disabled, label, children } = menuItem;
+
+          if (disabled)
+            return (
+              <div
+                style={{
+                  color: "inherit",
+                  width: "100%",
+                  height: "100%",
+                  display: "block",
+                }}
+              >
+                {translate("${" + label + "}")}
+              </div>
+            );
+
+          const { path, target } = getLeftMostRouteInfo(menuItem);
+
+          if (floor === 0)
+            return path === null ? (
+              <div
+                style={{
+                  color: "inherit",
+                  width: "100%",
+                  height: "100%",
+                  display: "block",
+                }}
+              >
+                {translate("${" + label + "}")}
+              </div>
+            ) : (
+              <NavLink
+                to={`/${path}`}
+                target={target}
+                style={{
+                  color: "inherit",
+                  width: "100%",
+                  height: "100%",
+                  display: "block",
+                }}
+              >
+                {translate("${" + label + "}")}
+              </NavLink>
+            );
+
+          if (Array.isArray(children) && !children.length)
+            return (
+              <NavLink
+                to={`/${path}`}
+                target={target}
+                style={{
+                  color: "inherit",
+                  width: "100%",
+                  height: "100%",
+                  display: "block",
+                }}
+              >
+                {translate("${" + label + "}")}
+              </NavLink>
+            );
+
+          return <>{translate("${" + label + "}")}</>;
+        },
+        "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]);
+
+  return (
+    <Layout.Header
+      style={{
+        padding: 0,
+        display: "flex",
+        flexDirection: "row",
+        background: colorPrimary,
+        color: "#FFFFFF",
+        ...style,
+      }}
+    >
+      <NavLink
+        style={{
+          width: "200px",
+          minWidth: "200px",
+          height: "100%",
+          display: "flex",
+          paddingLeft: "10px",
+          alignItems: "center",
+          fontSize: "18px",
+          userSelect: "none",
+          color: "inherit",
+        }}
+        to={"/v2"}
+      >
+        <img
+          src={homePng}
+          alt="home"
+          width={35}
+          height={35}
+          style={{
+            marginRight: 5,
+          }}
+        />
+        <Tooltip title={systemName}>
+          <span
+            style={{
+              width: "100%",
+              height: "100%",
+              overflow: "hidden",
+              textOverflow: "ellipsis",
+              whiteSpace: "nowrap",
+            }}
+          >
+            {systemName}
+          </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[3],
+                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",
+          }}
+        >
+          <div
+            style={{
+              width: "64px",
+              height: "100%",
+              display: "flex",
+              justifyContent: "center",
+              alignItems: "center",
+            }}
+          >
+            <L2MenuQuickBar></L2MenuQuickBar>
+          </div>
+          <div
+            style={{
+              width: "64px",
+              height: "100%",
+              display: "flex",
+              justifyContent: "center",
+              alignItems: "center",
+            }}
+          >
+            <L2MenuMessageBar></L2MenuMessageBar>
+          </div>
+          <div
+            style={{
+              width: "64px",
+              height: "100%",
+              display: "flex",
+              justifyContent: "center",
+              alignItems: "center",
+            }}
+          >
+            <LocaleButton
+              shape="default"
+              size="large"
+              type="text"
+              style={{
+                width: "100%",
+                height: "100%",
+                boxSizing: "border-box",
+                padding: "0 10px",
+                borderRadius: 0,
+                color: "#fff",
+              }}
+            ></LocaleButton>
+          </div>
+          <div
+            style={{
+              height: "100%",
+              display: "flex",
+              justifyContent: "center",
+              alignItems: "center",
+            }}
+          >
+            <UserButton></UserButton>
+          </div>
+        </div>
+      </div>
+    </Layout.Header>
+  );
+};
+
+export default Header;