Merge remote-tracking branch 'origin/components-panel' into refactor/react-renderer

packages/demo/public/schema.json

@@ -49,7 +49,7 @@
         "initValue": "李雷"
       },
       "children": [{
-        "componentName": "From.Input",
+        "componentName": "Input",
         "props": {
           "placeholder": "请输入",
           "size": "medium",
@@ -94,7 +94,7 @@
         }
       }]
     }, {
-      "componentName": "Box",
+      "componentName": "Form.Item",
       "props": {
         "style": {
           "textAlign": "center"
@@ -112,7 +112,15 @@
             },
             "htmlType": "submit"
           },
-          "children": "提交"
+          "children": [
+            {
+              "componentName": "Icon",
+              "props": {
+                "type": "success"
+              }
+            },
+            "提交"
+          ]
         }, {
           "componentName": "Button",
           "props": {

packages/demo/src/editor/plugins/codeout.tsx

@@ -14,6 +14,14 @@ const Codeout = ({ editor }: PluginProps) => {
   const handleClick = () => {
     const designer = editor.get(Designer);
     if (designer) {
+      const assets = editor.get('assets');
+      console.log(assets.components);
+
+      const componentsMap = assets.components.map((c) => ({
+        componentName: c.componentName,
+        ...(c.npm || {}),
+      }));
+
       const fullSchema = {
         ...designer.schema,
         config: {
@@ -23,30 +31,28 @@ const Codeout = ({ editor }: PluginProps) => {
         meta: {
           name: 'demoproject',
         },
+        componentsMap,
       };
 
       console.info('codeout schema:', fullSchema);
-      // localStorage.setItem('lce-dev-store', JSON.stringify(designer.schema));
+      // fetch(`http://${CODEOUT_SERVICE_HOST}/api/generate/project`, {
-      fetch(`http://${CODEOUT_SERVICE_HOST}/api/generate/project`, {
+      //   method: 'POST',
-        method: 'POST',
+      //   body: JSON.stringify({ schema: JSON.stringify(fullSchema) }),
-        body: JSON.stringify({ schema: JSON.stringify(fullSchema) }),
+      //   headers: new Headers({
-        headers: new Headers({
+      //     'Content-Type': 'application/json',
-          'Content-Type': 'application/json',
+      //   }),
-        }),
+      //   mode: 'cors',
-        mode: 'cors',
+      // }).then((res) => {
-      }).then((res) => {
+      //   const fileStream = streamSaver.createWriteStream('demoProject.zip');
-        console.log(res);
+      //   res.body.pipeTo(fileStream).then(
-
+      //     () => {
-        const fileStream = streamSaver.createWriteStream('demoProject.zip');
+      //       console.log('success');
-        res.body.pipeTo(fileStream).then(
+      //     },
-          () => {
+      //     (err) => {
-            console.log('success');
+      //       console.log(err);
-          },
+      //     },
-          (err) => {
+      //   );
-            console.log(err);
+      // });
-          },
-        );
-      });
     }
   };
 

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

@@ -33,15 +33,24 @@ export default class EventsSetter extends Component<{
     relatedEventName: '',
   };
 
-
+  // constructor (){
+  //   super();
+  //   debugger;
+  //   if (!this.props || !this.props.value){
+  //     this.setState({
+  //       eventDataList:[]
+  //     })
+  //   }
+  // }
 
   static getDerivedStateFromProps(nextProps, prevState) {
-    const { value } = nextProps;
+    // const { value } = nextProps;
-    if (value !== prevState.eventDataList) {
+    // debugger;
-      return {
+    // if (value !== prevState.eventDataList) {
-        value,
+    //   return {
-      };
+    //     value,
-    }
+    //   };
+    // }
     return null;
   }
 

packages/editor-skeleton/src/transducers/addon-combine.ts

@@ -179,7 +179,7 @@ export default function(metadata: TransformedComponentMetadata): TransformedComp
       title: { type: 'i18n', 'zh-CN': '事件', 'en-US': 'Events' },
       items: [
         {
-          name: '!events',
+          name: 'events',
           title: { type: 'i18n', 'zh-CN': '事件设置', 'en-US': 'Events' },
           setter: {
             componentName: 'EventsSetter',
@@ -188,12 +188,25 @@ export default function(metadata: TransformedComponentMetadata): TransformedComp
             },
           },
           getValue(field: SettingTarget, val?: any[]) {
-            // todo:
+            let eventDataList = []
-            return val;
+            for (let key in val){
+              if (val[key].__eventData){
+                eventDataList.push(val[key].__eventData)
+              }
+            }
+            return eventDataList;
           },
 
           setValue(field: SettingTarget, eventDataList: any[]) {
             // todo:
+            eventDataList.map((item)=>{
+              field.setPropValue(item.name,{
+                type: 'JSFunction',
+                value: `function(){ this.${item.relatedEventName}() }`,
+                __eventData:item
+              })
+              return item;
+            })
             return;
           },
         },

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

@@ -5,21 +5,21 @@ import './index.scss';
 
 export default class EventBindDialog extends Component<PluginProps> {
   private eventList: any[] = [
-    {
+    // {
-      name: 'getData',
+    //   name: 'getData',
-    },
+    // },
-    {
+    // {
-      name: 'deleteData',
+    //   name: 'deleteData',
-    },
+    // },
-    {
+    // {
-      name: 'initData',
+    //   name: 'initData',
-    },
+    // },
-    {
+    // {
-      name: 'editData',
+    //   name: 'editData',
-    },
+    // },
-    {
+    // {
-      name: 'submitData',
+    //   name: 'submitData',
-    },
+    // },
   ];
 
   state: any = {
@@ -41,10 +41,24 @@ export default class EventBindDialog extends Component<PluginProps> {
     });
   };
 
+
+
+
   componentDidMount() {
     const { editor, config } = this.props;
     editor.on(`${config.pluginKey}.openDialog`, (bindEventName: String) => {
       this.openDialog(bindEventName);
+
+      let schema = editor.get('designer').project.getSchema();
+      let pageNode = schema.componentsTree[0];
+      if (pageNode.methods){
+        this.eventList = [];
+        for (let key in pageNode.methods){
+          this.eventList.push({
+            name:key
+          })
+        }
+      }
     });
   }
 

packages/plugin-source-editor/src/index.tsx

@@ -258,7 +258,7 @@ export default class SourceEditor extends Component<{
               <MonacoEditor
                 value={jsCode}
                 {...defaultEditorOption}
-                {...{ language: 'typescript' }}
+                {...{ language: 'javascript' }}
                 onChange={(newCode) => this.updateCode(newCode)}
                 editorDidMount={(editor, monaco) => this.editorDidMount.call(this, editor, monaco,TAB_KEY.JS_TAB)}
               />

packages/react-renderer/src/renderer/base.jsx

@@ -308,7 +308,7 @@ export default class BaseRender extends PureComponent {
           ...componentInfo,
           props: transformArrayToMap(componentInfo.props, 'name'),
         },
-      });
+      }) || {};
       // 对于可以获取到ref的组件做特殊处理
       if (acceptsRef(Comp)) {
         otherProps.ref = (ref) => {

packages/react-renderer/src/utils/index.js

@@ -63,6 +63,8 @@ const ENV = {
  */
 export function isSchema(schema, ignoreArr) {
   if (isEmpty(schema)) return false;
+  // Leaf 组件也返回 true
+  if (schema.componentName === 'Leaf') return true;
   if (!ignoreArr && Array.isArray(schema)) return schema.every((item) => isSchema(item));
   return !!(schema.componentName && schema.props && (typeof schema.props === 'object' || isJSExpression(schema.props)));
 }

packages/react-simulator-renderer/src/renderer-view.tsx

@@ -108,6 +108,17 @@ class Renderer extends Component<{ renderer: SimulatorRenderer }> {
           const leaf = host.document.getNode(__id);
           viewProps._leaf = leaf;
           viewProps._componentName = leaf?.componentName;
+          // 如果是容器 && 无children && 高宽为空 增加一个占位容器，方便拖动
+          if (leaf.isContainer() && children == null && !viewProps.style){
+            Object.assign(viewProps, {
+              style:{
+                height:'100px',
+                backgroundColor:'#f0f0f0',
+                borderColor:'#666666',
+                border: '1px dotted'
+              }
+            })
+          }
 
           if (viewProps._componentName === 'Menu') {
             Object.assign(viewProps, {
@@ -128,11 +139,10 @@ class Renderer extends Component<{ renderer: SimulatorRenderer }> {
             });
             console.info('menuprops', viewProps);
           }
-
           return createElement(
             getDeviceView(Component, device, designMode),
             viewProps,
-            leaf?.isContainer() ? (children == null ? [] : Array.isArray(children) ? children : [children]) : null,
+            leaf?.isContainer() ? (children == null ? [] : Array.isArray(children) ? children : [children]) : children,
           );
         }}
         onCompGetRef={(schema: any, ref: ReactInstance | null) => {