Merge branch 'v/0.8.0' of gitlab.alibaba-inc.com:ali-lowcode/ali-lowcode-engine into v/0.8.0

packages/setters/src/events-setter/event-dialog.tsx

@@ -1,12 +1,10 @@
 import { Component, isValidElement, ReactElement, ReactNode } from 'react';
 import { Dialog, Search, Input } from '@alifd/next';
+import Editor from '@ali/lowcode-editor-core';
 import './style.less';
 
 export default class EventDialog extends Component<{
-  dialigVisiable?: boolean;
+  editor:Editor,
-  closeDialog?: () => void;
-  submitDialog?: (value?: string) => void;
-  bindEventName?: string;
 }> {
   private eventList: any[] = [
     {
@@ -27,18 +25,33 @@ export default class EventDialog extends Component<{
   ];
 
   state = {
+    visiable:false,
     selectedEventName: '',
     eventName: '',
   };
 
-  componentWillReceiveProps(nextProps: any) {
+  openDialog = (bindEventName:String) => {
     this.setState({
-      eventName: nextProps.bindEventName,
+      visiable:true,
+      eventName:bindEventName
+    })
+  }
+
+  closeDialog = () => {
+    this.setState({
+      visiable:false
+    })
+  }
+
+  componentDidMount (){
+    const {editor} = this.props;
+    editor.on('eventBindDialog.open',(bindEventName:String)=>{
+      this.openDialog(bindEventName)
     });
   }
 
   initEventName = () => {
-    const { bindEventName } = this.props;
+    const { bindEventName } = this.state;
     let eventName = bindEventName;
     this.eventList.map((item) => {
       if (item.name === eventName) {
@@ -76,14 +89,15 @@ export default class EventDialog extends Component<{
   onSearchEvent = (searchEventName: String) => {};
 
   onOk = () => {
-    this.props.submitDialog?.(this.state.eventName);
+    const {editor} = this.props;
+    editor.emit('event-setter.bindEvent',this.state.eventName);
+    this.closeDialog();
   };
 
   render() {
-    const { dialigVisiable, closeDialog } = this.props;
+    const { selectedEventName, eventName,visiable} = this.state;
-    const { selectedEventName, eventName } = this.state;
     return (
-      <Dialog visible={dialigVisiable} title="事件绑定" onClose={closeDialog} onCancel={closeDialog} onOk={this.onOk}>
+      <Dialog visible={visiable} title="事件绑定" onClose={this.closeDialog} onCancel={this.closeDialog} onOk={this.onOk}>
         <div className="event-dialog-body">
           <div className="dialog-left-container">
             <div className="dialog-small-title">事件选择</div>

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

@@ -31,13 +31,14 @@ export default class EventsSetter extends Component<{
     nativeEventList: [],
     lifeCycleEventList: [],
     eventDataList: this.props.value || [],
-    isShowEventDialog: false,
-    bindEventName: '',
     relatedEventName: '',
   };
 
+
+
   static getDerivedStateFromProps(nextProps, prevState) {
     const { value } = nextProps;
+    debugger;
     if (value !== prevState.eventDataList) {
       return {
         value,
@@ -46,9 +47,16 @@ export default class EventsSetter extends Component<{
     return null;
   }
 
+  private bindEventName:String;
+
   componentDidMount() {
+    const {editor} = this.props.field;
     this.initEventBtns();
     this.initEventList();
+    editor.on('event-setter.bindEvent',(relatedEventName)=>{
+      this.bindEvent(relatedEventName);
+    })
+
   }
 
   /**
@@ -201,7 +209,7 @@ export default class EventsSetter extends Component<{
         <Icon
           type="set"
           className="event-operate-icon"
-          style={{ marginLeft: '5px', marginRight: '4px' }}
+          style={{ marginLeft: '3px', marginRight: '4px' }}
           onClick={() => this.openDialog(eventName)}
         />
         <Icon
@@ -291,29 +299,27 @@ export default class EventsSetter extends Component<{
   };
 
   openDialog = (bindEventName: String) => {
-    this.setState({
+    const {editor} = this.props.field;
-      isShowEventDialog: true,
+    this.bindEventName = bindEventName;
-      bindEventName,
+    editor.emit('eventBindDialog.open',bindEventName);
-    });
   };
 
-  closeDialog = () => {
-    this.setState({
-      isShowEventDialog: false,
-    });
-  };
 
-  submitDialog = (relatedEventName: String) => {
+  bindEvent = (relatedEventName: String) => {
-    const { bindEventName, eventDataList } = this.state;
+    const {eventDataList} = this.state;
     eventDataList.map(item => {
-      if (item.name === bindEventName) {
+      if (item.name === this.bindEventName) {
         item.relatedEventName = relatedEventName;
       }
     });
 
+    this.setState({
+      eventDataList
+    })
+
     this.props.onChange(eventDataList);
 
-    this.closeDialog();
+    //this.closeDialog();
   };
 
   render() {
@@ -324,10 +330,8 @@ export default class EventsSetter extends Component<{
       lifeCycleEventList,
       selectType,
       eventDataList,
-      isShowEventDialog,
-      bindEventName,
     } = this.state;
-
+    const {editor} = this.props.field;
     let showEventList =
       lifeCycleEventList.length > 0 ? lifeCycleEventList : eventList;
     return (
@@ -396,10 +400,7 @@ export default class EventsSetter extends Component<{
         </div>
 
         <EventDialog
-          dialigVisiable={isShowEventDialog}
+          editor={editor}
-          closeDialog={this.closeDialog}
-          submitDialog={this.submitDialog}
-          bindEventName={bindEventName}
         ></EventDialog>
       </div>
     );

packages/setters/src/events-setter/style.less

@@ -17,6 +17,13 @@
     display: flex;
   }
 
+  .next-table td .next-table-cell-wrapper{
+    padding: 12px 10px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    word-break: break-all;
+  }
+
   .next-radio-group label {
     -webkit-box-flex: 1;
     -webkit-flex: auto;