bravo-editor

import * as React from "react";
import {
  Editor,
  supportLanguage,
  CompletionItemKind,
  init
} from "bravo-editor";
import * as monaco from "monaco-editor";

/**
 * @description 资源加载逻辑，用于构建worker，添加在项目入口处
 * @param prefix string型，资源前缀，默认为cdn，专有云场景下需要修改
 */
init();

//封网阶段
init(`https://dev.g.alicdn.com/nel/bravo-editor/${npmVersion}`);

const CompletionTypesEnum = {
  SAMPLE_TYPE_ONE: {
    text: "样例类型1",
    kind: CompletionItemKind.Method
  },
  SAMPLE_TYPE_TWO: {
    text: "样例类型2",
    kind: CompletionItemKind.Method
  },
  KEYWORD: {
    text: "关键词",
    kind: CompletionItemKind.Keyword
  },
  CONSTS: {
    text: "常量",
    kind: CompletionItemKind.Snippet
  },
  FUNCTION: {
    text: "函数",
    kind: CompletionItemKind.Function
  },
  TABLE: {
    text: "表名",
    kind: CompletionItemKind.Method
  },
  TABLEALIAS: {
    text: "表别名",
    kind: CompletionItemKind.Method
  },
  FIELD: {
    text: "表字段",
    kind: CompletionItemKind.Field
  },
  FIELDALIAS: {
    text: "表字段别名",
    kind: CompletionItemKind.Field
  },
  SNIPPET: {
    text: "代码块",
    kind: CompletionItemKind.Snippet
  },
  STREAM_FUNCTION: {
    text: "函数",
    kind: CompletionItemKind.Function
  },
  STREAM_TABLE_FIELD: {
    text: "表字段",
    kind: CompletionItemKind.Field
  }
};

export class Demo extends React.Component {
  render() {
    return (
      <div style={{ height: 400 }}>
        <Editor
          onChange={null}
          onEditorCreated={() => console.log("created")}
          operation={true}
          onCopy={value => console.log("copy success:", value)}
          options={{
            theme: `dark`,
            value: "select * from a",
            language: "ODPSSQL"
          }}
          completionTypes={CompletionTypesEnum}
					onSuggestTables={(keyword, options) => {
            return [
              {
                label: "sample_one_table1",
                type: "SAMPLE_TYPE_ONE",
                insertText: "LD.sample_one_table1",
                kind: CompletionItemKind.Method,
                sortText: "a"
              }
            ];
          }}
          onSuggestFields={(keyword, options) => {
            console.log("keyword==", keyword);
            return Promise.resolve([
              {
                label: "age",
                type: "SAMPLE_TYPE_ONE",
                insertText: "age",
                kind: CompletionItemKind.Field,
                sortText: "b"
              },
              {
                label: "banana",
                type: "SAMPLE_TYPE_ONE",
                insertText: "banana",
                kind: CompletionItemKind.Field,
                sortText: "b"
              }
            ]);
          }}
          sorter={type => {
            switch (type) {
              case "TABLEALIAS":
              case "TABLE":
                return "c";
              case "FIELD":
              case "FIELDALIAS":
                return "d";
              case "KEYWORD":
              case "CONSTS":
                return "e";
              case "FUNCTION":
                return "f";
              default:
            }
          }}
        />
      // diff editor
      <DiffEditor
        languageId="ODPSSQL"
        data={["current data", "original data"]}
      />
      </div>
    );
  }
}