Merge branch 'release/1.0.0' of gitlab.alibaba-inc.com:ali-lowcode/ali-lowcode-engine into release/1.0.0

packages/demo/public/assets.json

@@ -3831,38 +3831,24 @@
         "subName": ""
       },
       "props": [
-        {
-          "name": "prefix",
-          "propType": "string",
-          "description": "样式前缀",
-          "defaultValue": "next-"
-        },
-        {
-          "name": "style",
-          "propType": "object",
-          "description": "组件接受行内样式"
-        },
         {
           "name": "dataSource",
-          "propType": {
-            "type": "instanceOf",
-            "value": "array"
-          },
+          "propType": "Json",
           "description": "使用数据模型构建"
         },
         {
           "name": "defaultExpandedKeys",
           "propType": {
-            "type": "instanceOf",
-            "value": "array"
+            "type": "arrayOf",
+            "value": "string"
           },
           "description": "默认展开keys"
         },
         {
           "name": "expandedKeys",
           "propType": {
-            "type": "instanceOf",
-            "value": "array"
+            "type": "arrayOf",
+            "value": "string"
           },
           "description": "受控展开keys"
         },
@@ -3881,32 +3867,31 @@
           "propType": "string",
           "description": "扩展class"
         },
+        {
+          "name": "style",
+          "propType": "object",
+          "description": "组件接受行内样式"
+        },
         {
           "name": "accordion",
           "propType": "bool",
           "description": "手风琴模式，一次只能打开一个",
           "defaultValue": false
         },
-        {
-          "name": "children",
-          "propType": {
-            "type": "instanceOf",
-            "value": "node"
-          }
-        },
-        {
-          "name": "id",
-          "propType": "string"
-        },
         {
           "name": "rtl",
           "propType": "bool"
         }
-      ]
+      ],
+      "configure": {
+        "component": {
+          "isContainer": true
+        }
+      }
     },
     {
-      "componentName": "Panel",
-      "title": "Panel",
+      "componentName": "Collapse.Panel",
+      "title": "Collapse.Panel",
       "docUrl": "",
       "screenshot": "",
       "npm": {
@@ -3919,25 +3904,14 @@
       },
       "props": [
         {
-          "name": "prefix",
-          "propType": "string",
-          "description": "样式类名的品牌前缀",
-          "defaultValue": "next-"
+          "name": "children",
+          "propType": "any"
         },
         {
           "name": "style",
           "propType": "object",
           "description": "子组件接受行内样式"
         },
-        {
-          "name": "children",
-          "propType": "any"
-        },
-        {
-          "name": "isExpanded",
-          "propType": "bool",
-          "defaultValue": false
-        },
         {
           "name": "disabled",
           "propType": "bool",
@@ -3950,21 +3924,15 @@
             "value": "node"
           },
           "description": "标题"
-        },
-        {
-          "name": "className",
-          "propType": "string",
-          "description": "扩展class"
-        },
-        {
-          "name": "onClick",
-          "propType": "func"
-        },
-        {
-          "name": "id",
-          "propType": "string"
         }
-      ]
+      ],
+      "configure": {
+        "component": {
+          "nestingRule": {
+            "parentWhitelist": ["Collapse"]
+          }
+        }
+      }
     },
     {
       "componentName": "ErrorBoundary",
@@ -14073,10 +14041,8 @@
                   "prefix": "next-"
                 },
                 "children": [{
-                  "componentName": "Panel",
+                  "componentName": "Collapse.Panel",
                   "props": {
-                    "prefix": "next-",
-                    "isExpanded": true,
                     "title": "面板标题"
                   }
                 }]
@@ -14084,6 +14050,26 @@
             }
           ]
         },
+        {
+          "componentName": "Collapse.Panel",
+          "title": "折叠面板Panel",
+          "icon": "",
+          "package": "@alifd/next",
+          "library": "Next",
+          "snippets": [
+            {
+              "title": "折叠面板Panel",
+              "screenshot": "https://alifd.oss-cn-hangzhou.aliyuncs.com/fusion-cool/icons/icon-light/ic_light_collapse.png",
+              "schema": {
+                "componentName": "Collapse.Panel",
+                "props": {
+                  "prefix": "next-",
+                  "title": "面板标题"
+                }
+              }
+            }
+          ]
+        },
         {
           "componentName": "List",
           "title": "列表",

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

@@ -18,6 +18,8 @@ const DEFINITION_EVENT_TYPE = {
   LIFE_CYCLE_EVENT: 'lifeCycleEvent',
 };
 
+const SETTER_NAME = 'event-setter'
+
 export default class EventsSetter extends Component<{
   value: any[];
   onChange: (eventList: any[]) => void;
@@ -61,7 +63,7 @@ export default class EventsSetter extends Component<{
     const {editor} = this.props.field;
     this.initEventBtns();
     this.initEventList();
-    editor.on('event-setter.bindEvent',(relatedEventName)=>{
+    editor.on(`${SETTER_NAME}.bindEvent`,(relatedEventName)=>{
       this.bindEvent(relatedEventName);
     })
 
@@ -328,7 +330,7 @@ export default class EventsSetter extends Component<{
   openDialog = (bindEventName: String) => {
     const {editor} = this.props.field;
     this.bindEventName = bindEventName;
-    editor.emit('eventBindDialog.openDialog',bindEventName);
+    editor.emit('eventBindDialog.openDialog',bindEventName,SETTER_NAME);
   };
 
 

packages/editor-setters/src/function-setter/index.scss

@@ -0,0 +1,30 @@
+.lc-function-setter{
+
+  .function-container{
+    position: relative;
+    
+  }
+
+  .funtion-icon{
+    float: left;
+    width: 25px;
+    height: 25px;
+  }
+
+  .function-name{
+    font-size: 14px;
+    color:#5584FF;
+    margin-left:5px;
+    cursor: pointer;
+  
+  }
+
+  .funtion-operate-icon{
+    font-size: 16px;
+    margin-left:5px;
+    cursor: pointer;
+  }
+}
+
+
+

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

@@ -0,0 +1,123 @@
+import React, { PureComponent } from 'react';
+// import PropTypes from 'prop-types';
+import { Button, Icon } from '@alifd/next';
+
+import './index.scss';
+import { timingSafeEqual } from 'crypto';
+
+const SETTER_NAME = 'function-setter'
+
+interface FunctionSetterProps {
+  value: string;
+  type: string;
+  defaultValue: string;
+  placeholder: string;
+  hasClear: boolean;
+  onChange: (icon: string | object) => undefined;
+  icons: string[];
+}
+export default class FunctionSetter extends PureComponent<FunctionSetterProps, {}> {
+  static defaultProps = {
+    value: undefined,
+    type: 'string',
+    defaultValue: '',
+    hasClear: true,
+    placeholder: '请点击选择 Icon',
+    onChange: (icon: string | object) => undefined,
+  };
+
+  private emitEventName = '';
+
+  state = {
+    firstLoad: true,
+  };
+
+  componentDidMount() {
+    const { editor } = this.props.field;
+    this.emitEventName = `${SETTER_NAME}-${this.props.field.id}`;
+    editor.on(`${this.emitEventName}.bindEvent`, this.bindEvent)
+  }
+
+  bindEvent = (eventName) => {
+    this.bindEventCallback(eventName);
+  }
+
+
+  componentWillUnmount() {
+    const { editor } = this.props.field;
+    editor.off(`${this.emitEventName}.bindEvent`, this.bindEvent)
+  }
+
+
+  bindFunction = () => {
+    const { field, value } = this.props;
+    field.editor.emit('eventBindDialog.openDialog', field.name, this.emitEventName);
+  }
+
+  removeFunctionBind = () => {
+    const { field ,removeProp} = this.props;
+    removeProp();
+  }
+
+  parseFunctionName = (functionString: String) => {
+    // 因为函数格式是固定的，所以可以按照字符换去匹配获取函数名
+    let funNameStr = functionString.split('.')[1];
+    let endIndex = funNameStr.indexOf('(');
+    
+    return funNameStr.substr(0, endIndex);
+
+  }
+
+  /**
+   * 渲染按钮(初始状态)
+   */
+  renderButton = () => {
+    return <Button type="primary" onClick={() => this.bindFunction()}>绑定函数</Button>
+  }
+
+  focusFunctionName = (functionName) => {
+    const { editor } = this.props.field;
+
+    editor.get('skeleton').getPanel('sourceEditor').show();
+
+    setTimeout(() => {
+      editor.emit('sourceEditor.focusByFunction', {
+        functionName
+      })
+    }, 300)
+  }
+
+  /**
+   * 渲染绑定函数
+   */
+  renderBindFunction = () => {
+    const { value } = this.props;
+    // 解析函数名
+    let functionName = this.parseFunctionName(value.value);
+    // let functionName = 'onClick';
+    return <div className="function-container">
+      <img className="funtion-icon" src="https://gw.alicdn.com/tfs/TB1os6KRFT7gK0jSZFpXXaTkpXa-200-200.png"></img>
+      <span className="function-name" onClick={() => this.focusFunctionName(functionName)}>{functionName}</span>
+      <Icon type="set" size="medium" className="funtion-operate-icon" onClick={this.bindFunction} />
+      <Icon type="ashbin" size="medium" className="funtion-operate-icon" onClick={this.removeFunctionBind} />
+    </div>
+  }
+
+
+  bindEventCallback = (eventName: String) => {
+    const { onChange } = this.props;
+    onChange({
+      type: 'JSFunction',
+      value: `function(){ this.${eventName}() }`,
+    });
+  }
+
+  render() {
+    const { value } = this.props;
+    return <div className="lc-function-setter">
+      {
+        value ? this.renderBindFunction() : this.renderButton()
+      }
+    </div>;
+  }
+}

packages/editor-setters/src/index.tsx

@@ -8,6 +8,7 @@ import JsonSetter from './json-setter';
 import EventsSetter from './events-setter';
 import StyleSetter from './style-setter';
 import IconSetter from './icon-setter';
+import FunctionSetter from './function-setter';
 // import MixedSetter from './mixed-setter';
 
 export const StringSetter = {
@@ -109,6 +110,7 @@ const builtinSetters: any = {
   JsonSetter,
   StyleSetter,
   IconSetter,
+  FunctionSetter
 };
 
 registerSetter(builtinSetters);

packages/editor-skeleton/src/components/settings/settings-pane.tsx

@@ -142,6 +142,10 @@ class SettingFieldView extends Component<{ field: SettingField }> {
             });
             field.setValue(value);
           },
+
+          removeProp:()=>{
+            field.parent.clearPropValue(field.name);
+          }
         }),
       extraProps.forceInline ? 'plain' : extraProps.display,
     );

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

@@ -24,6 +24,7 @@ export default class EventBindDialog extends Component<PluginProps> {
 
   state: any = {
     visiable: false,
+    setterName:'event-setter',
     selectedEventName: '',
     eventName: '',
   };
@@ -46,8 +47,11 @@ export default class EventBindDialog extends Component<PluginProps> {
 
   componentDidMount() {
     const { editor, config } = this.props;
-    editor.on(`${config.pluginKey}.openDialog`, (bindEventName: String) => {
+    editor.on(`${config.pluginKey}.openDialog`, (bindEventName: String,setterName:String) => {
       this.openDialog(bindEventName);
+      this.setState({
+        setterName
+      })
 
       let schema = editor.get('designer').project.getSchema();
       let pageNode = schema.componentsTree[0];
@@ -102,7 +106,10 @@ export default class EventBindDialog extends Component<PluginProps> {
 
   onOk = () => {
     const { editor } = this.props;
-    editor.emit('event-setter.bindEvent', this.state.eventName);
+    const {setterName,eventName} = this.state;
+
+    editor.emit(`${setterName}.bindEvent`, eventName);
+
     // 选中的是新建事件
     if (this.state.selectedEventName == '') {
       // 判断面板是否处于激活状态