@oceanbase/design 0.1.0

package/lib/BackgroundTaskManager/index.js

@@ -0,0 +1,171 @@
+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/BackgroundTaskManager/index.tsx
+var BackgroundTaskManager_exports = {};
+__export(BackgroundTaskManager_exports, {
+  BackgroundTaskManagerConstants: () => BackgroundTaskManagerConstants,
+  NotificationApi: () => NotificationApi,
+  default: () => BackgroundTaskManager_default
+});
+module.exports = __toCommonJS(BackgroundTaskManager_exports);
+var import_react = __toESM(require("react"));
+var import_antd = require("antd");
+var import_RefreshMan = require("./RefreshMan");
+var import_constants = require("./constants");
+var NotificationApi = /* @__PURE__ */ ((NotificationApi2) => {
+  NotificationApi2["success"] = "success";
+  NotificationApi2["error"] = "error";
+  NotificationApi2["info"] = "info";
+  NotificationApi2["warning"] = "warning";
+  NotificationApi2["open"] = "open";
+  return NotificationApi2;
+})(NotificationApi || {});
+var BackgroundTaskManagerConstants = {
+  REFRESH_FREQUENCY: import_constants.REFRESH_FREQUENCY,
+  NotificationApi
+};
+var BackgroundTaskManager_default = (0, import_react.forwardRef)((props, ref) => {
+  const { rollingFrequency = import_constants.REFRESH_FREQUENCY.EXTREMELY, prefix } = props;
+  const [queue, setQueue] = (0, import_react.useState)({});
+  const [preset, setPreset] = (0, import_react.useState)({});
+  const pushQueue = (0, import_react.useCallback)(
+    (q) => {
+      setQueue({
+        ...queue,
+        ...q
+      });
+    },
+    [queue, setQueue]
+  );
+  const popQueue = (0, import_react.useCallback)(
+    (id) => {
+      delete queue[id];
+      setQueue({ ...queue });
+    },
+    [queue, setQueue]
+  );
+  const taskQueue = (0, import_react.useMemo)(() => {
+    return Object.entries(queue);
+  }, [queue]);
+  const run = (0, import_react.useCallback)(
+    (newPreset) => {
+      if (!!taskQueue.length) {
+        taskQueue == null ? void 0 : taskQueue.forEach(([id, ns]) => {
+          const realPreset = newPreset ?? preset;
+          if (!realPreset[ns]) {
+            console.warn("cannot find preset of namespace: ", ns);
+            return;
+          }
+          const { api, successCb, failedCb } = realPreset[ns];
+          api == null ? void 0 : api({ id }).then((res) => {
+            const { type, config } = successCb(res, id) || {
+              type: null,
+              config: null
+            };
+            if (type) {
+              import_antd.notification[type](config);
+            }
+          }).catch((err) => {
+            if (failedCb) {
+              const { type, config } = failedCb(err, id) || {
+                type: null,
+                config: null
+              };
+              if (type) {
+                import_antd.notification[type](config);
+              }
+            }
+          });
+        });
+      }
+    },
+    [taskQueue, preset]
+  );
+  const pushPreset = (0, import_react.useCallback)(
+    (p) => {
+      const newPreset = {
+        ...preset,
+        ...p
+      };
+      if (Object.keys(newPreset).length === Object.keys(preset).length)
+        return;
+      setPreset(newPreset);
+      run(newPreset);
+    },
+    [preset, setPreset, run]
+  );
+  const fetchPreset = (0, import_react.useCallback)(() => {
+    return preset;
+  }, [preset]);
+  const fetchQueue = (0, import_react.useCallback)(() => {
+    return queue;
+  }, [queue]);
+  const fetchQueueNsById = (0, import_react.useCallback)(
+    (id) => {
+      return queue[id];
+    },
+    [queue]
+  );
+  (0, import_react.useImperativeHandle)(ref, () => ({
+    pushQueue,
+    popQueue,
+    setQueue,
+    pushPreset,
+    setPreset,
+    fetchPreset,
+    fetchQueue,
+    fetchQueueNsById
+  }));
+  const getLocalStorageIds = (0, import_react.useCallback)(() => {
+    const storedIdsStr = window.localStorage.getItem(prefix) || "[]";
+    const storedQueue = JSON.parse(storedIdsStr);
+    return storedQueue;
+  }, []);
+  (0, import_react.useEffect)(() => {
+    const storedQueue = getLocalStorageIds();
+    if (!!Object.keys(storedQueue).length)
+      setQueue(storedQueue);
+  }, [setQueue, getLocalStorageIds]);
+  (0, import_react.useEffect)(() => {
+    const onUnload = () => {
+      window.localStorage.setItem(prefix, JSON.stringify(queue));
+    };
+    window.addEventListener("beforeunload", onUnload);
+    return () => {
+      window.localStorage.setItem(prefix, JSON.stringify(queue));
+      window.removeEventListener("beforeunload", onUnload);
+    };
+  }, [queue, preset]);
+  return /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, !!taskQueue.length && /* @__PURE__ */ import_react.default.createElement(import_RefreshMan.RefreshMan, { run, rollingFrequency }));
+});
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  BackgroundTaskManagerConstants,
+  NotificationApi
+});

package/lib/BasicLayout/Header.d.ts

@@ -0,0 +1,45 @@
+import React from 'react';
+import type { LocaleWrapperProps } from '../locale/LocaleWrapper';
+import type { Locale } from '../interface';
+import './Header.less';
+export declare type OverlayFunc = () => React.ReactElement;
+export interface HeaderLocale {
+    help: string;
+    welcome: string;
+    viewDocs: string;
+    downloadDocs?: string;
+    about: string;
+    version: string;
+    releaseTime: string;
+    company: string;
+    right: string;
+}
+export interface AppData {
+    shortName?: string;
+    version: string;
+    releaseTime: string;
+}
+export interface HeaderProps extends LocaleWrapperProps {
+    showLabel?: boolean;
+    style?: React.CSSProperties;
+    className?: string;
+    title?: React.ReactNode;
+    extra?: React.ReactNode;
+    pathname?: string;
+    welcomePath?: string;
+    docsPath?: string;
+    pdfPath?: string;
+    iconUrl?: string;
+    logoUrl?: string;
+    simpleLogoUrl?: string;
+    username?: string;
+    userMenu?: React.ReactElement | OverlayFunc;
+    appData?: AppData;
+    locale?: HeaderLocale;
+    showHelp?: boolean;
+    showLocale?: boolean;
+    locales?: Locale[];
+    langs?: Locale[];
+}
+declare const _default: any;
+export default _default;

package/lib/BasicLayout/Header.js

@@ -0,0 +1,180 @@
+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/Header.tsx
+var Header_exports = {};
+__export(Header_exports, {
+  default: () => Header_default
+});
+module.exports = __toCommonJS(Header_exports);
+var import_react = __toESM(require("react"));
+var import_antd = require("antd");
+var import_classnames = __toESM(require("classnames"));
+var import_moment = __toESM(require("moment"));
+var import_icons = require("@ant-design/icons");
+var import_icons2 = require("@ant-design/icons");
+var import_react_router_dom = require("react-router-dom");
+var import_LocaleWrapper = __toESM(require("../locale/LocaleWrapper"));
+var import_zh_CN = __toESM(require("./locale/zh-CN"));
+var import_constant = require("../constant");
+var import_util = require("../_util");
+var import_oceanbase_logo = __toESM(require("../assets/logo/oceanbase_logo.svg"));
+var import_user = __toESM(require("../assets/user.svg"));
+var import_LocaleDropdown = __toESM(require("../LocaleDropdown"));
+var import_Header = require("./Header.less");
+var prefix = (0, import_util.getPrefix)("layout-header");
+var Header = ({
+  showLabel = true,
+  title,
+  extra,
+  pathname,
+  welcomePath,
+  docsPath,
+  pdfPath,
+  iconUrl,
+  logoUrl,
+  simpleLogoUrl,
+  username,
+  userMenu,
+  appData = {},
+  locale = {},
+  showHelp = true,
+  // 是否展示国际化切换入口，默认为 false
+  showLocale = false,
+  locales,
+  langs,
+  ...restProps
+}) => {
+  const [visible, setVisible] = (0, import_react.useState)(false);
+  const history = (0, import_react_router_dom.useHistory)();
+  const isWelcome = pathname === welcomePath;
+  const helpMenu = /* @__PURE__ */ import_react.default.createElement(
+    import_antd.Menu,
+    {
+      onClick: ({ key }) => {
+        var _a;
+        if (key === "welcome") {
+          history.push(welcomePath);
+        } else if (key === "viewDocs") {
+          (0, import_util.directTo)(docsPath);
+        } else if (key === "downloadDocs") {
+          const ele = document.createElement("a");
+          ele.setAttribute("href", pdfPath);
+          ele.setAttribute("download", ((_a = pdfPath == null ? void 0 : pdfPath.split("/")) == null ? void 0 : _a.pop()) || "Docs.pdf");
+          ele.click();
+          ele.remove();
+        } else if (key === "about") {
+          setVisible(true);
+        }
+      }
+    },
+    welcomePath && /* @__PURE__ */ import_react.default.createElement(import_antd.Menu.Item, { key: "welcome" }, locale.welcome),
+    pdfPath && /* @__PURE__ */ import_react.default.createElement(import_antd.Menu.Item, { key: "downloadDocs" }, locale.downloadDocs),
+    /* @__PURE__ */ import_react.default.createElement(import_antd.Menu.Item, { key: "about" }, `${locale.about}${appData.shortName ? ` ${appData.shortName}` : ""}`)
+  );
+  return /* @__PURE__ */ import_react.default.createElement(
+    "div",
+    {
+      ...restProps,
+      className: (0, import_classnames.default)(`${prefix}`, {
+        [`${prefix}-welcome`]: isWelcome
+      })
+    },
+    /* @__PURE__ */ import_react.default.createElement("div", { className: `${prefix}-content` }, /* @__PURE__ */ import_react.default.createElement(
+      "img",
+      {
+        src: simpleLogoUrl,
+        alt: "",
+        onClick: () => {
+          history.push("/");
+        },
+        className: `${prefix}-logo`
+      }
+    ), title && /* @__PURE__ */ import_react.default.createElement("div", { className: `${prefix}-title` }, title), showLabel ? /* @__PURE__ */ import_react.default.createElement("div", { className: `${prefix}-extra ${prefix}-extra-with-label` }, extra, showHelp && /* @__PURE__ */ import_react.default.createElement(import_antd.Dropdown, { overlay: helpMenu }, /* @__PURE__ */ import_react.default.createElement(import_antd.Space, { className: `${prefix}-extra-item` }, /* @__PURE__ */ import_react.default.createElement(import_icons2.BulbOutlined, null), /* @__PURE__ */ import_react.default.createElement("span", { "data-testid": "help" }, locale.help))), showLocale && /* @__PURE__ */ import_react.default.createElement("span", { className: `${prefix}-extra-item` }, /* @__PURE__ */ import_react.default.createElement(import_LocaleDropdown.default, { locales: locales || langs })), userMenu ? /* @__PURE__ */ import_react.default.createElement(import_antd.Dropdown, { overlay: userMenu }, /* @__PURE__ */ import_react.default.createElement(import_antd.Button, { shape: "round", size: "small" }, /* @__PURE__ */ import_react.default.createElement(import_antd.Space, { className: `${prefix}-extra-item` }, /* @__PURE__ */ import_react.default.createElement(import_icons2.UserOutlined, null), /* @__PURE__ */ import_react.default.createElement("span", null, username)))) : (
+      // userMenu username 都不存在时，不展示该项
+      /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, username ? /* @__PURE__ */ import_react.default.createElement(import_antd.Button, { shape: "round", size: "small" }, /* @__PURE__ */ import_react.default.createElement(import_antd.Space, { className: `${prefix}-extra-item` }, /* @__PURE__ */ import_react.default.createElement(import_icons2.UserOutlined, null), /* @__PURE__ */ import_react.default.createElement("span", null, username))) : null)
+    )) : /* @__PURE__ */ import_react.default.createElement("div", { className: `${prefix}-extra` }, /* @__PURE__ */ import_react.default.createElement("span", { className: `${prefix}-extra-item` }, /* @__PURE__ */ import_react.default.createElement(import_antd.Dropdown, { overlay: helpMenu }, /* @__PURE__ */ import_react.default.createElement("span", { className: `${prefix}-extra-icon-wrapper` }, /* @__PURE__ */ import_react.default.createElement(import_icons.BulbFilled, null)))), docsPath && /* @__PURE__ */ import_react.default.createElement(import_antd.Tooltip, { title: locale.viewDocs }, /* @__PURE__ */ import_react.default.createElement(
+      "span",
+      {
+        className: `${prefix}-extra-item`,
+        onClick: () => {
+          (0, import_util.directTo)(docsPath);
+        }
+      },
+      /* @__PURE__ */ import_react.default.createElement("span", { className: `${prefix}-extra-icon-wrapper` }, /* @__PURE__ */ import_react.default.createElement(import_icons.ReadFilled, null))
+    )), showLocale && /* @__PURE__ */ import_react.default.createElement("span", { className: `${prefix}-extra-item` }, /* @__PURE__ */ import_react.default.createElement(import_LocaleDropdown.default, { showLabel: true, locales: locales || langs })), userMenu ? /* @__PURE__ */ import_react.default.createElement("span", { className: `${prefix}-extra-item` }, /* @__PURE__ */ import_react.default.createElement(import_antd.Dropdown, { overlay: userMenu }, /* @__PURE__ */ import_react.default.createElement("span", { className: `${prefix}-extra-user-wrapper` }, /* @__PURE__ */ import_react.default.createElement(
+      "img",
+      {
+        src: import_user.default,
+        alt: "",
+        className: `${prefix}-extra-user-icon`,
+        style: { height: 12 }
+      }
+    ), /* @__PURE__ */ import_react.default.createElement("span", { className: `${prefix}-extra-username` }, username)))) : /* @__PURE__ */ import_react.default.createElement("span", { className: `${prefix}-extra-item` }, /* @__PURE__ */ import_react.default.createElement("span", { className: `${prefix}-extra-user-wrapper` }, /* @__PURE__ */ import_react.default.createElement(
+      "img",
+      {
+        src: import_user.default,
+        alt: "",
+        className: `${prefix}-extra-user-icon`,
+        style: { height: 12 }
+      }
+    ), /* @__PURE__ */ import_react.default.createElement("span", null, username))))),
+    /* @__PURE__ */ import_react.default.createElement(
+      import_antd.Modal,
+      {
+        visible,
+        open: visible,
+        destroyOnClose: true,
+        footer: false,
+        onCancel: () => {
+          setVisible(false);
+        }
+      },
+      /* @__PURE__ */ import_react.default.createElement("div", { className: `${prefix}-about-wrapper` }, /* @__PURE__ */ import_react.default.createElement("div", { className: `${prefix}-about` }, /* @__PURE__ */ import_react.default.createElement("img", { src: logoUrl, alt: "", className: `${prefix}-logo` }), /* @__PURE__ */ import_react.default.createElement("div", { className: `${prefix}-release-info` }, /* @__PURE__ */ import_react.default.createElement("div", { className: `${prefix}-version` }, locale.version, ": ", appData.version), appData.releaseTime && /* @__PURE__ */ import_react.default.createElement(
+        "div",
+        {
+          className: `${prefix}-date`
+        },
+        `${locale.releaseTime}: ${appData.releaseTime}`
+      )), /* @__PURE__ */ import_react.default.createElement("div", null, /* @__PURE__ */ import_react.default.createElement("div", null, /* @__PURE__ */ import_react.default.createElement("a", { href: import_constant.OB_SITE_LINK, target: "_blank", rel: "noopener noreferrer" }, import_constant.OB_SITE_LINK)), /* @__PURE__ */ import_react.default.createElement(
+        "div",
+        {
+          style: { display: "flex", justifyContent: "space-between", alignItems: "center" }
+        },
+        /* @__PURE__ */ import_react.default.createElement("span", { className: `${prefix}-copyright` }, locale.right, " ", /* @__PURE__ */ import_react.default.createElement(import_icons.CopyrightOutlined, null), " ", (0, import_moment.default)().year(), " ", locale.company),
+        /* @__PURE__ */ import_react.default.createElement("img", { src: import_oceanbase_logo.default, alt: "", style: { height: 12 } })
+      ))))
+    )
+  );
+};
+var Header_default = (0, import_LocaleWrapper.default)({
+  componentName: "BasicLayout",
+  defaultLocale: import_zh_CN.default
+})(Header);
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {});

package/lib/BasicLayout/Header.less

@@ -0,0 +1,134 @@
+@import '../variable.less';
+
+@prefix: ob-layout-header;
+
+.@{prefix} {
+  position: fixed;
+  z-index: 10;
+  width: 100%;
+  height: 48px;
+  padding: 10px 24px;
+  line-height: 48px;
+  background-color: @colorBgLayout;
+  box-shadow: inset 0 -1px 0 0 #e2e8f3;
+
+  .@{prefix}-content {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    max-width: @maxWidth;
+    height: 100%;
+    margin: 0 auto;
+  }
+
+  .@{prefix}-logo {
+    height: 24px;
+    cursor: pointer;
+  }
+
+  .@{prefix}-icon {
+    width: 52px;
+    height: 48px;
+    line-height: 48px;
+    text-align: center;
+    border-right: 1px solid #e2e8f3;
+    border-bottom: 1px solid #e2e8f3;
+    cursor: pointer;
+    img {
+      height: 32px;
+      margin-top: 8px;
+    }
+  }
+
+  .@{prefix}-title {
+    /* 占据剩余的全部空间 */
+    flex: 1;
+    margin: 0 16px;
+  }
+
+  .@{prefix}-extra {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    .@{prefix}-extra-item {
+      display: inline-flex;
+      font-size: 12px;
+      cursor: pointer;
+      &:not(:last-child) {
+        margin-right: 24px;
+      }
+      .@{prefix}-extra-icon-wrapper {
+        width: 28px;
+        height: 28px;
+        line-height: 28px;
+        text-align: center;
+        border: 0.88px solid #ced4e1;
+        border-radius: 14px;
+      }
+      .@{prefix}-extra-user-wrapper {
+        height: 28px;
+        padding: 0 10px;
+        line-height: 28px;
+        border: 0.88px solid #ced4e1;
+        border-radius: 14px;
+        .@{prefix}-extra-user-icon {
+          margin-right: 6px;
+          margin-bottom: -2px;
+        }
+      }
+    }
+  }
+  .@{prefix}-extra-with-label {
+    .@{prefix}-extra-item {
+      &:not(:last-child) {
+        margin-right: 24px !important;
+      }
+    }
+  }
+}
+
+.@{prefix}-welcome {
+  color: #fff;
+  background-color: transparent;
+  border-bottom: none;
+
+  .@{prefix}-extra {
+    .@{prefixCls}-btn {
+      color: #fff;
+      background-color: rgba(255, 255, 255, 0.25);
+      border: 0.5px solid rgba(0, 0, 0, 0.1);
+    }
+  }
+}
+
+.@{prefix}-about-wrapper {
+  .@{prefix}-about {
+    margin-top: 12px;
+
+    .@{prefix}-logo {
+      height: 72px;
+    }
+
+    .@{prefix}-release-info {
+      margin-top: 20px;
+      margin-bottom: 50px;
+
+      .@{prefix}-version {
+        color: #000;
+      }
+
+      .@{prefix}-date {
+        color: #000;
+        font-size: 12px;
+        font-family: Helvetica;
+        opacity: 0.45;
+      }
+    }
+
+    .@{prefix}-copyright {
+      color: #000;
+      font-size: 12px;
+      opacity: 0.45;
+    }
+  }
+}

package/lib/BasicLayout/index.d.ts

@@ -0,0 +1,45 @@
+import React from 'react';
+import type { BadgeProps } from 'antd/es/badge';
+import type { MenuProps } from 'antd/es/menu';
+import type { LocaleWrapperProps } from '../locale/LocaleWrapper';
+import type { HeaderProps } from './Header';
+import './index.less';
+export interface SiderHeaderProps {
+    backUrl: string;
+    backupUrl?: string;
+    backTitle: string;
+    name: string;
+    id: number;
+    badgeProps?: BadgeProps;
+}
+export interface MenuItem {
+    link: string;
+    title: string;
+    icon?: React.ReactNode;
+    selectedIcon?: React.ReactNode;
+    accessible?: boolean;
+    divider?: boolean;
+    children?: MenuItem[];
+}
+export interface BasicLayoutProps extends LocaleWrapperProps {
+    location?: {
+        pathname: string;
+    };
+    children?: React.ReactNode;
+    banner?: React.ReactNode;
+    iconUrl?: string;
+    logoUrl: string;
+    simpleLogoUrl?: string;
+    className?: string;
+    topHeader: HeaderProps;
+    menus: MenuItem[];
+    defaultCollapsed?: boolean;
+    defaultSelectedKeys?: string[];
+    defaultOpenKeys?: string[];
+    sideHeader?: React.ReactNode;
+    subSideMenus?: MenuItem[];
+    subSideMenuProps?: MenuProps;
+    style?: React.CSSProperties;
+}
+declare const _default: any;
+export default _default;