@oceanbase/ui
Version:
The UI library based on OceanBase Design
265 lines (263 loc) • 10.2 kB
JavaScript
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/index.tsx
var Highlight_exports = {};
__export(Highlight_exports, {
THEME_DARK: () => THEME_DARK,
THEME_LIGHT: () => THEME_LIGHT,
default: () => Highlight_default,
languageMap: () => languageMap,
renderHightlight: () => renderHightlight
});
module.exports = __toCommonJS(Highlight_exports);
var import_core = __toESM(require("highlight.js/lib/core"));
var import_react = __toESM(require("react"));
var import_javascript = __toESM(require("./languages/javascript"));
var import_icons = require("@oceanbase/icons");
var import_design = require("@oceanbase/design");
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_DiffView = __toESM(require("./DiffView"));
var import_HighlightCell = __toESM(require("./HighlightCell"));
var import_JsonView = __toESM(require("./JsonView"));
var import_bash = __toESM(require("./languages/bash"));
var import_cpp = __toESM(require("./languages/cpp"));
var import_css = __toESM(require("./languages/css"));
var import_dockerfile = __toESM(require("./languages/dockerfile"));
var import_go = __toESM(require("./languages/go"));
var import_groovy = __toESM(require("./languages/groovy"));
var import_http = __toESM(require("./languages/http"));
var import_java = __toESM(require("./languages/java"));
var import_json = __toESM(require("./languages/json"));
var import_markdown = __toESM(require("./languages/markdown"));
var import_nginx = __toESM(require("./languages/nginx"));
var import_python = __toESM(require("./languages/python"));
var import_ruby = __toESM(require("./languages/ruby"));
var import_solidity = __toESM(require("./languages/solidity"));
var import_sql = __toESM(require("./languages/sql"));
var import_typescript = __toESM(require("./languages/typescript"));
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 languageMap = {
javascript: import_javascript.default,
typescript: import_typescript.default,
css: import_css.default,
groovy: import_groovy.default,
java: import_java.default,
python: import_python.default,
bash: import_bash.default,
json: import_json.default,
cpp: import_cpp.default,
http: import_http.default,
markdown: import_markdown.default,
nginx: import_nginx.default,
ruby: import_ruby.default,
sql: import_sql.default,
xml: import_xml.default,
dockerfile: import_dockerfile.default,
go: import_go.default,
yaml: import_yaml.default,
solidity: import_solidity.default,
tsx: import_typescript.default,
jsx: import_javascript.default
};
var THEME_DARK = "dark";
var THEME_LIGHT = "light";
var tuple = (...args) => args;
var ThemeTypes = tuple(THEME_DARK, THEME_LIGHT);
var supportedLanguages = Object.keys(languageMap);
var renderHightlight = (language, content) => {
const result = language ? import_core.default.highlight(language, content || "") : import_core.default.highlightAuto(content);
return result;
};
var Highlight = (props) => {
const {
children,
style: customStyle,
height,
className,
innerHTML,
lineNumber = false,
copyable = true,
theme = THEME_LIGHT,
onCopyChange = () => {
},
language,
locale
} = props;
const prefixCls = (0, import_util.getPrefix)("highlight");
const themeClass = theme === THEME_DARK ? `${prefixCls}-dark` : `${prefixCls}-light`;
const codeRef = import_react.default.createRef();
const [codeBlock, setCodeBlock] = import_react.default.useState();
const { token } = import_design.theme.useToken();
(0, import_react.useEffect)(() => {
if (language && languageMap[language]) {
import_core.default.registerLanguage(language, languageMap[language]);
} else {
Object.keys(languageMap).forEach((lan) => {
import_core.default.registerLanguage(lan, languageMap[lan]);
});
}
}, [language]);
const highlightCode = () => {
if (!children) {
return;
}
const { value } = renderHightlight(language, children);
const sourceData = value.split(/\r?\n/);
const rowList = sourceData.map((rowValue, index) => ({
value: rowValue,
index: index + 1
}));
setCodeBlock(
rowList.map((src, index) => {
return /* @__PURE__ */ import_react.default.createElement("tr", { key: index }, /* @__PURE__ */ import_react.default.createElement(
import_HighlightCell.default,
{
lineNumber,
width: "100%",
data: src,
theme,
prefixCls
}
));
})
);
};
(0, import_react.useEffect)(() => {
highlightCode();
}, [children, innerHTML, theme, language, lineNumber]);
(0, import_useKeyDownCopyEvent.useKeyDownCopyEvent)(codeRef);
const customProps = {
ref: codeRef,
className: `${className}`,
style: customStyle,
tabIndex: "-1"
};
if (innerHTML) {
customProps.dangerouslySetInnerHTML = { __html: children };
return /* @__PURE__ */ import_react.default.createElement("div", { ...customProps });
}
const CopyButton = () => {
const [copyId, setCopyId] = (0, import_react.useState)();
(0, import_react.useEffect)(() => {
return () => {
window.clearTimeout(copyId);
};
});
const [copied, setCopied] = (0, import_react.useState)(false);
return /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, /* @__PURE__ */ import_react.default.createElement(
import_react_copy_to_clipboard.default,
{
text: children && children.length ? children : "",
onCopy: (value) => {
onCopyChange(value);
setCopied(true);
import_design2.message.success(locale.copied);
const tempCopyId = window.setTimeout(() => {
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,
{
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",
{
style: {
height
},
className: (0, import_classnames.default)(
`${theme === THEME_DARK ? `${prefixCls}-dark` : `${prefixCls}-light`}`
)
},
/* @__PURE__ */ import_react.default.createElement("tbody", null, 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__ */ import_react.default.createElement(Highlight, { ...props });
};
HighlightWrapper.Diff = import_DiffView.default;
var Highlight_default = (0, import_LocaleWrapper.default)({
componentName: "Highlight",
defaultLocale: import_zh_CN.default
})(HighlightWrapper);
// Annotate the CommonJS export names for ESM import in node:
0 && (module.exports = {
THEME_DARK,
THEME_LIGHT,
languageMap,
renderHightlight
});