mirror of
https://github.com/alibaba/lowcode-engine.git
synced 2026-01-13 01:21:58 +00:00
style: code style
This commit is contained in:
zude.hzd
parent
e90ae8f0b8
commit
8ffe91fb85
@ -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 }) => {
|
||||
console.log(value);
|
||||
itemRender={({ itemValue }) => {
|
||||
return (
|
||||
<Option key={value} text={value} value={value}>
|
||||
<div className="code-input-value">{value}</div>
|
||||
<div className="code-input-help">{helpMap[value]}</div>
|
||||
<Option key={itemValue} text={itemValue} value={itemValue}>
|
||||
<div className="code-input-value">{itemValue}</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,
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -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) {
|
||||
if (typeof value !== 'object') {
|
||||
validator(validatorValue: any, callback: (arg0: undefined) => void) {
|
||||
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) {
|
||||
if (typeof value !== 'function') {
|
||||
validator(validatorValue: any, callback: (arg0: undefined) => void) {
|
||||
if (typeof validatorValue !== 'function') {
|
||||
callback(self.i18n('formatError'));
|
||||
} else {
|
||||
callback();
|
||||
|
||||
@ -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
|
||||
|
||||
@ -1,11 +1,9 @@
|
||||
import { Component, isValidElement, ReactElement, ReactNode } from 'react';
|
||||
import { Tab, Search, Input, Button } from '@alifd/next';
|
||||
import React, { Component } from 'react';
|
||||
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;
|
||||
|
||||
state = {
|
||||
isFullScreen: false,
|
||||
tabKey: TAB_KEY.JS_TAB,
|
||||
};
|
||||
private editorParentNode;
|
||||
|
||||
// eslint-disable-next-line react/no-deprecated
|
||||
componentWillMount() {
|
||||
const { editor } = this.props;
|
||||
|
||||
@ -78,22 +72,20 @@ export default class SourceEditor extends Component<{
|
||||
this.callEditorEvent('sourceEditor.focusByFunction', params);
|
||||
});
|
||||
|
||||
|
||||
|
||||
|
||||
// 插件面板关闭事件,监听规则同上
|
||||
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)=>{
|
||||
if (pluginName == 'sourceEditor'){
|
||||
this.initCode();
|
||||
editor.on('skeleton.panel-dock.active', (pluginName) => {
|
||||
if (pluginName == 'sourceEditor') {
|
||||
this.initCode();
|
||||
}
|
||||
})
|
||||
});
|
||||
|
||||
this.initCode();
|
||||
}
|
||||
@ -136,9 +128,9 @@ export default class SourceEditor extends Component<{
|
||||
};
|
||||
|
||||
initCode = () => {
|
||||
const {editor} = this.props;
|
||||
let schema = editor.get('designer').project.getSchema();
|
||||
let jsCode = js_beautify(transfrom.schema2Code(schema), { indent_size: 2, indent_empty_lines: true });
|
||||
const { editor } = this.props;
|
||||
const schema = editor.get('designer').project.getSchema();
|
||||
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 {editor} = this.props;
|
||||
let functionMap = transfrom.code2Schema(jsCode);
|
||||
let schema = editor.get('designer').project.getSchema();
|
||||
let oldSchemaStr = JSON.stringify(schema);
|
||||
let newSchema = transfrom.setFunction2Schema(functionMap, schema);
|
||||
const { jsCode } = this.state;
|
||||
const { editor } = this.props;
|
||||
const functionMap = transfrom.code2Schema(jsCode);
|
||||
const schema = editor.get('designer').project.getSchema();
|
||||
const oldSchemaStr = JSON.stringify(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}>
|
||||
|
||||
@ -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 {
|
||||
// 判断是否属于lifeCycles节点
|
||||
if (LIFECYCLES_FUNCTION_MAP.react.indexOf(key) >= 0) {
|
||||
// 判断有没有lifecycles节点
|
||||
if (!pageNode.lifeCycles) {
|
||||
pageNode.lifeCycles = {};
|
||||
} else {
|
||||
pageNode.lifeCycles[key] = {
|
||||
type: 'JSFunction',
|
||||
value: functionMap[key],
|
||||
};
|
||||
}
|
||||
} else if (LIFECYCLES_FUNCTION_MAP.react.indexOf(key) >= 0) {
|
||||
// // 判断是否属于lifeCycles节点
|
||||
// if (LIFECYCLES_FUNCTION_MAP.react.indexOf(key) >= 0) {
|
||||
// 判断有没有lifecycles节点
|
||||
if (!pageNode.lifeCycles) {
|
||||
pageNode.lifeCycles = {};
|
||||
} else {
|
||||
// methods节点
|
||||
if (!pageNode.methods) {
|
||||
pageNode.methods = {};
|
||||
} else {
|
||||
pageNode.methods[key] = {
|
||||
type: 'JSFunction',
|
||||
value: functionMap[key],
|
||||
};
|
||||
}
|
||||
pageNode.lifeCycles[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);
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user