salary-management-front/pc4mobx/hrmSalary/components/excelEditor/index.js

import React, { Component } from "react";
import { Button } from "antd";
import { Controlled as CodeMirror } from "react-codemirror2";
import { keyboardBaseBtns } from "./constants";
import CodeAction from "./components/codeAction";
import cs from "classnames";
import "./index.less";
import "codemirror/lib/codemirror.css";
import "codemirror/lib/codemirror.js";

class ExcelEditor extends Component {
  constructor(props) {
    super(props);
    this.state = {
      value: "",
      widgets: []
    };
    this.editorRef = null;
    this.timer = null;
  }


  componentWillUnmount() {
    if (this.timer) clearInterval(this.timer);
  }

  /*
   * Author: 黎永顺
   * Description: 插入字符
   * Params:
   * Date: 2023/4/13
   */
  insertText = text => {
    const cursor = this.editorRef.getCursor();
    this.editorRef.replaceRange(text, cursor);
    this.editorRef.refresh();
    this.editorRef.focus();
  };

  replaceToWidget = (editor) => {
    editor.getAllMarks().forEach(m => m.clear());
  };
  handleVariSelect = str => this.insertText(`{${str}}`);
  handleFuncSelect = str => {
    const cursor = this.editorRef.getCursor();
    this.editorRef.replaceRange(`${str}()`, cursor);
    this.timer = setTimeout(() => {
      const { line, ch } = this.editorRef.getCursor();
      this.editorRef.setCursor({ line, ch: ch - 1 });
      this.editorRef.refresh();
      this.editorRef.focus();
    }, 100);
  };
  handleEditorRedo = () => {
    const { ch, line } = this.editorRef.getCursor();
    const delStr = this.editorRef.getRange({ line, ch: ch - 1 }, { line, ch });
    const codeValue = this.editorRef.getValue();
    if (delStr === "}") {
      if (codeValue.slice(0, ch).lastIndexOf("{") === -1) {
        this.editorRef.replaceRange("", { line, ch: ch - 1 }, { line, ch });
      } else {
        this.editorRef.replaceRange("", { line, ch: codeValue.slice(0, ch).lastIndexOf("{") }, { line, ch });
      }
    } else {
      this.editorRef.replaceRange("", { line, ch: ch - 1 }, { line, ch });
    }
  };
  handleBackSpaceRedo = () => {
    const { ch, line } = this.editorRef.getCursor();
    const delStr = this.editorRef.getRange({ line, ch: ch - 1 }, { line, ch });
    const codeValue = this.editorRef.getValue();
    if (delStr === "}") {
      if (codeValue.slice(0, ch).lastIndexOf("{") === -1) {
        this.editorRef.replaceRange("", { line, ch: ch - 1 }, { line, ch });
      } else {
        this.editorRef.replaceRange("", { line, ch: codeValue.slice(0, ch).lastIndexOf("{") + 1 }, { line, ch });
      }
    }
  };

  render() {
    const { groupParams = {} } = this.props;
    const { referenceType } = groupParams;
    return (
      <React.Fragment>
        <div className="excel-codeWrap">
          <div className="excel-codeBox">
            <CodeMirror
              editorDidMount={editor => this.editorRef = editor}
              value={this.state.value}
              onBeforeChange={(editor, data, value) => {
                console.log(value);
                this.setState({ value });
              }}
              onChange={(editor, data, value) => {
                this.replaceToWidget(editor, data, 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: "",
                showCursorWhenSelecting: true
              }}
              onKeyDown={(_, { keyCode }) => keyCode === 8 && this.handleBackSpaceRedo()}
            />
          </div>
          {
            referenceType !== "sql" &&
            <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 === " " ? "excel-codeBox-keyboard-space" : "excel-codeBox-keyboard-base")}
                        onClick={() => this.insertText(key)}
                      >{label}</Button>;
                    })
                  }
                </div>
                <div className="excel-codeBox-keyboard-operate-clear">
                  <Button title="←" size="small" className="excel-codeBox-keyboard-del"
                          onClick={this.handleEditorRedo}>←</Button>
                  <Button title="C" size="small" className="excel-codeBox-keyboard-clear"
                          onClick={() => this.setState({ value: "", widgets: [] })}>C</Button>
                </div>
              </div>
            </div>
          }
        </div>
        {/*公式参数列表*/}
        <CodeAction groupParams={groupParams} onVariSelect={this.handleVariSelect}
                    onFuncSelect={this.handleFuncSelect}/>
      </React.Fragment>
    );
  }
}

export default ExcelEditor;