ze-react-component-library/lib/components/CodeViewer/index.js

ZeroETP React Component Library

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;

require("antd/lib/message/style");

var _message2 = _interopRequireDefault(require("antd/lib/message"));

var _react = _interopRequireDefault(require("react"));

var _icons = require("@ant-design/icons");

var _s = require("@antv/s2");

var _reactSyntaxHighlighter = require("react-syntax-highlighter");

var _sqlPrettier = _interopRequireDefault(require("sql-prettier"));

var _javascript = _interopRequireDefault(require("react-syntax-highlighter/dist/esm/languages/hljs/javascript"));

var _sql = _interopRequireDefault(require("react-syntax-highlighter/dist/esm/languages/hljs/sql"));

var _json = _interopRequireDefault(require("react-syntax-highlighter/dist/esm/languages/hljs/json"));

var _hljs = require("react-syntax-highlighter/dist/esm/styles/hljs");

require("./index.less");

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

_reactSyntaxHighlighter.Light.registerLanguage("javascript", _javascript.default);

_reactSyntaxHighlighter.Light.registerLanguage("sql", _sql.default);

_reactSyntaxHighlighter.Light.registerLanguage("json", _json.default);

function formatSql(sql) {
  var fSql = sql;

  try {
    fSql = _sqlPrettier.default.format(sql);
    return fSql;
  } catch (error) {
    console.log(error);
    return fSql;
  }
}

var CodeViewer = function CodeViewer(_a) {
  var code = _a.code,
      language = _a.language,
      editable = _a.editable,
      onEditIconClick = _a.onEditIconClick;
  var codeArr = (code instanceof Array ? code : [code]).filter(function (f) {
    return f;
  });
  var line = new Array(40).fill("-").join("-");
  var dividerMap = {
    javascript: "\n\n//" + line + "\n\n",
    sql: "\n\n#" + line + "\n\n",
    default: "\n\n"
  };
  var fCode = codeArr.map(function (d) {
    if (language === "sql") {
      return formatSql(d.endsWith(";") ? d : d + ";");
    }

    return d;
  }).join(dividerMap[language] || dividerMap.default);
  return /*#__PURE__*/_react.default.createElement("div", {
    className: "ze-code-viewer"
  }, /*#__PURE__*/_react.default.createElement(_reactSyntaxHighlighter.Light, {
    language: language,
    style: _hljs.docco
  }, fCode), editable && /*#__PURE__*/_react.default.createElement("span", {
    className: "ze-code-viewer-edit"
  }, /*#__PURE__*/_react.default.createElement(_icons.EditOutlined, {
    onClick: function onClick() {
      onEditIconClick === null || onEditIconClick === void 0 ? void 0 : onEditIconClick();
    }
  })), /*#__PURE__*/_react.default.createElement("span", {
    className: "ze-code-viewer-copy",
    onClick: function onClick() {
      (0, _s.copyToClipboard)(fCode);

      _message2.default.success("复制成功");
    }
  }, /*#__PURE__*/_react.default.createElement(_icons.CopyOutlined, null)));
};

var _default = CodeViewer;
exports.default = _default;