113 lines
4.0 KiB
JavaScript
113 lines
4.0 KiB
JavaScript
import React, { Component } from "react";
|
|
import { Button } from "antd";
|
|
import { UnControlled as CodeMirror } from "react-codemirror2";
|
|
import { keyboardBaseBtns } from "./constants";
|
|
import cs from "classnames";
|
|
import "./index.less";
|
|
|
|
import "codemirror/lib/codemirror.css";
|
|
import "codemirror/lib/codemirror.js";
|
|
|
|
import "codemirror/theme/dracula.css"; //主题
|
|
//代码折叠
|
|
import "codemirror/addon/fold/foldgutter.css";
|
|
import "codemirror/addon/lint/lint.css";
|
|
import "codemirror/addon/fold/foldcode.js";
|
|
import "codemirror/addon/fold/foldgutter.js";
|
|
import "codemirror/addon/fold/brace-fold.js";
|
|
import "codemirror/addon/hint/javascript-hint.js";
|
|
import "codemirror/addon/hint/show-hint.js";
|
|
import "codemirror/addon/lint/lint.js";
|
|
import "codemirror/addon/lint/json-lint.js";
|
|
import "codemirror/addon/lint/javascript-lint.js";
|
|
import "codemirror/addon/display/placeholder.js";
|
|
import "codemirror/mode/javascript/javascript.js";
|
|
import "codemirror/mode/sql/sql.js";
|
|
|
|
// const sqlFormatter = require('sql-formatter');
|
|
|
|
class ExcelEditor extends Component {
|
|
constructor(props) {
|
|
super(props);
|
|
this.state = {
|
|
value: ""
|
|
};
|
|
}
|
|
|
|
|
|
render() {
|
|
return (
|
|
<React.Fragment>
|
|
<div className="excel-codeWrap">
|
|
<div className="excel-codeBox">
|
|
<CodeMirror
|
|
autoCursor
|
|
value={this.state.value}
|
|
onBeforeChange={(editor, data, value) => {
|
|
this.setState({ value });
|
|
}}
|
|
onChange={(editor, value) => {
|
|
console.log("controlled", { value });
|
|
}}
|
|
options={{
|
|
lineNumbers: false,
|
|
mode: { name: this.props.type === "sql" ? "text/x-sql" : "application/json" },
|
|
autofocus: false,
|
|
styleActiveLine: true,
|
|
lineWrapping: true,
|
|
foldGutter: true,
|
|
gutters: ["CodeMirror-linenumbers", "CodeMirror-foldgutter"],
|
|
lint: false,
|
|
indentUnit: 2,
|
|
cursorHeight: 0.85,
|
|
placeholder: ""
|
|
}}
|
|
/>
|
|
</div>
|
|
<div className="excel-codeBox-keyboard">
|
|
<div className="excel-codeBox-keyboard-operate">
|
|
<div className="excel-codeBox-keyboard-operate-content">
|
|
{
|
|
_.map(keyboardBaseBtns, item => {
|
|
const { key, label } = item;
|
|
return <Button
|
|
key={key} title={label} size="small"
|
|
className={cs(key === "space" ? "excel-codeBox-keyboard-space" : "excel-codeBox-keyboard-base")}
|
|
>{label}</Button>;
|
|
})
|
|
}
|
|
</div>
|
|
<div className="excel-codeBox-keyboard-operate-clear">
|
|
<Button title="←" size="small" className="excel-codeBox-keyboard-del">←</Button>
|
|
<Button title="C" size="small" className="excel-codeBox-keyboard-clear">C</Button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div className="excel-codeAction">
|
|
<div className="excel-codeAction-item">
|
|
<div className="excel-codeAction-header">
|
|
<div className="excel-codeAction-header-title">变量</div>
|
|
</div>
|
|
<div className="excel-codeAction-content"></div>
|
|
</div>
|
|
<div className="excel-codeAction-item">
|
|
<div className="excel-codeAction-header">
|
|
<div className="excel-codeAction-header-title">函数</div>
|
|
</div>
|
|
<div className="excel-codeAction-content"></div>
|
|
</div>
|
|
<div className="excel-codeAction-item">
|
|
<div className="excel-codeAction-header">
|
|
<div className="excel-codeAction-header-title">提示</div>
|
|
</div>
|
|
<div className="excel-codeAction-content"></div>
|
|
</div>
|
|
</div>
|
|
</React.Fragment>
|
|
);
|
|
}
|
|
}
|
|
|
|
export default ExcelEditor;
|