ronds-metadata 1.0.32 → 1.0.35

package/es/comps/JsonEdit/constant/index.d.ts

@@ -0,0 +1,4 @@
+export declare const SQL_DICO: {
+    className: string;
+    text: string;
+}[];

package/es/comps/JsonEdit/constant/index.js

@@ -0,0 +1,87 @@
+/*
+ * @Author: wangxain
+ * @Date: 2022-03-03 09:08:06
+ * @LastEditTime: 2022-03-03 09:09:28
+ */
+export var SQL_DICO = [{
+  className: 'sql',
+  text: 'SELECT'
+}, {
+  className: 'sql',
+  text: 'FROM'
+}, {
+  className: 'sql',
+  text: 'WHERE'
+}, {
+  className: 'sql',
+  text: 'LEFT'
+}, {
+  className: 'sql',
+  text: 'RIGHT'
+}, {
+  className: 'sql',
+  text: 'INNER'
+}, {
+  className: 'sql',
+  text: 'JOIN'
+}, {
+  className: 'sql',
+  text: 'UNION'
+}, {
+  className: 'sql',
+  text: 'EXEC'
+}, {
+  className: 'sql',
+  text: 'INSERT'
+}, {
+  className: 'sql',
+  text: 'INTO'
+}, {
+  className: 'sql',
+  text: 'VALUES'
+}, {
+  className: 'sql',
+  text: 'UPDATE'
+}, {
+  className: 'sql',
+  text: 'DELETE'
+}, {
+  className: 'sql',
+  text: 'GROUP'
+}, {
+  className: 'sql',
+  text: 'BY'
+}, {
+  className: 'sql',
+  text: 'HAVING'
+}, {
+  className: 'sql',
+  text: 'IS'
+}, {
+  className: 'sql',
+  text: 'DISTINCT'
+}, {
+  className: 'sql',
+  text: 'OUTER'
+}, {
+  className: 'sql',
+  text: 'TOP'
+}, {
+  className: 'sql',
+  text: 'EXISTS'
+}, {
+  className: 'sql',
+  text: 'WHEN'
+}, {
+  className: 'sql',
+  text: 'CASE'
+}, {
+  className: 'sql',
+  text: 'CAST'
+}, {
+  className: 'sql',
+  text: 'IN'
+}, {
+  className: 'sql',
+  text: 'NULL'
+}];

package/es/comps/JsonEdit/index.d.ts

@@ -5,6 +5,9 @@ import 'codemirror/theme/neat.css';
 import 'codemirror/theme/idea.css';
 import 'codemirror/mode/sql/sql.js';
 import 'codemirror/mode/javascript/javascript.js';
+import 'codemirror/mode/shell/shell.js';
+import 'codemirror/mode/perl/perl.js';
+import 'codemirror/mode/python/python.js';
 import 'codemirror/addon/hint/show-hint.js';
 import 'codemirror/addon/hint/show-hint.css';
 import 'codemirror/addon/fold/foldgutter.css';
@@ -12,19 +15,50 @@ import 'codemirror/addon/fold/foldcode';
 import 'codemirror/addon/fold/foldgutter';
 import 'codemirror/addon/fold/brace-fold';
 import 'codemirror/addon/fold/comment-fold';
+import 'codemirror/addon/selection/active-line';
+import 'codemirror/addon/edit/closeBrackets';
+import 'codemirror/addon/edit/matchBrackets';
 import './index.less';
 interface ISqlEditProps {
+    /**
+     * 编辑器内容
+     */
+    value?: string;
+    /**
+     * 主题
+     */
     theme?: 'neat' | 'neo' | 'panda-syntax' | 'idea';
-    mode?: 'text/javascript' | 'text/x-mysql' | 'application/json';
-    isSetValue?: boolean;
+    /**
+     * 编辑器的格式
+     */
+    mode?: 'text/javascript' | 'text/x-mysql' | 'application/json' | 'shell' | 'perl' | 'python';
+    /**
+     * 是否有行数标识
+     */
     isLineNumbers?: boolean;
-    value?: string;
+    /**
+     * Json格式化是否可折叠
+     */
     isGutters?: boolean;
-    isExtraDico?: boolean;
+    /**
+     * 联想提示说明
+     */
     extraDico?: any[];
+    /**
+     * 是否只读
+     */
     readOnly?: boolean;
-    onCallback?: () => void;
+    /**
+     * 鼠标光标选中回调
+     */
+    onSelectChange?: (data: any) => void;
+    /**
+     * 编辑框输入值改变回调
+     */
     onChange?: (txt: string) => void;
+    /**
+     * Enter快捷键方法重写
+     */
     onReWriteEnter?: () => void;
 }
 declare const SqlEdit: (props: ISqlEditProps) => JSX.Element;

package/es/comps/JsonEdit/index.js

@@ -1,6 +1,5 @@
 import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
 import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
-import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import React from 'react';
 import CodeMirror from 'codemirror';
 import 'codemirror/lib/codemirror.css';
@@ -10,6 +9,9 @@ import 'codemirror/theme/neat.css';
 import 'codemirror/theme/idea.css';
 import 'codemirror/mode/sql/sql.js';
 import 'codemirror/mode/javascript/javascript.js';
+import 'codemirror/mode/shell/shell.js';
+import 'codemirror/mode/perl/perl.js';
+import 'codemirror/mode/python/python.js';
 import 'codemirror/addon/hint/show-hint.js';
 import 'codemirror/addon/hint/show-hint.css';
 import 'codemirror/addon/fold/foldgutter.css';
@@ -17,13 +19,15 @@ import 'codemirror/addon/fold/foldcode';
 import 'codemirror/addon/fold/foldgutter';
 import 'codemirror/addon/fold/brace-fold';
 import 'codemirror/addon/fold/comment-fold';
+import 'codemirror/addon/selection/active-line';
+import 'codemirror/addon/edit/closeBrackets';
+import 'codemirror/addon/edit/matchBrackets';
 import "./index.css";
+import { SQL_DICO } from './constant';
 
 var SqlEdit = function SqlEdit(props) {
   var _props$theme = props.theme,
       theme = _props$theme === void 0 ? 'idea' : _props$theme,
-      _props$isExtraDico = props.isExtraDico,
-      isExtraDico = _props$isExtraDico === void 0 ? false : _props$isExtraDico,
       _props$extraDico = props.extraDico,
       extraDico = _props$extraDico === void 0 ? [] : _props$extraDico,
       _props$mode = props.mode,
@@ -35,12 +39,12 @@ var SqlEdit = function SqlEdit(props) {
       _props$readOnly = props.readOnly,
       readOnly = _props$readOnly === void 0 ? false : _props$readOnly,
       value = props.value,
-      _props$isSetValue = props.isSetValue,
-      isSetValue = _props$isSetValue === void 0 ? false : _props$isSetValue,
       onChange = props.onChange,
-      onCallback = props.onCallback,
+      onSelectChange = props.onSelectChange,
       onReWriteEnter = props.onReWriteEnter;
   var textareaRef = React.useRef(null);
+  var firstLoadRef = React.useRef(true);
+  var editorRef = React.useRef();
   var extraKeys = React.useMemo(function () {
     var _extraKeys = {
       'Ctrl-Space': function CtrlSpace(__editor) {
@@ -65,121 +69,21 @@ var SqlEdit = function SqlEdit(props) {
 
     return _extraKeys;
   }, [mode, onReWriteEnter]);
+  var dico = React.useMemo(function () {
+    var res = SQL_DICO;
 
-  var _React$useState = React.useState(null),
-      _React$useState2 = _slicedToArray(_React$useState, 2),
-      editor = _React$useState2[0],
-      setEditor = _React$useState2[1];
-
-  var _React$useState3 = React.useState([{
-    className: 'sql',
-    text: 'SELECT'
-  }, {
-    className: 'sql',
-    text: 'FROM'
-  }, {
-    className: 'sql',
-    text: 'WHERE'
-  }, {
-    className: 'sql',
-    text: 'INNER'
-  }, {
-    className: 'sql',
-    text: 'JOIN'
-  }, {
-    className: 'sql',
-    text: 'UNION'
-  }, {
-    className: 'sql',
-    text: 'EXEC'
-  }, {
-    className: 'sql',
-    text: 'INSERT'
-  }, {
-    className: 'sql',
-    text: 'INTO'
-  }, {
-    className: 'sql',
-    text: 'VALUES'
-  }, {
-    className: 'sql',
-    text: 'UPDATE'
-  }, {
-    className: 'sql',
-    text: 'DELETE'
-  }, {
-    className: 'sql',
-    text: 'GROUP'
-  }, {
-    className: 'sql',
-    text: 'BY'
-  }, {
-    className: 'sql',
-    text: 'HAVING'
-  }, {
-    className: 'sql',
-    text: 'IS'
-  }, {
-    className: 'sql',
-    text: 'DISTINCT'
-  }, {
-    className: 'sql',
-    text: 'OUTER'
-  }, {
-    className: 'sql',
-    text: 'TOP'
-  }, {
-    className: 'sql',
-    text: 'EXISTS'
-  }, {
-    className: 'sql',
-    text: 'WHEN'
-  }, {
-    className: 'sql',
-    text: 'CASE'
-  }, {
-    className: 'sql',
-    text: 'CAST'
-  }, {
-    className: 'sql',
-    text: 'IN'
-  }, {
-    className: 'sql',
-    text: 'NULL'
-  }]),
-      _React$useState4 = _slicedToArray(_React$useState3, 2),
-      dico = _React$useState4[0],
-      setDico = _React$useState4[1];
-
-  React.useEffect(function () {
-    if (isExtraDico) {
-      setDico([].concat(_toConsumableArray(dico), _toConsumableArray(extraDico)));
-    } // eslint-disable-next-line
-
-  }, [extraDico, isExtraDico]);
-  React.useEffect(function () {
-    if (editor && isSetValue) {
-      editor.setValue(value);
-      onCallback && onCallback();
-      setTimeout(function () {
-        editor.refresh();
-      }, 100);
-    } // eslint-disable-next-line
-
-  }, [value, isSetValue]);
-  React.useEffect(function () {
-    if (!isExtraDico) {
-      initEdit();
-    } else if (dico.length > 25) {
-      initEdit();
-    } // eslint-disable-next-line
-
-  }, [textareaRef, dico, isGutters]);
+    if (extraDico.length > 0) {
+      res = [].concat(_toConsumableArray(SQL_DICO), _toConsumableArray(extraDico));
+    }
 
-  var initEdit = function initEdit() {
+    return res;
+  }, [extraDico]);
+  var initEdit = React.useCallback(function () {
     if (textareaRef.current === null) return;
+    if (!firstLoadRef.current) return;
 
     var _editor = CodeMirror.fromTextArea(textareaRef.current, {
+      value: value,
       tabSize: 4,
       mode: mode,
       theme: theme,
@@ -193,6 +97,8 @@ var SqlEdit = function SqlEdit(props) {
         completeSingle: false,
         hint: hint
       },
+      matchBrackets: true,
+      autoCloseBrackets: true,
       extraKeys: extraKeys
     });
 
@@ -206,8 +112,31 @@ var SqlEdit = function SqlEdit(props) {
       onChange && onChange(__editor.getValue());
     });
 
-    setEditor(_editor);
-  };
+    _editor.on('cursorActivity', function (__editor) {
+      onSelectChange && onSelectChange(__editor.getSelection());
+    });
+
+    editorRef.current = _editor;
+    firstLoadRef.current = false;
+  }, [dico, isGutters, readOnly, isLineNumbers]);
+  React.useEffect(function () {
+    if (!textareaRef.current) return;
+    initEdit();
+  }, [textareaRef, initEdit]);
+  React.useEffect(function () {
+    if (!editorRef.current) return;
+
+    if (value) {
+      editorRef.current.setValue(value);
+    }
+  }, [value]);
+  React.useEffect(function () {
+    if (!editorRef.current) return;
+    debugger;
+    editorRef.current.setOption('readOnly', readOnly);
+    editorRef.current.setOption('lineNumbers', isLineNumbers);
+    editorRef.current.setOption('gutters', isGutters ? ['CodeMirror-linenumbers', 'CodeMirror-foldgutter', 'CodeMirror-lint-markers'] : []);
+  }, [readOnly, isLineNumbers, isGutters]);
 
   var hint = function hint(__editor) {
     var cur = __editor.getCursor();

package/package.json

@@ -1,7 +1,7 @@
 {
   "public": true,
   "name": "ronds-metadata",
-  "version": "1.0.32",
+  "version": "1.0.35",
   "scripts": {
     "start": "dumi dev",
     "docs:build": "dumi build",