@oceanbase/design 0.1.2 → 0.2.0

package/lib/BasicLayout/index.js

@@ -1,346 +0,0 @@
-var __create = Object.create;
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getProtoOf = Object.getPrototypeOf;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __export = (target, all) => {
-  for (var name in all)
-    __defProp(target, name, { get: all[name], enumerable: true });
-};
-var __copyProps = (to, from, except, desc) => {
-  if (from && typeof from === "object" || typeof from === "function") {
-    for (let key of __getOwnPropNames(from))
-      if (!__hasOwnProp.call(to, key) && key !== except)
-        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
-  }
-  return to;
-};
-var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
-  // If the importer is in node compatibility mode or this is not an ESM
-  // file that has been converted to a CommonJS file using a Babel-
-  // compatible transform (i.e. "__esModule" has not been set), then set
-  // "default" to the CommonJS "module.exports" for node compatibility.
-  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
-  mod
-));
-var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-
-// src/BasicLayout/index.tsx
-var BasicLayout_exports = {};
-__export(BasicLayout_exports, {
-  default: () => BasicLayout_default
-});
-module.exports = __toCommonJS(BasicLayout_exports);
-var import_icons = require("@ant-design/icons");
-var import_pro_components = require("@ant-design/pro-components");
-var import_util = require("@oceanbase/util");
-var import_antd = require("antd");
-var import_classnames = __toESM(require("classnames"));
-var import_lodash = require("lodash");
-var import_path_to_regexp = require("path-to-regexp");
-var import_react = __toESM(require("react"));
-var import_LocaleWrapper = __toESM(require("../locale/LocaleWrapper"));
-var import_StaticFunction = require("../StaticFunction");
-var import_util2 = require("../_util");
-var import_useHistory = __toESM(require("../_util/useHistory"));
-var import_Header = __toESM(require("./Header"));
-var import_index = require("./index.less");
-var import_zh_CN = __toESM(require("./locale/zh-CN"));
-var { Content, Sider } = import_antd.Layout;
-var { SubMenu, Item } = import_antd.Menu;
-var prefix = (0, import_util2.getPrefix)("layout");
-var BasicLayout = ({
-  children,
-  location: { pathname } = {},
-  banner,
-  iconUrl,
-  logoUrl,
-  simpleLogoUrl,
-  topHeader,
-  menus = [],
-  defaultCollapsed = false,
-  defaultSelectedKeys = [],
-  defaultOpenKeys = [],
-  sideHeader,
-  subSideMenuProps,
-  subSideMenus,
-  className,
-  ...restProps
-}) => {
-  const history = (0, import_useHistory.default)();
-  const [collapsed, setCollapsed] = (0, import_react.useState)(defaultCollapsed);
-  const [selectedKeys, setSelectedKeys] = (0, import_react.useState)(defaultSelectedKeys);
-  const [openKeys, setOpenKeys] = (0, import_react.useState)(defaultOpenKeys);
-  (0, import_react.useEffect)(() => {
-    const selectedMenuKeys = (0, import_util2.urlToList)(pathname).map((itemPath) => getMenuMatches(getFlatMenuKeys(menus), itemPath).pop()) || [];
-    const newSelectedKeys = selectedMenuKeys.filter((item) => item);
-    if (newSelectedKeys.length > 0) {
-      setSelectedKeys([newSelectedKeys[newSelectedKeys.length - 1]]);
-    } else {
-      setSelectedKeys([]);
-    }
-  }, [pathname]);
-  const menuProps = {
-    selectedKeys,
-    openKeys,
-    onSelect: ({ selectedKeys: newSelectedKeys }) => {
-      setSelectedKeys(newSelectedKeys);
-    },
-    onOpenChange: (newOpenKeys) => {
-      setOpenKeys(newOpenKeys);
-    }
-  };
-  const getMenuMatches = (flatMenuKeys, path) => {
-    return flatMenuKeys.filter((item) => {
-      return (0, import_path_to_regexp.pathToRegexp)(item).test(path);
-    });
-  };
-  const getFlatMenuKeys = (menuList) => {
-    let keys = [];
-    (menuList || []).forEach((item) => {
-      if (item.children) {
-        keys = keys.concat(getFlatMenuKeys(item.children));
-      }
-      keys.push(item.link || "");
-    });
-    return keys;
-  };
-  const renderIcon = (item, isSubSider = false) => {
-    const realSelectedKeys = isSubSider ? subSideMenuProps.selectedKeys || subSideMenuProps.defaultSelectedKeys : selectedKeys;
-    return realSelectedKeys.includes(item.link) || (0, import_lodash.some)(item.children || [], (child) => realSelectedKeys.includes(child.link)) ? item.selectedIcon || item.icon : item.icon;
-  };
-  const renderMenu = (data) => {
-    return data.reduce((pre, item) => {
-      var _a;
-      const { accessible = true } = item;
-      if (item.children && ((0, import_util.isNullValue)(item.accessible) ? (
-        // 如果子菜单本身没有设置 accessible，但只要其 children 之一可访问，则子菜单仍然展示
-        (_a = item.children) == null ? void 0 : _a.some(({ accessible: childAccessible = true }) => childAccessible)
-      ) : item.accessible)) {
-        pre.push(
-          /* @__PURE__ */ import_react.default.createElement(
-            SubMenu,
-            {
-              "data-testid": "menu.sub",
-              key: item.link,
-              title: /* @__PURE__ */ import_react.default.createElement(
-                import_antd.Tooltip,
-                {
-                  placement: "right",
-                  title: item.title,
-                  ...(0, import_util2.isEnglish)() && item.title && item.title.length > 15 ? {} : {
-                    visible: false,
-                    // Support for antd 5.0
-                    open: false
-                  },
-                  getPopupContainer: () => document.body
-                },
-                /* @__PURE__ */ import_react.default.createElement("span", null, renderIcon(item), /* @__PURE__ */ import_react.default.createElement("span", null, item.title))
-              )
-            },
-            renderMenu(item.children)
-          )
-        );
-      } else if (!item.children && accessible) {
-        pre.push(
-          /* @__PURE__ */ import_react.default.createElement(
-            Item,
-            {
-              "data-testid": "menu.item",
-              key: item.link,
-              onClick: () => {
-                if (pathname !== item.link) {
-                  history.push(item.link);
-                }
-              }
-            },
-            /* @__PURE__ */ import_react.default.createElement(
-              import_antd.Tooltip,
-              {
-                placement: "right",
-                title: item.title,
-                ...(0, import_util2.isEnglish)() && item.title && item.title.length > 20 ? {} : {
-                  visible: false,
-                  // Support for antd 5.0
-                  open: false
-                },
-                getPopupContainer: () => document.body
-              },
-              /* @__PURE__ */ import_react.default.createElement("span", null, renderIcon(item), /* @__PURE__ */ import_react.default.createElement("span", null, item.title))
-            )
-          )
-        );
-      }
-      if (item.divider && accessible) {
-        pre.push(
-          /* @__PURE__ */ import_react.default.createElement(
-            import_antd.Divider,
-            {
-              style: {
-                // 渐变的分隔线
-                borderImage: `linear-gradient(90deg, ${import_StaticFunction.token.colorTextQuaternary} 0%, ${(0, import_pro_components.setAlpha)(
-                  import_StaticFunction.token.colorTextQuaternary,
-                  0
-                )} 100%) 1`
-              }
-            }
-          )
-        );
-      }
-      return pre;
-    }, []);
-  };
-  const renderCollapsedMenu = (data, isSubSider = false) => {
-    return data.reduce((pre, item) => {
-      var _a;
-      const { accessible = true } = item;
-      if (item.children && ((0, import_util.isNullValue)(item.accessible) ? (
-        // 如果子菜单本身没有设置 accessible，但只要其 children 之一可访问，则子菜单仍然展示
-        (_a = item.children) == null ? void 0 : _a.some(({ accessible: childAccessible = true }) => childAccessible)
-      ) : item.accessible)) {
-        pre.push(
-          /* @__PURE__ */ import_react.default.createElement(SubMenu, { key: item.link, title: renderIcon(item, isSubSider) }, renderMenu(item.children))
-        );
-      } else if (!item.children && accessible) {
-        pre.push(
-          /* @__PURE__ */ import_react.default.createElement(
-            Item,
-            {
-              "data-testid": "menu.item",
-              key: item.link,
-              onClick: () => {
-                if (pathname !== item.link) {
-                  history.push(item.link);
-                }
-              }
-            },
-            /* @__PURE__ */ import_react.default.createElement(import_antd.Tooltip, { placement: "right", title: item.title, getPopupContainer: () => document.body }, /* @__PURE__ */ import_react.default.createElement("div", null, renderIcon(item, isSubSider)))
-          )
-        );
-      }
-      if (item.divider && accessible) {
-        pre.push(/* @__PURE__ */ import_react.default.createElement(import_antd.Divider, null));
-      }
-      return pre;
-    }, []);
-  };
-  let siderWidth = 0;
-  if (subSideMenus && menus) {
-    siderWidth = collapsed ? 104 : 192;
-  } else if (subSideMenus && !menus) {
-    siderWidth = 52;
-  } else if (!subSideMenus && menus) {
-    siderWidth = collapsed ? 52 : 192;
-  } else if (!subSideMenus && !menus) {
-    siderWidth = 0;
-  }
-  return /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, banner && /* @__PURE__ */ import_react.default.createElement("div", { className: `${prefix}-banner-wrapper` }, banner), /* @__PURE__ */ import_react.default.createElement(
-    import_antd.Layout,
-    {
-      className: (0, import_classnames.default)(prefix, className, {
-        [`${prefix}-with-banner`]: banner
-      }),
-      ...restProps
-    },
-    /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, /* @__PURE__ */ import_react.default.createElement(
-      import_Header.default,
-      {
-        pathname,
-        iconUrl,
-        logoUrl,
-        simpleLogoUrl,
-        ...topHeader
-      }
-    ), /* @__PURE__ */ import_react.default.createElement("div", null, /* @__PURE__ */ import_react.default.createElement(
-      import_antd.Layout,
-      {
-        className: `${prefix}-content-layout`,
-        style: {
-          marginTop: 48
-        }
-      },
-      (subSideMenus || menus) && /* @__PURE__ */ import_react.default.createElement(
-        Sider,
-        {
-          theme: "light",
-          width: siderWidth,
-          className: (0, import_classnames.default)(`${prefix}-sider`, {
-            [`${prefix}-sider-collapsed`]: collapsed,
-            [`${prefix}-sider-has-sub-sider`]: subSideMenus
-          })
-        },
-        /* @__PURE__ */ import_react.default.createElement("div", { className: `${prefix}-sider-wrapper` }, subSideMenus && /* @__PURE__ */ import_react.default.createElement("div", { className: `${prefix}-sub-sider` }, /* @__PURE__ */ import_react.default.createElement(
-          import_antd.Menu,
-          {
-            ...subSideMenuProps,
-            mode: "vertical",
-            className: `${prefix}-menu-vertical`
-          },
-          renderCollapsedMenu(subSideMenus, true)
-        )), (sideHeader || menus) && /* @__PURE__ */ import_react.default.createElement(
-          "div",
-          {
-            style: {
-              display: "flex",
-              width: "100%"
-            }
-          },
-          /* @__PURE__ */ import_react.default.createElement("div", { className: `${prefix}-sider-content` }, sideHeader && /* @__PURE__ */ import_react.default.createElement("div", { className: `${prefix}-sider-header` }, sideHeader), /* @__PURE__ */ import_react.default.createElement("div", { className: `${prefix}-menu-wrapper` }, collapsed ? /* @__PURE__ */ import_react.default.createElement("div", { className: `${prefix}-menu-collapsed` }, /* @__PURE__ */ import_react.default.createElement(
-            import_antd.Menu,
-            {
-              ...menuProps,
-              mode: "vertical",
-              className: `${prefix}-menu-vertical`
-            },
-            renderCollapsedMenu(menus, false)
-          )) : /* @__PURE__ */ import_react.default.createElement(
-            import_antd.Menu,
-            {
-              ...menuProps,
-              mode: "inline",
-              expandIcon: ({ isOpen }) => {
-                return /* @__PURE__ */ import_react.default.createElement(
-                  import_icons.CaretRightFilled,
-                  {
-                    rotate: isOpen ? 90 : 0,
-                    style: {
-                      fontSize: 12
-                    }
-                  }
-                );
-              },
-              className: `${prefix}-menu`
-            },
-            renderMenu(menus)
-          ))),
-          /* @__PURE__ */ import_react.default.createElement("div", { className: `${prefix}-sider-border` }, /* @__PURE__ */ import_react.default.createElement(
-            "div",
-            {
-              className: `${prefix}-sider-collapse`,
-              onClick: () => {
-                setCollapsed(!collapsed);
-                setOpenKeys([]);
-              }
-            },
-            collapsed ? /* @__PURE__ */ import_react.default.createElement(import_icons.RightOutlined, null) : /* @__PURE__ */ import_react.default.createElement(import_icons.LeftOutlined, null)
-          ))
-        ))
-      ),
-      /* @__PURE__ */ import_react.default.createElement(
-        Content,
-        {
-          className: (0, import_classnames.default)(`${prefix}-content`, `${prefix}-content-${siderWidth}`),
-          style: {
-            marginLeft: siderWidth
-          }
-        },
-        children
-      )
-    )))
-  ));
-};
-var BasicLayout_default = (0, import_LocaleWrapper.default)({
-  componentName: "BasicLayout",
-  defaultLocale: import_zh_CN.default
-})(BasicLayout);