@oceanbase/design 0.1.0

package/es/GraphToolbar/index.d.ts

@@ -0,0 +1,26 @@
+import type { Graph } from '@antv/g6';
+import type { LocaleWrapperProps } from '../locale/LocaleWrapper';
+import './index.less';
+export declare function getCenterPointByGraph(graph: any): {
+    x: number;
+    y: number;
+};
+export interface GraphToolbarLocale {
+    fullscreen: string;
+    shrink: string;
+    enlarge: string;
+    reset: string;
+    fitView: string;
+    refresh: string;
+}
+export interface GraphToolbarProps extends LocaleWrapperProps {
+    mode?: 'fixed' | 'embed';
+    graph?: Graph;
+    showFullscreen?: boolean;
+    onFullscreen?: () => void;
+    onReload?: () => void;
+    locale?: GraphToolbarLocale;
+    className?: string;
+}
+declare const _default: any;
+export default _default;

package/es/GraphToolbar/index.js

@@ -0,0 +1,132 @@
+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 React, { useState, useEffect } from 'react';
+import { Divider, Tooltip, Space } from 'antd';
+import { debounce } from 'lodash';
+import { toPercent } from '@oceanbase/util';
+import { SyncOutlined, MinusOutlined, PlusOutlined, FullscreenOutlined } from '@ant-design/icons';
+import LocaleWrapper from "../locale/LocaleWrapper";
+import zhCN from "./locale/zh-CN";
+import { getPrefix } from "../_util";
+// @ts-ignore
+import fitViewIcon from "../assets/graph_fit_view_icon.svg";
+// @ts-ignore
+import resetIcon from "../assets/graph_reset_icon.svg";
+import "./index.less";
+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 ? void 0 : graph.zoomTo(initialZoom, getCenterPointByGraph(graph));
+    setZoom(initialZoom);
+    graph === null || graph === void 0 ? void 0 : graph.on('wheelzoom',
+    // 使用防抖函数，避免状态改变过于频繁，影响页面交互流畅
+    // 设置延迟时间为 16ms，为渲染一帧所需时间
+    debounce(function () {
+      setZoom(graph === null || graph === void 0 ? void 0 : graph.getZoom());
+    }, 16));
+  }, [graph]);
+  return /*#__PURE__*/React.createElement(Space, {
+    size: 16,
+    className: "".concat(prefix, " ", "".concat(prefix, "-").concat(mode), " ").concat(className)
+  }, showFullscreen && /*#__PURE__*/React.createElement(Tooltip, {
+    title: locale.fullscreen
+  }, /*#__PURE__*/React.createElement(FullscreenOutlined, {
+    className: "pointable",
+    onClick: function onClick() {
+      if (onFullscreen) {
+        onFullscreen();
+      }
+    }
+  })), /*#__PURE__*/React.createElement("span", {
+    className: "".concat(prefix, "-zoom-wrapper")
+  }, /*#__PURE__*/React.createElement(Tooltip, {
+    title: locale.shrink
+  }, /*#__PURE__*/React.createElement(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 ? void 0 : graph.zoomTo(newZoom, getCenterPointByGraph(graph));
+      }
+    }
+  })), toPercent(zoom), /*#__PURE__*/React.createElement(Tooltip, {
+    title: locale.enlarge
+  }, /*#__PURE__*/React.createElement(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 ? void 0 : graph.zoomTo(newZoom, getCenterPointByGraph(graph));
+      }
+    }
+  }))), /*#__PURE__*/React.createElement(Tooltip, {
+    title: locale.reset
+  }, /*#__PURE__*/React.createElement("img", {
+    src: resetIcon,
+    alt: "",
+    className: "".concat(prefix, "-pointable"),
+    onClick: function onClick() {
+      setZoom(1);
+      graph === null || graph === void 0 ? void 0 : graph.zoomTo(1, getCenterPointByGraph(graph));
+    }
+  })), /*#__PURE__*/React.createElement(Tooltip, {
+    title: locale.fitView
+  }, /*#__PURE__*/React.createElement("img", {
+    src: fitViewIcon,
+    alt: "",
+    className: "".concat(prefix, "-pointable"),
+    onClick: function onClick() {
+      graph === null || graph === void 0 ? void 0 : graph.fitView();
+    }
+  })), onReload && /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement(Divider, {
+    type: "vertical",
+    className: "".concat(prefix, "-divider")
+  })), onReload && /*#__PURE__*/React.createElement(Tooltip, {
+    title: locale.refresh
+  }, /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement(SyncOutlined, {
+    className: "".concat(prefix, "-pointable"),
+    onClick: function onClick() {
+      onReload();
+    }
+  }))));
+};
+export default LocaleWrapper({
+  componentName: 'GraphToolbar',
+  defaultLocale: zhCN
+})(GraphToolbar);

package/es/GraphToolbar/index.less

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

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

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

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

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

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

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

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

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

package/es/Highlight/DiffView/DiffCells.d.ts

@@ -0,0 +1,17 @@
+import * as React from 'react';
+export interface DiffCellsProps {
+    diffPrefixCls: string;
+    data: {
+        index: number;
+        type: 'add' | 'remove' | 'keep';
+        value: string;
+    };
+    emptyText?: string;
+    width: string;
+    /** User can not selection code when lock is enabled */
+    lock?: boolean;
+    rowOffset?: number;
+    onMouseDown?: React.MouseEventHandler;
+    hashId: string;
+}
+export default function DiffCells({ diffPrefixCls, data, emptyText, width, lock, rowOffset, onMouseDown, hashId, }: DiffCellsProps): React.JSX.Element;

package/es/Highlight/DiffView/DiffCells.js

@@ -0,0 +1,43 @@
+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 _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); }
+import * as React from 'react';
+import classNames from 'classnames';
+export default function DiffCells(_ref) {
+  var _mergedClassName, _data$value;
+  var diffPrefixCls = _ref.diffPrefixCls,
+    data = _ref.data,
+    emptyText = _ref.emptyText,
+    width = _ref.width,
+    lock = _ref.lock,
+    _ref$rowOffset = _ref.rowOffset,
+    rowOffset = _ref$rowOffset === void 0 ? 0 : _ref$rowOffset,
+    onMouseDown = _ref.onMouseDown,
+    hashId = _ref.hashId;
+  var cellEmptyClassName = "".concat(diffPrefixCls, "-cell-empty");
+  var cellAddClassName = "".concat(diffPrefixCls, "-cell-add");
+  var cellRemoveClassName = "".concat(diffPrefixCls, "-cell-remove");
+  var add = (data === null || data === void 0 ? void 0 : data.type) === 'add';
+  var remove = (data === null || data === void 0 ? void 0 : data.type) === 'remove';
+  var mergedClassName = (_mergedClassName = {}, _defineProperty(_mergedClassName, cellEmptyClassName, !data), _defineProperty(_mergedClassName, cellAddClassName, add), _defineProperty(_mergedClassName, cellRemoveClassName, remove), _mergedClassName);
+  var rowIndex = data === null || data === void 0 ? void 0 : data.index;
+  if (rowIndex !== undefined) {
+    rowIndex += rowOffset;
+  }
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("td", {
+    className: classNames("".concat(diffPrefixCls, "-index"), mergedClassName, hashId)
+  }, rowIndex), /*#__PURE__*/React.createElement("td", {
+    className: classNames("".concat(diffPrefixCls, "-mark"), mergedClassName, hashId)
+  }, add && '+', remove && '-'), /*#__PURE__*/React.createElement("td", {
+    onMouseDown: onMouseDown,
+    style: {
+      width: width,
+      userSelect: lock ? 'none' : undefined
+    },
+    className: classNames("".concat(diffPrefixCls, "-code"), mergedClassName, hashId),
+    dangerouslySetInnerHTML: {
+      __html: (_data$value = data === null || data === void 0 ? void 0 : data.value) !== null && _data$value !== void 0 ? _data$value : emptyText || ''
+    }
+  }));
+}

package/es/Highlight/DiffView/index.d.ts

@@ -0,0 +1,44 @@
+import React from 'react';
+import type { HighlightProps } from '..';
+import '../index.less';
+export interface DiffViewProps extends Omit<HighlightProps, 'children' | 'innerHTML'> {
+    /**
+     * @description 自定义前缀
+     * @ignore
+     */
+    prefixCls?: string;
+    /**
+     * @description 样式
+     * @ignore
+     */
+    style?: React.CSSProperties;
+    /**
+     * @description className 类名
+     * @ignore
+     */
+    className?: string;
+    /**
+     * @title 原始代码
+     * @renderType json
+     * @description 原始代码
+     */
+    source: string;
+    /**
+     * @title 目标代码
+     * @renderType json
+     * @description 目标代码
+     */
+    target: string;
+    /**
+     * @title 是否分割展示
+     * @description 是否分割展示
+     */
+    split?: boolean;
+    /**
+     * @title 起始行号
+     * @description 起始行号，默认为 1，也可以分别对左右两侧起始行号进行配置
+     */
+    startRowIndex?: number | number[];
+}
+declare const DiffView: React.FC<DiffViewProps>;
+export default DiffView;