@oceanbase/ui 1.0.0-alpha.0 → 1.0.0-alpha.10

package/lib/Ranger/index.less

@@ -1,57 +0,0 @@
-@import '../variable.less';
-
-@prefix: ob-ranger;
-
-.@{prefix} {
-  .@{prefixCls}-space-item:nth-child(2) {
-    flex: 1;
-    width: 100%;
-
-    .@{prefixCls}-picker,
-    .@{prefixCls}-picker-range,
-    .ob-ranger-range-picker {
-      width: 100%;
-      // 去掉左侧圆角，以与下拉选择紧密组合在一起
-      border-top-left-radius: 0;
-      border-bottom-left-radius: 0;
-
-      input {
-        text-align: center;
-      }
-    }
-  }
-
-  .ob-ranger-date-picker {
-    .@{prefixCls}-select-selector {
-      border-top-left-radius: 0;
-      border-bottom-left-radius: 0;
-
-      &:hover {
-        z-index: 1;
-      }
-    }
-
-    .@{prefixCls}-select-arrow {
-      z-index: 1;
-    }
-  }
-}
-
-.@{prefix}-show-range {
-  .ob-ranger-quick-picker.ob-ranger-quick-picker-select {
-    margin-right: -1px;
-
-    .@{prefixCls}-select-selector {
-      border-top-right-radius: 0 !important;
-      border-bottom-right-radius: 0 !important;
-
-      &:hover {
-        z-index: 1;
-      }
-    }
-
-    .@{prefixCls}-select-arrow {
-      z-index: 1;
-    }
-  }
-}

package/lib/SideTip/index.less

@@ -1,180 +0,0 @@
-@import '../variable.less';
-
-@prefix: ob-sidetip;
-
-.@{prefix}-container {
-  position: fixed;
-  z-index: 0;
-  font-size: 14px;
-  cursor: pointer;
-  inset-inline-end: 24px;
-  inset-block-end: 24px;
-
-  &.@{prefix}-container-dragged {
-    cursor: grab;
-  }
-
-  &.@{prefix}-container-hide {
-    transition: all 0.3s;
-  }
-
-  @media screen and (max-width: 768px) {
-    display: none;
-  }
-
-  &.@{prefix}-container-hide-not-dragged:hover {
-    inset-inline-end: 0 !important;
-  }
-
-  .@{prefix}-hide {
-    position: absolute;
-    z-index: 0;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: 20px;
-    height: 20px;
-    background: rgba(0, 0, 0, 0.15);
-    border-radius: 20px;
-    transform: scale(0);
-    cursor: pointer;
-    opacity: 0;
-    transition: all 0.18s ease-out 0.18s;
-    inset-block-start: 0;
-    inset-inline-end: -22px;
-
-    &:hover {
-      background: rgba(0, 0, 0, 0.35);
-    }
-
-    .@{prefix}-hide-icon {
-      width: 6px;
-      height: 2px;
-      background: #fff;
-      border-radius: 4px;
-    }
-
-    &.@{prefix}-hide-hovered {
-      transform: scale(1);
-      opacity: 1;
-    }
-  }
-
-  .@{prefix}-button {
-    position: relative;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: 56px;
-    height: 56px;
-    background-color: #fff;
-    border-radius: 50%;
-    box-shadow: @boxShadowSecondary;
-    cursor: pointer;
-    transition:
-      background-color 0.2s ease 0.1s,
-      opacity 0.2s ease 0s,
-      transform 0.2s ease 0.1s;
-    user-select: none;
-
-    &.@{prefix}-button-primary {
-      background-color: #006aff;
-    }
-
-    &.@{prefix}-button-small {
-      width: 40px;
-      height: 40px;
-    }
-
-    &.@{prefix}-button-disabled {
-      background-color: @colorTextQuaternary;
-    }
-
-    &:hover {
-      opacity: 1;
-    }
-
-    .@{prefix}-button-loading {
-      position: absolute;
-      width: 56px;
-      height: 56px;
-      color: #006aff;
-      font-size: 56px;
-      inset-block-start: 0;
-      inset-inline-end: 0;
-
-      &.@{prefix}-button-loading-primary {
-        color: #fff;
-      }
-
-      &.@{prefix}-button-loading-small {
-        width: 40px;
-        height: 40px;
-        font-size: 40px;
-      }
-    }
-
-    .@{prefix}-button-close {
-      position: absolute;
-      width: 24px;
-      height: 24px;
-      color: @colorTextSecondary;
-      font-size: 24px;
-      transform: translateY(-50%) scale(0.4) rotate(-45deg);
-      opacity: 0;
-      transition: all 0.3s linear;
-      user-select: none;
-      inset-block-start: 50%;
-
-      &.@{prefix}-button-close-primary {
-        color: #fff;
-      }
-
-      &.@{prefix}-button-close-show {
-        transform: translateY(-50%);
-        opacity: 1;
-      }
-
-      &.@{prefix}-button-close-small {
-        width: 16px;
-        height: 16px;
-        font-size: 16px;
-        line-height: 16px;
-      }
-    }
-
-    .@{prefix}-button-icon {
-      position: absolute;
-      width: 24px;
-      height: 24px;
-      color: @colorTextSecondary;
-      font-size: 24px;
-      line-height: 24px;
-      transform: translateY(-50%);
-      opacity: 1;
-      transition: all 0.3s linear;
-      user-select: none;
-      inset-block-start: 50%;
-
-      &.@{prefix}-button-icon-open {
-        transform: translateY(-50%) scale(0.4) rotate(45deg);
-        opacity: 0;
-      }
-
-      &.@{prefix}-button-icon-disabled {
-        color: @colorTextQuaternary;
-      }
-
-      &.@{prefix}-button-icon-primary {
-        color: #fff;
-      }
-
-      &.@{prefix}-button-icon-small {
-        width: 16px;
-        height: 16px;
-        font-size: 16px;
-        line-height: 16px;
-      }
-    }
-  }
-}

package/lib/TaskGraph/Graph.d.ts

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

@@ -1,261 +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/TaskGraph/Graph.tsx
-var Graph_exports = {};
-__export(Graph_exports, {
-  default: () => Graph_default
-});
-module.exports = __toCommonJS(Graph_exports);
-var import_util = require("@oceanbase/util");
-var import_design = require("@oceanbase/design");
-var import_lodash = require("lodash");
-var import_react = __toESM(require("react"));
-var import_design2 = require("@oceanbase/design");
-var import_GraphToolbar = __toESM(require("../GraphToolbar"));
-var import_LocaleWrapper = __toESM(require("../locale/LocaleWrapper"));
-var import_util2 = require("../_util");
-var import_zh_CN = __toESM(require("./locale/zh-CN"));
-var import_graph = require("./graph.less");
-var { Text } = import_design.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;
-        import("@antv/g6").then((G6) => {
-          const graph = new G6.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_design2.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;
-    import("./register").then((register) => {
-      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_design.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_design.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_design.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);

package/lib/TaskGraph/graph.less

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

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