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

View File

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

View File

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