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

package/lib/Highlight/DiffView/index.js

@@ -32,16 +32,16 @@ __export(DiffView_exports, {
   default: () => DiffView_default
 });
 module.exports = __toCommonJS(DiffView_exports);
+var import_design = require("@oceanbase/design");
 var import_classnames = __toESM(require("classnames"));
 var import_diff = require("diff");
 var import_core = __toESM(require("highlight.js/lib/core"));
 var import_warning = __toESM(require("rc-util/lib/warning"));
 var import_react = __toESM(require("react"));
 var import__ = require("..");
-var import_util = require("../../_util");
 var import_useKeyDownCopyEvent = require("../useKeyDownCopyEvent");
 var import_DiffCells = __toESM(require("./DiffCells"));
-var import__2 = require("../index.less");
+var import_jsx_runtime = require("react/jsx-runtime");
 var MAX_MERGE_TIMES = 1e4;
 var EMPTY_TEXT = `<span class="hljs-comment">// 没有数据</span>`;
 function getHighlightRows(language, code) {
@@ -60,7 +60,8 @@ var DiffView = ({
   height,
   startRowIndex: baseStartRowIndex = 1
 }) => {
-  const prefixCls = (0, import_util.getPrefix)("highlight");
+  const { getPrefixCls } = (0, import_react.useContext)(import_design.ConfigProvider.ConfigContext);
+  const prefixCls = customizePrefixCls || getPrefixCls("highlight");
   const diffPrefixCls = `${prefixCls}-diff`;
   const [report, setReport] = import_react.default.useState(null);
   const normalizedIndexes = Array.isArray(baseStartRowIndex) ? baseStartRowIndex : [baseStartRowIndex, baseStartRowIndex];
@@ -221,7 +222,7 @@ var DiffView = ({
   }, [diffData]);
   let viewRows;
   if (!report) {
-    viewRows = /* @__PURE__ */ import_react.default.createElement("tr", null, /* @__PURE__ */ import_react.default.createElement(
+    viewRows = /* @__PURE__ */ (0, import_jsx_runtime.jsx)("tr", { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
       import_DiffCells.default,
       {
         width: "100%",
@@ -232,34 +233,37 @@ var DiffView = ({
           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
-      }
-    )));
+    viewRows = mergedData.rows.map(({ source: src, target: tgt }, index) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("tr", { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        import_DiffCells.default,
+        {
+          width: "50%",
+          diffPrefixCls,
+          data: src,
+          emptyText: index === 0 && mergedData.sourceEmpty && EMPTY_TEXT,
+          onMouseDown: onSourceMouseDown,
+          lock: selectable !== "source",
+          rowOffset: rowOffsetSrc
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        import_DiffCells.default,
+        {
+          width: "50%",
+          diffPrefixCls,
+          data: tgt,
+          emptyText: index === 0 && mergedData.targetEmpty && EMPTY_TEXT,
+          onMouseDown: onTargetMouseDown,
+          lock: selectable !== "target",
+          rowOffset: rowOffsetTgt
+        }
+      )
+    ] }, index));
   } else {
     viewRows = diffData.sourceRows.map((src, index) => {
-      return /* @__PURE__ */ import_react.default.createElement("tr", { key: index }, /* @__PURE__ */ import_react.default.createElement(
+      return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("tr", { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
         import_DiffCells.default,
         {
           width: "100%",
@@ -267,12 +271,12 @@ var DiffView = ({
           data: src ?? diffData.targetRows[index],
           rowOffset: rowOffsetTgt
         }
-      ));
+      ) }, index);
     });
   }
   const codeRef = import_react.default.useRef();
   (0, import_useKeyDownCopyEvent.useKeyDownCopyEvent)(codeRef);
-  return /* @__PURE__ */ import_react.default.createElement(
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
     "div",
     {
       style: {
@@ -289,9 +293,9 @@ var DiffView = ({
           [`${diffPrefixCls}-split`]: split
         },
         className
-      )
-    },
-    /* @__PURE__ */ import_react.default.createElement("table", null, /* @__PURE__ */ import_react.default.createElement("tbody", null, viewRows))
+      ),
+      children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("table", { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("tbody", { children: viewRows }) })
+    }
   );
 };
 var DiffView_default = DiffView;

package/lib/Highlight/HighlightCell.js

@@ -33,7 +33,7 @@ __export(HighlightCell_exports, {
 });
 module.exports = __toCommonJS(HighlightCell_exports);
 var import_classnames = __toESM(require("classnames"));
-var React = __toESM(require("react"));
+var import_jsx_runtime = require("react/jsx-runtime");
 function HighlightCell({
   prefixCls,
   theme,
@@ -46,13 +46,16 @@ function HighlightCell({
   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 || "") }
-    }
-  ));
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+    lineNumber ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("td", { className: (0, import_classnames.default)(`${prefixCls}-${theme}-index`, `${prefixCls}-index`, hashId), children: rowIndex }) : null,
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      "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 || "") }
+      }
+    )
+  ] });
 }

package/lib/Highlight/JsonView.d.ts

@@ -1,5 +1,4 @@
 import type { HighlightProps } from '.';
-import './index.less';
 export interface JsonViewProps extends HighlightProps {
     json: object;
 }

package/lib/Highlight/JsonView.js

@@ -32,13 +32,13 @@ __export(JsonView_exports, {
   default: () => JsonView_default
 });
 module.exports = __toCommonJS(JsonView_exports);
+var import_design = require("@oceanbase/design");
 var import_classnames = __toESM(require("classnames"));
-var import_react = __toESM(require("react"));
+var import_react = require("react");
 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 import_jsx_runtime = require("react/jsx-runtime");
 var JsonView_default = ({
   json,
   theme,
@@ -49,11 +49,12 @@ var JsonView_default = ({
   },
   copyable = true
 }) => {
-  const prefixCls = (0, import_util.getPrefix)("highlight");
+  const { getPrefixCls } = (0, import_react.useContext)(import_design.ConfigProvider.ConfigContext);
+  const prefixCls = getPrefixCls("highlight");
   const isDarkTheme = theme === import__.THEME_DARK;
   const codeRef = (0, import_react.useRef)();
   (0, import_useKeyDownCopyEvent.useKeyDownCopyEvent)(codeRef);
-  return /* @__PURE__ */ import_react.default.createElement(
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
     "div",
     {
       style,
@@ -66,18 +67,18 @@ var JsonView_default = ({
           [`${prefixCls}-light`]: !isDarkTheme
         },
         className
+      ),
+      children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        import_react_json_view.default,
+        {
+          enableClipboard: copyable && onCopyChange,
+          src: json,
+          theme: isDarkTheme ? "ocean" : void 0,
+          displayDataTypes: false,
+          style: { height },
+          name: false
+        }
       )
-    },
-    /* @__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
-      }
-    )
+    }
   );
 };

package/lib/Highlight/index.d.ts

@@ -1,7 +1,6 @@
 /// <reference types="highlight.js" />
 import React from 'react';
 import type { LocaleWrapperProps } from '../locale/LocaleWrapper';
-import './index.less';
 export declare const languageMap: {
     javascript: any;
     typescript: any;

package/lib/Highlight/index.js

@@ -45,7 +45,7 @@ var import_design2 = require("@oceanbase/design");
 var import_classnames = __toESM(require("classnames"));
 var import_react_copy_to_clipboard = __toESM(require("react-copy-to-clipboard"));
 var import_LocaleWrapper = __toESM(require("../locale/LocaleWrapper"));
-var import_util = require("../_util");
+var import_style = __toESM(require("./style"));
 var import_DiffView = __toESM(require("./DiffView"));
 var import_HighlightCell = __toESM(require("./HighlightCell"));
 var import_JsonView = __toESM(require("./JsonView"));
@@ -69,7 +69,7 @@ var import_xml = __toESM(require("./languages/xml"));
 var import_yaml = __toESM(require("./languages/yaml"));
 var import_zh_CN = __toESM(require("./locale/zh-CN"));
 var import_useKeyDownCopyEvent = require("./useKeyDownCopyEvent");
-var import_index = require("./index.less");
+var import_jsx_runtime = require("react/jsx-runtime");
 var languageMap = {
   javascript: import_javascript.default,
   typescript: import_typescript.default,
@@ -117,7 +117,9 @@ var Highlight = (props) => {
     language,
     locale
   } = props;
-  const prefixCls = (0, import_util.getPrefix)("highlight");
+  const { getPrefixCls } = (0, import_react.useContext)(import_design.ConfigProvider.ConfigContext);
+  const prefixCls = getPrefixCls("highlight");
+  const { wrapSSR } = (0, import_style.default)(prefixCls);
   const themeClass = theme === THEME_DARK ? `${prefixCls}-dark` : `${prefixCls}-light`;
   const codeRef = import_react.default.createRef();
   const [codeBlock, setCodeBlock] = import_react.default.useState();
@@ -143,7 +145,7 @@ var Highlight = (props) => {
     }));
     setCodeBlock(
       rowList.map((src, index) => {
-        return /* @__PURE__ */ import_react.default.createElement("tr", { key: index }, /* @__PURE__ */ import_react.default.createElement(
+        return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("tr", { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
           import_HighlightCell.default,
           {
             lineNumber,
@@ -152,7 +154,7 @@ var Highlight = (props) => {
             theme,
             prefixCls
           }
-        ));
+        ) }, index);
       })
     );
   };
@@ -168,7 +170,7 @@ var Highlight = (props) => {
   };
   if (innerHTML) {
     customProps.dangerouslySetInnerHTML = { __html: children };
-    return /* @__PURE__ */ import_react.default.createElement("div", { ...customProps });
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { ...customProps });
   }
   const CopyButton = () => {
     const [copyId, setCopyId] = (0, import_react.useState)();
@@ -178,7 +180,7 @@ var Highlight = (props) => {
       };
     });
     const [copied, setCopied] = (0, import_react.useState)(false);
-    return /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, /* @__PURE__ */ import_react.default.createElement(
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
       import_react_copy_to_clipboard.default,
       {
         text: children && children.length ? children : "",
@@ -190,65 +192,71 @@ var Highlight = (props) => {
             setCopied(false);
           }, 2e3);
           setCopyId(tempCopyId);
-        }
-      },
-      /* @__PURE__ */ import_react.default.createElement(
-        "button",
-        {
-          disabled: copied,
-          className: (0, import_classnames.default)(`${prefixCls}-copy`),
-          style: {
-            background: `${theme === THEME_DARK ? `#2b303b` : token.colorBgLayout}`
-          }
         },
-        /* @__PURE__ */ import_react.default.createElement(
-          import_icons.CopyOutlined,
-          {
-            className: (0, import_classnames.default)(`${prefixCls}-copy-icon`, { scoll: copied }),
-            style: { color: `${theme === THEME_DARK ? token.colorBgLayout : `#2b303b`}` }
-          }
-        ),
-        /* @__PURE__ */ import_react.default.createElement(
-          import_icons.CheckOutlined,
+        children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+          "button",
           {
-            className: (0, import_classnames.default)(`${prefixCls}-copy-icon`),
-            style: { color: "rgb(63,177,99)" }
+            disabled: copied,
+            className: (0, import_classnames.default)(`${prefixCls}-copy`),
+            style: {
+              background: `${theme === THEME_DARK ? `#2b303b` : token.colorBgLayout}`
+            },
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                import_icons.CopyOutlined,
+                {
+                  className: (0, import_classnames.default)(`${prefixCls}-copy-icon`, { scoll: copied }),
+                  style: { color: `${theme === THEME_DARK ? token.colorBgLayout : `#2b303b`}` }
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                import_icons.CheckOutlined,
+                {
+                  className: (0, import_classnames.default)(`${prefixCls}-copy-icon`),
+                  style: { color: "rgb(63,177,99)" }
+                }
+              )
+            ]
           }
         )
-      )
-    ));
+      }
+    ) });
   };
-  return /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, /* @__PURE__ */ import_react.default.createElement(
-    "pre",
-    {
-      ...customProps,
-      style: {
-        ...customStyle,
-        position: "relative"
-      },
-      className: (0, import_classnames.default)(`${prefixCls}`, className, themeClass)
-    },
-    copyable && /* @__PURE__ */ import_react.default.createElement(CopyButton, null),
-    /* @__PURE__ */ import_react.default.createElement(
-      "table",
+  return wrapSSR(
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+      "pre",
       {
+        ...customProps,
         style: {
-          height
+          ...customStyle,
+          position: "relative"
         },
-        className: (0, import_classnames.default)(
-          `${theme === THEME_DARK ? `${prefixCls}-dark` : `${prefixCls}-light`}`
-        )
-      },
-      /* @__PURE__ */ import_react.default.createElement("tbody", null, codeBlock)
+        className: (0, import_classnames.default)(`${prefixCls}`, className, themeClass),
+        children: [
+          copyable && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(CopyButton, {}),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            "table",
+            {
+              style: {
+                height
+              },
+              className: (0, import_classnames.default)(
+                `${theme === THEME_DARK ? `${prefixCls}-dark` : `${prefixCls}-light`}`
+              ),
+              children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("tbody", { children: codeBlock })
+            }
+          )
+        ]
+      }
     )
-  ));
+  );
 };
 var HighlightWrapper = (props) => {
   const { language, children } = props;
   if (language === "json" && children && typeof children === "object" && !import_react.default.isValidElement(children)) {
-    return /* @__PURE__ */ import_react.default.createElement(import_JsonView.default, { ...props, json: children });
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_JsonView.default, { ...props, json: children });
   }
-  return /* @__PURE__ */ import_react.default.createElement(Highlight, { ...props });
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Highlight, { ...props });
 };
 HighlightWrapper.Diff = import_DiffView.default;
 var Highlight_default = (0, import_LocaleWrapper.default)({

package/lib/Highlight/locale/ja-JP.d.ts

@@ -0,0 +1,4 @@
+declare const _default: {
+    copied: string;
+};
+export default _default;

package/lib/{GraphToolbar/locale/zh-CN.js → Highlight/locale/ja-JP.js}

@@ -16,17 +16,12 @@ var __copyProps = (to, from, except, desc) => {
 };
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 
-// src/GraphToolbar/locale/zh-CN.ts
-var zh_CN_exports = {};
-__export(zh_CN_exports, {
-  default: () => zh_CN_default
+// src/Highlight/locale/ja-JP.ts
+var ja_JP_exports = {};
+__export(ja_JP_exports, {
+  default: () => ja_JP_default
 });
-module.exports = __toCommonJS(zh_CN_exports);
-var zh_CN_default = {
-  fullscreen: "进入全屏",
-  shrink: "缩小",
-  enlarge: "放大",
-  reset: "显示原始比例",
-  fitView: "自适应画布",
-  refresh: "刷新"
+module.exports = __toCommonJS(ja_JP_exports);
+var ja_JP_default = {
+  copied: "コピー成功"
 };

package/lib/Highlight/style/index.d.ts

@@ -0,0 +1,10 @@
+/// <reference types="react" />
+import type { GenerateStyle } from '@oceanbase/design/es/theme';
+import type { OBToken } from '../../_util/genComponentStyleHook';
+export type HighlightToken = OBToken;
+export declare const genHighlightStyle: GenerateStyle<HighlightToken>;
+declare const _default: (prefixCls: string) => {
+    wrapSSR: (node: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>) => import("react").JSX.Element;
+    hashId: string;
+};
+export default _default;