@oceanbase/design 0.1.0

package/lib/Highlight/DiffView/index.js

@@ -0,0 +1,299 @@
+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/Highlight/DiffView/index.tsx
+var DiffView_exports = {};
+__export(DiffView_exports, {
+  default: () => DiffView_default
+});
+module.exports = __toCommonJS(DiffView_exports);
+var import_react = __toESM(require("react"));
+var import_warning = __toESM(require("rc-util/lib/warning"));
+var import_core = __toESM(require("highlight.js/lib/core"));
+var import_classnames = __toESM(require("classnames"));
+var import_diff = require("diff");
+var import__ = require("..");
+var import_util = require("../..//_util");
+var import_DiffCells = __toESM(require("./DiffCells"));
+var import_useKeyDownCopyEvent = require("../useKeyDownCopyEvent");
+var import__2 = require("../index.less");
+var MAX_MERGE_TIMES = 1e4;
+var EMPTY_TEXT = `<span class="hljs-comment">// 没有数据</span>`;
+function getHighlightRows(language, code) {
+  const { value } = language ? import_core.default.highlight(language, code) : import_core.default.highlightAuto(code);
+  return value.split(/\r?\n/);
+}
+var DiffView = ({
+  style,
+  className,
+  prefixCls: customizePrefixCls,
+  source,
+  target,
+  language,
+  split = true,
+  theme,
+  height,
+  startRowIndex: baseStartRowIndex = 1
+}) => {
+  const prefixCls = (0, import_util.getPrefix)("highlight");
+  const diffPrefixCls = `${prefixCls}-diff`;
+  const [report, setReport] = import_react.default.useState(null);
+  const normalizedIndexes = Array.isArray(baseStartRowIndex) ? baseStartRowIndex : [baseStartRowIndex, baseStartRowIndex];
+  const [baseStartRowIndexSrc = 1, baseStartRowIndexTgt = 1] = normalizedIndexes;
+  const rowOffsetSrc = baseStartRowIndexSrc > 1 ? baseStartRowIndexSrc - 1 : 0;
+  const rowOffsetTgt = baseStartRowIndexTgt > 1 ? baseStartRowIndexTgt - 1 : 0;
+  (0, import_react.useEffect)(() => {
+    if (language) {
+      import_core.default.registerLanguage(language, import__.languageMap[language]);
+    } else {
+      Object.keys(import__.languageMap).forEach((lan) => {
+        import_core.default.registerLanguage(lan, import__.languageMap[lan]);
+      });
+    }
+  }, [language]);
+  const [selectable, setSelectable] = import_react.default.useState(null);
+  function setSelectableRegion(region) {
+    var _a, _b, _c, _d, _e, _f;
+    if (region !== selectable) {
+      (_c = (_a = window.getSelection) == null ? void 0 : (_b = _a.call(window)).removeAllRanges) == null ? void 0 : _c.call(_b);
+      (_f = (_d = window.getSelection) == null ? void 0 : (_e = _d.call(window)).empty) == null ? void 0 : _f.call(_e);
+    }
+    setSelectable(region);
+  }
+  const onSourceMouseDown = () => {
+    setSelectableRegion("source");
+  };
+  const onTargetMouseDown = () => {
+    setSelectableRegion("target");
+  };
+  (0, import_react.useEffect)(() => {
+    if (!source && !target) {
+      setReport(null);
+      return;
+    }
+    const srcRows = getHighlightRows(language, source || "");
+    const tgtRows = getHighlightRows(language, target || "");
+    const diff = (0, import_diff.diffLines)(source || "", target || "");
+    const newReport = {
+      source: srcRows,
+      target: tgtRows,
+      diff
+    };
+    setReport(newReport);
+  }, [source, target, language]);
+  const diffData = (0, import_react.useMemo)(() => {
+    if (!report) {
+      return null;
+    }
+    let startRowIndex = 0;
+    let endRowIndex = 0;
+    const sourceRows = [];
+    const targetRows = [];
+    report.diff.forEach(({ count, added, removed }) => {
+      if (added) {
+        sourceRows.push(...new Array(count).fill(null));
+      } else {
+        sourceRows.push(
+          ...report.source.slice(startRowIndex, startRowIndex + count).map((value, index) => ({
+            value,
+            index: startRowIndex + index + 1,
+            type: removed ? "remove" : "keep"
+          }))
+        );
+        startRowIndex += count;
+      }
+      if (removed) {
+        targetRows.push(...new Array(count).fill(null));
+      } else {
+        targetRows.push(
+          ...report.target.slice(endRowIndex, endRowIndex + count).map((value, index) => ({
+            value,
+            index: endRowIndex + index + 1,
+            type: added ? "add" : "keep"
+          }))
+        );
+        endRowIndex += count;
+      }
+    });
+    return { sourceRows, targetRows };
+  }, [report, split]);
+  const mergedData = (0, import_react.useMemo)(() => {
+    if (!diffData) {
+      return null;
+    }
+    function findMergeRowIndex(startIndex, sourceRows2, targetRows2) {
+      var _a, _b, _c, _d;
+      for (let index = startIndex; index < sourceRows2.length - 1; index += 1) {
+        if (
+          // Row: ---- | null
+          // Row: null | ++++
+          ((_a = sourceRows2[index]) == null ? void 0 : _a.type) === "remove" && !targetRows2[index] && !sourceRows2[index + 1] && ((_b = targetRows2[index + 1]) == null ? void 0 : _b.type) === "add"
+        ) {
+          let removeStartIndex = index;
+          for (let i = index - 1; i >= 0; i -= 1) {
+            if (((_c = sourceRows2[i]) == null ? void 0 : _c.type) !== "remove") {
+              removeStartIndex = i + 1;
+              break;
+            }
+          }
+          let addEndIndex = index;
+          for (let i = index + 1; i <= targetRows2.length; i += 1) {
+            if (((_d = targetRows2[i]) == null ? void 0 : _d.type) !== "add") {
+              addEndIndex = i - 1;
+              break;
+            }
+          }
+          return {
+            index: index + 1,
+            removeCount: index - removeStartIndex + 1,
+            addCount: addEndIndex - index
+          };
+        }
+      }
+      return null;
+    }
+    let { sourceRows, targetRows } = diffData;
+    let mergeStartIndex = 0;
+    let times = 0;
+    for (; times < MAX_MERGE_TIMES; times += 1) {
+      const mergeInfo = findMergeRowIndex(mergeStartIndex, sourceRows, targetRows);
+      if (mergeInfo === null) {
+        break;
+      }
+      const { index, addCount, removeCount } = mergeInfo;
+      const maxMergeRowCount = Math.min(addCount, removeCount);
+      sourceRows = [...sourceRows.slice(0, index), ...sourceRows.slice(index + maxMergeRowCount)];
+      targetRows = [...targetRows.slice(0, index - maxMergeRowCount), ...targetRows.slice(index)];
+      mergeStartIndex = index - maxMergeRowCount;
+    }
+    (0, import_warning.default)(
+      times < MAX_MERGE_TIMES,
+      "Diff check too many times. Please help to fire issue of DiffView. Thanks."
+    );
+    const targetRowsLen = targetRows.length;
+    for (let i = 0; i < targetRowsLen; i += 1) {
+      if (!targetRows[i]) {
+        for (let j = i + 1; j < targetRowsLen; j += 1) {
+          const followRow = targetRows[j];
+          if (followRow) {
+            if (followRow.type === "add") {
+              targetRows[i] = followRow;
+              targetRows[j] = null;
+            }
+            break;
+          }
+        }
+      }
+    }
+    return {
+      rows: sourceRows.map((src, index) => ({
+        source: src,
+        target: targetRows[index]
+      })),
+      sourceEmpty: sourceRows.every((row) => !row),
+      targetEmpty: targetRows.every((row) => !row)
+    };
+  }, [diffData]);
+  let viewRows;
+  if (!report) {
+    viewRows = /* @__PURE__ */ import_react.default.createElement("tr", null, /* @__PURE__ */ import_react.default.createElement(
+      import_DiffCells.default,
+      {
+        width: "100%",
+        diffPrefixCls,
+        data: {
+          index: 1,
+          value: EMPTY_TEXT,
+          type: "keep"
+        }
+      }
+    ));
+  } else if (split) {
+    viewRows = mergedData.rows.map(({ source: src, target: tgt }, index) => /* @__PURE__ */ import_react.default.createElement("tr", { key: index }, /* @__PURE__ */ import_react.default.createElement(
+      import_DiffCells.default,
+      {
+        width: "50%",
+        diffPrefixCls,
+        data: src,
+        emptyText: index === 0 && mergedData.sourceEmpty && EMPTY_TEXT,
+        onMouseDown: onSourceMouseDown,
+        lock: selectable !== "source",
+        rowOffset: rowOffsetSrc
+      }
+    ), /* @__PURE__ */ import_react.default.createElement(
+      import_DiffCells.default,
+      {
+        width: "50%",
+        diffPrefixCls,
+        data: tgt,
+        emptyText: index === 0 && mergedData.targetEmpty && EMPTY_TEXT,
+        onMouseDown: onTargetMouseDown,
+        lock: selectable !== "target",
+        rowOffset: rowOffsetTgt
+      }
+    )));
+  } else {
+    viewRows = diffData.sourceRows.map((src, index) => {
+      return /* @__PURE__ */ import_react.default.createElement("tr", { key: index }, /* @__PURE__ */ import_react.default.createElement(
+        import_DiffCells.default,
+        {
+          width: "100%",
+          diffPrefixCls,
+          data: src ?? diffData.targetRows[index],
+          rowOffset: rowOffsetTgt
+        }
+      ));
+    });
+  }
+  const codeRef = import_react.default.useRef();
+  (0, import_useKeyDownCopyEvent.useKeyDownCopyEvent)(codeRef);
+  return /* @__PURE__ */ import_react.default.createElement(
+    "div",
+    {
+      style: {
+        height,
+        ...style
+      },
+      ref: codeRef,
+      tabIndex: -1,
+      className: (0, import_classnames.default)(
+        prefixCls,
+        diffPrefixCls,
+        `${prefixCls}-${theme === "dark" ? "dark" : "light"}`,
+        {
+          [`${diffPrefixCls}-split`]: split
+        },
+        className
+      )
+    },
+    /* @__PURE__ */ import_react.default.createElement("table", null, /* @__PURE__ */ import_react.default.createElement("tbody", null, viewRows))
+  );
+};
+var DiffView_default = DiffView;
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {});

package/lib/Highlight/HighlightCell.d.ts

@@ -0,0 +1,18 @@
+import * as React from 'react';
+export interface HighlightCellProps {
+    prefixCls: string;
+    theme: string;
+    data: {
+        index: number;
+        value: string;
+    };
+    emptyText?: string;
+    width: string;
+    /** User can not selection code when lock is enabled */
+    lock?: boolean;
+    rowOffset?: number;
+    onMouseDown?: React.MouseEventHandler;
+    lineNumber?: boolean;
+    hashId?: string;
+}
+export default function HighlightCell({ prefixCls, theme, data, emptyText, width, lock, lineNumber, onMouseDown, hashId, }: HighlightCellProps): React.JSX.Element;

package/lib/Highlight/HighlightCell.js

@@ -0,0 +1,60 @@
+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/Highlight/HighlightCell.tsx
+var HighlightCell_exports = {};
+__export(HighlightCell_exports, {
+  default: () => HighlightCell
+});
+module.exports = __toCommonJS(HighlightCell_exports);
+var React = __toESM(require("react"));
+var import_classnames = __toESM(require("classnames"));
+function HighlightCell({
+  prefixCls,
+  theme,
+  data,
+  emptyText,
+  width,
+  lock,
+  lineNumber = false,
+  onMouseDown,
+  hashId
+}) {
+  const rowIndex = data == null ? void 0 : data.index;
+  return /* @__PURE__ */ React.createElement(React.Fragment, null, lineNumber ? /* @__PURE__ */ React.createElement("td", { className: (0, import_classnames.default)(`${prefixCls}-${theme}-index`, `${prefixCls}-index`, hashId) }, rowIndex) : null, /* @__PURE__ */ React.createElement(
+    "td",
+    {
+      onMouseDown,
+      style: { width, userSelect: lock ? "none" : void 0 },
+      className: (0, import_classnames.default)(`${prefixCls}-content`, hashId),
+      dangerouslySetInnerHTML: { __html: (data == null ? void 0 : data.value) ?? (emptyText || "") }
+    }
+  ));
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {});

package/lib/Highlight/JsonView.d.ts

@@ -0,0 +1,8 @@
+import React from '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) => React.JSX.Element;
+export default _default;

package/lib/Highlight/JsonView.js

@@ -0,0 +1,85 @@
+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/Highlight/JsonView.tsx
+var JsonView_exports = {};
+__export(JsonView_exports, {
+  default: () => JsonView_default
+});
+module.exports = __toCommonJS(JsonView_exports);
+var import_react = __toESM(require("react"));
+var import_classnames = __toESM(require("classnames"));
+var import_react_json_view = __toESM(require("react-json-view"));
+var import_util = require("../_util");
+var import__ = require(".");
+var import_useKeyDownCopyEvent = require("./useKeyDownCopyEvent");
+var import_index = require("./index.less");
+var JsonView_default = ({
+  json,
+  theme,
+  style,
+  className,
+  height,
+  onCopyChange = () => {
+  },
+  copyable = true
+}) => {
+  const prefixCls = (0, import_util.getPrefix)("highlight");
+  const isDarkTheme = theme === import__.THEME_DARK;
+  const codeRef = (0, import_react.useRef)();
+  (0, import_useKeyDownCopyEvent.useKeyDownCopyEvent)(codeRef);
+  return /* @__PURE__ */ import_react.default.createElement(
+    "div",
+    {
+      style,
+      ref: codeRef,
+      tabIndex: -1,
+      className: (0, import_classnames.default)(
+        prefixCls,
+        `${prefixCls}-json-view`,
+        {
+          [`${prefixCls}-light`]: !isDarkTheme
+        },
+        className
+      )
+    },
+    /* @__PURE__ */ import_react.default.createElement(
+      import_react_json_view.default,
+      {
+        enableClipboard: copyable && onCopyChange,
+        src: json,
+        theme: isDarkTheme ? "ocean" : void 0,
+        displayDataTypes: false,
+        style: { height },
+        name: false
+      }
+    )
+  );
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {});

package/lib/Highlight/index.d.ts

@@ -0,0 +1,103 @@
+/// <reference types="highlight.js" />
+/**
+ * 高亮能力基于highlight.js 的语法解析能力 https://highlightjs.org/
+ * 听说过的还算有名的语言放在langugaes中了，需要新增语言时在languages文件夹中添加并import使用，加入到 languageMap中
+ * 如果没有在 https://github.com/highlightjs/highlight.js/tree/master/src/languages 中查找是否支持，然后添加
+ * 优先支持蚂蚁主流语言，没有import在代码中使用的不会打包
+ */
+import React from 'react';
+import type { LocaleWrapperProps } from '../locale/LocaleWrapper';
+import './index.less';
+export declare const languageMap: {
+    javascript: any;
+    typescript: any;
+    css: any;
+    groovy: any;
+    java: any;
+    python: any;
+    bash: any;
+    json: any;
+    cpp: any;
+    http: any;
+    markdown: any;
+    nginx: any;
+    ruby: any;
+    sql: any;
+    xml: any;
+    dockerfile: any;
+    go: any;
+    yaml: any;
+    solidity: any;
+    tsx: any;
+    jsx: any;
+};
+export declare const THEME_DARK = "dark";
+export declare const THEME_LIGHT = "light";
+declare const ThemeTypes: ["dark", "light"];
+export declare type ThemeType = (typeof ThemeTypes)[number];
+declare const supportedLanguages: ("ruby" | "json" | "javascript" | "typescript" | "css" | "groovy" | "java" | "python" | "bash" | "cpp" | "http" | "markdown" | "nginx" | "sql" | "xml" | "dockerfile" | "go" | "yaml" | "solidity" | "tsx" | "jsx")[];
+export declare type LanguageType = (typeof supportedLanguages)[number] | 'html';
+export interface HighlightProps extends LocaleWrapperProps {
+    /**
+     * @description 样式
+     * @ignore
+     */
+    style?: React.CSSProperties;
+    /**
+     * @description className 类名
+     * @ignore
+     */
+    className?: string;
+    /**
+     * @title 指定语言
+     * @description 指定语言，目前支持 javascript,typescript,css,groovy,java,python,bash,json,cpp,http,markdown,nginx,ruby,sql,xml,dockerfile,go,yaml
+     * @renderType select
+     * @default "java"
+     */
+    language?: LanguageType;
+    /**
+     * @title 主题
+     * @description 主题颜色, dark 黑色主题，light 白色主题
+     * @default "light"
+     */
+    theme?: ThemeType;
+    /**
+     * @title 代码块高度
+     * @description 指定代码块高度，用于需要控制代码块高度固定的场景
+     */
+    height?: number;
+    /**
+     * @title 是否使用 `dangerouslySetInnerHTML`
+     * @description 是否使用 `dangerouslySetInnerHTML` 来渲染多段代码
+     * @default false
+     */
+    innerHTML?: boolean;
+    /**
+     * @title 高亮内容，为 JSON 时支持 object
+     * @description 高亮内容，为 JSON 时支持 object
+     * @renderType json
+     * @renderOptions {"format": "string"}
+     */
+    children?: any;
+    /**
+     * @title 是否使用要使用行号
+     * @description 是否需要展示代码块左侧的行号
+     * @default false
+     */
+    lineNumber?: boolean;
+    /**
+     * @title 是否展示复制按钮
+     * @description 是否需要展示复制按钮
+     * @default true
+     */
+    copyable?: boolean;
+    /**
+     * @title 点击复制按钮的回掉
+     * @description 点击复制按钮的回掉
+     * @default () => {}
+     */
+    onCopyChange?: (value: string | Object) => void | Function;
+}
+export declare const renderHightlight: (language: any, content: any) => import("highlight.js").HighlightResult;
+declare const _default: any;
+export default _default;