@oceanbase/ui 0.2.0

package/es/SideTip/index.js

@@ -0,0 +1,177 @@
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
+function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+function _iterableToArrayLimit(arr, i) { var _i = null == arr ? null : "undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"]; if (null != _i) { var _s, _e, _x, _r, _arr = [], _n = !0, _d = !1; try { if (_x = (_i = _i.call(arr)).next, 0 === i) { if (Object(_i) !== _i) return; _n = !1; } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0); } catch (err) { _d = !0, _e = err; } finally { try { if (!_n && null != _i.return && (_r = _i.return(), Object(_r) !== _r)) return; } finally { if (_d) throw _e; } } return _arr; } }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+import { CloseOutlined } from '@ant-design/icons';
+import { Badge, Tooltip } from '@oceanbase/design';
+import classnames from 'classnames';
+import React, { createRef, useEffect, useState } from 'react';
+import LocaleWrapper from "../locale/LocaleWrapper";
+import { getPrefix } from "../_util";
+import Dragger from "./Dragger";
+import IconLoading from "./IconLoading";
+import zhCN from "./locale/zh-CN";
+// @ts-ignore
+import "./index.less";
+var STORE_SIDETIP_HIDE = 'ob-sidetip-hide';
+var getLocalStorageKey = function getLocalStorageKey(id) {
+  return ["".concat(STORE_SIDETIP_HIDE), id].join('-');
+};
+var SideTip = function SideTip(props) {
+  var _classnames, _classnames2, _classnames3;
+  var buttonRef = /*#__PURE__*/createRef();
+  var defaultHide = props.defaultHide,
+    onClick = props.onClick,
+    open = props.open,
+    loading = props.loading,
+    children = props.children,
+    icon = props.icon,
+    type = props.type,
+    size = props.size,
+    style = props.style,
+    visible = props.visible,
+    className = props.className,
+    badge = props.badge,
+    tooltip = props.tooltip,
+    position = props.position,
+    onDragStart = props.onDragStart,
+    onDragEnd = props.onDragEnd,
+    onDrag = props.onDrag,
+    customButtonClassName = props.buttonClassName,
+    buttonStyle = props.buttonStyle,
+    id = props.id,
+    _props$hideable = props.hideable,
+    hideable = _props$hideable === void 0 ? true : _props$hideable,
+    _props$disabled = props.disabled,
+    disabled = _props$disabled === void 0 ? false : _props$disabled,
+    getPopupContainer = props.getPopupContainer;
+  var _useState = useState(hideable ? defaultHide === undefined ? window.localStorage.getItem(getLocalStorageKey(id)) === 'true' : !!defaultHide : false),
+    _useState2 = _slicedToArray(_useState, 2),
+    hide = _useState2[0],
+    setHide = _useState2[1];
+  var _useState3 = useState(false),
+    _useState4 = _slicedToArray(_useState3, 2),
+    hovered = _useState4[0],
+    setHovered = _useState4[1];
+  useEffect(function () {
+    if (hide) {
+      window.localStorage.setItem(getLocalStorageKey(id), 'true');
+    } else {
+      window.localStorage.removeItem(getLocalStorageKey(id));
+    }
+  }, [hide]);
+  var hideSideTip = function hideSideTip() {
+    setHide(true);
+  };
+  var onButtonClick = function onButtonClick(e) {
+    if (hide) {
+      // isHide
+      setHide(false);
+    } else {
+      if (disabled) return;
+      // not hide, show iframe
+      if (onClick) {
+        onClick(e);
+      }
+    }
+  };
+  var handleMouseEnter = function handleMouseEnter(e) {
+    setHovered(true);
+    if (props.onMouseEnter) {
+      props.onMouseEnter(e);
+    }
+  };
+  var handleMouseLeave = function handleMouseLeave(e) {
+    setHovered(false);
+    if (props.onMouseLeave) {
+      props.onMouseLeave(e);
+    }
+  };
+  var getTypeCls = function getTypeCls(typeCls) {
+    if (typeCls === 'primary') return 'primary';
+    return '';
+  };
+  var getSizeCls = function getSizeCls(sizeCls) {
+    if (sizeCls === 'small') return 'small';
+    return '';
+  };
+  var prefix = getPrefix('sidetip');
+  var typeCls = getTypeCls(type);
+  var sizeCls = getSizeCls(size);
+  var buttonPrefix = "".concat(prefix, "-button");
+
+  // icon
+  var iconClassName = classnames("".concat(buttonPrefix, "-icon"), (open || visible) && "".concat(buttonPrefix, "-icon-open"), disabled && "".concat(buttonPrefix, "-icon-disabled"), typeCls && "".concat(buttonPrefix, "-icon-").concat(typeCls), sizeCls && "".concat(buttonPrefix, "-icon-").concat(sizeCls));
+  // 接受三种形式的icon
+  var iconDom = /*#__PURE__*/React.createElement("span", {
+    className: iconClassName
+  }, /*#__PURE__*/React.isValidElement(icon) ? icon : /*#__PURE__*/React.createElement("img", {
+    src: icon,
+    alt: "icon",
+    width: "100%",
+    height: "100%"
+  }));
+
+  // close 按钮
+  var closeClassName = classnames("".concat(buttonPrefix, "-close"), (_classnames = {}, _defineProperty(_classnames, "".concat(buttonPrefix, "-close-show"), open || visible), _defineProperty(_classnames, "".concat(buttonPrefix, "-close-").concat(typeCls), typeCls), _defineProperty(_classnames, "".concat(buttonPrefix, "-close-").concat(sizeCls), sizeCls), _classnames));
+  var buttonClassName = classnames(buttonPrefix, customButtonClassName, (_classnames2 = {}, _defineProperty(_classnames2, "".concat(buttonPrefix, "-disabled"), disabled), _defineProperty(_classnames2, "".concat(buttonPrefix, "-").concat(typeCls), typeCls), _defineProperty(_classnames2, "".concat(buttonPrefix, "-").concat(sizeCls), sizeCls), _classnames2));
+  var loadingClassName = classnames("".concat(buttonPrefix, "-loading"), (_classnames3 = {}, _defineProperty(_classnames3, "".concat(buttonPrefix, "-loading-").concat(typeCls), typeCls), _defineProperty(_classnames3, "".concat(buttonPrefix, "-loading-").concat(sizeCls), sizeCls), _classnames3));
+
+  // 内部 Icon
+  var InnerButton = /*#__PURE__*/React.createElement("div", {
+    className: buttonClassName,
+    ref: buttonRef,
+    style: buttonStyle
+  }, loading && /*#__PURE__*/React.createElement(IconLoading, {
+    className: loadingClassName
+  }), /*#__PURE__*/React.createElement(React.Fragment, null, iconDom, /*#__PURE__*/React.createElement(CloseOutlined, {
+    className: closeClassName
+  })));
+
+  // 徽标
+  var BadgeButton = badge ? /*#__PURE__*/React.createElement(Badge, _extends({
+    offset: [-6, 6]
+  }, badge), InnerButton) : InnerButton;
+  var hideIconClassName = classnames("".concat(prefix, "-hide"), _defineProperty({}, "".concat(prefix, "-hide-hovered"), hovered));
+
+  // 隐藏按钮
+  var hideIcon = /*#__PURE__*/React.createElement("div", {
+    id: "ui-mini-hide",
+    onClick: hideSideTip,
+    className: hideIconClassName
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "".concat(prefix, "-hide-icon")
+  }));
+  return /*#__PURE__*/React.createElement(Dragger, {
+    id: id,
+    open: open || visible,
+    hide: hide,
+    onClick: onButtonClick,
+    onOverlap: hideSideTip,
+    onMouseEnter: handleMouseEnter,
+    onMouseLeave: handleMouseLeave,
+    style: style,
+    position: position,
+    prefix: prefix,
+    onDragStart: onDragStart,
+    onDragEnd: onDragEnd,
+    onDrag: onDrag,
+    getPopupContainer: getPopupContainer,
+    className: className
+  }, tooltip && tooltip.title ? /*#__PURE__*/React.createElement(Tooltip, _extends({}, tooltip, {
+    getPopupContainer: function getPopupContainer() {
+      return buttonRef.current;
+    }
+  }), BadgeButton) : BadgeButton, hideable && hideIcon, children);
+};
+export default LocaleWrapper({
+  componentName: 'SideTip',
+  defaultLocale: zhCN
+})(SideTip);

package/es/SideTip/index.less

@@ -0,0 +1,177 @@
+@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: #1677ff;
+    }
+
+    &.@{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: #1677ff;
+      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/es/SideTip/locale/en-US.js

@@ -0,0 +1 @@
+export default {};

package/es/SideTip/locale/zh-CN.js

@@ -0,0 +1 @@
+export default {};

package/es/SideTip/locale/zh-TW.js

@@ -0,0 +1 @@
+export default {};

package/es/SideTip/utils.js

@@ -0,0 +1,80 @@
+export var getScrollOffsets = function getScrollOffsets(dom) {
+  if (window.pageXOffset != null) {
+    return {
+      x: window.pageXOffset,
+      y: window.pageYOffset
+    };
+  }
+  if (dom) {
+    return {
+      x: dom.scrollLeft,
+      y: dom.scrollTop
+    };
+  }
+
+  // For IE (or any browser) in Standards mode
+  var _window = window,
+    document = _window.document;
+  if (document.compatMode === 'CSS1Compat') {
+    return {
+      x: document.documentElement.scrollLeft,
+      y: document.documentElement.scrollTop
+    };
+  }
+  return {
+    x: document.body.scrollLeft,
+    y: document.body.scrollTop
+  };
+};
+export var getClientHeight = function getClientHeight(dom) {
+  if (dom) {
+    return dom.clientHeight;
+  }
+  return window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
+};
+export var getClientWidth = function getClientWidth(dom) {
+  if (dom) {
+    return dom.clientWidth;
+  }
+  if (window.innerWidth) {
+    return window.innerWidth;
+  }
+  return document.body.clientWidth;
+};
+var cached;
+export var getScrollBarSize = function getScrollBarSize(fresh) {
+  var dom = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : document.body;
+  if (window.innerWidth > dom.offsetWidth) {
+    if (fresh || cached === undefined) {
+      var inner = document.createElement('div');
+      inner.style.width = '100%';
+      inner.style.height = '200px';
+      var outer = document.createElement('div');
+      var outerStyle = outer.style;
+      outerStyle.position = 'absolute';
+      outerStyle.top = '0';
+      outerStyle.left = '0';
+      outerStyle.pointerEvents = 'none';
+      outerStyle.visibility = 'hidden';
+      outerStyle.width = '200px';
+      outerStyle.height = '150px';
+      outerStyle.overflow = 'hidden';
+      outer.appendChild(inner);
+      dom.appendChild(outer);
+      var widthContained = inner.offsetWidth;
+      outer.style.overflow = 'scroll';
+      var widthScroll = inner.offsetWidth;
+      if (widthContained === widthScroll) {
+        widthScroll = outer.clientWidth;
+      }
+      dom.removeChild(outer);
+      cached = widthContained - widthScroll;
+    }
+    return cached;
+  }
+  return 0;
+};
+export var isFixedElem = function isFixedElem(element) {
+  var style = element && window.getComputedStyle(element);
+  return style && style.position === 'fixed';
+};

package/es/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;