ze-react-component-library/es/components/TsEditor/index.js

ZeroETP React Component Library

var __assign = this && this.__assign || function () {
  __assign = Object.assign || function (t) {
    for (var s, i = 1, n = arguments.length; i < n; i++) {
      s = arguments[i];

      for (var p in s) {
        if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
      }
    }

    return t;
  };

  return __assign.apply(this, arguments);
};

var __rest = this && this.__rest || function (s, e) {
  var t = {};

  for (var p in s) {
    if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
  }

  if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
    if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
  }
  return t;
};

import React, { forwardRef, useRef, useEffect } from "react";
import AceEditor from "react-ace";
import { useFullscreen } from "@umijs/hooks";
import FullscreenBtn from "../FullscreenBtn";
import jsBeautify from "js-beautify";
import "ace-builds/src-noconflict/mode-typescript";
import "ace-builds/src-noconflict/theme-github";
import "ace-builds/src-noconflict/ext-language_tools";
import ace from "ace-builds";
ace.config.setModuleUrl("ace/mode/typescript", require("file-loader?esModule=false!ace-builds/src-noconflict/mode-typescript.js"));
ace.config.setModuleUrl("ace/theme/github", require("file-loader?esModule=false!ace-builds/src-noconflict/theme-github.js"));
ace.config.setModuleUrl("ace/ext/language_tools", require("file-loader?esModule=false!ace-builds/src-noconflict/ext-language_tools.js"));
ace.config.setModuleUrl("ace/snippets/javascript", require("file-loader?esModule=false!ace-builds/src-noconflict/snippets/javascript.js"));
var BeautifyOptions = {
  indent_size: 2
};
var TsEditor = /*#__PURE__*/forwardRef(function (_a, ref) {
  var _b = _a.name,
      name = _b === void 0 ? "ze-ts-editor" : _b,
      _c = _a.autoFoldFirstLine,
      autoFoldFirstLine = _c === void 0 ? true : _c,
      restProps = __rest(_a, ["name", "autoFoldFirstLine"]);

  var editorRef = useRef();
  var rootRef = useRef(null);
  var fullscreenProps = useFullscreen({
    dom: function dom() {
      return rootRef.current;
    }
  });
  var isFullscreen = fullscreenProps.isFullscreen;
  useEffect(function () {
    var _a;

    var session = (_a = editorRef.current) === null || _a === void 0 ? void 0 : _a.getSession();

    if (session && autoFoldFirstLine) {
      //@ts-ignore 默认第一层折叠起来
      session.foldAll(1, undefined, 0);
    }
  }, [autoFoldFirstLine]);
  return /*#__PURE__*/React.createElement("div", {
    className: "ze-ts-editor",
    style: {
      padding: isFullscreen ? 24 : 0,
      background: "white"
    },
    ref: rootRef
  }, /*#__PURE__*/React.createElement("div", {
    style: {
      position: "relative"
    }
  }, /*#__PURE__*/React.createElement(AceEditor, __assign({
    ref: ref,
    mode: "typescript",
    theme: "github",
    name: name,
    showPrintMargin: true,
    showGutter: true,
    highlightActiveLine: true,
    onLoad: function onLoad(editor) {
      editorRef.current = editor;
    },
    commands: [{
      name: "beautify",
      bindKey: {
        win: "Ctrl-shift-F",
        mac: "Ctrl-shift-F"
      },
      exec: function exec() {
        var _a;

        var session = (_a = editorRef.current) === null || _a === void 0 ? void 0 : _a.getSession();

        if (session) {
          session.setValue(jsBeautify(session.getValue(), BeautifyOptions));
        }
      }
    }],
    setOptions: {
      enableBasicAutocompletion: true,
      enableLiveAutocompletion: true,
      enableSnippets: true,
      showLineNumbers: true,
      tabSize: 2
    }
  }, restProps, {
    height: isFullscreen ? "calc(100vh - 48px)" : restProps === null || restProps === void 0 ? void 0 : restProps.height
  })), /*#__PURE__*/React.createElement(FullscreenBtn, __assign({}, fullscreenProps))));
});
export default TsEditor;