mirror of
https://github.com/alibaba/lowcode-engine.git
synced 2026-01-13 01:21:58 +00:00
fix: update
This commit is contained in:
parent
c8148e4bc4
commit
2f28a1ddca
@ -1,3 +1,4 @@
|
||||
|
||||
import React, { PureComponent } from 'react';
|
||||
// import PropTypes from 'prop-types';
|
||||
import { Button, Icon, Dialog } from '@alifd/next';
|
||||
@ -64,8 +65,8 @@ export default class FunctionSetter extends PureComponent<FunctionSetterProps> {
|
||||
editor.on(`${this.emitEventName}.bindEvent`, this.bindEvent);
|
||||
}
|
||||
|
||||
bindEvent = (eventName) => {
|
||||
this.bindEventCallback(eventName);
|
||||
bindEvent = (eventName, paramStr) => {
|
||||
this.bindEventCallback(eventName, paramStr);
|
||||
};
|
||||
|
||||
|
||||
@ -75,9 +76,17 @@ export default class FunctionSetter extends PureComponent<FunctionSetterProps> {
|
||||
}
|
||||
|
||||
|
||||
bindFunction = () => {
|
||||
const { field } = this.props;
|
||||
field.editor.emit('eventBindDialog.openDialog', field.name, this.emitEventName);
|
||||
bindFunction = (isEdit) => {
|
||||
const { field, value } = this.props;
|
||||
|
||||
let paramStr;
|
||||
|
||||
if (value) {
|
||||
paramStr = this.parseFunctionParam(value.value);
|
||||
}
|
||||
|
||||
|
||||
field.editor.emit('eventBindDialog.openDialog', field.name, this.emitEventName, paramStr, isEdit);
|
||||
};
|
||||
|
||||
openDialog = () => {
|
||||
@ -102,14 +111,16 @@ export default class FunctionSetter extends PureComponent<FunctionSetterProps> {
|
||||
|
||||
parseFunctionName = (functionString: string) => {
|
||||
// 因为函数格式是固定的,所以可以按照字符换去匹配获取函数名
|
||||
const funNameStr = functionString.split('this.')[1];
|
||||
const funNameStr = functionString.split('this.')[1].split('.')[0];
|
||||
|
||||
return funNameStr;
|
||||
};
|
||||
|
||||
if (funNameStr) {
|
||||
const endIndex = funNameStr.indexOf('(');
|
||||
return funNameStr.substr(0, endIndex);
|
||||
} else {
|
||||
return '';
|
||||
parseFunctionParam = (functionString:string) => {
|
||||
// eslint-disable-next-line no-useless-escape
|
||||
const matchList = functionString.match(/\[(\w|\s|\,|")*\]/);
|
||||
if (matchList?.length) {
|
||||
return matchList[0].substring(1, matchList[0].length - 1);
|
||||
}
|
||||
};
|
||||
|
||||
@ -158,7 +169,7 @@ export default class FunctionSetter extends PureComponent<FunctionSetterProps> {
|
||||
<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="set" size="medium" className="funtion-operate-icon" onClick={() => this.bindFunction(true)} />
|
||||
<Icon type="ashbin" size="medium" className="funtion-operate-icon" onClick={this.removeFunctionBind} />
|
||||
</div>
|
||||
);
|
||||
@ -177,14 +188,16 @@ export default class FunctionSetter extends PureComponent<FunctionSetterProps> {
|
||||
};
|
||||
|
||||
|
||||
bindEventCallback = (eventName: string) => {
|
||||
bindEventCallback = (eventName: string, paramStr:string) => {
|
||||
const { onChange } = this.props;
|
||||
|
||||
onChange({
|
||||
type: 'JSFunction',
|
||||
value: `function(){ return this.${eventName}() }`,
|
||||
value: `function(){ return this.${eventName}.apply(this,Array.prototype.slice.call(arguments).concat([${paramStr || ''}])) }`,
|
||||
});
|
||||
};
|
||||
|
||||
|
||||
render() {
|
||||
const { value } = this.props;
|
||||
const { isShowDialog } = this.state;
|
||||
|
||||
@ -58,15 +58,11 @@ export default class EventBindDialog extends Component<PluginProps> {
|
||||
paramStr: '',
|
||||
};
|
||||
|
||||
openDialog = (bindEventName: string) => {
|
||||
openDialog = (bindEventName: string, isEdit:boolean) => {
|
||||
this.bindEventName = bindEventName;
|
||||
|
||||
this.initEventName();
|
||||
this.initEventName(isEdit);
|
||||
|
||||
this.setState({
|
||||
visiable: true,
|
||||
selectedEventName: '',
|
||||
});
|
||||
};
|
||||
|
||||
closeDialog = () => {
|
||||
@ -77,7 +73,7 @@ export default class EventBindDialog extends Component<PluginProps> {
|
||||
|
||||
componentDidMount() {
|
||||
const { editor, config } = this.props;
|
||||
editor.on(`${config.pluginKey}.openDialog`, (bindEventName: string, setterName:string, paramStr:string) => {
|
||||
editor.on(`${config.pluginKey}.openDialog`, (bindEventName: string, setterName:string, paramStr:string, isEdit:boolean) => {
|
||||
console.log(`paramStr:${ paramStr}`);
|
||||
this.setState({
|
||||
setterName,
|
||||
@ -95,20 +91,25 @@ export default class EventBindDialog extends Component<PluginProps> {
|
||||
}
|
||||
}
|
||||
|
||||
this.openDialog(bindEventName);
|
||||
this.openDialog(bindEventName, isEdit);
|
||||
});
|
||||
}
|
||||
|
||||
initEventName = () => {
|
||||
initEventName = (isEdit:boolean) => {
|
||||
let eventName = this.bindEventName;
|
||||
this.eventList.forEach((item) => {
|
||||
if (item.name === eventName) {
|
||||
eventName = `${eventName}_new`;
|
||||
}
|
||||
});
|
||||
|
||||
if (!isEdit) {
|
||||
this.eventList.forEach((item) => {
|
||||
if (item.name === eventName) {
|
||||
eventName = `${eventName}_new`;
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
this.setState({
|
||||
eventName,
|
||||
selectedEventName: (isEdit ? eventName : ''),
|
||||
visiable: true,
|
||||
});
|
||||
};
|
||||
|
||||
@ -168,6 +169,7 @@ export default class EventBindDialog extends Component<PluginProps> {
|
||||
|
||||
render() {
|
||||
const { selectedEventName, eventName, visiable, paramStr } = this.state;
|
||||
console.log('selectedEventName:' + selectedEventName);
|
||||
return (
|
||||
<Dialog
|
||||
visible={visiable}
|
||||
|
||||
@ -102,10 +102,6 @@ export default class SourceEditor extends Component<{
|
||||
}
|
||||
|
||||
|
||||
componentDidMount() {
|
||||
// this.editorNode = this.editorJsRef.current; // 记录当前dom节点;
|
||||
}
|
||||
|
||||
/**
|
||||
* 执行编辑器事件
|
||||
*/
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user