@oceanbase/ui 0.2.0

package/es/Highlight/JsonView.js

@@ -0,0 +1,44 @@
+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 { useRef } from 'react';
+import ReactJson from 'react-json-view';
+import { getPrefix } from "../_util";
+import { THEME_DARK } from '.';
+import { useKeyDownCopyEvent } from "./useKeyDownCopyEvent";
+// @ts-ignore
+import "./index.less";
+export default (function (_ref) {
+  var json = _ref.json,
+    theme = _ref.theme,
+    style = _ref.style,
+    className = _ref.className,
+    height = _ref.height,
+    _ref$onCopyChange = _ref.onCopyChange,
+    onCopyChange = _ref$onCopyChange === void 0 ? function () {} : _ref$onCopyChange,
+    _ref$copyable = _ref.copyable,
+    copyable = _ref$copyable === void 0 ? true : _ref$copyable;
+  var prefixCls = getPrefix('highlight');
+  var isDarkTheme = theme === THEME_DARK;
+  var codeRef = useRef();
+  useKeyDownCopyEvent(codeRef);
+  return /*#__PURE__*/React.createElement("div", {
+    style: style,
+    ref: codeRef
+    // 让div支持focus能力
+    ,
+    tabIndex: -1,
+    className: classNames(prefixCls, "".concat(prefixCls, "-json-view"), _defineProperty({}, "".concat(prefixCls, "-light"), !isDarkTheme), className)
+  }, /*#__PURE__*/React.createElement(ReactJson, {
+    enableClipboard: copyable && onCopyChange,
+    src: json,
+    theme: isDarkTheme ? 'ocean' : undefined,
+    displayDataTypes: false,
+    style: {
+      height: height
+    },
+    name: false
+  }));
+});

package/es/Highlight/index.d.ts

@@ -0,0 +1,97 @@
+/// <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;
+    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" | "javascript" | "typescript" | "css" | "groovy" | "java" | "python" | "bash" | "json" | "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;

package/es/Highlight/index.js

@@ -0,0 +1,257 @@
+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 _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+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 _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; }
+/**
+ * 高亮能力基于highlight.js 的语法解析能力 https://highlightjs.org/
+ * 听说过的还算有名的语言放在langugaes中了，需要新增语言时在languages文件夹中添加并import使用，加入到 languageMap中
+ * 如果没有在 https://github.com/highlightjs/highlight.js/tree/master/src/languages 中查找是否支持，然后添加
+ * 优先支持蚂蚁主流语言，没有import在代码中使用的不会打包
+ */
+import hljs from 'highlight.js/lib/core';
+import React, { useEffect, useState } from 'react';
+import { default as javascript, default as jsx } from "./languages/javascript";
+// tsx 本质上也是采用typescript进行解析，hljs做了支持
+import { CheckOutlined, CopyOutlined } from '@ant-design/icons';
+import { token } from '@oceanbase/design';
+import { message } from '@oceanbase/design';
+import classNames from 'classnames';
+import CopyToClipboard from 'react-copy-to-clipboard';
+import LocaleWrapper from "../locale/LocaleWrapper";
+import { getPrefix } from "../_util";
+import DiffView from "./DiffView";
+import HighlightCell from "./HighlightCell";
+import JsonView from "./JsonView";
+import bash from "./languages/bash";
+import cpp from "./languages/cpp";
+import css from "./languages/css";
+import dockerfile from "./languages/dockerfile";
+import go from "./languages/go";
+import groovy from "./languages/groovy";
+import http from "./languages/http";
+import java from "./languages/java";
+import json from "./languages/json";
+import markdown from "./languages/markdown";
+import nginx from "./languages/nginx";
+import python from "./languages/python";
+import ruby from "./languages/ruby";
+import solidity from "./languages/solidity";
+import sql from "./languages/sql";
+import { default as tsx, default as typescript } from "./languages/typescript";
+import xml from "./languages/xml";
+import yaml from "./languages/yaml";
+import zhCN from "./locale/zh-CN";
+import { useKeyDownCopyEvent } from "./useKeyDownCopyEvent";
+// @ts-ignore
+import "./index.less";
+
+// 目前支持的语言列表
+export var languageMap = {
+  javascript: javascript,
+  typescript: typescript,
+  css: css,
+  groovy: groovy,
+  java: java,
+  python: python,
+  bash: bash,
+  json: json,
+  cpp: cpp,
+  http: http,
+  markdown: markdown,
+  nginx: nginx,
+  ruby: ruby,
+  sql: sql,
+  xml: xml,
+  dockerfile: dockerfile,
+  go: go,
+  yaml: yaml,
+  solidity: solidity,
+  tsx: tsx,
+  jsx: jsx
+};
+export var THEME_DARK = 'dark';
+export var THEME_LIGHT = 'light';
+
+// 主题类型
+var tuple = function tuple() {
+  for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+    args[_key] = arguments[_key];
+  }
+  return args;
+};
+var ThemeTypes = tuple(THEME_DARK, THEME_LIGHT);
+// 支持的语言
+var supportedLanguages = Object.keys(languageMap);
+export var renderHightlight = function renderHightlight(language, content) {
+  var result = language ? hljs.highlight(language, content || '') : hljs.highlightAuto(content);
+  return result;
+};
+var Highlight = function Highlight(props) {
+  var children = props.children,
+    customStyle = props.style,
+    height = props.height,
+    className = props.className,
+    innerHTML = props.innerHTML,
+    _props$lineNumber = props.lineNumber,
+    lineNumber = _props$lineNumber === void 0 ? false : _props$lineNumber,
+    _props$copyable = props.copyable,
+    copyable = _props$copyable === void 0 ? true : _props$copyable,
+    _props$theme = props.theme,
+    theme = _props$theme === void 0 ? THEME_LIGHT : _props$theme,
+    _props$onCopyChange = props.onCopyChange,
+    onCopyChange = _props$onCopyChange === void 0 ? function () {} : _props$onCopyChange,
+    language = props.language;
+  var prefixCls = getPrefix('highlight');
+  var themeClass = theme === THEME_DARK ? "".concat(prefixCls, "-dark") : "".concat(prefixCls, "-light");
+  var codeRef = /*#__PURE__*/React.createRef();
+
+  // 代码块展示的结构
+  var _React$useState = React.useState(),
+    _React$useState2 = _slicedToArray(_React$useState, 2),
+    codeBlock = _React$useState2[0],
+    setCodeBlock = _React$useState2[1];
+
+  // 按需加载语言
+  useEffect(function () {
+    if (language && languageMap[language]) {
+      hljs.registerLanguage(language, languageMap[language]);
+    } else {
+      Object.keys(languageMap).forEach(function (lan) {
+        hljs.registerLanguage(lan, languageMap[lan]);
+      });
+    }
+  }, [language]);
+  var highlightCode = function highlightCode() {
+    // 数据为空即跳过渲染
+    if (!children) {
+      return;
+    }
+
+    // 构造table展示codeblock
+    var _renderHightlight = renderHightlight(language, children),
+      value = _renderHightlight.value;
+    var sourceData = value.split(/\r?\n/);
+    // 构造整个list所需要的内容（行号和内容）
+    var rowList = sourceData.map(function (rowValue, index) {
+      return {
+        value: rowValue,
+        index: index + 1
+      };
+    });
+    setCodeBlock(rowList.map(function (src, index) {
+      return /*#__PURE__*/React.createElement("tr", {
+        key: index
+      }, /*#__PURE__*/React.createElement(HighlightCell, {
+        lineNumber: lineNumber,
+        width: "100%",
+        data: src,
+        theme: theme,
+        prefixCls: prefixCls
+      }));
+    }));
+  };
+
+  // 触发重新渲染
+  useEffect(function () {
+    highlightCode();
+  }, [children, innerHTML, theme, language, lineNumber]);
+
+  // 支持复制能力
+  useKeyDownCopyEvent(codeRef);
+  var customProps = {
+    ref: codeRef,
+    className: "".concat(className),
+    style: customStyle,
+    tabIndex: '-1'
+  };
+  if (innerHTML) {
+    customProps.dangerouslySetInnerHTML = {
+      __html: children
+    };
+    return /*#__PURE__*/React.createElement("div", customProps);
+  }
+  var CopyButton = function CopyButton() {
+    var _useState = useState(),
+      _useState2 = _slicedToArray(_useState, 2),
+      copyId = _useState2[0],
+      setCopyId = _useState2[1];
+    useEffect(function () {
+      return function () {
+        window.clearTimeout(copyId);
+      };
+    });
+    var _useState3 = useState(false),
+      _useState4 = _slicedToArray(_useState3, 2),
+      copied = _useState4[0],
+      setCopied = _useState4[1];
+    return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(CopyToClipboard, {
+      text: children && children.length ? children : '',
+      onCopy: function onCopy(value) {
+        onCopyChange(value);
+        setCopied(true);
+        message.success('Copied');
+        var tempCopyId = window.setTimeout(function () {
+          setCopied(false);
+        }, 2000);
+        setCopyId(tempCopyId);
+      }
+    }, /*#__PURE__*/React.createElement("button", {
+      disabled: copied,
+      className: classNames("".concat(prefixCls, "-copy")),
+      style: {
+        background: "".concat(theme === THEME_DARK ? "#2b303b" : token.colorBgLayout)
+      }
+    }, /*#__PURE__*/React.createElement(CopyOutlined, {
+      className: classNames("".concat(prefixCls, "-copy-icon"), {
+        scoll: copied
+      }),
+      style: {
+        color: "".concat(theme === THEME_DARK ? token.colorBgLayout : "#2b303b")
+      }
+    }), /*#__PURE__*/React.createElement(CheckOutlined, {
+      className: classNames("".concat(prefixCls, "-copy-icon")),
+      style: {
+        color: 'rgb(63,177,99)'
+      }
+    }))));
+  };
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("pre", _extends({}, customProps, {
+    style: _objectSpread(_objectSpread({}, customStyle), {}, {
+      position: 'relative'
+    }),
+    className: classNames("".concat(prefixCls), className, themeClass)
+  }), copyable && /*#__PURE__*/React.createElement(CopyButton, null), /*#__PURE__*/React.createElement("table", {
+    style: {
+      padding: '0',
+      height: height
+    },
+    className: classNames("".concat(theme === THEME_DARK ? "".concat(prefixCls, "-dark") : "".concat(prefixCls, "-light")))
+  }, /*#__PURE__*/React.createElement("tbody", null, codeBlock))));
+};
+var HighlightWrapper = function HighlightWrapper(props) {
+  var language = props.language,
+    children = props.children;
+  if (language === 'json' && children && _typeof(children) === 'object' && ! /*#__PURE__*/React.isValidElement(children)) {
+    return /*#__PURE__*/React.createElement(JsonView, _extends({}, props, {
+      json: children
+    }));
+  }
+  return /*#__PURE__*/React.createElement(Highlight, props);
+};
+HighlightWrapper.Diff = DiffView;
+
+// export default HighlightWrapper;
+
+export default LocaleWrapper({
+  componentName: 'HighlightWrapper',
+  defaultLocale: zhCN
+})(HighlightWrapper);