fix: update

This commit is contained in:
zude.hzd 2020-11-02 17:00:26 +08:00
parent c8148e4bc4
commit 2f28a1ddca
3 changed files with 43 additions and 32 deletions

View File

@ -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;

View File

@ -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}

View File

@ -102,10 +102,6 @@ export default class SourceEditor extends Component<{
}
componentDidMount() {
// this.editorNode = this.editorJsRef.current; // 记录当前dom节点
}
/**
*
*/