feat: 新增事件入参功能

packages/editor-setters/src/events-setter/index.tsx

@@ -60,11 +60,14 @@ export default class EventsSetter extends Component<{
   private bindEventName:String;
 
   componentDidMount() {
+
+    console.log(this.state.eventDataList);
+
     const {editor} = this.props.field;
     this.initEventBtns();
     this.initEventList();
-    editor.on(`${SETTER_NAME}.bindEvent`,(relatedEventName)=>{
-      this.bindEvent(relatedEventName);
+    editor.on(`${SETTER_NAME}.bindEvent`,(relatedEventName,paramStr)=>{
+      this.bindEvent(relatedEventName,paramStr);
     })
 
   }
@@ -329,16 +332,26 @@ export default class EventsSetter extends Component<{
 
   openDialog = (bindEventName: String) => {
     const {editor} = this.props.field;
+    const {eventDataList} = this.state;
+    let paramStr;
+    eventDataList.map((item)=>{
+      if (item.name == bindEventName){
+        paramStr = item.paramStr;
+      }
+    })
     this.bindEventName = bindEventName;
-    editor.emit('eventBindDialog.openDialog',bindEventName,SETTER_NAME);
+    editor.emit('eventBindDialog.openDialog',bindEventName,SETTER_NAME,paramStr);
   };
 
 
-  bindEvent = (relatedEventName: String) => {
+  bindEvent = (relatedEventName: String,paramStr:String) => {
     const {eventDataList,eventList} = this.state;
     eventDataList.map(item => {
       if (item.name === this.bindEventName) {
         item.relatedEventName = relatedEventName;
+        if (paramStr){
+          item.paramStr = paramStr
+        }
       }
     });
 

packages/editor-skeleton/src/transducers/addon-combine.ts

@@ -207,6 +207,7 @@ export default function(metadata: TransformedComponentMetadata): TransformedComp
           },
 
           setValue(field: SettingTarget, eventData) {
+            debugger;
             const { eventDataList, eventList } = eventData;
             eventList.map((item) => {
               field.parent.clearPropValue(item.name);
@@ -215,7 +216,7 @@ export default function(metadata: TransformedComponentMetadata): TransformedComp
             eventDataList.map((item) => {
               field.parent.setPropValue(item.name, {
                 type: 'JSFunction',
-                value: `function(){ this.${item.relatedEventName}() }`,
+                value: `function(){ this.${item.relatedEventName}(${item.paramStr?item.paramStr:''}) }`,
               });
               return item;
             });

packages/plugin-event-bind-dialog/src/index.scss

@@ -9,6 +9,10 @@
     color: rgb(0, 0, 0);
   }
 
+  .editor-container{
+    border: 1px solid rgba(31, 56, 88, 0.3);
+  }
+
   .dialog-left-container {
     float: left;
 

packages/plugin-event-bind-dialog/src/index.tsx

@@ -53,6 +53,7 @@ export default class EventBindDialog extends Component<PluginProps> {
     setterName:'event-setter',
     selectedEventName: '',
     eventName: '',
+    paramStr:''
   };
 
   openDialog = (bindEventName: String) => {
@@ -73,10 +74,12 @@ export default class EventBindDialog extends Component<PluginProps> {
 
   componentDidMount() {
     const { editor, config } = this.props;
-    editor.on(`${config.pluginKey}.openDialog`, (bindEventName: String,setterName:String) => {
+    editor.on(`${config.pluginKey}.openDialog`, (bindEventName: String,setterName:String,paramStr:String) => {
+      console.log('paramStr:'+paramStr);
       this.openDialog(bindEventName);
       this.setState({
-        setterName
+        setterName,
+        paramStr
       })
 
       let schema = editor.get('designer').project.getSchema();
@@ -131,10 +134,10 @@ export default class EventBindDialog extends Component<PluginProps> {
   onSearchEvent = (searchEventName: String) => {};
 
   onOk = () => {
+    console.log(this);
     const { editor } = this.props;
-    const {setterName,eventName} = this.state;
-
-    editor.emit(`${setterName}.bindEvent`, eventName);
+    const {setterName,eventName,paramStr} = this.state;
+    editor.emit(`${setterName}.bindEvent`, eventName,paramStr);
 
     // 选中的是新建事件
     if (this.state.selectedEventName == '') {
@@ -153,15 +156,23 @@ export default class EventBindDialog extends Component<PluginProps> {
     this.closeDialog();
   };
 
+  onChangeEditor = (paramStr) =>{
+    this.setState({
+      paramStr
+    })
+    // console.log(newCode);
+  }
+
+
   render() {
-    const { selectedEventName, eventName, visiable } = this.state;
+    const { selectedEventName, eventName, visiable,paramStr } = this.state;
     return (
       <Dialog
         visible={visiable}
         title="事件绑定"
         onClose={this.closeDialog}
         onCancel={this.closeDialog}
-        onOk={this.onOk}
+        onOk={()=>this.onOk()}
       >
         <div className="event-dialog-body">
           <div className="dialog-left-container">
@@ -206,12 +217,16 @@ export default class EventBindDialog extends Component<PluginProps> {
             </div>
 
             <div className="dialog-small-title">参数设置</div>
-            <MonacoEditor
-                {...defaultEditorOption}
-                {...{ language: 'javascript' }}
-                // onChange={(newCode) => this.updateCode(newCode)}
-                // editorDidMount={(editor, monaco) => this.editorDidMount.call(this, editor, monaco, TAB_KEY.JS_TAB)}
-              />
+            <div className="editor-container">
+              <MonacoEditor
+                  value = {paramStr}
+                  {...defaultEditorOption}
+                  {...{ language: 'javascript' }}
+                  onChange={(newCode) => this.onChangeEditor(newCode)}
+                  // editorDidMount={(editor, monaco) => this.editorDidMount.call(this, editor, monaco, TAB_KEY.JS_TAB)}
+                />
+            </div>
+
           </div>
         </div>
       </Dialog>