@oceanbase/design 0.1.2 → 0.2.0

package/lib/BackgroundTaskManager/index.js

@@ -1,171 +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/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

@@ -1,45 +0,0 @@
-import React from 'react';
-import type { Locale } from '../interface';
-import type { LocaleWrapperProps } from '../locale/LocaleWrapper';
-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: React.ForwardRefExoticComponent<HeaderProps & React.RefAttributes<React.ComponentType<HeaderProps>>> & import("hoist-non-react-statics").NonReactStatics<React.ComponentType<HeaderProps>, {}>;
-export default _default;

package/lib/BasicLayout/Header.js

@@ -1,177 +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/Header.tsx
-var Header_exports = {};
-__export(Header_exports, {
-  default: () => Header_default
-});
-module.exports = __toCommonJS(Header_exports);
-var import_icons = require("@ant-design/icons");
-var import_antd = require("antd");
-var import_classnames = __toESM(require("classnames"));
-var import_moment = __toESM(require("moment"));
-var import_react = __toESM(require("react"));
-var import_constant = require("../constant");
-var import_LocaleWrapper = __toESM(require("../locale/LocaleWrapper"));
-var import_util = require("../_util");
-var import_useHistory = __toESM(require("../_util/useHistory"));
-var import_zh_CN = __toESM(require("./locale/zh-CN"));
-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 history = (0, import_useHistory.default)();
-  const [visible, setVisible] = (0, import_react.useState)(false);
-  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_icons.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_icons.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_icons.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);

package/lib/BasicLayout/Header.less

@@ -1,134 +0,0 @@
-@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

@@ -1,45 +0,0 @@
-import type { BadgeProps } from 'antd/es/badge';
-import type { MenuProps } from 'antd/es/menu';
-import React from 'react';
-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: React.ForwardRefExoticComponent<BasicLayoutProps & React.RefAttributes<React.ComponentType<BasicLayoutProps>>> & import("hoist-non-react-statics").NonReactStatics<React.ComponentType<BasicLayoutProps>, {}>;
-export default _default;