将event-bind-dialog 分离成插件

packages/demo/src/config/components.js

@@ -5,8 +5,8 @@ import Designer from '@ali/lowcode-plugin-designer';
 import SettingsPane from '@ali/lowcode-plugin-settings-pane';
 import componentsPane from '@ali/lowcode-plugin-components-pane';
 import OutlinePane from '@ali/lowcode-plugin-outline-pane';
+import EventBindDialog from '@ali/lowcode-plugin-event-bind-dialog'
 import { PluginFactory } from '@ali/lowcode-editor-core';
-
 export default {
   logo: PluginFactory(logo),
   samplePreview: PluginFactory(SamplePreview),
@@ -15,4 +15,5 @@ export default {
   componentsPane: PluginFactory(componentsPane),
   settingsPane: PluginFactory(SettingsPane),
   outlinePane: PluginFactory(OutlinePane),
+  eventBindDialog:PluginFactory(EventBindDialog)
 };

packages/demo/src/config/skeleton.js

@@ -112,6 +112,13 @@ export default {
           package: '@ali/lowcode-plugin-designer',
           version: '1.0.0'
         }
+      },
+      {
+        pluginKey: 'eventBindDialog',
+        config: {
+          package: '@ali/lowcode-plugin-event-bind-dialog',
+          version: '1.0.0'
+        }
       }
     ]
   },

packages/plugin-event-bind-dialog/README.md

@@ -0,0 +1 @@
+## todo

packages/plugin-event-bind-dialog/build.json

@@ -0,0 +1,9 @@
+{
+  "plugins": [
+    "build-plugin-component",
+    "build-plugin-fusion",
+    ["build-plugin-moment-locales", {
+      "locales": ["zh-cn"]
+    }]
+  ]
+}

packages/plugin-event-bind-dialog/package.json

@@ -0,0 +1,38 @@
+{
+  "name": "@ali/lowcode-plugin-event-bind-dialog",
+  "version": "0.8.0",
+  "description": "alibaba lowcode editor event bind dialog plugin",
+  "files": [
+    "es",
+    "lib"
+  ],
+  "main": "lib/index.js",
+  "module": "es/index.js",
+  "scripts": {
+    "build": "build-scripts build --skip-demo",
+    "test": "ava",
+    "test:snapshot": "ava --update-snapshots"
+  },
+  "keywords": [
+    "lowcode",
+    "editor"
+  ],
+  "author": "zude.hzd",
+  "dependencies": {
+    "@alifd/next": "^1.19.16",
+    "@ali/lowcode-editor-core": "^0.8.0",
+    "react": "^16.8.1",
+    "react-dom": "^16.8.1"
+  },
+  "devDependencies": {
+    "@alib/build-scripts": "^0.1.3",
+    "@types/react": "^16.9.13",
+    "@types/react-dom": "^16.9.4",
+    "build-plugin-component": "^0.2.7-1",
+    "build-plugin-fusion": "^0.1.0",
+    "build-plugin-moment-locales": "^0.1.0"
+  },
+  "publishConfig": {
+    "registry": "https://registry.npm.alibaba-inc.com"
+  }
+}

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

@@ -0,0 +1,71 @@
+.event-dialog-body {
+  width: 800px;
+  height: 450px;
+
+
+  .dialog-small-title {
+    font-weight: 700;
+    margin-bottom: 8px;
+    color: rgb(0, 0, 0);
+  }
+
+  .dialog-left-container {
+    float: left;
+
+    .dialog-left-context {
+      width: 268px;
+      height: 392px;
+      border: 1px solid rgba(31, 56, 88, 0.3);
+      border-radius: 3px;
+
+      .event-type-container {
+        width: 110px;
+        height: 390px;
+        border-right: 1px solid rgba(31, 56, 88, 0.3);
+        float: left;
+      }
+
+      .select-item {
+        font-size: 12px;
+        height: 28px;
+        line-height: 28px;
+        padding: 0 30px 0 12px;
+        cursor: pointer;
+        position: relative;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+      }
+
+      .select-item-active {
+        background: rgba(31, 56, 88, 0.06);
+      }
+
+      .event-select-container {
+        width: 156px;
+        float: left;
+
+        .event-search-box {
+          width: 135px;
+          margin: 10px;
+        }
+      }
+
+      .event-list {
+        overflow-y: auto;
+        overflow-x: hidden;
+        height: 342px;
+      }
+    }
+  }
+
+  .dialog-right-container {
+    width: 530px;
+    padding-left: 20px;
+    float: left;
+
+    .event-input-container {
+      margin-bottom: 20px;
+    }
+  }
+}

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

@@ -1,9 +1,9 @@
 import { Component, isValidElement, ReactElement, ReactNode } from 'react';
 import { Dialog, Search, Input } from '@alifd/next';
 import Editor from '@ali/lowcode-editor-core';
-import './style.less';
+import './index.scss';
 
-export default class EventDialog extends Component<{
+export default class EventBindDialog extends Component<{
   editor:Editor,
 }> {
   private eventList: any[] = [
@@ -44,8 +44,8 @@ export default class EventDialog extends Component<{
   }
 
   componentDidMount (){
-    const {editor} = this.props;
+    const {editor,config} = this.props;
-    editor.on('eventBindDialog.open',(bindEventName:String)=>{
+    editor.on(`${config.pluginKey}.openDialog`,(bindEventName:String)=>{
       this.openDialog(bindEventName)
     });
   }
@@ -95,6 +95,7 @@ export default class EventDialog extends Component<{
   };
 
   render() {
+    debugger;
     const { selectedEventName, eventName,visiable} = this.state;
     return (
       <Dialog visible={visiable} title="事件绑定" onClose={this.closeDialog} onCancel={this.closeDialog} onOk={this.onOk}>

packages/plugin-event-bind-dialog/tsconfig.json

@@ -0,0 +1,9 @@
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "outDir": "lib"
+  },
+  "include": [
+    "./src/"
+  ]
+}

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

@@ -88,75 +88,3 @@
   }
 }
 
-
-.event-dialog-body {
-  width: 800px;
-  height: 450px;
-
-
-  .dialog-small-title {
-    font-weight: 700;
-    margin-bottom: 8px;
-    color: rgba(0, 0, 0);
-  }
-
-  .dialog-left-container {
-    float: left;
-
-    .dialog-left-context {
-      width: 268px;
-      height: 392px;
-      border: 1px solid rgba(31, 56, 88, .3);
-      border-radius: 3px;
-
-      .event-type-container {
-        width: 110px;
-        height: 390px;
-        border-right: 1px solid rgba(31, 56, 88, .3);
-        float: left;
-      }
-
-      .select-item {
-        font-size: 12px;
-        height: 28px;
-        line-height: 28px;
-        padding: 0 30px 0 12px;
-        cursor: pointer;
-        position: relative;
-        overflow: hidden;
-        text-overflow: ellipsis;
-        white-space: nowrap;
-      }
-
-      .select-item-active {
-        background: rgba(31, 56, 88, .06);
-      }
-
-      .event-select-container {
-        width: 156px;
-        float: left;
-
-        .event-search-box {
-          width: 135px;
-          margin: 10px;
-        }
-      }
-
-      .event-list {
-        overflow-y: auto;
-        overflow-x: hidden;
-        height: 342px;
-      }
-    }
-  }
-
-  .dialog-right-container {
-    width: 530px;
-    padding-left: 20px;
-    float: left;
-
-    .event-input-container {
-      margin-bottom: 20px;
-    }
-  }
-}

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

@@ -2,8 +2,7 @@ import { Component, isValidElement, ReactElement, ReactNode } from 'react';
 import { Radio, Menu, Table, Icon, Dialog } from '@alifd/next';
 import nativeEvents from './native-events';
 
-import './style.less';
+import './index.scss';
-import EventDialog from './event-dialog';
 const { SubMenu, Item, Group, Divider } = Menu;
 const RadioGroup = Radio.Group;
 
@@ -38,7 +37,6 @@ export default class EventsSetter extends Component<{
 
   static getDerivedStateFromProps(nextProps, prevState) {
     const { value } = nextProps;
-    debugger;
     if (value !== prevState.eventDataList) {
       return {
         value,
@@ -301,7 +299,7 @@ export default class EventsSetter extends Component<{
   openDialog = (bindEventName: String) => {
     const {editor} = this.props.field;
     this.bindEventName = bindEventName;
-    editor.emit('eventBindDialog.open',bindEventName);
+    editor.emit('eventBindDialog.openDialog',bindEventName);
   };
 
 
@@ -398,10 +396,6 @@ export default class EventsSetter extends Component<{
             />
           </Table>
         </div>
-
-        <EventDialog
-          editor={editor}
-        ></EventDialog>
       </div>
     );
   }