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