From 410416fe94d1dc7d720a763b9af6b598449d246a Mon Sep 17 00:00:00 2001 From: "zude.hzd" Date: Mon, 30 Mar 2020 11:49:12 +0800 Subject: [PATCH] =?UTF-8?q?=E5=B0=86event-bind-dialog=20=E5=88=86=E7=A6=BB?= =?UTF-8?q?=E6=88=90=E6=8F=92=E4=BB=B6?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/demo/src/config/components.js | 3 +- packages/demo/src/config/skeleton.js | 7 ++ packages/plugin-event-bind-dialog/README.md | 1 + packages/plugin-event-bind-dialog/build.json | 9 +++ .../plugin-event-bind-dialog/package.json | 38 ++++++++++ .../plugin-event-bind-dialog/src/index.scss | 71 ++++++++++++++++++ .../src/index.tsx} | 9 +-- .../plugin-event-bind-dialog/tsconfig.json | 9 +++ .../events-setter/{style.less => index.scss} | 72 ------------------- packages/setters/src/events-setter/index.tsx | 10 +-- 10 files changed, 144 insertions(+), 85 deletions(-) create mode 100644 packages/plugin-event-bind-dialog/README.md create mode 100644 packages/plugin-event-bind-dialog/build.json create mode 100644 packages/plugin-event-bind-dialog/package.json create mode 100644 packages/plugin-event-bind-dialog/src/index.scss rename packages/{setters/src/events-setter/event-dialog.tsx => plugin-event-bind-dialog/src/index.tsx} (94%) create mode 100644 packages/plugin-event-bind-dialog/tsconfig.json rename packages/setters/src/events-setter/{style.less => index.scss} (52%) diff --git a/packages/demo/src/config/components.js b/packages/demo/src/config/components.js index 2d40e553c..cd0ca4e9f 100644 --- a/packages/demo/src/config/components.js +++ b/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) }; diff --git a/packages/demo/src/config/skeleton.js b/packages/demo/src/config/skeleton.js index 035d9a0c5..94b2e9f76 100644 --- a/packages/demo/src/config/skeleton.js +++ b/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' + } } ] }, diff --git a/packages/plugin-event-bind-dialog/README.md b/packages/plugin-event-bind-dialog/README.md new file mode 100644 index 000000000..8a6fb13f0 --- /dev/null +++ b/packages/plugin-event-bind-dialog/README.md @@ -0,0 +1 @@ +## todo diff --git a/packages/plugin-event-bind-dialog/build.json b/packages/plugin-event-bind-dialog/build.json new file mode 100644 index 000000000..e791d5b6b --- /dev/null +++ b/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"] + }] + ] +} diff --git a/packages/plugin-event-bind-dialog/package.json b/packages/plugin-event-bind-dialog/package.json new file mode 100644 index 000000000..104196740 --- /dev/null +++ b/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" + } +} diff --git a/packages/plugin-event-bind-dialog/src/index.scss b/packages/plugin-event-bind-dialog/src/index.scss new file mode 100644 index 000000000..1ab0e5947 --- /dev/null +++ b/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; + } + } +} diff --git a/packages/setters/src/events-setter/event-dialog.tsx b/packages/plugin-event-bind-dialog/src/index.tsx similarity index 94% rename from packages/setters/src/events-setter/event-dialog.tsx rename to packages/plugin-event-bind-dialog/src/index.tsx index db337bd01..194c36186 100644 --- a/packages/setters/src/events-setter/event-dialog.tsx +++ b/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; - editor.on('eventBindDialog.open',(bindEventName:String)=>{ + const {editor,config} = this.props; + 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 ( diff --git a/packages/plugin-event-bind-dialog/tsconfig.json b/packages/plugin-event-bind-dialog/tsconfig.json new file mode 100644 index 000000000..c37b76ecc --- /dev/null +++ b/packages/plugin-event-bind-dialog/tsconfig.json @@ -0,0 +1,9 @@ +{ + "extends": "../../tsconfig.json", + "compilerOptions": { + "outDir": "lib" + }, + "include": [ + "./src/" + ] +} diff --git a/packages/setters/src/events-setter/style.less b/packages/setters/src/events-setter/index.scss similarity index 52% rename from packages/setters/src/events-setter/style.less rename to packages/setters/src/events-setter/index.scss index 5957def04..04e174828 100644 --- a/packages/setters/src/events-setter/style.less +++ b/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; - } - } -} diff --git a/packages/setters/src/events-setter/index.tsx b/packages/setters/src/events-setter/index.tsx index 700854fcb..f467a214b 100644 --- a/packages/setters/src/events-setter/index.tsx +++ b/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 EventDialog from './event-dialog'; +import './index.scss'; 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<{ /> - - ); }