aldehyde 0.2.197 → 0.2.199

package/src/aldehyde/layout2/sider.tsx

@@ -1,335 +1,335 @@
-import { ConfigProvider, Layout, Menu, MenuProps, theme, Tooltip } from "antd";
-import React, { useEffect, useRef, useState } from "react";
-import { MenuType } from "./type/layout.type";
-import { NavLink, useParams, useSearchParams } from "react-router-dom";
-import {
-  getLeftMostRouteInfo,
-  getTargetMenuItemIdRouteList,
-  handlePropsMenuToAntdMenu,
-} from "./util/menu.util";
-import { useLocale } from "../locale/useLocale";
-import { generate } from "@ant-design/colors";
-import {
-  MenuItemIdToFirstFloorIdxMapType,
-  useLayoutContext,
-} from "./LayoutContext";
-
-type SiderPropsType = {
-  menuList: MenuType[];
-  style?: typeof Layout.Sider.defaultProps.style;
-};
-
-type MenuItem = Required<MenuProps>["items"][number];
-
-type SecoundFloorMenuList = MenuType[][];
-
-const items: MenuItem[] = [
-  {
-    label: "Navigation One",
-    key: "mail",
-  },
-  {
-    label: "Navigation Two",
-    key: "app",
-    disabled: false,
-  },
-  {
-    label: "Navigation Two",
-    key: "app2",
-    disabled: false,
-  },
-  {
-    label: "Navigation Two",
-    key: "app3",
-    disabled: false,
-  },
-  {
-    label: "Navigation Two",
-    key: "app4",
-    disabled: true,
-  },
-  {
-    label: "Navigation Two",
-    key: "app5",
-    disabled: true,
-  },
-  {
-    label: "Navigation Two",
-    key: "app6",
-    disabled: true,
-  },
-  {
-    label: "Navigation Two",
-    key: "app7",
-    disabled: true,
-  },
-  {
-    label: "Navigation Two",
-    key: "app8",
-    disabled: true,
-  },
-  {
-    label: "Navigation Two",
-    key: "app9",
-    disabled: true,
-  },
-  {
-    label: "Navigation Two",
-    key: "app10",
-    disabled: true,
-  },
-  {
-    label: "Navigation Two",
-    key: "app11",
-    disabled: true,
-  },
-  {
-    label: "Navigation Two",
-    key: "app12",
-    disabled: false,
-  },
-  {
-    label: "Navigation Two",
-    key: "app13",
-    disabled: false,
-  },
-  {
-    label: "Navigation Two",
-    key: "app14",
-    disabled: false,
-  },
-  {
-    label: "Navigation Two",
-    key: "app15",
-    disabled: false,
-  },
-  {
-    label: "Navigation Two",
-    key: "app16",
-    disabled: false,
-  },
-  {
-    label: "Navigation Two",
-    key: "app17",
-    disabled: false,
-  },
-  {
-    label: "Navigation Two",
-    key: "app18",
-    disabled: false,
-  },
-  {
-    label: "Navigation Three - Submenu",
-    key: "SubMenu",
-    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>
-    ),
-  },
-];
-
-/**
- * @param menuList 自定义的menu
- * @returns 下标为 n 对应第 n 个根节点对应的第二层级menu
- * @desc 获取第二层级 menu 与其下标映射的数组
- */
-const getSecoundFloorMenuList = (
-  menuList: MenuType[]
-): SecoundFloorMenuList => {
-  const secoundFloorMenuList: SecoundFloorMenuList = Array.from({
-    length: menuList.length,
-  }).map(() =>
-    Array.from({
-      length: 0,
-    })
-  );
-
-  for (let i = 0; i < menuList.length; i++) {
-    const menuItem = menuList[i];
-
-    Array.isArray(menuItem.children) &&
-      (secoundFloorMenuList[i] = menuItem.children);
-  }
-
-  return secoundFloorMenuList;
-};
-
-const { useToken } = theme;
-
-const Sider: React.FC<SiderPropsType> = ({ menuList, style }) => {
-  const { setDocumentTitle, menuItemIdToFirstFloorIdxMap } = useLayoutContext();
-
-  // token
-  const {
-    token: { colorPrimary },
-  } = useToken();
-  const colors = generate(colorPrimary);
-
-  // translate
-  const { translate, getLocale } = useLocale();
-
-  const secoundFloorMenuList = useRef<SecoundFloorMenuList>([]);
-  useEffect(() => {
-    secoundFloorMenuList.current = getSecoundFloorMenuList(menuList);
-  }, [menuList]);
-
-  // menu
-  const [menu, setMenu] = useState<MenuItem[]>([]);
-  const getMenuWithSecoundFloor = (
-    secoundFloorMenu: SecoundFloorMenuList[number]
-  ) => {
-    return handlePropsMenuToAntdMenu(secoundFloorMenu, (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 (Array.isArray(children) && !children.length)
-        return (
-          <Tooltip title={translate("${" + label + "}")}>
-            <NavLink
-              to={`/${path}`}
-              target={target}
-              style={{
-                color: "inherit",
-                width: "100%",
-                height: "100%",
-                display: "block",
-                textOverflow: "ellipsis",
-                overflow: "hidden",
-              }}
-            >
-              {translate("${" + label + "}")}
-            </NavLink>
-          </Tooltip>
-        );
-
-      return translate("${" + label + "}");
-    });
-  };
-
-  // menu select
-  const [selectedKeys, setSelectedKeys] = useState([]);
-  const { sourceId } = useParams();
-  const [search, setSearch] = useSearchParams();
-  const menuId: string = search.get("menuId");
-  useEffect(() => {
-    if (!menuList.length) {
-      setMenu([]);
-      return;
-    }
-
-    const targetId =
-      menuId !== undefined ? menuId : sourceId !== undefined ? sourceId : null;
-
-    if (!targetId) return;
-
-    const curSiderMenuList =
-      secoundFloorMenuList.current[menuItemIdToFirstFloorIdxMap[targetId]];
-
-    if (curSiderMenuList) {
-      setMenu(getMenuWithSecoundFloor(curSiderMenuList));
-      setSelectedKeys(getTargetMenuItemIdRouteList(curSiderMenuList, targetId));
-    }
-  }, [sourceId, menuId, menuList, getLocale()]);
-
-  // default select keys
-  useEffect(() => {
-    if (sourceId === undefined) {
-      if (secoundFloorMenuList.current[0] !== undefined) {
-        setMenu(getMenuWithSecoundFloor(secoundFloorMenuList.current[0]));
-        setSelectedKeys([]);
-      }
-      setDocumentTitle("");
-    } else {
-      const documentTitle =
-        menuList[menuItemIdToFirstFloorIdxMap[sourceId]]?.label;
-      setDocumentTitle(translate("${" + documentTitle + "}"));
-    }
-  }, [menuList, sourceId, getLocale()]);
-
-  const menuClick = (openKeys) => {
-    setSelectedKeys([...openKeys]);
-  };
-
-  return (
-    <Layout.Sider
-      style={{
-        background: colors[0],
-        // color: "#FFFFFF",
-        borderInlineEnd: "1px solid rgba(5, 5, 5, 0.06)",
-        overflowY: "auto",
-        ...style,
-      }}
-    >
-      <ConfigProvider
-        theme={{
-          components: {
-            Menu: {
-              itemBg: "transparent",
-              // popupBg: "rgba(221, 240, 228)",
-              // subMenuItemBg: "rgba(221, 240, 228, .3)",
-              itemHoverColor: "#222",
-              itemColor: "#222",
-              itemSelectedBg: colors[1],
-              groupTitleColor: "#222",
-              // horizontalItemHoverColor: "rgba(221, 240, 228)",
-              // horizontalItemSelectedColor: "rgba(221, 240, 228)",
-              fontSize: 14,
-            },
-          },
-        }}
-      >
-        <Menu
-          mode="inline"
-          items={menu}
-          selectedKeys={selectedKeys}
-          openKeys={selectedKeys}
-          inlineCollapsed={false}
-          style={{
-            userSelect: "none",
-            borderInlineEnd: "none",
-          }}
-          onOpenChange={menuClick}
-        />
-      </ConfigProvider>
-    </Layout.Sider>
-  );
-};
-
-export default Sider;
+import { ConfigProvider, Layout, Menu, MenuProps, theme, Tooltip } from "antd";
+import React, { useEffect, useRef, useState } from "react";
+import { MenuType } from "./type/layout.type";
+import { NavLink, useParams, useSearchParams } from "react-router-dom";
+import {
+  getLeftMostRouteInfo,
+  getTargetMenuItemIdRouteList,
+  handlePropsMenuToAntdMenu,
+} from "./util/menu.util";
+import { useLocale } from "../locale/useLocale";
+import { generate } from "@ant-design/colors";
+import {
+  MenuItemIdToFirstFloorIdxMapType,
+  useLayoutContext,
+} from "./LayoutContext";
+
+type SiderPropsType = {
+  menuList: MenuType[];
+  style?: typeof Layout.Sider.defaultProps.style;
+};
+
+type MenuItem = Required<MenuProps>["items"][number];
+
+type SecoundFloorMenuList = MenuType[][];
+
+const items: MenuItem[] = [
+  {
+    label: "Navigation One",
+    key: "mail",
+  },
+  {
+    label: "Navigation Two",
+    key: "app",
+    disabled: false,
+  },
+  {
+    label: "Navigation Two",
+    key: "app2",
+    disabled: false,
+  },
+  {
+    label: "Navigation Two",
+    key: "app3",
+    disabled: false,
+  },
+  {
+    label: "Navigation Two",
+    key: "app4",
+    disabled: true,
+  },
+  {
+    label: "Navigation Two",
+    key: "app5",
+    disabled: true,
+  },
+  {
+    label: "Navigation Two",
+    key: "app6",
+    disabled: true,
+  },
+  {
+    label: "Navigation Two",
+    key: "app7",
+    disabled: true,
+  },
+  {
+    label: "Navigation Two",
+    key: "app8",
+    disabled: true,
+  },
+  {
+    label: "Navigation Two",
+    key: "app9",
+    disabled: true,
+  },
+  {
+    label: "Navigation Two",
+    key: "app10",
+    disabled: true,
+  },
+  {
+    label: "Navigation Two",
+    key: "app11",
+    disabled: true,
+  },
+  {
+    label: "Navigation Two",
+    key: "app12",
+    disabled: false,
+  },
+  {
+    label: "Navigation Two",
+    key: "app13",
+    disabled: false,
+  },
+  {
+    label: "Navigation Two",
+    key: "app14",
+    disabled: false,
+  },
+  {
+    label: "Navigation Two",
+    key: "app15",
+    disabled: false,
+  },
+  {
+    label: "Navigation Two",
+    key: "app16",
+    disabled: false,
+  },
+  {
+    label: "Navigation Two",
+    key: "app17",
+    disabled: false,
+  },
+  {
+    label: "Navigation Two",
+    key: "app18",
+    disabled: false,
+  },
+  {
+    label: "Navigation Three - Submenu",
+    key: "SubMenu",
+    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>
+    ),
+  },
+];
+
+/**
+ * @param menuList 自定义的menu
+ * @returns 下标为 n 对应第 n 个根节点对应的第二层级menu
+ * @desc 获取第二层级 menu 与其下标映射的数组
+ */
+const getSecoundFloorMenuList = (
+  menuList: MenuType[]
+): SecoundFloorMenuList => {
+  const secoundFloorMenuList: SecoundFloorMenuList = Array.from({
+    length: menuList.length,
+  }).map(() =>
+    Array.from({
+      length: 0,
+    })
+  );
+
+  for (let i = 0; i < menuList.length; i++) {
+    const menuItem = menuList[i];
+
+    Array.isArray(menuItem.children) &&
+      (secoundFloorMenuList[i] = menuItem.children);
+  }
+
+  return secoundFloorMenuList;
+};
+
+const { useToken } = theme;
+
+const Sider: React.FC<SiderPropsType> = ({ menuList, style }) => {
+  const { setDocumentTitle, menuItemIdToFirstFloorIdxMap } = useLayoutContext();
+
+  // token
+  const {
+    token: { colorPrimary },
+  } = useToken();
+  const colors = generate(colorPrimary);
+
+  // translate
+  const { translate, getLocale } = useLocale();
+
+  const secoundFloorMenuList = useRef<SecoundFloorMenuList>([]);
+  useEffect(() => {
+    secoundFloorMenuList.current = getSecoundFloorMenuList(menuList);
+  }, [menuList]);
+
+  // menu
+  const [menu, setMenu] = useState<MenuItem[]>([]);
+  const getMenuWithSecoundFloor = (
+    secoundFloorMenu: SecoundFloorMenuList[number]
+  ) => {
+    return handlePropsMenuToAntdMenu(secoundFloorMenu, (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 (Array.isArray(children) && !children.length)
+        return (
+          <Tooltip title={translate("${" + label + "}")}>
+            <NavLink
+              to={`/${path}`}
+              target={target}
+              style={{
+                color: "inherit",
+                width: "100%",
+                height: "100%",
+                display: "block",
+                textOverflow: "ellipsis",
+                overflow: "hidden",
+              }}
+            >
+              {translate("${" + label + "}")}
+            </NavLink>
+          </Tooltip>
+        );
+
+      return translate("${" + label + "}");
+    });
+  };
+
+  // menu select
+  const [selectedKeys, setSelectedKeys] = useState([]);
+  const { sourceId } = useParams();
+  const [search, setSearch] = useSearchParams();
+  const menuId: string = search.get("menuId");
+  useEffect(() => {
+    if (!menuList.length) {
+      setMenu([]);
+      return;
+    }
+
+    const targetId =
+      menuId !== undefined ? menuId : sourceId !== undefined ? sourceId : null;
+
+    if (!targetId) return;
+
+    const curSiderMenuList =
+      secoundFloorMenuList.current[menuItemIdToFirstFloorIdxMap[targetId]];
+
+    if (curSiderMenuList) {
+      setMenu(getMenuWithSecoundFloor(curSiderMenuList));
+      setSelectedKeys(getTargetMenuItemIdRouteList(curSiderMenuList, targetId));
+    }
+  }, [sourceId, menuId, menuList, getLocale()]);
+
+  // default select keys
+  useEffect(() => {
+    if (sourceId === undefined) {
+      if (secoundFloorMenuList.current[0] !== undefined) {
+        setMenu(getMenuWithSecoundFloor(secoundFloorMenuList.current[0]));
+        setSelectedKeys([]);
+      }
+      setDocumentTitle("");
+    } else {
+      const documentTitle =
+        menuList[menuItemIdToFirstFloorIdxMap[sourceId]]?.label;
+      setDocumentTitle(translate("${" + documentTitle + "}"));
+    }
+  }, [menuList, sourceId, getLocale()]);
+
+  const menuClick = (openKeys) => {
+    setSelectedKeys([...openKeys]);
+  };
+
+  return (
+    <Layout.Sider
+      style={{
+        background: colors[0],
+        // color: "#FFFFFF",
+        borderInlineEnd: "1px solid rgba(5, 5, 5, 0.06)",
+        overflowY: "auto",
+        ...style,
+      }}
+    >
+      <ConfigProvider
+        theme={{
+          components: {
+            Menu: {
+              itemBg: "transparent",
+              // popupBg: "rgba(221, 240, 228)",
+              // subMenuItemBg: "rgba(221, 240, 228, .3)",
+              itemHoverColor: "#222",
+              itemColor: "#222",
+              itemSelectedBg: colors[1],
+              groupTitleColor: "#222",
+              // horizontalItemHoverColor: "rgba(221, 240, 228)",
+              // horizontalItemSelectedColor: "rgba(221, 240, 228)",
+              fontSize: 14,
+            },
+          },
+        }}
+      >
+        <Menu
+          mode="inline"
+          items={menu}
+          selectedKeys={selectedKeys}
+          openKeys={selectedKeys}
+          inlineCollapsed={false}
+          style={{
+            userSelect: "none",
+            borderInlineEnd: "none",
+          }}
+          onOpenChange={menuClick}
+        />
+      </ConfigProvider>
+    </Layout.Sider>
+  );
+};
+
+export default Sider;