v2.1 fe

kafka-manager-console/src/component/editor/editor.tsx

@@ -0,0 +1,68 @@
+// import * as React from 'react';
+// import CodeMirror from 'codemirror/lib/codemirror';
+// import 'codemirror/lib/codemirror.css';
+// import 'codemirror/mode/sql/sql';
+// import 'codemirror/mode/javascript/javascript';
+// import 'codemirror/addon/hint/show-hint.js';
+// import 'codemirror/addon/hint/sql-hint.js';
+// import 'codemirror/addon/hint/show-hint.css';
+// import './index.less';
+// import { indexStore } from 'store/my-index';
+
+// interface IProps {
+//   value?: string;
+//   placeholder?: string;
+//   readOnly?: boolean;
+// }
+// export class CodeMirrorEditor extends React.Component<IProps> {
+
+//   public editor = null as any;
+
+//   public handleCodeFocus = () => {
+//     // tslint:disable-next-line:no-unused-expression
+//     this.editor && this.editor.focus();
+//   }
+
+//   public componentDidMount() {
+//     const { value, placeholder, readOnly } = this.props;
+//     const code = document.querySelector('.codemirror');
+//     code.innerHTML = '';
+//     const editor = CodeMirror(document.querySelector('.codemirror'), {
+//       mode: 'application/json',
+//       indentWithTabs: true,
+//       smartIndent: true,
+//       lineNumbers: true,
+//       matchBrackets: true,
+//       autoCloseBrackets: true,
+//       styleSelectedText: true,
+//       foldGutter: true,
+//       readOnly,
+//       extraKeys: readOnly ? {} : {
+//         'Ctrl-Enter': 'autocomplete',
+//         'Tab': (cm) => {
+//           const spaces = Array(cm.getOption('indentUnit') + 1).join(' ');
+//           cm.replaceSelection(spaces);
+//         },
+//       },
+//       placeholder,
+//     });
+//     editor.setValue(value || '');
+//     indexStore.setCodeEditorValue(value || '');
+//     editor.on('changes', (a: any) => {
+//       const data = a.getValue();
+//       indexStore.setCodeEditorValue(data);
+//     });
+//     this.editor = editor;
+//   }
+
+//   public render() {
+//     return (
+//       <div
+//         className="editor-wrap"
+//         onClick={this.handleCodeFocus}
+//       >
+//         <div className="codemirror" />
+//       </div >
+//     );
+//   }
+// }

kafka-manager-console/src/component/editor/index.less

@@ -0,0 +1,31 @@
+.editor {
+  height: 100%;
+}
+
+.CodeMirror-placeholder {
+  color:#999;
+  font-size: 12px;
+  line-height: 14px;
+  font-family: -apple-system,BlinkMacSystemFont,Neue Haas Grotesk Text Pro,Arial Nova,Segoe UI,Helvetica Neue,\.PingFang SC,PingFang SC,Microsoft YaHei,Microsoft JhengHei,Source Han Sans SC,Noto Sans CJK SC,Source Han Sans CN,Noto Sans SC,Source Han Sans TC,Noto Sans CJK TC,Hiragino Sans GB,sans-serif;
+}
+.editor-wrap {
+  max-height: 100%;
+}
+
+.CodeMirror {
+  height: 100vh;
+}
+
+.monacoEditor{
+  height: 150px;
+  position: relative;
+  overflow: hidden;
+  border: 1px solid #cccccc;
+  border-radius: 4px;
+  .editor{
+    height: 100%;
+    position: absolute;
+    left: -14%;
+    width: 120%;
+  }
+}

kafka-manager-console/src/component/editor/index.tsx

@@ -0,0 +1,50 @@
+import * as React from 'react';
+import * as monaco from 'monaco-editor';
+
+import './index.less';
+
+export interface IEditorProps {
+  style?: React.CSSProperties;
+  options: monaco.editor.IStandaloneEditorConstructionOptions;
+  uri?: monaco.Uri;
+  autoUnmount?: boolean;
+  customMount?: (editor: monaco.editor.IStandaloneCodeEditor, monaco: any) => any;
+  placeholder?: string;
+}
+
+export class EditorCom extends React.Component<IEditorProps> {
+  public ref: HTMLElement = null;
+  public editor: monaco.editor.IStandaloneCodeEditor;
+  public state = {
+    placeholder: this.props.placeholder ?? '',
+  };
+
+  public componentWillUnmount() {
+    if (this.props.autoUnmount === false) return;
+    const model = this.editor.getModel();
+    model.dispose();
+    this.editor.dispose();
+  }
+
+  public componentDidMount() {
+    const { customMount, options, uri } = this.props;
+    const { value, language } = options;
+    if (uri) {
+      options.model = monaco.editor.createModel(value, language, uri);
+    }
+
+    this.editor = monaco.editor.create(this.ref,
+      options,
+    );
+    if (customMount) customMount(this.editor, monaco);
+  }
+
+  public render() {
+    const { style } = this.props;
+    return (
+      <>
+        <div style={style} className="editor" ref={(id) => { this.ref = id; }} />
+      </>
+    );
+  }
+}

kafka-manager-console/src/component/editor/monacoEditor.tsx

@@ -0,0 +1,77 @@
+import * as React from 'react';
+import * as monaco from 'monaco-editor';
+import format2json from 'format-to-json';
+import { Input } from 'component/antd';
+import './index.less';
+
+export interface IEditorProps {
+  style?: React.CSSProperties;
+  options: monaco.editor.IStandaloneEditorConstructionOptions;
+  uri?: monaco.Uri;
+  autoUnmount?: boolean;
+  customMount?: (editor: monaco.editor.IStandaloneCodeEditor, monaco: any) => any;
+  placeholder?: string;
+  value: '';
+  onChange?: any;
+}
+
+class Monacoeditor extends React.Component<IEditorProps> {
+  public ref: HTMLElement = null;
+  public editor: monaco.editor.IStandaloneCodeEditor;
+  public state = {
+    placeholder: '',
+  };
+  // public arr = '{"clusterId":95,"startId":37397856,"step":100,"topicName":"kmo_topic_metrics_tempory_zq"}';
+  // public Ars(a: string) {
+  //   const obj = JSON.parse(a);
+  //   const newobj: any = {};
+  //   for (const item in obj) {
+  //     if (typeof obj[item] === 'object') {
+  //       this.Ars(obj[item]);
+  //     } else {
+  //       newobj[item] = obj[item];
+  //     }
+  //   }
+  //   return JSON.stringify(newobj);
+  // }
+  public async componentDidMount() {
+    const { value, onChange } = this.props;
+    const format: any = await format2json(value);
+    this.editor = monaco.editor.create(this.ref, {
+      value: format.result,
+      language: 'json',
+      lineNumbers: 'off',
+      scrollBeyondLastLine: false,
+      // selectOnLineNumbers: true,
+      // roundedSelection: false,
+      // readOnly: true,
+      minimap: {
+        enabled: false,
+      },
+      // automaticLayout: true, // 自动布局
+      glyphMargin: true, // 字形边缘 {},[]
+      // useTabStops: false,
+      // formatOnPaste: true,
+      // mode: 'application/json',
+      // indentWithTabs: true,
+      // smartIndent: true,
+      // matchBrackets: 'always',
+      // autoCloseBrackets: true,
+      // styleSelectedText: true,
+      // foldGutter: true,
+    });
+    this.editor.onDidChangeModelContent((e) => {
+      const newValue = this.editor.getValue();
+      onChange(newValue);
+    });
+  }
+  public render() {
+    return (
+      <div className="monacoEditor ant-input" >
+        <Input style={{ display: 'none' }} {...this.props} />
+        <div className="editor" {...this.props} ref={(id) => { this.ref = id; }} />
+      </div>
+    );
+  }
+}
+export default Monacoeditor;