From 138e36b5ae84ecb0ac73faa80f5be9dd655e12e3 Mon Sep 17 00:00:00 2001
From: "zude.hzd" <zude.hzd@alibaba-inc.com>
Date: Wed, 2 Sep 2020 22:57:45 +0800
Subject: [PATCH] fix-mixsetter bugs

---
 packages/demo/public/assets.json              |   8 +-
 .../src/function-setter/index.tsx             | 104 ++++++++++++++++--
 .../src/components/popup/index.tsx            |   4 +-
 3 files changed, 101 insertions(+), 15 deletions(-)

diff --git a/packages/demo/public/assets.json b/packages/demo/public/assets.json
index 095625619..24b3061c6 100644
--- a/packages/demo/public/assets.json
+++ b/packages/demo/public/assets.json
@@ -1137,11 +1137,7 @@
                       },{
                         "name": "callback",
                         "description": "callback",
-                        "propType": "JsonSetter",
-                        "defaultValue": {
-                          "type": "JSFunction",
-                          "value": "(rowData, action, table) => {\n return table.editRow(rowData).then((row) => {\n console.log(row);\n })}"
-                        }
+                        "setter": "FunctionSetter"
                       }]
                     }
                   },
@@ -1149,7 +1145,7 @@
                     "title": "Title",
                     "callback": {
                       "type": "JSFunction",
-                      "value": "(rowData, action, table) => {\n return table.editRow(rowData).then((row) => {\n console.log(row);\n })}"
+                      "value": "function(){}"
                     }
                   }
                 }
diff --git a/packages/editor-setters/src/function-setter/index.tsx b/packages/editor-setters/src/function-setter/index.tsx
index a823b42d4..397e131c5 100644
--- a/packages/editor-setters/src/function-setter/index.tsx
+++ b/packages/editor-setters/src/function-setter/index.tsx
@@ -1,12 +1,39 @@
 import React, { PureComponent } from 'react';
 // import PropTypes from 'prop-types';
-import { Button, Icon } from '@alifd/next';
-
+import { Button, Icon,Dialog } from '@alifd/next';
+import MonacoEditor from 'react-monaco-editor';
+import { js_beautify, css_beautify } from 'js-beautify';
 import './index.scss';
 import { timingSafeEqual } from 'crypto';
 
 const SETTER_NAME = 'function-setter'
 
+const defaultEditorOption = {
+  width: '100%',
+  height: '100%',
+  options: {
+    readOnly: false,
+    automaticLayout: true,
+    folding: true, //默认开启折叠代码功能
+    lineNumbers: 'on',
+    wordWrap: 'off',
+    formatOnPaste: true,
+    fontSize: 12,
+    tabSize: 2,
+    scrollBeyondLastLine: false,
+    fixedOverflowWidgets: false,
+    snippetSuggestions: 'top',
+    minimap: {
+      enabled: false,
+    },
+    scrollbar: {
+      vertical: 'auto',
+      horizontal: 'auto',
+    },
+  },
+};
+
+
 interface FunctionSetterProps {
   value: string;
   type: string;
@@ -30,6 +57,8 @@ export default class FunctionSetter extends PureComponent<FunctionSetterProps, {
 
   state = {
     firstLoad: true,
+    isShowDialog:false,
+    functionCode:null
   };
 
   componentDidMount() {
@@ -54,6 +83,22 @@ export default class FunctionSetter extends PureComponent<FunctionSetterProps, {
     field.editor.emit('eventBindDialog.openDialog', field.name, this.emitEventName);
   }
 
+  openDialog = () => {
+    const {value={}} = this.props;
+    this.setState({
+      isShowDialog:true
+    })
+
+    this.functionCode = value.value;
+    
+  }
+
+  closeDialog = () => {
+    this.setState({
+      isShowDialog:false
+    })
+  }
+
   removeFunctionBind = () => {
     const { field ,removeProp} = this.props;
     removeProp();
@@ -61,14 +106,14 @@ export default class FunctionSetter extends PureComponent<FunctionSetterProps, {
 
   parseFunctionName = (functionString: String) => {
     // 因为函数格式是固定的，所以可以按照字符换去匹配获取函数名
-    let funNameStr = functionString.split('.')[1];
+    let funNameStr = functionString.split('this.')[1];
 
 
     if (funNameStr){
       let endIndex = funNameStr.indexOf('(');
       return funNameStr.substr(0, endIndex);
     }else{
-      return '匿名函数'
+      return ''
     }
   }
 
@@ -79,6 +124,20 @@ export default class FunctionSetter extends PureComponent<FunctionSetterProps, {
     return <Button type="normal" onClick={() => this.bindFunction()}>绑定函数</Button>
   }
 
+  updateCode = (newCode) => {
+    this.functionCode = newCode;
+  }
+
+  onDialogOk = () => {
+    const {onChange} = this.props;
+    onChange({
+      type: 'JSFunction',
+      value: this.functionCode
+    });
+
+    this.closeDialog();
+  }
+
   focusFunctionName = (functionName) => {
     const { editor } = this.props.field;
 
@@ -96,11 +155,11 @@ export default class FunctionSetter extends PureComponent<FunctionSetterProps, {
    */
   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>
+      <img className="funtion-icon" src="https://gw.alicdn.com/tfs/TB1NXNhk639YK4jSZPcXXXrUFXa-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} />
@@ -108,6 +167,16 @@ export default class FunctionSetter extends PureComponent<FunctionSetterProps, {
   }
 
 
+  /**
+   * 渲染编辑函数按钮(可直接编辑函数内容)
+   */
+  renderEditFunctionButton = () => {
+      return <div>
+          <Button type="primary" onClick={this.openDialog}><Icon type="edit" />编辑函数</Button>
+      </div>
+  }
+
+
   bindEventCallback = (eventName: String) => {
     const { onChange } = this.props;
     onChange({
@@ -118,10 +187,31 @@ export default class FunctionSetter extends PureComponent<FunctionSetterProps, {
 
   render() {
     const { value } = this.props;
+    const {isShowDialog} = this.state;
+
+    let functionName = '';
+    if (value && value.value){
+      functionName = this.parseFunctionName(value.value);
+    }
     return <div className="lc-function-setter">
       {
-        value ? this.renderBindFunction() : this.renderButton()
+        value ? (functionName?this.renderBindFunction():this.renderEditFunctionButton()) : this.renderButton()
       }
+
+      {
+         value && value.value && <Dialog visible={isShowDialog} closeable={'close'} title="函数编辑" onCancel={this.closeDialog} onOk={this.onDialogOk} onClose={()=>{this.closeDialog()}}>
+         <div style={{width:'500px',height:'400px'}}>
+         <MonacoEditor
+               value={js_beautify(value.value)}
+               {...defaultEditorOption}
+               {...{ language: 'javascript' }}
+               onChange={(newCode) => this.updateCode(newCode)}
+             />
+         </div>
+         </Dialog>
+      }
+      
+
     </div>;
   }
 }
diff --git a/packages/editor-skeleton/src/components/popup/index.tsx b/packages/editor-skeleton/src/components/popup/index.tsx
index f52b7904d..43b3f20a6 100644
--- a/packages/editor-skeleton/src/components/popup/index.tsx
+++ b/packages/editor-skeleton/src/components/popup/index.tsx
@@ -125,11 +125,11 @@ export class PopupContent extends PureComponent<{ safeId?: string }> {
         safeNode={id}
         visible={visible}
         style={{ width }}
-        onVisibleChange={(visible) => {
+        onVisibleChange={(visible,type) => {
           if (avoidLaterHidden) {
             return;
           }
-          if (!visible) {
+          if (!visible && type === 'closeClick') {
             this.setState({ visible: false });
           }
         }}