@oceanbase/design 0.1.0

package/lib/Tabs/hooks/useLegacyItems.js

@@ -0,0 +1,64 @@
+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/Tabs/hooks/useLegacyItems.tsx
+var useLegacyItems_exports = {};
+__export(useLegacyItems_exports, {
+  default: () => useLegacyItems
+});
+module.exports = __toCommonJS(useLegacyItems_exports);
+var React = __toESM(require("react"));
+var import_antd = require("antd");
+var import_warning = __toESM(require("antd/es/_util/warning"));
+var import_toArray = __toESM(require("rc-util/lib/Children/toArray"));
+var import_util = require("@oceanbase/util");
+function filter(items) {
+  return items.filter((item) => item);
+}
+function useLegacyItems(items, children, prefixCls) {
+  if (items) {
+    return items;
+  }
+  (0, import_warning.default)(!children, "Tabs", "Tabs.TabPane is deprecated. Please use `items` directly.");
+  const childrenItems = (0, import_toArray.default)(children).map((node) => {
+    if (React.isValidElement(node)) {
+      const { key, props } = node;
+      const { tab, tag, ...restProps } = props || {};
+      const item = {
+        key: String(key),
+        ...restProps,
+        label: (0, import_util.isNullValue)(tag) ? tab : /* @__PURE__ */ React.createElement(import_antd.Space, { size: 4 }, tab, /* @__PURE__ */ React.createElement(import_antd.Tag, { bordered: false, className: `${prefixCls}-tab-tag` }, tag))
+      };
+      return item;
+    }
+    return null;
+  });
+  return filter(childrenItems);
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {});

package/lib/Tabs/index.d.ts

@@ -0,0 +1,17 @@
+import React from 'react';
+import type { TabsProps as AntTabsProps, TabsPosition as AntTabsPosition } from 'antd/es/tabs';
+import type { Tab as AntTab } from 'rc-tabs/es/interface';
+export type { TabPaneProps } from './TabPane';
+export interface Tab extends AntTab {
+    tag?: React.ReactNode;
+}
+export interface TabsProps extends AntTabsProps {
+    items?: Tab[];
+}
+export declare type TabsPosition = AntTabsPosition;
+declare const Tabs: {
+    ({ children, items, defaultActiveKey, activeKey: activeKeyProp, onChange, size, type, tabPosition, prefixCls: customizePrefixCls, className, ...restProps }: TabsProps): JSX.Element;
+    TabPane: React.FC<import("antd").TabPaneProps>;
+    displayName: string;
+};
+export default Tabs;

package/lib/Tabs/index.js

@@ -0,0 +1,111 @@
+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/Tabs/index.tsx
+var Tabs_exports = {};
+__export(Tabs_exports, {
+  default: () => Tabs_default
+});
+module.exports = __toCommonJS(Tabs_exports);
+var import_react = __toESM(require("react"));
+var import_antd = require("antd");
+var import_classnames = __toESM(require("classnames"));
+var import_util = require("@oceanbase/util");
+var import_useInkBar = __toESM(require("./hooks/useInkBar"));
+var import_useLegacyItems = __toESM(require("./hooks/useLegacyItems"));
+var import_style = __toESM(require("./style"));
+var import_TabPane = __toESM(require("./TabPane"));
+var Tabs = ({
+  children,
+  items,
+  defaultActiveKey,
+  activeKey: activeKeyProp,
+  onChange,
+  size,
+  type,
+  tabPosition,
+  prefixCls: customizePrefixCls,
+  className,
+  ...restProps
+}) => {
+  const { getPrefixCls } = (0, import_react.useContext)(import_antd.ConfigProvider.ConfigContext);
+  const prefixCls = getPrefixCls("tabs", customizePrefixCls);
+  const { wrapSSR, hashId } = (0, import_style.default)(prefixCls);
+  const tabsCls = (0, import_classnames.default)(className, hashId);
+  const ref = (0, import_react.useRef)();
+  const isHorizontal = !tabPosition || tabPosition === "top" || tabPosition === "bottom";
+  let newItems = items == null ? void 0 : items.map((item) => {
+    if (!(0, import_util.isNullValue)(item.tag)) {
+      return {
+        ...item,
+        label: /* @__PURE__ */ import_react.default.createElement(import_antd.Space, { size: 4 }, item.label, /* @__PURE__ */ import_react.default.createElement(import_antd.Tag, { bordered: false, className: `${prefixCls}-tab-tag` }, item.tag))
+      };
+    }
+    return item;
+  });
+  newItems = (0, import_useLegacyItems.default)(newItems, children, prefixCls);
+  const [activeKey, setActiveKey] = (0, import_react.useState)(
+    activeKeyProp || defaultActiveKey || (newItems == null ? void 0 : newItems[0].key)
+  );
+  (0, import_useInkBar.default)({
+    prefixCls,
+    activeKey,
+    size,
+    type,
+    tabPosition,
+    containerRef: ref
+  });
+  return wrapSSR(
+    /* @__PURE__ */ import_react.default.createElement("div", { ref }, /* @__PURE__ */ import_react.default.createElement(
+      import_antd.Tabs,
+      {
+        items: newItems,
+        defaultActiveKey,
+        activeKey,
+        onChange: (key) => {
+          setActiveKey(key);
+          onChange == null ? void 0 : onChange(key);
+        },
+        size,
+        type,
+        tabPosition,
+        tabBarGutter: !type || type === "line" ? isHorizontal ? 24 : 0 : void 0,
+        prefixCls: customizePrefixCls,
+        className: tabsCls,
+        ...restProps
+      }
+    ))
+  );
+};
+Tabs.TabPane = import_TabPane.default;
+if (process.env.NODE_ENV !== "production") {
+  Tabs.displayName = import_antd.Tabs.displayName;
+}
+var Tabs_default = Tabs;
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {});

package/lib/Tabs/style/index.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+import type { FullToken, GenerateStyle } from 'antd/es/theme/internal';
+export declare type TabsToken = FullToken<'Tabs'>;
+export declare const genTagStyle: GenerateStyle<TabsToken>;
+declare const _default: (prefixCls: string) => {
+    wrapSSR: (node: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>) => JSX.Element;
+    hashId: string;
+};
+export default _default;

package/lib/Tabs/style/index.js

@@ -0,0 +1,71 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+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 __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/Tabs/style/index.ts
+var style_exports = {};
+__export(style_exports, {
+  default: () => style_default,
+  genTagStyle: () => genTagStyle
+});
+module.exports = __toCommonJS(style_exports);
+var import_genComponentStyleHook = require("../../_util/genComponentStyleHook");
+var genTagStyle = (token) => {
+  const { componentCls, colorInfo, colorInfoBg, colorTextSecondary } = token;
+  return {
+    [componentCls]: {
+      [`${componentCls}-tab`]: {
+        [`${componentCls}-tab-tag`]: {
+          color: colorTextSecondary,
+          fontFamily: "PingFangSC",
+          fontSize: 12,
+          borderRadius: 12,
+          marginInlineEnd: 0,
+          height: 20
+        }
+      },
+      [`${componentCls}-tab-active`]: {
+        [`${componentCls}-tab-tag`]: {
+          color: colorInfo,
+          backgroundColor: colorInfoBg
+        }
+      },
+      [`${componentCls}-ink-bar`]: {
+        // inkbar 带圆角
+        borderRadius: "1px"
+      }
+    },
+    [componentCls]: {
+      [`&${componentCls}-top, &${componentCls}-bottom`]: {
+        [`${componentCls}-nav::before`]: {
+          // 页签位置为 top 和 bottom 时，去掉分割线
+          border: "none"
+        }
+      }
+    }
+  };
+};
+var style_default = (prefixCls) => {
+  const useStyle = (0, import_genComponentStyleHook.genComponentStyleHook)("Tabs", (token) => {
+    return [genTagStyle(token)];
+  });
+  return useStyle(prefixCls);
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  genTagStyle
+});

package/lib/TaskGraph/Graph.d.ts

@@ -0,0 +1,24 @@
+import type { GraphData } from '@antv/g6/lib/types';
+import type { LocaleWrapperProps } from '../locale/LocaleWrapper';
+import './graph.less';
+export interface TaskGraphLocale {
+    successful: string;
+    running: string;
+    failed: string;
+    pending: string;
+    taskId: string;
+    log: string;
+    parameter: string;
+    stop: string;
+    retry: string;
+    skip: string;
+}
+export interface TaskGraphProps extends LocaleWrapperProps {
+    data: GraphData;
+    onMenuClick: (key: string, subTask: any, onSuccess: () => void) => void;
+    onLogAdd: (subTask: any) => void;
+    assetsPath?: string;
+    locale?: TaskGraphLocale;
+}
+declare const _default: any;
+export default _default;

package/lib/TaskGraph/Graph.js

@@ -0,0 +1,261 @@
+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/TaskGraph/Graph.tsx
+var Graph_exports = {};
+__export(Graph_exports, {
+  default: () => Graph_default
+});
+module.exports = __toCommonJS(Graph_exports);
+var import_react = __toESM(require("react"));
+var import_antd = require("antd");
+var import_lodash = require("lodash");
+var import_util = require("@oceanbase/util");
+var import_g6 = __toESM(require("@antv/g6"));
+var import_LocaleWrapper = __toESM(require("../locale/LocaleWrapper"));
+var import_zh_CN = __toESM(require("./locale/zh-CN"));
+var import_GraphToolbar = __toESM(require("../GraphToolbar"));
+var import_register = __toESM(require("./register"));
+var import_util2 = require("../_util");
+var import_StaticFunction = require("../StaticFunction");
+var import_graph = require("./graph.less");
+var { Text } = import_antd.Typography;
+var prefix = (0, import_util2.getPrefix)("task-graph-item");
+var TaskGraph = class extends import_react.default.PureComponent {
+  constructor(props) {
+    super(props);
+    this.main = null;
+    this.menu = null;
+    this.drawGraph = () => {
+      const { data } = this.props;
+      if (this.graph && this.graph.changeData) {
+        this.graph.changeData(data);
+      } else {
+        const splitPane = document.getElementsByClassName("SplitPane") && document.getElementsByClassName("SplitPane")[0];
+        const width = this.main && this.main.scrollWidth || 1200;
+        const height = (this.main && this.main.scrollHeight || splitPane.scrollHeight || 500) - 65;
+        const graph = new import_g6.default.Graph({
+          container: "container",
+          width,
+          height,
+          minZoom: 0.2,
+          maxZoom: 2,
+          layout: {
+            type: "dagre",
+            nodesep: 90,
+            ranksep: 40,
+            controlPoints: false
+          },
+          defaultNode: {
+            type: "subTaskNode",
+            anchorPoints: [
+              [0.5, 0],
+              [0.5, 1]
+            ]
+          },
+          defaultEdge: {
+            type: "subTaskEdge"
+          },
+          nodeStateStyles: {
+            hover: {
+              lineWidth: 2,
+              stroke: import_StaticFunction.token.colorPrimary,
+              fill: "#e6f7ff"
+            }
+          },
+          modes: {
+            default: ["drag-canvas", "zoom-canvas", "click-select"]
+          }
+        });
+        const canvas = graph.get("canvas");
+        canvas.set("localRefresh", false);
+        graph.data(data);
+        graph.render();
+        graph.fitView();
+        canvas.on("moreGroup:click", (e) => {
+          const subTaskNode = e.currentTarget && e.currentTarget.getParent();
+          const model = subTaskNode && subTaskNode.get("item") && subTaskNode.get("item").getModel();
+          this.setState(
+            {
+              currentSubTask: model
+            },
+            () => {
+              if (!this.menu) {
+                this.menu = document.getElementById("menu");
+              }
+              this.menu.style.left = `${e.x}px`;
+              this.menu.style.top = `${e.y - height - 5}px`;
+            }
+          );
+        });
+        graph.on("node:mouseleave", () => {
+          if (!this.menu) {
+            this.menu = document.getElementById("menu");
+          }
+          this.menu.style.left = "-1500px";
+        });
+        this.graph = graph;
+        this.forceUpdate();
+      }
+    };
+    this.handleMenuClick = ({ key }) => {
+      const { onMenuClick } = this.props;
+      const { currentSubTask } = this.state;
+      const onSuccess = () => {
+        this.setState({
+          currentSubTask: null
+        });
+      };
+      if (key === "log") {
+        this.log();
+      }
+      if (onMenuClick) {
+        onMenuClick(key, currentSubTask, onSuccess);
+      }
+      if (this.menu) {
+        this.menu.style.left = "-1500px";
+      }
+    };
+    this.log = () => {
+      const { onLogAdd } = this.props;
+      const { currentSubTask } = this.state;
+      if (onLogAdd) {
+        onLogAdd(currentSubTask);
+      }
+    };
+    const { locale } = props;
+    this.state = {
+      currentSubTask: null,
+      statusList: [
+        {
+          label: locale.successful,
+          value: "SUCCESSFUL",
+          color: "#9adc78",
+          operations: ["taskId", "log", "parameter"]
+        },
+        {
+          label: locale.running,
+          value: "RUNNING",
+          color: "#80c3fc",
+          operations: ["taskId", "log", "parameter", "stop"]
+        },
+        {
+          label: locale.failed,
+          value: "FAILED",
+          color: "#fca4a2",
+          operations: ["taskId", "log", "parameter", "retry", "skip"]
+        },
+        {
+          label: locale.pending,
+          value: "PENDING",
+          color: "#cccccc",
+          operations: ["taskId", "parameter"]
+        }
+      ]
+    };
+  }
+  componentDidMount() {
+    const { assetsPath = "/assets" } = this.props;
+    const { statusList } = this.state;
+    (0, import_register.default)(statusList, assetsPath);
+    this.menu = document.getElementById("menu");
+    this.drawGraph();
+  }
+  componentDidUpdate(prevProps) {
+    const { data } = this.props;
+    if (!(0, import_lodash.isEqual)(data, prevProps.data)) {
+      this.drawGraph();
+    }
+  }
+  render() {
+    const { locale } = this.props;
+    const { statusList, currentSubTask } = this.state;
+    const operations = (0, import_util.findByValue)(statusList, currentSubTask && currentSubTask.status).operations || [];
+    const menus = [
+      {
+        label: locale.taskId,
+        value: "taskId"
+      },
+      {
+        label: locale.log,
+        value: "log"
+      },
+      {
+        label: locale.parameter,
+        value: "parameter"
+      },
+      {
+        label: locale.stop,
+        value: "stop"
+      },
+      {
+        label: locale.retry,
+        value: "retry"
+      },
+      {
+        label: locale.skip,
+        value: "skip"
+      }
+    ];
+    const filterMenus = menus.filter((item) => operations.includes(item.value));
+    const menu = /* @__PURE__ */ import_react.default.createElement(import_antd.Menu, { id: "menu", onClick: this.handleMenuClick, style: { left: -1500 } }, filterMenus.map(
+      (item) => item.value === "taskId" ? /* @__PURE__ */ import_react.default.createElement(
+        "div",
+        {
+          className: `${prefix}-task-id-wrapper`,
+          style: filterMenus.length > 1 ? { borderBottom: "1px solid #e8e8e8" } : {}
+        },
+        /* @__PURE__ */ import_react.default.createElement(Text, { copyable: true }, `ID: ${currentSubTask && currentSubTask.id}`)
+      ) : /* @__PURE__ */ import_react.default.createElement(import_antd.Menu.Item, { key: item.value }, item.label)
+    ));
+    return /* @__PURE__ */ import_react.default.createElement("div", null, this.graph && /* @__PURE__ */ import_react.default.createElement(import_GraphToolbar.default, { mode: "fixed", graph: this.graph }), /* @__PURE__ */ import_react.default.createElement(
+      "div",
+      {
+        id: "container",
+        ref: (node) => {
+          this.main = node;
+        }
+      }
+    ), /* @__PURE__ */ import_react.default.createElement(
+      import_antd.Dropdown,
+      {
+        visible: true,
+        open: true,
+        overlay: menu,
+        overlayClassName: `${prefix}-menu`
+      },
+      /* @__PURE__ */ import_react.default.createElement("span", null)
+    ));
+  }
+};
+var Graph_default = (0, import_LocaleWrapper.default)({
+  componentName: "TaskGraph",
+  defaultLocale: import_zh_CN.default
+})(TaskGraph);
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {});

package/lib/TaskGraph/graph.less

@@ -0,0 +1,23 @@
+@import '../variable.less';
+
+@prefix: ob-task-graph-item;
+
+.@{prefix}-menu {
+  // 设置 fixed，避免下拉菜单占据空间导致底部出现白色方块
+  position: fixed;
+
+  .@{prefix}-task-id-wrapper {
+    padding: 5px 12px;
+
+    .@{prefixCls}-typography {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      color: @colorTextTertiary;
+
+      .@{prefixCls}-typography-copy {
+        color: @colorTextTertiary;
+      }
+    }
+  }
+}

package/lib/TaskGraph/index.d.ts

@@ -0,0 +1,16 @@
+import type { GraphData } from '@antv/g6/lib/types';
+import type { LocaleWrapperProps } from '../locale/LocaleWrapper';
+import type { TaskGraphLocale } from './Graph';
+import './index.less';
+export interface TaskGraphProps extends LocaleWrapperProps {
+    data: GraphData;
+    logLoading?: boolean;
+    subTaskLog: string;
+    onMenuClick: (key: string, subTask: any, onSuccess: () => void) => void;
+    onTabsChange?: (targetKey: string) => void;
+    onTabsEdit?: (targetKey: string, action: 'add' | 'remove') => void;
+    assetsPath?: string;
+    locale?: TaskGraphLocale;
+}
+declare const _default: any;
+export default _default;