Merge branch 'fix/slot-setter' into 'release/1.0.0'

Fix/slot setter



See merge request !1007162

packages/demo/package.json

@@ -5,7 +5,8 @@
   "description": "低代码引擎 DEMO",
   "scripts": {
     "cloud-build": "build-scripts build --config cloud-build.json",
-    "start": "build-scripts start"
+    "start": "build-scripts start",
+    "build": "build-scripts build"
   },
   "config": {},
   "dependencies": {

packages/demo/src/editor/config.ts

@@ -123,6 +123,9 @@ export default {
       const simulatorUrl = [
         'https://dev.g.alicdn.com/ali-lowcode/ali-lowcode-engine/0.9.50/react-simulator-renderer.css',
         'https://dev.g.alicdn.com/ali-lowcode/ali-lowcode-engine/0.9.50/react-simulator-renderer.js',
+        // for debug
+        // 'http://localhost:3333/js/react-simulator-renderer.js',
+        // 'http://localhost:3333/js/react-simulator-renderer.css',
       ];
       editor.set('simulatorUrl', simulatorUrl);
       // editor.set('renderEnv', 'rax');

packages/editor-skeleton/src/components/popup/index.tsx

@@ -1,6 +1,6 @@
 import { createContext, ReactNode, Component, PureComponent } from 'react';
 import { EventEmitter } from 'events';
-import { Balloon } from '@alifd/next';
+import { Drawer } from '@alifd/next';
 import { uniqueId } from '@ali/lowcode-utils';
 import './style.less';
 
@@ -67,6 +67,7 @@ export default class PopupService extends Component<{ popupPipe?: PopupPipe; act
     this.popupPipe.purge();
   }
 
+
   render() {
     const { children, actionKey, safeId } = this.props;
     return (
@@ -83,7 +84,7 @@ export class PopupContent extends PureComponent<{ safeId?: string }> {
 
   state: any = {
     visible: false,
-    pos: {},
+    offsetX: -300,
   };
 
   private dispose = (this.context as PopupPipe).onPopupChange((props, target) => {
@@ -102,44 +103,47 @@ export class PopupContent extends PureComponent<{ safeId?: string }> {
     this.setState(state);
   });
 
+  componentDidMount() {
+    const clientWidth = document.documentElement.clientWidth || document.body.clientWidth;
+    if (clientWidth >= 1860) {
+      this.setState({
+        offsetX: -400,
+      });
+    }
+  }
+
   componentWillUnmount() {
     this.dispose();
   }
 
+  onClose = () => {
+    this.setState({
+      visible: false,
+    });
+  };
+
   render() {
-    const { content, visible, width, title, pos, actionKey } = this.state;
+    const { content, visible, title, actionKey, offsetX } = this.state;
     if (!visible) {
       return null;
     }
-    let avoidLaterHidden = true;
-    setTimeout(() => {
-      avoidLaterHidden = false;
-    }, 10);
+
 
     const id = uniqueId('ball');
 
     return (
-      <Balloon
-        className="lc-ballon"
-        align="l"
-        id={this.props.safeId}
-        alignEdge
-        safeNode={id}
+      <Drawer
+        width={360}
         visible={visible}
-        style={{ width }}
-        onVisibleChange={(visible, type) => {
-          if (avoidLaterHidden) {
-            return;
-          }
-          if (!visible && type === 'closeClick') {
-            this.setState({ visible: false });
-          }
-        }}
-        trigger={<div className="lc-popup-placeholder" style={pos} />}
+        offset={[offsetX, 0]}
+        hasMask={false}
         triggerType="click"
+        canCloseByOutSideClick={false}
         animation={false}
-        needAdjust
-        shouldUpdatePosition
+        onClose={this.onClose}
+        id={this.props.safeId}
+        safeNode={id}
+        closeable
       >
         <div className="lc-ballon-title">{title}</div>
         <div className="lc-ballon-content">
@@ -147,7 +151,7 @@ export class PopupContent extends PureComponent<{ safeId?: string }> {
             {content}
           </PopupService>
         </div>
-      </Balloon>
+      </Drawer>
     );
   }
 }

packages/editor-skeleton/src/components/slot-setter/index.less

@@ -1,7 +1,12 @@
 .lc-setter-slot {
   display: flex;
-  align-items: center;
+  align-items: start;
   .lc-slot-params {
-    margin-left: 5px;
+    margin-top: 5px;
   }
 }
+
+.lc-setter-slot-column {
+  display: flex;
+  flex-direction: column;
+}

packages/editor-skeleton/src/components/slot-setter/index.tsx

@@ -34,9 +34,11 @@ export default class SlotSetter extends Component<{
         </Button>
       );
     }
+
+
     const hasParams = value.params && Array.isArray(value.params);
     return (
-      <div className="lc-setter-slot">
+      <div className="lc-setter-slot lc-setter-slot-column">
         <Button
           onClick={() => {
             // TODO: use slot first child literal value pad
@@ -59,7 +61,7 @@ export default class SlotSetter extends Component<{
               onChange &&
                 onChange({
                   ...value,
-                  params,
+                  params: params.length == 0 ? [''] : params,
                 });
             }}
             addonAfter={
@@ -67,10 +69,10 @@ export default class SlotSetter extends Component<{
                 type="secondary"
                 onClick={() => {
                   onChange &&
-                    onChange({
-                      type: 'JSSlot',
-                      value: value.value,
-                    });
+                  onChange({
+                    ...value,
+                    params: [''],
+                  });
                 }}
               >
                 <Icon type="close" />

packages/editor-skeleton/src/components/stage-box/stage-box.tsx

@@ -5,6 +5,7 @@ import { SettingTopEntry, SettingField } from '@ali/lowcode-designer';
 import StageChain from './stage-chain';
 import Stage from './stage';
 import { Skeleton } from '../../skeleton';
+import PopupService, { PopupPipe } from '../popup';
 import { Stage as StageWidget } from '../../widget/stage';
 
 export const StageBoxDefaultProps = {};
@@ -22,6 +23,8 @@ type WillDetachMember = () => void;
 
 @observer
 export default class StageBox extends Component<StageBoxProps> {
+
+
   static defaultProps = StageBoxDefaultProps;
 
   static displayName = 'StageBox';
@@ -32,6 +35,10 @@ export default class StageBox extends Component<StageBoxProps> {
 
   private shell: HTMLElement | null;
 
+  private popupPipe = new PopupPipe();
+
+  private pipe = this.popupPipe.create();
+
   constructor(props: StageBoxProps) {
     super(props);
     const { stageChain, children, skeleton } = this.props;
@@ -114,8 +121,13 @@ export default class StageBox extends Component<StageBoxProps> {
         }}
         className={className}
       >
-        {contentRefer}
-        {contentCurrent}
+
+        <PopupService popupPipe={this.popupPipe}>
+
+          {contentRefer}
+          {contentCurrent}
+
+        </PopupService>
       </div>
     );
   }

packages/plugin-sample-preview/src/index.tsx

@@ -13,6 +13,9 @@ const SamplePreview = ({ editor }: PluginProps) => {
     if (!editor) {
       return;
     }
+    // 由于monaco editor的cdn加载形式会占用define字段，导致预览的时候部分next组件加载异常，所以预览弹框的时候需要对define做一个临时的替换
+    window.__define = window.define;
+    window.define = null;
     const designer = editor.get(Designer);
     if (designer) {
       const assets = await editor.get('assets');
@@ -46,11 +49,16 @@ const SamplePreview = ({ editor }: PluginProps) => {
         components,
       });
       setVisible(true);
+
+
     }
   }
 
   function handleClose() {
+    window.define = window.__define;
     setVisible(false);
+
+
   }
 
   const { schema, components } = data;

packages/plugin-source-editor/src/transform.ts

@@ -7,7 +7,7 @@ const transfrom = {
   schema2Code(schema) {
     const componentSchema = schema.componentsTree[0];
     const code =
-      `export default class {
+      `export default class LowcodeComponent extends Component {
   ${initStateCode(componentSchema)}
   ${initLifeCycleCode(componentSchema)}
   ${initMethodsCode(componentSchema)}
@@ -17,40 +17,118 @@ const transfrom = {
   },
 
   code2Schema(code: string) {
-    const newCode = code.replace(/export default class/, 'class A');
-    let A; let a;
-    try {
-      // eslint-disable-next-line no-eval
-      A = eval(`(${newCode})`);
-      a = new A();
-    } catch (e) {
-      console.log(e.message);
-      return null;
-    }
-
-    // eslint-disable-next-line no-proto
-    const functionNameList = Object.getOwnPropertyNames(a.__proto__);
-
+    let codeNew = code;
     const functionMap = {};
+    let startIndex;
 
-    functionNameList.map((functionName) => {
-      if (functionName != 'constructor') {
-        if (a[functionName]) {
-          const functionCode = a[functionName].toString().replace(new RegExp(functionName), 'function');
-          functionMap[functionName] = functionCode;
-        }
-      }
-      return functionName;
-    });
-
-    if (a.state) {
-      functionMap.state = a.state;
+    const stateStartStr = this.pickupStateStartStr(codeNew);
+    if (stateStartStr != null) {
+      startIndex = codeNew.indexOf(stateStartStr) + stateStartStr.length;
+      const stateBodyStr = this.pickupFunctionBody(codeNew, startIndex);
+      const stateData = JSON.parse('{' + stateBodyStr);
+      functionMap.state = stateData;
     }
 
+
+    while (true) {
+      const functionNameStr = this.pickupFunctionName(codeNew);
+      if (functionNameStr != null) {
+        startIndex = codeNew.indexOf(functionNameStr) + functionNameStr.length;
+        const functionBodyStr = this.pickupFunctionBody(codeNew, startIndex);
+        const functionStr = functionNameStr + functionBodyStr;
+        codeNew = codeNew.replace(functionStr, '');
+        const functionName = functionNameStr.match(/\w+/);
+        functionMap[functionName] = functionStr.replace(functionName, 'function');
+      } else {
+        break;
+      }
+    }
+
+
+    // debugger;
+    // const newCode = code.replace(/export default class LowcodeComponent extends Component/, 'class A');
+    // let A; let a;
+    // try {
+    //   // eslint-disable-next-line no-eval
+    //   A = eval(`(${newCode})`);
+    //   a = new A();
+    // } catch (e) {
+    //   console.log(e.message);
+    //   return null;
+    // }
+
+    // // eslint-disable-next-line no-proto
+    // const functionNameList = Object.getOwnPropertyNames(a.__proto__);
+
+    // const functionMap = {};
+    // functionNameList.map((functionName) => {
+    //   if (functionName != 'constructor') {
+    //     if (a[functionName]) {
+    //       const functionCode = a[functionName].toString().replace(new RegExp(functionName), 'function');
+    //       functionMap[functionName] = functionCode;
+    //     }
+    //   }
+    //   return functionName;
+    // });
+
+    // if (a.state) {
+    //   functionMap.state = a.state;
+    // }
+
     console.log(functionMap);
     return functionMap;
   },
 
+
+  pickupFunctionName(codeStr) {
+    // 函数名的正则表达式
+    // eslint-disable-next-line no-useless-escape
+    const reg = /\w+\s?\((\w|\,|\s)*\)\s?\{/;
+    const result = codeStr.match(reg);
+    if (result && result[0]) {
+      const functionNameStr = result[0];
+      return functionNameStr;
+    }
+    return null;
+  },
+
+  pickupFunctionBody(codeStr, startIndex) {
+    const startStr = codeStr.substr(startIndex);
+    const stack = []; let endIndex;
+    for (let i = 0; i < startStr.length; i++) {
+      // 如果发现已经有{,则是内函数或者是系统函数，需要进行排除
+      if (startStr[i] === '{') {
+        stack.push(i);
+      }
+
+      // 判断是否是函数体的结尾
+      if (startStr[i] === '}') {
+        // 有内函数，出栈
+        if (stack.length > 0) {
+          stack.pop();
+        } else {
+          endIndex = i;
+          break;
+        }
+      }
+    }
+
+    const functionBodyStr = startStr.substr(0, endIndex + 1);
+    // console.log(functionBodyStr);
+    return functionBodyStr;
+  },
+
+  // 捕获state头部部分
+  pickupStateStartStr(codeStr) {
+    const reg = /state\s?=\s?\s?\{/;
+    const result = codeStr.match(reg);
+    if (result && result[0]) {
+      const stateStartStr = result[0];
+      return stateStartStr;
+    }
+    return null;
+  },
+
   getNewFunctionCode(functionName: string) {
     return `\n\t${functionName}(){\n\t}\n`;
   },