mirror of
https://github.com/alibaba/lowcode-engine.git
synced 2026-01-13 01:21:58 +00:00
Merge branch 'fix/ducheng-source-style' into 'refactor/code-style'
Code review title: Fix/ducheng source style Code review Link: https://code.aone.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/codereview/3705972
This commit is contained in:
wuji.xwt
commit
835bb5d94e
@ -1,10 +1,10 @@
|
||||
import { Component, isValidElement, ReactElement, ReactNode } from 'react';
|
||||
import { Radio, Menu, Table, Icon, Dialog } from '@alifd/next';
|
||||
import { Component } from 'react';
|
||||
import { Radio, Menu, Table, Icon } from '@alifd/next';
|
||||
import nativeEvents from './native-events';
|
||||
|
||||
import './index.scss';
|
||||
|
||||
const { SubMenu, Item, Group, Divider } = Menu;
|
||||
const { Item, Group } = Menu;
|
||||
const RadioGroup = Radio.Group;
|
||||
|
||||
const EVENT_CONTENTS = {
|
||||
@ -26,14 +26,12 @@ export default class EventsSetter extends Component<{
|
||||
onChange: (eventList: any[]) => void;
|
||||
}> {
|
||||
state = {
|
||||
showEventList: false,
|
||||
eventBtns: [],
|
||||
eventList: [],
|
||||
selectType: null,
|
||||
nativeEventList: [],
|
||||
lifeCycleEventList: [],
|
||||
eventDataList: (this.props?.value?.eventDataList ? this.props.value.eventDataList : this.props?.value) || [],
|
||||
relatedEventName: '',
|
||||
};
|
||||
|
||||
// constructor (){
|
||||
@ -58,7 +56,7 @@ export default class EventsSetter extends Component<{
|
||||
// return null;
|
||||
// }
|
||||
|
||||
private bindEventName:string;
|
||||
private bindEventName: string;
|
||||
|
||||
componentDidMount() {
|
||||
console.log(this.state.eventDataList);
|
||||
@ -87,6 +85,8 @@ export default class EventsSetter extends Component<{
|
||||
if (item.type === DEFINITION_EVENT_TYPE.EVENTS) {
|
||||
isCustom = true;
|
||||
}
|
||||
|
||||
return item;
|
||||
});
|
||||
|
||||
if (isRoot) {
|
||||
@ -145,6 +145,8 @@ export default class EventsSetter extends Component<{
|
||||
lifeCycleEventList: item.list,
|
||||
});
|
||||
}
|
||||
|
||||
return item;
|
||||
});
|
||||
|
||||
if (nativeEventList.length == 0) {
|
||||
@ -167,7 +169,11 @@ export default class EventsSetter extends Component<{
|
||||
if (item.name === eventDataItem.name) {
|
||||
item.disabled = true;
|
||||
}
|
||||
|
||||
return eventDataItem;
|
||||
});
|
||||
|
||||
return item;
|
||||
});
|
||||
} else if (eventType === DEFINITION_EVENT_TYPE.NATIVE_EVENTS) {
|
||||
eventDataList.map(eventDataItem => {
|
||||
@ -178,8 +184,12 @@ export default class EventsSetter extends Component<{
|
||||
} else {
|
||||
item.disabled = false;
|
||||
}
|
||||
return eventItem;
|
||||
});
|
||||
return item;
|
||||
});
|
||||
|
||||
return eventDataItem;
|
||||
});
|
||||
}
|
||||
};
|
||||
@ -239,12 +249,14 @@ export default class EventsSetter extends Component<{
|
||||
if (item.name === eventName) {
|
||||
item.disabled = !unDisabled;
|
||||
}
|
||||
return item;
|
||||
});
|
||||
|
||||
lifeCycleEventList.map(item => {
|
||||
if (item.name === eventName) {
|
||||
item.disabled = !unDisabled;
|
||||
}
|
||||
return item;
|
||||
});
|
||||
|
||||
nativeEventList.map(item => {
|
||||
@ -252,7 +264,10 @@ export default class EventsSetter extends Component<{
|
||||
if (itemData.name === eventName) {
|
||||
itemData.disabled = !unDisabled;
|
||||
}
|
||||
return itemData;
|
||||
});
|
||||
|
||||
return item;
|
||||
});
|
||||
};
|
||||
|
||||
@ -279,7 +294,7 @@ export default class EventsSetter extends Component<{
|
||||
this.openDialog(eventName);
|
||||
};
|
||||
|
||||
onRelatedEventNameClick = (eventName:string) => {
|
||||
onRelatedEventNameClick = (eventName: string) => {
|
||||
const { editor } = this.props.field;
|
||||
|
||||
editor.get('skeleton').getPanel('sourceEditor').show();
|
||||
@ -319,6 +334,8 @@ export default class EventsSetter extends Component<{
|
||||
if (item.name === eventName) {
|
||||
eventDataList.splice(index, 1);
|
||||
}
|
||||
|
||||
return item;
|
||||
});
|
||||
|
||||
this.setState({
|
||||
@ -336,13 +353,14 @@ export default class EventsSetter extends Component<{
|
||||
if (item.name == bindEventName) {
|
||||
paramStr = item.paramStr;
|
||||
}
|
||||
return item;
|
||||
});
|
||||
this.bindEventName = bindEventName;
|
||||
editor.emit('eventBindDialog.openDialog', bindEventName, SETTER_NAME, paramStr);
|
||||
};
|
||||
|
||||
|
||||
bindEvent = (relatedEventName: string, paramStr:string) => {
|
||||
bindEvent = (relatedEventName: string, paramStr: string) => {
|
||||
const { eventDataList, eventList } = this.state;
|
||||
eventDataList.map(item => {
|
||||
if (item.name === this.bindEventName) {
|
||||
@ -351,6 +369,8 @@ export default class EventsSetter extends Component<{
|
||||
item.paramStr = paramStr;
|
||||
}
|
||||
}
|
||||
|
||||
return item;
|
||||
});
|
||||
|
||||
this.setState({
|
||||
@ -372,7 +392,6 @@ export default class EventsSetter extends Component<{
|
||||
selectType,
|
||||
eventDataList,
|
||||
} = this.state;
|
||||
const { editor } = this.props.field;
|
||||
const showEventList =
|
||||
lifeCycleEventList.length > 0 ? lifeCycleEventList : eventList;
|
||||
return (
|
||||
@ -380,7 +399,7 @@ export default class EventsSetter extends Component<{
|
||||
|
||||
<div className="event-title">
|
||||
{
|
||||
eventBtns.length > 1 ? <span>点击选择事件类型</span> : <span>点击绑定事件</span>
|
||||
eventBtns.length > 1 ? <span>点击选择事件类型</span> : <span>点击绑定事件</span>
|
||||
}
|
||||
</div>
|
||||
|
||||
@ -398,7 +417,7 @@ export default class EventsSetter extends Component<{
|
||||
className="event-menu"
|
||||
onItemClick={this.onEventMenuClick}
|
||||
>
|
||||
{showEventList.map((item, index) => (
|
||||
{showEventList.map((item) => (
|
||||
<Item
|
||||
key={item.name}
|
||||
helper={item.description}
|
||||
@ -418,9 +437,9 @@ export default class EventsSetter extends Component<{
|
||||
>
|
||||
{nativeEventList.map((item, index) => (
|
||||
<Group label={item.name} key={index}>
|
||||
{item.eventList.map(item => (
|
||||
<Item key={item.name} disabled={item.disabled}>
|
||||
{item.name}
|
||||
{item.eventList.map(groupItem => (
|
||||
<Item key={groupItem.name} disabled={groupItem.disabled}>
|
||||
{groupItem.name}
|
||||
</Item>
|
||||
))}
|
||||
</Group>
|
||||
|
||||
@ -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,
|
||||
|
||||
@ -2,9 +2,8 @@ import React, { PureComponent } from 'react';
|
||||
// import PropTypes from 'prop-types';
|
||||
import { Button, Icon, Dialog } from '@alifd/next';
|
||||
import MonacoEditor from 'react-monaco-editor';
|
||||
import { js_beautify, css_beautify } from 'js-beautify';
|
||||
import { js_beautify } from 'js-beautify';
|
||||
import './index.scss';
|
||||
import { timingSafeEqual } from 'crypto';
|
||||
|
||||
const SETTER_NAME = 'function-setter';
|
||||
|
||||
@ -40,25 +39,23 @@ interface FunctionSetterProps {
|
||||
defaultValue: string;
|
||||
placeholder: string;
|
||||
hasClear: boolean;
|
||||
onChange: (icon: string | object) => undefined;
|
||||
onChange: (icon: string) => undefined;
|
||||
icons: string[];
|
||||
}
|
||||
export default class FunctionSetter extends PureComponent<FunctionSetterProps, {}> {
|
||||
export default class FunctionSetter extends PureComponent<FunctionSetterProps> {
|
||||
static defaultProps = {
|
||||
value: undefined,
|
||||
type: 'string',
|
||||
defaultValue: '',
|
||||
hasClear: true,
|
||||
placeholder: '请点击选择 Icon',
|
||||
onChange: (icon: string | object) => undefined,
|
||||
onChange: () => undefined,
|
||||
};
|
||||
|
||||
private emitEventName = '';
|
||||
|
||||
state = {
|
||||
firstLoad: true,
|
||||
isShowDialog: false,
|
||||
functionCode: null,
|
||||
};
|
||||
|
||||
componentDidMount() {
|
||||
@ -79,7 +76,7 @@ export default class FunctionSetter extends PureComponent<FunctionSetterProps, {
|
||||
|
||||
|
||||
bindFunction = () => {
|
||||
const { field, value } = this.props;
|
||||
const { field } = this.props;
|
||||
field.editor.emit('eventBindDialog.openDialog', field.name, this.emitEventName);
|
||||
};
|
||||
|
||||
@ -99,7 +96,7 @@ export default class FunctionSetter extends PureComponent<FunctionSetterProps, {
|
||||
};
|
||||
|
||||
removeFunctionBind = () => {
|
||||
const { field, removeProp } = this.props;
|
||||
const { removeProp } = this.props;
|
||||
removeProp();
|
||||
};
|
||||
|
||||
@ -157,12 +154,14 @@ export default class FunctionSetter extends PureComponent<FunctionSetterProps, {
|
||||
|
||||
// 解析函数名
|
||||
const functionName = this.parseFunctionName(value.value);
|
||||
return (<div className="function-container">
|
||||
<img className="funtion-icon" src="https://gw.alicdn.com/tfs/TB1NXNhk639YK4jSZPcXXXrUFXa-200-200.png" />
|
||||
<span className="function-name" onClick={() => this.focusFunctionName(functionName)}>{functionName}</span>
|
||||
<Icon type="set" size="medium" className="funtion-operate-icon" onClick={this.bindFunction} />
|
||||
<Icon type="ashbin" size="medium" className="funtion-operate-icon" onClick={this.removeFunctionBind} />
|
||||
</div>);
|
||||
return (
|
||||
<div className="function-container">
|
||||
<img className="funtion-icon" src="https://gw.alicdn.com/tfs/TB1NXNhk639YK4jSZPcXXXrUFXa-200-200.png" />
|
||||
<span className="function-name" onClick={() => this.focusFunctionName(functionName)}>{functionName}</span>
|
||||
<Icon type="set" size="medium" className="funtion-operate-icon" onClick={this.bindFunction} />
|
||||
<Icon type="ashbin" size="medium" className="funtion-operate-icon" onClick={this.removeFunctionBind} />
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
@ -170,9 +169,11 @@ export default class FunctionSetter extends PureComponent<FunctionSetterProps, {
|
||||
* 渲染编辑函数按钮(可直接编辑函数内容)
|
||||
*/
|
||||
renderEditFunctionButton = () => {
|
||||
return (<div>
|
||||
<Button type="primary" onClick={this.openDialog}><Icon type="edit" />编辑函数</Button>
|
||||
</div>);
|
||||
return (
|
||||
<div>
|
||||
<Button type="primary" onClick={this.openDialog}><Icon type="edit" />编辑函数</Button>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
@ -192,13 +193,27 @@ export default class FunctionSetter extends PureComponent<FunctionSetterProps, {
|
||||
if (value && value.value) {
|
||||
functionName = this.parseFunctionName(value.value);
|
||||
}
|
||||
return (<div className="lc-function-setter">
|
||||
{
|
||||
value ? (functionName ? this.renderBindFunction() : this.renderEditFunctionButton()) : this.renderButton()
|
||||
|
||||
let renderFunction;
|
||||
if (value) {
|
||||
if (functionName) {
|
||||
renderFunction = this.renderBindFunction;
|
||||
} else {
|
||||
renderFunction = this.renderEditFunctionButton;
|
||||
}
|
||||
} else {
|
||||
renderFunction = this.renderButton;
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="lc-function-setter">
|
||||
{
|
||||
renderFunction()
|
||||
}
|
||||
|
||||
{
|
||||
value && value.value && <Dialog visible={isShowDialog} closeable={'close'} title="函数编辑" onCancel={this.closeDialog} onOk={this.onDialogOk} onClose={() => { this.closeDialog(); }}>
|
||||
{
|
||||
value && value.value &&
|
||||
<Dialog visible={isShowDialog} closeable={'close'} title="函数编辑" onCancel={this.closeDialog} onOk={this.onDialogOk} onClose={() => { this.closeDialog(); }}>
|
||||
<div style={{ width: '500px', height: '400px' }}>
|
||||
<MonacoEditor
|
||||
value={js_beautify(value.value)}
|
||||
@ -207,10 +222,9 @@ export default class FunctionSetter extends PureComponent<FunctionSetterProps, {
|
||||
onChange={(newCode) => this.updateCode(newCode)}
|
||||
/>
|
||||
</div>
|
||||
</Dialog>
|
||||
</Dialog>
|
||||
}
|
||||
|
||||
|
||||
</div>);
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
@ -68,10 +68,10 @@ interface IconSetterProps {
|
||||
defaultValue: string;
|
||||
placeholder: string;
|
||||
hasClear: boolean;
|
||||
onChange: (icon: string | object) => undefined;
|
||||
onChange: (icon: string) => undefined;
|
||||
icons: string[];
|
||||
}
|
||||
export default class IconSetter extends PureComponent<IconSetterProps, {}> {
|
||||
export default class IconSetter extends PureComponent<IconSetterProps> {
|
||||
static defaultProps = {
|
||||
value: undefined,
|
||||
type: 'string',
|
||||
@ -79,7 +79,7 @@ export default class IconSetter extends PureComponent<IconSetterProps, {}> {
|
||||
hasClear: true,
|
||||
icons,
|
||||
placeholder: '请点击选择 Icon',
|
||||
onChange: (icon: string | object) => undefined,
|
||||
onChange: () => undefined,
|
||||
};
|
||||
|
||||
state = {
|
||||
@ -109,7 +109,7 @@ export default class IconSetter extends PureComponent<IconSetterProps, {}> {
|
||||
};
|
||||
|
||||
render() {
|
||||
const { icons, value, defaultValue, onChange, placeholder, hasClear, type } = this.props;
|
||||
const { value, defaultValue, onChange, placeholder, hasClear } = this.props;
|
||||
const { firstLoad } = this.state;
|
||||
const _value = typeof value === 'object' ? value?.props?.type : value;
|
||||
if (firstLoad && defaultValue && typeof value === 'undefined') {
|
||||
|
||||
@ -55,9 +55,10 @@ export const DateRangeSetter = DatePicker.RangePicker;
|
||||
|
||||
export { ExpressionSetter, EventsSetter, JsonSetter, IconSetter };
|
||||
|
||||
// eslint-disable-next-line react/no-multi-comp
|
||||
class StringDateSetter extends Component {
|
||||
render() {
|
||||
const { onChange, editor } = this.props;
|
||||
const { onChange } = this.props;
|
||||
return (
|
||||
<DatePicker
|
||||
onChange={(val) => {
|
||||
@ -67,9 +68,11 @@ class StringDateSetter extends Component {
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
// eslint-disable-next-line react/no-multi-comp
|
||||
class StringTimePicker extends Component {
|
||||
render() {
|
||||
const { onChange, editor } = this.props;
|
||||
const { onChange } = this.props;
|
||||
return (
|
||||
<TimePicker
|
||||
onChange={(val) => {
|
||||
|
||||
@ -30,6 +30,7 @@ class MonacoEditorView extends PureComponent {
|
||||
localeConfig('MonacoEditor', MonacoEditorView);
|
||||
|
||||
// monaco编辑器存在3种主题：vs、vs-dark、hc-black
|
||||
// eslint-disable-next-line react/no-multi-comp
|
||||
class MonacoEditorDefaultView extends PureComponent {
|
||||
static displayName = 'MonacoEditorDefault';
|
||||
|
||||
@ -92,7 +93,7 @@ class MonacoEditorDefaultView extends PureComponent {
|
||||
|
||||
editorParentNode: any;
|
||||
|
||||
constructor(props: Readonly<{}>) {
|
||||
constructor(props: Readonly) {
|
||||
super(props);
|
||||
this.strValue = '';
|
||||
this.i18n = generateI18n(props.locale, props.messages);
|
||||
@ -288,8 +289,12 @@ class MonacoEditorDefaultView extends PureComponent {
|
||||
} else if (value && typeof value === 'string') {
|
||||
try {
|
||||
const ret = this.toJson(value);
|
||||
if (!ret.error) tarValue = JSON.stringify(ret.value, null, 2);
|
||||
} catch (err) {}
|
||||
if (!ret.error) {
|
||||
tarValue = JSON.stringify(ret.value, null, 2);
|
||||
}
|
||||
} catch (err) {
|
||||
// empty
|
||||
}
|
||||
}
|
||||
} else if (language === 'function') {
|
||||
if (typeof value === 'function') {
|
||||
@ -305,13 +310,17 @@ class MonacoEditorDefaultView extends PureComponent {
|
||||
try {
|
||||
tarValue = serialize(value, { unsafe: true });
|
||||
tarValue = js_beautify(tarValue, { indent_size: 2, indent_empty_lines: true });
|
||||
} catch (err) {}
|
||||
} catch (err) {
|
||||
// empty
|
||||
}
|
||||
} else if (typeof value === 'string') {
|
||||
try {
|
||||
const ret = this.resultHandler(value, 'object');
|
||||
tarValue = ret.error ? ret.value : serialize(ret.value, { unsafe: true });
|
||||
tarValue = js_beautify(tarValue, { indent_size: 2, indent_empty_lines: true });
|
||||
} catch (err) {}
|
||||
} catch (err) {
|
||||
// empty
|
||||
}
|
||||
}
|
||||
}
|
||||
return tarValue;
|
||||
@ -346,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(
|
||||
@ -360,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') {
|
||||
@ -377,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)) };
|
||||
}
|
||||
@ -391,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 };
|
||||
@ -406,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 };
|
||||
@ -432,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) => {
|
||||
@ -474,6 +488,7 @@ window.MonacoEnvironment = {
|
||||
},
|
||||
};
|
||||
|
||||
// eslint-disable-next-line react/no-multi-comp
|
||||
export default class MonacoEditorButtonView extends PureComponent {
|
||||
static displayName = 'JsonSetter';
|
||||
|
||||
@ -491,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();
|
||||
@ -542,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 &&
|
||||
@ -566,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();
|
||||
@ -576,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