style: code style

packages/editor-setters/src/expression-setter/index.tsx

@@ -1,6 +1,6 @@
 import React, { PureComponent } from 'react';
 import PropTypes from 'prop-types';
-import { Select, Balloon, Icon } from '@alife/next';
+import { Select, Balloon } from '@alife/next';
 import * as acorn from 'acorn';
 
 import { isJSExpression, generateI18n } from './locale/utils';
@@ -68,13 +68,12 @@ export default class ExpressionView extends PureComponent {
     return val;
   }
 
-  constructor(props: Readonly<{}>) {
+  constructor(props: Readonly) {
     super(props);
     this.expression = React.createRef();
     this.i18n = generateI18n(props.locale, props.messages);
     this.state = {
       value: ExpressionView.getInitValue(props.value),
-      context: props.context || {},
       dataSource: props.dataSource || [],
     };
   }
@@ -127,6 +126,7 @@ export default class ExpressionView extends PureComponent {
    * @return {Array}
    */
   getDataSource(tempStr: string): any[] {
+    // eslint-disable-next-line no-useless-escape
     if (/[^\w\.]$/.test(tempStr)) {
       return [];
     } else if (tempStr === null || tempStr === '') {
@@ -273,12 +273,11 @@ export default class ExpressionView extends PureComponent {
                   innerBefore={<span style={{ color: '#999', marginLeft: 4 }}>{'{{'}</span>}
                   innerAfter={<span style={{ color: '#999', marginRight: 4 }}>{'}}'}</span>}
                   popupClassName="expression-setter-item-inner"
-                  itemRender={({ value }) => {
+                  itemRender={({ itemValue }) => {
-                    console.log(value);
                     return (
-                      <Option key={value} text={value} value={value}>
+                      <Option key={itemValue} text={itemValue} value={itemValue}>
-                        <div className="code-input-value">{value}</div>
+                        <div className="code-input-value">{itemValue}</div>
-                        <div className="code-input-help">{helpMap[value]}</div>
+                        <div className="code-input-help">{helpMap[itemValue]}</div>
                       </Option>
                     );
                   }}
@@ -302,6 +301,7 @@ export default class ExpressionView extends PureComponent {
         const isMoveKey = !!(event.type == 'keyup' && ~[37, 38, 39, 91].indexOf(event.keyCode));
         const isMouseup = event.type == 'mouseup';
         if (isMoveKey || isMouseup) {
+          // eslint-disable-next-line react/no-access-state-in-setstate
           const dataSource = this.getDataSource(this.state.value) || [];
           this.setState({
             dataSource,

packages/editor-setters/src/index.tsx

@@ -55,7 +55,7 @@ export const DateRangeSetter = DatePicker.RangePicker;
 
 export { ExpressionSetter, EventsSetter, JsonSetter, IconSetter };
 
-// eslint-disable-next-line rule
+// eslint-disable-next-line react/no-multi-comp
 class StringDateSetter extends Component {
   render() {
     const { onChange } = this.props;
@@ -69,7 +69,7 @@ class StringDateSetter extends Component {
   }
 }
 
-// eslint-disable-next-line rule
+// eslint-disable-next-line react/no-multi-comp
 class StringTimePicker extends Component {
   render() {
     const { onChange } = this.props;

packages/editor-setters/src/json-setter/index.tsx

@@ -30,7 +30,7 @@ class MonacoEditorView extends PureComponent {
 localeConfig('MonacoEditor', MonacoEditorView);
 
 // monaco编辑器存在3种主题：vs、vs-dark、hc-black
-// eslint-disable-next-line rule
+// eslint-disable-next-line react/no-multi-comp
 class MonacoEditorDefaultView extends PureComponent {
   static displayName = 'MonacoEditorDefault';
 
@@ -355,6 +355,7 @@ class MonacoEditorDefaultView extends PureComponent {
     } else {
       document.body.appendChild(this.editorNode);
     }
+    // eslint-disable-next-line react/no-access-state-in-setstate
     const nextFs = !this.state.isFullScreen;
     this.isFullScreenAction = true; // 记录是全屏幕操作
     this.setState(
@@ -369,7 +370,6 @@ class MonacoEditorDefaultView extends PureComponent {
 
   // 美化代码
   format() {
-    const { language } = this.props;
     if (!this.editor) return;
     if (/^\$_obj?\{.*?\}$/m.test(this.editor.getValue())) return;
     if (this.props.language === 'json' || this.props.language === 'object' || this.props.language === 'function') {
@@ -386,8 +386,10 @@ class MonacoEditorDefaultView extends PureComponent {
   // 校验是否是json
   toJson(value) {
     try {
+      // eslint-disable-next-line no-new-func
       const obj = new Function(`'use strict'; return ${value.replace(/[\r\n\t]/g, '')}`)();
       if (typeof obj === 'object' && obj) {
+        // eslint-disable-next-line no-new-func
         const tarValue = new Function(`'use strict'; return ${value}`)();
         return { value: JSON.parse(JSON.stringify(tarValue)) };
       }
@@ -400,6 +402,7 @@ class MonacoEditorDefaultView extends PureComponent {
   // 校验是否为object对象
   toObject(value) {
     try {
+      // eslint-disable-next-line no-new-func
       const obj = new Function(`'use strict';return ${value}`)();
       if (obj && typeof obj === 'object') {
         if (jsonuri.isCircular(obj)) return { error: this.i18n('circularRef'), value };
@@ -415,6 +418,7 @@ class MonacoEditorDefaultView extends PureComponent {
   // 校验是否为function
   toFunction(value) {
     try {
+      // eslint-disable-next-line no-new-func
       const fun = new Function(`'use strict';return ${value}`)();
       if (fun && typeof fun === 'function') {
         return { value: fun };
@@ -441,6 +445,7 @@ class MonacoEditorDefaultView extends PureComponent {
       });
       if (item.insertTextRules) tarItem.insertTextRules = monaco.languages.CompletionItemInsertTextRule[item.insertTextRules];
       thisSuggestions.push(tarItem);
+      return item;
     });
     monaco.languages.registerCompletionItemProvider('javascript', {
       provideCompletionItems: (model, position) => {
@@ -483,6 +488,7 @@ window.MonacoEnvironment = {
   },
 };
 
+// eslint-disable-next-line react/no-multi-comp
 export default class MonacoEditorButtonView extends PureComponent {
   static displayName = 'JsonSetter';
 
@@ -500,7 +506,7 @@ export default class MonacoEditorButtonView extends PureComponent {
 
   objectButtonRef: React.RefObject<unknown>;
 
-  constructor(props: Readonly<{}>) {
+  constructor(props: Readonly) {
     super(props);
     this.i18n = generateI18n(props.locale, props.messages);
     this.objectButtonRef = React.createRef();
@@ -551,7 +557,7 @@ export default class MonacoEditorButtonView extends PureComponent {
     tarRestProps.autoFocus = true;
     const tarOnSubmit = tarRestProps.onSubmit;
     // 确保monaco快捷键保存，能出发最外层的保存
-    tarRestProps.onSubmit = (value, error) => {
+    tarRestProps.onSubmit = (editorValue, error) => {
       const msgDom = document.querySelector('.object-button-overlay .next-dialog-body');
       if (error) return this.message('error', this.i18n('formatError'), msgDom);
       this.objectButtonRef &&
@@ -575,8 +581,8 @@ export default class MonacoEditorButtonView extends PureComponent {
     if (tarRestProps.language && ['json', 'function', 'object'].includes(tarRestProps.language)) {
       if (['json', 'object'].includes(tarRestProps.language)) {
         tarRule.push({
-          validator(value: any, callback: (arg0: undefined) => void) {
+          validator(validatorValue: any, callback: (arg0: undefined) => void) {
-            if (typeof value !== 'object') {
+            if (typeof validatorValue !== 'object') {
               callback(self.i18n('formatError'));
             } else {
               callback();
@@ -585,8 +591,8 @@ export default class MonacoEditorButtonView extends PureComponent {
         });
       } else {
         tarRule.push({
-          validator(value: any, callback: (arg0: undefined) => void) {
+          validator(validatorValue: any, callback: (arg0: undefined) => void) {
-            if (typeof value !== 'function') {
+            if (typeof validatorValue !== 'function') {
               callback(self.i18n('formatError'));
             } else {
               callback();

packages/editor-setters/src/mixed-setter/index.tsx

@@ -37,14 +37,13 @@ export default class Mixed extends PureComponent {
 
   typeMap: any;
 
-  i18n: (key: any, values?: {}) => string | void | Array<string | void>;
+  i18n: (key: any, values) => string | void | Array<string | void>;
 
-  constructor(props: Readonly<{}>) {
+  constructor(props: Readonly) {
     super(props);
     const type = props.defaultType; // judgeTypeHandler(props, {});
     this.i18n = generateI18n(props.locale, props.messages);
     this.state = {
-      preType: type,
       type,
     };
   }
@@ -115,6 +114,7 @@ export default class Mixed extends PureComponent {
       if (isTwoType) {
         moreBtnNode = triggerNode;
       } else {
+        // eslint-disable-next-line @typescript-eslint/ban-types
         const MenuItems: {} | null | undefined = [];
         realTypes.map((type) => {
           if (this.typeMap[type]) {
@@ -126,6 +126,7 @@ export default class Mixed extends PureComponent {
               }),
             );
           }
+          return type;
         });
         const MenuNode = (
           <Menu

packages/plugin-source-editor/src/index.tsx

@@ -1,11 +1,9 @@
-import { Component, isValidElement, ReactElement, ReactNode } from 'react';
+import React, { Component } from 'react';
-import { Tab, Search, Input, Button } from '@alifd/next';
+import { Tab } from '@alifd/next';
 import { Editor } from '@ali/lowcode-editor-core';
 import { js_beautify, css_beautify } from 'js-beautify';
 import MonacoEditor from 'react-monaco-editor';
-import { Designer } from '@ali/lowcode-designer';
 import * as monaco from 'monaco-editor/esm/vs/editor/editor.main.js';
-
 import './index.scss';
 import transfrom from './transform';
 
@@ -46,25 +44,21 @@ interface FunctionEventParam {
 export default class SourceEditor extends Component<{
   editor: Editor;
 }> {
-  private monocoEditor: Object;
+  private monocoEditor;
 
-  private monocoEditorCss: Object;
+  private monocoEditorCss;
 
-  private editorCmd: Object;
+  private editorCmd;
 
   private editorJsRef = React.createRef();
 
   private editorCssRef = React.createRef();
 
-  private editorNode: Object;
+  private editorNode;
 
-  private editorParentNode: Object;
+  private editorParentNode;
-
-  state = {
-    isFullScreen: false,
-    tabKey: TAB_KEY.JS_TAB,
-  };
 
+  // eslint-disable-next-line react/no-deprecated
   componentWillMount() {
     const { editor } = this.props;
 
@@ -79,21 +73,19 @@ export default class SourceEditor extends Component<{
     });
 
 
-
-
     // 插件面板关闭事件,监听规则同上
-    editor.on('skeleton.panel-dock.unactive', (pluginName, dock) => {
+    editor.on('skeleton.panel-dock.unactive', (pluginName) => {
       if (pluginName == 'sourceEditor') {
         this.saveSchema();
       }
     });
 
     // 插件面板打开事件,监听规则同上
-    editor.on('skeleton.panel-dock.active',(pluginName,dock)=>{
+    editor.on('skeleton.panel-dock.active', (pluginName) => {
-      if (pluginName == 'sourceEditor'){
+      if (pluginName == 'sourceEditor') {
-          this.initCode();
+        this.initCode();
       }
-    })
+    });
 
     this.initCode();
   }
@@ -136,9 +128,9 @@ export default class SourceEditor extends Component<{
   };
 
   initCode = () => {
-    const {editor} = this.props;
+    const { editor } = this.props;
-    let schema = editor.get('designer').project.getSchema();
+    const schema = editor.get('designer').project.getSchema();
-    let jsCode = js_beautify(transfrom.schema2Code(schema), { indent_size: 2, indent_empty_lines: true });
+    const jsCode = js_beautify(transfrom.schema2Code(schema), { indent_size: 2, indent_empty_lines: true });
     let css;
 
     if (schema.componentsTree[0].css) {
@@ -195,7 +187,7 @@ export default class SourceEditor extends Component<{
     }
   }
 
-  editorDidMount = (editor, monaco, tab) => {
+  editorDidMount = (editor) => {
     this.monocoEditor = editor;
 
     if (this.editorCmd) {
@@ -245,16 +237,15 @@ export default class SourceEditor extends Component<{
   showJsEditor = () => {
     document.getElementById('cssEditorDom').setAttribute('style', 'display:none');
     document.getElementById('jsEditorDom').setAttribute('style', 'block');
-  }
+  };
 
   showCssEditor = () => {
     document.getElementById('jsEditorDom').setAttribute('style', 'display:none');
     document.getElementById('cssEditorDom').setAttribute('style', 'block');
-  }
+  };
 
   updateCode = (newCode) => {
     const { selectTab } = this.state;
-    const { editor } = this.props;
     if (selectTab === TAB_KEY.JS_TAB) {
       this.setState({
         jsCode: newCode,
@@ -264,24 +255,18 @@ export default class SourceEditor extends Component<{
         css: newCode,
       });
     }
-
-    // let functionMap = transfrom.code2Schema(newCode);
-    // let schema = editor.get('designer').project.getSchema();
-    // let newSchema = transfrom.setFunction2Schema(functionMap, schema);
-    // if (newSchema!=''){
-    //   editor.get('designer').project.load(newSchema,true);
   };
 
 
   saveSchema = () => {
-    const {jsCode} = this.state;
+    const { jsCode } = this.state;
-    const {editor} = this.props;
+    const { editor } = this.props;
-    let functionMap = transfrom.code2Schema(jsCode);
+    const functionMap = transfrom.code2Schema(jsCode);
-    let schema = editor.get('designer').project.getSchema();
+    const schema = editor.get('designer').project.getSchema();
-    let oldSchemaStr = JSON.stringify(schema);
+    const oldSchemaStr = JSON.stringify(schema);
-    let newSchema = transfrom.setFunction2Schema(functionMap, schema);
+    const newSchema = transfrom.setFunction2Schema(functionMap, schema);
 
-    if (newSchema!='' && JSON.stringify(newSchema) != oldSchemaStr){
+    if (newSchema != '' && JSON.stringify(newSchema) != oldSchemaStr) {
       editor.get('designer').project.setSchema(newSchema);
     }
   };
@@ -309,7 +294,7 @@ export default class SourceEditor extends Component<{
               {...defaultEditorOption}
               {...{ language: 'javascript' }}
               onChange={(newCode) => this.updateCode(newCode)}
-              editorDidMount={(editor, monaco) => this.editorDidMount.call(this, editor, monaco, TAB_KEY.JS_TAB)}
+              editorDidMount={(editor, monacoEditor) => this.editorDidMount.call(this, editor, monacoEditor, TAB_KEY.JS_TAB)}
             />
           </div>
           <div className="editor-context" id="cssEditorDom" ref={this.editorCssRef}>

packages/plugin-source-editor/src/transform.ts

@@ -4,10 +4,10 @@ const LIFECYCLES_FUNCTION_MAP = {
 
 
 const transfrom = {
-  schema2Code(schema: Object) {
+  schema2Code(schema) {
     const componentSchema = schema.componentsTree[0];
     const code =
-`export default class {
+      `export default class {
   ${initStateCode(componentSchema)}
   ${initLifeCycleCode(componentSchema)}
   ${initMethodsCode(componentSchema)}
@@ -20,12 +20,14 @@ const transfrom = {
     const newCode = code.replace(/export default class/, 'class A');
     let A; let a;
     try {
-      A = eval(`(${newCode })`);
+      // eslint-disable-next-line no-eval
+      A = eval(`(${newCode})`);
       a = new A();
     } catch (e) {
       return '';
     }
 
+    // eslint-disable-next-line no-proto
     const functionNameList = Object.getOwnPropertyNames(a.__proto__);
 
     const functionMap = {};
@@ -37,6 +39,7 @@ const transfrom = {
           functionMap[functionName] = functionCode;
         }
       }
+      return functionName;
     });
 
     if (a.state) {
@@ -47,7 +50,7 @@ const transfrom = {
     return functionMap;
   },
 
-  getNewFunctionCode(functionName:string) {
+  getNewFunctionCode(functionName: string) {
     return `\n\t${functionName}(){\n\t}\n`;
   },
 
@@ -57,29 +60,34 @@ const transfrom = {
     for (const key in functionMap) {
       if (key == 'state') {
         pageNode.state = functionMap[key];
-      } else {
+      } else if (LIFECYCLES_FUNCTION_MAP.react.indexOf(key) >= 0) {
-        // 判断是否属于lifeCycles节点
+        // // 判断是否属于lifeCycles节点
-        if (LIFECYCLES_FUNCTION_MAP.react.indexOf(key) >= 0) {
+        // if (LIFECYCLES_FUNCTION_MAP.react.indexOf(key) >= 0) {
-          // 判断有没有lifecycles节点
+        // 判断有没有lifecycles节点
-          if (!pageNode.lifeCycles) {
+        if (!pageNode.lifeCycles) {
-            pageNode.lifeCycles = {};
+          pageNode.lifeCycles = {};
-          } else {
-            pageNode.lifeCycles[key] = {
-              type: 'JSFunction',
-              value: functionMap[key],
-            };
-          }
         } else {
-          // methods节点
+          pageNode.lifeCycles[key] = {
-          if (!pageNode.methods) {
+            type: 'JSFunction',
-            pageNode.methods = {};
+            value: functionMap[key],
-          } else {
+          };
-            pageNode.methods[key] = {
-              type: 'JSFunction',
-              value: functionMap[key],
-            };
-          }
         }
+      } else if (!pageNode.methods) {
+        // methods节点
+        pageNode.methods = {};
+        // if (!pageNode.methods) {
+        //   pageNode.methods = {};
+        // } else {
+        //   pageNode.methods[key] = {
+        //     type: 'JSFunction',
+        //     value: functionMap[key],
+        //   };
+        // }
+      } else {
+        pageNode.methods[key] = {
+          type: 'JSFunction',
+          value: functionMap[key],
+        };
       }
     }
 
@@ -88,7 +96,7 @@ const transfrom = {
 };
 
 
-function initStateCode(componentSchema:Object) {
+function initStateCode(componentSchema) {
   if (componentSchema.state) {
     return `state = ${JSON.stringify(componentSchema.state)}`;
   }
@@ -96,7 +104,7 @@ function initStateCode(componentSchema:Object) {
   return '';
 }
 
-function initLifeCycleCode(componentSchema: Object) {
+function initLifeCycleCode(componentSchema) {
   if (componentSchema.lifeCycles) {
     const { lifeCycles } = componentSchema;
     const codeList = [];
@@ -111,7 +119,7 @@ function initLifeCycleCode(componentSchema: Object) {
   }
 }
 
-function initMethodsCode(componentSchema: Object) {
+function initMethodsCode(componentSchema) {
   if (componentSchema.methods) {
     const { methods } = componentSchema;
     const codeList = [];
@@ -126,7 +134,7 @@ function initMethodsCode(componentSchema: Object) {
   }
 }
 
-function createFunctionCode(functionName: string, functionNode: Object) {
+function createFunctionCode(functionName: string, functionNode) {
   if (functionNode.type === 'JSExpression' || functionNode.type === 'JSFunction') {
     let functionCode = functionNode.value;
     functionCode = functionCode.replace(/function/, functionName);