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

package/es/GraphToolbar/index.js

@@ -1,146 +0,0 @@
-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(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
-function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
-import { FullscreenOutlined, MinusOutlined, PlusOutlined, SyncOutlined } from '@oceanbase/icons';
-import { toPercent } from '@oceanbase/util';
-import { Divider, Space, Tooltip } from '@oceanbase/design';
-import { debounce } from 'lodash';
-import React, { useEffect, useState } from 'react';
-import LocaleWrapper from "../locale/LocaleWrapper";
-import { getPrefix } from "../_util";
-import zhCN from "./locale/zh-CN";
-// @ts-ignore
-import fitViewIcon from "../assets/graph_fit_view_icon.svg";
-// @ts-ignore
-import resetIcon from "../assets/graph_reset_icon.svg";
-import "./index.less";
-import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
-export function getCenterPointByGraph(graph) {
-  var group = graph === null || graph === void 0 ? void 0 : graph.get('group');
-  if (group) {
-    var _group$getCanvasBBox = group.getCanvasBBox(),
-      minX = _group$getCanvasBBox.minX,
-      minY = _group$getCanvasBBox.minY,
-      maxX = _group$getCanvasBBox.maxX,
-      maxY = _group$getCanvasBBox.maxY;
-    return {
-      x: (minX + maxX) / 2,
-      y: (minY + maxY) / 2
-    };
-  }
-  // 默认返回 undefined，这样传入 G6 时会使用默认的参数值
-  return undefined;
-}
-var prefix = getPrefix('graph-toolbar');
-var GraphToolbar = function GraphToolbar(_ref) {
-  var _ref$mode = _ref.mode,
-    mode = _ref$mode === void 0 ? 'fixed' : _ref$mode,
-    graph = _ref.graph,
-    showFullscreen = _ref.showFullscreen,
-    onFullscreen = _ref.onFullscreen,
-    onReload = _ref.onReload,
-    locale = _ref.locale,
-    className = _ref.className;
-  var _useState = useState(0),
-    _useState2 = _slicedToArray(_useState, 2),
-    zoom = _useState2[0],
-    setZoom = _useState2[1];
-  useEffect(function () {
-    var initialZoom = (graph === null || graph === void 0 ? void 0 : graph.getZoom()) > 2 ? 2 : graph === null || graph === void 0 ? void 0 : graph.getZoom();
-    // 上层调用 fitView() 后缩放可能超过 100%，因此这里再做一次缩放，避免缩放超过 100%
-    graph === null || graph === void 0 || graph.zoomTo(initialZoom, getCenterPointByGraph(graph));
-    setZoom(initialZoom);
-    graph === null || graph === void 0 || graph.on('wheelzoom',
-    // 使用防抖函数，避免状态改变过于频繁，影响页面交互流畅
-    // 设置延迟时间为 16ms，为渲染一帧所需时间
-    debounce(function () {
-      setZoom(graph === null || graph === void 0 ? void 0 : graph.getZoom());
-    }, 16));
-  }, [graph]);
-  return /*#__PURE__*/_jsxs(Space, {
-    size: 16,
-    className: "".concat(prefix, " ", "".concat(prefix, "-").concat(mode), " ").concat(className),
-    children: [showFullscreen && /*#__PURE__*/_jsx(Tooltip, {
-      title: locale.fullscreen,
-      children: /*#__PURE__*/_jsx(FullscreenOutlined, {
-        className: "pointable",
-        onClick: function onClick() {
-          if (onFullscreen) {
-            onFullscreen();
-          }
-        }
-      })
-    }), /*#__PURE__*/_jsxs("span", {
-      className: "".concat(prefix, "-zoom-wrapper"),
-      children: [/*#__PURE__*/_jsx(Tooltip, {
-        title: locale.shrink,
-        children: /*#__PURE__*/_jsx(MinusOutlined, {
-          className: zoom >= 0.3 ? "".concat(prefix, "-pointable") : "".concat(prefix, "-disabled"),
-          onClick: function onClick() {
-            if (zoom >= 0.3) {
-              var newZoom = zoom - 0.1;
-              setZoom(newZoom);
-              graph === null || graph === void 0 || graph.zoomTo(newZoom, getCenterPointByGraph(graph));
-            }
-          }
-        })
-      }), toPercent(zoom), /*#__PURE__*/_jsx(Tooltip, {
-        title: locale.enlarge,
-        children: /*#__PURE__*/_jsx(PlusOutlined, {
-          className: zoom <= 0.9 ? "".concat(prefix, "-pointable") : "".concat(prefix, "-disabled"),
-          onClick: function onClick() {
-            if (zoom <= 0.9) {
-              var newZoom = zoom + 0.1;
-              setZoom(newZoom);
-              graph === null || graph === void 0 || graph.zoomTo(newZoom, getCenterPointByGraph(graph));
-            }
-          }
-        })
-      })]
-    }), /*#__PURE__*/_jsx(Tooltip, {
-      title: locale.reset,
-      children: /*#__PURE__*/_jsx("img", {
-        src: resetIcon,
-        alt: "",
-        className: "".concat(prefix, "-pointable"),
-        onClick: function onClick() {
-          setZoom(1);
-          graph === null || graph === void 0 || graph.zoomTo(1, getCenterPointByGraph(graph));
-        }
-      })
-    }), /*#__PURE__*/_jsx(Tooltip, {
-      title: locale.fitView,
-      children: /*#__PURE__*/_jsx("img", {
-        src: fitViewIcon,
-        alt: "",
-        className: "".concat(prefix, "-pointable"),
-        onClick: function onClick() {
-          graph === null || graph === void 0 || graph.fitView();
-        }
-      })
-    }), onReload && /*#__PURE__*/_jsx("span", {
-      children: /*#__PURE__*/_jsx(Divider, {
-        type: "vertical",
-        className: "".concat(prefix, "-divider")
-      })
-    }), onReload && /*#__PURE__*/_jsx(Tooltip, {
-      title: locale.refresh,
-      children: /*#__PURE__*/_jsx("span", {
-        children: /*#__PURE__*/_jsx(SyncOutlined, {
-          className: "".concat(prefix, "-pointable"),
-          onClick: function onClick() {
-            onReload();
-          }
-        })
-      })
-    })]
-  });
-};
-export default LocaleWrapper({
-  componentName: 'GraphToolbar',
-  defaultLocale: zhCN
-})(GraphToolbar);

package/es/GraphToolbar/index.less

@@ -1,65 +0,0 @@
-@import '../variable.less';
-
-@prefix: ob-graph-toolbar;
-
-.@{prefix} {
-  display: inline-flex;
-  align-items: center;
-  justify-content: space-between;
-
-  .@{prefix}-pointable {
-    cursor: pointer;
-  }
-
-  .@{prefix}-disabled {
-    color: @colorTextQuaternary;
-    cursor: not-allowed;
-    pointer-events: none;
-  }
-
-  span,
-  img {
-    // 防止加减 zoom 过快时会选中文本 和 img 图标
-    user-select: none;
-  }
-
-  > span:not(:last-child) {
-    margin-right: 16px;
-  }
-
-  img:not(:last-child) {
-    margin-right: 16px;
-  }
-
-  .@{prefix}-divider {
-    margin: 0;
-  }
-
-  .@{prefix}-zoom-wrapper {
-    display: inline-flex;
-    align-items: center;
-    justify-content: space-between;
-    width: 90px;
-    height: 24px;
-    padding: 0 8px;
-    color: @colorTextSecondary;
-    font-size: 12px;
-    background-color: #f5f6fa;
-    border-radius: ~'@{borderRadius}px';
-
-    .@{iconPrefixCls} {
-      font-size: 12px;
-    }
-  }
-}
-
-.@{prefix}-fixed {
-  position: absolute;
-  top: 24px;
-  right: 24px;
-  height: 40px;
-  padding: 8px 24px;
-  background: #fff;
-  border-radius: 20px;
-  box-shadow: @boxShadowSecondary;
-}

package/es/GraphToolbar/locale/en-US.d.ts

@@ -1,9 +0,0 @@
-declare const _default: {
-    fullscreen: string;
-    shrink: string;
-    enlarge: string;
-    reset: string;
-    fitView: string;
-    refresh: string;
-};
-export default _default;

package/es/GraphToolbar/locale/en-US.js

@@ -1,8 +0,0 @@
-export default {
-  fullscreen: 'Fullscreen',
-  shrink: 'Shrink',
-  enlarge: 'Enlarge',
-  reset: 'Reset',
-  fitView: 'Fit view',
-  refresh: 'Refresh'
-};

package/es/GraphToolbar/locale/zh-CN.d.ts

@@ -1,9 +0,0 @@
-declare const _default: {
-    fullscreen: string;
-    shrink: string;
-    enlarge: string;
-    reset: string;
-    fitView: string;
-    refresh: string;
-};
-export default _default;

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

@@ -1,8 +0,0 @@
-export default {
-  fullscreen: '进入全屏',
-  shrink: '缩小',
-  enlarge: '放大',
-  reset: '显示原始比例',
-  fitView: '自适应画布',
-  refresh: '刷新'
-};

package/es/GraphToolbar/locale/zh-TW.d.ts

@@ -1,9 +0,0 @@
-declare const _default: {
-    fullscreen: string;
-    shrink: string;
-    enlarge: string;
-    reset: string;
-    fitView: string;
-    refresh: string;
-};
-export default _default;

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

@@ -1,8 +0,0 @@
-export default {
-  fullscreen: '進入全屏',
-  shrink: '縮小',
-  enlarge: '放大',
-  reset: '顯示原始比例',
-  fitView: '自我調整畫布',
-  refresh: '刷新'
-};

package/es/Highlight/index.less

@@ -1,381 +0,0 @@
-@import '../variable.less';
-
-@prefix: ob-highlight;
-
-.@{prefix} {
-  box-sizing: border-box;
-  margin: 0;
-  padding: 0;
-  color: rgba(0, 0, 0, 0.88);
-  font-size: 14px;
-  line-height: 1.5714285714285714;
-  list-style: none;
-  border-radius: ~'@{borderRadius}px';
-
-  &:not(:hover) .@{prefix}-copy {
-    visibility: hidden;
-    opacity: 0;
-  }
-
-  @keyframes copy-button-trans {
-    0% {
-      opacity: 0.8;
-      margin-block-start: 0;
-    }
-    10% {
-      opacity: 0.8;
-      margin-block-start: -16px;
-    }
-    90% {
-      opacity: 0.8;
-      margin-block-start: -16px;
-    }
-    100% {
-      opacity: 0.8;
-      margin-block-start: 0;
-    }
-  }
-
-  .@{prefix}-json-view {
-    padding: 0;
-
-    .react-json-view {
-      padding: 0.5em;
-      overflow: auto;
-
-      .icon-container svg {
-        transform: translateY(5px);
-      }
-    }
-  }
-
-  &.@{prefix}-light {
-    .react-json-view {
-      background: @colorBgLayout;
-    }
-
-    .@{prefix}-light-index {
-      border-inline-end: 1px solid rgba(0, 0, 0, 0.05);
-    }
-
-    display: block;
-    padding: 0.5em;
-    overflow-x: auto;
-    color: #383a42;
-    background: @colorBgLayout;
-
-    .hljs-comment,
-    .hljs-quote {
-      color: #a0a1a7;
-      font-style: italic;
-    }
-
-    .hljs-doctag,
-    .hljs-keyword,
-    .hljs-formula {
-      color: #a626a4;
-    }
-
-    .hljs-section,
-    .hljs-name,
-    .hljs-selector-tag,
-    .hljs-deletion,
-    .hljs-subst {
-      color: #e45649;
-    }
-
-    .hljs-literal {
-      color: #0184bb;
-    }
-
-    .hljs-string,
-    .hljs-regexp,
-    .hljs-addition,
-    .hljs-attribute,
-    .hljs-meta-string {
-      color: #50a14f;
-    }
-
-    .hljs-built_in,
-    .hljs-class,
-    .hljs-title {
-      color: #c18401;
-    }
-
-    .hljs-attr,
-    .hljs-variable,
-    .hljs-template-variable,
-    .hljs-type,
-    .hljs-selector-class,
-    .hljs-selector-attr,
-    .hljs-selector-pseudo,
-    .hljs-number {
-      color: #986801;
-    }
-
-    .hljs-symbol,
-    .hljs-bullet,
-    .hljs-link,
-    .hljs-meta,
-    .hljs-selector-id,
-    .hljs-title {
-      color: #4078f2;
-    }
-
-    .hljs-emphasis {
-      font-style: italic;
-    }
-
-    .hljs-strong {
-      font-weight: bold;
-    }
-
-    .hljs-link {
-      text-decoration: underline;
-    }
-  }
-
-  .@{prefix}-index {
-    box-sizing: border-box;
-    width: 40px;
-    min-width: 40px;
-    color: #aaa;
-    text-align: end;
-    background: rgba(255, 255, 255, 0.03);
-    user-select: none;
-    padding-block: 2px;
-    padding-inline: 8px;
-  }
-  .@{prefix}-content {
-    padding-block: 2px;
-    padding-inline: 8px;
-  }
-  .@{prefix}-copy {
-    position: absolute;
-    display: flex;
-    flex-direction: column;
-    width: 16px;
-    height: 16px;
-    padding: 0;
-    overflow: hidden;
-    border: 0;
-    outline: none;
-    cursor: pointer;
-    opacity: 0.6;
-    transition: opacity 0.2s;
-    inset-block-start: 16px;
-    inset-inline-end: 16px;
-
-    &:hover {
-      opacity: 0.8;
-    }
-  }
-  &:not(:hover) &.@{prefix}-copy {
-    visibility: hidden;
-    opacity: 0;
-  }
-
-  .@{prefix}-copy-icon {
-    width: 16px;
-    height: 16px;
-    font-size: 16px;
-
-    &.scoll {
-      animation: copy-button-trans 2s;
-      animation-play-state: running;
-    }
-  }
-
-  .@{prefix}-dark {
-    display: block;
-    padding: 0.5em;
-    overflow-x: auto;
-    color: #c0c5ce;
-    background: #2b303b;
-    border-radius: ~'@{borderRadius}px';
-
-    &.@{prefix}-index {
-      border-inline-end: 1px solid rgba(255, 255, 255, 0.05);
-    }
-
-    /* Ocean Comment */
-    .hljs-comment,
-    .hljs-quote {
-      color: #65737e;
-    }
-
-    /* Ocean Red */
-    .hljs-variable,
-    .hljs-template-variable,
-    .hljs-tag,
-    .hljs-name,
-    .hljs-selector-id,
-    .hljs-selector-class,
-    .hljs-regexp,
-    .hljs-deletion {
-      color: #bf616a;
-    }
-
-    /* Ocean Orange */
-    .hljs-number,
-    .hljs-built_in,
-    .hljs-builtin-name,
-    .hljs-literal,
-    .hljs-type,
-    .hljs-params,
-    .hljs-meta,
-    .hljs-link {
-      color: #d08770;
-    }
-
-    /* Ocean Yellow */
-    .hljs-attribute {
-      color: #ebcb8b;
-    }
-
-    /* Ocean Green */
-    .hljs-string,
-    .hljs-symbol,
-    .hljs-bullet,
-    .hljs-addition {
-      color: #a3be8c;
-    }
-
-    /* Ocean Blue */
-    .hljs-title,
-    .hljs-section {
-      color: #8fa1b3;
-    }
-
-    /* Ocean Purple */
-    .hljs-keyword,
-    .hljs-selector-tag {
-      color: #b48ead;
-    }
-
-    .hljs-emphasis {
-      font-style: italic;
-    }
-
-    .hljs-strong {
-      font-weight: bold;
-    }
-  }
-
-  &.@{prefix}-diff {
-    overflow-y: auto;
-
-    // &.@{prefix} {
-    //   padding: 0;
-    // }
-
-    table {
-      width: 100%;
-      font-family: 'SFMono-Regular, Consolas, Liberation Mono, Menlo, Courier, monospace';
-      border-collapse: collapse;
-      border-spacing: 0;
-
-      td {
-        vertical-align: top;
-      }
-    }
-
-    .@{prefix}-diff-index,
-    .@{prefix}-diff-mark,
-    .@{prefix}-diff-code {
-      padding-block: 2px;
-      padding-inline: 8px;
-    }
-
-    .@{prefix}-diff-index,
-    .@{prefix}-diff-mark {
-      user-select: none;
-    }
-
-    .@{prefix}-diff-index {
-      width: 40px;
-      min-width: 40px;
-      text-align: end;
-      font-variant-numeric: tabular-nums;
-    }
-
-    .@{prefix}-diff-mark {
-      width: 10px;
-      min-width: 10px;
-      text-align: center;
-    }
-
-    .@{prefix}-diff-code {
-      white-space: pre-wrap;
-      word-break: break-word;
-    }
-
-    // ======================= Theme =======================
-    // Light
-    &.@{prefix}-light {
-      .@{prefix}-diff-index,
-      .@{prefix}-diff-mark {
-        color: #aaa;
-      }
-
-      .@{prefix}-diff-index {
-        background: rgba(0, 0, 0, 0.01);
-        border-inline-end: 1px solid rgba(0, 0, 0, 0.05);
-        border-inline-start: 1px solid rgba(0, 0, 0, 0.1);
-
-        &:first-child {
-          border-inline-start: none;
-        }
-      }
-
-      // &.@{prefix}-diff-cell {
-      .@{prefix}-diff-cell-add {
-        background: #e7f1e2;
-        // .mix(##fafafa; 90)
-        // .toHexString();
-      }
-      .@{prefix}-diff-cell-remove {
-        background: #f6e3e4;
-        // .mix(##fafafa; 90)
-        // .toHexString();
-      }
-      .@{prefix}-diff-cell-empty {
-        background: rgba(0, 0, 0, 0.03);
-      }
-      // }
-    }
-
-    // Dark
-    &.@{prefix}-dark {
-      .@{prefix}-diff-index,
-      .@{prefix}-diff-mark {
-        color: #aaa;
-      }
-
-      .@{prefix}-diff-index {
-        background: rgba(255, 255, 255, 0.01);
-        border-inline-end: 1px solid rgba(255, 255, 255, 0.05);
-        border-inline-start: 1px solid rgba(255, 255, 255, 0.1);
-
-        &:first-child {
-          border-inline-start: none;
-        }
-      }
-
-      .@{prefix}-diff-cell-add {
-        background: #305c29;
-        // .mix(#2b303b; 60)
-        // .toHexString();
-      }
-      .@{prefix}-diff-cell-remove {
-        background: #6d2431;
-        // .mix(#2b303b; 60)
-        // .toHexString();
-      }
-
-      .@{prefix}-diff-cell-empty {
-        background: rgba(255, 255, 255, 0.03);
-      }
-    }
-  }
-}