add variable bind dialog

packages/demo/src/config/components.js

@@ -0,0 +1,23 @@
+import undoRedo from '@ali/lowcode-plugin-undo-redo';
+import zhEn from '@ali/lowcode-plugin-zh-en';
+import logo from '@ali/lowcode-plugin-sample-logo';
+import SamplePreview from '@ali/lowcode-plugin-sample-preview';
+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 VariableBindDialog from  '@ali/lowcode-plugin-variable-bind-dialog';
+import { PluginFactory } from '@ali/lowcode-editor-core';
+export default {
+  undoRedo: PluginFactory(undoRedo),
+  zhEn: PluginFactory(zhEn),
+  designer: PluginFactory(Designer),
+  componentsPane: PluginFactory(componentsPane),
+  settingsPane: PluginFactory(SettingsPane),
+  outlinePane: PluginFactory(OutlinePane),
+  eventBindDialog:PluginFactory(EventBindDialog),
+  variableBindDialog:PluginFactory(VariableBindDialog),
+  logo: PluginFactory(logo),
+  samplePreview: PluginFactory(SamplePreview)
+};

packages/demo/src/editor/config/components.js

@@ -6,7 +6,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 eventBindDialog from '@ali/lowcode-plugin-event-bind-dialog';
+import variableBindDialog from '@ali/lowcode-plugin-variable-bind-dialog'
 export default {
   undoRedo,
   zhEn,
@@ -15,6 +16,7 @@ export default {
   settingsPane,
   outlinePane,
   eventBindDialog,
+  variableBindDialog,
   logo,
   samplePreview
 };

packages/demo/src/editor/config/skeleton.js

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

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

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

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

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

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

@@ -0,0 +1,38 @@
+{
+  "name": "@ali/lowcode-plugin-variable-bind-dialog",
+  "version": "0.8.0",
+  "description": "alibaba lowcode editor variable 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-variable-bind-dialog/src/index.scss

@@ -0,0 +1,90 @@
+.variable-dialog-body {
+  width: 730px;
+  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: 200px;
+      height: 392px;
+      border: 1px solid rgba(31, 56, 88, 0.3);
+      border-radius: 3px;
+
+      .variable-type-container {
+        width: 200px;
+        height: 390px;
+        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(128, 128, 128, 0.15);
+      }
+
+      .event-select-container {
+        width: 156px;
+        float: left;
+
+        .event-search-box {
+          width: 135px;
+          margin: 10px;
+        }
+      }
+
+      .event-list {
+        overflow-y: auto;
+        overflow-x: hidden;
+        height: 342px;
+      }
+
+      .variable-list{
+        font-size: 13px;
+        .variable-item{
+          padding-left: 30px;
+          cursor: pointer;
+          height: 30px;
+          line-height: 30px;
+        }
+
+        .variable-item:hover{
+          background-color: rgba(31, 56, 88, 0.06);
+        }
+      }
+    }
+  }
+
+  .dialog-right-container {
+    width: 530px;
+    padding-left: 20px;
+    float: left;
+
+    .event-input-container {
+      margin-bottom: 20px;
+    }
+  }
+}
+
+.variable-bind-dialog-bottom{
+  .bottom-left-container{
+    float: left;
+  }
+}

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

@@ -0,0 +1,166 @@
+import { Component, isValidElement, ReactElement, ReactNode } from 'react';
+import { Dialog, Search, Input ,Button} from '@alifd/next';
+import Editor from '@ali/lowcode-editor-core';
+import './index.scss';
+
+export default class VariableBindDialog extends Component<{
+  editor: Editor;
+}> {
+  private loopVariableList: any[] = [
+    {
+      name: 'item',
+    },
+    {
+      name: 'index',
+    },
+  ];
+
+  private stateVaroableList: any[] = [
+    {
+      name: 'abc',
+    },
+    {
+      name: 'title',
+    },
+    {
+      name: 'jdata',
+    },
+  ];
+
+  state = {
+    visiable: true,
+    selectedVariableName: '',
+    variableContext: '',
+  };
+
+  openDialog = (bindEventName: String) => {
+    this.setState({
+      visiable: true,
+      eventName: bindEventName,
+    });
+  };
+
+  closeDialog = () => {
+    this.setState({
+      visiable: false,
+    });
+  };
+
+  componentDidMount() {
+    const { editor, config } = this.props;
+    editor.on(`${config.pluginKey}.openDialog`, (bindEventName: String) => {
+      this.openDialog(bindEventName);
+    });
+  }
+
+  initEventName = () => {
+    const { bindEventName } = this.state;
+    let eventName = bindEventName;
+    this.eventList.map((item) => {
+      if (item.name === eventName) {
+        eventName = `${eventName}_new`;
+      }
+    });
+
+    this.setState({
+      eventName,
+    });
+  };
+
+  onInputChange = (eventName: String) => {
+    this.setState({
+      eventName,
+    });
+  };
+
+  onSelectItem = (variableName: String) => {
+    this.setState({
+      selectedVariableName:variableName,
+      variableContext:variableName
+    });
+
+    // // 为空是新建事件
+    // if (variableName === '') {
+    //   this.initEventName();
+    // } else {
+    //   this.setState({
+    //     selectedEventName: eventName,
+    //     eventName,
+    //   });
+    // }
+  };
+
+
+  onOk = () => {
+    const { editor } = this.props;
+    editor.emit('event-setter.bindEvent', this.state.eventName);
+    this.closeDialog();
+  };
+
+  renderBottom = () => {
+      return (
+        <div className="variable-bind-dialog-bottom">
+            <div className="bottom-left-container">
+              <Button type="normal" warning>移除绑定</Button>
+            </div>
+
+            <div className="bottom-right-container">
+              <Button type="primary" onClick={this.onOk}>确定</Button>&nbsp;&nbsp;
+              <Button type="normal" onClick={this.closeDialog}>取消</Button>
+            </div>
+        </div>
+      )
+  }
+
+  render() {
+    const { selectedEventName, eventName, visiable ,variableContext} = this.state;
+    return (
+      <Dialog
+        visible={visiable}
+        title="变量绑定"
+        onClose={this.closeDialog}
+        onCancel={this.closeDialog}
+        onOk={this.onOk}
+        footer={this.renderBottom()}
+      >
+        <div className="variable-dialog-body">
+          <div className="dialog-left-container">
+            <div className="dialog-small-title">变量选择</div>
+
+            <div className="dialog-left-context">
+              <div className="variable-type-container">
+                <div>
+                  <div className="select-item select-item-active">当前上下文</div>
+                  <div className="variable-list">
+                    {this.loopVariableList.map((item) => (
+                      <div className="variable-item" onClick={()=>this.onSelectItem(item.name)}>
+                        <span>{item.name}</span>
+                      </div>
+                    ))}
+                  </div>
+                </div>
+
+                <div className="select-item select-item-active">State属性</div>
+                <div className="variable-list">
+                  {this.stateVaroableList.map((item) => (
+                    <div className="variable-item" onClick={()=>this.onSelectItem(item.name)}>
+                      <span>{item.name}</span>
+                    </div>
+                  ))}
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <div className="dialog-right-container">
+            <div className="dialog-small-title">绑定</div>
+            <Input.TextArea style={{ width: '100%', height: '219px' }} value={variableContext}/>
+
+            <div className="dialog-small-title" style={{marginTop:'13px'}}>帮助</div>
+            <Input.TextArea style={{ width: '100%', height: '137px' }} />
+          </div>
+        </div>
+      </Dialog>
+    );
+  }
+}

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

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