@oceanbase/ui 0.2.0

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 { FullscreenOutlined, MinusOutlined, PlusOutlined, SyncOutlined } from '@ant-design/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";
+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.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.js

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

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

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

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 classNames from 'classnames';
+import * as React from 'react';
+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;

package/es/Highlight/DiffView/index.js

@@ -0,0 +1,317 @@
+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 ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+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 _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
+function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
+function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
+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 classNames from 'classnames';
+import { diffLines } from 'diff';
+import hljs from 'highlight.js/lib/core';
+import warning from 'rc-util/lib/warning';
+import React, { useEffect, useMemo } from 'react';
+import { languageMap } from '..';
+import { getPrefix } from "../..//_util";
+import { useKeyDownCopyEvent } from "../useKeyDownCopyEvent";
+import DiffCells from "./DiffCells";
+// @ts-ignore
+import "../index.less";
+var MAX_MERGE_TIMES = 10000;
+var EMPTY_TEXT = "<span class=\"hljs-comment\">// \u6CA1\u6709\u6570\u636E</span>";
+function getHighlightRows(language, code) {
+  var _ref = language ? hljs.highlight(language, code) : hljs.highlightAuto(code),
+    value = _ref.value;
+  return value.split(/\r?\n/);
+}
+var DiffView = function DiffView(_ref2) {
+  var style = _ref2.style,
+    className = _ref2.className,
+    customizePrefixCls = _ref2.prefixCls,
+    source = _ref2.source,
+    target = _ref2.target,
+    language = _ref2.language,
+    _ref2$split = _ref2.split,
+    split = _ref2$split === void 0 ? true : _ref2$split,
+    theme = _ref2.theme,
+    height = _ref2.height,
+    _ref2$startRowIndex = _ref2.startRowIndex,
+    baseStartRowIndex = _ref2$startRowIndex === void 0 ? 1 : _ref2$startRowIndex;
+  var prefixCls = getPrefix('highlight');
+  var diffPrefixCls = "".concat(prefixCls, "-diff");
+  var _React$useState = React.useState(null),
+    _React$useState2 = _slicedToArray(_React$useState, 2),
+    report = _React$useState2[0],
+    setReport = _React$useState2[1];
+  var normalizedIndexes = Array.isArray(baseStartRowIndex) ? baseStartRowIndex : [baseStartRowIndex, baseStartRowIndex];
+  var _normalizedIndexes = _slicedToArray(normalizedIndexes, 2),
+    _normalizedIndexes$ = _normalizedIndexes[0],
+    baseStartRowIndexSrc = _normalizedIndexes$ === void 0 ? 1 : _normalizedIndexes$,
+    _normalizedIndexes$2 = _normalizedIndexes[1],
+    baseStartRowIndexTgt = _normalizedIndexes$2 === void 0 ? 1 : _normalizedIndexes$2;
+  var rowOffsetSrc = baseStartRowIndexSrc > 1 ? baseStartRowIndexSrc - 1 : 0;
+  var rowOffsetTgt = baseStartRowIndexTgt > 1 ? baseStartRowIndexTgt - 1 : 0;
+
+  // =========================== Language ===========================
+  useEffect(function () {
+    if (language) {
+      hljs.registerLanguage(language, languageMap[language]);
+    } else {
+      Object.keys(languageMap).forEach(function (lan) {
+        hljs.registerLanguage(lan, languageMap[lan]);
+      });
+    }
+  }, [language]);
+
+  // ============================= Lock =============================
+  // Lock the selection to make user easy to copy
+  var _React$useState3 = React.useState(null),
+    _React$useState4 = _slicedToArray(_React$useState3, 2),
+    selectable = _React$useState4[0],
+    setSelectable = _React$useState4[1];
+  function setSelectableRegion(region) {
+    if (region !== selectable) {
+      var _window$getSelection, _window, _window$getSelection$, _window$getSelection$2, _window$getSelection2, _window2, _window$getSelection3, _window$getSelection4;
+      (_window$getSelection = (_window = window).getSelection) === null || _window$getSelection === void 0 ? void 0 : (_window$getSelection$ = (_window$getSelection$2 = _window$getSelection.call(_window)).removeAllRanges) === null || _window$getSelection$ === void 0 ? void 0 : _window$getSelection$.call(_window$getSelection$2);
+      (_window$getSelection2 = (_window2 = window).getSelection) === null || _window$getSelection2 === void 0 ? void 0 : (_window$getSelection3 = (_window$getSelection4 = _window$getSelection2.call(_window2)).empty) === null || _window$getSelection3 === void 0 ? void 0 : _window$getSelection3.call(_window$getSelection4);
+    }
+    setSelectable(region);
+  }
+  var onSourceMouseDown = function onSourceMouseDown() {
+    setSelectableRegion('source');
+  };
+  var onTargetMouseDown = function onTargetMouseDown() {
+    setSelectableRegion('target');
+  };
+
+  // ============================= Diff =============================
+  // Collection diff content
+  useEffect(function () {
+    if (!source && !target) {
+      setReport(null);
+      return;
+    }
+    var srcRows = getHighlightRows(language, source || '');
+    var tgtRows = getHighlightRows(language, target || '');
+    var diff = diffLines(source || '', target || '');
+    var newReport = {
+      source: srcRows,
+      target: tgtRows,
+      diff: diff
+    };
+    setReport(newReport);
+  }, [source, target, language]);
+
+  // Get diff rows
+  var diffData = useMemo(function () {
+    if (!report) {
+      return null;
+    }
+    var startRowIndex = 0;
+    var endRowIndex = 0;
+    var sourceRows = [];
+    var targetRows = [];
+    report.diff.forEach(function (_ref3) {
+      var count = _ref3.count,
+        added = _ref3.added,
+        removed = _ref3.removed;
+      // Source
+      if (added) {
+        sourceRows.push.apply(sourceRows, _toConsumableArray(new Array(count).fill(null)));
+      } else {
+        sourceRows.push.apply(sourceRows, _toConsumableArray(report.source.slice(startRowIndex, startRowIndex + count).map(function (value, index) {
+          return {
+            value: value,
+            index: startRowIndex + index + 1,
+            type: removed ? 'remove' : 'keep'
+          };
+        })));
+        startRowIndex += count;
+      }
+
+      // Target
+      if (removed) {
+        targetRows.push.apply(targetRows, _toConsumableArray(new Array(count).fill(null)));
+      } else {
+        targetRows.push.apply(targetRows, _toConsumableArray(report.target.slice(endRowIndex, endRowIndex + count).map(function (value, index) {
+          return {
+            value: value,
+            index: endRowIndex + index + 1,
+            type: added ? 'add' : 'keep'
+          };
+        })));
+        endRowIndex += count;
+      }
+    });
+    return {
+      sourceRows: sourceRows,
+      targetRows: targetRows
+    };
+  }, [report, split]);
+
+  // Merge -- & ++ to one row
+  var mergedData = useMemo(function () {
+    if (!diffData) {
+      return null;
+    }
+    function findMergeRowIndex(startIndex, sourceRows, targetRows) {
+      for (var index = startIndex; index < sourceRows.length - 1; index += 1) {
+        var _sourceRows$index, _targetRows;
+        if (
+        // Row: ---- | null
+        // Row: null | ++++
+        ((_sourceRows$index = sourceRows[index]) === null || _sourceRows$index === void 0 ? void 0 : _sourceRows$index.type) === 'remove' && !targetRows[index] && !sourceRows[index + 1] && ((_targetRows = targetRows[index + 1]) === null || _targetRows === void 0 ? void 0 : _targetRows.type) === 'add') {
+          // Find source remove start index
+          var removeStartIndex = index;
+          for (var i = index - 1; i >= 0; i -= 1) {
+            var _sourceRows$i;
+            if (((_sourceRows$i = sourceRows[i]) === null || _sourceRows$i === void 0 ? void 0 : _sourceRows$i.type) !== 'remove') {
+              removeStartIndex = i + 1;
+              break;
+            }
+          }
+
+          // Find target add end index
+          var addEndIndex = index;
+          for (var _i2 = index + 1; _i2 <= targetRows.length; _i2 += 1) {
+            var _targetRows$_i;
+            if (((_targetRows$_i = targetRows[_i2]) === null || _targetRows$_i === void 0 ? void 0 : _targetRows$_i.type) !== 'add') {
+              addEndIndex = _i2 - 1;
+              break;
+            }
+          }
+          return {
+            index: index + 1,
+            removeCount: index - removeStartIndex + 1,
+            addCount: addEndIndex - index
+          };
+        }
+      }
+      return null;
+    }
+    var sourceRows = diffData.sourceRows,
+      targetRows = diffData.targetRows;
+    var mergeStartIndex = 0;
+    var times = 0;
+    for (; times < MAX_MERGE_TIMES; times += 1) {
+      var mergeInfo = findMergeRowIndex(mergeStartIndex, sourceRows, targetRows);
+      if (mergeInfo === null) {
+        break;
+      }
+      var index = mergeInfo.index,
+        addCount = mergeInfo.addCount,
+        removeCount = mergeInfo.removeCount;
+      var maxMergeRowCount = Math.min(addCount, removeCount);
+      sourceRows = [].concat(_toConsumableArray(sourceRows.slice(0, index)), _toConsumableArray(sourceRows.slice(index + maxMergeRowCount)));
+      targetRows = [].concat(_toConsumableArray(targetRows.slice(0, index - maxMergeRowCount)), _toConsumableArray(targetRows.slice(index)));
+      mergeStartIndex = index - maxMergeRowCount;
+    }
+    warning(times < MAX_MERGE_TIMES, 'Diff check too many times. Please help to fire issue of DiffView. Thanks.');
+
+    /**
+     * Change target rows order when has empty content:
+     *  -- null --              [  Data  ]
+     *  -- null --      =>      -- null --
+     *  [  Data  ]              -- null --
+     */
+    var targetRowsLen = targetRows.length;
+    for (var i = 0; i < targetRowsLen; i += 1) {
+      if (!targetRows[i]) {
+        for (var j = i + 1; j < targetRowsLen; j += 1) {
+          var followRow = targetRows[j];
+          if (followRow) {
+            if (followRow.type === 'add') {
+              targetRows[i] = followRow;
+              targetRows[j] = null;
+            }
+            break;
+          }
+        }
+      }
+    }
+    return {
+      rows: sourceRows.map(function (src, index) {
+        return {
+          source: src,
+          target: targetRows[index]
+        };
+      }),
+      sourceEmpty: sourceRows.every(function (row) {
+        return !row;
+      }),
+      targetEmpty: targetRows.every(function (row) {
+        return !row;
+      })
+    };
+  }, [diffData]);
+
+  // ============================ Render ============================
+  var viewRows;
+  if (!report) {
+    viewRows = /*#__PURE__*/React.createElement("tr", null, /*#__PURE__*/React.createElement(DiffCells, {
+      width: "100%",
+      diffPrefixCls: diffPrefixCls,
+      data: {
+        index: 1,
+        value: EMPTY_TEXT,
+        type: 'keep'
+      }
+    }));
+  } else if (split) {
+    // Split view
+    viewRows = mergedData.rows.map(function (_ref4, index) {
+      var src = _ref4.source,
+        tgt = _ref4.target;
+      return /*#__PURE__*/React.createElement("tr", {
+        key: index
+      }, /*#__PURE__*/React.createElement(DiffCells, {
+        width: "50%",
+        diffPrefixCls: diffPrefixCls,
+        data: src,
+        emptyText: index === 0 && mergedData.sourceEmpty && EMPTY_TEXT,
+        onMouseDown: onSourceMouseDown,
+        lock: selectable !== 'source',
+        rowOffset: rowOffsetSrc
+      }), /*#__PURE__*/React.createElement(DiffCells, {
+        width: "50%",
+        diffPrefixCls: diffPrefixCls,
+        data: tgt,
+        emptyText: index === 0 && mergedData.targetEmpty && EMPTY_TEXT,
+        onMouseDown: onTargetMouseDown,
+        lock: selectable !== 'target',
+        rowOffset: rowOffsetTgt
+      }));
+    });
+  } else {
+    // Merge
+    viewRows = diffData.sourceRows.map(function (src, index) {
+      return /*#__PURE__*/React.createElement("tr", {
+        key: index
+      }, /*#__PURE__*/React.createElement(DiffCells, {
+        width: "100%",
+        diffPrefixCls: diffPrefixCls,
+        data: src !== null && src !== void 0 ? src : diffData.targetRows[index],
+        rowOffset: rowOffsetTgt
+      }));
+    });
+  }
+  var codeRef = React.useRef();
+  useKeyDownCopyEvent(codeRef);
+  return /*#__PURE__*/React.createElement("div", {
+    style: _objectSpread({
+      height: height
+    }, style),
+    ref: codeRef,
+    tabIndex: -1,
+    className: classNames(prefixCls, diffPrefixCls, "".concat(prefixCls, "-").concat(theme === 'dark' ? 'dark' : 'light'), _defineProperty({}, "".concat(diffPrefixCls, "-split"), split), className)
+  }, /*#__PURE__*/React.createElement("table", null, /*#__PURE__*/React.createElement("tbody", null, viewRows)));
+};
+export default DiffView;

package/es/Highlight/HighlightCell.js

@@ -0,0 +1,29 @@
+import classNames from 'classnames';
+import * as React from 'react';
+export default function HighlightCell(_ref) {
+  var _data$value;
+  var prefixCls = _ref.prefixCls,
+    theme = _ref.theme,
+    data = _ref.data,
+    emptyText = _ref.emptyText,
+    width = _ref.width,
+    lock = _ref.lock,
+    _ref$lineNumber = _ref.lineNumber,
+    lineNumber = _ref$lineNumber === void 0 ? false : _ref$lineNumber,
+    onMouseDown = _ref.onMouseDown,
+    hashId = _ref.hashId;
+  var rowIndex = data === null || data === void 0 ? void 0 : data.index;
+  return /*#__PURE__*/React.createElement(React.Fragment, null, lineNumber ? /*#__PURE__*/React.createElement("td", {
+    className: classNames("".concat(prefixCls, "-").concat(theme, "-index"), "".concat(prefixCls, "-index"), hashId)
+  }, rowIndex) : null, /*#__PURE__*/React.createElement("td", {
+    onMouseDown: onMouseDown,
+    style: {
+      width: width,
+      userSelect: lock ? 'none' : undefined
+    },
+    className: classNames("".concat(prefixCls, "-content"), 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/JsonView.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+import type { HighlightProps } from '.';
+import './index.less';
+export interface JsonViewProps extends HighlightProps {
+    json: object;
+}
+declare const _default: ({ json, theme, style, className, height, onCopyChange, copyable, }: JsonViewProps) => import("react").JSX.Element;
+export default _default;