daily tag

packages/editor/package.json

@@ -3,6 +3,8 @@
   "version": "0.0.1",
   "description": "低代码编辑器",
   "dependencies": {
+    "@ali/iceluna-addon-2": "^1.0.3",
+    "@ali/iceluna-sdk": "^1.0.5-beta.26",
     "@alifd/next": "^1.x",
     "@alife/dpl-iceluna": "^2.3.2",
     "@icedesign/theme": "^1.x",

packages/editor/src/config/components.js

@@ -1,5 +1,6 @@
 import logo from '../plugins/logo';
 import designer from '../plugins/designer';
+import undoRedo from '../plugins/undoRedo';
 import topBalloonIcon from '@ali/iceluna-addon-2';
 import topDialogIcon from '@ali/iceluna-addon-2';
 import leftPanelIcon from '@ali/iceluna-addon-2';
@@ -16,6 +17,7 @@ import PluginFactory from '../framework/pluginFactory';
 export default {
   logo: PluginFactory(logo),
   designer: PluginFactory(designer),
+  undoRedo: PluginFactory(undoRedo),
   topBalloonIcon: PluginFactory(topBalloonIcon),
   topDialogIcon: PluginFactory(topDialogIcon),
   leftPanelIcon: PluginFactory(leftPanelIcon),

packages/editor/src/config/skeleton.js

@@ -66,6 +66,25 @@ export default {
         },
         pluginProps: {}
       },
+      {
+        pluginKey: 'undoRedo',
+        type: 'Custom',
+        props: {
+          align: 'right',
+          width: 90
+        },
+        config: {
+          package: '@ali/lowcode-plugin-undo-redo',
+          version: '1.0.0'
+        }
+      },
+      {
+        pluginKey: 'divider',
+        type: 'Divider',
+        props: {
+          align: 'right'
+        }
+      },
       {
         pluginKey: 'topLinkIcon',
         type: 'LinkIcon',
@@ -234,7 +253,13 @@ export default {
         pluginProps: {}
       }
     ],
-    centerArea: []
+    centerArea: [{
+      pluginKey: 'designer',
+      config: {
+        package: '@ali/lowcode-plugin-designer',
+        version: '1.0.0'
+      }
+    }]
   },
   hooks: [],
   shortCuts: []

packages/editor/src/plugins/designer/index.scss

@@ -0,0 +1,5 @@
+.lowcode-plugin-designer {
+  background-color: #ffffff;
+  width: 100%;
+  height: 100%;
+}

packages/editor/src/plugins/designer/index.tsx

@@ -3,6 +3,8 @@ import React, { PureComponent } from 'react';
 import Editor from '../../framework/index';
 import { PluginConfig } from '../../framework/definitions';
 
+import Designer from '../../../../designer/src/designer/designer-view';
+
 import './index.scss';
 
 export interface PluginProps {
@@ -10,10 +12,141 @@ export interface PluginProps {
   config: PluginConfig;
 }
 
+const SCHEMA =  {
+  "componentName": "Page",
+  "fileName": "test",
+  "dataSource": {
+    "list": [{
+      "id": "getComponentsMap",
+      "isInit": true,
+      "type": "doServer",
+      "options": {
+        "method": "POST",
+        "params": {
+          "libVersionIds": "1"
+        },
+        "uri": "getComponentsMap"
+      }
+    }]
+  },
+  "state": {
+    "text": "outter"
+  },
+  "props": {
+    "ref": "outterView",
+    "autoLoading": true
+  },
+  "children": [{
+    "componentName": "Form",
+    "props": {
+      "labelCol": 4,
+      "onSubmit": function onSubmit(value, error, field) {
+        //form内有htmlType="submit"的元素的时候会触发
+        alert(JSON.stringify(value))
+      },
+      "style": {},
+      "ref": "testForm"
+    },
+    "children": [{
+      "componentName": "FormItem",
+      "props": {
+        "label": "姓名：",
+        "name": "name",
+        "initValue": "李雷"
+      },
+      "children": [{
+        "componentName": "Input",
+        "props": {
+          "placeholder": "请输入",
+          "size": "medium",
+          "style": {
+            "width": 320
+          }
+        }
+      }]
+    }, {
+      "componentName": "FormItem",
+      "props": {
+        "label": "年龄：",
+        "name": "age",
+        "initValue": "22"
+      },
+      "children": [{
+        "componentName": "NumberPicker",
+        "props": {
+          "size": "medium",
+          "type": "normal"
+        }
+      }]
+    }, {
+      "componentName": "FormItem",
+      "props": {
+        "label": "职业：",
+        "name": "profession"
+      },
+      "children": [{
+        "componentName": "Select",
+        "props": {
+          "dataSource": [{
+            "label": "教师",
+            "value": "t"
+          }, {
+            "label": "医生",
+            "value": "d"
+          }, {
+            "label": "歌手",
+            "value": "s"
+          }]
+        }
+      }]
+    }, {
+      "componentName": "Div",
+      "props": {
+        "style": {
+          "textAlign": "center"
+        }
+      },
+      "children": [{
+        "componentName": "ButtonGroup",
+        "props": {},
+        "children": [{
+          "componentName": "Button",
+          "props": {
+            "type": "primary",
+            "style": {
+              "margin": "0 5px 0 5px"
+            },
+            "htmlType": "submit"
+          },
+          "children": "提交"
+        }, {
+          "componentName": "Button",
+          "props": {
+            "type": "normal",
+            "style": {
+              "margin": "0 5px 0 5px"
+            },
+            "htmlType": "reset"
+          },
+          "children": "重置"
+        }]
+      }]
+    }]
+  }]
+}
+
 export default class DesignerPlugin extends PureComponent<PluginProps> {
   static displayName: 'LowcodePluginDesigner';
 
-  constructor(props) {}
+  constructor(props) {
+    super(props);
+  }
 
-  render() {}
+  render() {
+    return (
+    <div className="lowcode-plugin-designer">
+      <Designer defaultSchema={SCHEMA}/>
+
+    </div>);
+  }
 }

packages/editor/src/plugins/undoRedo/index.tsx

@@ -0,0 +1,22 @@
+import React, {useState} from 'react';
+import './index.scss';
+import Editor from '../../framework/index';
+import { PluginConfig } from '../../framework/definitions';
+import TopIcon from '../../skeleton/components/TopIcon/index';
+
+export interface PluginProps {
+  editor: Editor;
+  config: PluginConfig;
+  logo?: string;
+}
+
+export default function(props: PluginProps) {
+  const [backEnable, setBackEnable] = useState(true);
+  const [forwardEnable, setForwardEnable] = useState(true);
+  return (
+    <div className="lowcode-plugin-undo-redo">
+      <TopIcon icon="houtui" title="后退" disabled={!backEnable} />
+      <TopIcon icon="qianjin" title="前进" disabled={!forwardEnable} />
+    </div>
+  );
+}

packages/editor/src/skeleton/layouts/CenterArea/index.tsx

@@ -40,7 +40,7 @@ export default class CenterArea extends PureComponent<CenterAreaProps> {
       <div className="lowcode-center-area">
         {visiblePluginList.map(item => {
           const Comp = this.editor.components[item.pluginKey];
-          return <Comp editor={this.editor} config={item} {...item.pluginProps} />;
+          return <Comp key={item.pluginKey} editor={this.editor} config={item} {...item.pluginProps} />;
         })}
       </div>
     );