From 114b6b06ad1c2cd7003d2317784d964e8ef75e32 Mon Sep 17 00:00:00 2001
From: "zude.hzd" <zude.hzd@alibaba-inc.com>
Date: Tue, 18 Aug 2020 17:54:51 +0800
Subject: [PATCH] feat: add function setter

---
 .../src/function-setter/index.scss            | 46 ++++------
 .../src/function-setter/index.tsx             | 91 ++++++++++++++++---
 2 files changed, 97 insertions(+), 40 deletions(-)

diff --git a/packages/editor-setters/src/function-setter/index.scss b/packages/editor-setters/src/function-setter/index.scss
index 3638caf78..c11b6beb9 100644
--- a/packages/editor-setters/src/function-setter/index.scss
+++ b/packages/editor-setters/src/function-setter/index.scss
@@ -1,36 +1,30 @@
-.lc-icon-setter{
-  .next-input{
-    width: auto !important;
+.lc-function-setter{
+
+  .function-container{
+    position: relative;
+    
   }
-  i {
-    min-width: 12px;
+
+  .funtion-icon{
+    float: left;
+    width: 25px;
+    height: 25px;
   }
-  i:hover {
+
+  .function-name{
+    font-size: 14px;
+    color:#5584FF;
+    margin-left:5px;
     cursor: pointer;
+  
   }
-  input:hover {
+
+  .funtion-operate-icon{
+    font-size: 16px;
+    margin-left:5px;
     cursor: pointer;
   }
 }
 
 
-.lowcode-icon-setter-popup{
-  max-width: 354px;
-  .lowcode-icon-list{
-
-    overflow: auto;
-    li{
-      float: left;
-      margin-bottom: 10px;
-      width: 40px;
-      color: #666;
-      cursor: pointer;
-      text-align: center;
-
-      &:hover{
-        color: #000;
-      }
-    }
-  }
-}
 
diff --git a/packages/editor-setters/src/function-setter/index.tsx b/packages/editor-setters/src/function-setter/index.tsx
index 021d85878..0e5954a8d 100644
--- a/packages/editor-setters/src/function-setter/index.tsx
+++ b/packages/editor-setters/src/function-setter/index.tsx
@@ -1,8 +1,9 @@
 import React, { PureComponent } from 'react';
 // import PropTypes from 'prop-types';
-import { Button } from '@alifd/next';
+import { Button, Icon } from '@alifd/next';
 
 import './index.scss';
+import { timingSafeEqual } from 'crypto';
 
 const SETTER_NAME = 'function-setter'
 
@@ -25,25 +26,85 @@ export default class FunctionSetter extends PureComponent<FunctionSetterProps, {
     onChange: (icon: string | object) => undefined,
   };
 
+  private emitEventName = '';
+
   state = {
     firstLoad: true,
   };
 
   componentDidMount() {
-    const {editor} = this.props.field;
-    editor.on(`${SETTER_NAME}.bindEvent`,(eventName)=>{
-      this.bindEventCallback(eventName);
-    })
+    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 ,onChange} = this.props;
+    field.parent.clearPropValue(field.name);
+  }
+
+  parseFunctionName = (functionString: String) => {
+    // 因为函数格式是固定的，所以可以按照字符换去匹配获取函数名
+    let funNameStr = functionString.split('.')[1];
+    let endIndex = functionString.indexOf('(');
+    return funNameStr.substr(0, endIndex);
 
   }
 
-  bindFunction = () =>{
-    const {field,value} = this.props;
-    field.editor.emit('eventBindDialog.openDialog',field.name,SETTER_NAME);
+  /**
+   * 渲染按钮(初始状态)
+   */
+  renderButton = () => {
+    return <Button type="primary" onClick={() => this.bindFunction()}>绑定函数</Button>
   }
 
-  bindEventCallback = (eventName) => {
-    const {onChange} = this.props;
+  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}() }`,
@@ -51,9 +112,11 @@ export default class FunctionSetter extends PureComponent<FunctionSetterProps, {
   }
 
   render() {
-    const { icons, value, defaultValue, onChange, placeholder, hasClear, type } = this.props;
-    const { firstLoad } = this.state;
-
-    return <div className="lc-icon-setter"><Button type="primary" onClick={()=>this.bindFunction()}>绑定函数</Button></div>;
+    const { value } = this.props;
+    return <div className="lc-function-setter">
+      {
+        value ? this.renderBindFunction() : this.renderButton()
+      }
+    </div>;
   }
 }